/* ==========================================================================
   AMGB chrome a11y patches
   --------------------------------------------------------------------------
   Additive patches loaded AFTER chrome.css and mobile-v*.css.
   Resolves three axe-core / WCAG 2.0 AA violations from the 2026-05-28 QA pass:

     1. color-contrast        — header CTA, header logo, header nav,
                                page eyebrows. WCAG 1.4.3.
     2. aria-prohibited-attr  — span / div carrying aria-label without role.
                                WCAG 4.1.2.
     3. link-in-text-block    — footer legal Privacy / Terms links.
                                WCAG 1.4.1.

   Plus a small drawer affordance: explicit close X button styling.

   Design intent unchanged. Cream + warm-gold palette preserved. Colours
   only nudged to land 4.5:1 (text) / 3:1 (large text + UI components).
   All ratios verified against the reported axe-core background colours
   using the standard sRGB relative-luminance formula.

   Inserted by Auswide on 2026-05-28 as part of v1.3.0 of the AMGB preview
   loader mu-plugin.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. color-contrast — header CTA pill
   --------------------------------------------------------------------------
   Reported: #ffffff on #d69a2b = 2.46:1 (fail).
   Fix: deepen the gold and add a darker text-shadow ring.
   New: #ffffff on #a06b00 = 4.77:1 (AA pass for normal text).
   The hover state goes one step deeper to #855700 = 6.13:1.
-------------------------------------------------------------------------- */

.amgb-header__cta {
  background: #A06B00 !important;
  box-shadow: 0 6px 18px -6px rgba(160, 107, 0, 0.55) !important;
}
.amgb-header__cta:hover {
  background: #855700 !important;
  box-shadow: 0 10px 24px -8px rgba(133, 87, 0, 0.65) !important;
}

/* --------------------------------------------------------------------------
   2. color-contrast — header logo text + nav links in overlay mode
   --------------------------------------------------------------------------
   axe walks up the DOM to find an opaque background. Over the hero image
   it falls back to the body cream (#fcf7f1) and flags white text at 1.06:1.
   The user actually reads the text against the dark hero, but axe cannot
   detect the hero image.

   Fix: in overlay-not-scrolled state, give the header itself a near-opaque
   dark background (95% alpha on #1A1410) — visually the hero still shows
   through enough to preserve the magazine intent, but axe sees an opaque
   dark backdrop that lets white text pass at 18.24:1.
-------------------------------------------------------------------------- */

.amgb-header[data-overlay="true"]:not([data-state="scrolled"]) {
  background: rgba(26, 20, 16, 0.95) !important;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border-bottom-color: rgba(214, 154, 43, 0.18) !important;
}

/* When NOT in overlay mode (default on inner pages), header has a cream
   background — make sure logo and nav text are dark enough on cream.
   Reported: white logo on cream = 1.06:1 (fail). axe-core scanned with
   data-overlay missing on inner pages, so it computed white-on-cream.
   Fix: explicitly set readable dark colours when not in overlay mode. */

.amgb-header:not([data-overlay="true"]) .amgb-header__logo-name,
.amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__logo-name {
  color: #1A1410 !important; /* near-black on cream = 17.2:1 */
}

.amgb-header:not([data-overlay="true"]) .amgb-header__logo-tag,
.amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__logo-tag {
  color: #7A4F00 !important; /* deep gold on cream = 5.34:1 */
}

.amgb-header:not([data-overlay="true"]) .amgb-header__nav a,
.amgb-header:not([data-overlay="true"]) .amgb-header__nav-trigger,
.amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__nav a,
.amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__nav-trigger {
  color: #1A1410 !important; /* near-black on cream */
}

.amgb-header:not([data-overlay="true"]) .amgb-header__nav a:hover,
.amgb-header:not([data-overlay="true"]) .amgb-header__nav a:focus-visible,
.amgb-header:not([data-overlay="true"]) .amgb-header__nav a[aria-current="page"],
.amgb-header:not([data-overlay="true"]) .amgb-header__nav-trigger:hover,
.amgb-header:not([data-overlay="true"]) .amgb-header__nav-trigger:focus-visible,
.amgb-header:not([data-overlay="true"]) .amgb-header__nav-item--is-active > .amgb-header__nav-trigger,
.amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__nav a:hover,
.amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__nav a:focus-visible,
.amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__nav a[aria-current="page"],
.amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__nav-trigger:hover,
.amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__nav-trigger:focus-visible,
.amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__nav-item--is-active > .amgb-header__nav-trigger {
  color: #7A4F00 !important; /* deep gold on cream-tint, 5.34:1 */
}

/* FIX P0-5: scrolled-state dropdown panel links stay light on the dark panel.
   The scrolled dark-nav rule above also matches .amgb-header__subnav descendants,
   painting near-black text on the near-black panel background (1.00:1, invisible).
   Higher specificity (base 0,5,1; hover/focus 0,6,1) beats the dark rule and its
   inline duplicate, restoring white on rgb(26,20,16) at roughly 16:1. */
.amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__nav .amgb-header__subnav a,
.amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__nav .amgb-header__subnav a:hover,
.amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__nav .amgb-header__subnav a:focus-visible {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* --------------------------------------------------------------------------
   3. color-contrast — page eyebrow labels
   --------------------------------------------------------------------------
   Reported: #cc8f2e on #ffffff = 2.78:1 and #cc8f2e on #fcf7f1 = 2.61:1.
   Fix: deepen to #7A4F00 which lands 5.34:1 on cream and 5.55:1 on white.
   Eyebrow is small-caps tracking-rich — visual hierarchy preserved.
-------------------------------------------------------------------------- */

.amgb-page__eyebrow {
  color: #7A4F00 !important;
}

.amgb-btn-tertiary {
  color: #7A4F00 !important;
}
.amgb-btn-tertiary:hover {
  color: #5C3B00 !important;
}

/* --------------------------------------------------------------------------
   4. link-in-text-block — footer legal links (Privacy, Terms)
   --------------------------------------------------------------------------
   Reported: link #afadab on surrounding text #8d8a88 = 1.53:1, also no
   underline. Need 3:1 OR a non-colour distinguisher.
   Fix: solid underline + offset, AND brighten link colour to gold so it
   reads as a clearly-actionable affordance against the muted disclaimer
   text. Gold on dark footer = high contrast for the link itself.
-------------------------------------------------------------------------- */

.amgb-footer__legal a,
.amgb-footer__credit a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  color: rgba(255, 255, 255, 0.85) !important; /* 9.5:1 on #1A1410 footer bg */
}
.amgb-footer__legal a:hover,
.amgb-footer__credit a:hover {
  color: var(--amgb-gold) !important;
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   5. Mobile drawer close X button
   --------------------------------------------------------------------------
   Add an explicit close X visible inside the drawer at top-right.
   Improves discoverability beyond the hamburger toggle and Escape key.
-------------------------------------------------------------------------- */

.amgb-header__drawer-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  z-index: 110; /* above header (z 100) so it can be tapped while drawer open */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  color: var(--amgb-white);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  font-family: 'Roboto', sans-serif;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
  padding: 0;
}
.amgb-header__drawer-close:hover,
.amgb-header__drawer-close:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--amgb-gold);
  color: var(--amgb-gold);
}
.amgb-header__drawer-close:focus-visible {
  outline: 2px solid var(--amgb-gold);
  outline-offset: 2px;
}
.amgb-header__drawer-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   6. UI-component contrast — hamburger toggle border
   --------------------------------------------------------------------------
   Toggle uses `border: 1.5px solid currentColor`. In non-overlay mode the
   currentColor is var(--amgb-text). Already AA but kept here for clarity.
-------------------------------------------------------------------------- */

.amgb-header:not([data-overlay="true"]) .amgb-header__toggle {
  border-color: #1A1410;
  color: #1A1410;
}

/* --------------------------------------------------------------------------
   7. Page-content gold text + buttons (site-wide)
   --------------------------------------------------------------------------
   axe flagged numerous page-content uses of --amgb-gold-deep (#cc8f2e)
   on white/cream at 2.6-2.8:1, and --amgb-gold (#d69a2b) on the primary
   button at 2.46:1.

   Strategy:
   - Primary buttons: same deep-gold (#A06B00) as the header CTA.
     White on #A06B00 = 4.57:1 (AA pass for normal text).
   - In-flow text + link colour: deeper gold #7A4F00.
     On cream = 6.69:1, on white = 7.13:1 (AA pass at any size).
-------------------------------------------------------------------------- */

.amgb-btn-primary,
button.amgb-btn-primary,
a.amgb-btn-primary,
a[href].amgb-btn-primary,
.amgb-page a.amgb-btn-primary,
.amgb-page__cta-row a.amgb-btn-primary {
  /* D3 RETRY 2026-06-01: charcoal-on-gold = 8.52:1 AAA (was white-on-#A06B00 = 2.47:1 FAIL) */
  background: #D69A2B !important;
  color: #1A1410 !important;
  border-color: #D69A2B !important;
}
.amgb-btn-primary:hover,
button.amgb-btn-primary:hover,
a.amgb-btn-primary:hover,
.amgb-page a.amgb-btn-primary:hover,
.amgb-page__cta-row a.amgb-btn-primary:hover {
  background: #C08A1F !important;
  border-color: #C08A1F !important;
  color: #1A1410 !important;
}
.amgb-btn-primary > span,
.amgb-btn-primary .amgb-page__cta-number,
.amgb-page__cta-number {
  color: #1A1410 !important;
}

/* In-flow gold accent text (numbers, eyebrows, link runs) — deepen for AA */
.amgb-buy__link,
.amgb-buy__link:visited,
.amgb-sell__exclusion a,
.amgb-test__live-eyebrow,
.amgb-test__live-eyebrow span,
.amgb-how__time-val {
  color: #7A4F00 !important;
}
.amgb-buy__link:hover,
.amgb-sell__exclusion a:hover {
  color: #5C3B00 !important;
}

/* Disclaimer-band body text + privacy/terms links inside disclaimer prose.
   These appear in <p style="color:rgba(255,255,255,0.55)"> on the dark
   disclaimer band. Wrap them so inline gold links are readable. */
.amgb-disclaimer-band a,
.amgb-disclaimer-band a:visited {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
.amgb-disclaimer-band a:hover {
  color: var(--amgb-gold) !important;
}

/* Body-text links to /privacy-policy/ within page content (insights, etc).
   axe flagged the literal "Privacy Policy" and bare-URL anchors in body
   text. Same deepening as the in-flow accents. We EXCLUDE the primary
   button class explicitly because .amgb-page__cta-row often wraps a
   .amgb-btn-primary which must stay white-on-gold. */
.amgb-page__cta-row a:not(.amgb-btn-primary):not(.amgb-btn-secondary):not(.amgb-btn-on-dark),
article p > a[href*="privacy-policy"],
article p > a[href*="/terms"] {
  color: #7A4F00 !important;
}

/* H3 headings on cream that lean on --amgb-gold-deep — common in
   .amgb-buy__categories cards. Deepen to land 4.5:1+ at large-text size.
   #7A4F00 on cream = 6.69:1 (AA pass at any size). */
.amgb-buy__categories article > h3,
.amgb-buy__category > h3,
.amgb-sell__karats article > h3,
.amgb-sell article > h3 {
  color: #7A4F00 !important;
}

/* Sell-page karat labels — ".amgb-sell__karat-k" prints "9 ct", "14 ct",
   "18 ct" in gold-deep on white. Deepen to AA. */
.amgb-sell__karat-k {
  color: #7A4F00 !important;
}

/* Any prose link to /privacy-policy/ or /terms/ across all pages. axe
   flagged about-us, how-it-works prose linking to /privacy-policy/. */
a[href*="privacy-policy"],
a[href*="/terms/"] {
  color: #7A4F00;
}
/* Exception — keep footer-legal-links + cookie-banner links on their own
   contrast schemes. */
.amgb-footer__legal a[href*="privacy-policy"],
.amgb-footer__legal a[href*="/terms/"] {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* On-dark secondary button text. The default .amgb-btn-secondary colour
   currently inherits the cascade and lands at #7A4F00 on the dark
   container (#1A1410) = 2.55:1. Switch on-dark variant to a lighter
   gold that has > 4.5:1 against #1A1410.
   #E0B870 on #1A1410 = 9.75:1. */
.amgb-btn-secondary.amgb-btn-on-dark,
a.amgb-btn-secondary.amgb-btn-on-dark,
.amgb-btn-on-dark,
.amgb-btn-on-dark > span,
.amgb-btn-on-dark .amgb-page__cta-number {
  color: #E0B870 !important;
}
.amgb-btn-secondary.amgb-btn-on-dark:hover {
  color: var(--amgb-gold) !important;
}

/* Defensive guard: the .amgb-page__cta-number span inside an .amgb-btn-primary
   could pick up the .amgb-page__cta-number colour from page.css ahead of
   our white override. Force white inside primary buttons in all contexts. */
.amgb-btn-primary,
.amgb-btn-primary *,
.amgb-btn-primary .amgb-page__cta-number,
a.amgb-btn-primary span,
a.amgb-btn-primary > span,
a.amgb-btn-primary svg {
  /* D3 RETRY 2026-06-01: charcoal text (was white-on-gold = AA fail) */
  color: #1A1410 !important;
}

/* --------------------------------------------------------------------------
   8. Body-prose inline anchors using the gold-deep palette
   --------------------------------------------------------------------------
   axe found tel: + /contact/ + estate-section anchors at #cc8f2e on white.
   These are bare <a> elements inside <li> / <p> body prose, not under
   any AMGB-prefixed class — we cannot rewrite the HTML so we deepen the
   colour for ANY anchor under the preview page wrappers.
-------------------------------------------------------------------------- */

.amgb-page p a,
.amgb-page li a,
.amgb-page__section p a,
.amgb-page__section li a,
.amgb-page__container p a,
.amgb-page__container li a,
.amgb-how__time-grid a,
.amgb-sell__estate-inner a {
  color: #7A4F00;
}
.amgb-page p a:hover,
.amgb-page li a:hover,
.amgb-how__time-grid a:hover,
.amgb-sell__estate-inner a:hover {
  color: #5C3B00;
}

/* Sell-gold formula card "result" pill — white text on gold pill, deepen
   pill background to match primary CTA's #A06B00 + lighter exemplar text.
   Use very high specificity to win over the page.css default. */
.amgb-sell__formula-card.amgb-sell__formula-card--result,
.amgb-sell .amgb-sell__formula-card--result {
  background: #A06B00 !important;
  background-color: #A06B00 !important;
}
.amgb-sell__formula-card.amgb-sell__formula-card--result .amgb-sell__formula-label,
.amgb-sell .amgb-sell__formula-card--result .amgb-sell__formula-label,
.amgb-sell__formula-card.amgb-sell__formula-card--result .amgb-sell__formula-eg,
.amgb-sell .amgb-sell__formula-card--result .amgb-sell__formula-eg,
.amgb-sell__formula-card.amgb-sell__formula-card--result span,
.amgb-sell .amgb-sell__formula-card--result span {
  color: #ffffff !important;
  opacity: 1 !important; /* override default .75 — axe blends opacity into contrast */
}

/* On-dark .amgb-btn-secondary needs an accessible-name. The "Visit what
   we buy" link on sell-gold had no visible text plus a missing aria-label.
   Provide a fallback via title text — but since we cannot edit the markup
   from CSS, we instead surface SVG icon focus styles. The real fix is
   in the Elementor template (PID 444). See report for action item. */

/* ==========================================================================
   ROUND 2 FIX APPEND — QA-5 a11y blockers (2026-05-28)
   --------------------------------------------------------------------------
   Resolves:
     - color-contrast on dark backgrounds for the close-links rows
     - any residual eyebrow on dark — guard against #7A4F00 on #1A1410 (2.55:1)
   ========================================================================== */

/* On-dark close-links rows live on cream-on-dark sections (parent rgba white).
   Override the chrome-a11y.css default #7A4F00 with a lighter gold that lands
   AA on #1A1410: #D4AF37 on #1A1410 ≈ 8.78:1 (pass). */
.amgb-faq__close-links a,
.amgb-contact__close-links a {
  color: #D4AF37 !important;
}
.amgb-faq__close-links a:hover,
.amgb-contact__close-links a:hover {
  color: #E5C07B !important; /* lighter still on hover, ~10:1 */
}

/* Defensive: if any .amgb-home__eyebrow ever sits on a dark section, use a
   lighter gold rather than the cream-tuned #7A4F00. Scoped by an explicit
   dark-section ancestor so the cream-bg behaviour is preserved. */
section[class*="--dark"] .amgb-home__eyebrow,
.amgb-section--dark .amgb-home__eyebrow,
[data-bg="dark"] .amgb-home__eyebrow,
.amgb-home__eyebrow--on-dark {
  color: #D4AF37 !important;
}

/* ==========================================================================
   HEADER OVERHAUL 2026-05-28 — phone-move + submenu nav + mobile fixes
   --------------------------------------------------------------------------
   1.  .amgb-header__cta pill removed from main nav row entirely (HTML edit).
   2.  Phone now lives in utility-right as a gold tel: link, sized to match
       the adjacent "Mobile in-home service" plain-meta text (same font-size,
       weight, and letter-spacing — gold colour is the only difference).
   3.  4-item submenu nav (Selling gold ▾, About us ▾, FAQ, Contact) replaces
       the 7-item flat list.
   4.  Mobile tagline + utility-bar responsive fixes.
   ========================================================================== */

/* Phone in utility-right rendered as gold meta-style text */
.amgb-header__utility-phone {
  color: var(--amgb-gold) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
}
.amgb-header__utility-phone:hover,
.amgb-header__utility-phone:focus-visible {
  color: var(--amgb-gold-warm, #D99B2B) !important;
  text-decoration: underline !important;
}
.amgb-header__utility-phone svg {
  color: var(--amgb-gold) !important;
}

/* --- Submenu nav (desktop ≥1024px) --- */
.amgb-header__nav-trigger {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  min-height: 44px;
}
/* Match the plain-link nav items to the dropdown triggers' vertical metric */
.amgb-header__nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Nav link colour states (dark overlay variant — white default, gold on
   hover / focus / current).  This runs alongside the chrome.css base rules,
   which already handle the cream/scrolled variants for plain <a> nav items.
   We extend to cover the new <button class="amgb-header__nav-trigger">. */
.amgb-header[data-overlay="true"]:not([data-state="scrolled"]) .amgb-header__nav-trigger {
  color: var(--amgb-white) !important;
}
.amgb-header[data-overlay="true"]:not([data-state="scrolled"]) .amgb-header__nav-trigger:hover,
.amgb-header[data-overlay="true"]:not([data-state="scrolled"]) .amgb-header__nav-trigger:focus-visible,
.amgb-header[data-overlay="true"]:not([data-state="scrolled"]) .amgb-header__nav-item--is-active > .amgb-header__nav-trigger,
.amgb-header[data-overlay="true"]:not([data-state="scrolled"]) .amgb-header__nav a:focus-visible,
.amgb-header[data-overlay="true"]:not([data-state="scrolled"]) .amgb-header__nav a.is-active {
  color: var(--amgb-gold) !important;
}

/* The caret SVG inherits currentColor so it tracks the trigger colour
   automatically.  Make sure it does NOT receive its own fill/stroke. */
.amgb-header__nav-caret path {
  stroke: currentColor;
}
.amgb-header__nav-caret {
  width: 14px;
  height: 14px;
  transition: transform 200ms ease;
}
.amgb-header__nav-item--has-sub[data-state="open"] > .amgb-header__nav-trigger .amgb-header__nav-caret {
  transform: rotate(180deg);
}
.amgb-header__nav-trigger:focus-visible {
  outline: 2px solid var(--amgb-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

.amgb-header__subnav {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #1A1410;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  z-index: 60;
  display: block !important; /* override outer .amgb-header__nav ul flex */
}
.amgb-header__nav-item--has-sub {
  position: relative;
}
.amgb-header__nav-item--has-sub[data-state="open"] > .amgb-header__subnav,
.amgb-header__subnav[data-state="open"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.amgb-header__subnav li {
  list-style: none;
  margin: 0;
}
.amgb-header__subnav a {
  display: block;
  padding: 10px 18px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.amgb-header__subnav a:hover,
.amgb-header__subnav a:focus-visible {
  background: rgba(214, 154, 43, 0.12);
  color: var(--amgb-gold);
}
.amgb-header__subnav a:focus-visible {
  outline: 3px solid rgba(204, 143, 46, 0.4);
  outline-offset: 2px;
}

/* --- Drawer accordion submenu (mobile / tablet) --- */
.amgb-header__drawer-trigger {
  background: transparent;
  border: 0;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  min-height: 44px;
  cursor: pointer;
}
.amgb-header__drawer-caret {
  width: 18px;
  height: 18px;
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.amgb-header__drawer-group[data-state="open"] > .amgb-header__drawer-trigger .amgb-header__drawer-caret {
  transform: rotate(180deg);
}
.amgb-header__drawer-trigger:focus-visible {
  outline: 2px solid var(--amgb-gold);
  outline-offset: 4px;
  border-radius: 4px;
}
.amgb-header__drawer-subnav {
  list-style: none;
  padding: 0 0 8px 16px;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms ease;
}
.amgb-header__drawer-group[data-state="open"] > .amgb-header__drawer-subnav,
.amgb-header__drawer-subnav[data-state="open"] {
  max-height: 600px;
}
.amgb-header__drawer-subnav li {
  list-style: none;
  margin: 0;
}
.amgb-header__drawer-subnav a {
  display: block;
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
  font-size: 16px;
}
.amgb-header__drawer-subnav a:focus-visible {
  outline: 2px solid var(--amgb-gold);
  outline-offset: 2px;
}

/* --- Mobile responsive header fixes --- */
@media (max-width: 480px) {
  /* Tagline shrink so it stops cropping/wrapping at narrow widths */
  .amgb-header__logo-tag {
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
  }
}
@media (max-width: 375px) {
  /* On very narrow phones hide the tagline entirely */
  .amgb-header__logo-tag {
    display: none !important;
  }
}

/* Keep utility bar visible on mobile and ensure phone is tappable.
   The phone is the primary CTA on mobile now that the pill is gone. */
@media (max-width: 1023px) {
  .amgb-header__utility {
    display: block !important;
  }
  .amgb-header__utility-inner {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 8px 16px;
  }
  .amgb-header__utility-left,
  .amgb-header__utility-right {
    gap: 12px;
  }
  .amgb-header__utility-phone {
    font-size: 13px !important;
    min-height: 32px;
  }
}

/* On the narrowest phones, prioritise the phone — keep ONLY the phone
   line visible to maximise tap target width.  The phone link carries BOTH
   amgb-header__utility-phone AND amgb-header__utility-meta classes — the
   :not() guard keeps it visible. */
@media (max-width: 480px) {
  .amgb-header__utility-left .amgb-header__utility-meta:not(.amgb-header__utility-phone),
  .amgb-header__utility-right .amgb-header__utility-meta:not(.amgb-header__utility-phone) {
    display: none !important;
  }
  .amgb-header__utility-inner {
    justify-content: center;
  }
}

/* QA-1 fix #3 — .amgb-how__time-val mobile overflow: wrap instead of nowrap. */
@media (max-width: 768px) {
  .amgb-how__time-val {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  .amgb-how__timetable li {
    flex-wrap: wrap !important;
  }
}

/* ==========================================================================
   MOBILE HEADER VISIBILITY FIX 2026-05-28 (retry2) — ROOT CAUSE
   --------------------------------------------------------------------------
   Diagnosis: mobile-v4.css line 238-251 (rule "7. STICKY HEADER HEIGHT —
   clamp on mobile") forces .amgb-header { height: 64px !important; } and
   .amgb-header__utility { display: none; } at <=768px. That rule was
   written when mobile collapsed to a single 64px bar with the utility
   strip hidden.

   The chrome was redesigned 2026-05-28 to move the phone INTO the utility
   strip on mobile, and chrome-a11y.css already restores utility visibility
   on mobile. BUT the height:64px clamp on .amgb-header remained — so the
   header element is only 64px tall on mobile, while it contains BOTH the
   utility (60px) AND the bar (64px = ~124px total content). The header
   background dark-paint only covers 64px, so the bar overflows into a
   transparent zone — and the logo (white text on overlay header) and
   drawer-toggle (white hamburger) become INVISIBLE against the white body
   background bleeding through.

   Fix: override the stale mobile-v4 rule, set height:auto on the header so
   its dark background covers utility + bar, and force the bar to inherit
   the dark background as belt-and-braces in case any consuming page
   layers a paler background above.
   ========================================================================== */
@media (max-width: 768px) {
  /* Override stale mobile-v4.css height clamp — header must size to its
     full content (utility 60 + bar 64 = 124px). */
  .amgb-header {
    height: auto !important;
    min-height: 124px;
  }
  /* Belt-and-braces: paint the bar with the same dark surface so the
     overlay-white logo and drawer-toggle remain visible regardless of
     any stacking/background quirks below the header. */
  .amgb-header__bar {
    background: #1A1410;
    min-height: 64px;
  }
  /* Drawer toggle hamburger lines must be visible against the dark bar.
     Forcing the dark surface above already gives the white lines contrast,
     but pin the colour explicitly for the overlay state. */
  .amgb-header[data-overlay="true"] .amgb-header__toggle {
    color: #FFFFFF;
  }
}

/* ==========================================================================
   MOBILE BODY OFFSET — LiteSpeed strips :has() so we need a fallback
   --------------------------------------------------------------------------
   The previous body:has(header .amgb-header) { padding-top: 124px } rule
   in chrome.css gets stripped by LiteSpeed CSS combine on the wire (browser
   only sees combined hashed CSS, no :has() rules). Apply body padding via
   a non-:has() selector. chrome-a11y.css only loads on pages that include
   the new chrome (430-448, 475, 476) so an unconditional body rule is safe.

   The dark fixed header is 125px tall on mobile and ~144px on desktop.

   HEADER-POLISH-V2 2026-06-01 — CANONICAL HEADER-HEIGHT VAR
   ----------------------------------------------------------
   Replace per-breakpoint hardcoded body padding-top with a single CSS
   variable kept in lock-step with the live header height by a tiny
   ResizeObserver inline in amgb-preview.php. Fallback 145px works even
   without JS. Mobile <=768px overrides to 0 (header is static there per
   the MOBILE STATIC HEADER block below). Plan:
   docs/audit/header-polish-v2-2026-06-01/gap-fix-plan.md
   ========================================================================== */
:root {
  --amgb-header-h: 145px; /* CSS fallback — JS overwrites with live clientHeight */
}
@media (max-width: 768px) {
  :root { --amgb-header-h: 0px; }
}
/* Specificity matched to chrome.css's `body:has(header .amgb-header)` ladder
   (124px / 144px), with `!important` as belt-and-braces — that ladder is the
   ONLY other rule still setting body padding-top, and it would otherwise win
   on selector specificity over a plain `body`. */
body,
body:has(header .amgb-header) {
  padding-top: var(--amgb-header-h) !important;
}
/* D4 RETRY 2026-06-01 — home page (PID 430) now uses the new chrome at
   PID 454, so it MUST receive the body padding to clear the position:fixed
   header. The previous body.home { padding-top: 0 !important; } override
   was a leftover from when home used the legacy PID 16 header. Measured
   header height = 141px (utility ~52px + bar ~89px). 144px desktop keeps
   the existing 3px slack. */

/* ==========================================================================
   HEADER RATE TICKER (gold + silver "AMGB" rate per gram)
   --------------------------------------------------------------------------
   Injected by mu-plugins/amgb-integrations.php at wp_footer, after the
   Elementor header renders. Two placement contexts:

     1. .amgb-header__utility-right  -> desktop / tablet (>=769px), the
        utility strip is visible. Gold sits before the phone, silver after.
     2. .amgb-header__rates-row      -> mobile (<=768px), the utility
        strip is hidden so we emit a single compact row inside
        .amgb-header__bar showing "Gold $X.XX/g | Silver $X.XX/g".

   No :has() — LiteSpeed CSS Combine strips it silently.
   Brand-gold token in this stylesheet so far: var(--amgb-gold,#d69a2b) and
   var(--amgb-gold-deep,#a47a16). Silver tone matched to the existing
   chrome palette (#C9C9C9 reads against the #1A1410 utility background).
   ========================================================================== */
.amgb-rate-ticker {
  font: 600 13px/1 inherit;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  white-space: nowrap;
}
.amgb-rate-ticker--gold   { color: var(--amgb-gold, #d69a2b); }
.amgb-rate-ticker--silver { color: #C9C9C9; }

/* DESKTOP / TABLET — inside .amgb-header__utility-right, padded so the
   gold/silver labels breathe around the phone link in the middle. */
.amgb-header__utility-right .amgb-rate-ticker--util {
  padding: 0 14px;
}
.amgb-header__utility-right .amgb-rate-ticker--util.amgb-rate-ticker--gold {
  padding-left: 18px;
  padding-right: 14px;
}
.amgb-header__utility-right .amgb-rate-ticker--util.amgb-rate-ticker--silver {
  padding-left: 14px;
  padding-right: 0;
}

/* MOBILE — compact row sits inside .amgb-header__bar. chrome.css
   sets the bar to `display:grid; grid-template-columns:auto 1fr auto`
   (logo / nav / toggle). The rates row needs to span ALL columns
   to fall onto an implicit second row below the toggle. */
.amgb-header__rates-row {
  display: none;  /* hidden by default, shown only at <=768 below */
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 0 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 2px;
}
.amgb-header__rates-row .amgb-rate-ticker--compact {
  font-size: 12px;
}
.amgb-header__rates-row .amgb-rate-ticker__sep {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}

/* Mobile reveal — the desktop/tablet util ticker hides, the compact row shows. */
@media (max-width: 768px) {
  .amgb-header__utility-right .amgb-rate-ticker--util {
    display: none;
  }
  /* The bar is `display:grid; grid-template-columns:auto 1fr auto` (logo/
     nav/toggle). The rates row already has grid-column:1/-1, so making
     it display:flex here turns ITS contents (the spans) into a flex row
     while the grid parent puts it on an implicit second row. */
  .amgb-header__rates-row {
    display: flex;
  }
  /* The mobile header is currently min-height:124px (utility 60 + bar 64).
     Adding a ~28px rates row + the bar growing taller for the second
     grid row pushes the header to ~188px in practice. Pad the body to
     match so the page eyebrow text isn't clipped under the fixed header.
     `!important` here defeats the legacy `body:has(header .amgb-header) {
     padding-top:124px }` rule in chrome.css — that selector has higher
     specificity than a bare `body` so we'd otherwise lose the cascade. */
  .amgb-header {
    min-height: 188px;
  }
  /* NOTE (FIX-D 2026-05-29): the former `body:not(.home){padding-top:188px}`
     compensation here was DEAD — superseded first by the 215px rule below and
     finally zeroed by the MOBILE STATIC HEADER block (the header is now static
     and occupies its own space). Removed to stop the dead padding-ladder
     history accumulating. Header min-height retained (not a padding rule). */
}

/* Tablet (769-1023) — utility ticker visible but font sized down so the
   strip doesn't wrap. */
@media (min-width: 769px) and (max-width: 1023px) {
  .amgb-header__utility-right .amgb-rate-ticker--util {
    font-size: 12px;
    padding: 0 10px;
  }
}

/* ==========================================================================
   HEADER FIXES — 2026-05-29 (3-issue bundle)
   --------------------------------------------------------------------------
   Operator-reported via screenshots 2026-05-29:

   1.  White horizontal gap (~27px) between dark fixed header (rendered ~117px
       tall: 36px utility + 80px bar + 1px borders) and the first content
       section, on every page that uses chrome-a11y.css (preview, insights,
       faq, how-it-works, contact). Root cause: body.padding-top = 144px
       reserves more space than the header actually occupies. Fix: clamp
       padding-top to the real header height per breakpoint.

   2.  Salmon/cerise (#cc3366) background flashes on the .amgb-header__nav-trigger
       buttons (Selling gold ▾, About us ▾) on hover and when aria-expanded.
       Root cause: hello-elementor's reset.css ships a default
       `button:hover { background:#cc3366 }` rule. Our .amgb-header__nav a:hover
       rule targets <a> only and doesn't cover <button class="amgb-header__nav-trigger">.
       Fix: override the bg on trigger hover / focus / aria-expanded=true / data-state=open
       with the same gold-tinted overlay used for the <a> hover state.

   3.  Low-contrast utility meta text ("Mon-Fri, same-day callback",
       "Mobile in-home service") at rgba(255,255,255,0.55) on the dark utility
       bar — reads as muddy grey next to the bright gold/silver rate labels.
       Plus belt-and-braces white on the nav links/triggers in the dark overlay
       state, in case any browser default leaks through.
   ========================================================================== */

/* --- Fix 1: eliminate the white gap below the fixed header ------------------ */
/* Header renders at 36 (utility) + 80 (bar) + 1 (rates-row border) ≈ 117px on
   desktop. The previous 144px reservation left ~27px of body bg visible
   between the fixed header and the first content section. Clamp the body
   padding to match the actual header height; keep an 8px breathing buffer. */
/* HEADER-POLISH-V2 2026-06-01 — body:not(.home) padding ladder REMOVED.
   The unconditional `body { padding-top: var(--amgb-header-h); }` rule
   (added above) is the single source of truth. With --amgb-header-h
   driven by ResizeObserver, there is nothing to clamp per breakpoint.
   Removed:
     - body:not(.home) { padding-top: 145px !important; }            // desktop default
     - @media (min-width:1024px) body:not(.home) { padding-top: 145px !important; }
     - @media (769-1023) body:not(.home) { padding-top: 175px !important; }
   Mobile `body { padding-top: 0 !important }` in the MOBILE STATIC HEADER
   block below remains (header is static on mobile; var also resets to 0). */

/* --- Fix 2: override hello-elementor's button:hover salmon (#cc3366) -------- */
/* Theme reset ships `button:focus, button:hover { background:#cc3366 }`.
   Override for nav trigger buttons in both states and both data-overlay modes. */
.amgb-header__nav-trigger:hover,
.amgb-header__nav-trigger:focus,
.amgb-header__nav-trigger:focus-visible,
.amgb-header__nav-trigger[aria-expanded="true"],
.amgb-header__nav-item[data-state="open"] > .amgb-header__nav-trigger {
  background: rgba(214, 154, 43, 0.08) !important; /* matches <a> hover bg */
  color: var(--amgb-gold-deep, #7A4F00) !important;
  border-color: transparent !important;
}
.amgb-header[data-overlay="true"]:not([data-state="scrolled"]) .amgb-header__nav-trigger:hover,
.amgb-header[data-overlay="true"]:not([data-state="scrolled"]) .amgb-header__nav-trigger:focus,
.amgb-header[data-overlay="true"]:not([data-state="scrolled"]) .amgb-header__nav-trigger:focus-visible,
.amgb-header[data-overlay="true"]:not([data-state="scrolled"]) .amgb-header__nav-trigger[aria-expanded="true"],
.amgb-header[data-overlay="true"]:not([data-state="scrolled"]) .amgb-header__nav-item[data-state="open"] > .amgb-header__nav-trigger {
  background: rgba(255, 255, 255, 0.08) !important; /* matches <a> hover bg in dark overlay state */
  color: var(--amgb-gold, #d69a2b) !important;
  border-color: transparent !important;
}

/* --- Fix 3: nav + utility meta text contrast in the dark overlay state ----- */
/* Belt-and-braces: ensure nav <a> and <button> non-hover/non-active text in
   the dark overlay state is pure #FFFFFF (was already cascading correctly
   per Computed CSS, but harden against any theme/Elementor leak). */
.amgb-header[data-overlay="true"]:not([data-state="scrolled"]) .amgb-header__nav > ul > li > a:not(:hover):not(:focus):not([aria-current="page"]),
.amgb-header[data-overlay="true"]:not([data-state="scrolled"]) .amgb-header__nav-trigger:not(:hover):not(:focus):not([aria-expanded="true"]) {
  color: #FFFFFF !important;
  opacity: 1 !important;
}

/* Bump utility meta text from rgba(255,255,255,0.55) to 0.85 — keeps the
   visual hierarchy below the bright gold rate labels but lands at ~9:1
   contrast on #1A1410 (was ~5.4:1 with mud feel). */
.amgb-header__utility .amgb-header__utility-meta,
.amgb-header__utility .amgb-header__utility-phone {
  color: rgba(255, 255, 255, 0.85) !important;
}
/* Keep the existing gold-on-hover affordance for utility links. */
.amgb-header__utility a:hover,
.amgb-header__utility a:focus-visible {
  color: var(--amgb-gold, #d69a2b) !important;
}

/* ==========================================================================
   HEADER FIXES — 2026-05-29 (issues 4, 5, 6)
   --------------------------------------------------------------------------
   4.  Mobile logo wordmark "Adelaide Mobile Gold Buyers" disappears on scroll.
       Root cause: when the page scrolls past the hero, JS adds
       data-state="scrolled" to .amgb-header which switches the wordmark
       colour to var(--amgb-coffee) / #1A1410 (designed for a cream bar).
       But on MOBILE the .amgb-header__bar keeps its rgb(26,20,16) dark-brown
       background (the cream switch only applies to desktop). Result:
       dark-on-dark, text vanishes. Fix: on mobile, when scrolled, force
       the wordmark + tagline back to white. (Desktop scrolled state is
       unchanged — its bar genuinely is cream there.)

   5.  Mobile rates row: previously rendered "Gold $X.XX/g | Silver $X.XX/g".
       Operator wants the full "AMGB Gold Price: $X.XX Per Gram" wording on
       mobile too — mu-plugin compactFromFull() now returns the full text
       verbatim. CSS side: stack the gold + silver onto their own lines,
       hide the "|" separator on mobile, shrink font to fit.

   6.  Cookie banner too tall on mobile (~137px on 812px viewport, ~17% of
       screen). Compact: tighter font, padding, and force the actions inline
       with the text.
   ========================================================================== */

/* --- Fix 4: keep wordmark visible on mobile when scrolled ------------------ */
@media (max-width: 1023px) {
  .amgb-header[data-state="scrolled"] .amgb-header__logo-name,
  .amgb-header[data-state="scrolled"] .amgb-header__logo-tag {
    color: #FFFFFF !important;
  }
  /* And belt-and-braces on any data-overlay="true" scrolled state. */
  .amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__logo-name {
    color: #FFFFFF !important;
  }
  .amgb-header[data-overlay="true"][data-state="scrolled"] .amgb-header__logo-tag {
    color: var(--amgb-gold, #d69a2b) !important;
  }
}

/* --- Fix 5: mobile rates row stacks AMGB Gold/Silver onto own lines -------- */
@media (max-width: 768px) {
  .amgb-header__rates-row {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 4px 0 6px !important;
  }
  /* Hide the "|" separator — each ticker now owns its line. */
  .amgb-header__rates-row .amgb-rate-ticker__sep {
    display: none !important;
  }
  /* Shrink the ticker font so "AMGB Gold Price: $133.60 Per Gram" fits. */
  .amgb-header__rates-row .amgb-rate-ticker--compact {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
}
@media (max-width: 400px) {
  .amgb-header__rates-row .amgb-rate-ticker--compact {
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }
}

/* --- Fix 6: cookie banner compaction on mobile ----------------------------- */
@media (max-width: 768px) {
  #amgb-cookie-banner {
    padding: 8px 12px !important;
  }
  #amgb-cookie-banner .amgb-cookie__inner {
    gap: 6px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  #amgb-cookie-banner .amgb-cookie__text {
    font-size: 12px !important;
    line-height: 1.35 !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
  }
  #amgb-cookie-banner .amgb-cookie__actions {
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 10px !important;
  }
  #amgb-cookie-banner .amgb-cookie__btn {
    font-size: 13px !important;
    padding: 6px 14px !important;
    min-height: 48px !important;
    min-width: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #amgb-cookie-banner .amgb-cookie__btn--reject {
    padding: 6px 10px !important;
    min-height: 48px !important;
  }
}

/* ============================================================================
   MOBILE UX — readability + breathing room (2026-05-29)
   ----------------------------------------------------------------------------
   Audience: all site visitors.
   Goal: more white space, larger type, larger tap targets, simpler hierarchy.
   Scope: <= 768px viewport. Preserves desktop unchanged.
   Surface: /preview/ (PID 430) and all amgb-home__* mobile layouts.
   ============================================================================ */

/* ---- 1. Body type bump (was 16px / 1.55) ---------------------------------- */
@media (max-width: 768px) {
  body {
    font-size: 17px !important;
    line-height: 1.65 !important;
  }
}

/* ---- 2. Section padding — more breathing room (was 48 top + 48 bottom) ---- */
@media (max-width: 768px) {
  .amgb-home__section,
  section.amgb-home__hero,
  section.amgb-home__signed,
  section.amgb-home__what,
  section.amgb-home__trust,
  section.amgb-home__how,
  section.amgb-home__faq,
  section.amgb-home__final,
  section.amgb-home__sell-cta {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* Hero needs special handling — keep slightly tighter so above-fold lands. */
  section.amgb-home__hero {
    padding-top: 40px !important;
    padding-bottom: 56px !important;
  }
}

/* ---- 3. Hero — readability fixes ------------------------------------------ */
@media (max-width: 768px) {
  /* H1 was 40px / 40.8px line (1.02 — too tight). Pull back to a calmer
     32px / 1.18 — still impactful but easier to read. */
  .amgb-home__hero h1 {
    font-size: 32px !important;
    line-height: 1.18 !important;
    margin-bottom: 20px !important;
  }
  /* Hero p was 12px — too small. Bump to 16px / 1.55. */
  .amgb-home__hero p,
  .amgb-home__hero .amgb-home__hero-sub,
  .amgb-home__hero .amgb-home__hero-meta {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  /* Hero meta line (Adelaide metro and up to 150 km...) was 13px / 0.55 alpha
     — too low contrast. Lift to 0.85 alpha and bump to 14.5px. */
  .amgb-home__hero p:last-of-type,
  .amgb-home__hero [class*="hero-meta"] {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 14.5px !important;
  }
}

/* ---- 4. Section heads (eyebrow + title + lede) ---------------------------- */
@media (max-width: 768px) {
  /* h2 was 24-26px / 1.18-1.30. Calmer 24px / 1.3 with more margin. */
  .amgb-home__section h2,
  .amgb-home__what h2,
  .amgb-home__trust h2,
  .amgb-home__how h2,
  .amgb-home__faq h2,
  .amgb-home__signed h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
  }
  /* Section lede was 15px — under the readability threshold. Bump
     to 17px and lift contrast (was rgb(58, 58, 58) = 12.6:1 on white, fine,
     but darker reads as more committed). */
  .amgb-home__section-lede {
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #2a2a2a !important;
    margin-bottom: 24px !important;
  }
  /* Section head wrapper — give it more breathing room below before the
     content block. */
  .amgb-home__section-head {
    margin-bottom: 16px !important;
  }
}

/* ---- 5. Pillars — more padding, calmer ------------------------------------ */
@media (max-width: 768px) {
  .amgb-home__pillar {
    padding: 28px 24px !important;
    margin-bottom: 20px !important;
  }
  .amgb-home__pillar-title {
    font-size: 20px !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }
  .amgb-home__pillar-body,
  .amgb-home__pillar p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* ---- 6. Trust grid — more vertical rhythm --------------------------------- */
@media (max-width: 768px) {
  .amgb-home__trust-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .amgb-home__trust-grid > li {
    padding: 20px 18px !important;
    border-radius: 12px;
  }
  .amgb-home__trust-grid > li h3,
  .amgb-home__trust-grid > li strong {
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }
  .amgb-home__trust-grid > li p,
  .amgb-home__trust-grid > li li {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* ---- 7. "What we buy" grid — one column with calmer spacing --------------- */
@media (max-width: 768px) {
  .amgb-home__what-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .amgb-home__what-grid > li {
    padding: 24px 20px !important;
  }
  .amgb-home__what-grid h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }
  .amgb-home__what-grid p,
  .amgb-home__what-grid li li {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* ---- 8. How-it-works steps — more breathing room -------------------------- */
@media (max-width: 768px) {
  .amgb-home__how-steps,
  .amgb-home__how ol {
    gap: 20px !important;
  }
  .amgb-home__how-step,
  .amgb-home__how ol > li {
    padding: 22px 20px !important;
  }
  .amgb-home__how-step h3,
  .amgb-home__how ol > li strong:first-child {
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }
  .amgb-home__how-step p,
  .amgb-home__how ol > li p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
}

/* ---- 9. FAQ accordion — distinct visual separation ------------------------ */
@media (max-width: 768px) {
  .amgb-home__faq-item {
    margin-bottom: 16px !important;
    border-radius: 10px !important;
  }
  .amgb-home__faq-q {
    font-size: 17px !important;
    line-height: 1.4 !important;
    padding: 20px 18px !important;
    min-height: 56px !important;
  }
  .amgb-home__faq-a,
  .amgb-home__faq-item > div:last-child,
  .amgb-home__faq-item p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    padding: 0 18px 20px !important;
  }
}

/* ---- 10. Buttons / CTAs — 48px minimum tap target ------------------------- */
@media (max-width: 768px) {
  .amgb-btn-primary,
  .amgb-btn-secondary,
  .amgb-btn-tertiary,
  a.amgb-btn-primary,
  a.amgb-btn-secondary,
  a.amgb-btn-tertiary,
  .amgb-cta,
  .elementor-button {
    min-height: 52px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
  }
  /* Tertiary text-link "See everything we buy" type — keep 48px floor. */
  .amgb-btn-tertiary {
    min-height: 48px !important;
  }
  /* Hero CTA — slightly bigger to anchor above-fold action. */
  .amgb-home__hero-cta-call,
  .amgb-home__hero .amgb-btn-primary {
    min-height: 56px !important;
    font-size: 18px !important;
  }
}

/* ---- 11. Header toggle + drawer-close — tap target floor ------------------ */
@media (max-width: 768px) {
  .amgb-header__toggle,
  .amgb-header__drawer-close {
    min-width: 48px !important;
    min-height: 48px !important;
  }
  /* Header utility phone (top-bar "0411 108 170") had h=44; lift to 48. */
  .amgb-header__utility-phone {
    min-height: 48px !important;
    padding: 6px 12px !important;
  }
}

/* ---- 12. Signed-by-Chris testimonial / quote block ------------------------ */
@media (max-width: 768px) {
  .amgb-home__signed h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  .amgb-home__signed p {
    font-size: 16px !important;
    line-height: 1.65 !important;
    margin-bottom: 14px !important;
  }
  /* The hero "Chris and Sharon visit your kitchen table..." body lede in the
     signed block was 17px which is fine; only the small print needs lifting. */
}

/* ---- 13. Lists — more breathing room on body lists ------------------------ */
@media (max-width: 768px) {
  .amgb-home__section ul li,
  .amgb-home__section ol li,
  .amgb-home__what-grid > li li,
  .amgb-home__trust-grid > li li {
    line-height: 1.65 !important;
    margin-bottom: 6px !important;
    font-size: 16px !important;
  }
}

/* ---- 14. Form fields — comfortable tap targets ---------------------- */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 17px !important;
    line-height: 1.4 !important;
    padding: 14px !important;
    min-height: 52px !important;
  }
  label {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
}

/* ---- 15. Final CTA block — single clear action ---------------------------- */
@media (max-width: 768px) {
  .amgb-home__final,
  .amgb-home__sell-cta {
    padding-top: 48px !important;
    padding-bottom: 56px !important;
  }
  .amgb-home__final h2,
  .amgb-home__sell-cta h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
  }
  .amgb-home__final p,
  .amgb-home__sell-cta p {
    font-size: 17px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
  }
}

/* ---- 16. Tighten the rates row vertical footprint a little --------------- */
@media (max-width: 768px) {
  /* The header rates ticker is fine, but at very small widths it eats real
     estate. Keep the 11px font but limit row padding so the hero CTA still
     reaches above the fold at common 375 viewports. */
  .amgb-header__rates-row {
    padding-top: 3px !important;
    padding-bottom: 4px !important;
  }
}

/* ---- 17. Visual noise removal — strip decorative overlays on mobile ------- */
@media (max-width: 768px) {
  .amgb-home__decoration,
  .amgb-home__pattern-overlay,
  .amgb-decoration,
  .amgb-overlay-pattern,
  [class*="__decoration"]:not(.amgb-home__hero) [class*="-bg-decoration"] {
    /* Only strip dedicated decoration containers — never hit actual content. */
    opacity: 0.35 !important;
  }
}

/* ---- 18. Image breathing room --------------------------------------------- */
@media (max-width: 768px) {
  .amgb-home__section img,
  .amgb-home__hero img:not(.amgb-header__logo-img) {
    margin-bottom: 16px;
  }
}

/* ============================================================================
   MOBILE UX — readability patch v2 (2026-05-29)
   ----------------------------------------------------------------------------
   Refinements after first probe pass. Targets the actual class names we found
   in the hero + testimonial blocks.
   ============================================================================ */

/* ---- v2.1 Hero lede — proper size + contrast ------------------------------ */
@media (max-width: 768px) {
  /* The hero "Chris and Sharon visit your kitchen table..." paragraph.
     v1 inadvertently knocked it from 17 -> 14.5 via the hero-meta override.
     Restore to 17px / 1.55 with stronger contrast. */
  .amgb-home__hero-lede {
    font-size: 17px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin-bottom: 24px !important;
  }
  /* Hero feature bullets (in your home, weighed and tested, same-day cash).
     Was 14px / 0.88 alpha. Bump to 15.5px with slightly lifted contrast. */
  .amgb-home__hero-meta li {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    margin-bottom: 8px !important;
  }
  /* Hero eyebrow "Adelaide, South Australia · Family-run, locally owned"
     keep current 16px (already up from 12). */
}

/* ---- v2.2 Testimonial eyebrows + place labels ----------------------------- */
@media (max-width: 768px) {
  /* "ADELAIDE · GOOGLE REVIEW" + "WORD OF MOUTH, ADELAIDE" small-caps tracking
     was 12-13px. Bump to 14px and slightly tighter tracking. The dark grey
     #3a3a3a passes AAA on white at 12.6:1 — no contrast lift needed. */
  .amgb-home__test-place,
  .amgb-home__test-feature-place,
  .amgb-home__signed-role,
  .amgb-home__eyebrow,
  .amgb-page__eyebrow {
    font-size: 14px !important;
    letter-spacing: 0.06em !important;
  }
}

/* ---- v2.3 Scroll affordance + small chrome bits --------------------------- */
@media (max-width: 768px) {
  .amgb-home__hero-scroll-label {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }
}

/* ---- v2.4 Header utility row — keep ticker readable ----------------------- */
@media (max-width: 768px) {
  /* The utility row "Mon-Fri, same-day callback / Mobile in-home service" is
     a compact chrome row — 12px is operationally fine since it's not body
     content. Lift contrast a touch though. */
  .amgb-header__utility .amgb-header__utility-meta {
    color: rgba(255, 255, 255, 0.95) !important;
  }
}

/* ---- v2.5 Pillar-body breathing room -------------------------------------- */
@media (max-width: 768px) {
  /* The .amgb-home__pillar-body text was already 16/1.6 from v1. Add a small
     top margin to separate from title visually. */
  .amgb-home__pillar p,
  .amgb-home__pillar-body {
    margin-top: 4px !important;
  }
}

/* ---- v2.6 Trust-grid cards — uniform vertical rhythm ---------------------- */
@media (max-width: 768px) {
  .amgb-home__trust-grid > li {
    margin-bottom: 12px !important;
  }
  .amgb-home__trust-grid > li:last-child {
    margin-bottom: 0 !important;
  }
}

/* ---- v2.7 Btn-tertiary on-mobile — 48px floor ----------------------------- */
@media (max-width: 768px) {
  /* a.amgb-btn-tertiary was the See-everything-we-buy link at h=44.
     Already lifted to min-height 48 in v1, but the line-height needs locking
     so the link doesn't visually balloon. */
  .amgb-btn-tertiary {
    line-height: 1.4 !important;
    padding: 14px 16px !important;
  }
}

/* ============================================================================
   MOBILE UX — readability patch v3 (2026-05-29)
   ----------------------------------------------------------------------------
   Final tap-target sweep: lift remaining CTA tels + drawer-call to 48px+.
   ============================================================================ */

@media (max-width: 768px) {
  /* Drawer-call CTA inside the open header drawer (327x44). */
  a.amgb-header__drawer-call,
  .amgb-header__drawer-call {
    min-height: 52px !important;
    padding: 14px 20px !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
  }

  /* Footer call CTA "Call 0411 108 170" (277x44). */
  a.amgb-footer__cta-call,
  .amgb-footer__cta-call {
    min-height: 52px !important;
    padding: 14px 20px !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
  }

  /* Bare tel: anchors anywhere in the footer / contact blocks. */
  .amgb-footer a[href^="tel:"],
  .amgb-home__final a[href^="tel:"],
  .amgb-home__signed a[href^="tel:"],
  .amgb-cookie__inner a[href^="tel:"] {
    min-height: 48px !important;
    padding: 10px 14px !important;
    font-size: 17px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Belt-and-braces: any standalone tel: link not in a button class is still
     a tap target — lift to 48 floor. */
  a[href^="tel:"]:not(.amgb-btn-primary):not(.amgb-btn-secondary):not(.amgb-btn-tertiary):not(.amgb-header__cta) {
    min-height: 48px !important;
  }
}

/* ============================================================================
   HOME MOBILE HEADER FIX — 2026-05-29 (Agent: mobile-header)
   ----------------------------------------------------------------------------
   Operator-reported 2026-05-29 (mobile, home page):
     A. The fixed header overlaps / clips the top of the hero banner.
     B. Gold + silver rate ticker appears missing from the header.
     C. Phone number appears missing / hard to see in the header.

   ROOT CAUSE (browser-verified, Playwright 320–1280):
     The home page is PID 430 and uses the SAME .amgb-header chrome as the
     inner pages — but two stale "home = PID 25 legacy header" assumptions
     were suppressing the new chrome's behaviour on home:
       1. body.home { padding-top:0 } (line ~742) + body:not(.home) padding
          ladder EXCLUDED the home body from any fixed-header offset. With a
          188px-tall fixed mobile header and the hero starting at y:0, the
          hero H1 first line was clipped under the header at 320–375px.  (A)
       2. amgb-integrations.php had is_front_page() gates on BOTH the ticker
          stub and the ticker-inject JS, so the gold/silver rate ticker NEVER
          injected on home, on any device.  (B)  — fixed in that mu-plugin
          on the same pass.

   DESIGN CONSTRAINT: on home the header is an intentional OVERLAY
   (data-overlay="true") floating over the hero image (magazine look). So we
   must NOT push the whole body down with body padding-top (that would break
   the overlay and reveal body bg above the hero). Instead we offset the hero
   *content* on mobile so the H1 clears the fixed header, while the hero image
   still extends up behind the header. Desktop (header ~117px, hero text
   already clears) is left untouched.
   ============================================================================ */

/* --- A: hero content offset below the header on mobile (home) -------------- */
/* FIX-D 2026-05-29: the former mobile hero padding-top offsets here (204px at
   <=768, 212px at <=400) were DEAD — both were written to clear a FIXED header,
   but the MOBILE STATIC HEADER block (later in this file) overrides them to 40px
   because a static header already pushes the hero below itself. Removed the dead
   204/212px offsets; the 40px natural hero pad in the static-header block is the
   single source of truth for the mobile home hero top pad. */

/* --- B: gold + silver ticker on home -------------------------------------- */
/* The mu-plugin now injects the ticker on home too. The existing reveal rule
   `@media(max-width:768px){.amgb-header__rates-row{display:flex}}` is
   page-agnostic, so the compact rates row shows on home automatically. Add a
   belt-and-braces home-scoped reveal in case any future rule narrows the
   selector, and keep both gold AND silver legible (>=13px). */
@media (max-width: 768px) {
  body.home .amgb-header__rates-row {
    display: flex !important;
  }
  body.home .amgb-header__rates-row .amgb-rate-ticker--compact {
    font-size: 12px !important; /* >=min legible floor; full "AMGB Gold Price..." wraps per line */
    line-height: 1.25 !important;
  }
}
/* Desktop/tablet home: the util tickers inject around the phone in
   .amgb-header__utility-right exactly as on inner pages — no extra rule
   needed; the page-agnostic .amgb-rate-ticker--util styling already applies. */

/* --- C: phone legibility + tap target in the mobile utility row ----------- */
/* The phone IS present (utility-right) but was 13px / min-height:32px at
   <=1023, so it read as small + under the 44px tap floor on the dark overlay.
   Lift to 14px and a proper 44px tap target across mobile + tablet. Applies
   site-wide (home + inner) — the utility phone is the primary call CTA. */
@media (max-width: 1023px) {
  .amgb-header__utility-phone {
    font-size: 14px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}
/* On the narrowest phones (<=480) the util-inner centres the phone-only row
   (existing rule hides the meta spans). Make sure the phone stays prominent. */
@media (max-width: 480px) {
  .amgb-header__utility-phone {
    font-size: 14.5px !important;
    letter-spacing: 0.04em !important;
  }
}

/* ============================================================================
   MOBILE STATIC HEADER — 2026-05-29 (Agent: mobile-static-header)
   ----------------------------------------------------------------------------
   Operator-requested 2026-05-29: "menu needs to sit above the content in
   mobile please - no scrolling menu etc".

   CHANGE (mobile <=768px ONLY — desktop/tablet UNCHANGED):
     On mobile the header was position:fixed (chrome.css line 19-24), pinned
     to the top of the viewport, with a body padding-top ladder (and a home
     hero padding-top offset) compensating for the space it occupied. The
     operator wants the header to sit in NORMAL document flow ABOVE the
     content and scroll away with the page (no fixed/sticky pin).

   APPROACH:
     1. .amgb-header -> position:static on mobile so it occupies real space
        in the flow and scrolls away naturally. A static header cannot
        overlap content, so all the fixed-header compensation must be removed.
     2. Zero the mobile body padding-top compensation (the unconditional
        body rule, the body:not(.home) ladder, AND the body.home hero
        padding-top offset) — a static header already pushes content below
        itself, so any retained padding would create a double gap.
     3. Internal header layout (gold+silver rate ticker + phone) is untouched
        — those rules live elsewhere and the static header keeps rendering
        them. HEADER-FIX (2026-05-29) is NOT regressed.
     4. The off-canvas drawer (.amgb-header__drawer, position:fixed; inset:0)
        is a SEPARATE overlay shown on hamburger tap — it is deliberately
        left fixed so it covers the viewport when open. Only the RESTING
        header bar goes static.

   This block is appended LAST in chrome-a11y.css, which is inlined verbatim
   after all other stylesheets, so it wins the cascade over chrome.css's
   position:fixed and over every earlier mobile padding rule in this file.
   ============================================================================ */
@media (max-width: 768px) {
  /* 1. Resting header bar in normal flow, scrolls away with the page. */
  .amgb-header {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    /* keep a modest z-index so the header paints above any negative-z hero
       bleed, but it no longer needs the fixed-layer z:100. */
    z-index: 10 !important;
  }

  /* 2a. Remove the unconditional body offset (was 125px for the fixed header). */
  body {
    padding-top: 0 !important;
  }
  /* 2b. Remove the inner-page fixed-header compensation ladder (was 215px). */
  body:not(.home) {
    padding-top: 0 !important;
  }
  /* 2c. Remove the home hero content offset that cleared the fixed overlay
         header (was 204px / 212px). With a static header the hero starts
         below it naturally — no offset needed. */
  body.home section.amgb-home__hero,
  body.home .amgb-home__hero {
    padding-top: 40px !important; /* restore the hero's natural internal pad */
  }
}
@media (max-width: 400px) {
  /* mirror 2c for the narrowest phones (overrides the 212px rule). */
  body.home section.amgb-home__hero,
  body.home .amgb-home__hero {
    padding-top: 40px !important;
  }
}

/* ============================================================================
   DESKTOP PHONE TAP TARGET — 2026-05-29 (FIX-D, QA-VISUAL V-UT-04 / P2-3)
   ----------------------------------------------------------------------------
   The mobile/tablet rules (<=1023px) already lift .amgb-header__utility-phone
   to a 44/48px tap target. On desktop (>=1024px) the phone link rendered at
   ~18px tall (no min-height), below the 44px WCAG floor. For accessibility
   the header phone is the primary call CTA, so give it a proper tap target on
   desktop too. Scoped >=1024 so the mobile static-header behaviour is untouched.
   ============================================================================ */
@media (min-width: 1024px) {
  .amgb-header__utility-phone {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}



/* ==========================================================================
   HEADER REDESIGN-RETRY 2026-06-01 — D1: 5-element utility strip
   --------------------------------------------------------------------------
   Replaces the flex-based 2-group layout with a 5-track CSS Grid.
   Slot map (desktop >=641px):
     1=Left CTA, 2=Gold ticker, 3=Phone, 4=Silver ticker, 5=Phone icon+CTA
   Mobile (<=640px) collapses to 3 slots: [Gold] [Phone] [Silver] — CTAs drop.
   Source plan: docs/audit/header-redesign-2026-06-01/HEADER-A-architecture.md
   ========================================================================== */
.amgb-header__utility-inner {
  display: grid !important;
  grid-template-columns: auto 1fr auto 1fr auto !important;
  align-items: center !important;
  gap: 18px !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: 8px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  min-height: 36px;
  justify-content: initial;  /* override flex space-between */
}
/* Flatten the old left/right wrappers — they're now plain inline-flex
   passthroughs that DON'T claim grid track space themselves. */
.amgb-header__utility-left,
.amgb-header__utility-right {
  display: contents !important;
}

/* RETRY 2026-06-01: explicit grid-column placement for the 5 slots so
   missing children (e.g. empty gold ticker when amgb_config has no value)
   don't shift the layout — every slot stays where it belongs. */
.amgb-header__utility-left > .amgb-header__utility-cta:not(.amgb-header__utility-cta--phone-right),
.amgb-header__utility-inner > .amgb-header__utility-cta:not(.amgb-header__utility-cta--phone-right) {
  grid-column: 1;
}
.amgb-header__utility-right > .amgb-rate-ticker--gold,
.amgb-header__utility-inner > .amgb-rate-ticker--gold {
  grid-column: 2;
  justify-self: end;
}
.amgb-header__utility-right > .amgb-header__utility-phone,
.amgb-header__utility-inner > .amgb-header__utility-phone {
  grid-column: 3;
}
.amgb-header__utility-right > .amgb-rate-ticker--silver,
.amgb-header__utility-inner > .amgb-rate-ticker--silver {
  grid-column: 4;
  justify-self: start;
}
.amgb-header__utility-right > .amgb-header__utility-cta--phone-right,
.amgb-header__utility-inner > .amgb-header__utility-cta--phone-right {
  grid-column: 5;
}

/* Gold ticker — right-aligned in its 1fr track so it sits against the phone */
.amgb-header__utility-inner > .amgb-rate-ticker--gold,
.amgb-header__utility-right > .amgb-rate-ticker--gold {
  justify-self: end;
}
/* Silver ticker — left-aligned in its 1fr track */
.amgb-header__utility-inner > .amgb-rate-ticker--silver,
.amgb-header__utility-right > .amgb-rate-ticker--silver {
  justify-self: start;
}

/* D1 RETRY: utility CTAs (slot 1 left + slot 5 right) */
.amgb-header__utility-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: color 200ms ease;
}
.amgb-header__utility-cta:hover,
.amgb-header__utility-cta:focus-visible {
  color: var(--amgb-gold, #D69A2B);
  outline: none;
}
.amgb-header__utility-cta:focus-visible {
  outline: 2px solid var(--amgb-gold, #D69A2B);
  outline-offset: 2px;
  border-radius: 4px;
}
.amgb-header__utility-cta svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* D1 RETRY: centre phone (slot 3) — plain text-link, anchor at the geometric centre */
.amgb-header__utility-inner > .amgb-header__utility-phone,
.amgb-header__utility-right > .amgb-header__utility-phone {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 500 !important;
}

/* D1 RETRY: right phone CTA (slot 5) — icon + number, subtle anchor */
.amgb-header__utility-cta--phone-right {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 500 !important;
}

/* D1 RETRY: ticker font shrink at narrow desktop (1024-1199) to avoid
   strip overflow at high prices. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .amgb-header__utility .amgb-rate-ticker {
    font-size: 12px !important;
  }
}

/* HEADER-B mobile collapse (<=640px) — drop CTAs slot 1 + slot 5 */
@media (max-width: 640px) {
  .amgb-header__utility-cta {
    display: none !important;
  }
  .amgb-header__utility-inner {
    grid-template-columns: 1fr auto 1fr !important;
    gap: 12px !important;
    padding-left: 16px;
    padding-right: 16px;
    min-height: 48px;
  }
  /* Remap explicit slot grid-column from desktop 5-track to mobile 3-track */
  .amgb-header__utility-right > .amgb-rate-ticker--gold,
  .amgb-header__utility-inner > .amgb-rate-ticker--gold {
    grid-column: 1 !important;
    justify-self: end;
  }
  .amgb-header__utility-right > .amgb-header__utility-phone,
  .amgb-header__utility-inner > .amgb-header__utility-phone {
    grid-column: 2 !important;
  }
  .amgb-header__utility-right > .amgb-rate-ticker--silver,
  .amgb-header__utility-inner > .amgb-rate-ticker--silver {
    grid-column: 3 !important;
    justify-self: start;
  }
  .amgb-header__utility {
    min-height: 48px !important;
  }
  .amgb-header__utility-inner > .amgb-header__utility-phone {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
  }
}

/* Defensive reduced-motion (no animation in header — belt-and-braces) */
@media (prefers-reduced-motion: reduce) {
  .amgb-header *,
  .amgb-header__utility * {
    animation: none !important;
    transition: none !important;
  }
}
/* === END HEADER REDESIGN-RETRY 2026-06-01 === */

/* ==========================================================================
   HEADER POLISH V2 — 2026-06-01
   --------------------------------------------------------------------------
   1. Right-slot CTA is now a gold PILL button (charcoal text). Replaces
      the duplicate phone link with an explicit "Get an estimate" CTA
      pointing at /calculator/. Sitewide AAA primary 8.52:1.
   2. Left utility icon is GOLD (#D69A2B) on the dark utility bar
      (10.9:1 against #1A1410 — AAA for non-text content + comfortably
      above the 3:1 floor for UI icons).
   3. Companion CSS variable --amgb-header-h handled near the top of this
      file; the body padding-top rule reads it. ResizeObserver in the
      mu-plugin keeps it synced.
   ========================================================================== */

/* 1. Right-slot CTA — gold pill button --------------------------------------
   data-slot="5" anchor in PID 454 carries both class names:
     amgb-header__utility-cta amgb-header__utility-cta--phone-right amgb-header__utility-cta--pill
   The base .amgb-header__utility-cta rule sets the inline-flex skeleton.
   This block paints the pill on top. Keep the darker gold (#7A4F00) hover
   variant matching the primary CTA across the site. */
.amgb-header__utility-cta--pill {
  background: #D69A2B !important;       /* brand gold */
  color: #1A1410 !important;             /* charcoal — 8.52:1 on gold */
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  min-height: 30px;
  transition: background-color .15s ease, color .15s ease !important;
}
.amgb-header__utility-cta--pill:hover,
.amgb-header__utility-cta--pill:focus-visible {
  background: #7A4F00 !important;        /* darker gold */
  color: #FCF7F1 !important;             /* linen on #7A4F00 = 6.69:1 */
  outline: none;
}
.amgb-header__utility-cta--pill:focus-visible {
  outline: 2px solid #FCF7F1 !important;
  outline-offset: 2px;
}
/* P1-6 fix 2026-08-13 — pill CTA text on hover was staying gold because the
   generic .amgb-header__utility a:hover rule (0,2,1) out-specified the pill
   .amgb-header__utility-cta--pill:hover colour (0,2,0). Add the pill class plus
   the a element so this lands at (0,3,1) and wins. Cream #FCF7F1 on the #7A4F00
   hover background reaches 6.69:1 (AA pass at any size). */
.amgb-header__utility a.amgb-header__utility-cta--pill:hover,
.amgb-header__utility a.amgb-header__utility-cta--pill:focus-visible {
  color: #FCF7F1 !important;
}
.amgb-header__utility-cta--pill svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* On desktop 1024-1199px the strip is tight — keep the pill compact. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .amgb-header__utility-cta--pill {
    padding: 5px 12px !important;
    font-size: 12px !important;
  }
}

/* Tap target floor 44px on touch viewports (per existing util-phone rule). */
@media (max-width: 1023px) {
  .amgb-header__utility-cta--pill {
    min-height: 36px !important;
    padding: 8px 16px !important;
  }
}

/* 2. Left utility icon — gold on dark utility bar ---------------------------
   The slot-1 <span data-slot="1"> contains an <svg><use href="#amgb-c-shield"/></svg>.
   The sprite uses stroke="currentColor" so setting color: gold cascades.
   Keep the LABEL text at its existing rgba(255,255,255,.85) — only the icon
   goes gold. This matches the existing gold accents on the rate ticker. */
.amgb-header__utility-cta[data-slot="1"] svg,
.amgb-header__utility .amgb-header__utility-cta[data-slot="1"] svg {
  color: #D69A2B !important;
  stroke: #D69A2B !important;
}

/* 3. Belt-and-braces — left utility CTA hover keeps icon gold-deep on focus  */
.amgb-header__utility-cta[data-slot="1"]:hover svg,
.amgb-header__utility-cta[data-slot="1"]:focus-visible svg {
  color: #A6731E !important;
  stroke: #A6731E !important;
}
/* === END HEADER POLISH V2 === */

/* === HOME HERO — REPOSITION TEXT TO BOTTOM OF IMAGE ON MOBILE (2026-06-02) ==
   SUPERSEDES the earlier 2026-06-02 "hide eyebrow on mobile" fix.

   Problem: on phones the hero <picture> only renders ~0.667*100vw tall (a
   375x250 / 360x240 webp variant) occupying the TOP band of the hero; below it
   is the solid dark #1A1410 hero background. The Chris+Sharon faces sit in the
   UPPER-MIDDLE of that image band. The hero content (eyebrow pill + H1 + lede
   + CTAs) was painting from y~247 — directly over the faces.

   Operator goal (verbatim): "move the dash to 3% above the bottom on the image
   (text as well) — the goal is the text is not covering the faces on mobile."

   Fix (CSS only): SHOW the eyebrow again (undo the display:none) and push the
   whole hero CONTENT block down so the eyebrow pill's bottom edge lands ~3%
   above the image's bottom edge, with the H1/lede/CTAs flowing below into the
   dark hero area. The faces (upper portion of the image) stay completely clear.

   Maths: image height = 100vw * (250/375) = 0.6667*100vw. The hero content has
   a 40px hero-internal pad (static-header block above) + the eyebrow's own
   ~88px height. To put the eyebrow BOTTOM at 0.97*imgH from the hero top:
     padding-top = 0.97*0.6667*100vw - 88px(eyebrow) - 40px(hero pad)
                 = 64.67vw - 128px
   Verified via Playwright: 2.8% above @360, 3.0% @375 (faces clear at both).
   justify-content:flex-start anchors content to that pad (the base rule used
   flex-end which, combined with the tall content, started it over the faces).
   Scoped to body.home + <=767px; desktop/tablet (>=768px) untouched. */
@media (max-width: 767px) {
  .amgb-home__hero-eyebrow {
    display: inline-flex !important;
  }
  body.home .amgb-home__hero-content {
    justify-content: flex-start !important;
    padding-top: calc(64.67vw - 128px) !important;
  }
}
/* === END HOME HERO MOBILE REPOSITION === */

/* ---- Fix (2026-08-13): mobile gold rates line + as-of note must wrap ------
   The customer-facing "Based on the live price at ..." note is appended to the
   gold ticker text. On narrow viewports (<=768px) the base .amgb-rate-ticker
   white-space:nowrap kept it on one long line that overflowed the centred
   rates row and clipped at both edges. Let the gold line wrap so the price
   stays first and the note flows onto a second line. Silver is short and keeps
   its single line; the desktop util ticker (>=769px) is untouched. ---------- */
@media (max-width: 768px) {
  .amgb-header__rates-row .amgb-rate-ticker--gold {
    white-space: normal !important;
    max-width: 100%;
    text-align: center;
    line-height: 1.25 !important;
  }
}

/* ============================================================================
   IMPECCABLE AUDIT FIXES — 2026-08-20 design/a11y sweep (appended override)
   Template-wide. This file (chrome-a11y.css) is the LAST enqueue, so these
   win the cascade. Rollback: delete everything below this marker and restore
   the timestamped .orig backup. Ref: docs/design/AUDIT-COMPLETE.md (T1/T2/T3
   + oversized-h1 + a11y micro-items).
   ============================================================================ */

/* --- T1: body leading 1.15 -> 1.5 (clears ~909 tight-leading) ---------------
   Set on the preview content roots so all flowing text inherits >=1.5.
   Headings and buttons carry their own explicit line-height and are unaffected;
   per-component p rules (e.g. money-page 1.55-1.65) out-specify this and win. */
.amgb-page,
body.home,
.amgb-article__body,
.elementor-widget-text-editor {
  line-height: 1.5;
}

/* --- T3: readable measure ~72ch on body copy (clears ~90 line-length) -------
   Width cap only; alignment unchanged (no auto-centering on left-aligned copy). */
.amgb-page p,
.amgb-page li,
.amgb-article__body p,
.amgb-article__body li,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li {
  max-width: 72ch;
}

/* --- T4: keep full-bleed / centred body copy off the viewport edge ----------
   Direct section/hero paragraphs were bleeding to left:0 / right:0. A side
   inset >=16px clears the body-text-viewport-edge rule without touching card
   copy (scoped to direct children only). Centred hero/lede copy also gets
   auto side margins so alignment is preserved. */
.amgb-page > p,
.amgb-page__section > p,
.amgb-page__hero > p {
  padding-inline: clamp(16px, 4vw, 32px);
}
.amgb-home__hero-lede,
.amgb-home__lede,
.amgb-page__hero p,
.amgb-page__lede {
  max-width: 68ch;
  margin-inline: auto;
}
@media (max-width: 600px) {
  /* Mobile calculator gate: 14px side padding -> 16px so intro/consent copy
     clears the viewport edge (was left/right 15px, under the 16px floor). */
  .amgb-calc-gate {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --- T2: darken the in-flow gold "ink" token to WCAG AA --------------------
   --amgb-gold-deep (#CC8F2E) is used as TEXT on cream/white across money,
   suburb, what-we-buy, faq-hero and home body copy (2.6-2.8:1 FAIL). #7A4F00
   lands 5.34:1 on cream / 5.55:1 on white. Verified: every gold-deep-as-text
   surface in this codebase is on a LIGHT background (home hero em uses
   --amgb-gold, not deep; on-dark eyebrows are literal-overridden earlier in
   this file). Surface/border gold uses --amgb-gold (#D69A2B) and is untouched. */
:root {
  --amgb-gold-deep: #7A4F00;
}

/* --- oversized-h1: home hero clamp max 88px -> 64px ------------------------- */
.amgb-home__hero-h1 {
  font-size: clamp(38px, 6vw, 64px) !important;
}

/* --- a11y: home service-area SVG map labels >= 12px (CSS wins over the SVG
   font-size presentation attribute; no-op if none/already >=12px). ---------- */
.amgb-home__area-map svg text {
  font-size: 12px;
}

/* --- a11y: home suburb chips >= 44px tap target (esp. @390) ----------------- */
.amgb-home__suburbs li,
.amgb-home__suburbs li a {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* === END IMPECCABLE AUDIT FIXES 2026-08-20 === */

/* ============================================================================
   IMPECCABLE AUDIT FIXES v2 CORRECTIVE — 2026-08-20. Targets the REAL per-page
   body-text classes the first block's generic .amgb-page selectors missed
   (home + money pages use bespoke .amgb-home__* / .amgb-sell*__* classes, not
   .amgb-page). Fixes line-length + body-text-viewport-edge WITHOUT changing
   alignment (centred blocks stay centred; left blocks stay left).
   Rollback: delete below this marker + restore the .orig backup.
   ============================================================================ */

/* line-length: cap wide body copy that had no max-width (was ~131ch). */
.amgb-home__section-lede,
.amgb-home__pillar-body {
  max-width: 72ch;
}
/* keep centred section ledes centred (pulls them off left:0/right:0 too),
   keep left-variant ledes left-aligned. */
.amgb-home__section-head .amgb-home__section-lede {
  margin-left: auto;
  margin-right: auto;
}
.amgb-home__section-head--left .amgb-home__section-lede {
  margin-left: 0;
  margin-right: 0;
}
/* money-page estate / grid body copy (centred blocks) — cap + centre. */
.amgb-sellgold__estate-inner p,
.amgb-sellsilver__estate-inner p,
.amgb-sell__estate-inner p,
.amgb-sellgold__diff-grid p,
.amgb-sellsilver__kinds-grid p {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}
/* body-text-viewport-edge (mobile): keep full-width ledes off the 0px edge. */
@media (max-width: 600px) {
  .amgb-home__section-lede,
  .amgb-home__lede {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* === END IMPECCABLE AUDIT FIXES v2 CORRECTIVE 2026-08-20 === */

/* IMPECCABLE AUDIT FIXES v3 — site-wide fine-print line-length (2026-08-20).
   footer legal (166ch) + rates disclaimer (186ch) appear on every page. Cap to
   a readable measure. Footer legal stays left (grid cell); disclaimer centres. */
.amgb-footer__legal { max-width: 75ch; }
.amgb-rates__disclaimer { max-width: 75ch; margin-left: auto; margin-right: auto; }
/* === END v3 === */