/* Mobile-first audit fixes — layered after tailwind-compiled.css so these win
   the cascade without needing to edit that single-line generated file. */

/* MOB-02: hamburger button had no defined touch-target size (font-size:25px,
   no padding). WCAG 2.5.5 / platform guidance want >=44x44px. */
@media (width<=900px) {
  .menu {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
  }
}

/* MOB-04: no orientation/short-viewport handling — a landscape phone matches
   the same width-based rules as a portrait tablet but has far less height. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-block: 32px;
  }
  .hero-art {
    min-height: 0;
  }
}

/* A11Y-03: this label/meta color passes AA (5.4:1) but not AAA (7:1) —
   nudged lighter so it clears both. */
.article-meta,
.crumb {
  color: #9199b3;
}

/* Real photo background for the homepage hero, layered underneath the
   original two gradients (kept as-is) so the tint/vignette still does its
   job of keeping the headline and CTA legible over a busy scene.
   PERF: the photo moved from this background-image to a real <img
   class="hero-bg-photo"> in front-page.php — a CSS background-image on the
   page's LCP element isn't discoverable by the browser's preload scanner
   until the stylesheet has been fetched and parsed, which was adding
   ~150-400ms of avoidable delay to LCP. The <img> carries fetchpriority
   and a mobile/desktop srcset instead. z-index:-1 (see .hero-bg-photo
   below) keeps it painting under this gradient automatically. */
.hero {
  background:
    radial-gradient(circle at 70% 30%, #43207844, #0000 40%),
    linear-gradient(145deg, #090b19b3 35%, #12122bcc);
}
.hero-bg-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Mobile Navigation Font Size Fix */
.mobile-nav > a:not(.button) {
  font-family: var(--font-ui), sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--line) !important;
  color: #f7f7f3 !important;
}

.mobile-nav > a:not(.button):hover {
  color: var(--red) !important;
}

/* A11Y-04: white/gold text directly on the brand red (#ff3045) failed
   4.5:1 in several spots — announce bar 3.64:1, safety-section kicker
   2.23:1, safety body copy 3.64:1, both red buttons 3.64:1 / 3.39:1.
   Rather than darkening --red itself (still passes where it's used as an
   accent/border against dark backgrounds elsewhere), these on-red text
   elements switch to the same dark ink (#111523) already used for
   on-light-green text in this palette (.announce/.safety light variants) —
   verified ~5:1 against #ff3045. */
.announce,
.safety > p,
.safety .kicker,
.safety a.button,
.final-cta a.button.primary {
  color: #111523 !important;
}
.safety a.button.ghost {
  border-color: #111523 !important;
}

/* A11Y-05: footer meta text (#60667e on #050607) measured 3.57:1. Reuses
   the same muted-but-AA-passing gray as A11Y-03 above (7.1:1+ here). */
.footer-bottom,
.footer-bottom span {
  color: #9199b3;
}

/* A11Y-06: single-game "key information" sidebar labels (#6f768f on
   #101217) measured 4.16:1 — same fix, same reused gray (6.6:1 here). */
.key-info dt {
  color: #9199b3;
}

/* A11Y-07: social-media page card labels (#687089 on #101217) measured
   3.8:1 — same fix, same reused gray. */
.social-card span {
  color: #9199b3;
}

/* A11Y-08: contact form helper text (#6d748d) measured 4.29:1 — same fix,
   same reused gray. */
.contact small {
  color: #9199b3;
}