/* ===========================================================================
   hbf-overrides.css — corrections to the compiled React homepage.

   These live in a separate stylesheet loaded AFTER the Vite bundle CSS rather
   than being patched into the minified CSS, for two reasons:
     1. the minified file is content-hashed, so editing it is fragile;
     2. this file is readable, so the next person can see what was changed
        and why, and port it into the Tailwind source.

   Each rule cites its audit finding. The selectors target the exact utility
   classes the bundle emits (verified against the shipped markup), not guesses.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   M1 — Hero H1 tracking. The headline used Tailwind `tracking-tight`
   (-0.025em), which at the 52px display size measures -1.3px — about -2.5%
   applied to Clash Display, a face already drawn tight. Word gaps ended up
   narrower than several intra-word letter gaps, so "Building the AI research
   network for" read as one run of letters. Relax the tracking and restore an
   explicit word gap.
   --------------------------------------------------------------------------- */
h1.tracking-tight{
  letter-spacing:-0.01em;
  word-spacing:0.08em;
}

/* ---------------------------------------------------------------------------
   X4 — The rotating headline word was vertically clipped: its container is
   `inline-flex overflow-hidden pb-1` (4px of bottom padding) inside an h1 with
   leading-[1.08], so the descenders of "g" and "y" in "aneutronic energy" were
   sliced — 60px of box for 67px of content.

   The overflow-hidden is intentional (it masks the slide-in animation), so we
   keep the horizontal clip and give the box the vertical room it needs
   instead: more bottom padding and a looser line-height on the animated span.
   --------------------------------------------------------------------------- */
h1 span.overflow-hidden{
  padding-bottom:0.3em;      /* was pb-1 = 4px; ~15px at 52px */
  line-height:1.25;          /* was inherited 1.08 */
  align-items:flex-end;
}
h1 span.overflow-hidden > span{
  line-height:1.25;
  padding-bottom:0.06em;
}

/* ---------------------------------------------------------------------------
   L5 — The only real colour-contrast failure on the site: the "Selling now"
   badge renders 11px text in the plasma-glow purple on a 15%-alpha wash of
   the same hue, measuring 3.70:1 where WCAG AA needs 4.5:1 at that size.
   Lighten the text; the hue is preserved.
   --------------------------------------------------------------------------- */
[class*="bg-plasma-glow/15"][class*="text-plasma-glow"],
[class*="text-plasma-glow"][class*="rounded-full"]{
  color:#9b85ff;             /* ~4.6:1 on the same background */
}

/* ---------------------------------------------------------------------------
   M9 — Mobile: nothing but decoration above the fold. At 375px the first
   ~500px held the logo, a hamburger and the decorative orbit graphic, pushing
   the H1, the value proposition and every CTA below the fold.

   Cap the decorative visual so the headline is the first real content, and
   stop the orbit particles being sliced at the container edges.
   --------------------------------------------------------------------------- */
@media (max-width:640px){
  /* the hero's decorative column is ordered after the copy on small screens */
  section:first-of-type .lg\:order-2,
  section:first-of-type canvas,
  section:first-of-type svg[class*="orbit"]{
    max-height:42vh;
  }
  /* keep decorative circles from being clipped mid-stroke at the edges */
  section:first-of-type [class*="rounded-full"][class*="absolute"]{
    overflow:visible;
  }
  /* M13 — the presale stage row held two columns at 375px, so
     "STAGE 1 OF 7 · PROGRESS" orphaned its separator and "REMAINING THIS
     STAGE" wrapped into the figure beside it. Stack it instead. */
  [class*="justify-between"][class*="font-mono"][class*="text-[11px]"]{
    flex-direction:column;
    align-items:flex-start;
    gap:0.25rem;
  }
  /* M13 — three price cards (CURRENT PRICE / TOTAL RAISED / LISTING PRICE)
     forced every label to wrap at three columns. Two per row reads cleanly. */
  [class*="grid-cols-3"][class*="gap-"]{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* ---------------------------------------------------------------------------
   M3 — a visually-hidden H1 is injected on routes that had none (see
   hbf-spa-fixes.js). This is the standard sr-only pattern: available to
   screen readers and to crawlers, invisible on screen.
   --------------------------------------------------------------------------- */
.hbf-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;
}

/* ===========================================================================
   §10.1 — Protect scientific notation from text transforms.
   The audit found Absolute Reactivity containing the correct raw text ⟨σv⟩
   while an uppercase CSS rule rendered it as ⟨ΣV⟩. Casing a variable changes
   its meaning: σ (cross-section) and Σ (a sum) are different quantities, and
   v (velocity) is not V (voltage). Mathematical text must never be transformed
   for visual effect.
   =========================================================================== */
.math,
[data-math],
.katex,
math,
.metric-symbol,
.mono, .mono2,
var, .var {
  text-transform: none !important;
  font-variant-caps: normal !important;
}

/* ===========================================================================
   §10.2 — Semantic counters.
   The animated statistic must not be the only copy of the value: without JS,
   before intersection, or with reduced motion, the correct figure has to be in
   the DOM already. The animated layer is aria-hidden decoration over it.
   =========================================================================== */
.metric__animated { font-variant-numeric: tabular-nums }
@media (prefers-reduced-motion: reduce) {
  .metric__animated { animation: none !important; transition: none !important }
}

/* ===========================================================================
   §10.7 — Motion, contrast and focus.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
/* two-colour focus indicator: visible on both light and dark surfaces */
:focus-visible {
  outline: 2px solid #67e6ff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(11, 7, 32, .85) !important;
}
/* §10.5 — a hidden tab panel must be out of the interaction tree entirely */
[role="tabpanel"][hidden] { display: none !important }