/* ═══════════════════════════════════════════════════════════════════════════
   oro-a11y.css — layer 12 · accessibility corrections
   Loaded last so it wins without any selector here being made more specific
   than it needs to be. Pure overrides: this file creates no new component and
   introduces no new class. Removing the <link> restores the previous rendering
   exactly.

   Every rule below corresponds to a MEASURED failure — real contrast ratios
   against the actually-painted background and real hit-box sizes, captured
   with the project audit harness at 390 and 1280 wide.
   Nothing here was changed on suspicion.

   Deliberately NOT changed:

   · The globe section (`.globe-h.neutral-800`, `.body-b3.neutral-600`,
     `.body-b1.neutral-700`). The audit reports these at 1:1 and 1.12:1, which
     looks alarming and is wrong: that section's background is a cream-to-gold
     gradient painted below the text, which a computed-style walk cannot see,
     so the ratio is measured against the page ink instead. Confirmed by
     screenshot — dark text on cream, entirely legible. Left alone.

   · ~170 further elements the audit cannot measure because they sit on a
     gradient, an image or a <canvas>. Those need a human eye, not a rule here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · target size · WCAG 2.2 SC 2.5.8 (AA, 24×24 CSS px) ────────────────
   The footer's four link columns render at 19.6px tall — they are
   `display:inline-block` links in their own <li>, so the "inline in a block of
   text" exemption does not apply to them. 28 links, desktop only; the mobile
   layer already sizes them correctly.

   inline-flex + min-height rather than padding, so the hit box grows
   symmetrically around the text and the column rhythm is unchanged.          */

.orof__list li > a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* ── 2 · contrast · footer support text ───────────────────────────────────
   Measured on the opaque #080808 footer, so these numbers are certain:
       .orof__soon        #6D7378   4.17:1   (needs 4.5)
       .orof__st-s        #71767B   4.37:1   (needs 4.5)
       .orof__disclaimer  #71767B   4.37:1   (needs 4.5)
   All three are the same cool grey family. #757A7F is the first step up that
   clears 4.5 with margin (4.62:1) while keeping the hue — the text stays
   visibly secondary to the paper-white copy above it, which is the point of
   the colour in the first place.

   The disclaimer matters most: it is the line that states ORO is a utility
   token. A legal disclaimer nobody can read is not a disclaimer.             */

.orof__soon,
.orof__st-s,
.orof__disclaimer {
  color: #757A7F;
}

/* ── 3 · contrast · the gold "Slot Market" panel ──────────────────────────
   White on the solid #F3B720 panel measures 1.81:1. The background is opaque
   and measured, so unlike the globe section there is no ambiguity here: the
   heading needs 3:1 and the body copy needs 4.5:1, and both fail badly. The
   paragraph is genuinely hard to read — confirmed by screenshot at 390px.

   Dark ink on gold is already this site's own convention: every gold button
   uses #1A1305 on the same ramp. Reusing it here reads as more on-brand, not
   less, and takes the panel to 10.19:1.

   ⚠ This is the one rule in this file with a VISIBLE design consequence.
     Delete this block to revert to white text.                               */

.text-block.wallet-p .headline-h5,
.text-block.wallet-p .body-b4 {
  color: #1A1305;
}

/* ── 4 · focus visibility ─────────────────────────────────────────────────
   The inherited export relies on the UA default focus ring, which is close to
   invisible on #080808. A keyboard user currently cannot tell where they are.
   `:focus-visible` only, so pointer users never see it.

   Scoped to the elements that actually take focus rather than a bare `*`, so
   this cannot fight a component that already draws its own ring.             */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid #EAD795;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── 5 · respect the reduced-motion preference at the document level ───────
   The added layers honour it individually. The inherited Webflow interactions
   and the `[view-item]` reveal transitions in index.html's inline <style> do
   not. This does not disable GSAP — it removes the long CSS transitions that
   make the page feel unstable for anyone who has asked for less movement.    */

@media (prefers-reduced-motion: reduce) {
  [view-item="from-center"],
  [view-item="from-down"] {
    transition-duration: .01ms !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .preloader,
  [data-levitation="1"] {
    animation: none !important;
  }
}