/* ============================================================================
   onetoconsult.com — A11Y OVERRIDE (окно D, 2026-09-23) · v1 · применён 2026-09-23 (этап 2), v1.4 применён 2026-09-23 20:11 (этап 3), v1.5 применён 2026-09-23 21:00 (этап 4), v1.5.1 (мобайл без выключки)
   Источник находок: HANDOFFS/O2C_AUDIT/04_DESIGN_UX_AUDIT.md (D-xx).
   Подключение (окно C, functions.php темы lptheme), после style.min.css:
     wp_enqueue_style('lptheme-a11y', get_template_directory_uri().'/assets/css/a11y.css', ['lptheme-style'], '1.0');
   (handle основного стиля уточнить: `wp_style_is`/grep wp_enqueue_style в functions.php; если handle иной — подставить).
   Альтернатива: дописать блок в КОНЕЦ style.min.css. Правила специфичнее оригинала или с !important —
   там, где оригинал сам ставит !important (.scrolled) или инлайн-стили GSAP (transform).
   Все числа контраста — WCAG 2.x; замер после применения — fix/D_APPLY_LOG.md.
   ========================================================================== */

/* ---------- 1. Видимый фокус (D-08) · WCAG 2.4.7 / 1.4.11 ---------------- */
/* Двухцветное кольцо: чёрный контур + белый зазор. На любом фоне сайта хотя бы одно
   из колец ≥ 3:1: чёрное на белом 16,86, на #00ff8c 12,59; белое на navy 16,34, на кнопке #1d1d1d 16,86. */
.btn:focus-visible,
.btn-small:focus-visible,
.panel-close:focus-visible,
button[data-panel]:focus-visible {
  outline: 3px solid #1d1d1d !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #ffffff !important;
}
.input-field:focus-visible {
  outline: 3px solid #1d1d1d !important;
  outline-offset: 2px;
  border-color: #1d1d1d;
}
a:focus-visible,
.main-nav a:focus-visible {
  outline: 3px solid #1d1d1d;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #ffffff;
  border-radius: 4px;
}
/* Фокус мышью не подсвечиваем (только клавиатура) — :focus-visible это делает сам. */

/* ---------- 2. Плейсхолдеры ≥ 4,5:1 (D-03) · WCAG 1.4.3 ------------------- */
/* было: color: rgba(29,29,29,.4) → 2,47:1 на белом, 2,51 в Contacts.
   стало: #595959 → 7,0:1 на белом; 6,6:1 на поле поверх зелёного фото (226,255,241); 6,1:1 на white/70 над #00ff8c. */
.input-field::placeholder {
  color: #595959 !important;
  opacity: 1;
}
/* Рамки полей (D-17): было #e2e7f7 → 1,23:1; стало #7d86a8 → 3,59:1 (граница UI ≥ 3:1). */
.input-field,
.panel-content .input-field {
  border-color: #7d86a8;
}
.input-field.error,
.panel-content .input-field.error {
  border-color: #d90000; /* 5,3:1 на белом, цвет + текст ошибки (D-04, разметка в MD) */
}

/* ---------- 3. Шапка .scrolled над navy (D-13) · WCAG 1.4.3 --------------- */
/* было: rgba(255,255,255,.3) + blur → над #0f1c4a пиксели (88,96,128), чёрный текст/лого 2,76:1.
   стало: белый .96 → над navy (245,246,248) → 15,6:1; над #00ff8c (245,255,250) → 16,5:1. Blur оставлен. */
/* Оригинал `body .scrolled{background-color:#ffffff4d!important}` лежит в Tailwind `@layer components`.
   Для !important порядок слоёв обратный: более ранний слой побеждает, а правило вне слоёв проигрывает
   любому слою. Поэтому правило положено в слой `theme` (объявлен первым в style.min.css) — замер
   18:05 UTC: вне слоя шапка оставалась 30 % белого (пиксели 3,99:1). */
@layer theme {
  .header.scrolled,
  body .scrolled {
    background-color: rgba(255, 255, 255, 0.96) !important;
  }
}

/* ---------- 4. Тап-цели ≥ 44 px (D-33, D-34) · WCAG 2.5.8 ----------------- */
/* Бургер: было 40×30 */
button[data-panel="mobilePanel"] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}
/* Крестик панелей: было 30×30, на мобайле внизу по центру; стало 44×44, всегда вверху справа.
   Линии крестика (::before/::after) остаются 30 px — визуально не меняется. */
.panel-close {
  width: 44px !important;
  height: 44px !important;
  top: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  translate: 0 0 !important;
}
@media (min-width: 64rem) {
  .panel-close { top: 24px !important; right: 40px !important; }
}
/* Ссылки контактов (370×19) и футера (92×21): высота строки ≥ 44 без сдвига текста */
#contacts a.title,
#main-footer a,
.copyrights {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Ссылки внутри юридического текста (18 px): вертикальный padding у inline расширяет зону клика */
.editor-area a {
  padding-block: 0.7em;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
/* Логотип в шапке (D-33): ссылка 81×30 на мобайле → зона касания 46 px без сдвига вёрстки (padding + отрицательный margin) */
#header .header-logo a {
  display: inline-flex;
  align-items: center;
  padding-block: 8px;
  margin-block: -8px;
}
/* Пункты мобильного меню уже 51 px — не трогаем. */

/* ---------- 5. Выделение текста (D-12) ------------------------------------ */
/* было: html{user-select:none} — нельзя скопировать e-mail/@telegram. */
html, body {
  -webkit-user-select: text !important;
  user-select: text !important;
}
/* img/video{pointer-events:none} оставлено: декор, кликов по ним нет. */

/* ---------- 6. prefers-reduced-motion (D-18, D-19, D-20, D-21, D-23) -------- */
/* CSS перекрывает инлайн-стили GSAP через !important (transform/opacity) и гасит
   transition/animation. Typing, Lenis и пин ScrollTrigger дополнительно глушатся JS-патчем
   (D_A11Y_PATCH.md §4.2) — CSS их только страхует. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Бегущая строка (20 × «4 steps to success ✱»): стоит на месте */
  .reeller-item {
    transform: none !important;
  }
  /* Посимвольные заголовки и fade-in: видны сразу */
  .fade-in,
  [scrub-text] .char,
  [scrub-text] .word,
  .scrub-text .char,
  .scrub-text .word {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
  /* Пин-реелы: без пина, карточки листаются пальцем/колесом горизонтально */
  .pin-spacer {
    height: auto !important;
    padding: 0 !important;
  }
  .services-wrap,
  .steps-wrap {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    width: auto !important;
  }
  .services-reel__inner,
  .steps-reel__inner {
    transform: none !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .services-reel__inner > *,
  .steps-reel__inner > * {
    scroll-snap-align: start;
  }
  /* Прелоадер: не показывать */
  .loader {
    display: none !important;
  }
  /* Автоплей-видео без poster (D-23): скрыть, фон секции остаётся (#00ff8c / navy) */
  video[autoplay] {
    display: none !important;
  }
  /* Typing в hero: контейнер не фиксируем по ширине (JS ставит width — снимаем) */
  .dynamic-words {
    width: auto !important;
  }
}

/* ---------- 7. Необязательно, но дёшево (вне §0 брифа — на решение оркестратора) ---- */
/* D-14: хвост градиента на наборном тексте 4,45:1 → alpha .72 даёт 6,66:1 на белом, 5,94 на #00ff8c */
.gradient-text {
  background-image: linear-gradient(90deg, #1d1d1d 0%, rgba(29, 29, 29, 0.72) 100%) !important;
}
/* D-16: ✱ в бегущей строке #626C90 → 3,16:1; стало #9aa3c4 → 6,54:1 */
.reeller-item .subline.text-\[\#626C90\] {
  color: #9aa3c4 !important;
}
/* Класс для визуально скрытых <label> из D_A11Y_PATCH.md §2 (в теме .sr-only нет) */
.a11y-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Skip-link (D-11): скрыт над экраном, виден только при фокусе с клавиатуры */
.a11y-skip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2000;
  padding: 12px 16px;
  background: #ffffff;
  color: #1d1d1d;
  font-size: 16px;
  text-decoration: underline;
  transform: translateY(-300%);
}
.a11y-skip:focus {
  transform: none;
  outline: 3px solid #1d1d1d;
  outline-offset: 3px;
}
/* Текст ошибки под полем (D-04) */
.a11y-error {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.3;
  color: #b30000; /* 7,6:1 на белом */
}
.input-field:not(.error) + .a11y-error {
  display: none;
}

/* ---------- 8. Этап 2b (после пакета A: футер-nav «Legal» и строка согласия) ---------- */
/* Футер на 390: «Terms of Service» переносился на 3 строки (63 px). Ссылки не рвём, ряд переносится целиком. */
#main-footer nav[aria-label="Legal"] a {
  white-space: nowrap;
}
#main-footer .justify-between {
  flex-wrap: wrap;
  row-gap: 8px;
}
/* Ссылки в строке согласия были неотличимы от текста (тот же #1d1d1d, без подчёркивания) · WCAG 1.4.1.
   Цвет тот же (14,2:1 на зелёном Get in Touch, 16,86 в белой панели), различие — подчёркиванием. */
.form-consent a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.form-consent a:hover {
  text-decoration-thickness: 2px;
}

/* ---------- 9. Этап 3 (новые тексты hero/About; решение Den по моку raw/D_mock_stage3_*) ---------- */
/* Hero: ротатор .dynamic-words скрыт (шаблон, окно A), H1 «General Partner in U.S. Real Estate» — 3 строки на 1440, 2 на 390.
   top:.3em у H1 был подгонкой под ротатор — снимаем. Подзаголовок: одно предложение, Onest 20/1.4, ≤ 640 px
   (мок: 84 px / 3 строки на 1440, 90 px / 4 строки на 390; низ CTA 779 при высоте экрана 900). */
/* v1.5: ротатор .dynamic-words возвращается (этап 4, A), но правило ОСТАЁТСЯ: с двухстрочным H1 «Investments in U.S. Real
   Estate» исходный top:.3em темы (33 px на 1440) сажает вторую строку H1 на строку курсива — мок raw/D_stage4_mock_sub_hero_rotator_1440.png
   (наложение) vs …_top0_… (без). При top:0 низ H1 = верх ротатора, зазора и наложения нет. */
.hero-heading {
  top: 0 !important;
}
.hero-subtitle {
  margin-top: 24px;
  max-width: 640px;
  font-family: Onest, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
}
@media (max-width: 47.99rem) {
  .hero-subtitle {
    margin-top: 16px;
    font-size: 16px;
  }
}
/* Карточки About: тексты длиннее, колонка 200 px давала 9–11 строк / 485 px. Без лимита ширины, 16–17 px
   (мок: 5 строк / 112 px, карточка 334 px на 1440, 174 px на 390). Заголовок — <strong> в ACF-поле карточки. */
.trigger-card .title {
  max-width: none;
  font-size: 16px;
  line-height: 1.4;
}
/* v1.5: заголовок карточки — см. §10.1 (SplitType ломал block и делал текст прозрачным). */
@media (min-width: 80rem) {
  .trigger-card .title {
    font-size: 17px;
  }
}
/* ---------- 10. v1.5 — замечания Den по живой главной 23.09 (приёмка этапа 3, D_APPLY_LOG §6–§7) ---------- */
/* 10.1 Плашки About. Причина дефекта: initHeadingAnimations → SplitType (types: words, chars) обходит вложенные
   элементы и ставит им инлайн `display:inline-block; position:relative`. Родитель .title красит текст фоном
   (background-clip:text, -webkit-text-fill-color:transparent наследуется) — позиционированный потомок в эту маску
   не попадает → <strong> рисовался ПРОЗРАЧНЫМ, а его место на первой строке оставалось («Business» с отступом,
   «From» у правого края). Лечение: заголовку — свой непрозрачный цвет и block через !important (инлайн-стиль
   без !important проигрывает); тексту (.card-text, разметка A этапа 4) — свой градиент как у .title. */
.trigger-card .title {
  width: 100%;
}
.trigger-card .title strong,
.trigger-card .title b,
.trigger-card .card-title {
  display: block !important;
  position: static !important;
  -webkit-text-fill-color: #fff;
  color: #fff;
  margin: 0 0 0.4em;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 500;
}
.trigger-card .card-text {
  display: block !important;
  margin: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 10.2 Срезанные выносные («g» в Management, «gy» в Technology): .gradient-text рисует текст фоном, обрезанным по
   боксу элемента, а line-height 100 % у .heading-3 (102 % у .title) короче выносных → нижняя часть букв без фона.
   Поле снизу расширяет фон, отрицательный margin возвращает геометрию. */
.serv-card .heading-3.gradient-text,
.step-card .title.gradient-text,
#contacts .title.gradient-text,
#contacts .title-lg.gradient-text {
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}
/* 10.3 Описания услуг «газетной колонкой»: ширина у всех 5 карточек одинаковая (578 px на 1440, 218 на 390),
   ровный правый край — выключка + автопереносы (html lang=en-US). Вариант «левый край без выключки» =
   удалить это правило (скрины raw/D_stage3_fix_afterL_* vs afterJ_*). */
.serv-card p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  text-wrap: pretty;
}
/* v1.5.1: на 390 колонка 218 px / 14 px даёт «реки» при выключке (raw/D_stage4_after_services_start_390.png) — на мобайле левый край */
@media (max-width: 47.99rem) {
  .serv-card p {
    text-align: left;
    hyphens: manual;
  }
}
/* 10.4 Контакты: телефон в колонке 288 px (xl) ломался на 2 строки («264-⏎9529»); WhatsApp-ссылка со знаком
   (assets/icons/whatsapp.svg, currentColor). У .gradient-text svg фоном не красится — цвет иконки задаём явно. */
#contacts a[href^="tel:"],
#contacts .wa-link {
  white-space: nowrap;
}
@media (min-width: 80rem) and (max-width: 99.99rem) {
  #contacts .title-lg {
    font-size: 28px;
  }
}
.wa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.wa-icon {
  width: 1em;
  height: 1em;
  flex: none;
  color: #1d1d1d;
}
/* 10.5 prefers-reduced-motion: рилы услуг/шагов без пина были горизонтальным скроллом внутри overflow:hidden —
   карточки 3–5 недостижимы с клавиатуры и незаметны. Теперь сетка с переносом. */
@media (prefers-reduced-motion: reduce) {
  .services-reel__inner,
  .steps-reel__inner {
    flex-wrap: wrap;
    overflow: visible !important;
    row-gap: 20px;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  .services-reel__inner > .spacer,
  .steps-reel__inner > .spacer {
    display: none !important;
  }
  .services-reel {
    margin-right: 0 !important;
  }
  .serv-card,
  .step-card {
    flex: 0 0 auto;
    max-width: 100%;
  }
}
/* ========================================================================== */