/* The Marketing Cartel · components · DESKTOP layer (≥1024px; linked with media="(min-width: 1024px)").
   Chapters 4 (navbar) and 5 (dropdown) of the system: the capsule nav exists only on desktop. The phone top bar and
   menu sheet are in components.css. */

/* ---------- 4 · navbar: frosted pill (#21) · grouped links + sliding pill (#19) · depth-flip hover (#33) ---- */
.site-nav {
  position: fixed;
  top: var(--nav-top);
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.nav {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  width: min(100%, 1180px);
  height: var(--nav-h);
  padding: 0 8px 0 16px;
  border-radius: var(--r-lg);
  background: var(--frost-bg);
  -webkit-backdrop-filter: blur(var(--frost-blur)) saturate(140%);
  backdrop-filter: blur(var(--frost-blur)) saturate(140%);
  box-shadow: inset 0 0 0 1px var(--frost-line), var(--highlight-top), var(--shadow-2);
  pointer-events: auto;
}
.nav__logo { display: inline-flex; align-items: center; justify-self: start; height: 40px; color: var(--fg); }
.nav__logo svg { height: 34px; width: auto; }
.nav__logo:focus-visible { border-radius: var(--r-sm); }

.nav__capsule {
  position: relative;
  padding: 4px;
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 5%, transparent);
}
.nav__links { position: relative; z-index: 1; display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }

/* the sliding pill: three compositor-only parts (left cap, stretchable middle, right cap) so its width can
   change without animating width. nav.js writes --x (left edge), --w (width) on .nav__pill. */
.nav__pill {
  --x: 0px;
  --w: 72px;
  --h: 36px;
  position: absolute;
  top: 4px;
  left: 0;
  height: var(--h);
  width: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-micro) var(--e-out);
}
.nav__pill.is-ready { opacity: 1; }
.nav__pill > i {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--h);
  background: var(--bg-inverse);
  transform-origin: 0 50%;
  transition: transform var(--d-spring) var(--e-spring);
}
.nav__pill > .cap-l, .nav__pill > .cap-r { width: var(--h); border-radius: var(--r-full); }
.nav__pill > .cap-l { transform: translateX(var(--x)); }
/* the middle is 100px wide and scaled to (width − height) / 100 — a 100px base, not 1px: at fractional OS scaling
   (125%, 150%) Chrome rounds a 1px layer before scaling it and the middle came out ~18px short (Arthur's bug, 25/09).
   scaleX needs a unitless number, so nav.js writes --mid-scale alongside --x and --w */
.nav__pill > .mid { width: 100px; transform: translateX(calc(var(--x) + var(--h) / 2)) scaleX(var(--mid-scale, .36)); }
.nav__pill > .cap-r { transform: translateX(calc(var(--x) + var(--w) - var(--h))); }
.nav__pill.no-anim > i { transition: none; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-full);
  background: none;
  font: var(--w-ui) .9375rem / 1 var(--font-sans);
  letter-spacing: -.005em;
  color: var(--fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__link:focus-visible { outline-offset: 1px; }
.nav__chev { width: 10px; height: 10px; transition: transform var(--d-ui) var(--e-out); }
.nav__link[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

/* depth-flip (#33): two copies of the word on a tiny cube; the back face carries the inverse colour, so the
   flip IS the colour change when the pill arrives (no colour transition anywhere). */
.flip { position: relative; display: inline-grid; perspective: 240px; }
.flip > span {
  grid-area: 1 / 1;
  display: block;
  backface-visibility: hidden;
  transition: transform var(--d-ui) var(--e-out), opacity var(--d-ui) var(--e-out);
}
.flip__front { transform-origin: 50% 0%; }
.flip__back {
  color: var(--fg-inverse);
  transform-origin: 50% 100%;
  transform: translateY(70%) rotateX(-80deg);
  opacity: 0;
}
.nav__link[data-pill-on] .flip__front { transform: translateY(-70%) rotateX(80deg); opacity: 0; }
.nav__link[data-pill-on] .flip__back { transform: none; opacity: 1; }
/* the chevron sits outside the flip: two copies crossfade (opacity) with the same timing */
.nav__chev-wrap { position: relative; display: inline-grid; }
.nav__chev-wrap > svg { grid-area: 1 / 1; transition: opacity var(--d-ui) var(--e-out), transform var(--d-ui) var(--e-out); }
.nav__chev-wrap > .on-pill { color: var(--fg-inverse); opacity: 0; }
.nav__link[data-pill-on] .nav__chev-wrap > .off-pill { opacity: 0; }
.nav__link[data-pill-on] .nav__chev-wrap > .on-pill { opacity: 1; }

.nav__actions { display: flex; align-items: center; justify-self: end; gap: var(--space-2); }

/* ---------- 5 · dropdown panel (#20): one frosted viewport that morphs (FLIP) between menus ------------ */
.nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: var(--z-dropdown);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  transform-origin: 50% 0;
  transition: opacity var(--d-ui) var(--e-out), transform var(--d-ui) var(--e-out), visibility 0s linear var(--d-ui);
  pointer-events: none;
  /* always its own layer: at 125% scaling the box sits on a half device pixel (86px × 1.25). A layer created only while
     it animates was drawn 1px lower than the settled paint, so the bottom edge "rose" when each transition ended
     (Arthur's screen recording, 28/09). The shell below gets the same, for its FLIP. */
  will-change: transform;
}
.nav-panel[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--d-ui) var(--e-out), transform var(--d-ui) var(--e-out), visibility 0s;
  pointer-events: auto;
}
.nav-panel__shell {
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  background: var(--panel-bg);
  box-shadow: inset 0 0 0 1px var(--frost-line), var(--highlight-top), var(--shadow-3);
  transform-origin: 0 0;
  will-change: transform;
}
.nav-panel__inner { position: relative; }
.nav-panel [data-panel] {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content; /* its natural width, whatever box the viewport holds when it is measured */
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(var(--from, 16px));
  transition: opacity var(--d-ui) var(--e-out), transform var(--d-ui) var(--e-out), visibility 0s linear var(--d-ui);
}
.nav-panel [data-panel][data-active="true"] {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--d-ui) var(--e-out) 60ms, transform var(--d-ui) var(--e-out) 60ms, visibility 0s;
}
/* morph between menus: the outgoing one fades in 90ms over the old box; the incoming one enters once the shell is ~90%
   of the way (the 240ms spring), so no text ever sits outside the frosted shape */
.nav-panel.is-morph [data-panel] {
  transition: opacity 90ms var(--e-out), transform var(--d-ui) var(--e-out), visibility 0s linear 90ms;
}
.nav-panel.is-morph [data-panel][data-active="true"] {
  transition: opacity 160ms var(--e-out) 110ms, transform var(--d-ui) var(--e-out) 110ms, visibility 0s;
}
.nav-panel__grid { display: grid; grid-template-columns: repeat(2, 210px); gap: 2px; } /* the approved 2 × 210 look, now explicit (menus are max-content) */
.nav-panel__grid--1 { grid-template-columns: minmax(250px, 1fr); }
.nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px 12px 12px;
  border-radius: var(--r-md);
  isolation: isolate;
}
.nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  opacity: 0;
  transition: opacity var(--d-micro) var(--e-out);
}
.nav-item:hover::before, :root:not([data-input="pointer"]) .nav-item:focus-visible::before { opacity: 1; }
.nav-item__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--fg-accent);
}
.nav-item__icon svg { width: 18px; height: 18px; }
.nav-item__title { display: block; font: var(--w-strong) .9375rem / 1.25 var(--font-sans); color: var(--fg); }
.nav-item__desc { display: block; margin-top: 3px; font: 400 .8125rem / 1.35 var(--font-sans); color: var(--fg-muted); }
.nav-bridge { position: absolute; left: 0; right: 0; top: 100%; height: 14px; }


/* the free game plan (E05): a pointer gets a hover on the option cards */
.gp__opt:hover:not(:has(input:checked)) { box-shadow: inset 0 0 0 1px var(--fg-muted); }
.gp__back:hover { color: var(--fg-accent); }

/* "Browse by industry" inside the Businesses dropdown */
.nav-panel__label { margin: 10px 14px 4px; font: var(--w-strong) var(--text-xs) / 1.2 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-muted); }