/* Dark / light theme for every Exhale component on exhalestaffing.uk.
   The site toggles html[data-theme="dark"] (theme-change.js). Everything below re-maps the
   component palettes onto the site's own dark variables so nothing goes invisible. */
html[data-theme="dark"] .exp,
html[data-theme="dark"] .exf,
html[data-theme="dark"] .exg-page { --page:#0e1210; --line:#26302c; color:#d6dbd8; background:#0e1210; }
html[data-theme="dark"] .exp .hero, html[data-theme="dark"] .exf-hero, html[data-theme="dark"] .exg-hero {
  background: radial-gradient(1100px 520px at 78% -6%, var(--acc-soft, rgba(225,6,20,.12)), transparent 62%), linear-gradient(180deg,#151b18,#0e1210); }
html[data-theme="dark"] .exp .exp-h1, html[data-theme="dark"] .exp .exp-h2, html[data-theme="dark"] .exp .exp-h3,
html[data-theme="dark"] .exf h1, html[data-theme="dark"] .exf h2, html[data-theme="dark"] .exf h3,
html[data-theme="dark"] .exg-page h1, html[data-theme="dark"] .exg-page h2, html[data-theme="dark"] .exg-page h3,
html[data-theme="dark"] .exf-step h3, html[data-theme="dark"] .exg-faq summary { color:#ffffff; }
html[data-theme="dark"] .exp .lead-p, html[data-theme="dark"] .exf .exf-lead, html[data-theme="dark"] .exg-lead,
html[data-theme="dark"] .exg-body p, html[data-theme="dark"] .exg-body li, html[data-theme="dark"] .exg-answer p,
html[data-theme="dark"] .exf-step p, html[data-theme="dark"] .exf-card p, html[data-theme="dark"] .exf-cta p,
html[data-theme="dark"] .exg-faq details p, html[data-theme="dark"] .exp .step p, html[data-theme="dark"] .exp .stat span,
html[data-theme="dark"] .exp .xcard p, html[data-theme="dark"] .exp .faq-a p { color:#b7bfbb; }
html[data-theme="dark"] .exp .xcard, html[data-theme="dark"] .exp .stat, html[data-theme="dark"] .exp .step, html[data-theme="dark"] .exp .mock,
html[data-theme="dark"] .exf-card, html[data-theme="dark"] .exf-step, html[data-theme="dark"] .exf-mapbox,
html[data-theme="dark"] .exg-card, html[data-theme="dark"] .exg-answer { background:#151b18; border-color:#26302c; color:#e6ebe8; }
html[data-theme="dark"] .exp .faq-item, html[data-theme="dark"] .exg-faq details { border-color:#26302c; }
html[data-theme="dark"] .exp .faq-q { color:#fff; }
html[data-theme="dark"] .exp .btn-ghost, html[data-theme="dark"] .exf-btn.ghost, html[data-theme="dark"] .exg-btn.exg-ghost { background:#151b18; color:#fff; border-color:#3a463f; }
html[data-theme="dark"] .exp section, html[data-theme="dark"] .exf-sec, html[data-theme="dark"] .exf-cta, html[data-theme="dark"] .exg-band, html[data-theme="dark"] .exg-sec, html[data-theme="dark"] .exg-faq, html[data-theme="dark"] .exg-cta { background:transparent; }
html[data-theme="dark"] .exf-sec.alt, html[data-theme="dark"] .exf-cta, html[data-theme="dark"] .exg-band:not(.exg-dark), html[data-theme="dark"] .exg-cta, html[data-theme="dark"] .exp section[style*="--page"] { background:#131917; }
html[data-theme="dark"] .exf-map .exf-link { stroke:#3a463f; }
html[data-theme="dark"] .exf-map text[fill="#0d1526"] { fill:#ffffff; }
html[data-theme="dark"] .exf-map rect[fill="#fff"] { fill:#151b18; stroke:#3a463f; }
/* home + brand sections */
html[data-theme="dark"] .exsec { --exsec-bg:#131917; color:#d6dbd8; }
html[data-theme="dark"] .exsec .exh2, html[data-theme="dark"] .exsec h2, html[data-theme="dark"] .exsec h3 { color:#ffffff; }
html[data-theme="dark"] .exsec .exlead, html[data-theme="dark"] .exsec p { color:#b7bfbb; }
html[data-theme="dark"] .exprod, html[data-theme="dark"] .extest, html[data-theme="dark"] .exlogo { background:#151b18; border-color:#26302c; color:#e6ebe8; }
html[data-theme="dark"] .exprod p, html[data-theme="dark"] .extest p { color:#b7bfbb; }
html[data-theme="dark"] .exlogo img { filter:brightness(1.1); }
/* the editorial rows used across the sites */
html[data-theme="dark"] .exrow { border-color:#26302c; }
html[data-theme="dark"] .exrow h3, html[data-theme="dark"] .exrow h2 { color:#fff; }
html[data-theme="dark"] .exrow p, html[data-theme="dark"] .exrow li { color:#b7bfbb; }
html[data-theme="dark"] .exrow-shot { background:#151b18; border-color:#26302c; }
html[data-theme="dark"] .exlink { color:#ff8a3d; border-color:#3a463f; background:#151b18; }
html[data-theme="dark"] .exlink:hover { border-color:#ff8a3d; }

html[data-theme="dark"] .worked-head h2, html[data-theme="dark"] .worked-head span, html[data-theme="dark"] .logo-card h3 { color:#ffffff; }
html[data-theme="dark"] .worked-head p, html[data-theme="dark"] .logo-card p { color:#b7bfbb !important; }
html[data-theme="dark"] .home-cta-card h2 { color:#fff; }
html[data-theme="dark"] .exp .eyebrow { color:var(--acc); }