/* ============================================================
   theme-light.css — Right of Way Driving School
   Светлая тема. ПИЛОТ: только главная страница.

   Всё внутри файла живёт под html[data-theme="light"], поэтому
   тёмная тема физически не может пострадать. Файл подключается
   последним, после всех остальных таблиц стилей.

   Порядок разделов повторяет порядок секций на главной.
   ============================================================ */

/* ============================================================
   1. База
   ============================================================ */

html[data-theme="light"] body {
  background-color: var(--c-bg);
  color: var(--c-text-2);
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] strong {
  color: var(--c-text-1);
}

html[data-theme="light"] p {
  color: var(--c-text-2);
}

html[data-theme="light"] a {
  color: var(--c-accent);
}

html[data-theme="light"] a:hover {
  color: #006478;
}

/* Инлайновые ссылки в статьях покрашены атрибутом style="color:#00d4ff".
   Инлайн-стиль перебивается только !important — это единственное место
   в файле, где он оправдан. На раскатке инлайны заменим на класс. */
html[data-theme="light"] a[style*="#00d4ff"],
html[data-theme="light"] a[style*="00d4ff"] {
  color: var(--c-accent) !important;
}

/* ============================================================
   2. Дорожный фон — дневная версия
   ============================================================ */

html[data-theme="light"] #road-bg-container {
  background: var(--c-road-sky);
}

html[data-theme="light"] #horizon-glow {
  background: radial-gradient(ellipse at center, var(--c-road-glow) 0%, transparent 70%);
}

/* Асфальт: в тёмной теме полотно прозрачное и видно фон контейнера.
   На светлой даём ему собственный серый цвет, иначе дорога исчезнет. */
html[data-theme="light"] #road-surface {
  background-color: var(--c-road-asphalt);
}

html[data-theme="light"] #vignette {
  background: var(--c-road-vignette);
}

/* ============================================================
   3. Шапка
   ============================================================ */

html[data-theme="light"] .site-header.scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--c-border);
  box-shadow: 0 1px 16px var(--c-shadow-soft);
}

html[data-theme="light"] .site-header .main-nav > ul > li > a:not(.btn-book-now) {
  color: var(--c-text-nav);
}

html[data-theme="light"] .site-header .main-nav > ul > li > a:not(.btn-book-now):hover {
  color: var(--c-text-1);
}

/* Подсветка под пунктом меню: на светлом фоне неоновое свечение
   выглядит грязно, заменяем на аккуратную линию. */
html[data-theme="light"] .site-header .main-nav > ul > li > a:not(.btn-book-now)::before {
  background: none;
}

html[data-theme="light"] .site-header .main-nav > ul > li > a:not(.btn-book-now)::after {
  background: linear-gradient(90deg, transparent 0%, var(--c-accent) 25%, var(--c-accent) 75%, transparent 100%);
}

/* Кнопка Book Online: заливка остаётся насыщенной — контраст считается
   «текст против заливки», поэтому яркий циан тут допустим и нужен. */
html[data-theme="light"] .site-header .main-nav .btn-book-now,
html[data-theme="light"] .btn-book-now-mobile {
  background: linear-gradient(135deg, #00819b, #0077a0);
  color: #ffffff;
}

html[data-theme="light"] .site-header .main-nav .btn-book-now .btn-text,
html[data-theme="light"] .btn-book-now-mobile .btn-text {
  color: #ffffff;
}

html[data-theme="light"] .site-header .main-nav .btn-book-now:hover .btn-text {
  color: #ffffff;
}

/* Выбор языка */
html[data-theme="light"] .nav-lang summary {
  color: var(--c-text-nav);
}

html[data-theme="light"] .nav-lang-menu {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 12px 32px var(--c-shadow);
}

html[data-theme="light"] .nav-lang-menu a {
  color: var(--c-text-2);
}

html[data-theme="light"] .nav-lang-menu a:hover,
html[data-theme="light"] .nav-lang-menu a.is-current {
  color: var(--c-accent);
  background: var(--c-surface-hover);
}

/* Бургер и мобильное меню */
html[data-theme="light"] .burger-menu {
  border-color: var(--c-border-strong);
}

html[data-theme="light"] .burger-icon span {
  background: var(--c-text-1);
}

html[data-theme="light"] .burger-text {
  color: var(--c-text-1);
}

html[data-theme="light"] .mobile-nav-menu {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--c-border);
  box-shadow: 0 16px 40px var(--c-shadow);
}

html[data-theme="light"] .mobile-nav-menu li {
  border-bottom-color: var(--c-border-soft);
}

html[data-theme="light"] .mobile-nav-menu a {
  color: var(--c-text-1);
}

html[data-theme="light"] .mobile-nav-menu a:hover {
  background: var(--c-surface-hover);
}

html[data-theme="light"] .mobile-left-cta {
  color: var(--c-accent);
}

/* ============================================================
   4. Кнопка переключения темы
   ============================================================ */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 12px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(200, 211, 224, 0.9);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
  background: rgba(0, 212, 255, 0.10);
  border-color: rgba(0, 212, 255, 0.35);
  color: #ffffff;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--c-accent, #00d4ff);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Показываем ровно одну иконку: в тёмной теме — солнце (куда переключимся),
   в светлой — луну. Так кнопка сообщает действие, а не текущее состояние. */
html[data-theme="dark"] .theme-toggle .theme-icon-moon,
html[data-theme="light"] .theme-toggle .theme-icon-sun {
  display: none;
}

html[data-theme="light"] .theme-toggle {
  border-color: var(--c-border-strong);
  background: rgba(15, 23, 42, 0.03);
  color: var(--c-text-2);
}

html[data-theme="light"] .theme-toggle:hover {
  background: var(--c-accent-soft);
  border-color: var(--c-border-accent);
  color: var(--c-accent);
}

/* Без JS переключать нечего — кнопку прячем. */
html.no-js .theme-toggle {
  display: none;
}

@media (max-width: 900px) {
  .theme-toggle {
    width: 34px;
    height: 34px;
    margin-left: 8px;
  }
  .theme-toggle svg {
    width: 16px;
    height: 16px;
  }
}

/* ============================================================
   5. Герой и trust-strip
   ============================================================ */

html[data-theme="light"] #row-3d-hero {
  background-color: transparent;
}

html[data-theme="light"] .qs-title,
html[data-theme="light"] .qs-card-title {
  color: var(--c-text-1);
}

html[data-theme="light"] .qs-sub,
html[data-theme="light"] .qs-card-text,
html[data-theme="light"] .qs-note {
  color: var(--c-text-2);
}

html[data-theme="light"] .qs-sub a,
html[data-theme="light"] .qs-note a,
html[data-theme="light"] .qs-card-cta {
  color: var(--c-accent);
}

html[data-theme="light"] .qs-card {
  background: var(--c-surface);
  border-color: var(--c-border);
  box-shadow: 0 6px 24px var(--c-shadow-soft);
}

html[data-theme="light"] .qs-trust {
  background: linear-gradient(180deg, #fffaf0, #ffffff);
  border-color: rgba(140, 108, 37, 0.30);
}

html[data-theme="light"] .qs-trust-value,
html[data-theme="light"] .qs-trust-icon {
  color: var(--c-gold);
}

html[data-theme="light"] .qs-trust-value.qs-stars {
  color: #8a6508;
}

html[data-theme="light"] .qs-trust-label {
  color: var(--c-text-2);
}

html[data-theme="light"] .qs-trust-item {
  border-bottom-color: rgba(140, 108, 37, 0.18);
}

html[data-theme="light"] a.qs-trust-item:hover {
  background: rgba(140, 108, 37, 0.06);
}

html[data-theme="light"] .btn-book {
  background: linear-gradient(90deg, #00819b, #0077a0);
  color: #ffffff;
}

/* Бегущая строка */
html[data-theme="light"] .tm-marquee {
  background: var(--c-surface);
  border-color: var(--c-border);
}

html[data-theme="light"] .tm-list a,
html[data-theme="light"] .tm-list span {
  color: var(--c-text-2);
}

html[data-theme="light"] .tm-list a:hover {
  color: var(--c-accent);
}

/* ============================================================
   6. Секция интерактивных инструментов (#road-test-toolkit)
   ============================================================ */

html[data-theme="light"] .rt-shell {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--c-accent-glow), transparent 58%),
    linear-gradient(180deg, #ffffff, #f7fafd);
  border: 1px solid var(--c-border);
  box-shadow: 0 10px 40px var(--c-shadow-soft);
}

html[data-theme="light"] .rt-shell::before {
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
}

html[data-theme="light"] .rt-glow,
html[data-theme="light"] .rt-grid-lines {
  opacity: 0.35;
}

html[data-theme="light"] .rt-kicker {
  color: var(--c-accent);
}

html[data-theme="light"] .rt-title {
  color: var(--c-text-1);
}

html[data-theme="light"] .rt-lede {
  color: var(--c-text-2);
}

html[data-theme="light"] .rt-tool {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 18px var(--c-shadow-soft);
}

html[data-theme="light"] .rt-tool:hover {
  box-shadow: 0 10px 30px var(--c-shadow);
}

html[data-theme="light"] .rt-tool-body {
  background: var(--c-surface);
}

html[data-theme="light"] .rt-tool-name {
  color: var(--c-text-1);
}

html[data-theme="light"] .rt-tool-text {
  color: var(--c-text-2);
}

html[data-theme="light"] .rt-tool-cta {
  color: var(--c-accent);
}

html[data-theme="light"] .rt-tool-tag {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

html[data-theme="light"] .rt-tool-tag--orange {
  background: rgba(173, 87, 0, 0.10);
  color: var(--c-orange);
}

html[data-theme="light"] .rt-tool-tag--gold {
  background: rgba(140, 108, 37, 0.10);
  color: var(--c-gold);
}

html[data-theme="light"] .rt-hub-link {
  color: var(--c-accent);
  border-color: var(--c-border-accent);
}

html[data-theme="light"] .rt-guides-label {
  color: var(--c-text-3);
}

html[data-theme="light"] .rt-guides a {
  color: var(--c-text-2);
}

html[data-theme="light"] .rt-guides a:hover {
  color: var(--c-accent);
}

/* ---- Тёмные превью как скриншоты ----------------------------------
   Превью инструментов — это тёмные интерфейсы самих тулов. На светлом
   фоне их не перекрашиваем, а оформляем как скриншот приложения:
   тёмная подложка, рамка, скругление, мягкая тень. Читается намеренно.
   -------------------------------------------------------------------- */
html[data-theme="light"] .rt-tool-media {
  background:
    radial-gradient(circle at 50% 35%, rgba(0, 212, 255, 0.08), transparent 48%),
    #0a1220;
  border-bottom: 1px solid var(--c-border);
}

/* Затемняющая шторка внизу превью вела к тёмному телу карточки.
   Теперь тело белое, поэтому шторку убираем — иначе получится грязь. */
html[data-theme="light"] .rt-tool-media::after {
  background: radial-gradient(circle at 72% 24%, rgba(0, 212, 255, 0.10), transparent 32%);
}

html[data-theme="light"] .rt-tool--skill .rt-tool-media::after {
  background: radial-gradient(circle at 72% 24%, rgba(255, 153, 51, 0.12), transparent 34%);
}

html[data-theme="light"] .rt-tool--planner .rt-tool-media::after {
  background: radial-gradient(circle at 72% 24%, rgba(212, 175, 91, 0.12), transparent 34%);
}

/* ============================================================
   7. Premium fleet
   ============================================================ */

html[data-theme="light"] #premium-fleet-v4 .fleet-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 18px var(--c-shadow-soft);
}

html[data-theme="light"] #premium-fleet-v4 .card-content {
  background: none;
}

html[data-theme="light"] #premium-fleet-v4 .card-title {
  color: var(--c-text-1);
}

/* Градиентный текст заголовка: на светлом фоне светлый градиент
   нечитаем, возвращаем сплошной цвет. */
html[data-theme="light"] #premium-fleet-v4 .card-cockpit .card-title {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--c-text-1);
}

html[data-theme="light"] #premium-fleet-v4 .card-desc,
html[data-theme="light"] #premium-fleet-v4 .pf-subtitle {
  color: var(--c-text-2);
}

html[data-theme="light"] #premium-fleet-v4 .card-tag,
html[data-theme="light"] #premium-fleet-v4 .pf-badge {
  color: var(--c-accent);
  background: var(--c-accent-soft);
}

html[data-theme="light"] #premium-fleet-v4 .pf-title {
  color: var(--c-text-1);
}

html[data-theme="light"] #premium-fleet-v4 .card-toggle {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

html[data-theme="light"] #premium-fleet-v4 .card-toggle:hover {
  background: rgba(0, 121, 146, 0.14);
}

/* Фотографии машины светлые сами по себе — тёмная шторка снизу
   нужна была для белого текста. Текст теперь тёмный, шторку ослабляем. */
/* Шторку на фото НЕ ослабляем: поверх снимка лежит белый текст заголовка
   карточки. В первой версии я её убрал и подписи стали нечитаемыми. */

/* ============================================================
   8. Отзывы
   ============================================================ */

html[data-theme="light"] .review-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 18px var(--c-shadow-soft);
}

html[data-theme="light"] .review-card p,
html[data-theme="light"] .review-text {
  color: var(--c-text-2);
}

html[data-theme="light"] .review-name,
html[data-theme="light"] .review-author {
  color: var(--c-text-1);
}

html[data-theme="light"] .review-lightbox {
  background: rgba(15, 23, 42, 0.72);
}

html[data-theme="light"] .review-lightbox-close {
  background: var(--c-surface);
  color: var(--c-text-1);
}

html[data-theme="light"] .reviews-dots button {
  background: var(--c-border-strong);
}

html[data-theme="light"] .reviews-dots button[aria-selected="true"] {
  background: var(--c-accent);
}

/* ============================================================
   9. Local story / карусель / доверие
   ============================================================ */

html[data-theme="light"] .cs-card,
html[data-theme="light"] .hr-card,
html[data-theme="light"] .bridge-card,
html[data-theme="light"] .proof-item,
html[data-theme="light"] .wif-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 18px var(--c-shadow-soft);
}

html[data-theme="light"] .cs-card-visual::after {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 55%, rgba(15, 23, 42, 0.22) 100%);
}

html[data-theme="light"] .hr-footer a {
  background: var(--c-surface-hover);
  color: var(--c-text-2);
}

html[data-theme="light"] .hr-footer a:hover {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

html[data-theme="light"] .proof-strip {
  background: var(--c-surface);
  border-top-color: var(--c-border-soft);
  border-bottom-color: var(--c-border-soft);
}

html[data-theme="light"] .proof-item {
  color: var(--c-text-2);
  box-shadow: none;
}

html[data-theme="light"] .proof-item .proof-number {
  color: var(--c-text-1);
}

html[data-theme="light"] .mf-slide,
html[data-theme="light"] #instructor-journey .ij-img-wrap {
  background: var(--c-surface-sunken);
}

html[data-theme="light"] #instructor-journey .ij-card,
html[data-theme="light"] #verified-credentials .vc-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 18px var(--c-shadow-soft);
}

html[data-theme="light"] #instructor-journey .ij-img-wrap::after {
  background: linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, 0.20) 100%);
}

html[data-theme="light"] .vc-lightbox {
  background: rgba(15, 23, 42, 0.80);
}

html[data-theme="light"] .vc-lightbox-close {
  background: var(--c-surface);
  color: var(--c-text-1);
}

/* ============================================================
   10. Как это работает
   ============================================================ */

html[data-theme="light"] .hiw-card,
html[data-theme="light"] .hiw-step {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 4px 18px var(--c-shadow-soft);
}

html[data-theme="light"] .hiw-card:hover,
html[data-theme="light"] .hiw-step:hover {
  border-color: var(--c-border-accent);
}

html[data-theme="light"] .hiw-card h3,
html[data-theme="light"] .hiw-step h3,
html[data-theme="light"] .hiw-title {
  color: var(--c-text-1);
}

html[data-theme="light"] .hiw-card p,
html[data-theme="light"] .hiw-step p,
html[data-theme="light"] .hiw-subtitle {
  color: var(--c-text-2);
}

html[data-theme="light"] .hiw-badge {
  background: var(--c-accent-soft);
  border-color: var(--c-border-accent);
  color: var(--c-accent);
}

html[data-theme="light"] .hiw-num {
  background: linear-gradient(180deg, rgba(0, 121, 146, 0.22), rgba(0, 121, 146, 0.04));
  color: var(--c-accent);
}

html[data-theme="light"] .hiw-step .hiw-num {
  background: none;
  color: var(--c-accent);
}

/* Градиентные акценты в заголовках — на светлом заменяем сплошным цветом */
html[data-theme="light"] .hiw-accent,
html[data-theme="light"] .faq-title .faq-accent,
html[data-theme="light"] .rt-accent {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--c-accent);
}

/* ============================================================
   11. FAQ
   ============================================================ */

html[data-theme="light"] #faq {
  background: transparent;
}

html[data-theme="light"] #faq::before {
  background: linear-gradient(90deg, transparent, var(--c-border), transparent);
}

html[data-theme="light"] .faq-badge {
  background: var(--c-accent-soft);
  border-color: var(--c-border-accent);
  color: var(--c-accent);
}

html[data-theme="light"] .faq-title {
  color: var(--c-text-1);
}

html[data-theme="light"] .faq-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}

html[data-theme="light"] .faq-item[open] {
  border-color: var(--c-border-accent);
}

html[data-theme="light"] .faq-item summary {
  color: var(--c-text-1);
}

html[data-theme="light"] .faq-item summary::after {
  color: var(--c-accent);
}

html[data-theme="light"] .faq-answer {
  color: var(--c-text-2);
}

html[data-theme="light"] .faq-answer a {
  color: var(--c-accent);
}

html[data-theme="light"] .faq-more a {
  background: var(--c-accent-soft);
  border-color: var(--c-border-accent);
  color: var(--c-accent);
}

html[data-theme="light"] .faq-more a:hover {
  background: rgba(0, 121, 146, 0.14);
  border-color: var(--c-accent);
  color: #006478;
}

/* ============================================================
   12. Финальный CTA
   ============================================================ */

html[data-theme="light"] #final-cta::before {
  background: radial-gradient(circle, var(--c-accent-glow), transparent 60%);
}

html[data-theme="light"] #final-cta h2 {
  color: var(--c-text-1);
}

html[data-theme="light"] #final-cta p {
  color: var(--c-text-2);
}

/* ============================================================
   13. Футер
   ============================================================ */

html[data-theme="light"] .neon-footer {
  background-color: #eef2f8;
  color: var(--c-text-2);
  border-top-color: var(--c-border-accent);
}

html[data-theme="light"] .neon-footer::before {
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
}

html[data-theme="light"] .footer-column h4,
html[data-theme="light"] .footer-column .footer-heading {
  color: var(--c-accent);
}

html[data-theme="light"] .footer-column p {
  color: var(--c-text-3);
}

html[data-theme="light"] .footer-column ul a {
  color: var(--c-text-2);
}

html[data-theme="light"] .footer-column ul a:hover {
  color: var(--c-accent);
}

html[data-theme="light"] .footer-map-compact {
  border-color: var(--c-border);
}

/* ============================================================
   14. Общее: скриншоты тёмных интерфейсов вне секции инструментов
   ============================================================ */

html[data-theme="light"] img[src*="/interactive/"],
html[data-theme="light"] img[src*="/tool-previews/"] {
  border-radius: 12px;
}

/* ============================================================
   15. Служебное
   ============================================================ */

html[data-theme="light"] .row-skip-link {
  background: var(--c-accent);
  color: #ffffff;
}

html[data-theme="light"] ::selection {
  background: rgba(0, 121, 146, 0.20);
  color: var(--c-text-1);
}

/* ============================================================
   16. Мобильная шапка
   ------------------------------------------------------------
   Ниже 1050px шапка — это грид из пяти колонок, и каждый элемент
   в ней размещён явно. Новый элемент без явного места уехал бы в
   третий ряд и порвал раскладку.

   Колонка 4 намеренно пустая, там стоит невидимый балансир
   (.mobile-lang-spacer, visibility:hidden, pointer-events:none).
   Переключатель встаёт ровно туда — заполняет дырку, которая и так
   существовала ради симметрии.

   Трек колонки 4 расширен с clamp(6px,3.2vw,32px) до
   clamp(24px,7.5vw,36px). Арифметика на 360px:
   72 + 38 + 78 + 27 + 80 + 8 (гэпы) + 24 (паддинг) = 327 <= 360.
   Ниже 360px запаса нет, поэтому там кнопка уходит в бургер-меню.
   ============================================================ */

@media (max-width: 1050px) {
  .site-header > .container {
    grid-template-columns:
      minmax(72px, max-content)
      38px
      minmax(78px, 1fr)
      clamp(24px, 7.5vw, 36px)
      minmax(80px, max-content) !important;
  }

  .site-header > .container .theme-toggle {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: 100% !important;
    max-width: 36px !important;
    height: 34px !important;
    margin: 0 !important;
    border-radius: 11px !important;
  }

  .site-header > .container .theme-toggle svg {
    width: 16px;
    height: 16px;
  }
}

/* Совсем узкие экраны: в верхней полосе места нет — уводим в меню. */
@media (max-width: 359px) {
  .site-header > .container .theme-toggle {
    display: none !important;
  }
  .site-header > .container {
    grid-template-columns:
      minmax(72px, max-content)
      38px
      minmax(78px, 1fr)
      clamp(6px, 3.2vw, 32px)
      minmax(80px, max-content) !important;
  }
}

/* Дубль в бургер-меню: всегда доступен, независимо от ширины.
   JS вешает обработчик на все .theme-toggle разом. */
.theme-toggle--menu {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 12px 4px;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: #fff;
  text-align: left;
}

.theme-toggle--menu:hover {
  background: rgba(255, 255, 255, 0.05);
  border: 0;
}

html[data-theme="light"] .theme-toggle--menu {
  background: none;
  border: 0;
  color: var(--c-text-1);
}

html[data-theme="light"] .theme-toggle--menu:hover {
  background: var(--c-surface-hover);
}

.theme-toggle--menu .theme-toggle-label::after {
  content: "Light theme";
}

html[data-theme="light"] .theme-toggle--menu .theme-toggle-label::after {
  content: "Dark theme";
}

@media (min-width: 1051px) {
  .theme-toggle--menu { display: none; }
}

/* ============================================================
   17. ГЕРОЙ СВЕТЛОЙ ТЕМЫ — фото-версия
   ------------------------------------------------------------
   Тёмная тема держится на 3D-дороге #road-bg-container: она
   position:fixed, z-index:-999 и висит за ВСЕЙ страницей (9648px).
   На светлом фоне это серый клин, выныривающий посреди секций.
   Подкраской не спасается, поэтому на светлой теме дорога
   отключается целиком, а атмосферу даёт фотография шоссе BC,
   прибитая к самому герою.

   Вуаль двухслойная: по горизонтали — чтобы текст слева лежал на
   почти белом, по вертикали — чтобы низ героя ушёл в чистый белый
   без видимого стыка со следующей секцией.
   ============================================================ */

html[data-theme="light"] #road-bg-container {
  display: none !important;
}

html[data-theme="light"] #row-3d-hero {
  position: relative;
  background: #ffffff;
  isolation: isolate;
  overflow: hidden;
}

html[data-theme="light"] #row-3d-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/assets/images/blog/highway/highway-two-lane-autumn-bc.webp") center 62% / cover no-repeat;
}

html[data-theme="light"] #row-3d-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      #ffffff 0%,
      rgba(255, 255, 255, 0.97) 30%,
      rgba(255, 255, 255, 0.72) 52%,
      rgba(255, 255, 255, 0.30) 78%,
      rgba(255, 255, 255, 0.18) 100%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.70) 0%,
      rgba(255, 255, 255, 0.10) 38%,
      rgba(255, 255, 255, 0.62) 78%,
      #ffffff 97%);
}

/* На узких экранах текст занимает всю ширину — вуаль делаем плотнее,
   иначе заголовок ляжет на ветки и горы. */
@media (max-width: 900px) {
  html[data-theme="light"] #row-3d-hero::before {
    background-position: center 70%;
  }
  html[data-theme="light"] #row-3d-hero::after {
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.94) 0%,
        rgba(255, 255, 255, 0.88) 52%,
        rgba(255, 255, 255, 0.96) 84%,
        #ffffff 98%);
  }
}

html[data-theme="light"] .r-badge {
  background: rgba(0, 121, 146, 0.10);
  border: 1px solid rgba(0, 121, 146, 0.30);
  color: #00707f;
}

html[data-theme="light"] .r-badge .dot {
  background: var(--c-accent);
}

html[data-theme="light"] .r-school-name {
  color: var(--c-text-2);
}

html[data-theme="light"] .r-title {
  color: var(--c-text-1);
}

/* Градиентный текст рассчитан светлеть кверху — на белом исчезает
   полностью. Снимаем обрезку по тексту и возвращаем сплошной цвет. */
html[data-theme="light"] .r-gradient {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: var(--c-accent);
  color: var(--c-accent);
}

html[data-theme="light"] .r-desc {
  color: var(--c-text-2);
}

html[data-theme="light"] .r-desc strong {
  color: var(--c-text-1);
}

html[data-theme="light"] .btn-book {
  background: linear-gradient(135deg, #00819b, #00647d);
  color: #ffffff;
  border: 0;
  box-shadow: 0 6px 18px rgba(0, 100, 125, 0.28);
}

/* Кнопка AI-помощника: своя многослойная тёмная заливка плюс
   ::before с бегущим conic-градиентом и ::after с тёмной подложкой.
   Переопределять нужно все три, иначе остаётся чёрный блок. */
html[data-theme="light"] .btn-ai-chat {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.16);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
  color: var(--c-text-1);
}

html[data-theme="light"] .btn-ai-chat::before {
  background: linear-gradient(135deg, #00819b, #7db9c9);
  opacity: 0.55;
  animation: none;
}

html[data-theme="light"] .btn-ai-chat::after {
  background: #ffffff;
}

html[data-theme="light"] .btn-ai-chat span,
html[data-theme="light"] .btn-ghost span {
  color: var(--c-text-1);
  -webkit-text-fill-color: var(--c-text-1);
}

html[data-theme="light"] .btn-ghost {
  background: #ffffff;
  color: var(--c-text-1);
  border: 1px solid rgba(15, 23, 42, 0.18);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .r-micro-text {
  color: var(--c-text-3);
}

html[data-theme="light"] .r-trust-heading {
  color: var(--c-text-1);
}

html[data-theme="light"] .r-stars {
  color: #8a6508;
}

/* Плавающие бейджи были тёмными карточками — на светлом становятся
   белыми со стеклянным размытием поверх фотографии. */
html[data-theme="light"] .r-float {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

html[data-theme="light"] .r-float * {
  color: var(--c-text-1);
}

html[data-theme="light"] .r-float small,
html[data-theme="light"] .r-float .r-float-sub {
  color: var(--c-text-3);
}

/* ------------------------------------------------------------
   Логотип. Исходный PNG рассчитан на тёмный фон: «Right of»
   белым, «DRIVING SCHOOL» светло-серым — на светлом пропадают.
   Подготовлена перекрашенная версия, показываем её по теме.
   ------------------------------------------------------------ */
.logo-brand--light { display: none; }

html[data-theme="light"] .logo-brand--dark { display: none; }
html[data-theme="light"] .logo-brand--light { display: block; }