/* ================================================================
   GIAN HEALTHCARE — Themes & UX layer
   Loaded after style.css on every public page. "Classic" is the
   untouched default; the others only redefine tokens and the few
   surfaces style.css hard-codes. js/theme.js sets data-theme on <html>.
================================================================ */

/* ---------- Surface tokens (Classic values = what style.css already uses) ---------- */
:root {
  --surface: rgba(255, 255, 255, 0.88);
  --surface-hover: rgba(255, 255, 255, 0.94);
  --surface-solid: #ffffff;
  --surface-edge: rgba(255, 255, 255, 0.95);
  --section-a: #dde6f2;
  --section-b: #d2dcea;
  --nav-solid: rgba(255, 255, 255, 0.92);
  --nav-line: rgba(15, 44, 110, 0.10);
  --shadow-tint: 15, 44, 110;
  --hero-from: #1e3a5f;
  --hero-via: #2563eb;
  --hero-to: #1e40af;
  --label: #7b42d4;
  --focus-ring: #1a4faa;
  color-scheme: light;
}

/* ================================================================
   THEMES
================================================================ */

/* Midnight — dark mode */
:root[data-theme="midnight"] {
  color-scheme: dark;
  --primary: #5b8def;
  --primary-dark: #9db8f5;
  --primary-mid: #6b9bf5;
  --primary-light: #8bb0ff;
  --accent: #5b8def;
  --accent-bright: #8bb0ff;
  --bg: #0b1220;
  --bg-alt: #0e1627;
  --bg-subtle: #121c30;
  --navy: #060b16;
  --navy-2: #0a1222;
  --navy-3: #11203d;
  --text-heading: #e8eefc;
  --text-body: #b8c4d9;
  --text-muted: #8b9ab3;
  --text-dim: #6b7a94;
  --glass-clear-border: rgba(255, 255, 255, 0.10);
  --surface: rgba(21, 32, 54, 0.90);
  --surface-hover: rgba(27, 41, 68, 0.96);
  --surface-solid: #131d33;
  --surface-edge: rgba(255, 255, 255, 0.08);
  --section-a: #0d1526;
  --section-b: #0b1220;
  --nav-solid: rgba(11, 18, 32, 0.92);
  --nav-line: rgba(255, 255, 255, 0.08);
  --shadow-tint: 0, 0, 0;
  --hero-from: #0f1f3a;
  --hero-via: #1d4ed8;
  --hero-to: #0b2a63;
  --label: #a78bfa;
  --focus-ring: #8bb0ff;
}

/* Forest — calm green */
:root[data-theme="forest"] {
  --primary: #1f7a55;
  --primary-dark: #0e4a33;
  --primary-mid: #26905f;
  --primary-light: #34b27a;
  --accent: #1f7a55;
  --accent-bright: #34b27a;
  --bg: #dfeae4;
  --bg-alt: #d3e2da;
  --bg-subtle: #c8dbd0;
  --navy: #07150f;
  --navy-2: #0b2018;
  --navy-3: #0e4a33;
  --text-heading: #0e4a33;
  --text-body: #33483f;
  --text-muted: #5f776b;
  --text-dim: #8aa095;
  --glass-clear-border: rgba(14, 74, 51, 0.12);
  --section-a: #e1ece6;
  --section-b: #d3e2da;
  --nav-line: rgba(14, 74, 51, 0.12);
  --shadow-tint: 14, 74, 51;
  --hero-from: #0e3b2a;
  --hero-via: #1f8a5c;
  --hero-to: #0b5d3d;
  --label: #1f7a55;
  --focus-ring: #1f7a55;
}

/* Plum — warm violet */
:root[data-theme="plum"] {
  --primary: #7b3fc4;
  --primary-dark: #4a1d86;
  --primary-mid: #8d52d6;
  --primary-light: #a770ea;
  --accent: #7b3fc4;
  --accent-bright: #a770ea;
  --bg: #e9e2f1;
  --bg-alt: #ded5ea;
  --bg-subtle: #d3c8e3;
  --navy: #120a1f;
  --navy-2: #1a1030;
  --navy-3: #3a1a6e;
  --text-heading: #3a1a6e;
  --text-body: #433a55;
  --text-muted: #6f6385;
  --text-dim: #9a90ad;
  --glass-clear-border: rgba(74, 29, 134, 0.12);
  --section-a: #ebe4f3;
  --section-b: #ded5ea;
  --nav-line: rgba(74, 29, 134, 0.12);
  --shadow-tint: 74, 29, 134;
  --hero-from: #2b1457;
  --hero-via: #7b3fc4;
  --hero-to: #4a1d86;
  --label: #7b3fc4;
  --focus-ring: #7b3fc4;
}

/* Sand — warm neutral, easiest on the eyes for long reading */
:root[data-theme="sand"] {
  --primary: #b4571f;
  --primary-dark: #6e3210;
  --primary-mid: #c8652a;
  --primary-light: #e08549;
  --accent: #b4571f;
  --accent-bright: #e08549;
  --bg: #efe8dc;
  --bg-alt: #e6ddce;
  --bg-subtle: #dcd1bf;
  --navy: #1a1109;
  --navy-2: #26190d;
  --navy-3: #6e3210;
  --text-heading: #5a2a0e;
  --text-body: #4a4036;
  --text-muted: #7a6d5e;
  --text-dim: #a29585;
  --glass-clear-border: rgba(110, 50, 16, 0.12);
  --section-a: #f1eadf;
  --section-b: #e6ddce;
  --nav-line: rgba(110, 50, 16, 0.12);
  --shadow-tint: 110, 50, 16;
  --hero-from: #3d2310;
  --hero-via: #c8652a;
  --hero-to: #8a3f12;
  --label: #b4571f;
  --focus-ring: #b4571f;
}

/* ================================================================
   SURFACES style.css hard-codes — follow the tokens
================================================================ */
body { background: var(--bg); transition: background-color .35s ease, color .35s ease; }

body .glass-card, body .glass-card-light, body .info-card, body .benefit-card,
body .vacancy-card, body .expand-card, body .contact-full-form,
.services-grid > *, .values-grid > *, .testimonials-grid > *, .newsletter-card,
.about-features > * {
  background: var(--surface);
}
body .glass-card:hover, body .info-card:hover, body .benefit-card:hover,
body .vacancy-card:hover, body .expand-card:hover { background: var(--surface-hover); }

.about-section, .services-section, .values-section, .testimonials-section,
.newsletter-section, .contact-section {
  background: linear-gradient(160deg, var(--section-a) 0%, var(--section-b) 100%);
}

.navbar.scrolled { background: var(--nav-solid); border-bottom-color: var(--nav-line); }
@media (max-width: 768px) {
  .navbar.scrolled { background: var(--surface-solid); }
  .nav-links { background: var(--surface-solid); }
}

.hero-img-1 { background-color: var(--hero-from); }
.hero-img-2 { background-color: var(--hero-to); }

/* Section eyebrow labels were hard-coded violet */
.section-label { color: var(--label); }

/* Primary buttons follow the palette */
.liquid-btn.primary, .liquid-btn.accent, .navbar .nav-links .btn-login {
  background: linear-gradient(145deg, var(--primary-mid), var(--primary-dark));
}
:root[data-theme="midnight"] .liquid-btn.primary,
:root[data-theme="midnight"] .liquid-btn.accent {
  background: linear-gradient(145deg, #3f74e0, #1e3f8f);
}

/* Midnight needs the near-white inline panels (CQC widgets etc.) left as
   real "cards" — only text colours inside generic cards flip */
:root[data-theme="midnight"] .nav-link,
:root[data-theme="midnight"] .scrolled .nav-link { color: var(--text-body); }
:root[data-theme="midnight"] .scrolled .nav-link:hover,
:root[data-theme="midnight"] .scrolled .nav-link.active { color: #fff; background: rgba(255,255,255,0.08); }
:root[data-theme="midnight"] .scrolled .logo img { filter: brightness(1.9) saturate(1.1); }
:root[data-theme="midnight"] .navbar.at-top:not(.nav-over-dark) .logo img { filter: brightness(1.9) saturate(1.1); }
:root[data-theme="midnight"] .navbar.at-top:not(.nav-over-dark) .nav-link { color: var(--text-body); }
:root[data-theme="midnight"] .navbar.at-top:not(.nav-over-dark) .nav-link:hover,
:root[data-theme="midnight"] .navbar.at-top:not(.nav-over-dark) .nav-link.active { color: #fff; background: rgba(255,255,255,0.08); }
:root[data-theme="midnight"] .navbar.at-top:not(.nav-over-dark) .btn-login,
:root[data-theme="midnight"] .scrolled .btn-login { color: var(--text-heading); border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); }
:root[data-theme="midnight"] .navbar.at-top:not(.nav-over-dark) .mobile-toggle span,
:root[data-theme="midnight"] .scrolled .mobile-toggle span { background: var(--text-heading); }
:root[data-theme="midnight"] .orb { opacity: .18; }
:root[data-theme="midnight"] input, :root[data-theme="midnight"] textarea, :root[data-theme="midnight"] select {
  background: rgba(255,255,255,0.06); color: var(--text-heading); border-color: rgba(255,255,255,0.14);
}
:root[data-theme="midnight"] ::placeholder { color: var(--text-dim); }

/* ================================================================
   UX LAYER
================================================================ */

/* Visible keyboard focus everywhere */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--primary); color: #fff; }

/* Skip link */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 3000;
  padding: 10px 18px; border-radius: 999px;
  background: var(--primary-dark); color: #fff; font-weight: 600; font-size: .9rem;
  transform: translateY(-160%); transition: transform .2s ease;
}
.skip-link:focus { transform: none; }

/* Reading progress */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 1100;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
  pointer-events: none;
}

/* Smoother, more tactile interactions */
.nav-link, .btn-login, .liquid-btn, .glass-card, .info-card, .benefit-card,
.vacancy-card, .expand-card { transition-property: transform, background, box-shadow, color, border-color, filter; }
@media (hover: hover) {
  .services-grid > *:hover, .values-grid > *:hover, .testimonials-grid > *:hover { transform: translateY(-4px); }
}
.services-grid > *, .values-grid > *, .testimonials-grid > * { transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, background .3s; }

/* ---------- Floating controls (theme picker + back to top) ---------- */
.fab-stack {
  position: fixed; right: 20px; bottom: 20px; z-index: 1200;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.fab {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-solid); color: var(--primary-dark);
  border: 1px solid var(--nav-line);
  box-shadow: 0 8px 24px -6px rgba(var(--shadow-tint), .35), 0 2px 6px rgba(var(--shadow-tint), .15);
  transition: transform .2s ease, box-shadow .2s ease, opacity .25s ease;
}
.fab:hover { transform: translateY(-2px) scale(1.05); }
.fab svg { width: 22px; height: 22px; }
.fab-top { opacity: 0; pointer-events: none; transform: translateY(8px); }
.fab-top.show { opacity: 1; pointer-events: auto; transform: none; }

.theme-wrap { position: relative; }
.theme-panel {
  position: absolute; right: 0; bottom: 60px; width: 280px;
  padding: 16px; border-radius: 18px;
  background: var(--surface-solid); color: var(--text-body);
  border: 1px solid var(--nav-line);
  box-shadow: 0 24px 48px -12px rgba(var(--shadow-tint), .4), 0 4px 12px rgba(var(--shadow-tint), .15);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.97); transform-origin: bottom right;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.theme-panel.open { opacity: 1; visibility: visible; transform: none; }
.theme-panel h2 {
  font-family: var(--font-sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px;
}
.theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-opt {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 9px 10px; border-radius: 12px;
  border: 1.5px solid var(--nav-line); background: transparent;
  color: var(--text-heading); font-size: .85rem; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.theme-opt:hover { background: rgba(var(--shadow-tint), .06); }
.theme-opt[aria-checked="true"] { border-color: var(--primary); background: rgba(var(--shadow-tint), .07); }
.theme-swatch {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}
.theme-note { margin-top: 12px; font-size: .75rem; color: var(--text-muted); line-height: 1.4; }
@media (max-width: 768px) {
  .fab-stack { right: 14px; bottom: 14px; }
  .fab { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ================================================================
   FOLLOW-UPS FROM VISUAL CHECKS
================================================================ */

/* Body copy was hard-coded #111 in light sections; follow the theme
   (Classic keeps its existing near-black). CQC widgets stay as printed. */
:root[data-theme] :is(.about-section, .services-section, .values-section,
  .testimonials-section, .newsletter-section, .contact-section)
  :is(p, .testimonial-text, .author-role, .section-description):not([class*="cqc"]) {
  color: var(--text-body);
}
:root[data-theme] .service-card-number { color: rgba(var(--shadow-tint), 0.07); }

/* Decorative orbs follow the palette */
.orb-1 { background: radial-gradient(circle, var(--primary-light), var(--primary-mid), transparent); }
.orb-2 { background: radial-gradient(circle, var(--primary), var(--primary-dark), transparent); }

/* Secondary (white-outline) buttons were near-invisible on light sections */
:is(.services-section, .values-section, .testimonials-section, .newsletter-section, .contact-section, .about-section) .liquid-btn.secondary {
  background: rgba(var(--shadow-tint), 0.06);
  color: var(--primary-dark);
  border: 1.5px solid rgba(var(--shadow-tint), 0.30);
  box-shadow: 0 6px 18px -6px rgba(var(--shadow-tint), 0.25);
}
:is(.services-section, .values-section, .testimonials-section, .newsletter-section, .contact-section, .about-section) .liquid-btn.secondary:hover {
  background: rgba(var(--shadow-tint), 0.12);
}
:root[data-theme="midnight"] :is(.services-section, .values-section, .testimonials-section, .newsletter-section, .contact-section, .about-section) .liquid-btn.secondary {
  background: rgba(255,255,255,0.07); color: var(--text-heading); border-color: rgba(255,255,255,0.28);
}

/* Midnight: drop the white gloss and rim light the glass cards carry */
:root[data-theme="midnight"] :is(.about-feature-item, .service-card, .value-item, .testimonial-card, .newsletter-card,
  .glass-card, .glass-card-light, .info-card, .benefit-card, .vacancy-card, .expand-card, .contact-full-form)::before,
:root[data-theme="midnight"] :is(.service-card, .testimonial-card, .newsletter-card, .glass-card-light)::after {
  display: none;
}
:root[data-theme="midnight"] :is(.about-feature-item, .service-card, .value-item, .testimonial-card, .newsletter-card,
  .glass-card, .glass-card-light, .info-card, .benefit-card, .vacancy-card, .expand-card, .contact-full-form) {
  background: var(--surface) !important;
  border: 1px solid var(--surface-edge) !important;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,.55) !important;
}
:root[data-theme="midnight"] :is(.service-card, .value-item, .testimonial-card):hover {
  background: var(--surface-hover) !important;
}
:root[data-theme="midnight"] .service-card-number { color: rgba(255,255,255,.06); }

/* ================================================================
   MIDNIGHT — inner pages (about, services, team, recruitment,
   contact, feedback, faqs, accessibility, newsletter)
   These pages style their own sections, so the dark treatment is
   applied by role: backgrounds, then headings, then body copy.
================================================================ */
:root[data-theme="midnight"] :is(.page-hero, .who-section, .vm-section, .gian-section, .about-cta, .contact-full,
  .services-detail-section, .benefits-section, .vacancies-section, .apply-section, .team-section, .team-cta,
  .fb-section, .a11y-section, .faq-section, .newsletter-page, .nl-section) {
  background: linear-gradient(160deg, var(--section-a) 0%, var(--section-b) 100%);
}

:root[data-theme="midnight"] :is(.page-hero, .who-section, .vm-section, .gian-section, .contact-full,
  .services-detail-section, .benefits-section, .vacancies-section, .apply-section, .team-section, .team-cta, .about-cta,
  .fb-section, .a11y-section) :is(h1, h2, h3, h4, .member-name, .info-card-value, .faq-category-title) {
  color: var(--text-heading);
}
:root[data-theme="midnight"] :is(.page-hero, .who-section, .vm-section, .gian-section, .contact-full,
  .services-detail-section, .benefits-section, .vacancies-section, .apply-section, .team-section, .team-cta, .about-cta,
  .fb-section, .a11y-section) :is(p, li, label, address, .lead, .info-card-sub, .contact-note, .expand-intro, .service-feature, .apply-desc, .form-section-sub):not(.liquid-btn *) {
  color: var(--text-body);
}
:root[data-theme="midnight"] :is(.page-hero, .who-section, .vm-section, .gian-section, .contact-full,
  .services-detail-section, .benefits-section, .vacancies-section, .apply-section, .team-section, .fb-section, .a11y-section) strong {
  color: var(--text-heading);
}
:root[data-theme="midnight"] :is(.a11y-section, .faq-list, .faq-wrap, main) :is(h1,h2,h3,p,li,a,strong,address) { color: var(--text-body); }
:root[data-theme="midnight"] .a11y-section :is(h2, strong) { color: var(--text-heading); }
:root[data-theme="midnight"] :is(.faq-question, .faq-tab, .faq-category-title) { color: var(--text-heading); }
:root[data-theme="midnight"] .faq-answer, :root[data-theme="midnight"] .faq-answer * { color: var(--text-body); }
:root[data-theme="midnight"] :is(.faq-item, .faq-tab, .type-btn, .team-photo, .vacancy-card, .benefit-card, .expand-card) {
  background: var(--surface); border-color: var(--surface-edge);
}
:root[data-theme="midnight"] :is(textarea, select, .form-textarea, .form-input, .fb-input, option) {
  background-color: #17233b; color: var(--text-heading);
}
:root[data-theme="midnight"] :is(.page-hero, .about-cta, .team-cta, .glass-card, .info-card, .contact-full-form, .benefit-card, .vacancy-card, .expand-card)::before,
:root[data-theme="midnight"] :is(.glass-card, .info-card, .contact-full-form, .benefit-card, .vacancy-card, .expand-card)::after { display: none; }

/* Midnight — leftovers found in visual checks */
:root[data-theme="midnight"] .enquiry-item,
:root[data-theme="midnight"] .faq-hero :is(h1, p),
:root[data-theme="midnight"] .a11y-hero :is(h1, p),
:root[data-theme="midnight"] .type-btn-desc { color: var(--text-body); }
:root[data-theme="midnight"] :is(h1.reveal, h1.reveal span) { color: var(--text-heading); }
:root[data-theme="midnight"] h1.reveal + p, :root[data-theme="midnight"] p.reveal { color: var(--text-body); }
:root[data-theme="midnight"] .type-btn-title, :root[data-theme="midnight"] .form-section-heading { color: var(--text-heading); }
:root[data-theme="midnight"] .fb-card { background: var(--surface) !important; border-color: var(--surface-edge) !important; box-shadow: 0 10px 28px -8px rgba(0,0,0,.55) !important; }
:root[data-theme="midnight"] .fb-card::before, :root[data-theme="midnight"] .fb-card::after { display: none; }
:root[data-theme="midnight"] .fb-card > p, :root[data-theme="midnight"] .fb-card h2 { color: var(--text-body); }
:root[data-theme="midnight"] .cs-trigger, :root[data-theme="midnight"] .cs-dropdown { background: #17233b; color: var(--text-heading); border-color: rgba(255,255,255,.14); }
:root[data-theme="midnight"] .cs-option { color: var(--text-heading); }
:root[data-theme="midnight"] .cs-option:hover { background: rgba(255,255,255,.08); }

/* ================================================================
   CONTRAST PASS — every text colour measured against its real
   background (WCAG AA: 4.5:1 body text, 3:1 large text)
================================================================ */
:root {
  --label-a: #5b2bb5; --label-b: #6d38cc;   /* eyebrow labels, "Gian" wordmarks */
  --link-violet: #6d38cc;
  --chip-green: #047857;
  --on-light-muted: #4f5d73;
}
:root[data-theme="midnight"] { --label-a: #c4b0ff; --label-b: #93b6ff; --link-violet: #b9a3ff; --chip-green: #5ee0a0; --on-light-muted: #9fb0c9; }
:root[data-theme="forest"]   { --label-a: #10583a; --label-b: #1f7a55; --link-violet: #1f7a55; --on-light-muted: #4a6458; }
:root[data-theme="plum"]     { --label-a: #4f2294; --label-b: #7b3fc4; --link-violet: #6a2fb5; --on-light-muted: #5d5173; }
:root[data-theme="sand"]     { --label-a: #7a3510; --label-b: #a64d17; --link-violet: #a64d17; --on-light-muted: #6a5d4e; }

.section-label, .gian-word, .gradient-gian {
  background-image: linear-gradient(135deg, var(--label-a), var(--label-b));
}
.section-label::before { background: linear-gradient(90deg, var(--label-a), var(--label-b)); }
.section-label::after  { background: linear-gradient(90deg, var(--label-b), var(--label-a)); }
.recruitment-content .section-label::before, .recruitment-content .section-label::after { background: #93c5fd; }
.recruitment-content .section-label { background-image: none; -webkit-text-fill-color: #93c5fd; color: #93c5fd; }

.text-purple, a.text-purple { color: var(--link-violet); -webkit-text-fill-color: var(--link-violet); }
.info-card-label, .privacy-note { color: var(--on-light-muted); }
.contact-note { color: var(--on-light-muted); }
.cs-label.cs-placeholder { color: var(--on-light-muted); }
.vacancy-tag.green { color: var(--chip-green); }
.vacancy-tag { color: var(--primary-dark); }
.expand-toggle { color: var(--primary-dark); }
.author-avatar { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: #fff; }
.skip-link { background: #0f2c6e; }

/* Midnight: components that assumed a light surface */
:root[data-theme="midnight"] .liquid-btn.white-btn,
:root[data-theme="midnight"] .liquid-btn.white-btn .btn-text { color: #0f2c6e; }
:root[data-theme="midnight"] .author-avatar { background: linear-gradient(135deg, #3f74e0, #2a4fa8); }
:root[data-theme="midnight"] .expand-intro { background: rgba(255,255,255,0.05); border-left-color: var(--primary); }
:root[data-theme="midnight"] .staff-toggle-btn { color: var(--text-heading); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); }
:root[data-theme="midnight"] .expand-toggle { background: rgba(139,176,255,0.10); border-color: rgba(139,176,255,0.35); }
:root[data-theme="midnight"] .vacancy-tag { background: rgba(139,176,255,0.12); border-color: rgba(139,176,255,0.30); color: #c7d7fb; }
:root[data-theme="midnight"] .vacancy-tag.green { background: rgba(94,224,160,0.10); border-color: rgba(94,224,160,0.30); }
:root[data-theme="midnight"] .nl-pdf-icon { filter: none; opacity: .95; }
:root[data-theme="midnight"] :is(.fb-card, .form-section) :is(p, h2, h3, span):not([class*="btn"]) { color: var(--text-body); }
:root[data-theme="midnight"] :is(.fb-card h2, .form-section-heading, .type-btn-title) { color: var(--text-heading); }
:root[data-theme="midnight"] #vacanciesList > div, :root[data-theme="midnight"] .loading-text { color: var(--text-body); }
:root[data-theme="midnight"] .gian-card { background: var(--surface) !important; border: 1px solid var(--surface-edge) !important; }
:root[data-theme="midnight"] .gian-card::before, :root[data-theme="midnight"] .gian-card::after { display: none; }
:root[data-theme="midnight"] .gian-letter { background-image: linear-gradient(135deg, #8bb0ff, #c4b0ff); }
:root[data-theme="midnight"] .gian-card p { color: var(--text-body); }

/* ================================================================
   ACCESSIBILITY ENTRY POINTS
================================================================ */
.fab-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 18px 0 14px; border-radius: 999px;
  background: var(--surface-solid); color: var(--primary-dark);
  border: 1px solid var(--nav-line);
  font-size: .85rem; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 8px 24px -6px rgba(var(--shadow-tint), .35), 0 2px 6px rgba(var(--shadow-tint), .15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fab-pill:hover { transform: translateY(-2px); }
.fab-pill svg { width: 20px; height: 20px; flex: none; }
.theme-note a { color: var(--link-violet); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.nav-a11y { display: none; }
@media (max-width: 768px) {
  .nav-a11y { display: block; }
  .fab-pill { height: 44px; padding: 0 14px 0 12px; font-size: .8rem; }
}
.footer a[href="accessibility.html"] { text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================
   CONTRAST FIXES THAT NEEDED TO OUTRANK PAGE-LEVEL <style> BLOCKS
================================================================ */
html body .info-card-label, html body .privacy-note, html body .contact-note { color: var(--on-light-muted); }
html body .cs-label.cs-placeholder { color: var(--on-light-muted); }
html body .vacancy-tag.green { color: var(--chip-green); }
html body .vacancy-tag { color: var(--primary-dark); }
html body .expand-toggle { color: var(--primary-dark); }
html body a.text-purple { color: var(--link-violet); -webkit-text-fill-color: var(--link-violet); }
html body .section-label { background-image: linear-gradient(135deg, var(--label-a), var(--label-b)); }
html body .recruitment-content .section-label { background-image: none; }
:root[data-theme="midnight"] body .vacancy-tag { color: #c7d7fb; }
:root[data-theme="midnight"] body .vacancy-tag.green { color: var(--chip-green); }
:root[data-theme="midnight"] body .liquid-btn.white-btn .btn-text { color: #0f2c6e; }
:root[data-theme="midnight"] body .fb-card h2 { color: var(--text-heading); }
:root[data-theme="midnight"] body .info-card-label { color: var(--text-muted); }

/* FAQ call-to-action: white text needs a darker panel than the old light violet */
:root { --cta-a: #4f2294; --cta-b: #6d38cc; }
:root[data-theme="midnight"] { --cta-a: #1e2f6b; --cta-b: #3a48b0; }
:root[data-theme="forest"]   { --cta-a: #0e4a33; --cta-b: #1b7350; }
:root[data-theme="plum"]     { --cta-a: #3f1778; --cta-b: #7339bd; }
:root[data-theme="sand"]     { --cta-a: #6e3210; --cta-b: #a64d17; }
html body .faqs-cta { background: linear-gradient(135deg, var(--cta-a), var(--cta-b)); }
html body .faqs-cta p { color: rgba(255,255,255,0.92); }

html body .service-content p { color: var(--on-light-muted); }
:root[data-theme="midnight"] body .service-content p { color: var(--text-body); }
html body .fb-card p[style*="6B35C4"] { color: var(--label-b) !important; }

/* ================================================================
   PHONES & TABLETS
================================================================ */
.fab-stack {
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
}
.theme-opt { min-height: 44px; }
.theme-panel { max-width: calc(100vw - 28px); }
@media (max-width: 768px) {
  .fab-stack { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); gap: 10px; }
  .theme-panel { width: min(300px, calc(100vw - 28px)); bottom: 56px; }
  .theme-options { grid-template-columns: 1fr 1fr; }
  /* keep the footer's last row clear of the floating buttons */
  .footer { padding-bottom: 96px; }
}
/* iPad portrait / landscape: the desktop nav is tight, so trim padding rather than wrap */
@media (min-width: 769px) and (max-width: 1100px) {
  .nav-container { gap: 16px; padding: 0 20px; }
  .nav-link { padding: 8px 9px; font-size: .84rem; }
  .btn-login { padding: 8px 14px; }
}
/* Touch devices: no hover lift, bigger tap areas on chips and links */
@media (hover: none) {
  .fab:hover, .fab-pill:hover { transform: none; }
  .footer a { display: inline-block; padding: 4px 0; }
}
@media (max-width: 480px) {
  .fab-pill span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* icon-only on small phones; aria-label keeps the name */
  .fab-pill { width: 44px; padding: 0; justify-content: center; }
}

/* iPad portrait and small tablets (769-900px): the full desktop nav needs ~876px.
   Tighten spacing and show Log In as an icon (its text stays for screen readers). */
@media (min-width: 769px) and (max-width: 900px) {
  .nav-container { gap: 10px; padding: 0 16px; }
  .nav-logo-img { height: 42px; }
  .nav-link { padding: 8px 6px; font-size: .78rem; }
  .nav-link::after { left: 6px; right: 6px; }
  .btn-login { font-size: 0; gap: 0; padding: 10px 12px; min-height: 40px; }
  .btn-login svg { width: 18px; height: 18px; }
}
.footer-a11y { margin-left: 16px; text-decoration: underline; text-underline-offset: 3px; }

/* G.I.A.N. heading letters were a fixed dark violet */
html body .gian-purple-letter { color: var(--link-violet); -webkit-text-fill-color: var(--link-violet); }
:root[data-theme="midnight"] body .section-title span { color: #8bb0ff; }

/* ================================================================
   REMAINING CONTRAST ITEMS FROM THE AUDIT
================================================================ */
:root { --label-b: #6d38cc; }
:root[data-theme="forest"] { --label-b: #1a6b49; --link-violet: #176343; }
:root[data-theme="plum"]   { --label-b: #6a2fb5; }
:root[data-theme="sand"]   { --label-b: #8f4313; --link-violet: #8a3f12; }

html body .gian-word, html body .gradient-gian { background-image: linear-gradient(135deg, var(--label-a), var(--label-b)); }
html body .gian-letter { background-image: linear-gradient(135deg, var(--primary-dark), var(--primary)); }
:root[data-theme="midnight"] body .gian-letter { background-image: linear-gradient(135deg, #8bb0ff, #c4b0ff); }

/* Recruitment banner wordmark sat dim on navy */
html body .recruitment-content :is(.text-violet, em, em span) { color: #c4b5fd; -webkit-text-fill-color: #c4b5fd; }

/* Footer link added on pages without a Compliance column */
.footer-bottom .footer-a11y { color: rgba(255,255,255,.88); }

/* Midnight: Quick Apply card, vacancy rows, outline buttons, inline-coloured copy */
:root[data-theme="midnight"] body .apply-card {
  background: var(--surface) !important; border: 1px solid var(--surface-edge) !important;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,.55) !important;
}
:root[data-theme="midnight"] body .apply-card::before, :root[data-theme="midnight"] body .apply-card::after { display: none; }
:root[data-theme="midnight"] body :is(.apply-title, .apply-modal-title) { color: var(--text-heading); }
:root[data-theme="midnight"] body :is(.apply-desc, .apply-modal-label, .apply-modal-label-field, .apply-card label) { color: var(--text-body); }
:root[data-theme="midnight"] body .liquid-btn.outline-navy {
  background: rgba(255,255,255,0.07); color: var(--text-heading); border-color: rgba(255,255,255,0.28);
}
:root[data-theme="midnight"] body .liquid-btn.outline-navy .btn-text { color: var(--text-heading); }
:root[data-theme="midnight"] body [style*="color:rgba(15,44,110"],
:root[data-theme="midnight"] body [style*="color: rgba(15,44,110"],
:root[data-theme="midnight"] body [style*="color:#6B35C4"] { color: var(--text-body) !important; }
:root[data-theme="midnight"] body .section-label { background-image: linear-gradient(135deg, var(--label-a), var(--label-b)); }
:root[data-theme="midnight"] body :is(.fb-card, #typeCard) :is(h2, h3) { color: var(--text-heading) !important; }
:root[data-theme="midnight"] body :is(.fb-card, #typeCard) p { color: var(--text-body) !important; }

/* Violet accents that ignored the palette (FAQ button, nav underline, step bars) */
html body .faqs-btn { background: linear-gradient(135deg, var(--cta-a), var(--cta-b)); box-shadow: 0 6px 18px -4px rgba(var(--shadow-tint), .4); }
html body .faqs-btn:hover { background: linear-gradient(135deg, var(--cta-b), var(--cta-a)); }
html body .nav-link::after { background: linear-gradient(90deg, var(--label-a), var(--label-b)); }
html body .at-top.nav-over-dark .nav-link::after { background: #fff; }

/* ================================================================
   HERO CARD + STAT TILES — one palette per theme
   --hero-rgb      deepest tone, used for the photo scrim and tile base
   --hero-mid-rgb  the theme's brand tone, tinting the glass
   --hero-accent   light tint for headline emphasis, numbers, badge
================================================================ */
:root {
  --hero-rgb: 5, 13, 31;       --hero-mid-rgb: 15, 44, 110;  --hero-accent: #93c5fd;  --hero-accent-rgb: 147, 197, 253;
}
:root[data-theme="midnight"] { --hero-rgb: 5, 9, 20;     --hero-mid-rgb: 32, 54, 120;  --hero-accent: #a9c2ff;  --hero-accent-rgb: 169, 194, 255; }
:root[data-theme="forest"]   { --hero-rgb: 4, 20, 14;    --hero-mid-rgb: 14, 90, 60;   --hero-accent: #86e8b8;  --hero-accent-rgb: 134, 232, 184; }
:root[data-theme="plum"]     { --hero-rgb: 17, 8, 32;    --hero-mid-rgb: 84, 36, 150;  --hero-accent: #d4bcff;  --hero-accent-rgb: 212, 188, 255; }
:root[data-theme="sand"]     { --hero-rgb: 26, 15, 7;    --hero-mid-rgb: 140, 64, 20;  --hero-accent: #f7c999;  --hero-accent-rgb: 247, 201, 153; }

/* Photo scrim follows the palette */
html body .hero-background::after {
  background: linear-gradient(105deg,
    rgba(var(--hero-rgb), 0.90) 0%, rgba(var(--hero-rgb), 0.76) 42%,
    rgba(var(--hero-rgb), 0.50) 62%, rgba(var(--hero-rgb), 0.66) 100%);
}

/* Welcome card: tinted glass with an accent hairline along the top edge */
html body .hero-card {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(var(--hero-mid-rgb), 0.55) 0%, rgba(var(--hero-mid-rgb), 0) 60%),
    linear-gradient(155deg, rgba(var(--hero-mid-rgb), 0.46) 0%, rgba(var(--hero-rgb), 0.72) 100%);
  border-top: 1px solid rgba(var(--hero-accent-rgb), 0.42);
  border-left: 1px solid rgba(var(--hero-accent-rgb), 0.18);
  border-bottom: 1px solid rgba(0, 0, 0, 0.30);
  border-right: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow:
    0 28px 70px -10px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(var(--hero-accent-rgb), 0.05),
    0 0 60px -18px rgba(var(--hero-mid-rgb), 0.9),
    inset 0 1.5px 0 rgba(var(--hero-accent-rgb), 0.30),
    inset 0 0 40px rgba(var(--hero-accent-rgb), 0.04);
}
html body .hero-card::before { background: linear-gradient(180deg, rgba(var(--hero-accent-rgb), 0.10) 0%, transparent 100%); }
html body .hero-badge {
  background: rgba(var(--hero-accent-rgb), 0.14);
  border-color: rgba(var(--hero-accent-rgb), 0.38);
  color: var(--hero-accent);
}
html body .hero-title em, html body .hero-title em .text-violet {
  color: var(--hero-accent); -webkit-text-fill-color: var(--hero-accent);
  text-shadow: 0 0 44px rgba(var(--hero-accent-rgb), 0.45);
}
html body .hero-description { color: rgba(255, 255, 255, 0.92); }

/* Stat tiles: same palette, accent number, soft glow, a thin accent rule */
html body .stat-item {
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(var(--hero-mid-rgb), 0.55) 0%, rgba(var(--hero-mid-rgb), 0) 70%),
    linear-gradient(160deg, rgba(var(--hero-mid-rgb), 0.92) 0%, rgba(var(--hero-rgb), 0.98) 100%);
  border-top: 1px solid rgba(var(--hero-accent-rgb), 0.38);
  border-left: 1px solid rgba(var(--hero-accent-rgb), 0.14);
  border-bottom: 1px solid rgba(0, 0, 0, 0.30);
  border-right: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow:
    0 14px 34px -8px rgba(var(--hero-rgb), 0.65),
    0 0 0 1px rgba(var(--hero-accent-rgb), 0.04),
    inset 0 1.5px 0 rgba(var(--hero-accent-rgb), 0.26),
    inset 0 0 26px rgba(var(--hero-accent-rgb), 0.04);
}
html body .stat-item:hover {
  box-shadow:
    0 22px 48px -8px rgba(var(--hero-rgb), 0.75),
    0 0 36px -10px rgba(var(--hero-accent-rgb), 0.45),
    inset 0 1.5px 0 rgba(var(--hero-accent-rgb), 0.38),
    inset 0 0 30px rgba(var(--hero-accent-rgb), 0.07);
}
html body .stat-number {
  color: var(--hero-accent);
  text-shadow: 0 0 28px rgba(var(--hero-accent-rgb), 0.35);
}
html body .stat-label {
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
  padding-top: 10px; margin-top: 2px;
  border-top: 1px solid rgba(var(--hero-accent-rgb), 0.16);
}
html body .stat-item::before { background: linear-gradient(180deg, rgba(var(--hero-accent-rgb), 0.09) 0%, transparent 100%); }

/* Wordmark over the dark hero was low-contrast purple on navy */
html body .navbar.at-top.nav-over-dark .logo img {
  filter: brightness(2.2) saturate(1.15) drop-shadow(0 1px 8px rgba(var(--hero-accent-rgb), 0.35));
}
:root[data-theme="midnight"] body .stat-item { border-color: rgba(var(--hero-accent-rgb), 0.22); border-top-color: rgba(var(--hero-accent-rgb), 0.45); }

/* ================================================================
   READABILITY — medium-weight body copy, firmer greys
   Inter at 400 on frosted/translucent cards reads thin, so the base
   weight is 500 (headings, labels and buttons keep their own, heavier
   weights). Secondary greys are darkened so "supporting" text is still
   clearly legible, never just decoration.
================================================================ */
:root {
  --text-body: #1e293b;
  --text-muted: #475569;
  --text-dim: #5b6b80;
  --on-light-muted: #3f4d63;
}
:root[data-theme="midnight"] { --text-body: #d3ddf0; --text-muted: #a5b4cf; --text-dim: #8d9db9; --on-light-muted: #a5b4cf; }
:root[data-theme="forest"]   { --text-body: #1c3328; --text-muted: #3f5a4c; --text-dim: #587165; --on-light-muted: #3b5547; }
:root[data-theme="plum"]     { --text-body: #2a1f40; --text-muted: #4e4268; --text-dim: #655a80; --on-light-muted: #4a3f63; }
:root[data-theme="sand"]     { --text-body: #33261a; --text-muted: #5b4a3a; --text-dim: #74634f; --on-light-muted: #56463a; }

html body { font-weight: 500; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Anything that sets its own light weight still reads as body text */
html body :is(p, li, dd, dt, td, label, small, blockquote, figcaption, address, input, textarea, select, option, .section-description, .lead) { font-weight: 500; }
html body :is(h1, h2, h3, h4, h5, h6) { font-weight: 700; }
html body :is(strong, b, th) { font-weight: 700; }
/* Small supporting text: a step heavier so it stays clear at small sizes */
html body :is(.stat-label, .accred-heading, .info-card-label, .privacy-note, .contact-note, .form-hint, .author-role, .cqc-w-rating-label) { font-weight: 600; }
/* Nothing below ~12.5px */
html body :is(.section-label, .gian-word, .hero-badge, .vacancy-tag, .info-card-label) { font-size: max(0.78rem, 12.5px); }
html body :is(.service-card p, .value-item p, .about-feature-text p, .testimonial-text, .gian-card p) { line-height: 1.7; }
html body :is(.cs-label, .type-btn-desc, .type-btn-icon, .cselect-val-inner) { font-weight: 500; }
html body :is(.accred-heading, .contact-label) { font-size: max(0.78rem, 12.5px); }