/* ──────────────────────────────────────────────────────────────────
   head-inline.css — generic template version.

   This file holds small render-blocking CSS for above-the-fold
   patterns. In a working clone it accumulates inline <style> blocks
   extracted at scrape time from the source WP <head>, plus
   client-specific patches added during Phase 3 polish.

   The TEMPLATE form ships with only generic patterns:
   - Focus-outline suppression for mouse clicks (keyboard nav
     still gets visible outlines)
   - Skip-to-main-content link (a11y requirement)

   What's intentionally NOT kept here (Baldacci-specific examples):
   - Sticky-bottom-header overrides (per-page Elementor IDs differ)
   - Mega-menu nav-wrap fixes (per-client widget widths)
   - LQIP overrides (per-client hero element IDs)
   - Commerce7 widget skeleton CSS (client-specific integration)
   - Wine-club / membership-band visuals (client-specific copy)

   Add client-specific rules to this file during Phase 3 — once the
   scrape + pixel test surfaces what needs CSS-level patching.
   ────────────────────────────────────────────────────────────── */

:focus:not(:focus-visible) { outline: none; }

/* Skip-to-main-content link (WCAG 2.4.1). Hidden off-screen until
   keyboard focus, then slides into view. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 6px;
  z-index: 9999;
  padding: 8px 16px;
  background: #1a1a1a;
  color: #ffffff;
  font: 14px / 1 sans-serif;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 6px;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* PHASE 3 INSERTION POINTS — add per-client patterns below.

   Common shapes to layer in (each keyed on the client's scraped
   element IDs — find them in src/scraped/<slug>.body.html):

   1. Sticky-bottom header treatment (Elementor sticky widget).
      Set position:fixed, bottom:0 at desktop widths; account for
      Elementor's cloned spacer. Reference: NEW-206 / NEW-212 /
      NEW-228 in the Baldacci FIXES_LOG.

   2. Mega-menu inter-item spacing tweaks if the desktop nav wraps
      between 1024-1280 px. Reference: NEW-220.

   3. LQIP (base64 32-px WebP background-image on the client's hero
      element, hidden when head-inline.js strips body.lqip-active).
      Reference: NEW-191 / NEW-215.

   4. Third-party widget skeleton overlays for slow-mounting widgets
      (Commerce7, Klaviyo signup, Tock) — sibling skeleton + opaque
      background + :has()-based hide rule. Reference: NEW-219 /
      NEW-223 / NEW-227.

   5. Per-page LCP fix for CSS-background-image hero pages: strip
      fetchpriority="high" from accidental <img> tags via a
      build-time transform in [...slug].astro. Reference: NEW-214.
*/

/* Avada nested-main shim (wfg 2026-08-07): live's `<main id="main">` is
   our `<div id="main"><main id="main-content">` (skip-link contract keeps
   id=main-content on the semantic main; 163 fusion-styles rules key on
   #main). fusion-styles' single CHILD rule `#main>.fusion-row` misses the
   nested shape — replicate it for the inner main. */
#main-content > .fusion-row { display: flex; flex-wrap: wrap; }

/* ── Water for Good: responsive fixes for defects the live Avada layout has
   at laptop widths (Maya McAllister's list, 2026-09-18). Scoped by page id so
   nothing else moves. ─────────────────────────────────────────────────── */

/* /the-water-crisis/ "A Transformation Story": the story column's logo mark is
   pulled up by a fixed -240px while its height scales with the column, so at
   laptop widths the white eyebrow title lands half above the dark panel and
   its top half vanishes (white on white). A proportional pull keeps the
   eyebrow inside the panel at every width (-39.7% == -240px at the 1440px
   design width). */
/* Selector note (2026-09-18): Avada numbers rows/columns per render and the
   count continues from the header's rows — the compact header (2 rows) shifted
   this section from row-8/column-17 to row-6/column-12 and silently unmatched
   the old selector. Key on the element's own inline -240px margin instead,
   scoped to the large-screen copy of the section (the medium/small twin,
   .fusion-no-large-visibility, carries its own small-screen margins). */
.page-id-1453 .fusion-fullwidth.fusion-no-small-visibility .fusion-layout-column > .fusion-column-wrapper > .fusion-image-element[style*="--awb-margin-top:-240px"] {
  margin-top: -39.7% !important;
}

/* /the-water-crisis/ three photo cards ("Donate Today" / "Get Involved" /
   "Our Approach"): 80px padding on a one-third column leaves a ~140px text
   card below ~1400px, one word per line and "Our Approach" clipped. Use the
   tablet padding a step earlier. */
@media (max-width: 1400px) {
  /* The three cards are the page's only columns with an inner background
     wrapper — stable across Avada's row renumbering (see note above). */
  .page-id-1453 .fusion-layout-column.fusion-column-inner-bg-wrapper {
    /* !important: the column carries these as inline custom properties, which
       outrank a stylesheet declaration unless it is important. */
    --awb-padding-top: 40px !important;
    --awb-padding-right: 30px !important;
    --awb-padding-bottom: 40px !important;
    --awb-padding-left: 30px !important;
  }
}

/* Pages whose LIVE template still renders Avada's legacy (pre-Theme-Builder)
   header — taxonomy archives, FAQ singles, two signup pages — get the current
   Theme Builder header on the clone (UPSTREAM_ISSUES 2026-09-10; the QA pass
   of 2026-10-06 lists live's legacy header as a production defect). That
   header is absolutely positioned (the page layouts pad their first row to
   sit under it); the legacy templates' content starts at the top of the
   page, so it rendered under the logo (QA RESP-004..013). Give it the room
   the Theme Builder layouts give themselves. Body class set by WPLayout. */
body.awb-legacy-header-on-live #main {
  padding-top: 165px;
}
@media (max-width: 1023px) {
  body.awb-legacy-header-on-live #main {
    padding-top: 135px;
  }
}
@media (max-width: 890px) {
  body.awb-legacy-header-on-live #main {
    padding-top: 115px;
  }
}