/*
 * Темна тема, як на zp.edu.ua.
 *
 * Тему ставить на <html> атрибутом data-theme вбудований скрипт у <head>
 * (inc/enqueue.php), а кнопка в шапці (template-parts/theme-toggle.php,
 * assets/js/theme-toggle.js) її перемикає. Кольори темної теми — семантичні
 * токени у variables.css (--color-bg-primary, --color-text-heading …); там же
 * на крок глибшають дві фірмові сині, тож шапка, підвал і темні секції
 * темнішають самі.
 *
 * Більшість правил теми задає кольори прямо (білий фон, темно-синій текст),
 * тому тут вони перевизначені для темної теми. Файл підключається останнім,
 * а префікс html[data-theme="dark"] і так піднімає специфічність, тож
 * !important потрібен лише там, де його має саме правило теми або вбудований
 * style="".
 *
 * Загальні правила для тегів (h1, p, a …) обгорнуто в :where(), щоб вони мали
 * специфічність звичайного селектора тегу: так вони замінюють typography.css,
 * але не перебивають класи секцій, у яких колір свій (білий текст на темно-
 * синьому лишається білим).
 */


/* ═════════════════════════════════════════════════════════════════════
   Перемикання теми
   ═════════════════════════════════════════════════════════════════════ */

/*
 * Поки висить клас (його ставить theme-toggle.js), сторінка стрибає одразу на
 * нові кольори: інакше кожен компонент із переходом кольору на hover згасав би
 * у власному темпі, і перемикання виглядало б розмазаним. Анімується лише
 * іконка самої кнопки.
 *
 * Де браузер уміє view transitions, стара сторінка розчиняється в нову, як
 * у macOS та iOS при зміні оформлення: третина секунди на кривій Apple.
 */
html.theme-switching *:not(.theme-toggle__icon, .theme-toggle__icon *),
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

html.theme-switching::view-transition-old(root),
html.theme-switching::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}


/* ═════════════════════════════════════════════════════════════════════
   Кнопка теми в шапці
   ═════════════════════════════════════════════════════════════════════ */

/* Такий самий квадрат 44px, як у кнопки пошуку поруч: це мінімальна зона дотику. */
.theme-toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s;
}

.theme-toggle__icon {
  width: 24px;
  height: 24px;
  overflow: visible;
}

/*
 * Іконка показує тему, на яку кнопка перемкне, як на YouTube і GitHub: місяць
 * на світлій темі, сонце на темній. При перемиканні одна згасає, а друга
 * з'являється з легким поворотом і масштабом — спокійно, в такт розчиненню
 * сторінки.
 */
.theme-toggle__moon,
.theme-toggle__sun {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.35s cubic-bezier(0.42, 0, 0.58, 1),
    transform 0.35s cubic-bezier(0.42, 0, 0.58, 1);
}

.theme-toggle__sun {
  opacity: 0;
  transform: rotate(-30deg) scale(0.8);
}

html[data-theme="dark"] .theme-toggle__moon {
  opacity: 0;
  transform: rotate(30deg) scale(0.8);
}

html[data-theme="dark"] .theme-toggle__sun {
  opacity: 1;
  transform: none;
}

/* Миттєвий відгук на натискання, як у кнопки пошуку. */
.theme-toggle:active {
  transform: scale(0.92);
  transition-duration: 80ms;
}

/* Лише там, де є чим наводити: на телефоні дотик лишив би кнопку збільшеною. */
@media (hover: hover) {
  .theme-toggle:hover {
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__icon * {
    transition: none !important;
  }
}

/* На найвужчих екранах шапка тісна: кнопка стискається до 40px, як і проміжки (header.css). */
@media (max-width: 360px) {
  .theme-toggle {
    width: 40px;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   Сторінка і текст
   ═════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/*
 * Світлий текст на темному здається жирнішим за той самий темний на світлому,
 * а субпіксельне згладжування macOS це підсилює; згладжування у відтінках
 * сірого лишає вагу такою, як задумано (Windows це ігнорує).
 */
html[data-theme="dark"] body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Фокус: світло-синій контур читається на темному краще за темний. Шапка, підвал
   і темні секції лишають свій жовтий (base.css) — у них специфічність вища. */
:where(html[data-theme="dark"]) :focus-visible {
  outline-color: var(--color-accent) !important;
}

/*
 * Загальні кольори тегів. Макет телефона в секції Vibe — знімок світлого
 * Instagram, тож його текст лишається темним, як у світлій темі.
 */

:where(html[data-theme="dark"]) :is(h1, h2, h3, h4, h5, h6):where(:not(.device-mockup-container *)),
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .section-title {
  color: var(--color-text-heading);
}

:where(html[data-theme="dark"]) p:where(:not(.device-mockup-container *)) {
  color: var(--color-text-primary);
}

:where(html[data-theme="dark"]) a:where(:not(.device-mockup-container *)) {
  color: var(--color-link);
}

@media (hover: hover) {
  :where(html[data-theme="dark"]) a:where(:not(.device-mockup-container *)):hover {
    color: var(--color-link-hover);
  }
}

:where(html[data-theme="dark"]) :is(strong, b):where(:not(.device-mockup-container *)) {
  color: var(--color-text-heading);
}

:where(html[data-theme="dark"]) ul li::marker {
  color: var(--color-link);
}

:where(html[data-theme="dark"]) ol li::marker {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] .device-mockup-container {
  color: var(--color-grey-400);
}

html[data-theme="dark"] blockquote {
  background-color: var(--color-bg-secondary);
  border-left-color: var(--color-link);
  color: var(--color-text-heading);
}

html[data-theme="dark"] blockquote cite,
html[data-theme="dark"] blockquote footer {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .wp-block-separator {
  border-color: var(--color-border);
  color: var(--color-border);
}

html[data-theme="dark"] .page-subtitle {
  color: var(--color-text-secondary);
}

/* Хлібні крихти */
html[data-theme="dark"] .pk-breadcrumbs {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] .pk-breadcrumbs a {
  color: var(--color-text-primary);
}

@media (hover: hover) {
  html[data-theme="dark"] .pk-breadcrumbs a:hover {
    color: var(--color-link-hover);
  }
}

html[data-theme="dark"] .pk-breadcrumbs .breadcrumb_last {
  color: var(--color-text-heading);
}


/* ═════════════════════════════════════════════════════════════════════
   Кнопки (components.css)
   ═════════════════════════════════════════════════════════════════════ */

/* Чорний контур на темній сторінці зникає: контур і текст беруть колір тексту. */
html[data-theme="dark"] .btn-outline {
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

@media (hover: hover) {
  html[data-theme="dark"] .btn-outline:hover {
    background-color: var(--color-text-primary);
    color: var(--color-bg-primary);
  }
}

html[data-theme="dark"] .btn-arrow {
  color: var(--color-link);
}

html[data-theme="dark"] .btn-primary {
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35);
}

@media (hover: hover) {
  html[data-theme="dark"] .btn-primary:hover {
    background-color: var(--color-text-heading);
    border-color: var(--color-text-heading);
    color: var(--color-blue-200);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
  }
}


/* ═════════════════════════════════════════════════════════════════════
   Шапка: смуга вже темно-синя (і на крок глибша в темній темі),
   світле тут лише випадне меню на десктопі
   ═════════════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {
  html[data-theme="dark"] .dropdown-menu {
    background: var(--color-surface-card);
    border-color: var(--color-border-strong);
  }

  html[data-theme="dark"] .dropdown-menu::before {
    background: var(--color-border-strong);
  }

  html[data-theme="dark"] .dropdown-menu li {
    border-bottom-color: var(--color-border);
  }

  html[data-theme="dark"] .dropdown-menu a {
    color: var(--color-text-primary);
  }

  html[data-theme="dark"] .dropdown-menu a::before {
    background-color: var(--color-blue-100);
  }

  @media (hover: hover) {
    html[data-theme="dark"] .dropdown-menu li:hover > a {
      color: var(--color-white);
    }
  }
}


/* ═════════════════════════════════════════════════════════════════════
   Вміст сторінок: таблиці, акордеони, блоки редактора
   ═════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .wp-block-table {
  background: var(--color-surface-card);
}

html[data-theme="dark"] .wp-block-table th {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-heading);
  border-color: var(--color-border);
  border-bottom-color: var(--color-link);
}

html[data-theme="dark"] .wp-block-table td {
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

html[data-theme="dark"] .wp-block-table td[rowspan] {
  background-color: var(--color-surface-card);
}

html[data-theme="dark"] .wp-block-table tbody tr:nth-child(even) td:not([rowspan]) {
  background-color: var(--color-bg-secondary);
}

@media (hover: hover) {
  html[data-theme="dark"] .wp-block-table tbody tr:hover td:not([rowspan]) {
    background-color: rgba(var(--color-ink--rgb), 0.04);
  }
}

html[data-theme="dark"] .wp-block-table td a {
  color: var(--color-link);
}

@media (hover: hover) {
  html[data-theme="dark"] .wp-block-table td a:hover {
    color: var(--color-link-hover);
  }
}

html[data-theme="dark"] .wp-block-table::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

html[data-theme="dark"] .wp-block-table::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
}

/* Таблиці без блоку редактора (вставлені HTML-ом) */
html[data-theme="dark"] .pk-page-content table:not(.wp-block-table table) :is(th, td) {
  border-color: var(--color-border);
}

/* Акордеони (details/summary) */
html[data-theme="dark"] .pk-content-formatting details summary,
html[data-theme="dark"] details.wp-block-details summary {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-heading);
  border-left-color: var(--color-link);
}

html[data-theme="dark"] .pk-content-formatting details summary::after,
html[data-theme="dark"] details.wp-block-details summary::after {
  border-color: var(--color-text-heading);
}

@media (hover: hover) {
  html[data-theme="dark"] .pk-content-formatting details summary:hover,
  html[data-theme="dark"] details.wp-block-details summary:hover {
    background-color: var(--color-bg-tertiary);
    border-left-color: var(--color-link-hover);
  }
}

html[data-theme="dark"] .pk-content-formatting details[open],
html[data-theme="dark"] details.wp-block-details[open] {
  border-bottom-color: var(--color-border);
}

/*
 * Кольори, вибрані в редакторі. Білий і світло-сірий фони блоків на темній
 * сторінці стають поверхнею картки, а чорний і темно-синій текст — світлим;
 * решта кольорів (жовтий, синій) лишається як є, бо на них свій контраст.
 */
html[data-theme="dark"] .pk-page-content :is(.has-white-background-color, .has-base-background-color, .has-light-gray-background-color, .has-cyan-bluish-gray-background-color) {
  background-color: var(--color-surface-card) !important;
}

html[data-theme="dark"] .pk-page-content :is(.has-black-color, .has-contrast-color) {
  color: var(--color-text-primary) !important;
}

/*
 * Кольори, вписані у вміст сторінок вручну (style="" у HTML-блоках). Їх
 * знайдено перебором усіх сторінок: темний текст, світлі фони й рамки карток,
 * темно-сині заголовки й смужки. Вбудований стиль перебиває будь-який
 * селектор, тож тут лише !important. Головну це не зачіпає: там style="" лише
 * в макеті телефона, який лишається світлим.
 *
 * Кожен колір шукається у двох записах: як його написав автор (#333) і як
 * браузер переписує атрибут, коли скрипт змінює style елемента (так робить,
 * наприклад, збільшення тексту в панелі доступності): rgb(51, 51, 51).
 */
html[data-theme="dark"] body:not(.home) .site-main :is(
  [style*="color:#111" i], [style*="color: #111" i], [style*="color: rgb(17, 17, 17)"],
  [style*="color:#333" i], [style*="color: #333" i], [style*="color: rgb(51, 51, 51)"],
  [style*="color:#334155" i], [style*="color: #334155" i], [style*="color: rgb(51, 65, 85)"],
  [style*="color:#475569" i], [style*="color: #475569" i], [style*="color: rgb(71, 85, 105)"]
) {
  color: var(--color-text-primary) !important;
}

html[data-theme="dark"] body:not(.home) .site-main :is(
  [style*="color:#555" i], [style*="color: #555" i], [style*="color: rgb(85, 85, 85)"],
  [style*="color:#64748b" i], [style*="color: #64748b" i], [style*="color: rgb(100, 116, 139)"],
  [style*="color:#646970" i], [style*="color: #646970" i], [style*="color: rgb(100, 105, 112)"]
) {
  color: var(--color-text-secondary) !important;
}

html[data-theme="dark"] body:not(.home) .site-main :is(
  [style*="color:#16295b" i], [style*="color: #16295b" i], [style*="color: rgb(22, 41, 91)"],
  [style*="color:var(--color-blue-200)"], [style*="color: var(--color-blue-200)"]
):not([style*="background-color"]) {
  color: var(--color-text-heading) !important;
}

html[data-theme="dark"] body:not(.home) .site-main :is(
  [style*="background:#fff" i], [style*="background: #fff" i],
  [style*="background-color:#fff" i], [style*="background-color: #fff" i],
  [style*="background: rgb(255, 255, 255)"], [style*="background-color: rgb(255, 255, 255)"]
):not(iframe) {
  background: var(--color-surface-card) !important;
}

html[data-theme="dark"] body:not(.home) .site-main :is(
  [style*="#f8fafc" i], [style*="rgb(248, 250, 252)"],
  [style*="#f8f9fa" i], [style*="rgb(248, 249, 250)"],
  [style*="#f0f4fa" i], [style*="rgb(240, 244, 250)"]
) {
  background: var(--color-bg-secondary) !important;
}

html[data-theme="dark"] body:not(.home) .site-main :is(
  [style*="#e2e8f0" i], [style*="rgb(226, 232, 240)"],
  [style*="#c5d0e6" i], [style*="rgb(197, 208, 230)"],
  [style*="#e0e0e0" i], [style*="rgb(224, 224, 224)"]
) {
  border-color: var(--color-border) !important;
}

/* Темно-сині смужки й рамки на темній сторінці зникли б — вони беруть світліший синій. */
html[data-theme="dark"] body:not(.home) .site-main :is(
  [style*="solid #16295b" i], [style*="solid rgb(22, 41, 91)"], [style*="solid var(--color-blue-200)"]
) {
  border-color: var(--color-blue-100) !important;
}

/* Жовте попередження в стилі Bootstrap: на темному — приглушена жовта пляма зі світлим текстом.
   Подвійний атрибут перебиває правило білого фону вище, яке теж ловить «#fff3cd». */
html[data-theme="dark"] body:not(.home) .site-main :is([style*="#fff3cd" i], [style*="rgb(255, 243, 205)"])[style] {
  background: rgba(255, 193, 7, 0.12) !important;
}

html[data-theme="dark"] body:not(.home) .site-main :is([style*="#856404" i], [style*="rgb(133, 100, 4)"]) {
  color: #f0c36d !important;
}


/* ═════════════════════════════════════════════════════════════════════
   Головна: загальне (global.css)
   ═════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .section-light {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

html[data-theme="dark"] .section-header h2 {
  color: var(--color-text-heading);
}

html[data-theme="dark"] .label-tag {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] .section-dark .label-tag,
html[data-theme="dark"] .section-black .label-tag {
  color: var(--color-grey-100);
}

html[data-theme="dark"] .slider-btn {
  background: var(--color-surface-card);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

@media (hover: hover) {
  html[data-theme="dark"] .slider-btn:hover {
    background: var(--color-blue-100);
    border-color: var(--color-blue-100);
    color: var(--color-white);
  }
}

/* Підзаголовок секції (dual-life.css) — сірий #464646, на темному не читається. */
html[data-theme="dark"] .section-desc {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] .typing-cursor::after {
  color: var(--color-accent);
}

html[data-theme="dark"] .scroll-indicator-orbit {
  color: var(--color-text-secondary);
}


/* ═════════════════════════════════════════════════════════════════════
   Головна: hero (hero.css редагується окремо, тож перевизначення тут)
   ═════════════════════════════════════════════════════════════════════ */

/* Hero і так темно-синій; світлі на телефонах лише плитки посилань під фото. */
@media (max-width: 1024px) {
  html[data-theme="dark"] .hero-strip {
    background: var(--color-border);
  }

  html[data-theme="dark"] .hero-strip__item {
    background: var(--color-surface-card);
    color: var(--color-text-heading);
  }

  html[data-theme="dark"] .hero-strip__item:active {
    background: var(--color-bg-tertiary);
  }

  html[data-theme="dark"] .hero-strip__item:focus-visible {
    outline-color: var(--color-accent);
  }

  /* плитка калькулятора лишається жовтою кнопкою й у темній темі */
  html[data-theme="dark"] .hero-strip .hero-strip__item--accent {
    background: var(--color-highlight);
    color: #16295b;
  }

  html[data-theme="dark"] .hero-strip .hero-strip__item--accent:active {
    background: #f5b33c;
  }
}

@media (max-width: 1024px) and (hover: hover) {
  html[data-theme="dark"] .hero-strip__item:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-link-hover);
  }

  html[data-theme="dark"] .hero-strip .hero-strip__item--accent:hover {
    background: #f5b33c;
    color: #16295b;
  }
}

html[data-theme="dark"] .scroll-icon {
  color: var(--color-text-secondary);
}


/* ═════════════════════════════════════════════════════════════════════
   Головна: новини і Telegram (section-news.css, telegram-feed.css,
   картка «Всі новини» з вбудованими style="" у functions.php)
   ═════════════════════════════════════════════════════════════════════ */

/* На десктопі секція новин стоїть на тлі сторінки; до 1024px вона темно-синя
   за задумом і своїх кольорів не міняє. */
@media (min-width: 1025px) {
  html[data-theme="dark"] .pk-news-section .news-slider__title {
    color: var(--color-text-heading) !important;
  }

  html[data-theme="dark"] .pk-news-section .news-slider__description {
    color: var(--color-text-secondary) !important;
  }

  html[data-theme="dark"]:not(.v-mobile) .pk-news-section .news-slider__item:hover .news-slider__title a {
    color: var(--color-link-hover) !important;
  }

  html[data-theme="dark"] .news-header-link {
    color: var(--color-text-secondary);
  }

  html[data-theme="dark"]:not(.v-mobile) .news-header-link:hover {
    color: var(--color-text-heading);
  }

  html[data-theme="dark"] .news-mode {
    border-color: var(--color-border-strong);
  }

  html[data-theme="dark"] .news-mode__btn {
    color: var(--color-text-secondary);
  }

  html[data-theme="dark"] .news-mode__btn.is-active {
    color: var(--color-white);
  }

  @media (hover: hover) {
    html[data-theme="dark"] .news-mode__btn:not(.is-active):hover {
      color: var(--color-text-heading);
    }
  }

  html[data-theme="dark"] .news-mode__indicator,
  html[data-theme="dark"] .news-mode:not(.has-indicator) .news-mode__btn.is-active {
    background: var(--color-blue-100);
  }

  html[data-theme="dark"] .tg-more-card {
    border-color: var(--color-border-strong);
    color: var(--color-text-heading);
  }

  @media (hover: hover) {
    html[data-theme="dark"] .tg-more-card:hover {
      background: var(--color-blue-100);
      border-color: var(--color-blue-100);
      color: var(--color-white);
    }
  }

  html[data-theme="dark"] .tg-card__views {
    border-left-color: var(--color-border-strong);
  }
}

html[data-theme="dark"] .news__title {
  color: var(--color-text-heading);
}

html[data-theme="dark"] .news-slider__badge {
  background: rgba(var(--color-bg-primary--rgb), 0.85);
  color: var(--color-text-primary);
}

html[data-theme="dark"] .news-slider__description {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] .news-section-separator {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 15%, rgba(255, 255, 255, 0.12) 85%, transparent);
}

html[data-theme="dark"] .news-slider.is-loading :is(.news-slider__img-box, .news-slider__title, .news-slider__description)::after {
  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%);
}

html[data-theme="dark"] .tg-slider .news-slider__img {
  background: var(--color-bg-tertiary);
}

/* Картка «Всі новини / Всі події»: кольори в style="", тож лише з !important. */
html[data-theme="dark"] .news-more-card,
html[data-theme="dark"] .news-more-card-link {
  background: var(--color-surface-card) !important;
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .news-more-card > div {
  background-color: var(--color-border) !important;
}

html[data-theme="dark"] .news-more-card-text {
  color: var(--color-text-heading) !important;
}

html[data-theme="dark"] .news-more-card-link:hover,
html[data-theme="dark"] .news-more-card-link:focus-visible {
  background: var(--color-bg-tertiary) !important;
}

@media (hover: hover) {
  html[data-theme="dark"] .news-more-card-link:hover .news-more-card-text {
    color: var(--color-link-hover) !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════
   Головна: секції
   ═════════════════════════════════════════════════════════════════════ */

/* Управління (governance.css) */
html[data-theme="dark"] .gov-lead {
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

html[data-theme="dark"] .gov-list li {
  color: var(--color-text-heading);
}

html[data-theme="dark"] .gov-slider .swiper-slide img {
  background-color: var(--color-bg-tertiary);
}

html[data-theme="dark"] .gov-controls {
  background: var(--color-bg-primary);
}

@media (hover: hover) {
  html[data-theme="dark"] .gov-controls .slider-btn:hover {
    background: var(--color-blue-100);
  }
}

/* Мобільність (mobility.css): білі картки на темно-синій секції */
html[data-theme="dark"] .mob-card {
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

@media (hover: hover) {
  html[data-theme="dark"] .mob-card:hover {
    color: var(--color-text-primary);
  }
}

html[data-theme="dark"] .mob-card h3 {
  color: var(--color-text-heading);
}

html[data-theme="dark"] .mob-card p {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] .mob-icon {
  background-color: var(--color-blue-100);
}

/* Випускники (alumni.css) */
html[data-theme="dark"] .alumni-card.compact {
  background: var(--color-surface-card);
  border-color: var(--color-border);
}

@media (hover: hover) {
  html[data-theme="dark"] .alumni-card.compact:hover {
    border-color: var(--color-border-strong);
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35);
  }
}

html[data-theme="dark"] .alumni-card.compact .alumni-photo {
  border-bottom-color: var(--color-border);
  background-color: var(--color-bg-tertiary);
}

html[data-theme="dark"] .alumni-card.compact .alumni-info {
  background: var(--color-bg-secondary);
}

html[data-theme="dark"] .alumni-card.compact h3 {
  color: var(--color-text-heading);
}

html[data-theme="dark"] .alumni-card.compact .alumni-role {
  color: var(--color-link);
}

html[data-theme="dark"] .alumni-footer {
  border-top-color: var(--color-border);
  background-color: var(--color-surface-card);
}

html[data-theme="dark"] .alumni-spec-icon,
html[data-theme="dark"] .alumni-spec {
  color: var(--color-text-secondary);
}

@media (hover: hover) {
  html[data-theme="dark"] .alumni-card.compact:hover .alumni-spec-icon {
    color: var(--color-text-heading);
  }
}

/* Дуальна освіта (dual-info.css) */
html[data-theme="dark"] .dual-def-box {
  border-color: var(--color-border);
}

html[data-theme="dark"] .dual-def-box p,
html[data-theme="dark"] .dual-benefit-card p {
  color: var(--color-text-primary);
}

html[data-theme="dark"] .dual-benefit-card {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}

html[data-theme="dark"] .benefit-icon {
  background-color: var(--color-surface-card);
  border-color: var(--color-border-strong);
  color: var(--color-text-heading);
}

@media (hover: hover) {
  html[data-theme="dark"] .dual-benefit-card:hover {
    background: var(--color-surface-card);
    border-color: var(--color-border-strong);
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35);
  }

  html[data-theme="dark"] .dual-benefit-card:hover .benefit-icon {
    background-color: var(--color-blue-100);
    border-color: var(--color-blue-100);
    color: var(--color-white);
  }
}

/*
 * Vibe (vibe.css). Макет телефона — знімок світлого інтерфейсу Instagram,
 * тож він навмисно лишається світлим, як справжній телефон у світлому режимі.
 */
html[data-theme="dark"] .vibe-lead {
  color: var(--color-text-heading);
  border-color: var(--color-border);
}

html[data-theme="dark"] .vibe-features li {
  background: var(--color-surface-card);
  border-color: var(--color-border);
}

@media (hover: hover) {
  html[data-theme="dark"] .vibe-features li:hover {
    border-color: var(--color-border-strong);
  }
}

html[data-theme="dark"] .feat-icon,
html[data-theme="dark"] .feat-text strong {
  color: var(--color-text-heading);
}

html[data-theme="dark"] .feat-text p {
  color: var(--color-text-secondary);
}

/* Стипендії (scholarship.css) */
html[data-theme="dark"] .section-scholarships {
  background-color: var(--color-bg-secondary);
}

html[data-theme="dark"] .scholarships-bg-deco {
  color: var(--color-text-heading);
}

html[data-theme="dark"] .scholar-card {
  background: var(--color-surface-card);
  border-color: var(--color-border);
}

@media (hover: hover) {
  html[data-theme="dark"] .scholar-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }
}

html[data-theme="dark"] .scholar-icon,
html[data-theme="dark"] .card-arrow,
html[data-theme="dark"] .minimal-video-btn,
html[data-theme="dark"] .minimal-video-btn__icon {
  color: var(--color-text-heading);
}

@media (hover: hover) {
  html[data-theme="dark"] .scholar-card:hover .scholar-icon,
  html[data-theme="dark"] .minimal-video-btn:hover .minimal-video-btn__icon {
    color: var(--color-link-hover);
  }
}

html[data-theme="dark"] .scholar-card h3 {
  color: var(--color-text-heading);
}

html[data-theme="dark"] .scholar-card p {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] .card-badge {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-heading);
}

html[data-theme="dark"] .card-international {
  background: linear-gradient(to right, var(--color-surface-card), var(--color-bg-tertiary));
}

html[data-theme="dark"] .card-increased {
  background-color: var(--color-blue-200);
  border-color: var(--color-blue-100);
}

html[data-theme="dark"] .card-increased h3,
html[data-theme="dark"] .card-increased p {
  color: var(--color-white);
}

html[data-theme="dark"] .card-increased .scholar-icon {
  color: var(--color-white);
}

@media (hover: hover) {
  html[data-theme="dark"] .card-increased:hover .scholar-icon {
    color: var(--color-highlight);
  }
}


/* ═════════════════════════════════════════════════════════════════════
   Підвал і плаваючі кнопки (footer.css редагується окремо)
   ═════════════════════════════════════════════════════════════════════ */

/* Сам підвал темно-синій і глибшає разом із --color-blue-200; світлі тут
   лише бульбашка Telegram і вікно «Етапи вступу». */
html[data-theme="dark"] .tg-side-bubble {
  background: var(--color-surface-card);
  border-color: var(--color-border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .tg-side-bubble::after {
  border-left-color: var(--color-border);
}

html[data-theme="dark"] .tg-side-bubble::before {
  border-left-color: var(--color-surface-card);
}

html[data-theme="dark"] .tg-side-bubble__close {
  color: var(--color-text-secondary);
}

@media (hover: hover) {
  html[data-theme="dark"] .tg-side-bubble__close:hover {
    color: var(--color-text-heading);
  }
}

html[data-theme="dark"] .tg-side-bubble__content p {
  color: var(--color-text-primary);
}

html[data-theme="dark"] .tg-side-bubble__content p strong {
  color: var(--color-text-heading);
}

html[data-theme="dark"] .tg-side-bubble__link {
  background: var(--color-blue-100);
}

@media (max-width: 768px) {
  html[data-theme="dark"] .tg-side-bubble__link {
    background: transparent;
    color: var(--color-link);
  }
}

/* У смузі hero бульбашка відкривається вгору, і хвостик дивиться вниз. */
html[data-theme="dark"] .tg-side-widget.in-strip .tg-side-bubble::after {
  border-color: var(--color-border) transparent transparent transparent;
}

html[data-theme="dark"] .tg-side-widget.in-strip .tg-side-bubble::before {
  border-color: var(--color-surface-card) transparent transparent transparent;
}

html[data-theme="dark"] .tg-side-badge {
  border-color: var(--color-blue-200);
}

/* Вікно «Етапи вступу» вже синє (footer.css) і однакове в обох темах */

html[data-theme="dark"] .footer-video-modal__note {
  background-color: var(--color-bg-secondary);
  border-left-color: var(--color-blue-100);
  color: var(--color-text-primary);
}

html[data-theme="dark"] .footer-video-modal__note strong {
  color: var(--color-text-heading);
}


/* ═════════════════════════════════════════════════════════════════════
   Шаблони сторінок
   ═════════════════════════════════════════════════════════════════════ */

/* Спеціальності (specialties.css): таблиця на десктопі і картки на телефоні.
   Межі й фони в правилах теми з !important, тож і тут так. */
html[data-theme="dark"] .specialties-search .search-icon {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] .specialties-search input {
  background-color: var(--color-surface-card);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  box-shadow: none;
}

html[data-theme="dark"] .specialties-search input::placeholder {
  color: var(--color-text-muted);
}

html[data-theme="dark"] .specialties-search input:focus {
  border-color: var(--color-accent);
}

html[data-theme="dark"] .specialties-page figure.wp-block-table {
  background: var(--color-surface-card) !important;
  box-shadow: none !important;
}

/* Шапка таблиці лишається темно-синьою, як у світлій темі; загальне правило
   для .wp-block-table th вище перебило б її сірим. */
html[data-theme="dark"] .specialties-page th {
  background: var(--color-blue-200);
  color: var(--color-white);
  border-color: var(--color-border-strong) !important;
}

html[data-theme="dark"] .specialties-page td {
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong) !important;
}

@media (hover: hover) {
  html[data-theme="dark"] .specialties-page tbody tr:hover {
    background-color: var(--color-bg-tertiary);
  }
}

@media (hover: hover) {
  html[data-theme="dark"] .specialties-page tbody tr:hover td {
    background: var(--color-bg-tertiary);
  }
}

html[data-theme="dark"] .specialties-page figure.wp-block-table td a {
  color: var(--color-link);
}

@media (hover: hover) {
  html[data-theme="dark"] .specialties-page figure.wp-block-table td a:hover {
    color: var(--color-link-hover);
  }
}

@media (max-width: 900px) {
  html[data-theme="dark"] .specialties-page figure.wp-block-table {
    background: transparent !important;
  }

  html[data-theme="dark"] .specialties-page figure.wp-block-table tr {
    background: var(--color-surface-card) !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
  }

  html[data-theme="dark"] .specialties-page figure.wp-block-table td {
    background: transparent !important;
    color: var(--color-text-primary) !important;
    border-bottom-color: var(--color-border) !important;
  }

  html[data-theme="dark"] .specialties-page figure.wp-block-table td:first-child {
    background: var(--color-blue-200) !important;
    color: var(--color-white) !important;
  }

  html[data-theme="dark"] .specialties-page figure.wp-block-table td[data-label]::before {
    color: var(--color-text-muted) !important;
  }
}

/* Вступні випробування (exams-info.css) */
html[data-theme="dark"] .pk-admission-editable .wp-block-heading,
html[data-theme="dark"] .pk-timeline-title,
html[data-theme="dark"] .pk-phase-title {
  color: var(--color-text-heading);
}

html[data-theme="dark"] :is(.pk-glass-card, .pk-method-item, .pk-calendar-card, .pk-phase-block) {
  background: var(--color-surface-card);
  border-color: var(--color-border);
  box-shadow: none;
}

@media (hover: hover) {
  html[data-theme="dark"] .pk-method-item:hover {
    border-color: var(--color-link);
  }
}

html[data-theme="dark"] .is-active .pk-calendar-card {
  border-color: var(--color-blue-100);
}

html[data-theme="dark"] .pk-doc-list li {
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  box-shadow: none;
}

html[data-theme="dark"] .pk-chips li {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border);
}

html[data-theme="dark"] .pk-timeline-horizontal::before {
  background: var(--color-border);
}

html[data-theme="dark"] .pk-calendar-head {
  background: var(--color-bg-tertiary);
  color: var(--color-text-heading);
}

html[data-theme="dark"] .is-active .pk-calendar-head {
  background: var(--color-blue-100);
  color: var(--color-white);
}

html[data-theme="dark"] .pk-calendar-body {
  color: var(--color-text-primary);
}

html[data-theme="dark"] .pk-timeline-content p {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] .pk-phase-desc {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

/* Хаб (hub.css) */
html[data-theme="dark"] .hub-page {
  background-color: var(--color-bg-primary);
}

html[data-theme="dark"] .hub-marquee__inner {
  color: var(--color-text-heading);
}

html[data-theme="dark"] .hub-title,
html[data-theme="dark"] .hub-card-title {
  color: var(--color-text-heading);
}

html[data-theme="dark"] .hub-description,
html[data-theme="dark"] .hub-card-text {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] .hub-tag {
  background: var(--color-surface-card);
  border-color: var(--color-border);
  color: var(--color-text-heading);
}

html[data-theme="dark"] .hub-card:not(.hub-card--accent) {
  background: var(--color-surface-card);
  border-color: var(--color-border);
  box-shadow: none;
}

@media (hover: hover) {
  html[data-theme="dark"] .hub-card:not(.hub-card--accent):hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  }
}

html[data-theme="dark"] .hub-card-icon {
  color: var(--color-text-heading);
}

html[data-theme="dark"] .hub-card-icon--white,
html[data-theme="dark"] .hub-card--accent .hub-card-title {
  color: var(--color-white);
}

html[data-theme="dark"] .hub-card--accent .hub-card-text {
  color: rgba(255, 255, 255, 0.8);
}

html[data-theme="dark"] .hub-card-arrow {
  color: var(--color-text-muted);
}

@media (hover: hover) {
  html[data-theme="dark"] .hub-card:hover .hub-card-title:not(.hub-card--accent .hub-card-title),
  html[data-theme="dark"] .hub-card:not(.hub-card--accent):hover .hub-card-arrow {
    color: var(--color-link-hover);
  }
}

html[data-theme="dark"] .hub-empty {
  color: var(--color-text-secondary);
}

/* Інфографіка (infographics.css; картки малює infographics.js) */
html[data-theme="dark"] .js-extract-images {
  color: var(--color-text-primary);
}

html[data-theme="dark"] .infographic-card {
  background: var(--color-surface-card);
  box-shadow: none;
}

@media (hover: hover) {
  html[data-theme="dark"] .infographic-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  }
}

html[data-theme="dark"] .infographic-card__img-wrap {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border);
}

@media (hover: hover) {
  html[data-theme="dark"] .infographic-card:hover .infographic-card__img-wrap {
    border-color: var(--color-border-strong);
  }
}

html[data-theme="dark"] .infographic-card__number {
  background: var(--color-blue-100);
}

/* Карта сайту (стилі в самому page-sitemap.php) */
html[data-theme="dark"] .sitemap-list a {
  color: var(--color-text-primary);
}

html[data-theme="dark"] .sitemap-list li.page_item_has_children > a {
  color: var(--color-text-heading);
}

@media (hover: hover) {
  html[data-theme="dark"] .sitemap-list a:hover {
    color: var(--color-link-hover);
  }
}

html[data-theme="dark"] .sitemap-list ul.children {
  border-left-color: var(--color-border-strong);
}

/* 404 */
html[data-theme="dark"] .page-404 {
  background-color: var(--color-bg-primary);
}

html[data-theme="dark"] .page-404__number {
  color: var(--color-text-heading);
}

html[data-theme="dark"] .page-404__title,
html[data-theme="dark"] .party-mode {
  color: var(--color-text-heading);
}

html[data-theme="dark"] .page-404__text {
  color: var(--color-text-secondary);
}

html[data-theme="dark"] .page-404__btn {
  background-color: var(--color-blue-100);
  box-shadow: none;
}

@media (hover: hover) {
  html[data-theme="dark"] .page-404__btn:hover {
    background-color: var(--color-link);
    color: var(--color-bg-primary);
  }
}