/* ==========================================================================
   custom.css — Sky's the Limit Counseling / Project-specific styles.
   Do NOT edit template CSS directly. Cascade: mainstyle.css → brand.css → custom.css → page <style>

   Extracted from the DesignCode comp set during /dwight:template-adapt compose (2026-08-04).
   Cross-page/shared rules live here, sectioned below. Page-specific rules live in a
   prefix-scoped <style> block at the top of that page (D42 — this is a SPLIT, not a
   dumping ground).
   ========================================================================== */


/* ==========================================================================
   0. PALETTE - RELOCATED to brand.css at Task 03 (2026-08-04).
   --------------------------------------------------------------------------
   The :root token block that used to sit here now lives in brand.css section 1,
   which loads BEFORE this file in the cascade. Every rule below still resolves
   through the same var() names - nothing else changed.
   ========================================================================== */


/* ==========================================================================
   1. BASE — lifted from the comps' shared <style> preamble
   ========================================================================== */

body {
  margin: 0;
  background: var(--stl-cream);
  font-family: var(--stl-sans);
  color: var(--stl-navy);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--stl-gold-hover); color: var(--stl-navy); }

/* Ordinary prose/body links. Scoped deliberately — see §6. */
a { color: var(--stl-purple); text-decoration: none; }


/* ==========================================================================
   2. LAYOUT PRIMITIVES
   ========================================================================== */

.stl-section { padding: 82px 32px; }
.stl-section--flush { padding: 82px 0; }
.stl-section--lilac { background: var(--stl-lilac); }

.stl-wrap        { max-width: 1220px; margin: 0 auto; }
.stl-wrap--index { max-width: 1180px; margin: 0 auto; }
.stl-wrap--mid   { max-width: 1000px; margin: 0 auto; }
.stl-wrap--text  { max-width: 900px;  margin: 0 auto; }

/* Centered intro/heading cluster above a band */
.stl-band-head        { max-width: 660px; margin: 0 auto 48px; text-align: center; }
.stl-band-head--left  { max-width: 660px; margin: 0 0 40px; text-align: left; }
.stl-band-head--wide  { max-width: 640px; margin: 0 auto 44px; text-align: center; }

/* Shared column grids. The comps expressed these as inline
   grid-template-columns and relied on the [style*="..."] collapse selectors; these
   classes are the extracted form, and §7 carries their mobile collapse.
   ⚠️ §7's collapse rules existed from stage 1 with NO base definitions to collapse —
   these are those base definitions. Do not remove one half without the other. */
.stl-grid-2        { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stl-grid-3        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stl-grid--tight   { gap: 18px; }


/* ==========================================================================
   3. TYPE
   ========================================================================== */

/* Eyebrow / kicker — gold star + uppercase label. Appears on nearly every band. */
.stl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stl-gold-dark);
  margin-bottom: 18px;
}
.stl-eyebrow--flex     { display: flex; }
.stl-eyebrow--on-dark  { color: var(--stl-gold-hover); letter-spacing: .24em; }
.stl-eyebrow-star      { color: var(--stl-gold); }

.stl-h1 {
  font-family: var(--stl-serif);
  font-weight: 600;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--stl-purple);
  margin: 0 0 24px;
}
.stl-h1--on-dark { color: var(--stl-on-dark); }

.stl-h2 {
  font-family: var(--stl-serif);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.14;
  color: var(--stl-purple);
  margin: 0 0 16px;
}
.stl-h2--sm      { font-size: 36px; line-height: 1.15; }
.stl-h2--on-dark { color: var(--stl-on-dark); }

.stl-h3 {
  font-family: var(--stl-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--stl-purple);
  margin: 0;
}

.stl-lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--stl-body);
  margin: 0 0 36px;
}
.stl-lead--on-dark { color: var(--stl-on-dark-soft); }
.stl-lead--tall    { line-height: 1.7; }

.stl-copy {
  font-size: 17px;
  line-height: 1.65;
  color: var(--stl-body);
  margin: 0;
}
.stl-copy--tall { line-height: 1.7; }
.stl-copy--mb   { margin: 0 0 16px; }
.stl-copy--center { max-width: 60ch; margin: 0 auto; }

.stl-fine {
  font-size: 15px;
  line-height: 1.55;
  color: var(--stl-body-soft);
  margin: 0;
}


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.stl-btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.stl-btn--gold    { background: var(--stl-gold); color: var(--stl-navy); font-weight: 700; padding: 15px 32px; }
.stl-btn--purple  { background: var(--stl-purple); color: #fff; }
.stl-btn--outline { background: #fff; color: var(--stl-purple); border: 1.5px solid var(--stl-border); }
.stl-btn--ghost   { background: rgba(250,246,238,.12); color: #fff; padding: 15px 32px; border: 1.5px solid rgba(250,246,238,.5); }

/* Outline button sitting on a dark scrim (live-map band, index + contact).
   Promoted from index.php .idx-btn-outline-dark at batch (b) when the band
   became genuinely cross-page. */
.stl-btn--outline-dark { background: transparent; color: var(--stl-on-dark); border: 1.5px solid rgba(250,246,238,.6); }


/* ==========================================================================
   5. CARDS + TILES
   ========================================================================== */

.stl-card {
  background: #fff;
  border: 1px solid var(--stl-border);
  border-radius: 16px;
  padding: 24px 26px;
}

.stl-icon-tile {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  background: var(--stl-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--stl-gold);
}
.stl-icon-tile--sm { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; }


/* ==========================================================================
   6. HOVER STATES — converted from the comps' non-standard style-hover="" attribute
   --------------------------------------------------------------------------
   ⛔ WHY THESE EXIST AT ALL: the DesignCode comps carried every hover state in a
   `style-hover=""` attribute that ONLY support.js interpreted. support.js is dropped
   on conversion, so without these rules EVERY hover state on the site disappears
   silently. Residue of `style-hover` in the built pages must be 0.

   ⛔ NO GLOBAL `a:hover` COLOR. Several of these anchors sit ON brand-colored
   surfaces (gold CTA, purple CTA, dark scrim). A global `a:hover{color:...}` would
   paint brand-on-brand and the text would vanish, not fade — and a hover state does
   not exist in a screenshot, so screenshot QA cannot catch it by construction.
   Every rule below is scoped to a class. Verify by HOVERING.
   ========================================================================== */

.stl-btn--gold:hover    { background: var(--stl-gold-hover); color: var(--stl-navy); }
.stl-btn--purple:hover  { background: var(--stl-purple-hover); color: #fff; }
.stl-btn--outline:hover { border-color: var(--stl-purple); color: var(--stl-purple); }
.stl-btn--ghost:hover   { background: rgba(250,246,238,.22); color: #fff; }
.stl-btn--outline-dark:hover { background: rgba(250,246,238,.14); border-color: var(--stl-on-dark); color: var(--stl-on-dark); }

/* Contact info-card links: navy at rest, purple on hover. Scoped, never global. */
.cnt-info-link:hover { color: var(--stl-purple); }

/* Blog cards: gold-to-purple border lift. Converted from style-hover on both cards. */
.blg-featured:hover { border-color: var(--stl-purple); }
.blg-post:hover     { border-color: var(--stl-purple); transform: translateY(-3px); }

/* Prose links only — deliberately narrow. */
.stl-copy a:hover,
.stl-fine a:hover,
.stl-lead a:hover { color: var(--stl-gold-dark); }

/* Chrome — Utility Bar header.php + incl.php footer (Task 04). Converted from the
   24 style-hover attributes across Header.dc.html 136-182 and Footer.dc.html 14-51.
   Values verified against brand.css, not eyeballed: comp #4E2D86 == --stl-purple,
   comp #EEC65F == --stl-gold-hover.
   !important is REQUIRED on these six (Task 40, 2026-09-29): header.php and incl.php
   set the SAME properties inline on these elements, and an inline declaration beats
   any non-!important stylesheet rule, so without it every chrome hover was dead.
   Do not remove it, and do not move the inline values into classes instead (a
   visitor holding a cached old custom.css would lose them - see ARN plan section 25). */
.stl-util-striplink:hover { color: #fff !important; }
.stl-util-navlink:hover   { color: var(--stl-purple) !important; }
#stl-util-cta:hover       { background: var(--stl-gold-hover) !important; }
.stl-foot-link:hover      { color: #fff !important; }
.stl-foot-cta:hover       { background: var(--stl-gold-hover) !important; }
.stl-foot-social:hover    { border-color: var(--stl-gold-hover) !important; color: #fff !important; }


/* ==========================================================================
   7. RESPONSIVE
   --------------------------------------------------------------------------
   ⛔ CRITICAL CONVERSION NOTE (E-73 / E-74). The comps' mobile collapse rules were
   written as INLINE-STYLE ATTRIBUTE SELECTORS, e.g.

       [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns:1fr!important }
       h1[style*="font-size:5"] { font-size:34px!important }

   Those selectors match the *inline style string*. Extracting inline styles into
   classes — which the CSS architecture decision requires — makes every one of them
   stop matching, so the entire mobile layout would break SILENTLY while every
   desktop view still looked perfect. Each collapse rule below is the class-targeted
   replacement for one of those attribute selectors. Do not delete one without
   deleting the grid it guards.
   ========================================================================== */

@media (max-width: 860px) {
  /* Replaces the [style*="grid-template-columns:..."] collapse set. */
  .stl-grid-2,
  .stl-grid-3 { grid-template-columns: 1fr !important; }

  /* Replaces section[style*="padding"]{padding-left:22px;padding-right:22px} */
  .stl-section,
  .stl-section--pad-mobile { padding-left: 22px !important; padding-right: 22px !important; }

  /* E-74 span audit: any child carrying an explicit multi-track span must reset,
     or CSS generates an implicit second column and the collapse above is defeated.
     Survives !important on the parent and every rule-level check. */
  .stl-grid-2 > *,
  .stl-grid-3 > * { grid-column: auto !important; }
}

@media (max-width: 600px) {
  /* Replaces h1[style*="font-size:5"] / h1[style*="font-size:4"] */
  .stl-h1 { font-size: 34px !important; line-height: 1.12 !important; }
  .stl-h2 { font-size: 30px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .stl-anim,
  .stl-anim * { animation: none !important; }
}


/* ==========================================================================
   8. LIVE-MAP CTA BAND — genuinely shared: index.php + contact.php
   --------------------------------------------------------------------------
   Source: index.html lines 418-444 == Contact.html lines 108-127 (identical band).

   Stage 1 put this in index.php page-scoped as .idx-map-* with a comment telling
   the next session to keep contact.php in sync by hand. Batch (b) is that next
   session, and a comment is not a guard: two copies of 20 rules drift. Promoted
   here per the project CSS architecture, which puts cross-page rules in
   custom.css. index.php markup was renamed to these classes in the same pass and
   its .idx-map-* block deleted, so there is exactly ONE definition.
   ========================================================================== */

.stl-map-section { max-width: 1220px; margin: 0 auto; padding: 0 32px 84px; }
.stl-map-frame {
  position: relative; max-width: 1120px; margin: 0 auto;
  border-radius: 18px; overflow: hidden;
  min-height: clamp(400px, 52vw, 460px); background: #e9e3d6;
  box-shadow: 0 40px 70px -34px rgba(42,33,64,.6);
}
.stl-map-frame iframe { position: absolute; inset: 0; width: 150%; height: 100%; border: 0; }
.stl-map-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(42,33,64,.96) 0%, rgba(42,33,64,.9) 30%, rgba(42,33,64,.55) 48%, rgba(42,33,64,0) 62%);
}
.stl-map-copy { position: relative; max-width: 640px; padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px); text-shadow: 0 2px 14px rgba(42,33,64,.55); }
.stl-map-h2 { font-family: var(--stl-serif); font-weight: 600; font-size: clamp(32px, 4.4vw, 44px); line-height: 1.1; letter-spacing: -.01em; color: var(--stl-on-dark); margin: 0 0 22px; }
.stl-map-addr-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.stl-map-pin { flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50% 50% 50% 0; background: var(--stl-gold); transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(42,33,64,.4); }
.stl-map-addr { font-family: var(--stl-sans-alt); font-weight: 600; font-size: 18px; line-height: 1.5; color: var(--stl-on-dark); }
.stl-map-note { font-size: 16.5px; font-weight: 300; line-height: 1.6; color: var(--stl-on-dark-soft); max-width: 44ch; margin: 0 0 32px; }
.stl-map-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.stl-map-cta .stl-btn { text-shadow: none; }

@media (max-width: 860px) {
  .stl-map-section { padding-left: 22px !important; padding-right: 22px !important; }
}


/* ==========================================================================
   9. DJ & KHAI SUB-BRAND — shared by the three dj-khai-* pages
   --------------------------------------------------------------------------
   Sources: DJKaiAdventures.html, DJKaiBooks.html, DJKaiCharacters.html.

   The children's-book side of the practice runs its own brighter palette (a
   violet gradient with gold) that appears on 2+ of the three pages, so it lives
   here rather than being repeated per page. Rules used by only ONE of the three
   stay in that page's own <style> block (D42 split).

   ⚠️ These are additional REAL brand values from the comps, not a starter-template
   leak. Task 03 (brand-css) relocates the §0 :root palette into brand.css — take
   these tokens with it in the same move.
   ========================================================================== */

/* The DJ & Khai :root tokens RELOCATED to brand.css section 2 at Task 03
   (2026-08-04). The .dk-* rules below still resolve through the same var() names. */

/* Full-bleed violet gradient band. Adventures CTA + Books "where to buy".
   The Adventures HERO uses a 3-stop variant that runs into gold, so it declares
   its own background in that page's block instead of using this class. */
.dk-band { background: linear-gradient(135deg, var(--dk-grad-from), var(--dk-grad-to)); }

/* Gold buttons sitting ON a gradient band hover to the PALE gold, not the standard
   hover gold. Scoping it to the band reproduces the comps exactly and leaves the
   gold buttons elsewhere on these pages (Books' per-title Amazon CTAs, which are
   on cream) with the normal §6 hover. No new button class needed. */
.dk-band .stl-btn--gold:hover { background: var(--stl-gold-pale); color: var(--stl-navy); }

/* White pill on the gradient — Adventures hero primary CTA. */
.dk-btn-white { background: #fff; color: var(--dk-grad-from); font-weight: 700; }
.dk-btn-white:hover { background: var(--stl-gold-pale); color: var(--dk-grad-from); }

/* Translucent pill on the gradient — Adventures hero secondary, Books activity CTA. */
.dk-btn-glass { background: rgba(255,255,255,.16); color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.dk-btn-glass:hover { background: rgba(255,255,255,.26); color: #fff; }

/* ⚠️ The breadcrumb strip MOVED OUT of this section at batch (d) — see §10.
   It was never DJ-Khai-specific; it was only discovered here first. ServicePage
   carries the identical strip in neutral brand colors, so keeping a `dk-`-prefixed
   copy would have meant two definitions of one thing. Promoted, not duplicated. */

/* Shared media frame — a rounded, shadowed image/video shell. Used for every book
   cover and the trailer embed across all three pages. */
.dk-frame { border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(78,45,134,.5); }
.dk-frame--soft { box-shadow: 0 24px 50px -30px rgba(78,45,134,.45); }
.dk-frame img { width: 100%; display: block; }


/* ==========================================================================
   10. BREADCRUMB — genuinely shared: dj-khai-books, dj-khai-characters, service-detail
   --------------------------------------------------------------------------
   Sources: DJKaiBooks.html (L41-45) == DJKaiCharacters.html (L36-40) ==
   ServicePage.dc.html (L41-47). All three are the same strip with the same colors;
   ServicePage's only difference is a 1220px container against the DJ Khai pages'
   1180px, which is the --wide modifier below.

   ⚠️ These rules lived in §9 as `.dk-crumb*` until batch (d), when ServicePage
   turned out to carry the identical strip. Renamed `.dk-` → `.stl-` and promoted
   here; the 8 class references in the two dj-khai pages were updated in the same
   change. This follows the §8 map-band precedent from batch (b): when a second
   page needs the same rules, promote to ONE definition rather than leaving a
   comment telling the next session to keep two copies in sync. A comment is not
   a guard — two copies drift.
   ========================================================================== */

.stl-crumb { max-width: 1180px; margin: 0 auto; padding: 22px 32px 0; font-size: 13px; color: var(--stl-body-faint); }
.stl-crumb--wide { max-width: 1220px; }
.stl-crumb-link { color: var(--stl-body-faint); }
.stl-crumb-link:hover { color: var(--stl-purple); }
.stl-crumb-sep { margin: 0 8px; color: #c9bfd8; }
.stl-crumb-current { color: var(--stl-purple); font-weight: 600; }

@media (max-width: 860px) {
  .stl-crumb { padding-left: 22px !important; padding-right: 22px !important; }
}


/* ==========================================================================
   11. HEADER CHROME — Utility Bar (header.php)
   --------------------------------------------------------------------------
   Ported from Header.dc.html's OWN <helmet><style> block (E-73: per-comp CSS,
   never once-off). These key on IDs, so unlike §12 below they survive a class
   refactor.

   The #stl-bold-* rules in that block are deliberately NOT ported — they belong
   to the Bold header variant, which is not the confirmed variant. Dead selectors.
   ========================================================================== */

#stl-util-burger { display: none; }

@media (max-width: 860px) {
  #stl-util-nav         { display: none !important; }
  #stl-util-cta         { display: none !important; }
  #stl-util-burger      { display: inline-flex !important; }
  #stl-util-strip-links { gap: 14px !important; }
}

@media (min-width: 861px) {
  #stl-util-panel { display: none !important; }
}

/* Burger icon swap. custom.js initBurger() only toggles aria-expanded and the
   panel's max-height, so the open/close icons are swapped here rather than in JS
   — which is why custom.js needed no edit at Task 04. */
#stl-util-burger .stl-burger-close { display: none; }
#stl-util-burger[aria-expanded="true"] .stl-burger-open  { display: none; }
#stl-util-burger[aria-expanded="true"] .stl-burger-close { display: block; }


/* ==========================================================================
   12. FOOTER CHROME — (incl.php)
   --------------------------------------------------------------------------
   THE GRID COLLAPSE BELOW IS AN INLINE-STYLE ATTRIBUTE SELECTOR, lifted verbatim
   from Footer.dc.html's <helmet> block. It matches on the literal inline style
   string, so the footer's inline `grid-template-columns:1.5fr 1fr 1fr 1.1fr` in
   incl.php MUST stay byte-exact. Convert it to a class and this rule silently
   stops matching: desktop looks perfect, mobile is a 4-column crush. Same trap
   §7 documents for the page comps.
   ========================================================================== */

/* Footer photo background (Task 35 leg e, Clay 2026-09-25): a HARDCODED faint photo
   under a gradient overlay. The solid navy moved here from incl.php's inline style,
   because an inline `background` would override any layer set in this file. The
   overlay stays 86-96% opaque so the photo reads as texture, not content, and the
   footer's light text keeps its contrast. background-color is the fallback if the
   image fails to load. */
.stl-footer {
  background-color: var(--stl-navy);
  background-image:
    linear-gradient(160deg, rgba(42,33,64,.96) 0%, rgba(42,33,64,.90) 45%, rgba(78,45,134,.86) 100%),
    url('/images/photos-092426/IMG_6645copy.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* Parallax was tried and RETIRED (Task 38, Clay 2026-09-25): a viewport-attached
   background is sized to the whole window, so the footer only ever showed the
   photo's bottom band (brick). Sized to the footer box and centered, the wide
   footer crops top + bottom and lands on the middle of the sign. */

@media (max-width: 820px) {
  [style*="1.5fr 1fr 1fr 1.1fr"] { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 520px) {
  [style*="1.5fr 1fr 1fr 1.1fr"] { grid-template-columns: 1fr !important; }
}