/* ============================================================
   Mobile Axe — POLISH LAYER (final, loaded last)
   Cross-cutting refinements applied on top of every other CSS:
     §1  Focus rings (a11y)
     §2  Touch targets (Apple HIG 44×44)
     §3  Smoother transitions on every interactive surface
     §4  Card hover unification
     §5  Section heading rhythm
     §6  Form input polish
     §7  iPhone safe-area + sticky CTA refinement
     §8  Typography rhythm (text-wrap, optical alignment)
     §9  Selection color
     §10 Scrollbar styling (subtle, brand-aware)
     §11 Picture/img defaults (no orphan alt text)
     §12 Hero-proof pill row balance
     §13 Reviews + landing-page consistency
   ============================================================ */

/* ── §1 Focus rings — gold outline, never the browser default blue ── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
/* Inputs inside dark hero / forms — keep the existing gold-ring shadow effect */
.hero input:focus-visible,
.quote-section input:focus-visible,
.quote-section select:focus-visible,
.quote-section textarea:focus-visible {
  outline-color: var(--gold);
}

/* ── §2 Touch targets — Apple HIG min 44×44 on phones ── */
@media (max-width: 720px) {
  a.button,
  .nav-toggle,
  .nav-sound,
  .nav-links a,
  .nav-drawer a,
  .footer a,
  .hero-meta a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-toggle { min-width: 44px; }
  /* Sticky CTA — ensure tappable area, no accidental drag */
  .sticky-cta {
    min-height: 50px;
    padding: 14px 24px;
  }
}

/* ── §3 Smoother transitions on interactives ── */
a, button, .button, .card, .event-card, .review-card, .package, .proof-item,
.strip-photo, .area-link, .g-cell, .calendar-day, .stat, .review-stat,
input, select, textarea {
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  a, button, .button, .card, .event-card, .review-card, .package,
  .proof-item, .strip-photo, .area-link, .g-cell, .calendar-day,
  .stat, .review-stat, input, select, textarea {
    transition: none !important;
  }
}

/* ── §4 Card hover unification — gentle lift, never jumpy ── */
.event-card:hover,
.review-card:hover,
.package:hover,
.proof-item:hover,
.area-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

/* ── §5 Section heading rhythm — every section gets the same eyebrow → h2 cadence ── */
section > .section-label,
section > * > .section-label {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin: 0 0 14px;
}
section[data-section-mode="dark"] > .section-label,
section[data-section-mode="dark"] > * > .section-label,
.real-events-strip .section-label,
.proof-band .section-label {
  color: var(--gold-soft);
}
/* Tighter gap between section-label and the h2 that follows it */
section > .section-label + h2,
section > * > .section-label + h2 {
  margin-top: 4px;
}

/* ── §6 Form input polish — light-surface variant ── */
.estimator-form input,
.estimator-form select,
.estimator-form textarea,
.lead-form input,
.lead-form textarea,
.lead-form select,
.estimator-card input,
.estimator-card select,
.estimator-card textarea {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-button);
  padding: 12px 14px;
  font: inherit;
  width: 100%;
}
.estimator-form input:focus,
.estimator-form select:focus,
.estimator-form textarea:focus,
.lead-form input:focus,
.lead-form textarea:focus,
.lead-form select:focus,
.estimator-card input:focus,
.estimator-card select:focus,
.estimator-card textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 140, 42, 0.18);
  outline: none;
}
.estimator-form label,
.lead-form label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted-strong);
  display: grid;
  gap: 6px;
}
.estimator-form input::placeholder,
.lead-form input::placeholder,
.estimator-form textarea::placeholder {
  color: rgba(94, 107, 98, 0.7);
}

/* ── §7 iPhone safe-area + sticky CTA — hides over hero, slides in after ── */
.sticky-cta {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  right: max(16px, env(safe-area-inset-right));
  /* On mobile the original components.css stretched it edge-to-edge.
     Anchor only to the right so it stays a compact pill on every breakpoint. */
  left: auto;
  z-index: 40;
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: var(--gold);
  color: var(--ink);
  border: 0;
  box-shadow: 0 12px 28px rgba(15, 26, 20, 0.32), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  /* Hidden by default — JS adds .is-visible after the hero scrolls out of view */
  opacity: 0;
  transform: translateY(120%) scale(0.96);
  pointer-events: none;
  transition: opacity 280ms cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
              background 160ms ease,
              box-shadow 220ms ease;
}
.sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.sticky-cta:hover {
  transform: translateY(-2px) scale(1);
  background: var(--gold-hi);
  box-shadow: 0 18px 32px rgba(15, 26, 20, 0.4);
}
@media (max-width: 560px) {
  .sticky-cta {
    left: auto;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    padding: 12px 20px;
    font-size: 0.92rem;
  }
}
/* Reduced motion: just fade, no transform */
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transform: none !important; transition: opacity 200ms ease; }
  .sticky-cta.is-visible { transform: none !important; }
}

/* ── §8 Typography rhythm — apply text-wrap to long-form copy ── */
.hero h1,
section h2,
.review-card blockquote,
.event-card h3,
.intro-band h2,
.proof-band h2,
.estimator-section h2,
.gallery-head h2 {
  text-wrap: balance;
}
.hero p,
section p,
.event-card p,
.review-card p,
.area-link p,
.proof-item p {
  text-wrap: pretty;
}

/* Smaller, tighter h3 across cards — was inconsistent (0.95–1.4rem) */
.event-card h3,
.proof-item h3,
.safety-grid article h3,
.area-link h3,
.review-card h3,
.package h3 {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0 0 6px;
}

/* ── §9 Selection color — locked to brand ── */
::selection {
  background: var(--gold);
  color: var(--ink);
}
::-moz-selection {
  background: var(--gold);
  color: var(--ink);
}

/* ── §10 Scrollbar — subtle, on-brand (Firefox + WebKit) ── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 26, 20, 0.18) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(15, 26, 20, 0.18);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 26, 20, 0.32);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ── §11 Image / picture defaults — never let an image be the source of layout shift ── */
img {
  background: rgba(15, 26, 20, 0.05);
  border-radius: 4px;
}
img[loading="lazy"] {
  content-visibility: auto;
}

/* ── §12 Hero-proof pill row — even, balanced wrap ── */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hero-proof span {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@media (max-width: 560px) {
  .hero-proof { gap: 6px; font-size: 11.5px; }
  .hero-proof span { padding: 5px 9px; }
}

/* ── §13 Review card polish — visible whitespace, no orphans ── */
.review-card,
.ma-review-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-card blockquote,
.ma-review-card .ma-review-card__quote {
  margin: 0;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
}
.review-card small,
.ma-review-card .ma-review-card__name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
}
.stars,
.ma-review-card__stars {
  letter-spacing: 2px;
  color: var(--gold);
  line-height: 1;
}

/* ── §14 Real-events-strip — make sure the dark photo strip on iPhone
       doesn't have a single squashed 1.6fr cell and 4 tiny slivers ── */
@media (max-width: 720px) {
  .real-events-strip .strip-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 160px;
    aspect-ratio: auto;
    gap: 6px;
  }
  .real-events-strip .strip-photo.strip-photo--lg {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 16/9;
  }
}

/* ── §15 Section padding rhythm — collapse irregular gaps ── */
section {
  scroll-margin-top: calc(var(--nav-h) + 8px); /* anchor-scroll lands below sticky nav */
}

/* ── §16 Nav — when scrolled, denser shadow + crisper bottom border ── */
.nav[data-scrolled="true"] {
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(15, 26, 20, 0.06);
}

/* ── §17 Drawer (mobile nav) — polish layered ONLY when the
       drawer is .open. Without `.open`, the original
       components.css `display: none` must keep applying so the
       drawer never renders as an inline block of links on
       desktop. Previous version of this rule omitted the
       `.open` scope which broke wide-screen rendering. */
.nav-drawer.open {
  /* Match desktop hover language but keep components.css behavior. */
  gap: 4px;
}
.nav-drawer.open a:not(.button) {
  border-radius: 8px;
  transition: background 140ms ease, color 140ms ease;
}
.nav-drawer.open a:not(.button):hover,
.nav-drawer.open a:not(.button):focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* ── §18 Print — leave the brand alone, hide chrome ── */
@media print {
  .nav, .nav-drawer, .sticky-cta, .hero-ticker, .footer-deeplinks,
  .ma-reviews-rail, .ma-marquee, video, audio { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: inherit; text-decoration: underline; }
}