/* =====================================================================
   QA PASS 2 — WCAG 2.1 AA contrast + responsive refinements.
   Approved 2026-06-18. These are OVERRIDES ONLY, loaded after site.css so
   that site.css stays verbatim from the approved static build.
   ===================================================================== */

/* (1) Gold emphasis TEXT on LIGHT sections — deepen to reach AA (large text
   needs 3.0:1; #C49B48 was 2.43:1). Dark grounds already use --gold-bright,
   which passes. Button fills (background:var(--gold)) are unaffected. */
.light .gold,
.mist .gold {
  color: #A47E30; /* 3.5:1 on warm-white, 3.3:1 on mist */
}

/* (2) Muted "concrete" secondary text on DARK grounds — lighten for AA
   (#6C7177 was 3.65:1 on graphite). Scoped via the custom property so LIGHT
   sections keep the original concrete (which passes there at 4.6:1). */
.dark,
.darker,
.hero,
.page-hero,
.band,
.footer,
.topbar {
  --concrete: #868B91; /* 5.2:1 on graphite */
}

/* (3) Keep the wide display headings from clipping on small phones. The cause
   is the ch-based max-widths in site.css (e.g. .hero h1{max-width:16ch}), which
   are narrower than the container, so long uppercase words overflow that cap and
   get clipped by overflow-x:hidden. On small screens we release those caps so
   headings use the full width and wrap naturally; desktop is unchanged. A small
   font step-down + overflow-wrap add safety. */
.h1,
.h2 {
  overflow-wrap: break-word;
}
@media (max-width: 480px) {
  .hero h1,
  .sp-head .h2,
  .reviews-top .h2 {
    max-width: none;
  }
  /* Set directly on the headings (not via the --fs-* custom property) so the
     small-screen step-down reliably wins over site.css. */
  .h1 {
    font-size: clamp(1.45rem, 6.8vw, 2.4rem);
  }
  .h2 {
    font-size: clamp(1.3rem, 6vw, 2.1rem);
  }
}