/* ============================================================
   QaliberLMS — light theme over site.css (owner, 2026-11-01:
   "move the QaliberLMS site to the white background", matching the
   Qaliber Safety look). site.css keeps layout and components; this file
   re-colors them. Cyan carries the accents the way orange does on
   Qaliber Safety. Small cyan text uses #0E7490 so it meets WCAG AA on white.
   ============================================================ */

:root,
:root:not([data-theme]) {
  color-scheme: light;
  --l-navy: #0E1A2B;
  --l-cyan: #34C7E5;
  --l-cyan-ink: #0E7490;
  --l-cyan-wash: rgba(52, 199, 229, .08);
  --l-cyan-line: rgba(52, 199, 229, .45);
  --l-surface: #F6F8FA;
  /* Secondary accent: the Qaliber Safety amber, for continuity between the two
     sites (owner, 2026-11-01). It replaces site.css's red wherever red was a
     variation accent: problem labels, flagged chips. #B45309 for text (AA). */
  --l-amber: #D97706;
  --red: #B45309; --red-wash: rgba(217, 119, 6, .08);
}
/* Light in every mode: site.css turns dark under prefers-color-scheme. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #FFFFFF; --surface: #F6F8FA; --surface-2: #EEF2F5;
    --ink: #0E1A2B; --ink-soft: #52525B; --steel: #71717A;
    --rule: #E4E4E7; --rule-soft: #EFEFF1; --cyan-deep: #0E93B4;
    --cyan-wash: rgba(91, 212, 240, .07); --red: #B45309; --red-wash: rgba(217, 119, 6, .08); --green: #0E9F6E;
    --shadow-1: 0 1px 2px rgba(14, 26, 43, .06), 0 4px 16px rgba(14, 26, 43, .06);
    --shadow-2: 0 2px 6px rgba(14, 26, 43, .08), 0 18px 48px rgba(14, 26, 43, .14);
  }
}

/* ---------- header ---------- */
.hdr { background: #fff; border-bottom: 1px solid var(--rule); }
.hdr.scrolled { box-shadow: 0 8px 24px rgba(14, 26, 43, .08); }
.nav { height: 72px; }
.mark img { display: block; height: 40px; width: auto; }
.nav-links { color: #374151; }
.nav-links > a:hover, .nav-item > button:hover { color: var(--l-navy); background: #F3F5F7; }
.nav-links > a[aria-current="page"], .nav-item > button[aria-expanded="true"] { color: var(--l-cyan-ink); }
.burger span { background: var(--l-navy); }
.drawer { background: #fff; border-top: 1px solid var(--rule); }
.drawer a { color: #374151; }
.drawer a:hover { background: #F3F5F7; color: var(--l-navy); }
.drawer .dr-h { color: var(--steel); }
.menu { top: 80px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 18px 44px rgba(14, 26, 43, .14); }
.menu-i:hover { background: #F6F8FA; }
.menu-i .n { color: var(--l-cyan-ink); }
.menu-i .t { color: var(--l-navy); }
.menu-i .d { color: #52525B; }
.menu-h { color: var(--steel); border-bottom-color: var(--rule); }
@media (max-width: 860px) { .mark img { height: 34px; } .nav { height: 64px; } }

/* ---------- hero and quote bands (site.css "navy" sections, made light) ---------- */
.sec.navy {
  background-color: #fff;
  background-image:
    radial-gradient(900px 440px at 88% -10%, rgba(52, 199, 229, .14), transparent 60%),
    radial-gradient(720px 380px at 0% 110%, rgba(14, 26, 43, .05), transparent 60%),
    linear-gradient(180deg, #FFFFFF, #F6F8FA);
  color: var(--l-navy); border-bottom: 1px solid var(--rule);
}
.sec.navy::after { background-image: radial-gradient(rgba(14, 26, 43, .06) 1px, transparent 1.4px); }
.sec.navy h1, .sec.navy h2, .sec.navy h3 { color: var(--l-navy); }
.sec.navy .deck, .sec.navy .body-t { color: #52525B; }
.sec.navy .lab { color: var(--steel); }
.sec.navy .eyebrow { color: var(--l-cyan-ink); }
.sec.navy .btn.ghost { color: var(--l-navy); border-color: #CBD2DA; background: #fff; }
.sec.navy .quote { color: var(--l-navy); }
.sec.navy .quote-a { color: var(--l-cyan-ink); }
.sec.navy .next, .sec.navy .next a { color: var(--l-cyan-ink); }
.sec.hero::before { background: radial-gradient(circle, rgba(52, 199, 229, .16), transparent 62%); }
.hero-net { opacity: .9; }
.hero-q { opacity: .045; }
.legal-date { color: #52525B; }
/* Home headline: same scale as the Qaliber Safety hero (owner, 2026-11-01). */
.h-display { font-size: clamp(2.3rem, 4.2vw, 3.6rem); }
/* The rotating headline word: the brand cyan of the logo and buttons. */
.h-display .glow { background: linear-gradient(92deg, #33B6D8, #34C7E5 55%, #33B6D8); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- stat cards and the Q chat on a light page ---------- */
.statc { background: #fff; border-color: var(--rule); box-shadow: var(--shadow-1); }
.statc b { color: var(--l-navy); }
.statc b i { color: var(--l-cyan-ink); }
.statc > span { color: #52525B; }

/* ---------- call-to-action band: brand navy, the one dark element ---------- */
.band-in {
  background-color: var(--l-navy);
  background-image: radial-gradient(700px 300px at 12% 0%, rgba(52, 199, 229, .24), transparent 60%),
    linear-gradient(135deg, #0E1A2B, #16263D);
  border-color: transparent; color: #E8EEF5;
}

/* ---------- footer ---------- */
.foot { background: var(--l-surface); color: var(--l-navy); border-top: 1px solid var(--rule); }
.foot h4 { color: var(--l-navy); }
.foot .tag { color: var(--l-cyan-ink); }
.foot .fh { color: var(--steel); }
.foot a { color: #374151; }
.foot a:hover { color: var(--l-cyan-ink); }
.foot-base { border-top-color: var(--rule); color: var(--steel); }
.foot-base a { color: #374151; }
.foot-base a:hover { color: var(--l-cyan-ink); }

/* ---------- hero: copy left, photograph bleeding in from the right ----------
   Same treatment as Qaliber Safety: the photo's left and lower edges dissolve
   into the page. A page without a photo keeps a full-width text hero. */
.sec.hero.s-hero { padding: 64px 0 72px; min-height: 520px; display: flex; align-items: center; }
.sec.hero.s-hero > .wrap { width: 100%; }
.s-hero-copy { max-width: 600px; }
.s-hero-media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 24%, #000 52%),
    linear-gradient(180deg, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 24%, #000 52%),
    linear-gradient(180deg, #000 62%, transparent 100%);
  mask-composite: intersect;
}
.s-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.s-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
}
.s-hero-media:empty { display: none; }
.sec.hero.s-hero:has(.s-hero-media:empty) { min-height: 0; padding: 96px 0 84px; }
.s-hero:has(.s-hero-media:empty) .s-hero-copy { max-width: none; }
/* With a photo, the particle field and the Q watermark step back. */
.s-hero:has(.s-hero-img) .hero-net { opacity: .45; }
.s-hero:has(.s-hero-img) .hero-q { display: none; }
/* Multilingual photo: its floating language words sit left of center, so the
   copy stays narrower on that page and the two never touch. */
@media (min-width: 861px) {
  .s-hero:has(.s-hero-img[src*="/multilingual-"]) .s-hero-copy { max-width: 430px; }
}
@media (max-width: 860px) {
  .sec.hero.s-hero { display: block; min-height: 0; padding: 0 0 56px; }
  .sec.hero.s-hero:has(.s-hero-media:empty) { padding: 64px 0 56px; }
  .s-hero-media {
    position: relative; width: 100%; height: 220px;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .s-hero-media::after { display: none; }
  .s-hero:has(.s-hero-img) .s-hero-copy { margin-top: -36px; position: relative; }
}

/* "AI Teach" pill in the nav and drawer: navy text on the light header. */
.nav-standout { color: var(--l-navy) !important; background: linear-gradient(135deg, rgba(52, 199, 229, .16), rgba(52, 199, 229, .06)); border-color: var(--l-cyan-line); }
.nav-standout:hover { border-color: var(--l-cyan); background: linear-gradient(135deg, rgba(52, 199, 229, .24), rgba(52, 199, 229, .10)); }
.dr-standout { color: var(--l-cyan-ink) !important; }