/* Мобільна навігація по секціях сторінки відділення
   (Лікарі / Відгуки / Часті запитання / Вартість), single-departments.php.
   Показується лише на мобілці/планшеті (<=1135px, той самий поріг, на якому
   хедер переходить у бургер-меню, див. _header.scss).

   position: fixed (не sticky) навмисно: sticky-елемент перераховує свій
   "приклеєний" стан на кожен виклик window.scrollTo() під час анімованого
   скролу по кліку (departmentPageNav() в init.js), що давало помітне
   дрожання панелі на 1px. Fixed із заздалегідь відомим top такого
   перерахунку не потребує.

   top = лише висота хедера (одразу під ним), без хлібних крихт — натомість
   сама навігація за замовчуванням прихована (.is-revealed) і зʼявляється,
   тільки коли користувач проскролив сторінку вниз десь на 150px (див.
   departmentPageNav() в init.js). До цього моменту хлібні крихти ще у зоні
   видимості, і навігація їх просто не встигає перекрити. */

.page-section-nav {
    display: none;
}

.page-section-nav-spacer {
    display: none;
}

@media (max-width: 1135px) {
    .page-section-nav {
        display: block;
        position: fixed;
        top: var(--zdravo-header-h, 120px);
        left: 5%;
        right: 5%; /* той самий інсет, що й у body { padding: 0 5%; } — щоб ширина збігалась з рештою контенту */
        z-index: 500; /* нижче за .header-fixed (999) і мобільну панель меню (9999) */
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(2, 53, 64, 0.08);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    }

    .page-section-nav.is-revealed {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Порожній елемент на місці, де раніше в потоці документа стояла сама
       navigation — щоб контент під нею (hero-section і далі) не "стрибав"
       вгору тепер, коли nav вилучена з потоку через position: fixed. */
    .page-section-nav-spacer {
        display: block;
        height: var(--zdravo-subnav-h, 96px);
        margin: 0 0 16px;
    }

    .page-section-nav-list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 6px;
        gap: 4px;
        flex-direction: row;
        justify-content: space-around;
    }

    .page-section-nav-item {
        min-width: 0; /* без цього довгий текст розпирає grid-колонку і знову ламає layout */
    }

    .page-section-nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 10px 8px;
        border-radius: 8px;
        font-size: 13px;
        line-height: 1.25;
        text-align: center;
        font-weight: 600;
        color: #023540;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.25s ease, color 0.25s ease;
    }

    .page-section-nav-link.is-active {
        background: #b8da46;
        color: #023540;
    }

    /* Компенсація висоти fixed-хедера і самої навігації при переході по
       якорю (в т.ч. при прямому переході по посиланню з "#" без JS). */
    #our-specialists,
    #comments,
    #faq,
    #consultation {
        scroll-margin-top: calc(var(--zdravo-header-h, 120px) + var(--zdravo-subnav-h, 96px) + 16px);
    }
}