/* OSS Group light theme (generated from src/css/theme-white.css by tools/wp-theme/convert.php; do not edit). */
/* Review variant (Operation, 11 Oct 2026): white colour scheme with navy accents.
   Light theme (11 Nov 2026): linked on every page after the last stylesheet; js/theme.js sets <html data-theme="light">.
   Every rule is scoped with :where(html[data-theme="light"]), which adds no specificity, so the cascade is the white preview's
   and dark mode is untouched. Dark bands become navy; heroes, header and page base become white;
   primary buttons and the CTA band become navy; Sun stays as the Career colour only. Same tokens, no new colours. */

html:where([data-theme="light"]), :where(html[data-theme="light"]) body { background: var(--white); }
:where(html[data-theme="light"]) a:hover { color: var(--navy); }
:where(html[data-theme="light"]) .ossg-section--navy a:hover, :where(html[data-theme="light"]) .ossg-section--ink a:hover, :where(html[data-theme="light"]) .ossg-site-footer a:hover, :where(html[data-theme="light"]) .ossg-rec a:hover, :where(html[data-theme="light"]) .ossg-section--sun a:hover { color: var(--sun); }

/* Review ribbon (white preview export only; unscoped so it stays styled if a reviewer switches to dark there) */
.ossg-theme-ribbon { background: var(--navy); color: var(--white); font-size: 14px; text-align: center; padding: 8px var(--gutter); }
.ossg-theme-ribbon a { text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }

/* Header: white, navy logo, ink navigation */
:where(html[data-theme="light"]) .ossg-site-header { background: rgb(255 255 255 / .92); border-block-end: 1px solid rgb(0 8 20 / .1); }
:where(html[data-theme="light"]) .ossg-nav { color: var(--ink); }
:where(html[data-theme="light"]) .ossg-nav a:hover { background: rgb(0 39 76 / .06); color: var(--navy); }
:where(html[data-theme="light"]) .ossg-nav a[aria-current] { color: var(--navy); font-weight: 700; box-shadow: inset 0 -2px 0 var(--navy); border-radius: 0; }
:where(html[data-theme="light"]) .ossg-nav-toggle { border-color: rgb(0 8 20 / .25); color: var(--ink); }

/* Primary buttons: navy */
:where(html[data-theme="light"]) .ossg-btn--sun { background: var(--navy); color: var(--white); }
:where(html[data-theme="light"]) .ossg-btn--sun:hover { background: var(--ink); color: var(--white); }
:where(html[data-theme="light"]) .ossg-hero .ossg-btn--ghost, :where(html[data-theme="light"]) .ossg-page-hero .ossg-btn--ghost { border-color: rgb(0 39 76 / .35); color: var(--navy); }
:where(html[data-theme="light"]) .ossg-hero .ossg-btn--ghost:hover, :where(html[data-theme="light"]) .ossg-page-hero .ossg-btn--ghost:hover { border-color: var(--navy); color: var(--navy); }

/* Heroes: white */
:where(html[data-theme="light"]) .ossg-hero, :where(html[data-theme="light"]) .ossg-page-hero { background: var(--white); color: var(--ink); }
:where(html[data-theme="light"]) .ossg-hero .ossg-lead, :where(html[data-theme="light"]) .ossg-page-hero .ossg-lead { color: var(--ink); opacity: 0.8; }
:where(html[data-theme="light"]) .ossg-eyebrow--hero, :where(html[data-theme="light"]) .ossg-page-hero .ossg-eyebrow { color: var(--navy); }
:where(html[data-theme="light"]) .ossg-hero .ossg-hl, :where(html[data-theme="light"]) .ossg-page-hero .ossg-hl, :where(html[data-theme="light"]) .ossg-section--mist .ossg-hl, :where(html[data-theme="light"]) .ossg-section--paper .ossg-hl, :where(html[data-theme="light"]) .ossg-section--white .ossg-hl { color: var(--navy); }
:where(html[data-theme="light"]) .ossg-crumbs [aria-current] { color: var(--navy); }
/* Growth's colour is Mist: on white it needs an outline to stay visible */
:where(html[data-theme="light"]) .ossg-pillar--growth .ossg-pillar__bg { box-shadow: inset 0 0 0 1px rgb(0 8 20 / .18); }
:where(html[data-theme="light"]) .ossg-hero-bars span { box-shadow: inset 0 0 0 1px rgb(0 8 20 / .08); }
:where(html[data-theme="light"]) .ossg-hero-bars--eco span:nth-child(3) { box-shadow: inset 0 0 0 1px rgb(0 8 20 / .18); }

/* Dark bands: ink becomes navy (navy bands keep their styles) */
:where(html[data-theme="light"]) .ossg-section--ink { background: var(--navy); }
:where(html[data-theme="light"]) .ossg-section--ink .ossg-chart--route { background: rgb(0 8 20 / .45); }
:where(html[data-theme="light"]) .ossg-rec, :where(html[data-theme="light"]) .ossg-hierarchy__root, :where(html[data-theme="light"]) .ossg-choice__arrow { background: var(--navy); }
:where(html[data-theme="light"]) .ossg-chart--route { background: rgb(0 8 20 / .45); }

/* CTA band: navy instead of yellow */
:where(html[data-theme="light"]) .ossg-section--sun { background: var(--navy); color: var(--white); --focus: var(--sun); }
:where(html[data-theme="light"]) .ossg-section--sun .ossg-btn--ink { background: var(--white); color: var(--navy); }
:where(html[data-theme="light"]) .ossg-section--sun .ossg-btn--ink:hover { background: var(--sun); color: var(--ink); }
:where(html[data-theme="light"]) .ossg-cta__bars span { background: rgb(255 255 255 / .18); }
:where(html[data-theme="light"]) .ossg-cta__bars span:nth-child(5) { background: var(--sun); }
:where(html[data-theme="light"]) .ossg-section--sun .ossg-eyebrow__mark { background: var(--sun); }

/* Footer: navy */
:where(html[data-theme="light"]) .ossg-site-footer { background: var(--navy); }

/* Mobile menu panel */
@media (max-width: 999.98px) {
  :where(html[data-theme="light"]) .ossg-site-header.ossg-is-menu-open .ossg-nav { background: var(--white); border-block-end-color: rgb(0 8 20 / .1); }
}

/* Growth hero bars: Mist disappears on white, use navy */
:where(html[data-theme="light"]) [data-eco="growth"] .ossg-page-hero .ossg-hero-bars span, :where(html[data-theme="light"]) .ossg-page-hero[data-eco="growth"] .ossg-hero-bars span { background: var(--navy); box-shadow: none; }
/* Buttons inside ecosystem-coloured CTA bands: navy */
:where(html[data-theme="light"]) .ossg-section--eco .ossg-btn--ink { background: var(--navy); color: var(--white); }
:where(html[data-theme="light"]) .ossg-section--eco .ossg-btn--ink:hover { background: var(--ink); color: var(--white); }
/* Navy CTA band directly above the navy footer: separating line */
:where(html[data-theme="light"]) .ossg-site-footer { border-block-start: 1px solid rgb(255 255 255 / .14); }

/* Homepage (css/review-home.css): same white-and-navy rules */
:where(html[data-theme="light"]) .ossg-rh-hero { background: var(--white); color: var(--ink); }
:where(html[data-theme="light"]) .ossg-rh-hero::before { opacity: .6; }
:where(html[data-theme="light"]) .ossg-rh-hero .ossg-rh-sub { color: var(--ink); opacity: .75; }
:where(html[data-theme="light"]) .ossg-rh-hero .ossg-rh-link { color: var(--navy); }
:where(html[data-theme="light"]) .ossg-rh-hero .ossg-rh-link:hover { color: var(--ink); }
:where(html[data-theme="light"]) .ossg-rh-kicker { color: var(--navy); }
:where(html[data-theme="light"]) .ossg-rh-grad { background-image: linear-gradient(120deg, var(--navy) 20%, var(--steel) 95%); }
:where(html[data-theme="light"]) .ossg-rh-btn--sun { background: var(--navy); color: var(--white); }
:where(html[data-theme="light"]) .ossg-rh-btn--sun:hover { background: var(--ink); color: var(--white); }
:where(html[data-theme="light"]) .ossg-rh-why { background: var(--navy); }
:where(html[data-theme="light"]) .ossg-rh-why .ossg-rh-kicker { color: var(--sun); }
:where(html[data-theme="light"]) .ossg-rh-card { background: rgb(255 255 255 / .06); }
:where(html[data-theme="light"]) .ossg-rh-card--wide { background: linear-gradient(140deg, rgb(0 8 20 / .55), rgb(0 8 20 / .15)); }
:where(html[data-theme="light"]) .ossg-rh-cta { background: var(--navy); color: var(--white); --focus: var(--sun); }
:where(html[data-theme="light"]) .ossg-rh-cta .ossg-rh-sub { color: var(--white); opacity: .8; }
:where(html[data-theme="light"]) .ossg-rh-cta .ossg-rh-btn--ink { background: var(--white); color: var(--navy); }
:where(html[data-theme="light"]) .ossg-rh-cta .ossg-rh-btn--ink:hover { background: var(--sun); color: var(--ink); }
:where(html[data-theme="light"]) .ossg-rh-cta .ossg-rh-link { color: var(--white); }

/* --- 9 Nov 2026 client edits: about-h1 --- */
/* about-h1: white theme hero is light, so the highlight becomes navy like .hl */
:where(html[data-theme="light"]) .ossg-page-hero .ossg-h1__latin { color: var(--navy); }

/* --- 9 Nov 2026 client edits: nav --- */

/* Header dropdowns on the white scheme */
:where(html[data-theme="light"]) .ossg-site-header { --focus: var(--navy); }
:where(html[data-theme="light"]) .ossg-nav-panel__main .ossg-eyebrow__mark { background: var(--navy); }
:where(html[data-theme="light"]) .ossg-nav-panel a[aria-current] { box-shadow: none; border-radius: var(--radius); background: rgb(0 39 76 / .06); }
:where(html[data-theme="light"]) .ossg-nav-panel__sep { background: rgb(0 8 20 / .1); }
@media (min-width: 1000px) {
  :where(html[data-theme="light"]) .ossg-nav-group.ossg-is-open .ossg-nav-group__link { background: rgb(0 39 76 / .06); }
  :where(html[data-theme="light"]) .ossg-nav-panel { background: var(--white); border-color: rgb(0 8 20 / .1); box-shadow: 0 18px 40px rgb(0 8 20 / .12); }
}

/* --- 10 Nov 2026: section art system --- */
/* --- Section art on the white scheme (append to theme-white.css) ---
   theme-white turns ink bands navy, so drawings there swap their strong shapes to ink, like .section--navy. */
:where(html[data-theme="light"]) .ossg-section--ink .ossg-sec-art { --art-strong: var(--ink); --art-bg: var(--navy); }