/* ==============================================================================
   COMPONENTS.CSS — Layer 2 (Starter)
   ==============================================================================

   STATUS: STARTER, NOT FINISHED.

   This file is a starting point for Layer 2 component consolidation. It
   contains a small set of components where 11+ of 18-20 page CSS files
   used an identical rule body, so extraction is safe.

   WHAT'S HERE:
     - .page-hero baseline rule (11 of 18 pages identical)
     - .trust-bar baseline rule (12 of 17 pages identical)

   WHAT'S NOT HERE (BUT SHOULD BE, EVENTUALLY):
     - .section / .section-light (high convergence but rule bodies often span
       multiple selectors and need careful extraction)
     - .closing-cta (6 of 15 identical — variants need review)
     - .stats-ribbon (6 pages, 5 variants — too fragmented)
     - .faq-list / .faq family (8 of 18 identical baseline, but the full
       accordion behaviour is in a family of 6-8 related rules)
     - .feature-card (6 pages)
     - .filter-chip + .post-card grid (3 pages each — Installations, Manuals, News)
     - Quote form pattern (.quote-form, #quoteForm, validation styles — 13 pages)
     - Floating CTA pattern (#floatCta, .visible state — 13 pages)

   EXTRACTION ROADMAP (for the developer):
     For each component family above:
       1. Identify the dominant variant across page CSS files
       2. Extract the full family of related selectors as one block
       3. Add the family to this file
       4. Delete the matching block from each page CSS that uses the dominant
          variant
       5. Leave the variant rules in pages that need them (they'll cascade-override)
       6. Visual-diff each affected page preview to confirm no regression
     Expected reduction: 30-40% per page CSS file.

   WORDPRESS PLACEMENT:
     wp-content/themes/synergy/assets/css/components.css

     Enqueue AFTER foundation.css but BEFORE per-page CSS:

       wp_enqueue_style(
         'synergy-foundation',
         get_template_directory_uri() . '/assets/css/foundation.css'
       );
       wp_enqueue_style(
         'synergy-components',
         get_template_directory_uri() . '/assets/css/components.css',
         array( 'synergy-foundation' )
       );
       // Then per-page CSS depends on 'synergy-components' instead of
       // 'synergy-foundation' directly.

   PAGES USING THE DOMINANT VARIANT (where these rules came from):
     .page-hero baseline:
       about, carbon, commercial, comparison, installations, manuals, news,
       perlite, pv, sigenstor (10) — and underfloor (used as canonical source)
     .trust-bar baseline:
       about, carbon, commercial, comparison, ev, installations, manuals, news,
       perlite, pv, sigenstor (11) — and underfloor (used as canonical source)

   PAGES WITH NON-CONFORMING VARIANTS (keep their local override):
     .page-hero: msf, sunsynk, tesla, victron, contact,
                 water-heating-service, water-heating
     .trust-bar: tesla, victron, sunsynk, water-heating-service, water-heating

   ============================================================================== */


/* ─── PAGE HERO BASELINE ────────────────────────────────────────────
   Dark hero with light text. Used as the standard hero container on
   most product and content pages. Pages with brand-gradient hero
   backgrounds (Tesla, Victron, MSF, Sunsynk) override locally.
─────────────────────────────────────────────────────────────────── */

.page-hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding: 90px 0 100px;
  overflow: hidden;
  isolation: isolate;
}

/* Note: descendant selectors (.page-hero h1, .page-hero-inner,
   .page-hero .hero-lede, .page-hero::before, etc.) are NOT extracted
   yet because they vary more than the container rule does. Extract
   them family-by-family per the roadmap. */


/* ─── TRUST BAR BASELINE ────────────────────────────────────────────
   Horizontal accreditation strip below the hero on most pages.
   White background, single bottom border, modest padding.
─────────────────────────────────────────────────────────────────── */

.trust-bar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
}

/* Note: .trust-bar-inner and .trust-bar img/logo styling are still in
   each page's CSS. Extract per the roadmap once a dominant variant
   for those descendants is identified. */