/* ========== FASTO NAV ========== */
#fasto-nav, #fasto-nav * { box-sizing: border-box; }

/* Container */
.fasto-nav{ position:relative; width:100%; z-index:1000; transition:backdrop-filter .35s, background .35s, box-shadow .35s, border-color .35s; }
.fasto-nav.is-sticky{ position:fixed; top:0; left:0; }
.fasto-nav .fasto-nav-inner{
  height:78px; display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px, 4vw, 36px);
}

/* Glass states */
.fasto-nav.is-hero{ background:transparent; border-bottom-color:transparent; box-shadow:none; }
.fasto-nav.is-solid{
  background: rgba(10,16,24,.55);
  backdrop-filter: blur(12px) saturate(110%);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 36px rgba(0,0,0,.28);
}
/* Bright page at top → solid light glass with dark text */
.fasto-nav.solid-light{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 36px rgba(0,0,0,.08);
}

/* Brand */
.fasto-brand{
  font-weight:900; letter-spacing:.6px; text-decoration:none; color:#eaf7ff;
  font-size: clamp(18px, 2.6vw, 24px); text-shadow: 0 0 16px rgba(58,211,255,.18);
}

/* Desktop links */
.fasto-links{ display:flex; align-items:center; gap: clamp(16px, 2.6vw, 28px); }
.fasto-links.is-centered{ margin: 0 auto; }
.fasto-link{
  position:relative; display:inline-flex; align-items:center; height:44px; padding:0 .5rem;
  border-radius:10px; color:#f3fbff; text-decoration:none; font-weight:800;
  font-size: clamp(16px, 1.5vw, 18px); transition: color .25s, transform .25s, background .25s;
}
.fasto-link:hover{ color:#bff0ff; }
.fasto-link::after{
  content:""; position:absolute; left:12%; right:12%; bottom:6px; height:2px;
  background: linear-gradient(90deg, rgba(58,211,255,0), rgba(58,211,255,.9), rgba(123,91,255,0));
  transform: scaleX(0); transform-origin:left; transition: transform .3s ease;
}
.fasto-link:hover::after{ transform: scaleX(1); }

/* Dropdown (desktop) */
.fasto-dd{ position:relative; padding-bottom:8px; } /* easier to travel to panel */
.fasto-dd .caret{ width:8px; height:8px; margin-left:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform: rotate(45deg); transition: transform .25s; }
.fasto-dd.open .caret{ transform: rotate(225deg); }
.fasto-dd-toggle{ background:none; border:none; cursor:pointer; }
.fasto-dd-toggle:focus-visible{ outline:2px solid rgba(58,211,255,.6); outline-offset:3px; border-radius:8px; }

.fasto-dd-panel{
  position:absolute; top:calc(100% + 12px); left:50%; transform: translateX(-50%) translateY(-6px);
  min-width:200px; background:rgba(12,18,28,.86); backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:8px;
  box-shadow:0 14px 44px rgba(0,0,0,.35); opacity:0; pointer-events:none; transition: opacity .2s, transform .2s;
}
.fasto-dd.open .fasto-dd-panel{ opacity:1; pointer-events:auto; transform: translateX(-50%) translateY(0); }
.fasto-dd-panel a{
  display:block; padding:.65rem .85rem; border-radius:10px; color:#ecf7ff; text-decoration:none; font-weight:700;
}
.fasto-dd-panel a:hover{ background: rgba(255,255,255,.08); color:#fff; }

/* Burger (RIGHT) */
.fasto-burger{
  margin-left:auto; margin-right:0;
  width:36px; height:28px; position:relative; border:none; background:none; cursor:pointer;
  display:none; /* visible on mobile below */
  filter: drop-shadow(0 2px 8px rgba(58,211,255,.25));
}
.fasto-burger span{
  position:absolute; left:0; right:0; height:3px; background:#f4fbff; border-radius:2px;
  transform-origin:center; transition: transform .3s ease, opacity .3s ease, background .3s ease;
}
.fasto-burger span:nth-child(1){ top:0; }
.fasto-burger span:nth-child(2){ top:12px; }
.fasto-burger span:nth-child(3){ bottom:0; }
.fasto-burger.is-open span:nth-child(1){ transform: translateY(12px) rotate(45deg); }
.fasto-burger.is-open span:nth-child(2){ opacity:0; }
.fasto-burger.is-open span:nth-child(3){ transform: translateY(-12px) rotate(-45deg); }

/* Mobile overlay — clean list, same vibe as desktop */
.fasto-mobile[hidden]{ display:none !important; }
.fasto-mobile{
  position:fixed; inset:0; z-index:-1; background: rgba(6, 12, 18, .80); backdrop-filter: blur(12px);
  display:flex; align-items:center; justify-content:center; opacity:0; transition: opacity .25s;
}
.fasto-mobile.is-open{ z-index:999; opacity:1; }
.fasto-mobile-nav{ width:min(92vw, 520px); padding:0 16px; }

.fasto-mobile .m-link{
  display:block; padding:.95rem 1rem; color:#eaf7ff; text-decoration:none; font-weight:800; font-size:18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.fasto-mobile .m-link:first-child{ border-top:1px solid rgba(255,255,255,.08); }
.fasto-mobile .m-link:hover{ background:rgba(255,255,255,.06); border-radius:10px; }

/* Mobile dropdown */
.m-dd .m-dd-toggle{ width:100%; text-align:left; }
.m-dd .m-dd-panel{ display:none; padding-left:10px; }
.m-dd.open .m-dd-panel{ display:block; }
.m-dd .m-dd-panel a{ padding:.7rem 1rem; font-weight:700; }

/* Contrast switching on bright pages */
.fasto-nav[data-contrast="dark"] .fasto-link,
.fasto-nav[data-contrast="dark"] .fasto-brand{ color:#0b1520; text-shadow:none; }
.fasto-nav[data-contrast="dark"] .fasto-burger span{ background:#0b1520; }
.fasto-nav.auto-dark .fasto-link,
.fasto-nav.auto-dark .fasto-brand{ color:#0b1520; text-shadow:none; }
.fasto-nav.auto-dark .fasto-burger span{ background:#0b1520; }

/* Make the light solid state use dark text automatically */
.fasto-nav.solid-light .fasto-link,
.fasto-nav.solid-light .fasto-brand{ color:#0b1520; text-shadow:none; }
.fasto-nav.solid-light .fasto-burger span{ background:#0b1520; }

/* Responsive */
@media (max-width: 980px){
  .fasto-links{ display:none; }
  .fasto-burger{ display:inline-block; }
}

/* --- Mobile dropdown button: kill default white button styles --- */
.m-dd .m-dd-toggle{
  background: transparent !important;
  border: 0 !important;
  color: #eaf7ff;
  appearance: none; -webkit-appearance: none;
  padding: .95rem 1rem;
  width: 100%; text-align: left;
  font-weight: 800; font-size: 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.m-dd .m-dd-toggle:hover{ background: rgba(255,255,255,.06); border-radius: 10px; }
.m-dd .m-dd-toggle:focus{ outline: none; box-shadow: 0 0 0 2px rgba(58,211,255,.45) inset; border-radius: 10px; }

/* Children under Blog in mobile */
.m-dd .m-dd-panel{ padding-left: 10px; }
.m-dd .m-dd-panel a{ padding: .7rem 1rem; font-weight: 700; }

/* --- Burger: ensure it’s visible & above overlay while open --- */
.fasto-burger{ z-index: 1001; }                 /* above overlay (which is 999) */
.fasto-burger.is-open{ position: relative; }    /* keep layout, but you can switch to fixed if you prefer */
.fasto-burger.is-open span{ background: #fff; } /* crisp X */

/* Optional: make the X a tad bigger for clarity */
.fasto-burger.is-open span:nth-child(1){ transform: translateY(12px) rotate(45deg) scaleX(1.06); }
.fasto-burger.is-open span:nth-child(3){ transform: translateY(-12px) rotate(-45deg) scaleX(1.06); }


/* Make the overlay truly full-screen when portaled to <body> */
.fasto-mobile{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh; /* mobile-safe viewport */
}

/* Force white X while menu is open, regardless of page contrast */
.fasto-burger.is-open span{ background:#fff !important; }

/* On bright pages at the very top, we also want the burger visible pre-open */
.fasto-nav.solid-light .fasto-burger span{ background:#0b1520; }

/* ── FORCE the X to be visible above the overlay ─────────────────────────── */
.fasto-burger{
  z-index: 1002;                 /* above header content */
}

/* When open: pin it to top-right, crazy-high z-index, white bars */
.fasto-burger.is-open{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2147483647;           /* top of the world */
}

/* round glass chip behind the X so it reads on white pages */
.fasto-burger.is-open::before{
  content:"";
  position:absolute;
  left:-12px; right:-12px; top:-12px; bottom:-12px;
  background: rgba(6,12,18,.35);
  backdrop-filter: blur(6px) saturate(120%);
  border-radius: 999px;
}

/* X color: hard‑force white no matter the theme/contrast */
.fasto-burger.is-open span{
  background: #fff !important;
}

/* nicer X proportions */
.fasto-burger.is-open span:nth-child(1){ transform: translateY(12px) rotate(45deg) scaleX(1.08); }
.fasto-burger.is-open span:nth-child(2){ opacity: 0; }
.fasto-burger.is-open span:nth-child(3){ transform: translateY(-12px) rotate(-45deg) scaleX(1.08); }

/* --- BULLETPROOF X (max specificity & z-order) --- */
#fasto-nav .fasto-burger.is-open{
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 2147483647; /* above all */
}
#fasto-nav .fasto-burger.is-open::before{
  content:"";
  position:absolute; inset:-12px;
  background: rgba(6,12,18,.38);
  backdrop-filter: blur(8px) saturate(120%);
  border-radius: 999px;
}
/* force white bars even on bright pages */
#fasto-nav .fasto-burger.is-open span{ background:#fff !important; }
/* tidy morph */
#fasto-nav .fasto-burger.is-open span:nth-child(1){ transform: translateY(12px) rotate(45deg) scaleX(1.08); }
#fasto-nav .fasto-burger.is-open span:nth-child(2){ opacity:0; }
#fasto-nav .fasto-burger.is-open span:nth-child(3){ transform: translateY(-12px) rotate(-45deg) scaleX(1.08); }