/*!
 * TOI-7715 — клавиатурный фокус не уходит в невидимые выпадашки.
 * Наряд из приёмки TOI-5929 выката TOI-5678 (site-wide focus ring).
 *
 * ДЕФЕКТ (сплошной обход табом, живой прод 2026-08-17, 511 остановок):
 * контейнеры выпадашек закрыты через `opacity: 0` + `pointer-events: none`,
 * но ссылки внутри остаются в tab-порядке. Пользователь клавиатуры жмёт Tab
 * «в пустоту»: WCAG 2.4.3 (Focus Order) + 2.4.7 (Focus Visible). По замеру —
 * не 9 остановок, а до 24 на страницу, ЧЕТЫРЬМЯ разными носителями:
 *
 *   div.header__drop            op0   @1440  9 стопов (подуслуги в шапке)
 *   div.header__mobile-container op0  @390  15 стопов (9 подуслуг + 5 разделов + mail)
 *   div.footer__drop            op0   @390   9 стопов (подуслуги в футере)
 *   header.header.hide          op0   @390   2 стопа (логотип, «Let's chat»)
 *   div.header__drop--second-level left:100vw @390 9 стопов при ОТКРЫТОМ бургере
 *
 * ПОЧЕМУ НЕ `visibility: hidden` И НЕ `inert`, как предлагал наряд.
 * Оба УБИРАЮТ эти ссылки из tab-порядка — а открыть выпадашку с клавиатуры на
 * этом сайте НЕЛЬЗЯ ни одну: десктопная открывается только `:hover`
 * (`.header__nav-item.drop:hover .header__drop`, у самого пункта «Services»
 * НЕТ остановки таба — замер @1440: логотип → «About us» → сразу 9 подуслуг),
 * а мобильные — только `click` по `div.header__burger` /
 * `div.header__nav-item.drop` / `div.second-level__back`, ни один из которых не
 * фокусируется. То есть `visibility: hidden` убрал бы 24 слепых остановки и
 * вместе с ними ЕДИНСТВЕННЫЙ клавиатурный путь к девяти страницам подуслуг:
 * дефект 2.4.3 превратился бы в 2.1.1. Это ровно та ловушка, в которую уже
 * заходил TOI-3220 и из которой TOI-3359 вышел (см. шапку
 * assets/js/a11yCarouselFocus.js, механизм 2: «реальные слайды НЕ вынимаем из
 * tab-порядка, потому что у 9 из 11 каруселей нет фокусируемой навигации»).
 *
 * ЧТО СДЕЛАНО ВМЕСТО: выпадашка РАСКРЫВАЕТСЯ, когда фокус оказался внутри неё
 * (`:focus-within`). Слепая остановка становится видимой — с тем же кольцом,
 * что и все остальные. Ничего не удаляется из tab-порядка, поэтому застрять
 * невозможно в принципе, и заодно появляется клавиатурный доступ к меню,
 * которого не было.
 *
 * ПРАВКА ТОЛЬКО ДЛЯ КЛАВИАТУРЫ. `:focus-within` у мыши и тача на этих
 * контейнерах не наступает (ссылки внутри закрытой панели недостижимы курсором
 * — `pointer-events: none`), поэтому поведение мыши/тача не меняется. Та же
 * дисциплина, что в TOI-6131 и TOI-3359.
 *
 * СПЕЦИФИЧНОСТЬ, А НЕ ПОРЯДОК. Каждое правило ниже добавляет `:focus-within`
 * к тому же селектору, что задаёт закрытое состояние, поэтому оно выигрывает
 * каскад независимо от того, раньше или позже newStyle.css подключён файл.
 * `!important` не нужен нигде — и не ставится: он мешал бы теме закрыть панель.
 *
 * МЕДИА-ГРАНИЦЫ ОБЯЗАТЕЛЬНЫ. Правила 2-4 повторяют геометрию открытого
 * состояния, которая в теме объявлена ТОЛЬКО внутри @media (max-width: 768px):
 * `left: 100vw` у `.header__drop--second-level` там же (newStyle.css:823), а на
 * десктопе у той же панели `left` не задан вовсе. Безусловный `left: 0`
 * СДВИНУЛ БЫ десктопную выпадашку.
 */

/* 1. Выпадашка подуслуг в шапке (десктоп). Открытое состояние — копия
      `.header__nav-item.drop:hover .header__drop` (newStyle.css:207). */
.header__drop:focus-within {
  opacity: 1;
  transform: translateY(0px);
  pointer-events: all;
  transition: 0.3s ease;
}

@media (max-width: 768px) {
  /* 2. Панель бургер-меню. Копия `.header__mobile-container.active`
        (newStyle.css:787). Закрытая панель живёт на `top: -100vh`, поэтому
        одной opacity мало. */
  .header__mobile-container:focus-within {
    top: 0;
    opacity: 1;
    pointer-events: all;
    transition: 0.3s ease;
  }

  /* 3. Второй уровень внутри бургера. Копия
        `.header__drop--second-level.active` (newStyle.css:833). Эта панель
        закрыта не прозрачностью, а выносом на `left: 100vw` — при открытом
        бургере её 9 ссылок дают не `hidden-element`, а `offscreen`. */
  .header__drop--second-level:focus-within {
    left: 0;
    pointer-events: all;
    transition: 0.3s ease;
  }

  /* 4. Панель услуг в футере. Копия `.footer__services .footer__drop.active`
        (newStyle.css:5984). На >=769px панель раскрыта постоянно и правило
        `.active` там не существует (TOI-6378), поэтому и это — внутри @media. */
  .footer__services .footer__drop:focus-within {
    opacity: 1;
    pointer-events: initial;
  }
}

/* 5. Шапка, скрытая при скролле. `.header.hide` (newStyle.css:80) гасит весь
      header в opacity 0; при открытом бургере в него уезжают логотип и
      «Let's chat» — 2 слепые остановки. Фокус внутри скрытой шапки означает,
      что шапка обязана быть видимой. */
.header.hide:focus-within {
  opacity: 1;
}

/* 6. Кольцо стрелки карусели, обрезанное overflow-предком (п.2 наряда).
      Замер @1440 `/blog/`: `.cases-next` в боксе 1255,782 55x55, а
      `section.cases-sample { overflow: hidden }` начинается на y=785 — то есть
      сам элемент на 2-3 px выше клип-бокса, и кольцо с наружным offset 2px
      теряет 4 px сверху. Рисуем ВНУТРЬ — тот же карв-аут 1 конвенции
      TOI-3547, что уже применён к `.grey-btn`, пагинации и чипам: кольцо целиком
      внутри бокса обрезано быть не может (геометрия — в шапке tabwalk2.py).
      Правило одно на оба направления: prev-стрелка стоит в том же ряду и режется
      тем же предком, просто в замере на неё не пришлось остановки. */
.services-slider-list__arrow:focus-visible {
  outline-offset: -2px;
}