/* ============================================================
   TrueMetriks - Components
   Nav, footer, buttons.
   ============================================================ */

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
}
.btn-primary:hover { background: var(--color-brand-hover); color: var(--color-text-on-brand); }
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-outline:hover { background: var(--color-surface-alt); }
.btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--font-size-base); }

/* In dark mode, force every .btn to keep white text on hover. Without this
   the global `a:hover { color: brand-hover }` rule in base.css repaints
   button text blue, which disappears into the dark blue-violet body bg.
   Light mode is unaffected (rule only applies under [data-theme="dark"]). */
[data-theme="dark"] .btn:hover { color: var(--color-text); }

/* In dark mode, outlined buttons (Watch demo / Book a demo / Talk to sales)
   were nearly invisible: their transparent bg + dark-border read as plain
   text against the blue-violet body. Add a subtle white-glass fill and a
   clearly visible border so they unambiguously read as buttons. Light mode
   uses the original token-driven outline (border-strong is plenty visible
   against a periwinkle bg). */
[data-theme="dark"] .btn-outline {
  /* Brand-blue tinted glass + brand-blue border so the outline reads
     unambiguously as a button (clearly secondary to the gradient primary,
     never a "text with a faint outline"). */
  background: rgba(92, 130, 255, 0.14);
  border-color: var(--color-brand-2);
}
[data-theme="dark"] .btn-outline:hover {
  background: rgba(92, 130, 255, 0.26);
  border-color: #8FA8FF;
}

/* ============================================================
   KEEP CARDS / FORMS / MOCKUPS WHITE IN DARK MODE (site-wide)
   ------------------------------------------------------------
   Project rule: product mockups, content cards and form cards render the SAME
   in light and dark mode - a clean WHITE card floating on the dark page wash -
   instead of flipping to a dark surface. They read the shared surface/border/
   text tokens, so we just RE-PIN those tokens to their light literal values on
   each card root; every descendant that reads var(--color-*) then resolves
   light. We also reset `color` so inherited body text flips back to dark on the
   now-white surface. This is theme-only - it does NOT change layout, so the
   cards look identical white at 360px (mobile) and on desktop, in both themes.

   This rule is shared (loads on every page). To make a NEW card stay white in
   dark mode, just add its root selector to the list below - do not re-implement
   the token re-pin per page. Keep the literals in sync with the light-theme
   `:root` block in tokens.css. The footer plinth is intentionally exempt. */
[data-theme="dark"] .stage .browser, /* homepage: hero extension-overlay stage  */
[data-theme="dark"] .plan,        /* homepage: pricing plan cards               */
[data-theme="dark"] .plan-card,   /* pricing page: plan cards                   */
[data-theme="dark"] .compare-table, /* pricing page: full feature comparison table */
[data-theme="dark"] .leak,        /* homepage: "the leak" animation panel       */
[data-theme="dark"] .leak-card,   /* homepage: leak problem cards (leak-blockbox / leak-vs) */
[data-theme="dark"] .leak-three .pt, /* homepage: leak 3-point strip cards      */
[data-theme="dark"] .leak-calc,   /* homepage: flying-blind ad-spend calculator */
[data-theme="dark"] .fix-panel,   /* homepage: "the fix" radar panel (+ blips)  */
[data-theme="dark"] .setup,       /* homepage: "the fix" setup strip            */
[data-theme="dark"] .jny-stage,   /* homepage: "true journey" walk stage        */
[data-theme="dark"] .jny-pill,    /* homepage: "true journey" stop label pills  */
[data-theme="dark"] .jny-card,    /* homepage: "true journey" payoff cards      */
[data-theme="dark"] .dd-app,      /* homepage: revenue drill-down table card    */
[data-theme="dark"] .fg-fcard,    /* homepage: "everything you can measure" feature cards */
[data-theme="dark"] .val-feature, /* homepage: value new-vs-returning featured panel */
[data-theme="dark"] .val-demo,    /* homepage: value demo sub-card (toggle + KPIs)   */
[data-theme="dark"] .val-card,    /* homepage: value AOV-by-channel / LTV cards       */
[data-theme="dark"] .contact-form,/* contact page: form card (+ inset fields)   */
[data-theme="dark"] .docs-card    /* docs landing: section cards (Getting started, etc.) */ {
  --surface-tint-1:      #FFFFFF;
  --surface-tint-2:      #F0F3FF;
  --surface-tint-3:      #E1E6FF;
  --color-bg:            #F0F3FF;
  --color-surface:       #FFFFFF;
  --color-surface-alt:   #E1E6FF;
  --color-border:        #D5DAEB;
  --color-border-strong: #B7BFE0;
  --color-text:          #0F0F0F;
  --color-text-muted:    #2E3340;
  --color-text-subtle:   #4B5160;
  color: var(--color-text);
}

/* Outline buttons sitting INSIDE a white-pinned card must keep the light-mode
   look: the dark-mode `.btn-outline` blue-glass fill above is meant for buttons
   on the dark page bg, not on these white cards. Re-pin tokens already make the
   text dark - here we just drop the glass fill / brand border back to the light
   token-driven outline. (specificity 0,3,0 > the 0,2,0 dark rule above.) */
[data-theme="dark"] .plan .btn-outline,
[data-theme="dark"] .plan-card .btn-outline {
  background: transparent;
  border-color: var(--color-border-strong);
}
[data-theme="dark"] .plan .btn-outline:hover,
[data-theme="dark"] .plan-card .btn-outline:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-border-strong);
}

/* Brand-gradient pill (used for the nav Login button site-wide). Smaller sibling
   of .btn-grad in home.css - same gradient, pill radius, subtle blue glow. */
.btn-grad-pill {
  background: var(--gradient-brand);
  color: var(--color-text-on-brand);
  border-color: transparent;
  border-radius: var(--radius-full);
  padding: var(--space-3) var(--space-5);
  box-shadow: 0 6px 18px -8px rgba(34, 51, 255, 0.55);
  transition:
    box-shadow var(--motion-fast) var(--ease-out),
    filter var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}
.btn-grad-pill:hover {
  color: var(--color-text-on-brand);
  filter: brightness(1.06);
  box-shadow: 0 10px 24px -8px rgba(34, 51, 255, 0.7);
}

/* --- SITE NAV ---
   Soft gradient bar: top is a touch deeper periwinkle, bottom blends into the page.
   Reads as a branded but quiet header, not a saturated colored bar. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  background: linear-gradient(180deg, var(--surface-tint-3), var(--surface-tint-2));
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: saturate(180%) blur(8px);
}
[data-theme="dark"] .site-nav {
  /* Solid brand-deep navy (#0B0B47) - matches the footer plinth, so the
     nav and footer read as the two branded "edges" of the page. */
  background: var(--color-brand-deep);
}
/* Flat-edges treatment (dark mode only): nav reads as the same wash
   as the body instead of a saturated brand plinth. Opt-in per page
   via body class="flat-edges". Pairs with the footer override below.
   Light mode untouched. */
[data-theme="dark"] body.flat-edges .site-nav {
  background: var(--color-bg);
  border-bottom-color: #1A1442;
}
.site-nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* Widened past --container-wide (1200) and tightened gaps so the fuller
     primary nav (7 items) fits on one row on desktop. Widened again so the
     logo sits further left and the actions further right, matching the docs
     header and giving the nav more breathing room. */
  max-width: 1500px;
}
.site-nav__logo img { height: 32px; width: auto; display: block; }
.site-nav__links {
  display: flex;
  gap: 34px;
  align-items: center;
}
.site-nav__links a {
  font-size: 17px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  transition: color var(--motion-fast) var(--ease-out);
}
.site-nav__links a:hover { color: var(--color-brand); }
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.site-nav__hamburger {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}
.site-nav__hamburger:hover { background: var(--color-surface-alt); }
.site-nav__hamburger svg { width: 20px; height: 20px; }

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed;
  inset: var(--nav-height) 0 0 0;
  background: var(--color-bg);
  z-index: calc(var(--z-nav) - 1);
  padding: var(--space-7) var(--space-5);
  flex-direction: column;
  gap: var(--space-5);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

@media (max-width: 768px) {
  .site-nav__links { display: none; }
  .site-nav__hamburger { display: inline-flex; }

  /* Tone down the oversized mobile-menu links a touch. */
  .mobile-nav a { font-size: 20px; }
}

/* --- SITE FOOTER ---
   Light mode: near-black for bold contrast against the periwinkle body.
   Dark mode: brand-deep navy plinth so it reads as a distinct saturated zone
   instead of just "more dark" against the navy body.
   Text colors stay light-on-dark in both modes. */
.site-footer {
  --color-bg: #0F0F0F;
  --color-surface: #1A1A1A;
  --color-text: #FAFAFA;
  --color-text-muted: #9CA3AF;
  --color-text-subtle: #6B7280;
  --color-border: #2A2A2A;

  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--space-9) 0 var(--space-6);
  border-top: 1px solid var(--color-border);
}
[data-theme="dark"] .site-footer {
  --color-bg: var(--color-brand-deep);  /* #0B0B47 - saturated brand plinth */
  --color-border: #1F1F7A;
}
/* Flat-edges footer (dark mode only): footer reads as a whisper-brighter
   wash than the body rather than a saturated brand plinth. Opt-in per
   page via body class="flat-edges". Light mode untouched. */
[data-theme="dark"] body.flat-edges .site-footer {
  --color-bg: #0B0722;       /* a whisper brighter than #09051E body - just R+2 G+2 B+4 */
  --color-border: #1A1442;   /* keeps the top edge defined even with near-body bg */
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}
.site-footer__col h4 {
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__col a { color: var(--color-text); font-size: 13px; }
.site-footer__col a:hover { color: var(--color-brand-2); }
.site-footer__brand img { height: 24px; margin-bottom: var(--space-4); }
.site-footer__tagline { color: var(--color-text-muted); font-size: 13px; max-width: 280px; }
/* Footer social links - colourful brand tiles, white glyphs. Same in light + dark. */
.site-footer__social { display: flex; gap: 10px; margin-top: var(--space-4); }
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  color: #FFFFFF;
  transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.site-footer__social-link svg { width: 18px; height: 18px; }
/* Keep the glyph white on hover - beats the global base.css `a:hover` repaint.
   Only the lift/shadow animates; the colour never changes. */
.site-footer__social-link:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.45); color: #FFFFFF; }
.site-footer__social-link--youtube { background: #FF0000; }
.site-footer__social-link--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.site-footer__social-link--tiktok { background: #010101; border: 1px solid rgba(255, 255, 255, 0.22); }
.site-footer__social-link--facebook { background: #1877F2; }
.site-footer__social-link--x { background: #000000; border: 1px solid rgba(255, 255, 255, 0.22); }
.site-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* --- LOGO (theme-aware swap) ---
   Four <picture> elements live in the markup: wordmark (light/dark) + compact
   "tm." mark (light/dark). Desktop shows the WORDMARK only; mobile (≤768px) shows
   the compact MARK only; each picks light/dark by theme.

   Every <picture> carries TWO classes (.logo-wordmark|.logo-mark AND
   .logo-light|.logo-dark), so every rule below qualifies BOTH - keeping the
   plain rules at a uniform (0,3,0) and the [data-theme="dark"] rules at a uniform
   (0,4,0). Because specificity is matched within each tier, the mobile @media
   block (later in source order) cleanly overrides its desktop counterpart.
   DON'T introduce a generic `.logo-light`/`.logo-dark`/`.logo-mark` rule here: an
   uneven specificity is what let the dark wordmark/mark leak across breakpoints. */

/* Desktop: wordmark per theme; compact mark hidden in BOTH themes. */
.site-nav__logo .logo-wordmark.logo-light { display: block; }
.site-nav__logo .logo-wordmark.logo-dark  { display: none; }
.site-nav__logo .logo-mark.logo-light     { display: none; }
.site-nav__logo .logo-mark.logo-dark      { display: none; }
[data-theme="dark"] .site-nav__logo .logo-wordmark.logo-light { display: none; }
[data-theme="dark"] .site-nav__logo .logo-wordmark.logo-dark  { display: block; }
[data-theme="dark"] .site-nav__logo .logo-mark.logo-light     { display: none; }
[data-theme="dark"] .site-nav__logo .logo-mark.logo-dark      { display: none; }

/* Mobile (≤768px): wordmark hidden in BOTH themes; compact mark per theme.
   MUST come after the desktop block - same specificity, so source order wins. */
@media (max-width: 768px) {
  .site-nav__logo .logo-wordmark.logo-light { display: none; }
  .site-nav__logo .logo-wordmark.logo-dark  { display: none; }
  .site-nav__logo .logo-mark.logo-light     { display: block; }
  .site-nav__logo .logo-mark.logo-dark      { display: none; }
  [data-theme="dark"] .site-nav__logo .logo-wordmark.logo-light { display: none; }
  [data-theme="dark"] .site-nav__logo .logo-wordmark.logo-dark  { display: none; }
  [data-theme="dark"] .site-nav__logo .logo-mark.logo-light     { display: none; }
  [data-theme="dark"] .site-nav__logo .logo-mark.logo-dark      { display: block; }
  /* Square favicon has padding around the glyph; size up + negative margin so
     the visible "tm." lands near the ~28px wordmark height. */
  .site-nav__logo .logo-mark img { height: 46px; width: auto; margin: -8px 0; }
}

/* ============================================================
   Contact form: honeypot, submit status, post-submit success card.
   Shared between marketing /contact page and docs help form footer.
   ============================================================ */

/* Honeypot field: bots see and fill, humans never see. Off-screen but
   still in the tab order via tabindex=-1 in HTML so it does not steal
   focus. Visually-hidden pattern, not display:none, so it remains in
   the accessibility tree if a bot inspects via JS. */
.contact-form-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inline status line (errors). Empty by default, populated by main.js
   on submit failure. Uses data-status="error" to flip color. */
.contact-form-status {
  margin: 8px 0 0;
  font-size: 14px;
  color: #B91C1C;
  min-height: 1em;
}
.contact-form-status:empty { display: none; }
.contact-form-status[data-status="error"] { color: #B91C1C; }

/* Success card that replaces the form after a successful submit. */
.contact-form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 24px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid #BBF7D0;
  box-shadow: 0 1px 3px rgba(15, 15, 15, 0.04);
  max-width: 640px;
}
.contact-form-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #DCFCE7;
  color: #15803D;
}
.contact-form-success__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  color: #0F0F0F;
}
.contact-form-success__lede {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #4B5563;
}

/* Site-wide rule: success card stays light in dark mode (same as the
   form card it replaces). */
[data-theme="dark"] .contact-form-success {
  background: #FFFFFF;
  border-color: #BBF7D0;
}
[data-theme="dark"] .contact-form-success__title { color: #0F0F0F; }
[data-theme="dark"] .contact-form-success__lede { color: #4B5563; }

/* Turnstile widget spacing inside both contact forms.
   Cloudflare renders its own ~300x65 iframe inside .cf-turnstile - we just
   give it a little breathing room. */
.contact-form-turnstile { margin: 4px 0; }