/* ============================================================================
   ig-nav.css — the one header, at every width, on every page.
   ----------------------------------------------------------------------------
   Loaded by website/_partials/nav.html, so it reaches every page that carries
   the header: the artboard-built home page and the styles.css pages alike.
   Split out of ig-mobile.css on 2026-09-17 when the header became shared; the
   rest of that file is still home-only (the ribbon, the slider, the type floor).

   Every colour is one of the page's tokens with the dark value as fallback.
   The home page defines them inline (and a light set); styles.css defines the
   dark set for everything else. NO :root tokens here: this file loads after the
   home page's own <style>, and a :root block would override its light theme.
   ========================================================================== */

/* Hover and press feedback, converted from the artboard. The home page ships
   the same rules inline; they are repeated here so the other pages match. */
.ig-header [data-ig-hover="ig-h1"]:hover { border-color: var(--border-3, rgba(255,255,255,.34)); color: var(--ink, #eef2f8); }
.ig-header [data-ig-hover="ig-h2"]:hover { filter: brightness(1.08); color: #0b0a06; }
.ig-header [data-ig-hover] { transition: transform 160ms cubic-bezier(.23,1,.32,1), border-color .2s, filter .2s; }
.ig-header [data-ig-hover]:active { transform: scale(.97); }
.ig-header nav[aria-label="Main"] a:hover { color: var(--ink, #eef2f8); }

/* WCAG 2.2 AA (2.5.8): 24px targets even with a mouse. The text does not move,
   the target grows around it. */
.ig-header nav[aria-label="Main"] a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* The theme toggle is defined by ig-theme.js, which only the home page loads.
   Undefined, it would still hold a 10px flex gap; hide it instead. */
ig-theme-toggle:not(:defined) { display: none; }

/* The mobile menu button does not exist on desktop. */
.ig-menu-btn { display: none; }

/* ------------------------------------------------------------ phone + small -- */
@media (max-width: 860px) {
  /* The header becomes an app bar: always reachable, one row, notch-aware. */
  .ig-header {
    position: sticky; top: 0; z-index: 50;
    padding-top: env(safe-area-inset-top, 0px);
    background: color-mix(in srgb, var(--bg, #070b14) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--hairline, rgba(255,255,255,.07));
  }
  /* ONE ROW. The artboard's header row is a flex container sized for a desktop
     nav; with the nav gone it still wrapped the logo and the actions onto two
     lines, giving a 133px bar on an 812px screen. An app bar is one row. */
  .ig-header > div {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .ig-header > div > a:first-child { flex: 0 1 auto; min-width: 0; }
  .ig-header > div > a:first-child span { font-size: 15px !important; }
  .ig-header > div > a:first-child svg { width: 24px; height: 24px; }
  /* Seven wrapped 17px links are replaced by the sheet.
     !important is load-bearing here, not laziness: the artboard writes
     `style="display:flex"` on the nav itself, and an inline declaration beats
     any selector specificity a stylesheet can reach for. */
  .ig-header nav[aria-label="Main"] { display: none !important; }
  .ig-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    padding: 0; border-radius: 12px;
    border: 1px solid var(--border, rgba(255,255,255,.11));
    background: var(--surface, rgba(255,255,255,.03));
    color: var(--ink, #eef2f8);
    cursor: pointer;
  }
  .ig-menu-btn:active { background: var(--surface-2, rgba(255,255,255,.05)); }
  /* NO JUMP WHEN THE MENU ARRIVES (2026-10-01). ig-nav.js adds the menu button after the
     page has painted. Until it does, this empty box holds the button's 44px (the actions'
     flex gap comes with it); the script sets .ig-has-menu in the same step it adds the
     button, so the box hands its place over and nothing moves. Without it the bar grew
     54px on load, the logo broke onto two lines, the header grew 4px and every page
     below it shifted: CLS 0.11 on phones (vitals p75 0.104), the only shift those pages had. */
  .ig-header > div > div:last-child::after { content: ""; flex: none; width: 44px; height: 44px; }
  .ig-header.ig-has-menu > div > div:last-child::after { display: none; }
  /* "Log in" is secondary on a phone; the paid CTA and the menu carry the bar.
     It returns inside the sheet, so nothing is actually lost. */
  .ig-header [data-ig-nav="login"] { display: none !important; }
  /* ig-theme.js sets the toggle's box with element.style.cssText, so it ships a
     38x38 button -- under the 44px floor, and unreachable by specificity. */
  ig-theme-toggle button {
    width: 44px !important;
    height: 44px !important;
  }
  /* Anything in the bar that is a link gets a real target. */
  .ig-header a { min-height: 44px; display: inline-flex; align-items: center; }
  /* THE SHEET. A real panel, not a dropdown: full width, thumb-reachable rows,
     and `hidden` until opened so it is out of the tab order too. */
  .ig-sheet {
    position: fixed; inset: 0; z-index: 60;
    display: flex; flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px
             calc(env(safe-area-inset-bottom, 0px) + 24px);
    background: var(--bg, #070b14);
    overscroll-behavior: contain;
    animation: igSheetIn .22s cubic-bezier(.2,.7,.2,1) both;
  }
  .ig-sheet[hidden] { display: none; }
  .ig-sheet__top { display: flex; justify-content: flex-end; margin-bottom: 8px; }
  .ig-sheet a {
    display: flex; align-items: center; min-height: 56px;
    padding: 0 8px;
    font-size: 20px; font-weight: 600; letter-spacing: -.01em;
    color: var(--ink, #eef2f8); text-decoration: none;
    border-bottom: 1px solid var(--hairline, rgba(255,255,255,.07));
  }
  .ig-sheet a:active { color: var(--gold-ink, #f2b95a); }
  .ig-sheet__cta { margin-top: auto; display: grid; gap: 10px; padding-top: 20px; }
  .ig-sheet__cta a {
    justify-content: center; min-height: 52px; border-bottom: 0;
    border-radius: 12px; font-size: 16px;
  }
  .ig-sheet__cta a:first-child { border: 1px solid var(--border-2, rgba(255,255,255,.16)); }
  .ig-sheet__cta a:last-child {
    background: linear-gradient(120deg,#f2b95a,#e8a13c 55%,#c8842c);
    color: #0b0a06;
  }
  @keyframes igSheetIn { from { opacity: 0; transform: translateY(-6px); } }
  /* While the sheet is open the page behind it must not scroll. */
  body.ig-locked { overflow: hidden; }
}
/* ------------------------------------------------------------- small phones -- */
@media (max-width: 380px) {
  /* "Start for $49" and the logo compete for the bar at 320-375px. */
  .ig-header [data-ig-nav="start"] { font-size: 14px; padding-left: 14px; padding-right: 14px; }
}
/* ---------------------------------------------------------- reduced motion -- */
/* The sheet still needs to appear; it just appears without travel. */
@media (prefers-reduced-motion: reduce) {
  .ig-sheet { animation-duration: .01ms; }
}