/* ============================================================================
   Clearout Crew — Refresh module: PAGE HEADER (interior top banners)
   Part of the "Warm & Elevated" refresh. Phase 2: give every interior page's top
   banner (.cc-phead / .cc-page-header__*) the same signature the homepage hero
   got, so a service / pillar / area / legal page opens like the front page and not
   like the old template. Styles ONLY the interior header — the homepage hero has
   its own module (hero.css) and is untouched here.

   The interior header is structurally the twin of the hero (same photo-panel
   builder, same premium striped offset panel), so this file mirrors hero.css onto
   the .cc-page-header__* / .cc-phead selectors. Self-contained: literal white mat
   so it does not depend on hero.css being loaded.

   Handle: cc-refresh-page-header   ·   Loads after premium.css.
   Toggle just interior headers: dequeue 'cc-refresh-page-header'. The homepage
   hero and everything else are unaffected.
   ========================================================================== */

/* Richer, layered warm ground — the same recipe hero.css gives the homepage,
   replacing the flatter --cc-hero-wash the interior banners used. Applies to the
   full and the compact (--compact) headers alike. */
.cc-phead.cc-section {
  background-color: var(--cc-paper);
  background-image:
    radial-gradient(115% 85% at 93% -10%, rgba(249, 115, 22, 0.15), transparent 55%),
    radial-gradient(85% 75% at -6% 4%, rgba(194, 65, 12, 0.06), transparent 58%),
    linear-gradient(180deg, #FFF8F1 0%, var(--cc-paper) 62%);
}

/* Headline: a hair more tracking + the short warm craft underscore that signs the
   homepage headline. Targets .cc-page-header h1 so it covers BOTH the composed
   (left-aligned, in __text) and the simple centred variant. */
.cc-page-header h1 {
  letter-spacing: -0.03em;
}
.cc-page-header h1::after {
  content: "";
  display: block;
  width: 78px;
  height: 5px;
  margin: 1.15rem 0 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--cc-orange), var(--cc-orange-cta));
}
/* Simple (centred) headers — centre the underscore under the centred headline. */
.cc-page-header:not(.cc-page-header--composed) h1::after {
  margin-left: auto;
  margin-right: auto;
}

/* Reassurance line -> warm raised trust pills, matching the hero. Only composed
   headers that pass trust points render .cc-reassurance; the rest is a no-op. */
.cc-page-header .cc-reassurance {
  gap: 0.6rem 0.7rem;
  margin-top: var(--cc-space-32);
}
.cc-page-header .cc-reassurance li {
  padding: 0.45rem 0.85rem;
  border-radius: var(--cc-radius-pill);
  background: var(--cc-surface);
  border: 1px solid var(--cc-border-warm);
  box-shadow: var(--cc-shadow-warm);
  color: var(--cc-ink);
  font-weight: 600;
}
.cc-page-header .cc-reassurance li::before {
  content: "\2713";
  color: var(--cc-orange-cta);
  font-weight: 700;
}

/* Photo — clean white mat + warm keyline + soft warm elevation (literal 4px white
   so this module stands alone). Matches .cc-hero__photo. */
.cc-page-header__photo {
  border-radius: 18px;
  border: 4px solid #FFFFFF;
  box-shadow: 0 0 0 1px var(--cc-border-warm), var(--cc-shadow-warm-lg);
}

@media (min-width: 782px) {
  /* Calm premium's striped offset panel to a solid-warm block behind the photo,
     so the interior framing reads editorial, exactly like the calmed hero panel.
     The Google-rating badge header keeps its no-panel rule (higher specificity via
     :has(.cc-gbadge) in components.css still wins). */
  .cc-page-header__media::before {
    right: -15px;
    bottom: -17px;
    width: 62%;
    height: 66%;
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(249, 115, 22, 0.16), rgba(249, 115, 22, 0.04));
    border: 1px solid var(--cc-border-warm);
  }
}

/* Phone: tighten the trust pills into a compact chip cluster, matching hero.css. */
@media (max-width: 600px) {
  .cc-page-header .cc-reassurance {
    gap: 0.4rem 0.45rem;
    margin-top: var(--cc-space-24);
  }
  .cc-page-header .cc-reassurance li {
    padding: 0.34rem 0.7rem;
    font-size: 0.82rem;
  }
}