/* ======================================================================
   Новое меню «Московской клиники» — по макету Figma.
   Префикс nh- (new header). Пишется поверх theme.css, ничего не переопределяет.
   ====================================================================== */

/* На тестовой странице переменные несёт обёртка .nh, на боевом шаблоне
   обёртки нет — там их отдаёт body.nh-on (класс ставит main.tpl.php). */
.nh,
body.nh-on {
    --nh-blue:   #009BD1;
    --nh-ink:    #233040;
    --nh-grey:   #6B7888;
    --nh-red:    #ED4646;
    --nh-line:   #DCEBF7;
    --nh-shadow: 0 15px 48px 0 rgba(191, 191, 191, .35);
}

/* Шапка темы позиционирована (fixed) — от неё и считается панель.
   Своё position тут НЕ задаём, иначе ломается фиксация шапки. */
.header.nh-host .container { overflow: visible; }

/* Тема вешает на каждый li псевдоэлемент с неразрывным пробелом —
   он добавляет лишнюю строку и удваивает высоту пункта. Гасим в своих списках. */
.nh-nav li::before,
.nh-nav li::after,
.nh-panel li::before,
.nh-panel li::after,
.nh-mnav li::before,
.nh-mnav li::after {
    content: none !important;
}

.nh-nav li,
.nh-panel li,
.nh-mnav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================ шапка ============================
   Размеры сняты из макета: шапка 1200×153, логотип 85×45, gap 25px.
   Верхняя строка: padding 20px 0, space-between; правый блок gap 24px.
   ================================================================ */

/* Вертикаль по макету: внешних паддингов у шапки НЕТ — 153px набираются строками:
   верхняя 80 (20+40+20) + нижняя 73 (16+40+16 + линия 1px сверху). */
.nh-head {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nh-head__logo { flex: none; display: block; }
.nh-head__logo img { width: 85px; height: 45px; display: block; }

.nh-head__body { flex: 1 1 auto; min-width: 0; }

/* ---------- верхняя строка ---------- */

.nh-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 0;
}

.nh-top__left { display: flex; align-items: center; gap: 20px; min-width: 0; }

.nh-top__addr {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 700 14px/1 Manrope, sans-serif;
    color: var(--nh-blue);
    text-decoration: none;
    white-space: nowrap;
}

.nh-top__addr:hover { text-decoration: none; opacity: .8; }

/* Подписи станций в макете тёмные, а не серые. */
.nh-top__metro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 14px/1 Manrope, sans-serif;
    color: var(--nh-ink);
    white-space: nowrap;
}

.nh-top__pin { width: 16px; height: 16px; flex: none; }

/* Значки метро приходят из макета уже в своих цветах: красный и серый. */
.nh-top__m { width: 16px; height: 12px; flex: none; }


.nh-top__right { display: flex; align-items: center; gap: 24px; flex: none; }

/* иконки мессенджеров: 4 штуки 28×28, gap 10 */
.nh-soc { display: flex; align-items: center; gap: 10px; }

.nh-soc__i {
    width: 28px;
    height: 28px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity .15s ease;
}

.nh-soc__i:hover { opacity: .8; text-decoration: none; }

/* Иконки выгружены из макета целиком — своей подложки и цвета им не задаём. */
.nh-soc__ic { width: 28px; height: 28px; display: block; }
/* У бота из макета выгрузился только глиф — плашку под него задаём здесь,
   градиентом того же телеграм-синего, что и у соседних иконок. */
.nh-soc__i--bot {
    border-radius: 8px;
    background: linear-gradient(180deg, #2AABEE 0%, #229ED9 100%);
}

.nh-soc__ic--bot { width: 19px; height: 21px; }

/* Кнопка «Заказать звонок» — в макете без иконки, только текст.
   Контент 122×20 при padding 9px 16px даёт кнопку 154×40. */
.nh-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border: 1px solid var(--nh-blue);
    border-radius: 10px;
    font: 500 15px/20px Manrope, sans-serif;
    color: var(--nh-blue);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.nh-cta:hover { background: var(--nh-blue); color: #fff; text-decoration: none; }

/* кнопка версии для слабовидящих */
.nh-bvi {
    width: 50px;
    height: 40px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--nh-ink);
}

.nh-bvi:hover { opacity: .85; }
.nh-bvi__ic { width: 28px; height: 18px; color: #fff; }

/* ---------- нижняя строка ---------- */

.nh-bottom {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 0;
    border-top: 1px solid #F2F4F5;
}

.nh-phone {
    flex: none;
    font: 700 18px/1 Manrope, sans-serif;
    color: var(--nh-ink);
    text-decoration: none;
    white-space: nowrap;
}

.nh-phone:hover { text-decoration: none; color: var(--nh-blue); }

/* На бою у кнопки есть ещё класс темы search-link (он открывает поиск) —
   тема вешает на него свои отступы и раздувает кнопку до 46px, ломая высоту шапки.
   Поэтому размеры прибиты жёстко вместе с padding и box-sizing. */
.nh-search {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F2F4F5;
}

.nh-search:hover { background: #E6EAEC; }
.nh-search__ic { width: 24px; height: 24px; color: var(--nh-ink); }

/* Тема задаёт «.header .search-link» 46×46 — специфичность выше, чем у .nh-search.
   Перебиваем той же связкой, иначе кнопка раздувается и растит всю шапку до 152px. */
.header .nh-search.search-link,
.header .nh-search {
    width: 40px;
    height: 40px;
    padding: 0;
}

/* ---------- мобильная полоса шапки ---------- */

/* Раскладка та же, что в шапке открытого меню: логотип, сразу за ним телефон,
   кнопки прижаты вправо. Иначе телефон дёргается при открытии меню. */
.nh-mobbar { display: none; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; }

.nh-mobbar__phone {
    margin-right: auto;
    font: 700 16px/1 Manrope, sans-serif;
    color: var(--nh-ink);
    text-decoration: none;
    white-space: nowrap;
}

/* Телеграм — иконка из макета, подложка внутри неё. */
.nh-mobbar__tg {
    width: 30px;
    height: 30px;
    flex: none;
    display: inline-flex;
}

.nh-mobbar__tg-ic { width: 30px; height: 30px; display: block; }

/* ======================= десктопная навигация ======================= */

.nh-nav { flex: 1 1 auto; min-width: 0; margin-right: 24px; }

.nh-nav__list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nh-nav__item { position: static; }

.nh-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    padding: 10px 0;
    font: 500 16px/1 Manrope, sans-serif;
    color: var(--nh-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}

.nh-nav__link:hover,
.nh-nav__link:focus-visible { color: var(--nh-blue); text-decoration: none; }

.nh-nav__item--accent > .nh-nav__link { color: var(--nh-red); }

.nh-nav__chev { width: 10px; height: 7px; flex: none; }

.nh-nav__item.is-open > .nh-nav__link { color: var(--nh-blue); }

.nh-nav__item.is-open > .nh-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--nh-blue);
    border-radius: 2px;
}

/* ========================== выпадающая панель ========================== */

.nh-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px;
    max-width: calc(100vw - 32px);
    z-index: 60;
    padding: 24px;
    background: #fff;
    border-radius: 0 0 20px 20px;
    box-shadow: var(--nh-shadow);
}

.nh-panel[hidden] { display: none; }

.nh-panel__inner--num {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.nh-col {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nh-col > li + li { margin-top: 10px; }

.nh-num-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.nh-num {
    flex: none;
    min-width: 17px;
    font: 500 12px/20px Manrope, sans-serif;
    color: var(--nh-grey);
}

.nh-link {
    font: 500 15px/20px Manrope, sans-serif;
    color: var(--nh-ink);
    text-decoration: none;
    transition: color .15s ease;
}

.nh-link:hover,
.nh-link:focus-visible { color: var(--nh-blue); text-decoration: none; }

.nh-panel__inner--groups {
    display: grid;
    grid-template-columns: repeat(var(--nh-cols, 4), minmax(0, 1fr));
    align-items: start;
    column-gap: 24px;
    row-gap: 28px;
}

.nh-group__title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--nh-line);
    font: 700 14px/1.15 Manrope, sans-serif;
    text-transform: uppercase;
    color: var(--nh-blue);
}

/* Кликабельный заголовок группы — выглядит так же, подсветка только при наведении. */
.nh-group__title--link { text-decoration: none; transition: opacity .15s ease; }
.nh-group__title--link:hover,
.nh-group__title--link:focus-visible { text-decoration: none; opacity: .7; }

.nh-ic {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--nh-blue);
}

.nh-panel__foot {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--nh-line);
}

.nh-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 700 16px/1 Manrope, sans-serif;
    color: var(--nh-blue);
    text-decoration: none;
}

.nh-all:hover { text-decoration: none; opacity: .8; }
.nh-all__arrow { width: 14px; height: 12px; flex: none; }

/* Шеврон: в макете два отдельных глифа — тёмный вниз (закрыт) и синий вверх (открыт). */
.nh-chev--open { display: none; }
.is-open .nh-chev--closed { display: none; }
.is-open .nh-chev--open { display: inline; }

/* ---- пометка «ссылки нет в макете», только в тестовом режиме ---- */
.nh-todo { border-bottom: 1px dashed var(--nh-red) !important; }

/* ========================= мобильное меню ========================= */

/* По макету: разделителей МЕЖДУ пунктами нет.
   Линии есть только над и под всем списком (в макете это Line 4 / Line 5). */
.nh-mnav {
    padding: 20px 0;
    border-top: 1px solid var(--nh-line);
    border-bottom: 1px solid var(--nh-line);
}

/* Шаг между пунктами по макету 41px: строка 25px + нижний отступ 8px + gap 8px.
   Сверка: 9 пунктов * 33 + 8 промежутков * 8 = 361px — ровно высота списка в макете. */
.nh-mnav__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nh-mnav__link,
.nh-mnav__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0 0 8px;
    background: none;
    border: 0;
    text-align: left;
    font: 500 18px/25px Manrope, sans-serif;
    color: var(--nh-ink);
    text-decoration: none;
}

.nh-mnav__item--accent > .nh-mnav__link { color: var(--nh-red); }

.nh-mnav__chev { width: 12px; height: 8px; flex: none; }

/* Раскрытый пункт: синий заголовок и синяя линия под ним на всю ширину. */
.nh-mnav__item.is-open > .nh-mnav__toggle {
    color: var(--nh-blue);
    border-bottom: 1px solid var(--nh-blue);
}


.nh-mnav__body { padding: 16px 0 8px; }
.nh-mnav__body[hidden] { display: none; }

/* Колонки десктопа на мобилке вытягиваются в столбец: внутри группы 8px, между группами 24px. */
.nh-mnav__body .nh-panel__inner--num,
.nh-mnav__body .nh-panel__inner--groups {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.nh-mnav__body .nh-col > li + li { margin-top: 8px; }
.nh-mnav__body .nh-num-item { gap: 15px; }
.nh-mnav__body .nh-panel__foot { margin-top: 0; padding-top: 16px; }

/* ===================== бургер и шторка ===================== */

/* Кнопка меню по макету: 40×32, радиус 7, три белые полоски 22×3 с шагом 5. */
.nh-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
    flex: none;
    width: 40px;
    height: 32px;
    padding: 6px 9px 7px;
    margin-left: 0;
    background: var(--nh-blue);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.nh-burger span { display: block; height: 3px; background: #fff; border-radius: 2px; }

.nh-drawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.nh-drawer[hidden] { display: none; }

/* В мобильной шторке разделители нейтрально-серые (#E8EAEB из макета),
   а не голубоватые, как линии под заголовками групп в десктопной панели. */
.nh-hours .line { border-bottom-color: #E8EAEB; }
.nh-drawer .nh-mnav { border-color: #E8EAEB; }

/* Под шапкой шторки разделителя в макете НЕТ — линии начинаются только в расписании. */
.nh-drawer__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
}

.nh-drawer__logo img { width: 78px; height: auto; display: block; }

.nh-drawer__phone {
    margin-right: auto;
    font: 700 16px/1 Manrope, sans-serif;
    color: var(--nh-ink);
    text-decoration: none;
    white-space: nowrap;
}

/* Кнопки в шапке шторки: Telegram и закрытие — одинаковые голубые квадраты. */
.nh-drawer__btn {
    width: 40px;
    height: 32px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: var(--nh-blue);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

.nh-drawer__btn:hover { opacity: .85; text-decoration: none; }
.nh-drawer__btn-ic { width: 20px; height: 20px; color: #fff; }

/* Крестик по весу как полоски бургера (22×3), а не мелкая галочка */
.nh-drawer__btn-ic--x { width: 22px; height: 22px; }

.nh-drawer__body { padding: 4px 20px 40px; }

/* Расписание: Manrope 600 14px/140%.
   Шаг строк в макете ~33px = текст 19.6 + отступы 6/6 + разделитель. */
.nh-hours .line {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    padding: 6px 0;
    border-bottom: 1px solid var(--nh-line);
    font: 600 14px/1.4 Manrope, sans-serif;
    color: var(--nh-ink);
}

.nh-drawer__addr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0 6px;
}

.nh-drawer__addr a { font: 700 15px/1.2 Manrope, sans-serif; color: var(--nh-blue); text-decoration: none; }

.nh-drawer__metro {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-bottom: 16px;
}

/* Кнопка и мессенджеры стоят в макете одной строкой */
.nh-drawer__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 0 16px;
}

.nh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    border: 1px solid var(--nh-blue);
    border-radius: 10px;
    font: 500 15px/1 Manrope, sans-serif;
    color: var(--nh-blue);
    text-decoration: none;
}

body.nh-lock { overflow: hidden; }

/* ===== переключение десктоп / мобилка ===== */
@media (max-width: 991.98px) {
    .nh-nav { display: none; }
    .nh-burger { display: flex; }
    /* У .header темы уже есть свои 10px сверху — свой отступ не добавляем,
       иначе логотип и телефон стоят на 20px ниже, чем в открытом меню. */
    .nh-head { padding: 0; gap: 16px; align-items: center; }
    .nh-head__body { display: none; }
    .nh-mobbar { display: flex; }
    .nh-head__logo img { width: 78px; height: auto; }
}

/* Макет нарисован на 375px, но по его отступам минимум строки — 380px.
   Уже 380px поджимаем только воздух; размеры логотипа, иконок и бургера не трогаем.
   Отступы в шапке и в шторке меняются одинаково, чтобы телефон не сдвигался
   при открытии меню. */
@media (max-width: 379.98px) {
    .nh-head { gap: 12px; }
    .nh-mobbar { gap: 8px; }
    .nh-drawer__head { gap: 12px; }
}

/* 360–368px: даже с ужатыми отступами телефон 16px не помещается — на 1px мельче. */
@media (max-width: 368.98px) {
    .nh-mobbar__phone,
    .nh-drawer__phone { font-size: 15px; }
}

/* Совсем узкие экраны, до 320 включительно: поджимаем поля до 12px
   (у шапки — отрицательным полем, чтобы не трогать .container темы),
   логотип 70px, телефон 14px. Минимум строки — 316px.
   Шапка и шторка снова меняются одинаково — телефон не сдвигается. */
@media (max-width: 359.98px) {
    .nh-head { margin: 0 -8px; gap: 10px; }
    .nh-mobbar { gap: 6px; }
    .nh-head__logo img { width: 70px; }
    .nh-mobbar__phone { font-size: 14px; }

    .nh-drawer__head { padding: 20px 12px; gap: 10px; }
    .nh-drawer__logo img { width: 70px; }
    .nh-drawer__phone { font-size: 14px; }
}

@media (min-width: 992px) {
    .nh-mnav,
    .nh-drawer { display: none !important; }
}

/* ===== боевой шаблон: компенсация фиксированной шапки =====
   Тема держит .header фиксированной (z-index 9999) и резервирует её высоту
   отступом body (у старой шапки было 148px). Класс nh-on вешается на body
   в main.tpl.php только когда включена новая шапка, тест он не затрагивает. */
body.nh-on { padding-top: 153px; }
@media (max-width: 991.98px) { body.nh-on { padding-top: 64px; } }
@media (max-width: 359.98px) { body.nh-on { padding-top: 58px; } }