/* ==========================================================================
   KAI · Accessibility & polish overlay
   Loaded site-wide via <link>. Augments the page-embedded design system v1.0
   without overriding intentional styling. Tokens (--ink, --sky, --mist...)
   are inherited; safe defaults are provided where the token is absent.
   ========================================================================== */

/* ---------- Premium easing curves (Emil-style) ---------- */
:root {
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo:  cubic-bezier(0.16,  1,    0.3,  1);
  --ease-in-out:    cubic-bezier(0.65,  0,    0.35, 1);
}

/* ---------- Typography polish ---------- */
/* Better kerning / ligatures everywhere */
html { font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }
/* Balance long headlines so the last line never has a single word */
@supports (text-wrap: balance) {
  :where(h1, h2, h3, .display-1, .display-2,
         .h1, .h2, .h3,
         .hero-title, .sec-head h2, .news-card h3,
         .fac-card .name, .stat-lbl) {
    text-wrap: balance;
  }
}
/* Avoid orphans in body copy */
@supports (text-wrap: pretty) {
  :where(p, .lead, .body, .small,
         .hero-aside p, .event-card .body h4) {
    text-wrap: pretty;
  }
}
/* Tabular numerals for stats, dates, counters — so "12 / 24" doesn't dance */
.stat-num, .num, .price, time,
[data-current], .counter,
.event-card .date .d,
.kv-row .k {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Visible keyboard focus ring ---------- */
/* :where() keeps specificity at 0 so any page-specific :focus styles win. */
:where(a, button, [role="button"], summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sky, #2B6CFF);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Round controls get a round ring offset */
.btn:focus-visible,
.chip:focus-visible,
.lang-switch button:focus-visible,
.slider-dots button:focus-visible,
.slider-dot:focus-visible,
.menu-toggle:focus-visible,
.drawer-close:focus-visible {
  outline: 2px solid var(--sky, #2B6CFF);
  outline-offset: 3px;
}
/* Inputs already get a box-shadow ring on :focus — only patch when missing */
.input:focus-visible:not(:focus),
.select:focus-visible:not(:focus),
.textarea:focus-visible:not(:focus) {
  outline: 2px solid var(--sky, #2B6CFF);
  outline-offset: 2px;
}

/* ---------- Disabled state for buttons & inputs ---------- */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--mist, #F4F6FA);
  color: var(--slate, #94A3B8);
  cursor: not-allowed;
}

/* ---------- Screen-reader-only utility ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reduced motion: respect user preference site-wide ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Touch-friendly tap targets where the design used tiny ones ---- */
@media (pointer: coarse) {
  .lang-switch button { padding: 8px 14px; font-size: 12px; min-height: 36px; }
  .chip { padding: 10px 16px; font-size: 14px; min-height: 40px; }
  .slider-dots button { min-width: 24px; min-height: 24px; }
}

/* ---------- Form field error/help patterns (used opt-in by markup) ------- */
.field .help {
  font-size: 12.5px;
  color: var(--stone, #475569);
  margin-top: 4px;
}
.field .error {
  font-size: 12.5px;
  color: var(--danger, #EF4444);
  margin-top: 4px;
  display: none;
}
.field[aria-invalid="true"] .input,
.field[aria-invalid="true"] .select,
.field[aria-invalid="true"] .textarea,
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--danger, #EF4444);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}
.field[aria-invalid="true"] .error { display: block; }

/* ---------- Disable hover effects on coarse pointers (no real hover) ---- */
@media (hover: none) {
  .news-card:hover h3,
  .event-card:hover h4,
  .fac-card:hover .name { color: inherit; }
  .fac-card:hover { transform: none; }
  .event-card:hover { padding-left: var(--s-5, 20px); }
  .card-link:hover { transform: none; }
}

/* ---------- Refined hover/active motion (premium feel) ---------- */
/* Smoother easing on card-level lifts; quart easing feels intentional, not bouncy */
.card, .news-card, .fac-card, .qa, .event-card, .card-link {
  transition:
    transform 320ms var(--ease-out-quart),
    border-color 200ms ease,
    box-shadow 280ms var(--ease-out-quart),
    color 160ms ease;
}
/* Subtle settle on press — feels mechanical, not jumpy */
.btn:active { transform: translateY(0.5px) scale(0.985); }
.chip:active { transform: scale(0.97); }
/* Soft shadow appears only on hover (otherwise cards stay flat = editorial) */
@media (hover: hover) {
  .card:hover, .fac-card:hover, .qa:hover {
    box-shadow: 0 14px 38px -22px rgba(10, 22, 40, 0.28);
  }
}

/* ---------- Marquee: slower editorial crawl (no edge mask — masks cut
   holes through coloured marquees and reveal the page background) ------- */
.marquee-track {
  animation-duration: 65s !important;
  animation-timing-function: linear !important;
}

/* ---------- Chip rows: snap to chip while scrolling on touch ----------- */
.chip-row {
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter, 16px);
  scroll-behavior: smooth;
  scrollbar-color: transparent transparent;
}
.chip-row > .chip { scroll-snap-align: start; }

/* ---------- Images: subtle background while loading (no white flash) --- */
img[loading="lazy"] {
  background-color: var(--mist, #F4F6FA);
}

/* ---------- Headings: rendering hints for premium type ----------------- */
:where(.hero-title, .display-1, .display-2, .h1, .h2) {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Sticky header: graceful fallback when backdrop-filter is off */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header { background: rgba(255, 255, 255, 0.96) !important; }
}

/* ---------- Container guard: prevent rare horizontal scroll cases ----- */
.wrap { min-width: 0; }
img, svg, video { max-width: 100%; }

/* ==========================================================================
   Language dropdown — extensible to any number of languages
   ========================================================================== */
/* Override the legacy pill chip styles from each page's embedded CSS */
.lang-switch {
  position: relative;
  display: inline-flex;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  gap: 0 !important;
}
/* Toggle: use [aria-haspopup="listbox"][type="button"] attributes to outrank
   legacy embedded rules like `.lang-switch button { color: var(--slate) }`
   and `body.has-cine-hero .header .lang-switch button { color: white }`. */
.lang-switch > .lang-toggle[aria-haspopup="listbox"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  background: var(--mist, #F4F6FA);
  color: var(--ink, #0A1628);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  min-height: 30px;
}
.lang-switch > .lang-toggle[aria-haspopup="listbox"]:hover,
.lang-switch > .lang-toggle[aria-haspopup="listbox"][aria-expanded="true"] {
  background: var(--hair, #E5E7EB);
  color: var(--ink, #0A1628);
}
/* The current-language label span inherits — pin it explicitly anyway */
.lang-switch > .lang-toggle[aria-haspopup="listbox"] > [data-lang-current] {
  color: inherit;
}
.lang-switch .lang-toggle .lang-chev {
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 200ms var(--ease-out-quart, ease);
}
.lang-switch .lang-toggle[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }

.lang-switch .lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--paper, #FFFFFF);
  border: 1px solid var(--hair, #E5E7EB);
  border-radius: 12px;
  box-shadow: 0 12px 32px -12px rgba(10, 22, 40, 0.22);
  z-index: 1000;
  animation: lang-menu-in 160ms var(--ease-out-quart, ease) both;
}
.lang-switch .lang-menu[hidden] { display: none; }
@keyframes lang-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lang-switch .lang-menu li { margin: 0; padding: 0; list-style: none; }

/* Use [role="option"] attribute selectors to outrank legacy embedded rules
   like `body.has-cine-hero .header .lang-switch button { color: white }`
   (specificity 0,3,2) — these selectors are 0,4,0 / 0,5,0 and win cleanly. */
.lang-switch .lang-menu [role="option"] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 140ms ease, color 140ms ease;
  color: var(--ink, #0A1628);
}
.lang-switch .lang-menu [role="option"]:hover {
  background: var(--mist, #F4F6FA);
  color: var(--ink, #0A1628);
}
.lang-switch .lang-menu [role="option"] .lang-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  color: var(--stone, #475569);
  letter-spacing: 0.08em;
  min-width: 22px;
}
.lang-switch .lang-menu [role="option"] .lang-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink, #0A1628);
}
.lang-switch .lang-menu [role="option"].on,
.lang-switch .lang-menu [role="option"][aria-selected="true"] {
  background: var(--ink, #0A1628);
  color: var(--paper, #FFFFFF);
}
.lang-switch .lang-menu [role="option"].on .lang-code,
.lang-switch .lang-menu [role="option"].on .lang-name,
.lang-switch .lang-menu [role="option"][aria-selected="true"] .lang-code,
.lang-switch .lang-menu [role="option"][aria-selected="true"] .lang-name {
  color: var(--paper, #FFFFFF);
}

/* Dark hero (body.has-cine-hero) — keep the ghost style in BOTH closed
   and open states so the toggle text stays full white throughout. */
body.has-cine-hero .header .lang-switch > .lang-toggle[aria-haspopup="listbox"] {
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper, #FFFFFF);
}
body.has-cine-hero .header .lang-switch > .lang-toggle[aria-haspopup="listbox"]:hover,
body.has-cine-hero .header .lang-switch > .lang-toggle[aria-haspopup="listbox"][aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
  color: var(--paper, #FFFFFF);
}

/* Cinematic header — active language option uses deep ink background
   (overrides the global dark-navy `.on` rule defined above). */
body.has-cine-hero .header .lang-switch .lang-menu [role="option"].on,
body.has-cine-hero .header .lang-switch .lang-menu [role="option"][aria-selected="true"] {
  background: rgba(5, 11, 26, 0.92) !important;
  color: var(--paper, #FFFFFF);
}
body.has-cine-hero .header .lang-switch .lang-menu [role="option"].on .lang-code,
body.has-cine-hero .header .lang-switch .lang-menu [role="option"].on .lang-name,
body.has-cine-hero .header .lang-switch .lang-menu [role="option"][aria-selected="true"] .lang-code,
body.has-cine-hero .header .lang-switch .lang-menu [role="option"][aria-selected="true"] .lang-name {
  color: var(--paper, #FFFFFF);
}

/* Drawer footer: open the menu upward (no room below) */
.drawer-foot .lang-switch .lang-menu {
  top: auto;
  bottom: calc(100% + 6px);
  right: 0;
  animation-name: lang-menu-up;
}
@keyframes lang-menu-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Small touch-friendly increase on coarse pointers */
@media (pointer: coarse) {
  .lang-switch .lang-toggle { padding: 8px 12px 8px 14px; font-size: 12px; min-height: 36px; }
  .lang-switch .lang-menu button { padding: 11px 12px; }
}

/* ---------- Skip link (auto-injected into <body>) ---------------------- */
.skip-link {
  position: fixed;
  left: 8px;
  top: 8px;
  padding: 12px 16px;
  background: var(--ink, #0A1628);
  color: var(--paper, #FFF) !important;
  border-radius: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  z-index: 9999;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--beam, #FFB800);
  outline-offset: 2px;
}

/* ==========================================================================
   ACCESSIBILITY PANEL — user-controlled a11y settings widget
   Markup is injected by a11y.js into every page.
   Settings persist in localStorage and apply on every page load.
   ========================================================================== */

/* --- Trigger button inside header — sits in .nav-actions next to
   language switcher / "Apply" CTA. Bottom-right corner is reserved
   for the future chat widget. --------------------------------------- */
.a11y-fab {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--mist, #F4F6FA);
  color: var(--ink, #0A1628);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.a11y-fab:hover {
  background: var(--hair, #E5E7EB);
  color: var(--ink, #0A1628);
}
.a11y-fab:focus-visible {
  outline: 2px solid var(--sky, #2B6CFF);
  outline-offset: 3px;
}
.a11y-fab svg { width: 18px; height: 18px; display: block; }
.a11y-fab[aria-expanded="true"] {
  background: var(--ink, #0A1628);
  color: var(--paper, #FFFFFF);
}

/* On cinematic header, ghost styling matches the language toggle */
body.has-cine-hero .header .a11y-fab {
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper, #FFFFFF);
}

/* In dept/fac subsite shells, size the FAB to match the menu toggle (40px) */
.dept-actions .a11y-fab,
.fac-actions .a11y-fab {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--mist);
  border: 1px solid var(--hair);
}
body.has-cine-hero .header .a11y-fab:hover,
body.has-cine-hero .header .a11y-fab[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
  color: var(--paper, #FFFFFF);
}

/* Touch-friendly bump */
@media (pointer: coarse) {
  .a11y-fab { width: 44px; height: 44px; }
  .a11y-fab svg { width: 20px; height: 20px; }
}

/* --- Panel: anchored under the header trigger ---------------------- */
.a11y-panel {
  position: fixed;
  top: calc(var(--header-h, 68px) + 8px);
  right: max(12px, calc((100vw - var(--maxw, 1280px)) / 2 + var(--gutter, 16px)));
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100vh - var(--header-h, 68px) - 24px);
  overflow-y: auto;
  background: var(--paper, #FFFFFF);
  color: var(--ink, #0A1628);
  border: 1px solid var(--hair, #E5E7EB);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 24px 64px -16px rgba(10, 22, 40, 0.28);
  z-index: 999;
  font-family: var(--font-sans, system-ui, sans-serif);
  animation: a11y-panel-in 200ms var(--ease-out-quart, ease) both;
}
.a11y-panel[hidden] { display: none; }
/* kai.build.css has legacy #a11y-panel { visibility: hidden; opacity: 0 }
   tied to a `.open` class. JS here uses the [hidden] attribute instead,
   so force visible/opaque whenever [hidden] is NOT present. */
#a11y-panel:not([hidden]) {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}
@media (max-width: 600px) {
  .a11y-panel {
    right: 12px;
    left: 12px;
    width: auto;
  }
}
@keyframes a11y-panel-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.a11y-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hair, #E5E7EB);
}
.a11y-panel-title {
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink, #0A1628);
  margin: 0;
}
.a11y-panel-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--mist, #F4F6FA);
  color: var(--ink, #0A1628);
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 0;
  transition: background 160ms ease;
}
.a11y-panel-close:hover { background: var(--hair, #E5E7EB); }
.a11y-panel-close svg { width: 16px; height: 16px; }
.a11y-group {
  margin-bottom: 14px;
}
.a11y-group:last-of-type { margin-bottom: 10px; }
.a11y-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone, #475569);
  margin-bottom: 8px;
}
.a11y-row {
  display: flex;
  gap: 4px;
  background: var(--mist, #F4F6FA);
  padding: 3px;
  border-radius: 10px;
}
.a11y-row > button {
  flex: 1;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 7px;
  color: var(--stone, #475569);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.a11y-row > button:hover { background: rgba(255, 255, 255, 0.6); color: var(--ink, #0A1628); }
.a11y-row > button[aria-pressed="true"] {
  background: var(--paper, #FFFFFF);
  color: var(--ink, #0A1628);
  box-shadow: 0 1px 3px rgba(10, 22, 40, 0.08);
}
.a11y-row > button[data-text-zoom="100"] { font-size: 13px; }
.a11y-row > button[data-text-zoom="115"] { font-size: 15px; }
.a11y-row > button[data-text-zoom="130"] { font-size: 17px; }
.a11y-row > button[data-text-zoom="150"] { font-size: 20px; }

.a11y-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--mist, #F4F6FA);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px;
  min-height: 44px;
}
.a11y-check input { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; accent-color: var(--ink, #0A1628); }

.a11y-reset {
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  padding: 10px;
  background: transparent;
  color: var(--stone, #475569);
  border: 1px solid var(--hair-2, #D1D5DB);
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 160ms ease;
}
.a11y-reset:hover { color: var(--danger, #EF4444); border-color: var(--danger, #EF4444); }

/* ==========================================================================
   USER PREFERENCE APPLIES: text zoom, theme, contrast, motion, autoplay
   ========================================================================== */

/* Text zoom — uses CSS `zoom` (now supported in Chrome, Safari, Firefox 126+) */
html[data-text-zoom="115"] { zoom: 1.15; }
html[data-text-zoom="130"] { zoom: 1.30; }
html[data-text-zoom="150"] { zoom: 1.50; }

/* Grayscale mode — for users with photosensitivity, color vision deficiency,
   migraine, or visual stress. Filters the entire page to monochrome.
   The a11y panel itself remains in color so user can still see controls. */
html[data-color="grayscale"] body { filter: grayscale(100%); -webkit-filter: grayscale(100%); }
html[data-color="grayscale"] .a11y-panel,
html[data-color="grayscale"] .a11y-fab { filter: none; -webkit-filter: none; }

/* Hero text contrast bump — overlapping aurora gradient can make
   78%-opacity white text too pale against the lighter areas of the
   background. Lock to fully opaque white with subtle shadow for WCAG AA. */
.hero-cinema .hero-aside-cine p { color: #FFFFFF; text-shadow: 0 1px 12px rgba(0,0,0,0.45); }
.hero-cinema .hero-fact { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.hero-cinema .hero-fact strong { color: var(--beam, #FFB800); }
.hero-cinema .eyebrow-row,
.hero-cinema .eyebrow-row span { color: rgba(255, 255, 255, 0.88); }
.hero-cinema .hero-foot .seg { color: rgba(255, 255, 255, 0.92); }
.hero-cinema .hero-foot b { color: #FFFFFF; }

/* HUD "FL 380 · DEST" was visible on desktop but clipped at the right edge.
   Constrain via overflow + max-width on the parent, then keep on its own
   line so it never overflows the viewport. */
.hero-cinema { overflow: hidden; }
.hero-cinema .hero-foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }

/* Alumni-carousel photos — inherit the dark slide background so the
   white-canvas PNG matches slide 1's atmosphere. */
.hero-photo .alumni-image {
  background-color: inherit;
}

/* Hero grid — mobile-first: single column stack on phones, 2-col on tablet+. */
.hero-cinema .hero-cine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6, 24px);
  align-items: start;
}
@media (min-width: 768px) {
  .hero-cinema .hero-cine-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
  }
}

/* H1 — mobile-first: clamp on phones, locked 75px from tablet+. */
.hero-cinema h1.hero-cine-title {
  font-size: clamp(36px, 9vw, 75px) !important;
  line-height: 1.05 !important;
}
@media (min-width: 768px) {
  .hero-cinema h1.hero-cine-title { font-size: 75px !important; }
}

/* In dark theme the design tokens flip (--paper → dark navy). Header
   pieces and the hero title used `color: var(--paper)` to display as
   white over the cinematic backdrop, but with --paper now dark they
   become invisible. Lock these to a real white in dark theme. */
html[data-effective-theme="dark"] .header .brand,
html[data-effective-theme="dark"] .header .brand-name b,
html[data-effective-theme="dark"] .header .brand-name > span,
html[data-effective-theme="dark"] .header .nav-main a,
html[data-effective-theme="dark"] body.has-cine-hero .header .brand,
html[data-effective-theme="dark"] body.has-cine-hero .header .brand-name b,
html[data-effective-theme="dark"] body.has-cine-hero .header .nav-main a {
  color: #FFFFFF !important;
}
html[data-effective-theme="dark"] .header .brand-name > span { color: rgba(255,255,255,0.6) !important; }

/* Brand logo (mask-rendered span) — force white fill in dark theme so it
   stays visible against the dark header background. */
html[data-effective-theme="dark"] .header .brand-logo,
html[data-effective-theme="dark"] .drawer-head .brand-logo { background-color: #FFFFFF !important; }

/* Header right-side actions (search btn, a11y FAB, lang switch, Apply CTA,
   menu toggle) — keep visible white text/icons in dark theme. */
html[data-effective-theme="dark"] .header .nav-actions,
html[data-effective-theme="dark"] .header .nav-actions a,
html[data-effective-theme="dark"] .header .nav-actions button,
html[data-effective-theme="dark"] .header .nav-actions svg,
html[data-effective-theme="dark"] .header .search-btn,
html[data-effective-theme="dark"] .header .menu-toggle,
html[data-effective-theme="dark"] .header .a11y-fab,
html[data-effective-theme="dark"] .header .lang-toggle,
html[data-effective-theme="dark"] .header .lang-toggle [data-lang-current] { color: #FFFFFF !important; }
html[data-effective-theme="dark"] .header .nav-actions .btn-primary { color: #0A1628 !important; }
html[data-effective-theme="dark"] .hero-cinema h1.hero-cine-title,
html[data-effective-theme="dark"] .hero-cinema .hero-cine-title { color: #FFFFFF !important; }
html[data-effective-theme="dark"] .hero-cinema .btn-cine-ghost { color: #FFFFFF !important; border-color: rgba(255,255,255,0.35) !important; }
html[data-effective-theme="dark"] .hero-cinema .btn-cine-ghost:hover { color: var(--gold, #FFB800) !important; border-color: var(--gold, #FFB800) !important; }

/* Alumni-carousel quote — sits on top of a dark portrait, must stay
   white. In dark theme --paper flips dark, so the original
   `color: var(--paper)` ends up dark navy and disappears. */
html[data-effective-theme="dark"] .hero-photo .quote { color: #FFFFFF !important; }
html[data-effective-theme="dark"] .hero-photo .badge-tl { color: #FFFFFF !important; }

/* lang-menu active option — UA code+name were inheriting dark "paper"
   from the token flip on the on-state highlight. Lock to white and a
   visible gold-tinted background so the active item stands out. */
html[data-effective-theme="dark"] .lang-menu .on,
html[data-effective-theme="dark"] .lang-menu .on .lang-code,
html[data-effective-theme="dark"] .lang-menu .on .lang-name { color: var(--gold, #FFB800) !important; }
html[data-effective-theme="dark"] .lang-menu .on { background: rgba(255,184,0,0.12) !important; }

/* lang options are <a> now — keep the inline-flex/styling that buttons had. */
.lang-menu a[data-lang-btn] {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; min-height: 36px;
  width: 100%; text-align: left;
  border-radius: 6px;
  font-family: inherit;
  text-decoration: none;
}
.lang-menu a[data-lang-btn]:hover { background: rgba(255,255,255,0.06); }

/* Mobile header — hide the "Вступ-2026" CTA on small screens to free
   space for the language switcher; CTA still reachable via drawer/menu. */
@media (max-width: 720px) {
  .header .nav-actions .btn-primary { display: none !important; }
  .header .lang-switch { display: inline-flex !important; }
}

/* Student-avatar circles — span container was 342×80 (full row width)
   with no border-radius/overflow. Lock to a real 80×80 circle that
   clips its content. */
.students-strip .student-avatar {
  display: inline-block;
  width: 80px; height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  line-height: 0;
  position: relative;
  background: var(--ink-90, #1A2332);
}
.students-strip .student-avatar > svg,
.students-strip .student-avatar > img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

/* Manifesto statement — was `color: var(--paper)` which in dark theme
   flips to dark navy and disappears against the abyss background. */
html[data-effective-theme="dark"] .manifesto,
html[data-effective-theme="dark"] .manifesto .statement,
html[data-effective-theme="dark"] .manifesto .label,
html[data-effective-theme="dark"] .manifesto .signature,
html[data-effective-theme="dark"] .manifesto .signature b { color: #FFFFFF !important; }
html[data-effective-theme="dark"] .manifesto .signature { color: rgba(255,255,255,0.6) !important; }

/* Force-show the brand-name subtitle (some older rule cascades to
   display:none on this page; restore for desktop legibility). */
.brand-name > span { display: inline !important; }
@media (max-width: 1000px) {
  .brand-name > span { display: none !important; }
}

/* Footer language switcher — same dropdown pattern as the header, but
   on the dark footer background. */
.footer .footer-lang-switch { position: relative; }
.footer .footer-lang-switch .lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; min-height: 36px;
  background: rgba(255,255,255,0.08);
  color: var(--paper, #FFFFFF);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
}
.footer .footer-lang-switch .lang-toggle:hover { background: rgba(255,255,255,0.14); }
.footer .footer-lang-switch .lang-chev { transition: transform .2s ease; }
.footer .footer-lang-switch .lang-toggle[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.footer .footer-lang-switch .lang-menu {
  position: absolute;
  bottom: calc(100% + 6px); right: 0;          /* opens UPWARD because footer is at page bottom */
  min-width: 180px;
  background: #0F1A2C;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
  z-index: 50;
  display: flex; flex-direction: column; gap: 2px;
}
.footer .footer-lang-switch .lang-menu[hidden] { display: none; }
.footer .footer-lang-switch .lang-menu button {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; min-height: 36px;
  width: 100%; text-align: left;
  color: rgba(255,255,255,0.85);
  border-radius: 6px;
  font-size: 13px;
}
.footer .footer-lang-switch .lang-menu button:hover { background: rgba(255,255,255,0.06); color: #FFFFFF; }
.footer .footer-lang-switch .lang-menu button.on { background: rgba(255,184,0,0.12); color: var(--beam, #FFB800); }
.footer .footer-lang-switch .lang-code { font-family: var(--font-mono, monospace); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; opacity: 0.7; }
.footer .footer-lang-switch .lang-name { font-size: 13px; }

/* Hero-foot was hiding trust-signal segments on desktop because of a stale
   `.seg.hide-mobile { display:none }` rule that's not properly scoped. */
.hero-cinema .hero-foot .seg.hide-mobile { display: inline-flex; }
@media (max-width: 800px) {
  .hero-cinema .hero-foot .seg.hide-mobile { display: none; }
}

/* Manifesto used to take ~200px vertical padding making the section feel
   half-empty between hero and news. Tighten the rhythm. */
.manifesto { padding-block: clamp(48px, 7vw, 96px) !important; }
.manifesto .statement { margin-block: clamp(20px, 3vw, 36px) !important; }
/* Slider section — constrained to content max-width (kai-critical.css owns
   .slider-section padding + .wrap inner container). Keep horizontal scroll
   guard for slide aspect-ratio variance at small viewports. */
.slider-section { overflow-x: clip; }

/* Hero-photo (alumni carousel) — mobile-first: full width up to 460px,
   aspect-ratio kept at all breakpoints so the absolutely-positioned
   slides inside have a height to fill. */
.hero-cinema .hero-cine-grid > .hero-photo,
.hero-cinema .hero-photo {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  min-height: 0;
}

/* Alumni-carousel slider dots — compact look (small white dots,
   gold horizontal pill for the active one). Overrides conflicting rules
   in kai.build.css that made dots oversized. */
.hero-photo .slider-nav { display: flex; gap: 4px; }
.hero-photo .slider-dot {
  width: 6px; height: 6px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.4);
  background-clip: content-box;
  border: 0; border-radius: 50%;
  box-sizing: content-box;
  cursor: pointer;
  transition: width .3s ease, background .3s ease, border-radius .3s ease, box-shadow .3s ease;
}
.hero-photo .slider-dot:hover { background: rgba(255, 255, 255, 0.7); background-clip: content-box; }
.hero-photo .slider-dot.active {
  width: 15px;
  height: 0px;
  background: var(--gold, var(--beam, #FFB800));
  border-radius: 8px;
  box-shadow: 0 0 10px var(--gold);
  margin-top: 3px;
}

/* Touch devices still need 44×44 tap targets — keep that without
   visually inflating the dot itself. */
@media (pointer: coarse) {
  .hero-photo .slider-nav { gap: 2px; }
  .hero-photo .slider-dot { padding: 12px 8px; }
  .hero-photo .slider-dot.active { width: 18px; }
}

/* ==========================================================================
   DARK THEME — applies when data-effective-theme="dark" (set by JS from
   either explicit user choice OR auto + prefers-color-scheme: dark).
   Inverts design tokens AND patches components that hard-code colors,
   so contrast stays readable across buttons, cards, header, footer, forms.
   ========================================================================== */

/* --- Token flip --- */
html[data-effective-theme="dark"] {
  --paper: #0B1220;     /* page bg */
  --mist:  #131B2B;     /* secondary surface */
  --mist-2:#1A2436;     /* tertiary surface */
  --ink:   #ECEEF3;     /* primary text */
  --ink-90:#D8DCE5;
  --stone: #B8BFCC;     /* secondary text — 11:1 on paper */
  --slate: #8A93A3;     /* tertiary text  — 5.7:1 on paper */
  --hair:  #2A3447;     /* hairline border */
  --hair-2:#3F4D66;     /* stronger border */
  --sky-soft: rgba(43, 108, 255, 0.18);   /* focus ring tint stays bluish */
  --beam-soft: rgba(255, 184, 0, 0.16);
  color-scheme: dark;
}

/* --- Base body + scrollbar --- */
html[data-effective-theme="dark"] body {
  background: var(--paper);
  color: var(--ink);
}

/* --- Header glass: dark backdrop (literal rgba doesn't flip) --- */
html[data-effective-theme="dark"] .header {
  background: rgba(11, 18, 32, 0.78) !important;
  border-bottom-color: var(--hair) !important;
}
html[data-effective-theme="dark"] .header.scrolled {
  background: rgba(11, 18, 32, 0.92) !important;
  box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.6);
}
/* Nav, brand text — flipped tokens make these already light. Belt+braces: */
html[data-effective-theme="dark"] .brand,
html[data-effective-theme="dark"] .nav-main a { color: var(--ink); }
html[data-effective-theme="dark"] .nav-main a:hover { color: var(--sky); }

/* --- Buttons: preserve meaningful contrast (these mix tokens + literals) - */
/* btn-primary becomes a light pill with dark text — works naturally as CTA */
/* btn-beam: amber bg — KEEP dark text instead of flipped --ink */
html[data-effective-theme="dark"] .btn-beam {
  color: #0A1628;
}
/* btn-sky: blue bg — KEEP white text instead of flipped --paper */
html[data-effective-theme="dark"] .btn-sky {
  color: #FFFFFF;
}
/* btn-ghost-light: translucent white over dark — keep white text */
html[data-effective-theme="dark"] .btn-ghost-light {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
html[data-effective-theme="dark"] .btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.14);
}
/* btn-outline: lift border so it's visible on dark page */
html[data-effective-theme="dark"] .btn-outline {
  border-color: var(--hair-2);
  color: var(--ink);
}
html[data-effective-theme="dark"] .btn-outline:hover {
  border-color: var(--ink);
}

/* --- Marquee: keep editorial dark band (don't let token flip invert it) - */
html[data-effective-theme="dark"] .marquee {
  background: #050B14;
  color: #FFFFFF;
}
html[data-effective-theme="dark"] .marquee-track span { color: #FFFFFF; }
html[data-effective-theme="dark"] .marquee-track span.b { color: var(--beam); }

/* --- Cards --- */
html[data-effective-theme="dark"] .card,
html[data-effective-theme="dark"] .fac-card,
html[data-effective-theme="dark"] .qa,
html[data-effective-theme="dark"] .event-card,
html[data-effective-theme="dark"] .news-card { background: var(--mist); }
html[data-effective-theme="dark"] .card,
html[data-effective-theme="dark"] .fac-card,
html[data-effective-theme="dark"] .qa { border-color: var(--hair); }
html[data-effective-theme="dark"] .card:hover,
html[data-effective-theme="dark"] .fac-card:hover,
html[data-effective-theme="dark"] .qa:hover { border-color: var(--ink); }
html[data-effective-theme="dark"] .news-card .body h3 { color: var(--ink); }
html[data-effective-theme="dark"] .event-card { border-bottom-color: var(--hair); }

/* News featured card: keep its dark "inverted" character */
html[data-effective-theme="dark"] .news-card.featured {
  background: #050B14;
  color: #FFFFFF;
}
html[data-effective-theme="dark"] .news-card.featured h3 { color: #FFFFFF; }
html[data-effective-theme="dark"] .news-card.featured p { color: rgba(255, 255, 255, 0.7); }
html[data-effective-theme="dark"] .news-card.featured .meta-row { color: rgba(255, 255, 255, 0.5); }

/* News-card image gradients (k1..k6) — slightly mute in dark */
html[data-effective-theme="dark"] .news-card .img.k1,
html[data-effective-theme="dark"] .news-card .img.k2,
html[data-effective-theme="dark"] .news-card .img.k3,
html[data-effective-theme="dark"] .news-card .img.k4,
html[data-effective-theme="dark"] .news-card .img.k5,
html[data-effective-theme="dark"] .news-card .img.k6 { filter: brightness(0.92); }

/* --- Page-hero — the "dark" variant must STAY dark in dark theme too --- */
html[data-effective-theme="dark"] .page-hero {
  border-bottom-color: var(--hair);
}
html[data-effective-theme="dark"] .page-hero.dark {
  background: #050B14;
  color: #FFFFFF;
}
html[data-effective-theme="dark"] .page-hero.dark h1 { color: #FFFFFF; }
html[data-effective-theme="dark"] .page-hero.dark .crumb,
html[data-effective-theme="dark"] .page-hero.dark .crumb a { color: rgba(255, 255, 255, 0.55); }
html[data-effective-theme="dark"] .page-hero.dark .crumb a:hover { color: #FFFFFF; }
html[data-effective-theme="dark"] .page-hero.dark .lead { color: rgba(255, 255, 255, 0.78); }

/* --- Footer: pin to light-mode appearance — the footer is intentionally always
   dark (#0A1628 bg, white text); without these overrides the token flip would
   invert it (white bg, white text → invisible). Values mirror light mode so the
   footer looks identical regardless of theme. --- */
html[data-effective-theme="dark"] .footer { background: #0A1628; color: rgba(255, 255, 255, 0.7); }
html[data-effective-theme="dark"] .footer a { color: rgba(255, 255, 255, 0.7); }
html[data-effective-theme="dark"] .footer a:hover,
html[data-effective-theme="dark"] .footer-brand,
html[data-effective-theme="dark"] .footer-grid .footer-col h4,
html[data-effective-theme="dark"] .footer-grid .footer-col h5,
html[data-effective-theme="dark"] .footer-social h4,
html[data-effective-theme="dark"] .footer-social h5 { color: #FFFFFF; }
html[data-effective-theme="dark"] .footer-bottom { border-top-color: rgba(255, 255, 255, 0.1); }
html[data-effective-theme="dark"] .footer-brand-logo { background-color: #FFFFFF; }
html[data-effective-theme="dark"] .footer-cat li a:hover,
html[data-effective-theme="dark"] .footer-social-strip a:hover,
html[data-effective-theme="dark"] .footer-social-grid a:hover { color: #FFFFFF; }
/* Footer category headings (<details><summary>) — base rule uses var(--paper)
   which flips dark in dark theme; pin to white so titles stay visible. */
html[data-effective-theme="dark"] .footer-cat > summary { color: #FFFFFF; }
html[data-effective-theme="dark"] .footer-cat li a { color: rgba(255, 255, 255, 0.7); }

/* --- Drawer: dark sheet with dark nav links --- */
html[data-effective-theme="dark"] .drawer { background: var(--paper); }
html[data-effective-theme="dark"] .drawer-head,
html[data-effective-theme="dark"] .drawer-foot { border-color: var(--hair); }
html[data-effective-theme="dark"] .drawer-nav a {
  color: var(--ink);
  border-bottom-color: var(--hair);
}
html[data-effective-theme="dark"] .drawer-close { background: var(--mist); color: var(--ink); }
html[data-effective-theme="dark"] .menu-toggle { background: var(--mist); color: var(--ink); }

/* --- Form inputs --- */
html[data-effective-theme="dark"] .input,
html[data-effective-theme="dark"] .select,
html[data-effective-theme="dark"] .textarea,
html[data-effective-theme="dark"] .search-input {
  background: var(--mist);
  border-color: var(--hair-2);
  color: var(--ink);
}
html[data-effective-theme="dark"] .input::placeholder,
html[data-effective-theme="dark"] .textarea::placeholder,
html[data-effective-theme="dark"] .search-input input::placeholder {
  color: var(--slate);
  opacity: 1;
}
html[data-effective-theme="dark"] .select { color-scheme: dark; }
html[data-effective-theme="dark"] .input:focus,
html[data-effective-theme="dark"] .select:focus,
html[data-effective-theme="dark"] .textarea:focus,
html[data-effective-theme="dark"] .search-input:focus-within {
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(43, 108, 255, 0.25);
}
html[data-effective-theme="dark"] .field label { color: var(--stone); }

/* --- Chips --- */
html[data-effective-theme="dark"] .chip {
  background: var(--mist);
  border-color: var(--hair);
  color: var(--stone);
}
html[data-effective-theme="dark"] .chip:hover { border-color: var(--ink); color: var(--ink); }
html[data-effective-theme="dark"] .chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* --- Dropdown menus (nav, lang-switch) --- */
html[data-effective-theme="dark"] .dropdown-menu {
  background: var(--mist);
  border-color: var(--hair);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}
html[data-effective-theme="dark"] .dropdown-menu a:hover { background: var(--mist-2); color: var(--sky); }
html[data-effective-theme="dark"] .lang-switch .lang-menu {
  background: var(--mist);
  border-color: var(--hair);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}
html[data-effective-theme="dark"] .lang-switch .lang-menu [role="option"] { color: var(--ink); }
html[data-effective-theme="dark"] .lang-switch .lang-menu [role="option"]:hover { background: var(--mist-2); }
html[data-effective-theme="dark"] .lang-switch .lang-menu [role="option"] .lang-name { color: var(--ink); }
html[data-effective-theme="dark"] .lang-switch .lang-menu [role="option"] .lang-code { color: var(--stone); }

/* --- Badges --- */
html[data-effective-theme="dark"] .badge { background: var(--mist-2); color: var(--ink); }
html[data-effective-theme="dark"] .badge.outline { border-color: var(--hair); color: var(--stone); }
html[data-effective-theme="dark"] .badge.dark { background: #FFFFFF; color: #0A1628; }
/* .badge.beam / .badge.sky use literal warm/light colors — leave as-is */

/* --- Section eyebrows / num markers --- */
html[data-effective-theme="dark"] .sec-head { border-bottom-color: var(--hair); }
html[data-effective-theme="dark"] .sec-head-num { color: var(--stone); }
html[data-effective-theme="dark"] .sec-head-num span { color: var(--ink); }
html[data-effective-theme="dark"] .eyebrow.beam { color: var(--ink); }

/* --- Stats / dividers / quotes --- */
html[data-effective-theme="dark"] .stat-num { color: var(--ink); }
html[data-effective-theme="dark"] .stat-lbl { color: var(--stone); }
html[data-effective-theme="dark"] .divider { background: var(--hair); }
html[data-effective-theme="dark"] hr { border-color: var(--hair); }

/* --- A11y panel — re-skin so it's readable when opened on dark page --- */
html[data-effective-theme="dark"] .a11y-panel {
  background: var(--mist);
  color: var(--ink);
  border-color: var(--hair);
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.6);
}
html[data-effective-theme="dark"] .a11y-panel-head { border-bottom-color: var(--hair); }
html[data-effective-theme="dark"] .a11y-panel-title { color: var(--ink); }
html[data-effective-theme="dark"] .a11y-panel-close { background: var(--mist-2); color: var(--ink); }
html[data-effective-theme="dark"] .a11y-panel-close:hover { background: var(--hair); }
html[data-effective-theme="dark"] .a11y-label { color: var(--stone); }
html[data-effective-theme="dark"] .a11y-row { background: var(--mist-2); }
html[data-effective-theme="dark"] .a11y-row > button { color: var(--stone); }
html[data-effective-theme="dark"] .a11y-row > button:hover { background: var(--hair); color: var(--ink); }
html[data-effective-theme="dark"] .a11y-row > button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
html[data-effective-theme="dark"] .a11y-check { background: var(--mist-2); color: var(--ink); }
html[data-effective-theme="dark"] .a11y-check input { accent-color: var(--sky); }
html[data-effective-theme="dark"] .a11y-reset { color: var(--stone); border-color: var(--hair-2); }

/* --- Misc surfaces frequently used on the homepage --- */
html[data-effective-theme="dark"] .hero { background: var(--paper); }
html[data-effective-theme="dark"] .hero-aside p { color: var(--stone); }
html[data-effective-theme="dark"] .hero-title .em { color: var(--sky); }
html[data-effective-theme="dark"] .hero-title { color: var(--ink); }
/* cinematic homepage hero is intentionally dark and uses literal colors —
   it already reads correctly on dark, no override needed. */
html[data-effective-theme="dark"] section[style*="background: var(--mist)"] { /* sections that opted into mist bg */
  /* nothing — token now resolves to dark, automatically correct */
}

/* --- Homepage editorial dark blocks ---
   These components hard-code an intrinsically dark band via var(--ink)/var(--paper).
   In dark mode the tokens flip, inverting them to light bands with dark text —
   wrong intent. Pin literal dark surface + white text so they stay editorial. */

/* Header "Підтримати" button — amber bg keeps dark text in dark theme */
html[data-effective-theme="dark"] .header .nav-cta-support,
html[data-effective-theme="dark"] .header .btn.btn-beam {
  color: #0A1628 !important;
}

/* News strip — editorial dark band, --ink flip would invert it */
html[data-effective-theme="dark"] .news-strip {
  background: #050B14;
  color: #FFFFFF;
}
html[data-effective-theme="dark"] .news-strip-link { color: #FFFFFF; }

/* Slider slide heading — overlay caption sits on a dark photo gradient */
html[data-effective-theme="dark"] .slider-slide .content h3 { color: #FFFFFF; }

/* Slider slide ".dark" badge — translucent-white chip needs white text on dark gradient */
html[data-effective-theme="dark"] .slider-slide .content .b-tag.dark { color: #FFFFFF; }

/* Hero/featured gallery captions sit on photo gradients — keep white */
html[data-effective-theme="dark"] .gallery .ph .cap { color: #FFFFFF; }

/* Dotted background pattern — dots barely visible on dark; lift to white-tint */
html[data-effective-theme="dark"] .bg-dots {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='1.5' cy='1.5' r='1.2' fill='%232A3447'/></svg>");
}

/* Defence Tech band */
html[data-effective-theme="dark"] .defence-tech-section {
  background: #050B14;
  color: #FFFFFF;
}
html[data-effective-theme="dark"] .defence-tech-section h1,
html[data-effective-theme="dark"] .defence-tech-section h2,
html[data-effective-theme="dark"] .defence-tech-section h3,
html[data-effective-theme="dark"] .defence-tech-section h4 { color: #FFFFFF; }
html[data-effective-theme="dark"] .defence-tech-section p { color: rgba(255,255,255,0.82); }

/* "КАІ у цифрах" stats band */
html[data-effective-theme="dark"] .home-stats {
  background: #050B14 !important;
  color: #FFFFFF !important;
}
html[data-effective-theme="dark"] .home-stats h2,
html[data-effective-theme="dark"] .home-stats h3,
html[data-effective-theme="dark"] .home-stats .stat-num,
html[data-effective-theme="dark"] .home-stats .stat-lbl { color: #FFFFFF !important; }
/* Pinned-paper paragraphs near eyebrow.paper — inline color:var(--paper) flips dark */
html[data-effective-theme="dark"] .home-stats p { color: #FFFFFF !important; }

/* "Відповідальний університет" (home-esg) — gradient already dark, but token-driven headings flip */
html[data-effective-theme="dark"] .home-esg-head h2,
html[data-effective-theme="dark"] .home-esg-card h3 { color: #FFFFFF; }

/* CTA banner band */
html[data-effective-theme="dark"] .cta-banner {
  background: #050B14;
  color: #FFFFFF;
}
html[data-effective-theme="dark"] .cta-banner h2 { color: #FFFFFF; }
html[data-effective-theme="dark"] .cta-banner p { color: rgba(255,255,255,0.7); }

/* --- admissions.html — program level badges + tuition "Important" notice */
html[data-effective-theme="dark"] .prog .lvl.b { color: #FFFFFF; }
html[data-effective-theme="dark"] .adm-tuition-note p,
html[data-effective-theme="dark"] .adm-tuition-note p strong { color: #FFFFFF !important; }

/* High contrast — pure black/white + underlined links + thick focus */
html[data-contrast="high"] {
  --ink: #000000;
  --ink-90: #000000;
  --paper: #FFFFFF;
  --mist: #FFFFFF;
  --mist-2: #F2F2F2;
  --stone: #000000;
  --slate: #2B2B2B;
  --hair: #000000;
  --hair-2: #000000;
  --sky: #0033CC;
  --sky-deep: #001A66;
  --beam: #B86F00;
}
html[data-contrast="high"] body { background: #FFFFFF !important; color: #000000 !important; }
html[data-contrast="high"] a:not(.btn):not(.brand) { text-decoration: underline !important; text-underline-offset: 3px; }
html[data-contrast="high"] :focus-visible { outline: 3px solid #000 !important; outline-offset: 3px !important; }
html[data-contrast="high"] .btn,
html[data-contrast="high"] button,
html[data-contrast="high"] .chip { border: 2px solid currentColor !important; }
html[data-contrast="high"] .header,
html[data-contrast="high"] .footer { background: #FFFFFF !important; color: #000000 !important; border-color: #000 !important; }
html[data-contrast="high"] .footer a { color: #000000 !important; }

/* Forced motion-off (user toggle from panel — works even when OS not set) */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
html[data-motion="reduced"] .marquee-track { animation: none !important; }
html[data-motion="reduced"] .reveal { opacity: 1 !important; transform: none !important; }

/* Pause-all sliders (panel toggle) */
html[data-autoplay="off"] [data-slider] *,
html[data-autoplay="off"] .hero-photo * { animation-play-state: paused !important; }

/* ==========================================================================
   Tap target minimums — interactive elements ≥ 44×44 on touch devices
   ========================================================================== */
@media (pointer: coarse) {
  .btn,
  .btn-sm,
  .chip,
  .menu-toggle,
  .drawer-close,
  .a11y-panel-close,
  .nav-main a,
  .drawer-nav a,
  .footer a {
    min-height: 44px;
  }
  .btn,
  .btn-sm,
  .chip,
  .menu-toggle,
  .drawer-close,
  .a11y-panel-close { min-width: 44px; }
}