/* ============================================================
   shared.css — nav, drawer, footer + full design token system
   ============================================================ */

/* ── Design tokens — dark (default) ── */
:root {
  /* Brand */
  --teal:    #28A99E;
  --teal-d:  #1A7A72;
  --teal-l:  #3FCFC3;
  --coral:   #E8603A;
  --gold:    #FFD700;

  /* Page structure */
  --c-bg:          #1C1C1C;
  --c-surface:     #2A2A2A;
  --c-raised:      #333333;
  --c-nav:         rgba(28,28,28,0.93);
  --c-footer:      #1a1a1a;
  --c-footer-rule: #2E2E2E;
  --c-drawer:      #1C1C1C;

  /* Text */
  --c-text:        #F5F4F0;
  --c-text-sec:    #C0C0C0;
  --c-text-muted:  #8A8A8A;
  --c-text-faint:  #555555;

  /* Borders */
  --c-border:      #3A3A3A;
  --c-border-sub:  #2E2E2E;

  /* Legacy aliases so existing inline styles keep working */
  --grey:          #404040;
  --grey-d:        #1C1C1C;
  --grey-m:        #2A2A2A;
  --grey-3:        #2E2E2E;
  --off:           #F5F4F0;
  --text:          #F5F4F0;
  --text-on-dark:  #F5F4F0;
  --muted:         #C0C0C0;
  --border:        #3A3A3A;

  /* ── Typography scale — one source of truth for sizes.
     Use `clamp(min, fluid, max)` so headings scale with viewport.
     Body sizes are fixed to stay readable; a mobile override below adjusts where needed. */
  --fs-display:   clamp(52px, 5.5vw, 82px);  /* Homepage hero h1 */
  --fs-h1:        clamp(44px, 6vw, 76px);    /* Inner-page hero h1 */
  --fs-h2:        clamp(32px, 4vw, 48px);    /* Main section h2 */
  --fs-h3:        clamp(24px, 3vw, 36px);    /* Sub-section h3 */
  --fs-h4:        20px;                       /* Card titles, step titles */
  --fs-h5:        17px;                       /* Small card titles */
  --fs-body:      16px;                       /* Main prose body */
  --fs-body-sm:   15px;                       /* Secondary body */
  --fs-body-xs:   14px;                       /* Captions, metadata */
  --fs-label:     12px;                       /* UI labels (bumped from 9-11px scatter) */
  --fs-micro:     11px;                       /* Eyebrows, micro badges */
  --fs-code:      14px;                       /* Inline monospace */

  /* Line-height tokens */
  --lh-heading:   0.95;
  --lh-tight:     1.3;
  --lh-body:      1.65;
  --lh-prose:     1.75;     /* Long-form prose (privacy, terms, guide) */

  /* Letter-spacing tokens — constrained so small text stays readable */
  --ls-eyebrow:   0.15em;   /* Was frequently 0.28em which is unreadable at 11px */
  --ls-label:     0.1em;
  --ls-caps:      0.05em;
}

/* ── Design tokens — light ── */
[data-theme="light"] {
  --c-bg:          #F0EFEB;
  --c-surface:     #FFFFFF;
  --c-raised:      #E6E5E1;
  --c-nav:         rgba(240,239,235,0.95);
  --c-footer:      #1C1C1C;
  --c-footer-rule: #2E2E2E;
  --c-drawer:      #FFFFFF;

  --c-text:        #1C1C1C;
  --c-text-sec:    #3A3A3A;
  --c-text-muted:  #555555;
  --c-text-faint:  #888888;

  --c-border:      #D0CFC9;
  --c-border-sub:  #E0DFD9;

  /* Override legacy aliases */
  --grey-d:        #F0EFEB;
  --grey-m:        #FFFFFF;
  --grey-3:        #E6E5E1;
  --off:           #1C1C1C;
  --text:          #1C1C1C;
  --text-on-dark:  #1C1C1C;
  --muted:         #555555;
  --border:        #D0CFC9;
}

/* ── Base ── */
html { scroll-behavior: smooth; }
body {
  font-family: 'Barlow', sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  margin: 0;
  overflow-x: hidden;
  transition: background 0.22s ease, color 0.22s ease;
}

/* ── Nav ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--c-nav);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; height: 72px;
  transition: background 0.22s, border-color 0.22s;
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo-text {
  font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 900;
  color: var(--c-text); letter-spacing: .3px; text-transform: uppercase;
  transition: color 0.22s;
}
.nav-logo-sub {
  font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 300;
  letter-spacing: .2em; text-transform: uppercase; color: var(--teal-l);
  display: block; line-height: 1.2;
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-text-sec); text-decoration: none; transition: color .2s;
}
.nav-links a:hover { color: var(--teal); }
.nav-cta {
  background: var(--teal); color: #fff !important;
  padding: 10px 24px; border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; transition: background .2s;
}
.nav-cta:hover { background: var(--teal-d); }

/* ── Theme toggle ── */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px;
  border: 1.5px solid var(--c-border);
  background: transparent; cursor: pointer; flex-shrink: 0;
  color: var(--c-text-muted);
  transition: border-color .2s, color .2s, background .2s;
}
.theme-toggle:hover {
  border-color: var(--teal); color: var(--teal);
  background: rgba(40,169,158,.09);
}
.theme-toggle svg { width: 17px; height: 17px; }

/* Show sun in dark mode, moon in light
   Note: scoped under .theme-toggle so specificity (0,2,0) beats
   the `.theme-toggle svg` sizing rule (0,1,1) — otherwise a generic
   svg display:block would leak through and render both icons. */
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none;  }
[data-theme="light"] .theme-toggle .icon-sun  { display: none;  }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ── Burger ── */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer;
  padding: 8px; border-radius: 8px; transition: background .15s; flex-shrink: 0;
}
.nav-burger:hover { background: rgba(40,169,158,.12); }
.nav-burger span {
  display: block; height: 2px; background: var(--c-text); border-radius: 2px;
  transition: all .25s ease; transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ── */
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(300px, 85vw);
  background: var(--c-drawer); border-left: 2px solid var(--teal);
  z-index: 99; transform: translateX(100%); transition: transform .28s ease;
  display: flex; flex-direction: column; padding-top: 72px;
  transition: transform .28s ease, background .22s;
}
.nav-drawer.open { transform: translateX(0); }
.nav-drawer a {
  font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text); text-decoration: none;
  padding: 18px 28px; border-bottom: 1px solid var(--c-border);
  transition: color .15s, background .15s; display: block;
}
.nav-drawer a:hover { color: var(--teal); background: rgba(40,169,158,.08); }
.nav-drawer .drawer-cta {
  background: var(--coral); color: #fff !important;
  margin: 24px 24px 0; border-radius: 10px; text-align: center;
  padding: 16px 28px; font-size: 16px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; border: none;
}
.nav-drawer .drawer-cta:hover { background: #d04e28; }

/* Appearance row in drawer */
.drawer-theme-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; border-bottom: 1px solid var(--c-border);
  font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-muted);
}
.drawer-theme-pill {
  display: flex; background: var(--c-raised);
  border: 1.5px solid var(--c-border); border-radius: 20px; padding: 3px; gap: 2px;
}
.dtp-opt {
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 14px; cursor: pointer;
  color: var(--c-text-muted); border: none; background: none; transition: all .18s;
}
.dtp-opt.active { background: var(--teal); color: #fff; }

.nav-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 98; opacity: 0; pointer-events: none; transition: opacity .25s;
}
.nav-overlay.open { opacity: 1; pointer-events: all; }

/* ── Footer ── */
footer {
  background: var(--c-footer); padding: 56px 5%;
  border-top: 2px solid var(--teal);
  transition: background .22s;
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 16px;
}
.footer-logo {
  font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 900;
  color: #fff; text-transform: uppercase; letter-spacing: .3px;
}
.footer-sub {
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 300;
  letter-spacing: .2em; text-transform: uppercase; color: var(--teal-l); margin-top: 4px;
}
.footer-copy {
  font-size: 13px; color: #C0C0C0; font-family: 'Barlow', sans-serif;
  line-height: 1.6; max-width: 480px; text-align: center;
}

/* Mobile-only group (burger + toggle) — hidden on desktop so nav-links sits flush right */
.nav-mobile-only { display: none; align-items: center; gap: 8px; }

/* ── Canonical eyebrow ──────────────────────────────────────────
   One class, a few modifiers. Replaces the scattered
   .hero-eyebrow / .page-eyebrow / .sec-eyebrow / .guide-eyebrow /
   .section-label per-page variants.

   Use:
     <div class="eyebrow">LABEL</div>                       (page/section with teal bar)
     <div class="eyebrow eyebrow--center">LABEL</div>       (centred, bar both sides)
     <div class="eyebrow eyebrow--plain">LABEL</div>        (no bar — inline section label)
     <div class="eyebrow eyebrow--coral">LABEL</div>        (accent colour for terms/legal-secondary)
*/
.eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: var(--fs-label);         /* 12px — bumped from 9–11px scatter */
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);  /* 0.15em */
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: currentColor;
}
.eyebrow--center {
  justify-content: center;
  text-align: center;
}
.eyebrow--center::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: currentColor;
}
.eyebrow--plain { display: block; }
.eyebrow--plain::before,
.eyebrow--plain::after { display: none; }
.eyebrow--coral { color: var(--coral); }
/* Keep pure teal across both themes — the token already resolves correctly */

/* ── Responsive type scale tweaks ────────────────────────────── */
@media (max-width: 600px) {
  :root {
    /* Slightly smaller body copy on small screens saves horizontal space without harming readability */
    --fs-body-sm:   14px;
    --fs-body-xs:   13px;
    --fs-h4:        18px;
  }
}

/* ── Responsive ── */
@media(max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-mobile-only { display: flex; }
  .nav-cta { padding: 8px 18px; font-size: 13px; }
  .footer-inner { gap: 12px; }
}
@media(max-width: 600px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-mobile-only { display: flex; }
  .nav-cta { display: none; }
  footer { padding: 40px 5%; }
  .footer-logo { font-size: 18px; }
  .footer-copy { font-size: 12px; }
}