/* ==========================================================================
   brand.css - Sky's the Limit Counseling / BRAND CONFIG LAYER
   --------------------------------------------------------------------------
   Cascade: mainstyle.css -> brand.css -> custom.css -> page <style>

   This layer holds ONLY brand tokens and the structural guards that must sit
   above every project rule. Component rules belong in custom.css; page-specific
   rules belong in that page's own prefix-scoped <style> block (D42).

   Created at Task 03 (/dwight:template-adapt brand-css, 2026-08-04) by
   relocating the two :root blocks out of custom.css. The token values were
   SLICED from custom.css, not retyped, so they are byte-identical to the
   values lifted from the comps (template-catalog.json -> brandPalette).
   Colour authority: skys-the-limit-brand-guidelines_1.html.
   ========================================================================== */


/* ==========================================================================
   1. PALETTE - the practice's real colours. NOT a starter-template leak.
   ========================================================================== */
:root {
  --stl-purple:        #4E2D86;
  --stl-purple-hover:  #3c2168;
  --stl-navy:          #2A2140;
  --stl-gold:          #E2B046;
  --stl-gold-hover:    #EEC65F;
  --stl-gold-dark:     #B98A1F;
  --stl-gold-pale:     #FFE39A;
  --stl-cream:         #FAF6EE;
  --stl-lilac:         #F1ECF6;
  --stl-tint:          #FBF3E0;
  --stl-border:        #E4DCCB;
  --stl-body:          #4a4358;
  --stl-body-soft:     #5b5470;
  --stl-body-faint:    #8b83a0;
  --stl-on-dark:       #FAF6EE;
  --stl-on-dark-soft:  #e6def4;
  --stl-on-purple:     #d8cff0;
  --stl-dot:           #d3c8e6;
  --stl-serif:         'Lora', Georgia, serif;
  --stl-sans:          'Montserrat', system-ui, sans-serif;
  --stl-sans-alt:      'Roboto', 'Montserrat', sans-serif;
}




/* ==========================================================================
   2. DJ & KHAI SUB-BRAND TOKENS
   --------------------------------------------------------------------------
   The children's-book side of the practice runs a brighter violet/gold palette.
   Its component rules stay in custom.css section 9; only the tokens live here.
   ========================================================================== */
:root {
  --dk-grad-from:   #5b34a0;
  --dk-grad-to:     #8a5bd6;
  --dk-deep:        #331d5c;   /* grandparent card gradient end */
  --dk-on-grad:     #f3ecff;   /* body copy on the violet gradient */
  --dk-on-deep:     #f0e9ff;   /* body copy on the deep purple cards */
  --dk-card-border: #EDE6D8;   /* warmer than --stl-border, used on the kid/CTA cards */
}



/* ==========================================================================
   3. NO ORPHANS / WIDOWS - structural, site-wide
   --------------------------------------------------------------------------
   Orphan/widow prevention is handled here once, for every page. Never hand-police
   it per element and NEVER bake a <br> to force a wrap - a baked break is wrong at
   every viewport except the one it was eyeballed at. Both the bare heading elements
   and this project's .stl-h* classes are covered, because the comps used classes.
   text-wrap alone still lets a 2-word last line through: the real guard is the
   &nbsp; tail glue done at render time by stlGlue() in inc-helpers.php (Task 42).
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.stl-h1, .stl-h2, .stl-h3,
.stl-eyebrow, .dka-hero-h1, .dka-cta-h2, .blg-cta-h2, .stl-map-h2, .abt-value-title,
.idx-service-title, .svc-card-title, .svd-related-title {
  text-wrap: balance;
}

p, li, blockquote, figcaption,
.stl-lead, .stl-copy, .stl-fine {
  text-wrap: pretty;
}


/* ==========================================================================
   4. DARK-BAND INK GUARD (E-25)
   --------------------------------------------------------------------------
   The classic E-25 defect is a blanket h1..h6 { color: <ink> } in this file, which
   makes every heading on a dark band invisible - a DIRECT rule on the heading beats
   a colour the heading would otherwise INHERIT from its band, regardless of
   specificity and even when the band's colour is written inline. Inheritance is not
   specificity, and structural QA cannot see the result.

   No such blanket rule exists here, and none may ever be added. Sections 4a/4b are
   the standing guard that makes adding one harmless.

   WHY THIS IS NOT THE STOCK E-25 SNIPPET. The stock snippet resets headings to
   color: inherit and assumes the dark band itself declares a light colour. In this
   project the bands DO NOT declare colour - each copy element declares its own. So a
   bare inherit here would resolve up to body ink (navy) and paint navy-on-navy,
   introducing the very defect in mirror image. 4a supplies the band-level ink first;
   only then is 4b's inherit safe.

   Verified against every dark surface on 2026-08-04: no dark band contains a
   light sub-card, and every text element inside one declares its own colour - so
   both rules are a no-op on current rendering and a guard for later pages.
   NEW DARK BAND = ADD IT TO BOTH LISTS. Neither list can auto-discover one.
   ========================================================================== */

/* 4a - dark surfaces declare their own ink, so any descendant that does NOT declare
   a colour inherits LIGHT instead of body navy. */
.idx-hero, .idx-mind,
.abt-hero, .abt-values,
.svc-unsure, .blg-cta,
.cnt-portal-card,
.stl-map-copy {
  color: var(--stl-on-dark);
}

.dk-band, .dka-hero {
  color: #fff;
}

/* 4b - headings inside a dark surface inherit that band's ink rather than any
   global ink rule. At 0,1,1 this outranks both the .stl-h* purple declarations and
   any future blanket h1..h6 rule, while resolving to the same value the --on-dark
   modifiers already produce. */
.idx-hero        :is(h1, h2, h3, h4, h5, h6),
.idx-mind        :is(h1, h2, h3, h4, h5, h6),
.abt-hero        :is(h1, h2, h3, h4, h5, h6),
.abt-values      :is(h1, h2, h3, h4, h5, h6),
.svc-unsure      :is(h1, h2, h3, h4, h5, h6),
.blg-cta         :is(h1, h2, h3, h4, h5, h6),
.cnt-portal-card :is(h1, h2, h3, h4, h5, h6),
.stl-map-copy    :is(h1, h2, h3, h4, h5, h6),
.dk-band         :is(h1, h2, h3, h4, h5, h6),
.dka-hero        :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}


/* ==========================================================================
   5. LINK HOVER - deliberately NOT set in this file
   --------------------------------------------------------------------------
   A global a:hover colour is banned on this project. Many anchors sit ON brand
   surfaces (gold CTA, purple CTA, dark scrim, violet gradient), so a global hover
   colour paints brand-on-brand and the text vanishes rather than fades. A hover
   state does not exist in a screenshot, so screenshot QA cannot catch it by
   construction - the page looks correct in every artefact anyone reviews.

   Every hover on this site is class-scoped in custom.css section 6, which was
   built that way during compose. Verify hovers by HOVERING, never by screenshot.
   Do not add a global a:hover rule here.
   ========================================================================== */