/* ============================================================
   drum.by — единая светлая / тёмная тема
   Загружается после style.css и pages.css.
   ============================================================ */

html[data-theme="dark"] {
  color-scheme: dark;
  --pr-bg: #0c0e11;
  --pr-surface: #171a1f;
  --pr-surface-raised: #22262e;
  --pr-surface-soft: #2b3039;
  --pr-text: #f7f4ee;
  --pr-text-soft: #a7abb3;
  --pr-border: rgba(255, 255, 255, .11);
  --pr-border-strong: rgba(255, 255, 255, .23);
  --pr-header: rgba(12, 14, 17, .95);
  --pr-accent: #ff7a16;
  --pr-accent-hover: #ff913b;
  --pr-focus: #ffad65;
  --pr-shadow: 0 18px 48px rgba(0, 0, 0, .34);

  /* Совместимость с существующим CSS drum.by. */
  --black: #0c0e11;
  --dark: #171a1f;
  --card: #22262e;
  --accent: #ff7a16;
  --accent2: #f5be49;
  --white: #f7f4ee;
  --muted: #a7abb3;
  --border: rgba(255, 255, 255, .11);
  --light-bg: #111418;
  --light-bg2: #171a1f;
  --light-card: #22262e;
  --dark-text: #f7f4ee;
  --dark-text-muted: #a7abb3;
  --border-light: rgba(255, 255, 255, .11);
}

html[data-theme="light"] {
  color-scheme: light;
  --pr-bg: #f5f5f2;
  --pr-surface: #ffffff;
  --pr-surface-raised: #efefeb;
  --pr-surface-soft: #e7e7e2;
  --pr-text: #191919;
  --pr-text-soft: #666762;
  --pr-border: rgba(25, 25, 25, .12);
  --pr-border-strong: rgba(25, 25, 25, .24);
  --pr-header: rgba(255, 255, 255, .95);
  --pr-accent: #e8861e;
  --pr-accent-hover: #f09625;
  --pr-focus: #2869df;
  --pr-shadow: 0 14px 38px rgba(28, 27, 24, .10);

  --black: #f5f5f2;
  --dark: #ecece7;
  --card: #ffffff;
  --accent: #e8861e;
  --accent2: #c95f2d;
  --white: #191919;
  --muted: #666762;
  --border: rgba(25, 25, 25, .12);
  --light-bg: #f5f5f2;
  --light-bg2: #ecece7;
  --light-card: #ffffff;
  --dark-text: #191919;
  --dark-text-muted: #666762;
  --border-light: rgba(25, 25, 25, .12);
}

html[data-theme] {
  background: var(--pr-bg);
}

html[data-theme] body {
  background: var(--pr-bg);
  color: var(--pr-text);
}

html[data-theme] body,
html[data-theme] nav,
html[data-theme] footer,
html[data-theme] #mobile-menu,
html[data-theme] .result-card,
html[data-theme] .teachers-banner,
html[data-theme] .program-card,
html[data-theme] .review-card,
html[data-theme] .video-card,
html[data-theme] .page-format-card,
html[data-theme] .page-who-card,
html[data-theme] .page-step,
html[data-theme] .price-card-page,
html[data-theme] .trial-form-center,
html[data-theme] .quiz-wrap,
html[data-theme] .faq-question {
  transition:
    background-color .19s ease,
    border-color .19s ease,
    color .19s ease,
    box-shadow .19s ease;
}

/* ── Доступность ─────────────────────────────────────────── */
html[data-theme] :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--pr-focus);
  outline-offset: 3px;
}

html[data-theme] :is(button, input, textarea, select):disabled {
  cursor: not-allowed;
  opacity: .55;
}

/* ── Переключатель ───────────────────────────────────────── */
.pr-theme-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 82px;
  min-width: 82px;
  height: 44px;
  padding: 4px;
  border: 1px solid var(--pr-border);
  border-radius: 999px;
  background: var(--pr-surface-raised);
  color: var(--pr-text-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pr-theme-switch::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 35px;
  height: 34px;
  border-radius: 999px;
  background: var(--pr-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  transition: transform .19s ease, background-color .19s ease;
}

html[data-theme="dark"] .pr-theme-switch::before {
  transform: translateX(37px);
  background: var(--pr-accent);
}

.pr-theme-switch__option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}

.pr-theme-switch__option svg {
  width: 19px;
  height: 19px;
}

html[data-theme="light"] .pr-theme-switch__option--light,
html[data-theme="dark"] .pr-theme-switch__option--dark {
  color: var(--pr-text);
}

html[data-theme="dark"] .pr-theme-switch__option--dark {
  color: #191714;
}

.pr-theme-switch:hover {
  border-color: var(--pr-border-strong);
}

.pr-theme-mobile {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin-top: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--pr-border);
  border-bottom: 1px solid var(--pr-border);
}

.pr-theme-mobile__label {
  color: var(--pr-text);
  font-size: 15px;
  font-weight: 700;
}

.pr-theme-mobile__state {
  color: var(--pr-text-soft);
  font-size: 13px;
}

/* ── Шапка и навигация ──────────────────────────────────── */
html[data-theme] nav {
  background: var(--pr-header);
  border-bottom-color: var(--pr-border);
}

html[data-theme] .nav-topbar {
  background: color-mix(in srgb, var(--pr-surface) 72%, transparent);
  border-bottom-color: var(--pr-border);
}

html[data-theme] .nav-phone,
html[data-theme] .nav-link:hover {
  color: var(--pr-text);
}

html[data-theme] .nav-link,
html[data-theme] .nav-address,
html[data-theme] .nav-link-back {
  color: var(--pr-text-soft);
}

html[data-theme] .nav-link:hover,
html[data-theme] .mobile-links li a:hover {
  background: var(--pr-surface-raised);
}

html[data-theme] #mobile-menu {
  background: color-mix(in srgb, var(--pr-bg) 97%, transparent);
  border-bottom-color: var(--pr-border);
  max-height: 0;
  overflow: hidden;
}

html[data-theme] #mobile-menu.open {
  max-height: calc(100svh - 56px);
  overflow-y: auto;
}

html[data-theme] .mobile-links li a {
  color: var(--pr-text-soft);
}

html[data-theme] .burger-line {
  background: var(--pr-text);
}

html[data-theme] nav.nav-inner {
  min-height: 72px;
  padding: 0 36px;
  flex-direction: row;
  align-items: center;
}

.logo--image,
.footer-logo--image {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.logo--image img {
  display: block;
  width: 112px;
  height: 48px;
  object-fit: contain;
  object-position: left center;
}

.footer-logo--image img {
  display: block;
  width: 132px;
  height: 64px;
  object-fit: contain;
  object-position: left center;
}

/* ── Базовые поверхности ────────────────────────────────── */
html[data-theme] .about-section-wrap,
html[data-theme] .tool-section,
html[data-theme] .offline-section-wrap,
html[data-theme] .trial-section,
html[data-theme] .reviews-wrap,
html[data-theme] .results-wrap,
html[data-theme] .method-section,
html[data-theme] .efnote-outer,
html[data-theme] .page-main,
html[data-theme] body.inner-page {
  background: var(--pr-bg);
}

html[data-theme] .teachers-banner,
html[data-theme] .result-card,
html[data-theme] .program-card,
html[data-theme] .level-tab,
html[data-theme] .quiz-wrap,
html[data-theme] .review-card,
html[data-theme] .video-card,
html[data-theme] .trial-form-center,
html[data-theme] .page-format-card,
html[data-theme] .page-who-card,
html[data-theme] .page-step,
html[data-theme] .price-card-page,
html[data-theme] .faq-question,
html[data-theme] .blog-cta,
html[data-theme] .page-cta-box {
  background: var(--pr-surface);
  border-color: var(--pr-border);
  box-shadow: var(--pr-shadow);
}

html[data-theme] .method-section,
html[data-theme] #student-videos,
html[data-theme] #level-test,
html[data-theme] .reviews-wrap {
  background: var(--pr-surface-raised) !important;
}

html[data-theme] .efnote-section,
html[data-theme] .efnote-visual {
  background: var(--pr-surface) !important;
  border-color: var(--pr-border) !important;
}

html[data-theme] .breadcrumb-wrap {
  background: var(--pr-surface-raised);
  border-bottom-color: var(--pr-border);
}

html[data-theme] .page-container h1,
html[data-theme] .page-container h2,
html[data-theme] .page-container h3,
html[data-theme] .page-faq-item strong,
html[data-theme] .page-who-card strong {
  color: var(--pr-text);
}

html[data-theme] .page-lead,
html[data-theme] .page-container p,
html[data-theme] .page-container ul li,
html[data-theme] .page-table td,
html[data-theme] .page-quote,
html[data-theme] .page-related,
html[data-theme] .page-faq-item p,
html[data-theme] .page-step-content p {
  color: var(--pr-text-soft);
}

html[data-theme] .page-table th {
  background: var(--pr-surface-raised);
  color: var(--pr-text-soft);
}

/* ── Главный экран ───────────────────────────────────────── */
html[data-theme] .hero-wrap {
  background: var(--pr-bg);
}

html[data-theme="dark"] .hero-wrap::before {
  background: linear-gradient(
    to right,
    rgba(12, 14, 17, .98) 0%,
    rgba(12, 14, 17, .86) 48%,
    rgba(12, 14, 17, .26) 100%
  );
}

html[data-theme="light"] .hero-bg {
  filter: saturate(.82) contrast(.9);
}

html[data-theme="light"] .hero-wrap::before {
  background: linear-gradient(
    to right,
    rgba(245, 245, 242, .99) 0%,
    rgba(245, 245, 242, .90) 48%,
    rgba(245, 245, 242, .30) 100%
  );
}

html[data-theme] .hero-title,
html[data-theme] h2,
html[data-theme] .concerts-title,
html[data-theme] .fcn-title,
html[data-theme] .teachers-banner h3 {
  color: var(--pr-text);
}

html[data-theme] .hero-sub,
html[data-theme] .hero-note,
html[data-theme] .stat-label,
html[data-theme] .section-desc,
html[data-theme] .result-card p,
html[data-theme] .teachers-banner p,
html[data-theme] .concerts-desc,
html[data-theme] .about-desc,
html[data-theme] .trial-intro,
html[data-theme] .tool-intro,
html[data-theme] .review-text,
html[data-theme] .faq-answer p,
html[data-theme] .program-note div,
html[data-theme] .level-list.accent li,
html[data-theme] .fcn-desc {
  color: var(--pr-text-soft);
}

html[data-theme] .stat-box {
  background: color-mix(in srgb, var(--pr-surface) 90%, transparent);
  border-color: var(--pr-border);
  border-radius: 16px;
}

html[data-theme] .band {
  background: var(--pr-accent);
  color: #191714;
}

/* ── Компоненты и новая композиция ───────────────────────── */
html[data-theme] .result-card,
html[data-theme] .teachers-banner,
html[data-theme] .program-card,
html[data-theme] .review-card,
html[data-theme] .video-card,
html[data-theme] .quiz-wrap,
html[data-theme] .trial-form-center,
html[data-theme] .page-format-card,
html[data-theme] .page-who-card,
html[data-theme] .page-step,
html[data-theme] .price-card-page,
html[data-theme] .blog-cta,
html[data-theme] .page-cta-box,
html[data-theme] .faq-list {
  border-radius: 18px;
}

html[data-theme] .about-photo-v2,
html[data-theme] .concerts-photo,
html[data-theme] .tool-demo,
html[data-theme] .video-wrap,
html[data-theme] .contacts-map {
  border-radius: 18px;
}

html[data-theme] .personal-format-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
}

html[data-theme] .personal-format-card {
  min-height: 100%;
  padding: 28px;
  border: 1px solid var(--pr-border);
  border-radius: 18px;
  background: var(--pr-surface);
  box-shadow: var(--pr-shadow);
}

.personal-format-card__num {
  color: var(--pr-accent);
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  margin-bottom: 18px;
}

.personal-format-card h3 {
  color: var(--pr-text);
  font-size: 18px;
  margin-bottom: 10px;
}

.personal-format-card p {
  color: var(--pr-text-soft);
  font-size: 14px;
}

html[data-theme] .personal-format-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--pr-accent) 35%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--pr-accent) 8%, var(--pr-surface));
}

.personal-format-note p {
  color: var(--pr-text-soft);
  margin: 0;
}

/* ── Формы ───────────────────────────────────────────────── */
html[data-theme] .trial-section {
  background: var(--pr-bg) !important;
}

html[data-theme] .trial-form-center {
  background: var(--pr-surface);
  border-color: color-mix(in srgb, var(--pr-accent) 30%, transparent);
}

html[data-theme] .trial-includes h4,
html[data-theme] .trial-reply {
  color: var(--pr-text-soft);
}

html[data-theme] .trial-include-item {
  color: var(--pr-text);
  border-bottom-color: var(--pr-border);
}

html[data-theme] .form-field input,
html[data-theme] .form-field textarea {
  background: var(--pr-surface-raised);
  border-color: var(--pr-border-strong);
  color: var(--pr-text);
}

html[data-theme] .form-field input:focus,
html[data-theme] .form-field textarea:focus {
  background: var(--pr-surface);
  border-color: var(--pr-accent);
}

html[data-theme] .form-field input::placeholder,
html[data-theme] .form-field textarea::placeholder {
  color: color-mix(in srgb, var(--pr-text-soft) 70%, transparent);
}

/* ── Кнопки ──────────────────────────────────────────────── */
html[data-theme] :is(
  .hero-cta,
  .about-cta-btn,
  .big-cta,
  .price-card-btn,
  .fcn-btn,
  nav a.cta-nav,
  .mobile-links .mobile-cta
) {
  min-height: 48px;
  border-radius: 12px;
  background: var(--pr-accent);
  color: #191714 !important;
}

html[data-theme] :is(
  .hero-cta,
  .about-cta-btn,
  .big-cta,
  .price-card-btn,
  .fcn-btn,
  nav a.cta-nav,
  .mobile-links .mobile-cta
):hover {
  background: var(--pr-accent-hover);
}

html[data-theme] #scroll-top {
  color: #191714;
}

html[data-theme] .page-cta-section,
html[data-theme] .final-cta-section {
  background: var(--pr-accent);
}

html[data-theme] .page-cta-section h2,
html[data-theme] .page-cta-section p,
html[data-theme] .final-cta-section h2,
html[data-theme] .final-cta-section p {
  color: #191714;
}

html[data-theme] .cta-dark,
html[data-theme] .page-cta-section .hero-cta {
  background: #191714;
  color: #f7f4ee !important;
}

/* ── FAQ и служебные блоки ───────────────────────────────── */
html[data-theme] .faq-list {
  border-color: var(--pr-border);
  box-shadow: var(--pr-shadow);
}

html[data-theme] .faq-question:hover {
  background: var(--pr-surface-raised);
}

html[data-theme] .faq-answer {
  background: color-mix(in srgb, var(--pr-accent) 6%, var(--pr-surface));
}

html[data-theme] .free-course-nudge {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--pr-accent) 12%, var(--pr-bg)),
    var(--pr-surface),
    color-mix(in srgb, var(--pr-accent) 8%, var(--pr-bg))
  );
  border-color: color-mix(in srgb, var(--pr-accent) 24%, transparent);
}

html[data-theme] footer {
  background: var(--pr-surface-raised);
  border-top-color: var(--pr-border);
}

/* ── Блог ────────────────────────────────────────────────── */
html[data-theme] body.blog-index-page,
html[data-theme] body.blog-index-page .blog-grid {
  background: var(--pr-bg);
}

html[data-theme] .blog-index-hero {
  background: var(--pr-surface-raised);
  border-bottom: 1px solid var(--pr-border);
}

html[data-theme] .blog-index-hero h1,
html[data-theme] .blog-card h2 {
  color: var(--pr-text);
}

html[data-theme] .blog-index-hero p,
html[data-theme] .blog-card p,
html[data-theme] .footer-brand p,
html[data-theme] .footer-bottom p {
  color: var(--pr-text-soft);
}

html[data-theme] .blog-card {
  background: var(--pr-surface);
  border: 1px solid var(--pr-border);
  box-shadow: var(--pr-shadow);
}

html[data-theme] .blog-card a.read-more {
  min-height: 44px;
  border-radius: 10px;
  background: var(--pr-accent);
  color: #191714;
}

html[data-theme] .blog-back a,
html[data-theme] .footer-links a {
  color: var(--pr-text-soft);
}

html[data-theme] .blog-back a:hover,
html[data-theme] .footer-links a:hover {
  color: var(--pr-accent);
}

/* ── Светлая тема: точечные исправления старых inline-цветов ─ */
html[data-theme="light"] [style*="color: var(--white)"],
html[data-theme="light"] [style*="color:var(--white)"] {
  color: var(--pr-text) !important;
}

html[data-theme="light"] [style*="background: var(--dark)"],
html[data-theme="light"] [style*="background:var(--dark)"],
html[data-theme="light"] [style*="background: var(--black)"],
html[data-theme="light"] [style*="background:var(--black)"] {
  background: var(--pr-bg) !important;
}

/* ── Адаптив ─────────────────────────────────────────────── */
@media (max-width: 1360px) {
  .nav-links {
    display: none;
  }

  #burger {
    display: flex;
  }

  .nav-mainbar {
    padding: 0 20px;
  }

}

@media (max-width: 1120px) {
  #main-nav:not(.nav-inner) a.cta-nav {
    display: none;
  }
}

@media (max-width: 900px) {
  html[data-theme] #mobile-menu {
    top: 60px;
  }

  html[data-theme] nav.nav-inner {
    min-height: 64px;
    padding: 0 16px;
  }

  .nav-inner .nav-link-back {
    display: none;
  }

  .nav-inner .pr-theme-switch {
    width: 76px;
    min-width: 76px;
  }

  .personal-format-grid {
    grid-template-columns: 1fr;
  }

  html[data-theme] .personal-format-note {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  #main-nav:not(.nav-inner) .pr-theme-switch--nav {
    display: none;
  }

  .logo--image img {
    width: 96px;
    height: 42px;
  }

  html[data-theme] .hero-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  html[data-theme] .eyebrow-main {
    padding: 9px 16px;
    font-size: 28px;
  }

  html[data-theme] .personal-format-card {
    padding: 22px;
  }
}

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