/* Шапка и подвал одинаковы на всех пяти шаблонах и обеих температурах:
   на переходе из витрины в блог человек не должен почувствовать, что попал
   на другой сайт. Меняется только полярность фона через токены. */
/* Шапка прозрачна над героем и окрашивается, когда он уехал.

   Смысл в том, что герой занимает весь экран: плашка поверх него срезала
   бы кадр сверху и сломала бы ощущение полноэкранного видео. Но стоит
   уйти ниже - и шапка обязана стать читаемой, иначе светлые ссылки лягут
   на светлый контент.

   Прозрачное состояние не остаётся без опоры: у ссылок появляется тень,
   потому что кадр ролика под ними может оказаться светлым, а шапка должна
   читаться при любом кадре. */
/* Над полноэкранным героем шапка ВЫНУТА ИЗ ПОТОКА.

   Липкая шапка (position:sticky) остаётся в потоке и занимает высоту,
   поэтому герой начинается под ней, а не от верха экрана: 100svh плюс
   высота шапки больше экрана, и низ героя уезжает. Ровно это и выглядело
   как «видео под хедером и не на весь экран».

   Fixed убирает шапку из потока: герой встаёт от нулевой точки, шапка
   ложится поверх. На страницах без героя шапка остаётся липкой - там
   она обязана толкать контент вниз, иначе первая строка текста окажется
   под ней. */
body.has-hero .site-header{position:fixed;left:0;right:0}
.site-header{position:sticky;top:0;z-index:35;
  border-bottom:1px solid transparent;background:transparent;
  transform:translateY(0);
  transition:transform var(--dur-1) var(--ease),
    background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),backdrop-filter var(--dur-2) var(--ease);
  will-change:transform}
/* Тень только над героем-видео. Страница без него красит шапку сразу
   (правило ниже), но класса is-solid не получает - и тень, рассчитанная
   на тёмный кадр под прозрачной шапкой, ложилась грязным свечением
   на кремовый фон посадочных и блога. */
body.has-hero .site-header:not(.is-solid) .wordmark,
body.has-hero .site-header:not(.is-solid) .site-nav a,
body.has-hero .site-header:not(.is-solid) .tel{text-shadow:0 1px 10px rgba(0,0,0,.55)}
.site-header.is-solid{border-bottom-color:var(--line);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(16px)}
/* Страница без полноэкранного героя красит шапку сразу: там прозрачная
   шапка висела бы над обычным текстом. */
body:not(.has-hero) .site-header{border-bottom-color:var(--line);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(16px)}
.site-header.is-hidden{transform:translateY(calc(-100% - 2px))}
.site-header .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;gap:8px var(--gap-3);padding-top:8px;padding-bottom:10px}
.wordmark{display:block;width:92px;height:58px;text-decoration:none;grid-row:2}
.wordmark img{display:block;width:100%;height:100%;object-fit:contain;transition:filter var(--dur-1) var(--ease)}
[data-temp="cream"] .wordmark img{filter:brightness(.24) sepia(.28) saturate(.82)}
/* ...но НЕ пока шапка прозрачна над героем. Там под логотипом тёмный
   кадр, и затемняющий фильтр делает знак почти невидимым. Кремовая тема
   начинается ниже героя, значит и перекраска логотипа - тоже.
   Как только шапка окрасится при прокрутке, фильтр вернётся. */
body.has-hero [data-temp="cream"] .site-header:not(.is-solid) .wordmark img,
[data-temp="cream"] body.has-hero .site-header:not(.is-solid) .wordmark img{filter:none}
.site-nav{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;
  line-height:1.35;letter-spacing:.025em;grid-row:2}
.site-nav a{text-decoration:none;color:var(--text-soft);transition:color var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease)}
.header-phones{display:flex;gap:var(--gap-3);align-items:center;grid-column:1/-1;
  grid-row:1;justify-self:end}
.site-header .tel{display:flex;align-items:baseline;gap:6px;font-family:var(--disp);font-size:15px;
  text-decoration:none;color:var(--accent);font-variant-numeric:lining-nums}
.site-header .tel small{font:600 9px/1.2 var(--ui);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim)}
.theme-toggle{display:grid;place-items:center;width:46px;height:46px;padding:0;
  background:transparent;border:1px solid var(--line);color:var(--text);
  cursor:pointer;transition:border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),background var(--dur-2) var(--ease)}
.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Значок показывает тему, в которую кнопка переключит: в кремовой - луна. */
.theme-toggle .icon-sun{display:none}
:root:not([data-temp="cream"]) .theme-toggle .icon-moon{display:none}
:root:not([data-temp="cream"]) .theme-toggle .icon-sun{display:block}
.theme-toggle-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.site-header .theme-toggle,.site-header .btn{grid-row:2}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line);color:var(--text);
  font:600 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;
  padding:12px 14px;cursor:pointer}

.contact-widget{position:fixed;right:max(var(--gap-3),env(safe-area-inset-right));
  bottom:max(var(--gap-3),env(safe-area-inset-bottom));z-index:40;
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--gap-2)}
.contact-fab{width:62px;height:62px;border-radius:50%;border:1px solid var(--accent);
  background:var(--accent);color:var(--accent-ink);cursor:pointer;
  display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.28);
  /* Кнопка приподнималась при наведении БЕЗ перехода: и подъём,
     и тень щёлкали. Единственное такое место на всём сайте - проверка
     покрытия переходами нашла его среди двадцати двух правил
     наведения, глазом его никто не замечал. */
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.contact-fab svg{width:29px;height:29px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-fab .icon-close{display:none}
.contact-fab[aria-expanded="true"] .icon-chat{display:none}
.contact-fab[aria-expanded="true"] .icon-close{display:block}
.contact-fab .icon-close{stroke-width:2}
/* Панель связи: главное действие сверху, дальше списки строк
   «значок - название - филиал». Высота ограничена экраном, лишнее
   прокручивается внутри панели, а не выталкивает её за край. */
.contact-panel{width:min(360px,calc(100vw - 32px));max-height:min(78svh,640px);overflow:auto;
  overscroll-behavior:contain;padding:var(--gap-3);
  background:var(--surface);color:var(--text);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.34)}
.contact-panel-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--gap-2);margin-bottom:var(--gap-2)}
.contact-panel-head strong{font-family:var(--disp);font-size:var(--step-1);font-weight:400}
.contact-panel-close{flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--text);
  font:400 22px/1 var(--ui);cursor:pointer;transition:border-color var(--dur-2) var(--ease)}
.contact-book{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;
  background:var(--accent);color:var(--accent-ink);text-decoration:none;
  font:600 12px/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
  transition:filter var(--dur-2) var(--ease)}
.contact-group-title{margin:var(--gap-3) 0 var(--gap-1);font:600 10px/1.2 var(--ui);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.contact-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.contact-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 2px;
  border-bottom:1px solid var(--line);color:var(--text);text-decoration:none}
.contact-icon{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;color:var(--accent);
  transition:border-color var(--dur-2) var(--ease)}
.contact-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-text{display:grid;gap:2px;min-width:0}
.contact-text b{font:600 14px/1.2 var(--ui)}
.contact-text small{font-size:12px;color:var(--text-dim)}

/* Липкая панель действий существует только на телефоне: на большом
   экране те же три действия стоят в шапке и никуда не уезжают, а внизу
   экрана заняли бы полосу без всякой причины. */
.action-bar{display:none}

.site-footer{border-top:1px solid var(--line);margin-top:0;padding:clamp(72px,8vw,116px) 0 var(--gap-5)}
/* Визитки филиалов. Правка клиента 03.09: были «слишком большие»
   и без карт. Карточка ужата примерно вдвое по высоте и разложена
   в две колонки - карта и текст рядом, а не текст в пустом поле.

   Декоративный повёрнутый квадрат, который раньше уходил за угол
   карточки, убран: у ::after нет своего слоя ниже iframe, и он лёг бы
   тонкой линией поверх карты. Терять карту ради узора нельзя. */
.branches{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-3)}
.branch{position:relative;min-height:240px;border:1px solid var(--line);padding:var(--gap-3);border-radius:0;
  overflow:hidden;display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:var(--gap-3);
  align-items:stretch;background:var(--surface)}
/* На широком экране карта тянется на всю высоту карточки, а ширину
   берёт у своей колонки: соотношение здесь задавать нельзя. Карточка
   стоит в резиновой сетке, и `aspect-ratio` считал бы ширину от высоты -
   карта вылезала бы из колонки и наезжала на телефон и «Маршрут».
   Соотношение включается ниже, на телефоне, где карта во всю ширину. */
.branch-map{position:relative;overflow:hidden;min-height:170px;border:1px solid var(--line);background:var(--bg)}
.branch-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.branch-index{position:absolute;right:0;top:0;font:400 clamp(40px,4vw,64px)/1 var(--disp);color:var(--accent);opacity:.12}
.branch-copy{position:relative;z-index:2;min-width:0}.branch h3{font-size:clamp(24px,2.4vw,34px);margin-bottom:var(--gap-1)}
.branch p{color:var(--text-soft);margin:0}
.branch .tel{display:block;margin-top:var(--gap-1);font-family:var(--disp);
  font-size:var(--step-1);color:var(--text);text-decoration:none;
  font-variant-numeric:lining-nums}
.branch-actions{display:flex;flex-wrap:wrap;gap:var(--gap-3);margin-top:var(--gap-3);font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase}
.branch-hours{display:flex;justify-content:space-between;gap:var(--gap-3);margin:var(--gap-3) 0 0;padding:var(--gap-3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.branch-hours span{color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em;font-size:var(--step--1)}
.branch-hours strong{font:400 var(--step-1)/1.2 var(--disp)}

@media (max-width:760px){
  .branches{grid-template-columns:1fr}
  /* На телефоне колонки не помещаются: карта в 44% ширины экрана
     перестаёт быть картой. Она встаёт над текстом во всю ширину. */
  .branch{grid-template-columns:1fr;min-height:0;padding:var(--gap-3)}
  .branch-map{width:100%;aspect-ratio:4/3;min-height:0}
  .branch-hours{flex-direction:column}
  .site-header .wrap{grid-template-columns:minmax(0,1fr) auto auto;
    gap:var(--gap-2);padding-top:10px;padding-bottom:10px}
  .wordmark{grid-column:1;grid-row:1;width:66px;height:44px}
  .nav-toggle{display:block;grid-column:2;grid-row:1}
  .site-header .btn{grid-column:3;grid-row:1;padding:12px 16px;font-size:10px}
  .site-nav,.header-phones,.site-header .theme-toggle{display:none}
  .site-header.menu-open{background:color-mix(in srgb,var(--bg) 98%,transparent)!important;border-bottom-color:var(--line);backdrop-filter:blur(24px)}
  .site-header.menu-open .wrap{max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:24px}
  .site-header.menu-open .wordmark img{filter:none}.site-header.menu-open .site-nav a,.site-header.menu-open .tel{text-shadow:none}
  [data-temp="cream"] .site-header.menu-open .wordmark img{filter:brightness(.24) sepia(.28) saturate(.82)}
  .site-header.menu-open .site-nav{display:grid;grid-template-columns:1fr;grid-column:1/-1;grid-row:2;
    width:100%;gap:0;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .site-header.menu-open .site-nav a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:11px 2px;border-bottom:1px solid var(--line);color:var(--text);font:400 19px/1.2 var(--disp);letter-spacing:.02em}
  .site-header.menu-open .site-nav a:last-child{border-bottom:0}.site-header.menu-open .site-nav a::after{content:'→';color:var(--accent);font-family:var(--ui)}
  .site-header.menu-open .header-phones{display:grid;grid-template-columns:1fr;grid-column:1/-1;grid-row:3;
    width:100%;gap:0;justify-self:start;border-bottom:1px solid var(--line)}
  .site-header.menu-open .header-phones .tel{display:flex;justify-content:space-between;min-height:50px;padding:12px 2px;border-bottom:1px solid var(--line);color:var(--accent)}
  .site-header.menu-open .header-phones .tel:last-child{border-bottom:0}
  .site-header.menu-open .theme-toggle{display:flex;align-items:center;gap:12px;
    grid-column:1/-1;grid-row:4;height:auto;
    justify-self:stretch;width:100%;padding:15px;text-align:left;background:color-mix(in srgb,var(--surface) 65%,transparent)}
  .site-header.menu-open .theme-toggle-text{position:static;width:auto;height:auto;
    overflow:visible;clip:auto;font:600 var(--step--1)/1 var(--ui);letter-spacing:.06em;
    text-transform:uppercase}
  .site-header .tel{font-size:16px}
  body.nav-open{overflow:hidden}
  .contact-widget{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}
  .contact-fab{width:56px;height:56px}
  /* На телефоне панель - во всю ширину над кнопкой: узкая карточка
     в углу оставляла пальцу строки по сорок пикселей. */
  .contact-panel{position:fixed;left:12px;right:12px;width:auto;
    bottom:calc(max(16px,env(safe-area-inset-bottom)) + 132px);max-height:70svh}
  /* Над кнопкой связи стоит ещё кнопка звука: панель поднимается выше
     обеих, иначе звук ложится на её последнюю строку. */
  body.has-action-bar .contact-panel{bottom:calc(var(--action-bar-h) + 148px)}

  /* Высота панели задана числом, а не измерена скриптом: она сложена из
     тех же величин, что стоят ниже у самой кнопки (54 px поля плюс
     верхняя линия), и служит отступом странице и подъёмом виджету связи.
     Безопасная зона внизу экрана прибавляется отдельно - на телефонах
     с жестовой полосой без неё подписи легли бы прямо на неё. */
  :root{--action-bar-h:calc(55px + env(safe-area-inset-bottom))}
  /* Панель тёмная при ЛЮБОЙ температуре, и цвета берутся напрямую из
     палитры, а не через роли темы. Причина та же, что у затемнения на
     кадре: кремовая полоса кнопок поверх страницы читается как обрыв
     страницы, а тёмная - как отдельный слой поверх неё. */
  .action-bar{position:fixed;bottom:0;inset-inline:0;z-index:41;
    display:grid;grid-template-columns:repeat(3,1fr);
    padding-bottom:env(safe-area-inset-bottom);
    background:color-mix(in srgb,var(--deep) 92%,transparent);
    backdrop-filter:blur(16px);
    border-top:1px solid color-mix(in srgb,var(--cream) 18%,transparent);
    transform:translateY(100%);opacity:0;visibility:hidden;
    transition:transform var(--dur-2) var(--ease),
      opacity var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
  /* Скрытая панель убирается и из порядка обхода с клавиатуры: уехавшая
     за край экрана ссылка, на которую можно встать табом, - это фокус
     в никуда. Задержка у visibility поэтому снимается только здесь. */
  .action-bar.is-visible{transform:translateY(0);opacity:1;visibility:visible;
    transition:transform var(--dur-2) var(--ease),
      opacity var(--dur-2) var(--ease),visibility 0s linear 0s}
  .action-bar-item{appearance:none;border:0;background:transparent;font:inherit;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    min-height:54px;padding:16px 8px;text-align:center;text-decoration:none;
    font:600 11px/1.1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
    color:var(--cream);
    border-left:1px solid color-mix(in srgb,var(--cream) 14%,transparent)}
  .action-bar-item:first-child{border-left:0}
  .action-bar-item.is-accent{background:var(--gold);color:var(--ink)}
  /* Подвал не должен уходить под панель: последняя строка контактов
     оказалась бы закрыта ровно тогда, когда до неё дочитали. */
  body.has-action-bar{padding-bottom:var(--action-bar-h)}
  /* Круглая кнопка связи поднимается над панелью, а не прячется: она
     ведёт к Telegram и MAX, которых в панели нет, и убрать её значило бы
     убрать два способа связи ради экономии места. */
  body.has-action-bar .contact-widget{
    bottom:calc(var(--action-bar-h) + 16px)}
}

@media (hover:hover){
  .site-nav a:hover{color:var(--text)}
  .theme-toggle:hover{border-color:var(--accent)}
  .contact-fab:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.34)}
  .contact-row:hover .contact-icon,.contact-panel-close:hover{border-color:var(--accent)}
  .contact-book:hover{filter:brightness(1.08)}
}