/* TriageTrail sitewide "clean clinical editorial" theme — applies the same direction built for
 * the homepage (dist/home.css) to the rest of the site: corporate/marketing pages, shop,
 * learner account, legal/policy pages, course-marketing landing pages, certificate verification.
 *
 * NOT yet covered: the in-course lesson engine (course.html, blood-course.html,
 * minor-course.html — all powered by course.css) and two standalone draft/legacy pages with
 * inline <style> blocks (asthma-course-review.html, spirometry-course.html). course.css has ~20
 * distinct clinical content-block component types (ECG figures, blood-component diagrams,
 * range tables, knowledge checks, certificates…) actually used to teach — reskinning that
 * correctly needs its own careful, separately-verified pass, not a blind inclusion here. See
 * ENGINEERING-LOG.md.
 *
 * Loaded after style.css and whichever page-specific stylesheet (corporate.css/shop.css/
 * account.css/legal.css/verify.css) and experience.css, so it can deliberately override them.
 * Reuses the --ed-* tokens defined in home.css; this file repeats that :root block so pages
 * that don't load home.css still get them.
 */
:root{
  --ed-bg:#f7f4ee;
  --ed-bg-alt:#efece2;
  --ed-ink:#1c2b2e;
  --ed-muted:#5b6b6a;
  --ed-teal:#0f5f5c;
  --ed-teal-soft:#e3efed;
  --ed-line:#d9d3c5;
  --ed-serif:'Fraunces',Georgia,serif;
}

/* ---------- Ambient dark-tech effects off, sitewide ---------- */
.dimensional-field,.signal-cursor,.heart-orbit,.pulse-depth{display:none!important}
body{background:var(--ed-bg)!important;background-image:none!important;color:var(--ed-ink)}
h1,h2,h3,.brand .brand-word{font-family:var(--ed-serif);letter-spacing:-.01em;font-weight:500}
.eyebrow{font-family:'Inter',sans-serif;letter-spacing:.14em}
.mint,.eyebrow.mint{color:var(--ed-teal)!important}
/* .mint defaults to the light-background teal, but several sections are deliberately kept as
   dark cards (shop hero, contact aside, certificate promise, dark product/footer surfaces) —
   on those, .mint needs the brighter dark-surface mint instead. Found live via a luminance-diff
   audit (ASSESSED CPD eyebrow on shop.html was rendering dark-teal-on-dark-ink). */
.shop-hero .mint,.contact-aside .mint,.site-footer .mint,footer .mint,.product.featured .mint,.certificate-promise .mint{color:#79f2be!important}
[class*="corporate-hero"]>div:first-child,[class*="-hero"]:after{transform:none!important}

/* ---------- Header / footer (shared across all pages via site-nav.js) ---------- */
/* Several page-specific stylesheets (corporate.css, shop.css's inherited corporate.css, etc.)
   redefine .site-header's background themselves, so this needs !important to reliably win
   regardless of which stylesheet happens to load last on a given page. */
.site-header{background:var(--ed-bg)!important;border-bottom:1px solid var(--ed-line)!important;backdrop-filter:none!important;color:var(--ed-ink)!important;position:sticky!important;top:0}
.site-header .utility-nav,.site-header .utility-nav a{color:var(--ed-muted)!important}
.site-header .utility-nav a:hover,.site-header .utility-nav a.active{color:var(--ed-teal)!important}
.site-header .primary-nav nav a{color:var(--ed-ink)!important}
.site-header .primary-nav nav a:hover,.site-header .primary-nav nav a.active{color:var(--ed-teal)!important;border-color:var(--ed-teal)!important}
.site-header .button.ghost{background:transparent!important;border-color:var(--ed-ink)!important;color:var(--ed-ink)!important;backdrop-filter:none}
.site-header+main,.site-header+.hero,.site-header+div{padding-top:0!important}
.brand{display:inline-flex;align-items:baseline;gap:10px;color:inherit}
.brand:before{content:none}
.brand .brand-word{font-size:1.2rem;color:var(--ed-ink)!important}
.brand .brand-word em{color:var(--ed-teal)!important;font-style:italic}
.brand .brand-rule{width:56px;height:6px;color:var(--ed-teal);flex:none;align-self:center}
.brand small{color:var(--ed-muted)!important;letter-spacing:.2em}
.site-footer,footer{background:var(--ed-ink)!important;color:#f7f4ee!important}
.site-footer a:not(.brand),footer a:not(.brand){color:#bcd6d0!important}
.site-footer a:hover,footer a:hover{color:#79f2be!important}
.site-footer strong{color:#79f2be!important}
.site-footer .copyright,footer p{color:#9db3ae!important}
.site-footer .brand .brand-word,footer .brand .brand-word{color:#f7f4ee!important}
/* Same low-contrast fix as home.css: the generic em/small brand colours are tuned for the
   light header, not this dark footer — found live via a luminance-diff audit. */
.site-footer .brand .brand-word em,footer .brand .brand-word em{color:#79f2be!important}
.site-footer .brand small,footer .brand small{color:#9db3ae!important}

/* ---------- Buttons (shared .button class, every page) ---------- */
.button.lime-button,.button.primary{background:var(--ed-ink)!important;border-color:var(--ed-ink)!important;color:#f7f4ee!important}
.button.lime-button:hover,.button.primary:hover{background:var(--ed-teal)!important;border-color:var(--ed-teal)!important}
/* style.css's plain .ghost class (not .site-header .ghost) carries a dark translucent glass
   background+blur meant to float over a bright hero video — wrong on pages like verify.html
   that use the old plain <header> (not upgraded to .site-header by site-nav.js) with nothing
   behind it, leaving dark text on a dark-ish translucent backdrop. Found live. */
.button.ghost{background:transparent!important;border-color:var(--ed-ink)!important;color:var(--ed-ink)!important;backdrop-filter:none!important}

/* ---------- Corporate page family: about / contact / news / support / downloads / in-house-training ---------- */
.corporate-page{background:var(--ed-bg)!important}
.corporate-hero h1{color:var(--ed-ink)!important}
.corporate-hero h1 em{color:var(--ed-teal)!important;font-style:italic}
.corporate-hero p{color:var(--ed-muted)!important}
.corporate-card,.support-card{background:#fff;border-color:var(--ed-line)}
.corporate-grid h2,.corporate-card h2{color:var(--ed-ink)!important}
.corporate-grid p,.corporate-card p{color:var(--ed-muted)!important}
.founder-photo{box-shadow:16px 16px 0 var(--ed-teal-soft)}
.review-panel{background:var(--ed-bg-alt)!important;color:var(--ed-ink)!important}
.review-panel h2{color:var(--ed-ink)!important}
.review-panel>div>p:not(.eyebrow){color:var(--ed-muted)!important}
.review-card{background:#fff;border-top-color:var(--ed-teal)}
.review-card h3{color:var(--ed-ink)!important}
.review-card p{color:var(--ed-muted)!important}
.contact-aside{background:var(--ed-ink)!important;box-shadow:16px 16px 0 var(--ed-teal-soft)!important}
.contact-aside h2{color:#f7f4ee!important}
.contact-aside li{color:#d6e3e0!important}
.contact-aside a{color:#79f2be!important}
.academy-form{background:#fff;border-color:var(--ed-line)}
.academy-form input,.academy-form select,.academy-form textarea{background:var(--ed-bg);color:var(--ed-ink);border-color:var(--ed-line)}
.heart-mark{display:none}

/* ---------- Shop / enrolment ---------- */
.shop-page{background:var(--ed-bg)!important;color:var(--ed-ink)!important}
.shop-hero{background:var(--ed-ink)!important;color:#f7f4ee!important}
.shop-hero h1{color:#f7f4ee!important;font-family:var(--ed-serif)}
.shop-hero h1 em{color:#79f2be!important}
.shop-hero p{color:#c7d6d2!important}
.shop-hero .founder-route{color:#aebfbb!important}
.price-key strong{color:#79f2be!important}
.shop-head h2{color:var(--ed-ink)!important;font-family:var(--ed-serif)}
.shop-head p{color:var(--ed-muted)!important}
.product{background:#fff;border-color:var(--ed-line)}
.product h3{color:var(--ed-ink)!important;font-family:var(--ed-serif);font-weight:500}
.product p{color:var(--ed-muted)!important}
.product .status{background:var(--ed-teal-soft)!important;color:var(--ed-ink)!important}
.product.featured{background:var(--ed-ink)!important;border-color:var(--ed-ink)!important}
.product.featured h3,.product.featured .price strong{color:#f7f4ee!important}
.product.featured p{color:#c7d6d2!important}
.product.featured .status{background:#79f2be!important;color:#06221f!important}
.bundle-section{background:var(--ed-teal-soft)!important}
.bundle-section h2{color:var(--ed-ink)!important}
.bundle{background:#fff}
.trust-strip{border-color:var(--ed-line)}
.trust-strip div{border-color:var(--ed-line)}
.trust-strip strong{color:var(--ed-ink)!important}
.trust-strip span{color:var(--ed-muted)!important}
.shop-note{color:var(--ed-muted)!important}
.certificate-promise{background:var(--ed-ink)!important;border-color:rgba(255,255,255,.15)!important}
.certificate-promise h2{color:#f7f4ee!important}
.certificate-grid strong{color:#79f2be!important}
.certificate-grid span,.certificate-note{color:#c7d6d2!important}

/* ---------- Learner account ---------- */
.account-page{background:var(--ed-bg)!important;color:var(--ed-ink)!important}
.account-intro h1{color:var(--ed-ink)!important;font-family:var(--ed-serif)}
.account-intro>p:last-child{color:var(--ed-muted)!important}
.account-card,.account-boundary{background:#fff!important;border-color:var(--ed-line)!important;box-shadow:0 20px 50px rgba(28,43,46,.08)!important}
/* .account-card/.account-boundary are both in experience.css's shared dark-surface selector
   list (same ".product.featured"-inflated specificity trap documented in home.css) — now that
   these are white cards, not dark ones, every h1-h6/label/strong/p/li/small/span/a inside them
   needs an explicit !important override or it stays near-white-on-white. Found live via a
   luminance-diff audit (labels/headings/links were all unreadable). */
.account-card :is(h1,h2,h3,h4,h5,h6,legend,label,strong){color:var(--ed-ink)!important}
.account-card :is(p,li,small,span){color:var(--ed-muted)!important}
.account-card a{color:var(--ed-teal)!important}
.account-boundary :is(h1,h2,h3,h4,h5,h6,legend,label,strong){color:var(--ed-ink)!important}
.account-boundary :is(p,li,small,span){color:var(--ed-muted)!important}
.account-boundary a{color:var(--ed-teal)!important}
.account-card a.button,.account-boundary a.button{color:#f7f4ee!important}
.account-card h2,.account-boundary h2{font-family:var(--ed-serif)}
.account-card input{background:var(--ed-bg)!important;color:var(--ed-ink)!important;border-color:var(--ed-line)!important}
.account-help,.account-message{color:var(--ed-muted)!important}
.account-message.error{color:#b4303a!important}
.account-course{border-top-color:var(--ed-line)}
.account-course h3{color:var(--ed-ink)!important}
.account-course p{color:var(--ed-muted)!important}
.account-progress{background:var(--ed-bg-alt);border-color:var(--ed-line)}
.account-progress span{background:var(--ed-teal)}
.cpd-summary{background:var(--ed-line)!important;border-color:var(--ed-line)!important}
.cpd-summary>div{background:#fff!important}
.cpd-summary strong{color:var(--ed-teal)!important}
.cpd-summary span{color:var(--ed-muted)!important}
.empty-account{border-top-color:var(--ed-line)}

/* ---------- Legal / policy / course-marketing landing pages ---------- */
.legal-page{background:var(--ed-bg)!important;color:var(--ed-ink)!important}
.legal-main h1{color:var(--ed-ink)!important;font-family:var(--ed-serif)}
.legal-main h2,.legal-main h3{color:var(--ed-ink)!important}
.legal-main p,.legal-main li{color:var(--ed-muted)!important}
.legal-main .status{background:var(--ed-teal-soft);border-left-color:var(--ed-teal)}
.policy-nav a{background:var(--ed-ink);color:#f7f4ee}
.policy-section{border-top-color:var(--ed-line)}
.legal-footer{background:var(--ed-ink)!important}
.legal-footer a{color:#79f2be!important}
.course-marketing-image{background:var(--ed-bg-alt)}
.founder-profile{background:var(--ed-teal-soft)}
.cpd-sales-banner{background:var(--ed-ink)!important}
.cpd-certificate-section{background:linear-gradient(145deg,var(--ed-bg-alt),var(--ed-bg))!important;border-color:var(--ed-line)!important}

/* ---------- Certificate verification ---------- */
.verify-main h1{color:var(--ed-ink)!important;font-family:var(--ed-serif)}
.verify-intro{color:var(--ed-muted)!important}
.verify-result.state-pending{background:#fff}
.verify-note{color:var(--ed-muted)!important}

/* ---------- Kill pointer-tilt/parallax effects from experience.js everywhere ---------- */
.course,.product,.corporate-card,.support-card,.review-card,.account-card,.policy-section{transform:none!important}

@media(prefers-reduced-motion:reduce){
  .button.lime-button:after,.button.primary:after{display:none}
}