/* ============================================================================
   Clearout Crew — Premium Uplift (Warm Premium-Trade)
   Layered ON TOP of components.css to lift the site from "clean but static" to a
   warm, tactile, editorial premium-property-services brand. Additive and
   self-contained: it only warms surfaces, adds craft detail, and deploys the
   (previously dormant) scroll-reveal system. Remove this one file + its enqueue
   to revert entirely.

   Direction (owner-approved): modern PREMIUM PROPERTY SERVICES brand — warm
   materials, subtle texture, charcoal + orange, clean editorial layout,
   RESTRAINED motion. Trust and craftsmanship over flashiness; a premium local
   brand, not a franchise or a tech company.

   Governed by: Book II (tokens only; no new palette — warm neutrals are derived
   desaturations of the approved orange/charcoal family, same basis as
   --cc-hero-wash / --cc-orange-tint), the UI Motion & Depth Policy (subtle,
   fast, purposeful; honors prefers-reduced-motion; no autoplay/3D), GOV-001
   (no fabricated imagery/claims — reserved photo panels are untouched).

   Load order: … components → style → premium (last, so it wins at equal
   specificity without !important except where noted).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 · Warm material palette
   Desaturated warm neutrals replace the cool greys so the whole site reads
   "warm brand" not "cool corporate". Text contrast on these stays AA (charcoal
   #1F2937 ≈ 15:1, muted #4B5563 ≈ 8:1 on #FAF6F1).
   ------------------------------------------------------------------------- */
:root {
  --cc-surface-alt:   #FAF6F1;   /* warm sand — alternating sections, chips, bars */
  --cc-border-warm:   #EADFD3;   /* warm hairline for material dividers */
  --cc-paper:         #FCFAF7;   /* barely-warm page base */
  /* Subtle/meta text nudged one step darker so it clears WCAG AA (4.5:1) on the
     warm surfaces AND on orange-tint (#6B7280 was 4.49 / 4.47 — a hair short on
     both). #636D7A: 4.88 on warm sand, 5.25 on white, 4.86 on tint. */
  --cc-ink-subtle:    #636D7A;
  /* Warmer, slightly more present hero/header wash. */
  --cc-hero-wash:
    radial-gradient(120% 90% at 88% -10%, rgba(249, 115, 22, 0.12), transparent 58%),
    radial-gradient(90% 80% at 0% 0%, rgba(194, 65, 12, 0.05), transparent 60%);
}

/* Warm the page canvas a hair so white cards read as raised material. */
body { background-color: var(--cc-paper); }

/* Kadence wraps page content in a "boxed" article (white bg + a soft card shadow).
   Every marketing section is full-width and paints its own background, so that box
   only ever showed as a stray white strip / edge once the canvas went warm. Blend
   it into the warm canvas and drop the shadow. Higher-specificity selectors
   (.entry.content-bg / .single-entry.content-bg) win over Kadence's single-class
   rules regardless of stylesheet order — no !important needed. */
.entry.content-bg { background-color: var(--cc-paper); }
.single-entry.content-bg { box-shadow: none; }

/* Subtle diagonal material texture on warm/dark sections — reads as surface,
   not pattern. Kept ~2% so it never competes with content. */
.cc-section--alt { position: relative; isolation: isolate; }
.cc-section--alt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(135deg,
    rgba(31, 41, 55, 0.022) 0 1px, transparent 1px 22px);
}

/* ---------------------------------------------------------------------------
   2 · Editorial eyebrow — a short rule before every kicker (craft mark)
   ------------------------------------------------------------------------- */
.cc-kicker { display: inline-flex; align-items: center; gap: 0.7rem; }
.cc-kicker::before {
  content: ""; width: 1.75rem; height: 2px; flex: 0 0 auto;
  background: var(--cc-orange); border-radius: 2px;
}
.cc-section--dark .cc-kicker::before { background: var(--cc-orange); }

/* ---------------------------------------------------------------------------
   3 · Elevated media — an offset material panel behind EVERY reserved photo
   panel (hero, interior page headers, feature splits), so all headline+photo
   blocks share the hero's premium framing. Desktop only (panels stack on
   mobile). Plus the hero's quiet once-on-load entrance (see §8).
   ------------------------------------------------------------------------- */
.cc-hero__media,
.cc-page-header__media,
.cc-feature-split__media { position: relative; }
@media (min-width: 782px) {
  .cc-hero__media::before,
  .cc-page-header__media::before,
  .cc-feature-split__media::before {
    content: ""; position: absolute; z-index: 0;
    right: -14px; bottom: -16px; width: 58%; height: 66%;
    border-radius: var(--cc-radius-lg);
    background: var(--cc-orange-tint);
    border: 1px solid var(--cc-border-warm);
  }
  .cc-hero__photo,
  .cc-page-header__photo,
  .cc-feature-split__photo { position: relative; z-index: 1; }
}

/* ---------------------------------------------------------------------------
   4 · Tactile cards — warm hover, growing accent rule, icon + arrow motion
   Applies to service / audience / why-choose cards. Excludes the trust panel
   (one cohesive strip, not liftable tiles) and keeps guide cards clean.
   ------------------------------------------------------------------------- */
.cc-card:not(.cc-guide-card) { position: relative; overflow: hidden; }
.cc-card:not(.cc-guide-card)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--cc-orange), var(--cc-orange-cta));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--cc-transition-slow) var(--cc-ease);
}
.cc-trust .cc-card::before { content: none; }   /* the trust strip is one panel */

.cc-card .cc-icon {
  transition: background-color var(--cc-transition-base) var(--cc-ease),
              color var(--cc-transition-base) var(--cc-ease),
              transform var(--cc-transition-base) var(--cc-ease);
}
.cc-card a:not(.wp-block-button__link)::after {
  content: "\2192"; display: inline-block; margin-left: 0.3rem;
  transition: transform var(--cc-transition-base) var(--cc-ease);
}

@media (hover: hover) and (pointer: fine) {
  .cc-card:not(.cc-guide-card):hover { border-color: var(--cc-border-warm); }
  .cc-card:not(.cc-guide-card):hover::before { transform: scaleX(1); }
  .cc-card:hover .cc-icon {
    background: var(--cc-orange-cta); color: var(--cc-white); transform: translateY(-2px);
  }
  /* Trust is one cohesive panel, not liftable tiles — keep its icons static. */
  .cc-trust .cc-card:hover .cc-icon {
    background: var(--cc-orange-tint); color: var(--cc-orange-cta); transform: none;
  }
  .cc-card:hover a:not(.wp-block-button__link)::after { transform: translateX(4px); }
}
/* Project-guidance "services often used" links already carry a leading ✓, so the
   generic card arrow is redundant there (and orphaned onto its own line in the
   narrow guide columns). Drop it — the check is the meaningful marker. */
.cc-guide-card__svc a:not(.wp-block-button__link)::after { content: none; }

/* ---------------------------------------------------------------------------
   5 · Tactile buttons — a touch more lift + a restrained sheen sweep on hover.
   Colour is unchanged (AA preserved); this is depth + light only.
   ------------------------------------------------------------------------- */
.wp-block-button__link { position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--cc-transition-fast) var(--cc-ease),
              box-shadow var(--cc-transition-fast) var(--cc-ease),
              filter var(--cc-transition-fast) var(--cc-ease); }
.wp-block-button__link::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: left var(--cc-transition-slow) var(--cc-ease);
}
@media (hover: hover) and (pointer: fine) {
  .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--cc-shadow-md); }
  .wp-block-button__link:hover::after { left: 120%; }
}

/* ---------------------------------------------------------------------------
   6 · Process — each step becomes a clean material step-card with a haloed
   numeral, so "A Simple Process" reads as a designed, editorial sequence
   instead of a plain numbered list. Cards are white so they lift off the warm
   band; on a white section the border + hairline shadow still define them.
   ------------------------------------------------------------------------- */
.cc-process > li::before { box-shadow: 0 0 0 6px var(--cc-orange-tint); }

.cc-process--grid > li {
  margin-bottom: 0;                    /* the grid gap handles spacing now */
  padding: var(--cc-space-24);
  padding-left: calc(var(--cc-space-24) + 2.5rem + var(--cc-space-16));
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-shadow-xs);
  transition: transform var(--cc-transition-base) var(--cc-ease),
              box-shadow var(--cc-transition-base) var(--cc-ease),
              border-color var(--cc-transition-base) var(--cc-ease);
}
.cc-process--grid > li::before { left: var(--cc-space-24); top: var(--cc-space-24); }
.cc-process--grid > li > strong { margin-bottom: var(--cc-space-4); }
@media (hover: hover) and (pointer: fine) {
  .cc-process--grid > li:hover {
    transform: translateY(-2px); box-shadow: var(--cc-shadow-md);
    border-color: var(--cc-border-warm);
  }
}

/* ---------------------------------------------------------------------------
   7 · Header — soft depth once the page scrolls (works with/without Kadence
   sticky). Overrides Kadence's zeroed sticky shadow.
   ------------------------------------------------------------------------- */
html.cc-scrolled #masthead { box-shadow: 0 2px 14px rgba(31, 41, 55, 0.06); }
#masthead .kadence-sticky-header.item-is-stuck,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) {
  box-shadow: 0 6px 22px rgba(31, 41, 55, 0.08) !important;
}

/* ---------------------------------------------------------------------------
   7b · Dark Final-CTA — a warm material close instead of flat charcoal. Every
   page ends on a .cc-section--dark CTA; give it an edge-weighted warm glow and
   faint diagonal texture, matching the site's material language. The glow is
   low-alpha and kept to the corners, so centered white copy stays high-contrast
   on charcoal (≈12:1 — well past AA).
   ------------------------------------------------------------------------- */
.cc-section--dark {
  position: relative; isolation: isolate;
  background-color: var(--cc-charcoal);
  background-image:
    radial-gradient(75% 120% at 100% 0%, rgba(249, 115, 22, 0.16), transparent 55%),
    radial-gradient(65% 100% at 0% 100%, rgba(194, 65, 12, 0.12), transparent 55%);
}
.cc-section--dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.6;
  background-image: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 22px);
}

/* ===========================================================================
   8 · SCROLL REVEAL — deploy the dormant reveal system site-wide, staggered.
   Initial hidden state is gated on `html.cc-anim`, which interactions.js sets
   SYNCHRONOUSLY in <head> before first paint. Therefore:
     • JS on  → elements start hidden, fade+rise in on scroll (no flash).
     • JS off → no .cc-anim → this whole block never applies → full content.
     • reduced-motion → wrapped below in no-preference → never hides anything.
   The selector list MUST stay in sync with SEL in interactions.js.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  html.cc-anim :is(
    .cc-section:not(.cc-trust):not(.cc-hero) .cc-section__head,
    .cc-section:not(.cc-trust):not(.cc-hero) .cc-cards > .wp-block-column,
    .cc-guide-cards > .cc-guide-card,
    .cc-process--grid > li,
    .cc-ba-cols > .wp-block-column,
    .cc-insight,
    .cc-guide-cta,
    .cc-feature-split__media,
    .cc-reviews-summary,
    .cc-gbanner
  ) {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.55s var(--cc-ease), transform 0.55s var(--cc-ease);
    transition-delay: calc(var(--cc-i, 0) * 70ms);
    will-change: opacity, transform;
  }
  html.cc-anim :is(
    .cc-section:not(.cc-trust):not(.cc-hero) .cc-section__head,
    .cc-section:not(.cc-trust):not(.cc-hero) .cc-cards > .wp-block-column,
    .cc-guide-cards > .cc-guide-card,
    .cc-process--grid > li,
    .cc-ba-cols > .wp-block-column,
    .cc-insight,
    .cc-guide-cta,
    .cc-feature-split__media,
    .cc-reviews-summary,
    .cc-gbanner
  ).is-in {
    opacity: 1; transform: none;
  }

  /* Hero entrance — a single, quiet, once-on-load cascade (not a loop). */
  html.cc-anim .cc-hero__text > *,
  html.cc-anim .cc-hero__media {
    opacity: 0; animation: cc-rise 0.7s var(--cc-ease) forwards;
  }
  html.cc-anim .cc-hero__text > *:nth-child(1) { animation-delay: 0.05s; }
  html.cc-anim .cc-hero__text > *:nth-child(2) { animation-delay: 0.12s; }
  html.cc-anim .cc-hero__text > *:nth-child(3) { animation-delay: 0.19s; }
  html.cc-anim .cc-hero__text > *:nth-child(4) { animation-delay: 0.26s; }
  html.cc-anim .cc-hero__text > *:nth-child(5) { animation-delay: 0.33s; }
  html.cc-anim .cc-hero__text > *:nth-child(n+6) { animation-delay: 0.4s; }
  html.cc-anim .cc-hero__media { animation-delay: 0.18s; }
}

@keyframes cc-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}