/*
Theme Name: 11ЛАБ
Theme URI: https://elevenlab.ru/
Author: 11ЛАБ
Author URI: https://elevenlab.ru/
Description: Кастомная тема сайта 11ЛАБ. Разметка собрана из готовой вёрстки (Bootstrap 5), контент редактируется через ACF Pro. Конструкторы страниц и сторонние SEO-плагины не используются.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License: Proprietary
Text Domain: elevenlab
Tags: custom-theme, bootstrap
*/

/*
  Основной CSS темы лежит в css/styles.css и css/intro-sequence.css — это файлы вёрстки,
  они не редактируются. Этот файл нужен WordPress только для заголовка темы;
  сюда добавляются точечные override, которых не было в макете (например, поправки под админ-бар).
*/

/* Админ-бар WP.
   На десктопе он position: fixed и перекрывает фиксированную шапку макета — сдвигаем её вниз
   на высоту бара. В вёрстке у .site-header--figma-fixed задан top: 0 !important,
   поэтому здесь тоже нужен !important — иначе правило не применится.
   На ширине <= 782px админ-бар у WordPress становится absolute и уезжает при прокрутке,
   поэтому там ничего не сдвигаем: иначе под шапкой останется пустая полоса на всей странице. */
body.admin-bar .site-header--figma-fixed,
body.admin-bar .case-main-header {
  top: 32px !important;
}

body.admin-bar .site-menu__panel {
  top: 32px !important;
  height: calc(100% - 32px) !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header--figma-fixed,
  body.admin-bar .case-main-header {
    top: 0 !important;
  }

  body.admin-bar .site-menu__panel {
    top: 0 !important;
    height: 100% !important;
  }
}

/* Текстовые страницы.
   В вёрстке разделы документа обёрнуты в <section>, и расстояние между ними задаёт правило
   .text-document section + section. Заказчик пишет текст в редакторе WordPress, где таких обёрток нет,
   поэтому тот же вертикальный ритм задаём по заголовкам — значения совпадают с макетом. */
.text-document > h2:not(:first-child) {
  margin-top: clamp(1.8rem, 3.2vw, 3.4rem);
}

/* Заголовок кейса.
   В вёрстке у .case-hero h1 задан white-space: nowrap и max-width: none — в макете название
   короткое («ЖК Трилогия»), поэтому строка спокойно выходила за колонку контента.
   У реальных кейсов названия длиннее («Bel Far Niente», «PST Master Steering»)
   и такая строка вылезала за область основного содержимого, а то и за край экрана.

   Заголовок переносится по ширине области основного содержимого — той же колонки,
   по которой выровнены хлебные крошки, подзаголовок и видео первого экрана. */
.case-hero h1 {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Формы заявок.
   Ловушка для ботов: поле есть в разметке, но человеку не показывается и в табуляцию не попадает. */
.el-form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Подпись под кнопкой отправки используется для ответа сервера: успех или ошибка.
   Цвета берём из палитры вёрстки, размеры и отступы не меняем. */
.form-note.is-success {
  color: var(--brand);
}

.form-note.is-error {
  color: #ff6b6b;
}

/* Длинные документы (политика, положение об обработке данных и т.п.).

   В вёрстке блок документа помечен классом reveal: он скрыт (opacity: 0), пока скрипт
   не увидит его в зоне видимости и не добавит is-visible. Наблюдатель в js/main.js
   срабатывает при threshold 0.12 — то есть когда в экран попало 12% высоты элемента.
   В макете там короткий демо-текст, а у настоящего документа на 50 000 знаков
   12% высоты — это несколько экранов, условие не выполняется никогда,
   и весь текст остаётся невидимым.

   Поэтому конкретно для блока документа анимацию появления отключаем:
   содержимое показывается сразу, независимо от его длины. */
.text-document.reveal {
  opacity: 1;
  transform: none;
}

/* Карточка клиента без ссылки.
   В вёрстке карточка всегда кликабельна, но если у клиента не указан адрес проекта,
   реагировать на наведение и показывать стрелку перехода не на что. */
.client-name-card--static {
  cursor: default;
}

.client-name-card--static:hover,
.client-name-card--static:focus-visible {
  transform: none;
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
  box-shadow: none;
}

/* Плашка cookie.
   Блока не было в макете — собран по образцу заказчика в стилистике сайта:
   компактная тёмная карточка в левом нижнем углу, а не полоса во всю ширину экрана.
   Ширина ограничена 24rem (384px), текст мелкий, кнопка небольшая —
   плашка сообщает о cookie, но не перекрывает первый экран. */
.cookie-notice {
  position: fixed;
  left: clamp(0.75rem, 1.6vw, 1.25rem);
  bottom: clamp(0.75rem, 1.6vw, 1.25rem);
  z-index: 90;
  width: min(24rem, calc(100vw - 1.5rem));
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 380ms var(--ease),
    transform 380ms var(--ease);
}

.cookie-notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-notice__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 1.05rem 1rem;
  color: var(--white);
  background: rgba(20, 20, 20, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px);
}

.cookie-notice__text {
  margin: 0;
  font-family: "Roboto Flex", var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  font-variation-settings: "wdth" 151, "wght" 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.cookie-notice__text a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cookie-notice__text a:hover,
.cookie-notice__text a:focus-visible {
  color: var(--brand);
}

.cookie-notice__accept {
  flex: 0 0 auto;
  padding: 0.5rem 1.4rem;
  color: var(--white);
  font-family: "Roboto Flex", var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  font-variation-settings: "wdth" 151, "wght" 600;
  background: var(--brand);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 240ms var(--ease),
    transform 240ms var(--ease);
}

.cookie-notice__accept:hover,
.cookie-notice__accept:focus-visible {
  background: var(--brand-dark);
  transform: translateY(-1px);
}

/* На узких экранах карточка занимает ширину экрана за вычетом полей,
   кнопка растягивается — так по ней удобнее попасть пальцем. */
@media (max-width: 575.98px) {
  .cookie-notice {
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }

  .cookie-notice__accept {
    width: 100%;
  }
}

/* Видео первого экрана на телефонах.

   В вёрстке блок видео на ширине до 576px — «пилюля» шириной 128vw (520–680px)
   с левым краем на 82–132px, то есть он заведомо шире экрана и правым краем
   уходит за него. Видео при этом растянуто на всю ширину блока, поэтому за краем
   экрана оказывалось до 44% кадра — самая содержательная правая часть.

   Правка по согласованию: форма области не меняется (то же скругление слева
   и тот же уход за правый край), но блок сдвинут левее, а высота блока считается
   от видимой ширины по пропорции ролика 16:9. Кадр виден целиком и при этом
   заполняет блок без полей — обрезки справа и чёрных полос сверху и снизу нет.

   Если ролик в настройках заменят на другой с иными пропорциями, поменяйте
   множитель 9 / 16 в высоте блока на пропорции нового видео. */
@media (max-width: 575.98px) {
  .intro-sequence-visual--video.hero-video-orb {
    --orb-left: clamp(28px, 8vw, 48px);
    --orb-visible: calc(100vw - var(--orb-left));
  }

  /* Повторяем специфичность правил вёрстки с [data-intro-active],
     иначе левый край и высота вернутся к исходным значениям. */
  .intro-sequence-visual--video.hero-video-orb,
  .intro-sequence[data-intro-active="0"] .intro-sequence-visual--video.hero-video-orb,
  .intro-sequence[data-intro-active="1"] .intro-sequence-visual--video.hero-video-orb,
  .intro-sequence[data-intro-active="2"] .intro-sequence-visual--video.hero-video-orb,
  .intro-sequence:not([data-intro-active]) .intro-sequence-visual--video.hero-video-orb {
    left: var(--orb-left);
    --first-orb-height: calc(var(--orb-visible) * 9 / 16);
    height: var(--first-orb-height);
  }

  /* Видео занимает ровно видимую часть блока. Пропорции блока и ролика совпадают,
     поэтому cover ничего не обрезает. В вёрстке здесь был cover со scale(1.02). */
  .intro-sequence-visual--video.hero-video-orb video {
    inset: 0 auto auto 0;
    width: var(--orb-visible);
    height: 100%;
    max-height: none;
    object-fit: cover;
    transform: none;
  }

  /* Подпись «Подход» центрируем по видимой части, а не по всему блоку. */
  .intro-sequence-visual--video.hero-video-orb .hero-video-label {
    left: calc(var(--orb-visible) / 2);
  }
}