/* ──────────────────────────────────────────────────────────────────
   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.
*/

/* QA 2026-07-02 sweep — responsive overflow fixes (both defects exist
   on live too, WORSE there because its fallback fonts render wider;
   deviated-by-design: the clone fixes them, FIXES_LOG REGEN-012/013).

   /our-team/ at phone widths: Essential-Addons feature-list widgets
   carry an Elementor per-element custom width — computed
   max-width:136% of the column on mobile (.elementor-element-5e020d0
   etc. in the scraped page CSS) — so they render 531px wide in a
   430px viewport, pushing a dead horizontal-scroll strip and reading
   as "layout left-aligned instead of centered" (QA RESP-001).
   !important is required: Elementor's rule is scoped
   `.elementor-NNNN .elementor-element.elementor-element-XXX` (higher
   specificity), and this must win for EVERY feature-list widget,
   including ones live adds later (Joey's card arrived in a content
   drift and re-introduced the overflow with a new element id). */
@media (max-width: 767px) {
  .elementor-widget-eael-feature-list {
    max-width: 100% !important;
  }
  .elementor-widget-eael-feature-list .eael-feature-list,
  .elementor-widget-eael-feature-list .eael-feature-list-items,
  .elementor-widget-eael-feature-list .eael-feature-list-item {
    max-width: 100%;
    min-width: 0;
  }
}

/* /careers/ at tablet widths: the "Hairstylist/Barber" heading
   (widget 1344a832) is one unbreakable token wider than its col-50
   column, so it runs under the neighbor column's background photo
   (QA RESP-004, HIGH). Allow a break at the slash. */
@media (max-width: 1024px) {
  .elementor-element-1344a832 .elementor-heading-title {
    overflow-wrap: anywhere;
  }
}
