/* ============================================================================
   cm-interior.css  ·  Christopher Millson interior-page enhancements
   Enqueued by functions.php on every singular page EXCEPT the front page.

   §CM-Dark-Persist-2026-07-22 (Stage 2)
   ---------------------------------------------------------------------------
   The homepage is dark by default (cm_dark cookie; the toggle writes it). Until
   now the no-flash `html.cm-dark` script was front-page-only, and the interior
   lite-shell pages carried NO dark styling, so every interior link dropped the
   visitor from the dark landing into a light page. functions.php now runs the
   no-flash script site-wide, and this sheet supplies the dark theme.

   HOW IT WORKS: each interior lite-shell page defines its whole palette as CSS
   custom properties scoped to #cm-<slug>-page/header/footer (VERIFIED: ~83
   var(--cm-*) refs per page, the only non-var hardcoded colour is a lone
   #FFFFFF). Re-declaring those tokens under `html.cm-dark #cm-<slug>-*` (which
   out-specifies the page's own `#id{}` rule, 1,1,0 > 1,0,0) flips the entire
   page with no per-rule edits. The body sits OUTSIDE the token scope, so its
   background is set separately (scoped with :has() so only tokenised pages go
   dark; the intake + disclosures gap pages are handled in Stage 3).
   ============================================================================ */

/* ---- Dark palette: re-declare the interior tokens for every tokenised page.
   Aligned to the landing's charcoal + gold. accent-rich/-dim are LIGHTENED vs
   the light theme (was #A6850F, too dark on a dark ground) so links/hover read. */
html.cm-dark #cm-about-page,   html.cm-dark #cm-about-header,   html.cm-dark #cm-about-footer,
html.cm-dark #cm-faq-page,     html.cm-dark #cm-faq-header,     html.cm-dark #cm-faq-footer,
html.cm-dark #cm-writing-page, html.cm-dark #cm-writing-header, html.cm-dark #cm-writing-footer,
html.cm-dark #cm-howto-page,   html.cm-dark #cm-howto-header,   html.cm-dark #cm-howto-footer,
html.cm-dark #cm-maw-page,     html.cm-dark #cm-maw-header,     html.cm-dark #cm-maw-footer,
html.cm-dark #cm-essay-page,   html.cm-dark #cm-essay-header,   html.cm-dark #cm-essay-footer,
html.cm-dark #cm-privacy-page, html.cm-dark #cm-privacy-header, html.cm-dark #cm-privacy-footer,
html.cm-dark #cm-terms-page,   html.cm-dark #cm-terms-header,   html.cm-dark #cm-terms-footer {
  --cm-bg:#121214;
  --cm-bg-warm:#17171a;
  --cm-card:#1c1c21;
  --cm-card-hover:#2b2718; /* was inheriting the light #FDFCFA -> card hover flashed near-white in dark; warm gold-tint now */
  --cm-accent:#d4af37;
  --cm-accent-rich:#e6c65c;
  --cm-accent-dim:#caa94b;
  --cm-ink:#f4f3ef;
  --cm-text:#ece9e3;
  --cm-text-sec:#b6b4ac;
  --cm-text-muted:#8f8d86;
  --cm-text-faint:#726f68;
  --cm-line:#2c2c31;
  --cm-line-h:#3b3b42;
  --cm-glass:rgba(18,18,20,0.88);
}

/* ---- Body/html ground. The pages set `body{background:var(--cm-bg,#F8F7F4)}`,
   but --cm-bg lives on #cm-<slug>-page (a descendant), so body falls back to the
   light hex. Override it, scoped with :has() to tokenised pages only. */
html.cm-dark:has(#cm-about-page),
html.cm-dark:has(#cm-faq-page),
html.cm-dark:has(#cm-writing-page),
html.cm-dark:has(#cm-howto-page),
html.cm-dark:has(#cm-maw-page),
html.cm-dark:has(#cm-essay-page),
html.cm-dark:has(#cm-privacy-page),
html.cm-dark:has(#cm-terms-page) { background:#121214; }

html.cm-dark body:has(#cm-about-page),
html.cm-dark body:has(#cm-faq-page),
html.cm-dark body:has(#cm-writing-page),
html.cm-dark body:has(#cm-howto-page),
html.cm-dark body:has(#cm-maw-page),
html.cm-dark body:has(#cm-essay-page),
html.cm-dark body:has(#cm-privacy-page),
html.cm-dark body:has(#cm-terms-page) { background:#121214 !important; }

/* ---- A dark page needs a dark browser scrollbar/gutter. */
html.cm-dark:has(#cm-about-page),
html.cm-dark:has(#cm-faq-page),
html.cm-dark:has(#cm-writing-page),
html.cm-dark:has(#cm-howto-page),
html.cm-dark:has(#cm-maw-page),
html.cm-dark:has(#cm-essay-page),
html.cm-dark:has(#cm-privacy-page),
html.cm-dark:has(#cm-terms-page) { color-scheme:dark; }


/* ============================================================================
   §CM-Gap-Page-Nav-2026-07-22 (Stage 3)  ·  /intake/ + /disclosures/
   These two pages were built without the lite-shell nav wrapper, so functions.php
   injects #cm-injected-header (a fixed CM nav) and the rules below (a) hide the
   Kadence chrome so that nav owns the top, (b) style the injected nav light+dark,
   (c) supply the dark theme (disclosures is token-driven via #cm-legal-page;
   intake is a non-tokenised Fluent Form, so it is styled explicitly).
   ============================================================================ */

/* ---- (a) hide the Kadence chrome on the two gap pages, clear the fixed nav ---- */
:is(body.page-slug-intake, body.page-slug-disclosures) :is(
  .site-header,.site-header-wrap,.site-top-header-wrap,.site-main-header-wrap,
  .site-above-header-wrap,.site-below-header-wrap,#masthead,.kadence-header,
  .entry-header,.entry-header-inner-wrap,.entry-hero,.page-hero-section,
  .kadence-page-title,.kadence-title-above,.page-title,.entry-title,
  .site-footer,.site-footer-wrap,.site-bottom-footer-wrap,#colophon
){ display:none !important; }
body.page-slug-intake, body.page-slug-disclosures { padding-top:64px !important; }
@media(max-width:768px){ body.page-slug-intake, body.page-slug-disclosures { padding-top:56px !important; } }

/* ---- (b) the injected CM nav (explicit colours; not page-token driven) ---- */
#cm-injected-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:64px;
  background:rgba(248,247,244,0.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid #E2E0DA;
}
#cm-injected-header .cm-nav-inner{max-width:1100px;margin:0 auto;padding:0 40px;height:64px;display:flex;align-items:center;justify-content:space-between;}
#cm-injected-header a{text-decoration:none;}
#cm-injected-header .cm-logo{display:flex;align-items:center;}
#cm-injected-header .cm-logo-lockup{display:flex;flex-direction:column;line-height:1;}
#cm-injected-header .cm-logo-text{color:#1a1a1f;font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-weight:600;}
#cm-injected-header .cm-logo-micro{color:#6E6E6A;font-family:'Inter',-apple-system,sans-serif;font-size:8px;letter-spacing:2.5px;text-transform:uppercase;margin-top:3px;}
#cm-injected-header nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;}
#cm-injected-header nav ul li a{color:#52524E;font-family:'Inter',-apple-system,sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;transition:color .2s;}
#cm-injected-header nav ul li a:hover{color:#A6850F;}
/* mobile hamburger + dropdown for the injected nav (CSS checkbox-hack, no JS dependency) */
#cm-injected-header .cm-inj-nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
#cm-injected-header .cm-inj-burger{display:none;}
@media(max-width:768px){
  #cm-injected-header .cm-nav-inner{padding:0 20px;position:relative;}
  #cm-injected-header .cm-inj-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:30px;height:44px;cursor:pointer;flex-shrink:0;}
  #cm-injected-header .cm-inj-burger span{display:block;height:2px;width:22px;background:#1a1a1f;border-radius:2px;transition:transform .25s ease,opacity .2s ease;}
  html.cm-dark #cm-injected-header .cm-inj-burger span{background:#f4f3ef;}
  #cm-injected-header nav{
    position:absolute;top:64px;left:0;right:0;
    background:rgba(248,247,244,0.98);border-bottom:1px solid #E2E0DA;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    max-height:0;overflow:hidden;transition:max-height .28s ease;
  }
  html.cm-dark #cm-injected-header nav{background:rgba(18,18,20,0.98);border-bottom-color:#2c2c31;}
  #cm-injected-header nav ul{flex-direction:column;gap:0;padding:6px 20px 12px;}
  #cm-injected-header nav ul li{width:100%;}
  #cm-injected-header nav ul li a{display:block;padding:13px 0;font-size:13px;border-bottom:1px solid rgba(0,0,0,0.06);}
  html.cm-dark #cm-injected-header nav ul li a{border-bottom-color:rgba(255,255,255,0.07);}
  #cm-injected-header nav ul li:last-child a{border-bottom:none;}
  #cm-injected-header .cm-inj-nav-toggle:checked ~ nav{max-height:360px;}
  #cm-injected-header .cm-inj-nav-toggle:checked ~ .cm-inj-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  #cm-injected-header .cm-inj-nav-toggle:checked ~ .cm-inj-burger span:nth-child(2){opacity:0;}
  #cm-injected-header .cm-inj-nav-toggle:checked ~ .cm-inj-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}
/* injected nav — dark */
html.cm-dark #cm-injected-header{background:rgba(18,18,20,0.90);border-bottom-color:#2c2c31;}
html.cm-dark #cm-injected-header .cm-logo-text{color:#f4f3ef;}
html.cm-dark #cm-injected-header .cm-logo-micro{color:#8f8d86;}
html.cm-dark #cm-injected-header nav ul li a{color:#b6b4ac;}
html.cm-dark #cm-injected-header nav ul li a:hover{color:#e6c65c;}

/* ---- (c1) disclosures dark — #cm-legal-page IS token-driven, so re-declare tokens ---- */
html.cm-dark #cm-legal-page{
  --cm-bg:#121214; --cm-bg-warm:#17171a; --cm-card:#1c1c21; --cm-card-hover:#2b2718;
  --cm-accent:#d4af37; --cm-accent-rich:#e6c65c; --cm-accent-dim:#caa94b;
  --cm-ink:#f4f3ef; --cm-text:#ece9e3; --cm-text-sec:#b6b4ac; --cm-text-muted:#8f8d86;
  --cm-text-faint:#726f68; --cm-line:#2c2c31; --cm-line-h:#3b3b42; --cm-glass:rgba(18,18,20,0.88);
}
html.cm-dark:has(#cm-legal-page){ background:#121214; color-scheme:dark; }
html.cm-dark body:has(#cm-legal-page){ background:#121214 !important; }
/* the Kadence white article wrapper (.content-bg) sits OUTSIDE #cm-legal-page, so darken it too */
html.cm-dark body.page-slug-disclosures article.entry,
html.cm-dark body.page-slug-disclosures .content-bg,
html.cm-dark body.page-slug-disclosures .single-entry,
html.cm-dark body.page-slug-disclosures .entry-content{ background:#121214 !important; }
/* Legal template (disclosures/privacy/terms) body text has no explicit colour, so it inherits the
   Kadence default (#2d3748, dark navy) = dark-on-dark here; links are a hardcoded blue. Force theme
   colours. Scoped to p/li/td so the gold section headings + cream title keep their own colour. */
html.cm-dark #cm-legal-page p,    html.cm-dark #cm-legal-page li,    html.cm-dark #cm-legal-page td,
html.cm-dark #cm-privacy-page p,  html.cm-dark #cm-privacy-page li,  html.cm-dark #cm-privacy-page td,
html.cm-dark #cm-terms-page p,    html.cm-dark #cm-terms-page li,    html.cm-dark #cm-terms-page td{ color:#c9c7c0 !important; }
html.cm-dark #cm-legal-page a,
html.cm-dark #cm-privacy-page a,
html.cm-dark #cm-terms-page a{ color:#e6c65c !important; }

/* ---- (c2) intake dark — non-tokenised Fluent Form, styled explicitly ---- */
html.cm-dark body.page-slug-intake{ background:#121214 !important; color-scheme:dark; }
html.cm-dark body.page-slug-intake #cm-intake-page,
html.cm-dark body.page-slug-intake .entry-content,
html.cm-dark body.page-slug-intake .site-main,
html.cm-dark body.page-slug-intake .content-area,
html.cm-dark body.page-slug-intake article.entry,
html.cm-dark body.page-slug-intake .content-bg,
html.cm-dark body.page-slug-intake .single-entry{ background:#121214 !important; color:#ece9e3; }
/* breadcrumb + in-content links to the gold theme (the injected nav is styled separately) */
html.cm-dark body.page-slug-intake #cm-intake-page a:not(.ff-btn-submit):not(.ff-btn-next){ color:#e6c65c; }
/* intro band + headings */
html.cm-dark body.page-slug-intake h1,
html.cm-dark body.page-slug-intake h2,
html.cm-dark body.page-slug-intake h3{ color:#f4f3ef !important; }
html.cm-dark body.page-slug-intake p,
html.cm-dark body.page-slug-intake li,
html.cm-dark body.page-slug-intake .ff-section-break p{ color:#c9c7c0; }
/* Fluent Forms controls */
html.cm-dark body.page-slug-intake .fluentform,
html.cm-dark body.page-slug-intake .frm-fluent-form{ color:#ece9e3; }
html.cm-dark body.page-slug-intake .ff-el-input--label label{ color:#ece9e3 !important; }
html.cm-dark body.page-slug-intake .ff-el-form-control,
html.cm-dark body.page-slug-intake input.ff-el-form-control,
html.cm-dark body.page-slug-intake select.ff-el-form-control,
html.cm-dark body.page-slug-intake textarea.ff-el-form-control{
  background:#1c1c21 !important; color:#ece9e3 !important; border-color:#2c2c31 !important;
}
html.cm-dark body.page-slug-intake .ff-el-form-control::placeholder{ color:#8f8d86; }
html.cm-dark body.page-slug-intake select.ff-el-form-control option{ background:#1c1c21; color:#ece9e3; }
html.cm-dark body.page-slug-intake .ff-btn-submit,
html.cm-dark body.page-slug-intake .ff-btn-next,
html.cm-dark body.page-slug-intake button[type="submit"]{
  background:#d4af37 !important; color:#1a1a1f !important; border-color:#d4af37 !important;
}
html.cm-dark body.page-slug-intake .ff-step-header,
html.cm-dark body.page-slug-intake .ff-el-progress-title,
html.cm-dark body.page-slug-intake .ff_step_start{ color:#c9c7c0 !important; }
html.cm-dark body.page-slug-intake .ff-el-progress{ background:#2c2c31 !important; }
html.cm-dark body.page-slug-intake .ff-el-progress-bar{ background:#d4af37 !important; }