/* FIXES WP THEME — обновлено 2026-06-30 */
/* Связанные файлы: functions.php (подключение, версия кэш-бастинга),
   assets.css (базовые стили .header/.footer/.footer-grid),
   template-parts/header.php, footer.php, hero.php, tournaments.php */

/* WP ADMIN BAR — раньше html{margin-top:0} убирал стандартный отступ WordPress
   под чёрную панель администратора, из-за чего фиксированный хедер сайта
   оказывался ПОД панелью вместо того чтобы быть под ней корректно сдвинутым.
   Возвращаем штатное поведение WP и сдвигаем сайтовский хедер на высоту панели. */
body.admin-bar .header {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar .header {
    top: 46px !important;
  }
}
body { background-color: #022563 !important; }

/* МОБИЛЬНОЕ МЕНЮ — раньше кнопка ничего не открывала: разметки не было
   вообще, а JS переключал класс на несуществующем .mobile-nav вместо
   реального .mobile-header-container. По умолчанию меню скрыто на
   десктопе через overflow (оно и так не показывается там из-за
   отсутствия кнопки-гамбургера в этом брейкпоинте), на мобильном
   скрыто через display:none, пока не открыто. */
.mobile-header-container {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  overflow-y: auto;
  z-index: 99;
}
.mobile-header-container.is-open { display: flex; }
body.mobile-menu-open { overflow: hidden; }
.mobile-header-container .contacts {
  border: 1px solid var(--light-gradient-color);
  border-radius: 2rem;
}
.mobile-header-container .phone { font-size: clamp(1.8rem, 2.5vw, 2.3rem); font-weight: 700; margin-bottom: 0.5rem; }
.mobile-header-container .email { font-size: clamp(1.2rem, 1.5vw, 1.6rem); font-weight: 400; }
.mobile-header-container .text-info { font-size: clamp(1.4rem, 1.8vw, 2.3rem); font-weight: 400; }

/* ИКОНКИ СОЦСЕТЕЙ */
a.whatsup-btn, a.vk-btn, a.tg-btn, a.yt-btn { cursor: pointer; color: #022563; }
.socials-container { display: flex; gap: 2rem; }
.contacts-card .whatsup-btn, .contacts-card .vk-btn, .contacts-card .tg-btn, .contacts-card .yt-btn { color: #011230; }
.contacts-card .whatsup-btn:hover { color: #25d366; }
.contacts-card .vk-btn:hover { color: #0077ff; }
.contacts-card .tg-btn:hover { color: #24a1de; }
.contacts-card .yt-btn:hover { color: red; }

/* КАРТОЧКА ТУРНИРА — кнопка не переносится */
.tournament-card .register-btn { white-space: nowrap; flex-shrink: 0; }

/* HERO — видео. display:block нужен на всех разрешениях: изначально видео
   было display:none по ошибке. Пробовали также включать "правильную"
   hero-bg-vid-big-screen версию (отдельный inline SVG с foreignObject)
   на экранах от 1920px, но в этом окружении она рендерится совсем без
   маски (голый прямоугольник) — хуже, чем небольшое смещение рамки у
   обычной версии. Поэтому держим проверенно рабочую CSS-маску видимой
   всегда, а искажение рамки на экстремально широких экранах убираем
   через max-width ниже. */
.hero-bg-vid { display: block !important; }
.hero-bg-vid-big-screen { display: none !important; }
.video-mask video { width: 100%; height: 100%; object-fit: cover; }

/* HERO ВИДЕО — на очень широких экранах (от ~2200px) ограничиваем
   максимальную ширину блока, чтобы процентный отступ рамки (-2.1%)
   не расходился визуально с самим видео. */
@media (min-width: 2200px) {
  .hero-bg-vid { max-width: 1600px; }
}

/* ВИДЕО — маска вырезает видео в форму, рамка рисует контур поверх.
   Раньше отсутствовали файлы hero-vid-mask-base.svg и hero-video-border.svg —
   из-за этого видео оставалось прямоугольным и угол давал белую полосу. */
.video-mask {
  width: 100%;
  mask-image: url("hero-vid-mask-base.svg");
  mask-mode: alpha;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("hero-vid-mask-base.svg");
  -webkit-mask-mode: alpha;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.hero-bg-vid::after {
  content: "";
  position: absolute;
  top: -2.1%;
  left: -2.1%;
  right: -2.1%;
  bottom: -2.1%;
  background: url("hero-video-border.svg") no-repeat center/contain;
}

/* FAQ */
.faq-card:hover .card-inner { transform: rotateY(180deg); }

/* FAQ КАРТОЧКИ — width:fit-content у .answer раздувал карточку с самым длинным
   ответом через невидимый перевёрнутый слой .card-back, из-за чего остальные
   карточки сжимались непропорционально. min-width:0 разрешает флекс-итему
   сжаться до заданной раскладки вместо того чтобы упираться в контент.
   ВАЖНО: не задаём здесь фиксированную width/flex — это ломает адаптивные
   брейкпоинты assets.css (>1430px — 4 в ряд, 850-1430px — сетка 2х2 по 35rem,
   <850px — мобильный аккордеон вместо .faq-card). */
.faq-card {
  min-width: 0 !important;
}
.faq-card .answer {
  width: 100% !important;
}
.faq-card .card-back,
.faq-card .card-front,
.faq-card .card-inner {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

/* ФУТЕР — размер логотипа под текущий брендинг */
.footer .logo, .footer svg.logo { width: 20rem !important; overflow: visible !important; }

/* ТУРНИРЫ — попап с полным описанием скрыт по умолчанию, показывается через JS.
   position:fixed вместо absolute — иначе overflow:hidden у .tournaments-section
   (добавлен ранее для другого фикса) обрезает/прячет попап, если он визуально
   выходит за границы секции */
.description-popup { display: none !important; position: fixed !important; }
.description-popup.is-open { display: block !important; }
@media (max-width: 600px) {
  .description-popup.is-open { display: block; position: fixed; top: 50% !important; left: var(--horiz-main-padding) !important; right: var(--horiz-main-padding) !important; width: auto !important; transform: translateY(-50%); max-height: 70vh; overflow-y: auto; }
}

/* КАРТА */
.map-wrapper { position: relative; flex: 1; }
.map iframe { border-radius: 1.5rem; }

/* PDF */
.doc-content { padding: 0 !important; margin: 0 !important; }
.doc-content iframe {
  display: block !important; width: 100% !important;
  height: 80vh !important; border: none !important; margin: 0 !important;
}

/* КАРУСЕЛЬ ОТЗЫВОВ — запрет выделения текста при drag */
.feedbacks { user-select: none; -webkit-user-select: none; }
.feedbacks img { pointer-events: none; -webkit-user-drag: none; }

/* КАРУСЕЛЬ "О НАС" — показываем только активный слайд */
.about-us-carousel .carousel-item {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out;
}
.about-us-carousel .carousel-item.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* СЕКЦИЯ ТУРНИРОВ — поднимаем выше .hero-gradient, который специально
   выступает на 17rem ниже hero-секции для плавного цветового перехода
   и перекрывал заголовок "Расписание турниров". Также добавляем overflow:hidden,
   чтобы декоративные картинки (bg-diamonds-img на top:30rem) не вылезали за пределы
   секции и не накладывались на заголовок следующей секции (FAQ) */
.tournaments-section { position: relative; z-index: 2; overflow: hidden; }

/* FAQ МОБИЛЬНЫЙ АККОРДЕОН — ответ скрыт пока карточка не раскрыта */
.closed-mobile-card { display: none; }
.faq-card-mobile.is-open .closed-mobile-card { display: block; }
.faq-card-mobile.is-open .card-open-btn { transform: rotate(180deg); }

/* СТАНДАРТНЫЕ WP-СТРАНИЦЫ (page.php) — заголовок и контент должны выглядеть как остальной сайт */
.fp-page-content h2 { font-size: 3rem; margin-top: 2rem; }
.fp-page-content h3 { font-size: 2.4rem; margin-top: 1.5rem; }
.fp-page-content p { margin-bottom: 1.5rem; }
.fp-page-content ul, .fp-page-content ol { margin: 0 0 1.5rem 2rem; }
.fp-page-content a { color: var(--light-gradient-color); text-decoration: underline; }
.fp-page-content img { max-width: 100%; border-radius: 1rem; margin: 1.5rem 0; }

/* ТАРИФЫ — кнопки как в оригинале (белый текст, правильный градиент), чуть компактнее */
.order-btn {
  color: #fff !important;
  text-decoration: none !important;
  display: block !important;
  padding: 0.8rem 1.2rem !important;
  font-size: clamp(1.3rem, 1.6vw, 1.6rem) !important;
}

/* FAQ — компактная высота карточек как в оригинале */
.faq-card {
  min-height: 17rem !important;
  height: auto !important;
}

/* ФУТЕР — лого крупнее (было 20rem) */
.footer .logo, .footer svg.logo { width: 26rem !important; overflow: visible !important; }

/* ФУТЕР — ссылки policy белые (глобальное правило из FAQ красило их в голубой) */
.footer .policy a,
.footer .policy a:link,
.footer .policy a:visited { color: #fff !important; }
.footer .policy a:hover { color: var(--light-gradient-color) !important; }

/* ФУТЕР — реквизиты: размер шрифта как в оригинале */
.sole-proprietor-info p {
  font-size: clamp(1.2rem, 1.5vw, 1.6rem) !important;
  font-weight: 400 !important;
}

/* ОПИСАНИЕ ТУРНИРОВ */
.tournaments-descriptions {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 5rem;
}
.description-block {
  display: flex;
  gap: 2rem;
  border: 1px solid var(--light-gradient-color);
  border-radius: 2rem;
  background-color: rgba(37, 37, 37, 0.2);
  padding: 2rem;
}
.description-block-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 0 1 60%;
  min-width: 20rem;
  font-size: 1.5rem;
}
.desc-pic {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 40%;
  min-width: 10rem;
  border-radius: 2rem;
}
.desc-pic img { max-width: 100%; }