/* ============================================================
   FANTOM ROBOTICS — unified nav v4 "GHOST LIGHT / FIGURE"
   Slim top bar (adaptive, mix-blend) + full-screen Figure-style
   overlay menu on ALL viewport sizes.

   IMPORTANT: this file must render identically on the light bone
   homepage AND the dark (#050607) subpages. Those pages define
   their OWN :root vars (e.g. --ink is *light* on the dark pages),
   so every colour below is a LITERAL — never var(--ink)/var(--bone).
   Fonts: Space Grotesk + IBM Plex Mono are loaded by every page.
   The .fbrand lockup is pinned to Archivo + Martian Mono on purpose and
   must not follow a site-wide type change.
   Archivo is loaded by menu.js for the brand lockup only — see the
   .fbrand block below. Do not add font imports to this file; a page
   that gets the nav gets the font with it.
   ============================================================ */

/* ---------- SLIM TOP BAR ------------------------------------
   Transparent + mix-blend-mode:difference so the white marks read
   over the light bone page AND invert cleanly over dark sections.
   The blend lives on .fnav itself (a fixed element isolates its
   descendants' blend from the page, so it can only sit here). */
.fnav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;
  padding:15px max(5vw,24px);
  mix-blend-mode:difference;            /* adaptive across light + dark */
  pointer-events:none;                  /* only the marks catch clicks */
}
.fnav > *{pointer-events:auto}
.fnav a{text-decoration:none}

/* BRAND LOCKUP — identical construction to the Defense lockup:
     ghost mark · FANTOM in Archivo 800 @ wdth 112 · hairline rule ·
     sub-word in mono at 11px / .12em tracking.
   ROBOTICS is the sub-word, exactly as DEFENSE is on the defense site —
   mono and quiet, not a second display word. Values are the resolved
   Defense tokens (--t-21, --t-11, --tr-mono, --rule-strong, --s-2)
   written as literals, because this file must not depend on page vars. */
.fnav .fbrand{display:flex;align-items:center;gap:8px}
/* ghost-mark.svg is logo.svg cropped to the artwork bbox — logo.svg
   carries ~45% transparent padding, which shrank the ghost against the
   type. Untouched: logo.svg is still the favicon. #fff → inverts. */
.fnav .fbrand img{height:22px;display:block;flex:none}
.fnav .fbrand .fbrand__word{
  font-family:'Archivo',system-ui,sans-serif;
  font-size:21px;
  line-height:1;
  font-weight:800;
  font-stretch:112%;
  font-variation-settings:'wdth' 112,'wght' 800;
  letter-spacing:0.004em;
  text-transform:uppercase;
  color:#fff;white-space:nowrap;
}
.fnav .fbrand .fbrand__rule{
  width:1px;height:16px;flex:none;
  background:rgba(255,255,255,.28);
  margin-inline:8px;
}
.fnav .fbrand .fbrand__sub{
  font-family:'Martian Mono',ui-monospace,monospace;
  font-size:11px;
  line-height:1;
  font-weight:500;
  letter-spacing:0.050em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  white-space:nowrap;
  transition:color .2s;
}
.fnav .fbrand:hover .fbrand__sub{color:#fff}
/* the lockup reads as three fragments to a screen reader; this gives it
   one accessible name. Not defined anywhere else in this project. */
.fnav .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.fnav .flinks{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.fnav .flinks .flink{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:0.067em;text-transform:uppercase;color:#fff;opacity:.82;transition:opacity .2s;white-space:nowrap}
.fnav .flinks .flink:hover{opacity:1}
.fnav .flinks .flink.on{opacity:1;text-decoration:underline;text-underline-offset:5px}

/* SOLID CTA. Under difference blend a #fff fill inverts against the
   backdrop (→ white pill on dark, ink pill on light) and #000 text
   shows the backdrop through the glyphs — so it reads as a filled,
   high-contrast button on every page. */
.fnav .fbuy-wrap{margin-left:6px;display:inline-flex;position:relative}
.fnav .fbuy{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;color:#000;
  border:0;border-radius:999px;padding:9px 16px 9px 18px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:0.055em;text-transform:uppercase;white-space:nowrap;
  cursor:pointer;
  transition:transform .2s ease;
}
.fnav .fbuy:hover{transform:translateY(-1px)}
.fnav .fbuy-caret{
  width:0;height:0;flex:none;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;
  transition:transform .2s ease;
}
.fnav .fbuy[aria-expanded="true"] .fbuy-caret{transform:rotate(180deg)}

/* RESERVE DROPDOWN PANEL — lives on <body>, not in .fnav.
   The header is mix-blend-mode:difference; a solid panel inside it would
   difference-blend against the hero film and render as a negative. Out
   here it paints normally, so it needs its own explicit dark surface
   (it sits over both the bone pages and the night sections).
   z-index 55: above the bar (50), below the full-screen overlay (60). */
.fbuy-menu{
  position:fixed;z-index:55;
  min-width:212px;padding:6px;
  background:#0c0d0e;
  border:1px solid rgba(242,241,237,.14);
  border-radius:12px;
  box-shadow:0 20px 46px rgba(0,0,0,.5);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.fbuy-menu.open{opacity:1;transform:none;pointer-events:auto}
.fbuy-menu .fbuy-item{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:11px 12px;border-radius:8px;text-decoration:none;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:0.055em;text-transform:uppercase;white-space:nowrap;
  color:#f2f1ed;transition:background .16s ease;
}
.fbuy-menu .fbuy-item:hover,
.fbuy-menu .fbuy-item:focus-visible{background:rgba(242,241,237,.10);outline:none}
.fbuy-menu .fbuy-item.on{background:rgba(242,241,237,.06)}
.fbuy-menu .fbuy-price{color:rgba(242,241,237,.5);letter-spacing:0.03em}

/* burger — bordered rounded square, three hairlines */
.fburger{
  display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  width:46px;height:38px;padding:0;
  background:none;border:1px solid rgba(255,255,255,.55);border-radius:9px;cursor:pointer;
  transition:border-color .2s ease;
}
.fburger:hover{border-color:#fff}
.fburger i{display:block;width:18px;height:1.5px;background:#fff}

/* hide inline links + CTA on small screens; burger stays (overlay is universal) */
@media (max-width:940px){ .fnav .flinks{display:none} .fbuy-menu{display:none} }

/* Phones: drop the rule and sub-word, same as the Defense lockup does at
   this breakpoint, leaving the ghost + FANTOM. */
@media (max-width:560px){
  .fnav .fbrand img{height:20px}
  .fnav .fbrand .fbrand__word{font-size:18px}
  .fnav .fbrand .fbrand__rule,
  .fnav .fbrand .fbrand__sub{display:none}
}

/* ---------- FULL-SCREEN OVERLAY MENU ------------------------ */
.fmenu{
  position:fixed;inset:0;z-index:60;
  display:flex;justify-content:flex-start;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:rgba(244,242,237,.82);
  -webkit-backdrop-filter:blur(30px) saturate(1.05);
  backdrop-filter:blur(30px) saturate(1.05);
  opacity:0;visibility:hidden;
  transition:opacity .42s ease, visibility .42s ease;
}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .fmenu{background:rgba(244,242,237,.98)}
}
body.fmenu-open .fmenu{opacity:1;visibility:visible}

.fmenu-inner{
  width:100%;max-width:1180px;margin:0 auto;min-height:100%;
  display:flex;flex-direction:column;
  padding:clamp(18px,3.4vh,38px) max(6vw,26px) clamp(26px,5vh,48px);
  color:#0c0d0e;
  transform:translateY(16px);
  transition:transform .5s cubic-bezier(.16,.84,.3,1);
}
body.fmenu-open .fmenu-inner{transform:none}

/* top row: ink ghost logo + close */
.fmenu-top{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:clamp(18px,3vh,30px)}
.fmenu-logo{display:inline-flex;align-items:center}
.fmenu-logo img{height:30px;display:block;filter:brightness(0);opacity:.9}  /* white svg → ink */
.fmenu-x{
  display:grid;place-items:center;width:46px;height:40px;
  background:none;border:1px solid rgba(12,13,14,.26);border-radius:10px;
  color:#0c0d0e;cursor:pointer;transition:border-color .2s ease,background .2s ease;
}
.fmenu-x:hover{border-color:#0c0d0e;background:rgba(12,13,14,.04)}
.fmenu-x svg{width:20px;height:20px}
.fmenu-x path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}

/* social row */
.fmenu-social{display:flex;align-items:center;gap:22px;margin-bottom:clamp(14px,2.4vh,22px)}
.fmenu-social a{display:inline-flex;color:#0c0d0e;opacity:.88;transition:opacity .2s ease,color .2s ease}
.fmenu-social a:hover{opacity:1;color:#2f6bf6}
.fmenu-social svg{width:19px;height:19px;fill:currentColor;display:block}

/* Contact Us ↗ */
.fmenu-contact{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;
  font-size:clamp(15px,1.9vw,19px);color:#0c0d0e;
  margin-bottom:clamp(26px,5vh,52px);transition:opacity .2s ease}
.fmenu-contact:hover{opacity:.7}
.fmenu-contact .arw{color:#2f6bf6;font-weight:500}

/* big numbered list */
.fmenu-list{display:flex;flex-direction:column}
.fm-row{
  display:flex;align-items:baseline;gap:clamp(16px,3vw,40px);
  padding:clamp(13px,2.2vh,22px) 0;
  border-bottom:1px solid rgba(12,13,14,.14);
  color:#0c0d0e;transition:color .2s ease,opacity .2s ease;
}
.fm-row:hover{opacity:.55}
.fm-num{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:clamp(11px,1.25vw,15px);letter-spacing:0.017em;
  color:rgba(12,13,14,.5);
  align-self:flex-start;margin-top:.4em;min-width:2.6ch;
}
.fm-name{
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:-.01em;line-height:.96;
  font-size:clamp(40px,8.6vw,90px);color:inherit;
}
/* active page = blue accent */
.fm-row.on{opacity:1}
.fm-row.on .fm-name,.fm-row.on .fm-num{color:#2f6bf6}

/* smaller emphasized action rows (reserve / pilot) */
.fmenu-actions{display:flex;flex-direction:column;margin-top:clamp(20px,3.4vh,34px)}
.fm-act{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(12px,1.9vh,18px) 0;
  border-bottom:1px solid rgba(12,13,14,.14);
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:0;
  font-size:clamp(18px,2.7vw,29px);color:#0c0d0e;line-height:1.05;
  transition:opacity .2s ease;
}
.fm-act:first-child{border-top:1px solid rgba(12,13,14,.14)}
.fm-act:hover{opacity:.6}
.fm-act .arw{font-weight:500;color:rgba(12,13,14,.55)}
/* reserve = the emphasized primary action */
.fm-act.fm-act--buy{color:#2f6bf6}
.fm-act.fm-act--buy .arw{color:#2f6bf6}
.fm-act.on{color:#2f6bf6}
.fm-act.on .arw{color:#2f6bf6}

/* footer legal line */
.fmenu-foot{
  margin-top:auto;padding-top:clamp(26px,4vh,42px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:0.021em;
  color:rgba(12,13,14,.55);
}
.fmenu-foot a{color:rgba(12,13,14,.55);text-decoration:none;transition:color .2s ease}
.fmenu-foot a:hover{color:#0c0d0e}

/* ---------- scroll lock (no layout shift) ------------------- */
body.fmenu-open{overflow:hidden;padding-right:var(--fm-sbw,0px)}
body.fmenu-open .fnav{padding-right:calc(max(5vw,24px) + var(--fm-sbw,0px))}

/* ---------- reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce){
  .fmenu,.fmenu-inner{transition:opacity .001s linear,visibility .001s linear}
  .fmenu-inner{transform:none}
  .fnav .fbuy:hover{transform:none}
  .fnav .fbuy-caret{transition:none}
  .fbuy-menu{transition:opacity .001s linear;transform:none}
}