/**
 * ProPhysio – Mobilné menu (≤ 991px)
 * =============================================================================
 * Prestylovanie roletového menu z parent témy (Bootstrap collapse v .navbar).
 * Panel kopíruje farbu hlavičky (--pp-surface-dark = #2a2a2a z noo.css)
 * a plynule na ňu navazuje – full-bleed, zaoblený len spodok.
 *
 * Selektory sú zámerne prefixované `.navbar .navbar-collapse`, aby prebili
 * pravidlá z assets/css/noo.css (napr. `.navbar-nav li { border-top: ... }`).
 * `!important` je len tam, kde ho používa už noo.css (padding odkazov).
 *
 * Podmenu: JS (assets/js/mobile-menu.js) pridá triedu `pp-mm-js` a chevron
 * tlačidlá – bez JS zostávajú podmenu rozbalené (prístupný fallback).
 * =========================================================================== */

@media (max-width: 991px) {

    /* ----- Panel ---------------------------------------------------------- */
    .navbar .navbar-collapse {
        background: var(--pp-surface-dark);
        border-radius: 0 0 var(--pp-radius-lg) var(--pp-radius-lg);
        box-shadow: var(--pp-shadow-dark);
        /* full-bleed nezávisle na padding-u kontajnera – nadväzuje na hlavičku */
        margin: 0 calc(50% - 50vw);
        padding: var(--pp-space-2) var(--pp-space-2) var(--pp-space-3);
    }
    .navbar .navbar-collapse.in {
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ----- Položky prvej úrovne ------------------------------------------- */
    .navbar .navbar-collapse .navbar-nav li {
        background: transparent;
        border-top: 0;
    }
    .navbar .navbar-collapse .navbar-nav > li {
        position: relative;
        margin: 2px var(--pp-space-3);
    }
    .navbar .navbar-collapse .navbar-nav > li > a {
        color: var(--pp-ink-inverse);
        font-size: var(--pp-text-md);
        font-weight: var(--pp-weight-semibold);
        text-transform: none;
        letter-spacing: 0;
        line-height: var(--pp-leading-snug);
        padding: 13px var(--pp-space-4) !important; /* noo.css má na padding !important */
        border-radius: var(--pp-radius-sm);
        transition: background-color var(--pp-duration-fast) var(--pp-ease),
                    color var(--pp-duration-fast) var(--pp-ease);
    }
    .navbar .navbar-collapse .navbar-nav > li.menu-item-has-children > a {
        padding-right: 56px !important; /* miesto pre chevron tlačidlo */
    }
    .navbar .navbar-collapse .navbar-nav > li > a:hover,
    .navbar .navbar-collapse .navbar-nav > li > a:focus,
    .navbar .navbar-collapse .navbar-nav > li:hover > a {
        color: var(--pp-brand-light);
        background: var(--pp-hover-inverse);
    }
    .navbar .navbar-collapse .navbar-nav > li.current-menu-item > a,
    .navbar .navbar-collapse .navbar-nav > li.current-menu-parent > a,
    .navbar .navbar-collapse .navbar-nav > li.current-menu-ancestor > a,
    .navbar .navbar-collapse .navbar-nav > li.active > a {
        color: var(--pp-brand-light);
        background: rgba(var(--pp-brand-rgb), .14);
    }

    /* ----- Podmenu --------------------------------------------------------- */
    .navbar .navbar-collapse .navbar-nav ul.sub-menu {
        margin: 2px 0 var(--pp-space-2) var(--pp-space-5);
        padding-left: var(--pp-space-2);
        border-left: 2px solid var(--pp-line-inverse);
    }
    .navbar .navbar-collapse .navbar-nav ul.sub-menu li > a {
        color: var(--pp-ink-inverse-soft);
        font-size: var(--pp-text-sm);
        font-weight: var(--pp-weight-regular);
        text-transform: none;
        line-height: var(--pp-leading-snug);
        padding: 10px var(--pp-space-4) !important;
        border-radius: var(--pp-radius-sm);
    }
    .navbar .navbar-collapse .navbar-nav ul.sub-menu li > a:hover,
    .navbar .navbar-collapse .navbar-nav ul.sub-menu li > a:focus,
    .navbar .navbar-collapse .navbar-nav ul.sub-menu li.current-menu-item > a {
        color: var(--pp-brand-light);
        background: var(--pp-hover-inverse);
    }

    /* Akordeón: bez JS sú podmenu rozbalené, s JS ich riadi trieda pp-open.
       `!important` je nutné – superfish (hover skript parent témy) nastavuje
       podmenu inline display/opacity a bez neho sa akordeón po prvom dotyku
       zasekne v otvorenom stave. */
    .navbar .navbar-collapse.pp-mm-js .navbar-nav li ul.sub-menu,
    .navbar .navbar-collapse.pp-mm-js .navbar-nav li:hover > ul.sub-menu {
        display: none !important;
    }
    .navbar .navbar-collapse.pp-mm-js .navbar-nav li.pp-open > ul.sub-menu {
        display: block !important;
        opacity: 1 !important;
    }

    /* ----- Chevron tlačidlo podmenu ---------------------------------------- */
    .pp-submenu-toggle {
        position: absolute;
        top: 2px;
        right: 4px;
        width: 44px;
        height: 44px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: transparent;
        border: 0;
        padding: 0;
        color: var(--pp-ink-inverse-soft);
        cursor: pointer;
    }
    .pp-submenu-toggle::before {
        content: '';
        width: 9px;
        height: 9px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        -webkit-transform: rotate(45deg) translate(-2px, -2px);
        transform: rotate(45deg) translate(-2px, -2px);
        transition: -webkit-transform var(--pp-duration-fast) var(--pp-ease);
        transition: transform var(--pp-duration-fast) var(--pp-ease);
    }
    li.pp-open > .pp-submenu-toggle {
        color: var(--pp-brand-light);
    }
    li.pp-open > .pp-submenu-toggle::before {
        -webkit-transform: rotate(-135deg) translate(-2px, -2px);
        transform: rotate(-135deg) translate(-2px, -2px);
    }

    /* ----- CTA položka (Rezervace termínu) ---------------------------------
       Triedu pp-menu-cta pridáva filter nav_menu_css_class
       v inc/21-mobile-menu.php podľa URL položky. */
    .navbar .navbar-collapse .navbar-nav > li.pp-menu-cta {
        margin-top: var(--pp-space-2);
        margin-bottom: var(--pp-space-2);
    }
    .navbar .navbar-collapse .navbar-nav > li.pp-menu-cta > a {
        color: var(--pp-brand-light);
        background: rgba(var(--pp-brand-rgb), .08);
    }
    .navbar .navbar-collapse .navbar-nav > li.pp-menu-cta > a:hover,
    .navbar .navbar-collapse .navbar-nav > li.pp-menu-cta > a:focus,
    .navbar .navbar-collapse .navbar-nav > li.pp-menu-cta:hover > a,
    .navbar .navbar-collapse .navbar-nav > li.pp-menu-cta.current-menu-item > a {
        color: var(--pp-brand-light);
        background: rgba(var(--pp-brand-rgb), .16);
    }

    /* ----- Hamburger: otvorený stav v brand farbe -------------------------- */
    .navbar .navbar-toggle:not(.collapsed) {
        color: var(--pp-brand-light);
    }
}

/* Na desktope sa chevrony nezobrazujú (menu riadi superfish hover). */
@media (min-width: 992px) {
    .pp-submenu-toggle {
        display: none;
    }
}