/*
 * Навігація напрямів (OpenSpec napriamky-new-navigation).
 * Токени UI Kit (design/tokens.css): sea-blue #005C90, celadon-blue #0084AD, ball-blue #26AACC,
 * light-graphite #787E80, very-light-grey #D4DBDE, anti-flash-white #F0F4F9, tint-blue-1 #EEFAFF.
 * Шрифти теми: --ff-base (Geologica, заголовки), --ff-nort (FF Nort, текст).
 */
.snav-panel,
.snav-m,
.snav-block,
.mobile-menu__content {
    --snav-ink: var(--dark-grey, #242c33);
    --snav-text: var(--text-color, #3e3e40);
    --snav-muted: #787e80;
    --snav-line: #d4dbde;
    --snav-bg: var(--bg-content, #f0f4f9);
    --snav-tint: #eefaff;
    --snav-brand: #0084ad;
    --snav-deep: var(--sea-blue, #005c90);
}

/* ---------- верхні пункти ---------- */
.snav-trigger {
    font: inherit;
    text-transform: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}
/* Стрілка — штатна .dd-menu::after теми (поворот на .is-open). */
.snav-trigger.is-open { color: var(--sea-blue, #005c90); }
.snav-trigger:focus-visible { outline: 2px solid #0084ad; outline-offset: 4px; border-radius: 4px; }

/* +2 верхні пункти. Шапка не повинна ширшати за вікно (інакше боковий скрол),
   а лого — стискатися: меню займає вільне місце між лого й кнопками,
   пункти розподіляються рівномірно, кегль залежить від ширини. */
@media (min-width: 1200px) {
    .header__bot .header__logo { flex-shrink: 0; }
    .header__bot .header__control { flex-shrink: 0; }
    .header__nav { flex: 1 1 auto; min-width: 0; margin: 0 clamp(16px, 2vw, 40px); }
    .header__menu { justify-content: space-between; gap: 8px; }
    .header__menu-item, .header__menu-link { white-space: nowrap; }
    .header__menu-item { font-size: 16px; }
    .header .dd-menu::after { width: 16px; height: 16px; background-size: 16px; }
}
@media (min-width: 1200px) and (max-width: 1599px) {
    .header__menu-item { font-size: 14px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .header__menu-item { font-size: 13px; }
    .header__nav { margin: 0 14px; }
    .header__bot .header__control { gap: 8px; }
}

/* ---------- десктопна панель ---------- */
.snav-panel { overflow: hidden; }
.snav-panel__inner {
    max-width: var(--container-width, 1520px);
    margin: 0 auto;
    padding: 0 var(--container-padding, 20px);
    height: 100%;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
}
.snav-side {
    border-right: 1px solid var(--snav-line);
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 24px;
}
.snav-search {
    padding: 0 20px 14px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid var(--snav-line);
}
.snav-search__input {
    width: 100%;
    font: 400 15px/1.3 var(--ff-nort, sans-serif);
    padding: 11px 14px;
    border: 1px solid var(--snav-line);
    border-radius: 10px;
    background: var(--snav-bg);
    color: var(--snav-ink);
}
.snav-search__input:focus { outline: 2px solid var(--snav-brand); outline-offset: -1px; background: #fff; }
.snav-kid {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 400 14px/1.3 var(--ff-nort, sans-serif);
    color: var(--snav-muted);
    cursor: pointer;
}
.snav-kid input { width: 16px; height: 16px; accent-color: var(--snav-brand); }
.snav-hubs {
    list-style: none;
    margin: 0;
    padding: 10px 14px 24px 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.snav-hub {
    width: 100%;
    display: block;
    text-align: left;
    font: 400 16px/1.25 var(--ff-nort, sans-serif);
    color: var(--snav-ink);
    background: none;
    border: 0;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}
.snav-hub:hover { background: var(--snav-bg); }
.snav-hub[aria-current='true'] { background: var(--snav-brand); color: #fff; }
.snav-panel.is-searching .snav-hub[aria-current='true'] { background: var(--snav-tint); color: var(--snav-deep); }
.snav-hub:focus-visible { outline: 2px solid var(--snav-brand); outline-offset: 2px; }

.snav-detail {
    padding: 28px 0 32px 36px;
    overflow-y: auto;
    min-height: 0;
}
.snav-map__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    padding-bottom: 16px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--snav-line);
}
.snav-eyebrow {
    flex-basis: 100%;
    font: 500 12px/1.2 var(--ff-nort, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--snav-muted);
}
.snav-map__title {
    font: 400 32px/1.05 var(--ff-base, sans-serif);
    letter-spacing: -0.04em;
    color: var(--snav-deep);
    margin: 0;
}
.snav-map__title a { color: inherit; text-decoration: none; }
.snav-map__title a:hover { color: var(--snav-brand); }
.snav-map__page {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    padding: 8px 16px;
    border: 1.5px solid var(--snav-brand);
    border-radius: 999px;
    font: 500 14px/1.2 var(--ff-nort, sans-serif);
    color: var(--snav-brand);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.snav-map__page:hover { background: var(--snav-brand); color: #fff; }

/* ---------- групи (меню і блок «Весь напрям») ---------- */
/* Тема дає кожному <section> margin-bottom: var(--section-mb) — тут він не потрібен. */
.snav-map,
.snav-group { margin: 0; }
.snav-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 26px 32px;
    align-items: start;
}
.snav-group__h {
    font: 500 13px/1.3 var(--ff-nort, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--snav-muted);
    margin: 0 0 8px;
    display: flex;
    gap: 6px;
    align-items: baseline;
}
.snav-group__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.snav-panel[data-snav-menu='diag'].is-kid .snav-detail li[data-kid='0'],
.snav-panel.is-kid .snav-hubs li[data-kid='0'] { display: none; }
/* Одна група (УЗД, хірургічні хаби) — у колонки, а не одним довгим стовпчиком. */
.snav-group:only-child .snav-group__list { display: block; columns: 3 240px; column-gap: 32px; }
.snav-group:only-child .snav-group__list li { break-inside: avoid; margin-bottom: 2px; }
.snav-it {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 8px;
    margin: 0 -8px;
    border-radius: 6px;
    color: var(--snav-ink);
    text-decoration: none;
    transition: background 0.12s;
}
.snav-it:hover { background: var(--snav-tint); color: var(--snav-deep); }
.snav-it[aria-current='page'] { background: var(--snav-tint); }
.snav-it[aria-current='page'] .snav-it__nm { color: var(--snav-deep); font-weight: 500; }
.snav-it__row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; }
.snav-it__nm { font: 400 16px/1.3 var(--ff-nort, sans-serif); }
.snav-na {
    font: 400 11px/1.4 var(--ff-nort, sans-serif);
    color: var(--snav-muted);
    border: 1px dashed var(--snav-line);
    border-radius: 999px;
    padding: 0 7px;
    white-space: nowrap;
}
.snav-jump {
    display: inline-block;
    margin-top: 10px;
    font: 500 14px/1.3 var(--ff-nort, sans-serif);
    color: var(--snav-brand);
    text-decoration: none;
}
.snav-jump:hover { text-decoration: underline; }
.snav-empty { font: 400 15px/1.4 var(--ff-nort, sans-serif); color: var(--snav-muted); margin: 0; }

/* ---------- блок «Весь напрям» на сторінці хабу ---------- */
.snav-block { margin-bottom: var(--section-mb, 140px); }
.snav-block__title { margin-bottom: 12px; }
.snav-block__lead { font: 400 18px/1.4 var(--ff-nort, sans-serif); color: var(--snav-muted); margin: 0 0 28px; }
.snav-groups--block {
    background: #fff;
    border: 1px solid var(--snav-line);
    border-radius: 20px;
    padding: 28px 32px;
}
.snav-groups--block .snav-group__h { font-size: 14px; }
@media (max-width: 767px) {
    .snav-groups--block { padding: 20px 18px; grid-template-columns: 1fr; gap: 22px; }
    .snav-block__title { margin-bottom: 8px; }
    .snav-block__lead { font-size: 16px; margin-bottom: 18px; }
    .snav-it { padding: 10px 8px; }
}

/* ---------- мобільне меню ---------- */
.snav-m { margin-bottom: 22px; }
.snav-m__q {
    width: 100%;
    font: 400 16px/1.3 var(--ff-nort, sans-serif);
    padding: 14px 16px 14px 46px;
    border: 0;
    border-radius: 14px;
    background: #fff url('../img/icons/ico-search-bl.svg') no-repeat 16px center / 20px;
    color: var(--snav-ink);
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(0, 92, 144, 0.06);
}
.snav-m__q:focus { outline: 2px solid var(--snav-brand); outline-offset: -1px; }
.snav-m__label {
    font: 500 12px/1.2 var(--ff-nort, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--snav-muted);
    margin-bottom: 8px;
}
/* «Часто шукають» — легкі теги, не кнопки */
.snav-m__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.snav-m__chip {
    font: 400 14px/1 var(--ff-nort, sans-serif);
    padding: 8px 12px;
    border-radius: 8px;
    border: 0;
    background: rgba(0, 132, 173, 0.09);
    color: var(--snav-deep);
    text-decoration: none;
}
.snav-m__chip:active { background: rgba(0, 132, 173, 0.18); }

/* Списки — білі заокруглені блоки з тонкими розділювачами всередині, без ліній на всю ширину */
.snav-m__list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}
.snav-m__list > li + li { border-top: 1px solid #e8eef1; }
.snav-m__row {
    width: 100%;
    min-height: 54px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 0;
    background: none;
    font: 400 16px/1.3 var(--ff-nort, sans-serif);
    color: var(--snav-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.snav-m__row:active { background: var(--snav-tint); }
.snav-m__l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.snav-m__l small { font-size: 13px; line-height: 1.3; color: var(--snav-muted); }
.snav-m__r { width: 20px; height: 20px; flex-shrink: 0; background: url('../img/icons/dd-right.svg') no-repeat center / 20px; opacity: 0.7; }

/* Шість плиток 2×3 (Клініка, Діагностика, Хірургія, Лікарі, Ціни, Акції): іконка зліва,
   компактно, щоб номер телефону був видно без прокрутки. */
.snav-m__tiles { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.snav-m__tile {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 92, 144, 0.06);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.snav-m__tile:active { background: var(--snav-tint); }
.snav-m__ico {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--snav-tint);
    color: var(--snav-brand);
}
.snav-m__ico svg { width: 20px; height: 20px; }
.snav-m__tile b { font: 400 17px/1.15 var(--ff-base, sans-serif); letter-spacing: -0.01em; color: var(--snav-deep); min-width: 0; }

/* Номер одразу під плитками: видно на першому екрані, тап = дзвінок */
.snav-m__phone {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 14px 0 18px;
    border-radius: 16px;
    background: #fff;
    border: 1.5px solid var(--snav-brand);
    text-decoration: none;
}
.snav-m__phone-t { display: flex; flex-direction: column; gap: 2px; }
.snav-m__phone-t b { font: 500 17px/1.2 var(--ff-nort, sans-serif); color: var(--snav-deep); }
.snav-m__phone-t small { font: 400 13px/1.2 var(--ff-nort, sans-serif); color: var(--snav-muted); }
/* Телефон уже є під плитками — у контактах унизу не дублюємо */
.mobile-menu__content .mobile-menu__panel a.mobile-menu__info[href^='tel:'] { display: none; }

/* «Усі / Для дітей» у списку хабів «Клініки» */
.snav-m__seg { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 12px; background: #fff; }
.snav-m__seg button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: none;
    font: 500 15px/1 var(--ff-nort, sans-serif);
    color: var(--snav-ink);
    cursor: pointer;
}
.snav-m__seg button[aria-pressed='true'] { background: var(--snav-brand); color: #fff; }
.snav-m__home + .snav-m__results { margin-top: 0; }
.snav-m__results .snav-m__label { margin-top: 2px; }

.snav-m__top { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 16px; }
.snav-m__back {
    font: 500 16px/1 var(--ff-nort, sans-serif);
    color: var(--snav-brand);
    background: none;
    border: 0;
    padding: 10px 0;
    min-height: 44px;
    cursor: pointer;
}
.snav-m__title { font: 400 28px/1.05 var(--ff-base, sans-serif); letter-spacing: -0.02em; color: var(--snav-deep); margin: 0; }

/* Кнопка переходу на сторінку хабу */
.snav-m__hubpage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: #fff;
    border: 1.5px solid var(--snav-brand);
    text-decoration: none;
}
.snav-m__hubpage-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.snav-m__hubpage-t b { font: 500 16px/1.3 var(--ff-nort, sans-serif); color: var(--snav-deep); }
.snav-m__hubpage-t small { font: 400 13px/1.3 var(--ff-nort, sans-serif); color: var(--snav-muted); }
.snav-m__hubpage-a {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--snav-brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Групи хабу — акордеони-картки */
.snav-m__acc { background: #fff; border-radius: 16px; margin-bottom: 10px; overflow: hidden; }
.snav-m__acc summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
    padding: 0 16px;
    font: 500 16px/1.3 var(--ff-nort, sans-serif);
    color: var(--snav-ink);
}
.snav-m__acc summary::-webkit-details-marker { display: none; }
.snav-m__acc summary::after { content: '+'; font-size: 24px; line-height: 1; color: var(--snav-brand); }
.snav-m__acc[open] summary::after { content: '–'; }
.snav-m__acc .snav-m__list { border-radius: 0; border-top: 1px solid #e8eef1; }
.snav-m__jump {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-top: 1px solid #e8eef1;
    background: none;
    font: 500 15px/1.3 var(--ff-nort, sans-serif);
    color: var(--snav-brand);
    cursor: pointer;
    text-align: left;
}

/* Глибокий екран / пошук ховають решту мобільного меню */
.mobile-menu__content.snav-deep .snav-m__root,
.mobile-menu__content.snav-deep .mobile-menu__nav,
.mobile-menu__content.snav-deep .mobile-menu__panel,
.mobile-menu__content.snav-deep .mobile-menu__controls,
.mobile-menu__content.snav-searching .mobile-menu__nav,
.mobile-menu__content.snav-searching .mobile-menu__panel,
.mobile-menu__content.snav-searching .mobile-menu__controls { display: none; }
.mobile-menu__content { padding-bottom: 32px; }
/* Поки відкрите мобільне меню, бульбашка чату не перекриває список. */
.mobile-menu.is-open ~ .helpcrunch-iframe-wrapper,
.mobile-menu.is-open ~ .helpcrunch-iframe-wrapper iframe { visibility: hidden !important; }

/* Другорядні пункти (Відгуки, Про нас, Мій кабінет) — простий список без картки, звичайним регістром */
.mobile-menu__content .mobile-menu__list { margin-bottom: 22px; }
.mobile-menu__content .mobile-menu__list > li > a,
.mobile-menu__content .mobile-menu__list > li > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 12px 2px;
    border: 0;
    border-top: 1px solid rgba(0, 92, 144, 0.1);
    background: none;
    font: 500 16px/1.2 var(--ff-nort, sans-serif);
    text-transform: none;
    color: var(--snav-ink, #242c33);
    text-align: left;
}
.mobile-menu__content .mobile-menu__list > li:first-child > a,
.mobile-menu__content .mobile-menu__list > li:first-child > button { border-top: 0; }
/* та сама стрілка, що й у меню напрямків */
.mobile-menu__content .mobile-menu__list > li > .dd-menu-item::after {
    width: 20px; height: 20px; background-size: 20px; opacity: 0.7;
}
.mobile-menu__content .mobile-menu__list > li.snav-m-cabinet > a { justify-content: flex-start; gap: 10px; color: var(--sea-blue, #005c90); }
/* Посилання першого рівня (Лікарі) — та сама стрілка, що й у пунктів з підменю */
.mobile-menu__content .mobile-menu__list > li:not(.snav-m-cabinet) > a::after {
    content: '';
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: url('../img/icons/dd-right.svg') no-repeat center / 20px;
    opacity: 0.7;
}
.mobile-menu__content .snav-m-cabinet svg { color: var(--ball-blue, #26aacc); flex-shrink: 0; }
/* Велика кнопка «Мій кабінет» більше не потрібна — тепер це рядок списку */
.mobile-menu__controls .mobile-menu__cabinet { display: none; }
.mobile-menu__controls { margin-bottom: 0; }

/* Контакти — дрібно внизу, без картки; телефон натискається (дзвінок) */
.mobile-menu__content .mobile-menu__panel {
    padding: 16px 2px 0;
    gap: 10px;
    margin: 0;
    border-top: 1px solid rgba(0, 92, 144, 0.1);
}
.mobile-menu__content .mobile-menu__panel .mobile-menu__info p { font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--snav-muted, #787e80); }
.mobile-menu__content .mobile-menu__panel a.mobile-menu__info p { color: var(--sea-blue, #005c90); font-weight: 500; }
.mobile-menu__content .mobile-menu__panel .mobile-menu__info img { width: 18px; height: 18px; }

/* Липка плашка якорів сторінки напрямку («Ціни / Лікарі / Відгуки…») не має перекривати відкрите меню. */
body:has(.js-mob-menu.is-open) .js-anchor-panel,
body.snav-open .js-anchor-panel { visibility: hidden; }

/* Мова в мобільному меню: поки одна (UA) — тихий підпис у стилі контактів, з відступом від годин роботи */
.mobile-menu__lang-static {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    padding: 0 2px;
    font: 400 14px/1.3 var(--ff-nort, sans-serif);
    color: var(--snav-muted, #787e80);
}
.mobile-menu__lang-static svg { flex-shrink: 0; color: var(--sea-blue, #005c90); }