/* ============================================================
 * Trueleveler — Blueprint Amber shared design system
 *
 * This stylesheet holds everything a sub-page needs to wear the
 * same chrome as the landing page: tokens, fonts, base type,
 * container, buttons, the amber-on-navy top nav (with working
 * Product + Resources dropdowns), and the compact footer.
 *
 * SOURCE OF TRUTH: public/index.html inline <style>. Keep in sync.
 * ============================================================ */

/* --- Self-hosted fonts ---------------------------------------- */
@font-face { font-family:'Inter Tight'; font-weight:300; font-style:normal; font-display:swap; src:url('/fonts/inter-tight-300.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-weight:400; font-style:normal; font-display:swap; src:url('/fonts/inter-tight-400.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-weight:500; font-style:normal; font-display:swap; src:url('/fonts/inter-tight-500.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-weight:600; font-style:normal; font-display:swap; src:url('/fonts/inter-tight-600.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-weight:700; font-style:normal; font-display:swap; src:url('/fonts/inter-tight-700.woff2') format('woff2'); }
@font-face { font-family:'Inter Tight'; font-weight:800; font-style:normal; font-display:swap; src:url('/fonts/inter-tight-800.woff2') format('woff2'); }
@font-face { font-family:'Newsreader'; font-weight:400; font-style:italic; font-display:swap; src:url('/fonts/newsreader-400i.woff2') format('woff2'); }
@font-face { font-family:'Newsreader'; font-weight:500; font-style:italic; font-display:swap; src:url('/fonts/newsreader-500i.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:500; font-style:normal; font-display:swap; src:url('/fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:600; font-style:normal; font-display:swap; src:url('/fonts/jetbrains-mono-600.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:700; font-style:normal; font-display:swap; src:url('/fonts/jetbrains-mono-700.woff2') format('woff2'); }

/* --- Palette tokens ------------------------------------------ */
:root {
  --navy:        #081522;
  --navy-mid:    #0c1c2c;
  --navy-card:   #0f1d2e;
  --navy-lift:   #152739;
  --navy-line:   rgba(255,255,255,0.09);
  --navy-line2:  #2a3a55;

  --ink:         #e9eef5;
  --ink-2:       rgba(233,238,245,0.78);
  --muted:       rgba(233,238,245,0.55);
  --muted-dim:   rgba(233,238,245,0.4);

  /* ------------------------------------------------------------------
   * Primary accent — amber under the legacy --blue-* token names.
   *
   * The --blue, --blue-bright, --blue-dark, --blue-soft, --blue-border
   * tokens all resolve to amber (#e8871e family) for swap-compat with
   * pre-Amber markup that still references var(--blue). A future
   * cleanup pass will introduce semantic --accent-* aliases and
   * deprecate the colour-name tokens listed here. New code should
   * prefer the --accent-* tokens defined further down.
   * ------------------------------------------------------------------ */
  --blue:        #e8871e;
  --blue-bright: #f2a33f;
  --blue-dark:   #c56f12;
  --blue-soft:   rgba(232,135,30,0.12);
  --blue-border: rgba(232,135,30,0.35);

  --paper:       #f6f1e8;
  --paper-dark:  #ebe3d2;
  --paper-line:  rgba(10,14,20,0.12);
  --paper-line2: rgba(10,14,20,0.22);
  --paper-ink:   #14181f;
  /* --paper-ink-2 and --paper-ink-3 are used as body/muted text colors on
   * cards that appear in BOTH navy and paper contexts. Default light here
   * (for navy bg); .section-paper / .section-paper-dark below flip them
   * to the dark navy values for cream backgrounds. */
  --paper-ink-2: rgba(233,238,245,0.72);
  --paper-ink-3: rgba(233,238,245,0.5);
  --paper-muted: rgba(233,238,245,0.55);

  /* ------------------------------------------------------------------
   * Editorial accent palette — long-form guide and resource pages.
   *
   * Used by callouts and tone shifts in editorial content (good vs.
   * bad practice, neutral asides, secondary amber). Independent of
   * the brand --blue-* surface so guides can use full sage/terracotta
   * pairs without tinting the chrome.
   * ------------------------------------------------------------------ */
  --accent-good:       #6bd3a4;  /* sage — successful states, good practice in guides */
  --accent-good-dark:  #176647;
  --accent-good-soft:  #f1faf4;
  --accent-bad:        #e16565;  /* terracotta — bad practice, anti-patterns */
  --accent-bad-dark:   #a73224;
  --accent-bad-soft:   #fdf3f2;
  --accent-info:       #c8a0ff;  /* lavender — neutral callouts in guides */
  --accent-warm:       #f6a044;  /* peach — secondary amber, complements --blue */

  --navy-bg:     #081522;
  --navy-deep:   #050b13;

  --green:       #22c55e;
  --green-soft:  #4ade80;
  --red:         #ef4444;
  --red-soft:    #f87171;
  --amber-warn:  #f59e0b;

  --radius-sm:   8px;
  --radius:      10px;
  --radius-lg:   14px;

  --dur:         0.18s;
  --ease:        cubic-bezier(.4,0,.2,1);
}

/* --- Base reset ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-feature-settings: "cv11","ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; overflow-x: clip; } /* clip (not hidden) so position:sticky works */
button { font: inherit; letter-spacing: inherit; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; }
p { margin: 0; }

/* --- Utility primitives -------------------------------------- */
.mono { font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; letter-spacing: 0.02em; }
.italic { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 400; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 72px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --- Editorial typography primitives ------------------------- */
.sec-num-row { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.sec-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.24em;
  color: var(--blue); font-weight: 700;
}
.sec-num-line { flex: 1; height: 1px; background: currentColor; opacity: 0.15; }
.sec-num-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em;
  opacity: 0.45; font-weight: 500;
}
.sec-h {
  font-size: clamp(44px, 4.8vw, 72px);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 500;
  margin: 0;
}
.sec-h-em {
  display: block; margin-top: 0.25em;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-weight: 400;
  color: var(--blue); letter-spacing: -0.025em;
}
.sec-aside { font-size: 18px; line-height: 1.55; opacity: 0.72; max-width: 480px; }

/* --- Paper sections (light editorial blocks) ----------------- */
.section-paper {
  background: var(--paper); color: var(--paper-ink);
  padding: 96px 0;
}
.section-paper-dark {
  background: var(--paper-dark); color: var(--paper-ink);
  padding: 96px 0;
}
.section-paper .sec-num,
.section-paper .sec-h-em,
.section-paper-dark .sec-num,
.section-paper-dark .sec-h-em { color: var(--blue); }
.section-paper .sec-num-line,
.section-paper-dark .sec-num-line { background: var(--paper-ink-3); opacity: 1; }
.section-paper .sec-num-tag,
.section-paper-dark .sec-num-tag { color: var(--paper-ink-3); opacity: 1; }
.section-paper .sec-aside,
.section-paper-dark .sec-aside { color: var(--paper-ink-2); opacity: 1; }

/* --- Paper-context palette flip ------------------------------ *
 * Many cards (.flow-step, .faq-item, .clause-card, .step-card,  *
 * .ins-card, .tactic-card, .regime-card, etc.) are styled for   *
 * navy backgrounds — they reference var(--ink), var(--navy-line)*
 * and var(--navy-card). Inside paper sections those vars resolve*
 * to light-on-cream, which is unreadable. Redefining the tokens *
 * here lets nested cards inherit paper-friendly equivalents     *
 * without per-component overrides.                              *
 *                                                               *
 * Also defines --paper-muted, --navy-bg, --navy-deep which are  *
 * referenced across guide pages but never defined globally.     */
.section-paper, .section-paper-dark {
  --paper-ink-2: rgba(20,24,31,0.72);
  --paper-ink-3: rgba(20,24,31,0.5);
  --ink:         var(--paper-ink);
  --ink-2:       var(--paper-ink-2);
  --muted:       var(--paper-ink-3);
  --muted-dim:   var(--paper-ink-3);
  --paper-muted: var(--paper-ink-2);
  --navy-line:   var(--paper-line);
  --navy-line2:  var(--paper-line2);
  --navy-card:   rgba(255,255,255,0.55);
  --navy-bg:     var(--paper);
  --navy-deep:   var(--paper-dark);
}

/* Card backgrounds inside paper sections (cards hard-code      *
 * rgba(255,255,255,0.04) which is near-invisible on cream).    */
.section-paper .flow-step,
.section-paper-dark .flow-step,
.section-paper .faq-item,
.section-paper-dark .faq-item,
.section-paper .clause-card,
.section-paper-dark .clause-card,
.section-paper .compare-col,
.section-paper-dark .compare-col,
.section-paper .step-card,
.section-paper-dark .step-card,
.section-paper .ins-card,
.section-paper-dark .ins-card,
.section-paper .regime-card,
.section-paper-dark .regime-card,
.section-paper .tactic-card,
.section-paper-dark .tactic-card,
.section-paper .mistake-card,
.section-paper-dark .mistake-card,
.section-paper .kd-card,
.section-paper-dark .kd-card,
.section-paper .db-card,
.section-paper-dark .db-card,
.section-paper .chain-node,
.section-paper-dark .chain-node,
.section-paper .project-card,
.section-paper-dark .project-card,
.section-paper .err-card,
.section-paper-dark .err-card,
.section-paper .meth-card,
.section-paper-dark .meth-card,
.section-paper .stat-card,
.section-paper-dark .stat-card,
.section-paper .checklist-card,
.section-paper-dark .checklist-card,
.section-paper .case-card,
.section-paper-dark .case-card,
.section-paper .opt-card,
.section-paper-dark .opt-card,
.section-paper .role-card,
.section-paper-dark .role-card,
.section-paper .stage-card,
.section-paper-dark .stage-card,
.section-paper .tier-card,
.section-paper-dark .tier-card,
.section-paper .tip-card,
.section-paper-dark .tip-card { background-color: rgba(255,255,255,0.55); }

/* --- Buttons ------------------------------------------------- */
.btn--primary {
  background: var(--blue); color: var(--navy);
  border: 1px solid var(--blue);
  padding: 16px 26px; font-size: 14.5px; font-weight: 700;
  border-radius: var(--radius); cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  letter-spacing: -0.005em; white-space: nowrap; text-decoration: none;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn--primary:hover { background: var(--blue-bright); transform: translateY(-1px); }
.btn--ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 16px 24px; font-size: 14.5px; font-weight: 500;
  border-radius: var(--radius); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn--ghost:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.04); }
.btn--link {
  background: transparent; border: none; color: #fff;
  font-size: 14px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.3);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.btn--link:hover { border-color: var(--blue); }

/* Paper variants (for btns inside .section-paper blocks) */
.section-paper .btn--ghost,
.section-paper-dark .btn--ghost { color: var(--paper-ink); border-color: var(--paper-line2); }
.section-paper .btn--ghost:hover,
.section-paper-dark .btn--ghost:hover { border-color: var(--paper-ink); background: rgba(10,14,20,0.04); }
.section-paper .btn--link,
.section-paper-dark .btn--link { color: var(--paper-ink); border-bottom-color: var(--paper-line2); }

/* --- Nav (amber-on-navy, sticky) ------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: 76px; padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(8, 21, 34, 0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav--on-hero { background: rgba(8, 21, 34, 0.55); } /* legacy modifier — still semi-transparent */
.nav__logo {
  display: flex; align-items: center;
  text-decoration: none;
}
/* Production brand mark — /trueleveler-logo.svg (embeds Montserrat + gradients).
   Loaded as <img> because the SVG includes a self-contained @font-face. */
.nav__logo-img {
  height: 48px; width: auto;
  display: block;
  flex-shrink: 0;
}
/* Legacy classes — hidden in case stale markup ships */
.nav__logo-svg, .nav__dot, .nav__logo-mark, .nav__logo-text { display: none; }
.nav__links {
  display: flex; gap: 30px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.82);
  align-items: center;
}
.nav__links-item { position: relative; }
.nav__item {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 26px 0;
  cursor: pointer; color: inherit; background: none; border: none;
  font: inherit; letter-spacing: inherit; text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.nav__item--link { padding: 26px 0; }
.nav__item:hover,
.nav__item[aria-expanded="true"] { color: #fff; }
.nav__caret {
  font-size: 8px; opacity: 0.55;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__item[aria-expanded="true"] .nav__caret { transform: rotate(180deg); opacity: 1; }

/* Dropdown flyouts */
.nav__flyout {
  position: absolute;
  top: calc(100% - 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  background: var(--navy-card);
  border: 1px solid var(--navy-line);
  border-radius: 6px;
  padding: 10px 0;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  z-index: 40;
}
.nav__item[aria-expanded="true"] + .nav__flyout {
  opacity: 1; pointer-events: auto; visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear 0s;
}
.nav__flyout-label {
  display: block;
  padding: 6px 20px 4px;
  font-family: 'JetBrains Mono','Courier New',monospace;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue);
}
.nav__flyout-link {
  display: block;
  padding: 8px 20px;
  font-size: 13px; font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__flyout-link:hover,
.nav__flyout-link:focus-visible {
  background: var(--navy-lift);
  color: #fff;
  outline: none;
}
.nav__flyout-link--featured { color: var(--blue); font-weight: 600; }
.nav__flyout-link--featured:hover { color: var(--blue-bright); background: var(--navy-lift); }
.nav__flyout-divider { height: 1px; background: var(--navy-line); margin: 6px 0; }
.nav__flyout-wide { min-width: 320px; }

.nav__right { display: flex; gap: 10px; align-items: center; }
.nav__signin {
  background: transparent; border: none;
  color: rgba(255,255,255,0.82);
  padding: 9px 14px; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.nav__signin:hover { color: #fff; }
.nav__cta {
  background: var(--blue); color: var(--navy);
  border: 1px solid var(--blue);
  padding: 9px 18px; font-size: 13px; font-weight: 700;
  border-radius: var(--radius);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__cta:hover { background: var(--blue-bright); border-color: var(--blue-bright); }
.nav__burger {
  display: none;
  background: transparent; border: none; color: #fff;
  font-size: 22px; padding: 6px 10px; cursor: pointer;
}

/* --- Footer -------------------------------------------------- */
.footer {
  position: relative; z-index: 3;
  max-width: 1280px; margin: 80px auto 0;
  padding: 28px 72px 60px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; gap: 20px; flex-wrap: wrap;
}
.footer a { color: inherit; transition: color var(--dur) var(--ease); }
.footer a:hover { color: rgba(255,255,255,0.75); }

/* --- Focus ring (a11y) --------------------------------------- */
:where(.btn--primary, .btn--ghost, .btn--link,
       .nav__cta, .nav__signin, .nav__burger, .nav__item,
       .nav__flyout-link):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Responsive ---------------------------------------------- */
@media (max-width: 1100px) {
  .container { padding-left: 48px; padding-right: 48px; }
}
@media (max-width: 980px) {
  .nav { padding: 0 20px; }
  .nav__links { display: none; }
  .nav__signin { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }

  /* Mobile burger menu — when JS adds .nav__links--open, render the panel
     as a stacked column with full-width rows. */
  .nav__links--open {
    display: flex !important;
    position: absolute;
    top: 76px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    padding: 12px 24px 20px;
    border-bottom: 1px solid var(--navy-line);
    z-index: 50;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav__links--open .nav__links-item { width: 100%; }
  .nav__links--open .nav__item,
  .nav__links--open .nav__item--link {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    justify-content: space-between;
    display: flex;
  }
  .nav__links--open .nav__caret { font-size: 12px; opacity: 0.8; }
  .nav__links--open .nav__signin,
  .nav__links--open .nav__cta { display: inline-flex !important; margin-top: 14px; align-self: stretch; justify-content: center; }

  /* Flyouts default-hidden on mobile; only shown when nested inside an open burger
     panel AND the trigger is aria-expanded. Render inline (no overlay). */
  .nav__flyout { display: none; }
  .nav__links--open .nav__item[aria-expanded="true"] + .nav__flyout {
    display: block;
    position: static;
    left: auto; top: auto;
    transform: none;
    opacity: 1; pointer-events: auto; visibility: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 4px 0 12px;
    padding: 4px 0 8px 12px;
    min-width: 0;
    width: 100%;
  }
  .nav__links--open .nav__flyout-label { padding: 8px 0 4px; }
  .nav__links--open .nav__flyout-link { padding: 10px 0 10px 8px; font-size: 14px; }
  .nav__links--open .nav__flyout-divider { margin: 8px 0; }

  .footer { padding: 28px 32px 40px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-paper, .section-paper-dark { padding: 72px 0; }
}
@media (max-width: 600px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .footer { padding: 28px 20px 40px; }
  .sec-h { font-size: 40px; line-height: 1.05; }
  .section-paper, .section-paper-dark { padding: 56px 0; }
}