/* welawart — сайт-wide override-стиль темы.
 * Грузится на всех страницах ПОСЛЕ Tilda-CSS (см. functions.php), поэтому правит точечно,
 * не редактируя минифицированный Tilda-CSS и не трогая десктоп-фиделити сверх необходимого.
 *
 * Разделы:
 *   [A] Меню: равные отступы после переименования «Кейсы» → «Публикации» (правка 3).
 *   [B] Мобильная версия 360–768 (правка 2) — в конце файла.
 */

/* ============================================================
 * [A] МЕНЮ — равные отступы (правка 3)
 * Слово «Публикации» шире «Кейсы», поэтому пункт «Контакты» сместился бы влево и наехал.
 * Меню Tilda спозиционировано абсолютно (left в 1280-базовых px, артборд масштабируется по vw).
 * Исходные left: Услуги 96 · О компании 170 · Публикации 284 · Контакты 354 — пробелы между
 * пунктами были ровно 23px (1280-база). «Публикации» (~92px) длиннее «Кейсы» (~47px) на ~45px,
 * поэтому сдвигаем только «Контакты» вправо на ту же величину, сохраняя равные 23px-пробелы.
 * Применяем на десктопе/планшете (≥980px); ниже работает бургер-меню (rec2142073181). */
@media (min-width:980px){
  #rec2102260021 .tn-elem[data-elem-id="1774977258006000003"]{left:399px!important;}
}
/* Пункт «Публикации» был серым (#808080) — у остальных пунктов #201e1e. Выравниваем цвет
   (правка v7 №4): тот же цвет, что у «Услуги/О компании/Контакты». Ховер (.test) не трогаем. */
#rec2102260021 .tn-elem[data-elem-id="1774977257984000001"] .tn-atom,
#rec2102260021 .tn-elem[data-elem-id="1774977257984000001"] a{color:#201e1e!important;}

/* Подвал: редактируемый список соцсетей (ACF-repeater) на месте «MAX/Vkontakte» (правка v7 №1).
   Наследует кегль/цвет исходного атома; в один столбец, аккуратные строки. */
.wl-social{display:flex;flex-direction:column;gap:1px;}
.wl-social a,.wl-social span{display:block;color:#201e1e;text-decoration:none;line-height:1.5;white-space:nowrap;}
.wl-social a:hover{color:#790e2c;}

/* ============================================================
 * [C] ВИТРИНА КЕЙСОВ на главной — маленькое фото-обложка в карточке (правка 5)
 * Обложку (миниатюру записи кейса) вставляем внутрь плашки-карточки (rec9000002).
 * Пустое фото = элемента нет → карточка выглядит как раньше (десктоп и мобайл). */
#rec9000002 .tn-atom:has(.wl-case-photo){position:relative;}
/* Маленькое фото-обложка в НИЖНЕМ ЛЕВОМ углу карточки (как Obrazec 21). «Подробнее» этой карточки
   сдвигается вправо через PHP (translateX), поэтому фото и ссылка стоят на одной нижней линии. */
#rec9000002 .wl-case-photo{position:absolute;left:18px;bottom:18px;width:104px;height:78px;
  object-fit:cover;border-radius:3px;display:block;z-index:2;background:#e9e6da;}
@media (max-width:1279px){#rec9000002 .wl-case-photo{width:92px;height:70px;left:16px;bottom:16px;}}

/* ============================================================
 * [A2] ПОДВАЛ С КОНТАКТАМИ НА ДЕСКТОПЕ — вернуть (правка v7 №1).
 * Баг Tilda-экспорта: подвал (rec2119076631 телефоны/почта/соцсети + rec2119082311) вложен ВНУТРЬ
 * мобильной записи формы rec2119071311 (t-screenmax-980px), которая на десктопе display:none —
 * поэтому контакты «пропали» на десктопе. Раскрываем обёртку на ≥980, пряча её собственный
 * мобильный артборд формы (дублёр), но показывая вложенный подвал. (На мобайле подвал уже виден.) */
@media (min-width:980px){
  #rec2119071311{display:block!important;}
  #rec2119071311 > .t396{display:none!important;}
}
/* Правка v7 №8: запас ~5 строк внизу главной после контактов — задаётся в front-page.php
   (шеллы используют собственный <body> без WP-класса home, поэтому через инлайн-стиль страницы). */

/* ============================================================
 * [B] МОБИЛЬНАЯ ВЕРСИЯ (правка 2) — точечные фиксы overlap/overflow/схлопывания
 * на узких экранах, не затрагивая десктоп (всё под @media max-width).
 * ------------------------------------------------------------ */

/* --- Форма обратной связи на мобильных ---
 * Tilda держит отдельную запись формы для мобайла (rec2119071311, t-screenmax-980px), но
 * её зеро-слот фикс-позиционирован и схлопывается в 0 (наша нативная форма выше слота).
 * Выводим саму форму в нормальный поток с авто-высотой — на десктопе (≥980) не работает. */
@media (max-width:979px){
  /* Структурная особенность Tilda-экспорта (есть в исходных шеллах, не нами): десктоп-запись
     формы rec2119015581 (t-screenmin-980px) НЕ закрыта — внутрь неё попали мобильная запись
     формы (rec2119071311) и подвал. На мобильных обёртка display:none → форма и подвал исчезали
     («разрушено»). Растворяем обёртку (display:contents) и прячем только её собственный
     десктоп-артборд формы; вложенные записи (мобильная форма, подвал) встают в поток. */
  #rec2119015581{display:block!important;}
  #rec2119015581 > .t396{display:none!important;}
  /* Мобильная запись формы (rec2119071311) теперь видна и держит родную res-360 раскладку Tilda;
     наша нативная форма выше слота — даём артборду авто-высоту и не клипаем (костыль
     overflow:visible из welawart-form.css довершит). Тексты-CTA остаются на родных res-360 местах. */
  #rec2119071311 .t396__artboard,
  #rec2119071311 .t396__filter,
  #rec2119071311 .t396__carrier{height:auto!important;min-height:0!important;overflow:visible!important;}
}

/* --- Главная, секция «Услуги»: ссылки «подробнее» наезжали друг на друга ---
 * В res-360 у всех пяти ссылок top ≈635–655px (свалены в кучу у карточек 1–2), хотя названия
 * карточек стоят на 295/631/967/1413/1749px. Возвращаем каждую ссылку под её карточку
 * (top названия + 285px ≈ низ карточки). Только мобайл — десктоп не затронут. */
@media (max-width:639px){
  #rec2118999731 .tn-elem[data-elem-id="1780738895189000001"]{top:580px!important;}  /* → subscription-support (Абонентское, 295) */
  #rec2118999731 .tn-elem[data-elem-id="1780738913116000002"]{top:916px!important;}  /* → intellectual-property (Интеллект., 631) */
  #rec2118999731 .tn-elem[data-elem-id="1780739004888000003"]{top:1252px!important;} /* → business-structuring (Структур., 967) */
  #rec2118999731 .tn-elem[data-elem-id="1780739016957000004"]{top:1698px!important;} /* → legal-disputes (Судебные, 1413) */
  #rec2118999731 .tn-elem[data-elem-id="1780739061198000005"]{top:2034px!important;} /* → contractual-work (Договоры, 1749) */
}

/* ============================================================
 * [D] ЛЕНТЫ/«Публикации» — рубрикатор (rec2300000010, общий для publikacii/cases/novosti/sovety/dokumenty)
 * ------------------------------------------------------------ */

/* [D1] ДЕСКТОП — «Смотреть всё» в ОДИН ряд с рубриками (замечание Руслана №1).
 * Колонка контента узкая (≈610px на 1280); рубрикам нужно ~647px → «Смотреть всё» переносился на
 * 2-ю строку (flex-wrap:wrap + margin-left:auto на хвосте). Запрещаем перенос и поджимаем gap →
 * категории слева, «Смотреть всё» справа НА ТОЙ ЖЕ строке (проверено 1024–1440: 1 ряд, без переполнения). */
@media (min-width:980px){
  #rec2300000010 .cl-rubr{flex-wrap:nowrap!important;gap:14px!important;}
  #rec2300000010 .cl-rubr__item{white-space:nowrap!important;}
  #rec2300000010 .cl-rubr__tail{flex:0 0 auto!important;gap:14px!important;}
}

/* [D2] МОБАЙЛ — «← На главную» (cl-home, absolute top92) наезжал на рубрикатор (top88).
 * Возвращаем «На главную» в поток над рубрикатором (как на страницах статей) → перекрытия нет;
 * сам рубрикатор на узких экранах спокойно переносится в 2–3 строки (это нормально для фильтра). */
@media (max-width:979px){
  #rec2300000010 .cl-home{position:static!important;display:inline-block!important;margin:0 0 14px!important;}
  #rec2300000010 .cl-rubr{margin-top:0!important;}
}

/* ============================================================
 * [E] Доступность/полировка (объективные UX/a11y, десктоп-вид не меняют)
 * ------------------------------------------------------------ */

/* [E1] Видимый фокус для клавиатурной навигации (показывается ТОЛЬКО при tab-навигации,
 * мышиный клик его не вызывает → внешний вид сайта не меняется). */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
.wl-form input:focus-visible,.wl-form textarea:focus-visible,.wl-submit:focus-visible{
  outline:2px solid #790e2c!important;outline-offset:2px!important;
}

/* [E2] Мобайл: подписи формы и тизеры лент не мельче ~13–15px (читаемость, без iOS-зума у инпутов
 * это уже сделано в welawart-form.css). Только мобайл — десктоп-кегль не трогаем. */
@media (max-width:639px){
  .wl-form .wl-lab{font-size:13px!important;}
  #rec2300000010 .cl-card__teaser{font-size:15px!important;line-height:1.4!important;}
  /* увеличенная зона тапа для ссылок-согласий формы (тач-цель) */
  .wl-form .wl-consent{padding:4px 0!important;}
}