/* ===================================================================
   FirmForte — Theme corrections
   -------------------------------------------------------------------
   Dark-mode contrast + atmosphere-compatibility corrections, plus a
   couple of small component restyles kept out of the larger source
   files. These are deliberate and load-bearing, not throwaway patches
   (hence "corrections", not "fixes"): loaded after components.css /
   sections.css and outranking the header partial's inline styles via
   .site-nav scoping.

   --accent (lime #C6FF3D) is the SAME bright colour in both themes, but
   several lime surfaces set their text colour to var(--ink), which flips
   to near-white in dark mode — leaving light text on bright lime, which
   is unreadable. Pin text/icons that sit ON lime to a fixed dark ink so
   they read correctly in BOTH themes. Light mode is unchanged: its --ink
   was already this dark.
   =================================================================== */

:root { --on-accent: #14151A; }   /* text/icons on lime — always dark */

.btn-accent      { color: var(--on-accent); }
.lime-mark       { color: var(--on-accent); }
.lime-mark-solid { color: var(--on-accent); }
.tier-badge      { color: var(--on-accent); }
.receipt-check   { color: var(--on-accent); }

/* ------- HERO RECEIPT EDGE -------
   The torn-paper notch strips on the receipt were filled with var(--bg)
   and only lined up when the card sat on a perfectly flat background.
   Behind the hero there is now the ambient aurora plus the card's own
   lime glow, so the flat notches read as dark blobs on the card edge in
   both themes. Drop them for a clean rounded panel that sits correctly
   on the atmospheric background. */
.receipt::before,
.receipt::after { display: none; }

/* ------- DARK MODE: "dark chip" surfaces that used var(--ink) -------
   var(--ink) is dark in light mode but flips to near-white in dark mode,
   so a few surfaces meant to stay dark turned white in dark mode (logo
   tile, back-to-top button, the featured reading-path card). Pin them to
   the inverted-surface tokens (dark in BOTH themes) for dark mode only;
   light mode keeps its original look untouched. */
:root[data-theme="dark"] .logo-mark { background: var(--surface-invert); }

:root[data-theme="dark"] .back-to-top { background: var(--surface-invert); }
:root[data-theme="dark"] .back-to-top:hover { background: var(--surface-invert); filter: brightness(1.25); }

/* Featured reading-path card (blog field guide). Its background is
   var(--ink) with light text designed for a dark card; in dark mode the
   card turned white and the description, list, and counts vanished. Keep
   it a dark card and fix the two colours that don't already read on dark
   (the title was var(--bg) = dark; the list numbers were var(--ink) =
   light on the lime circles). Everything else is already light and reads
   fine once the card is dark again. */
:root[data-theme="dark"] .kh-path-card--featured {
  background: var(--surface-invert);
  border-color: var(--surface-invert);
}
:root[data-theme="dark"] .kh-path-card--featured:hover { border-color: var(--accent); }
:root[data-theme="dark"] .kh-path-card--featured .kh-path-title { color: var(--on-invert); }
:root[data-theme="dark"] .kh-path-card--featured .kh-path-num { color: var(--on-accent); }

/* ------- THEME TOGGLE: segmented sun/moon pill -------
   The header's default toggle is a bordered square that clashes with the
   lime CTA pill beside it. Restyle it into a compact segmented pill —
   both icons visible, with a lime "thumb" sliding behind whichever theme
   is active. Done here (scoped to .site-nav so it outranks the header
   partial's inline rules) to avoid editing the build-critical header. */
.site-nav .theme-toggle {
  position: relative;
  width: auto;
  height: 36px;
  padding: 3px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.site-nav .theme-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}
:root[data-theme="dark"] .site-nav .theme-toggle::before { transform: translateX(28px); }
.site-nav .theme-toggle svg {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  padding: 6px;
  box-sizing: border-box;
}
/* Both icons stay visible (override the header's show/hide swap) */
.site-nav .theme-toggle .icon-sun,
.site-nav .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .site-nav .theme-toggle .icon-sun,
:root[data-theme="dark"] .site-nav .theme-toggle .icon-moon { display: block; }
/* Active icon (over the lime thumb) reads dark; the other stays muted */
.site-nav .theme-toggle .icon-sun  { color: var(--on-accent, #14151A); }
.site-nav .theme-toggle .icon-moon { color: var(--ink-muted); }
:root[data-theme="dark"] .site-nav .theme-toggle .icon-sun  { color: var(--ink-muted); }
:root[data-theme="dark"] .site-nav .theme-toggle .icon-moon { color: var(--on-accent, #14151A); }

@media (prefers-reduced-motion: reduce) {
  .site-nav .theme-toggle::before { transition: none !important; }
}