/* ============================================================
   Samana — Mobile Menu (below 1200px)
   Full-screen takeover with its own top row (logo left,
   hamburger/close right), the menu items in the middle
   (scrollable if they don't fit), and the CTA pinned at the
   bottom. Behavior in assets/js/mobile-menu.js.
   ============================================================ */

@media (max-width: 1199px) {

    /* -------------------------------------------------------
       Header row (closed state) — logo + hamburger only.
       CTA and phone move into the full-screen panel.
       ------------------------------------------------------- */
    .header-cta-btn,
    .header-actions {
        display: none;
    }

    .header-nav {
        flex: unset;
        margin-inline-start: auto;
    }

    /* Transparent wrapper while closed — the hamburger behaves like
       a direct child of .header-nav. Becomes a real row (logo left,
       hamburger/close right) once the panel opens. */
    .mobile-menu-panel-header {
        display: contents;
    }

    .mobile-menu-logo {
        display: none;
    }

    /* -------------------------------------------------------
       Hamburger Button
       ------------------------------------------------------- */
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 8px;
        flex-shrink: 0;
    }

    .hamburger-line {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--color-nav-link);
        transition: transform var(--transition), opacity var(--transition);
        transform-origin: center;
    }

    /* Hamburger → X when open */
    .header-nav.is-open .hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .header-nav.is-open .hamburger-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .header-nav.is-open .hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* -------------------------------------------------------
       Full-screen panel (open state)
       ------------------------------------------------------- */
    .header-nav.is-open {
        position: fixed;
        inset: 0;
        z-index: var(--z-mobile-menu);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var(--color-mobile-menu-bg);
    }

    /* Logged-in: keep the panel below the WP admin bar. */
    .admin-bar .header-nav.is-open {
        top: var(--wp-admin--admin-bar--height, 46px);
    }

    .header-nav.is-open .mobile-menu-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        order: 1;
        flex-shrink: 0;
        min-height: var(--header-height);
        padding-inline: var(--container-pad);
        border-bottom: 1px solid var(--color-mobile-divider);
    }

    .header-nav.is-open .mobile-menu-logo {
        display: block;
    }

    /* Same logo <img> as the real header — sized by height here, width
       follows its own aspect ratio. */
    .header-nav.is-open .mobile-menu-logo .header-logo-img {
        width: auto;
        height: 40px;
    }

    /* Body scroll lock while open — position:fixed (with the scroll
       offset restored by mobile-menu.js) is what actually stops iOS
       Safari from rubber-band scrolling the page behind. */
    body.menu-is-open {
        position: fixed;
        inset-inline: 0;
        overflow: hidden;
    }

    /* -------------------------------------------------------
       Menu
       ------------------------------------------------------- */
    .main-menu {
        display: none;
    }

    .header-nav.is-open .main-menu {
        display: block;
        order: 2;
        padding-bottom: var(--space-lg); /* min gap above the CTA when the menu is long */
    }

    /* -------------------------------------------------------
       CTA — pinned at the bottom of the panel
       ------------------------------------------------------- */
    .header-nav.is-open .header-cta-btn {
        display: inline-flex;
        order: 3;
        flex-shrink: 0;
        align-self: flex-start; /* natural pill size, not full-width */
        margin: auto var(--container-pad) var(--space-lg); /* margin-top:auto pins it to the bottom */
    }

    /* -------------------------------------------------------
       Top-level menu items
       ------------------------------------------------------- */
    .main-menu > .menu-item {
        border-bottom: 1px solid var(--color-mobile-divider);
    }

    .main-menu > .menu-item > a {
        display: block;
        padding: 18px var(--container-pad);
        color: var(--color-mobile-menu-text);
        font-weight: var(--fw-medium);
        font-size: var(--fs-body);
        text-transform: none;
        letter-spacing: 0;
        border-bottom: 2px solid transparent;
    }

    .main-menu > .menu-item.current-menu-item > a,
    .main-menu > .menu-item.current-menu-ancestor > a,
    .main-menu > .menu-item.current-menu-parent > a {
        color: var(--color-mobile-menu-text);
        border-bottom-color: var(--color-turquoise);
    }

    /* Items with children: link + toggle on one row, sub-menu wraps
       to its own full-width row underneath. */
    .main-menu .menu-item.has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .main-menu .has-children > a {
        flex: 1;
        min-width: 0;
    }

    .main-menu .has-children > .sub-menu-wrap,
    .main-menu .has-children > .sub-sub-menu-wrap {
        flex-basis: 100%;
    }

    /* -------------------------------------------------------
       Sub-menu Toggle Button
       ------------------------------------------------------- */
    .sub-menu-toggle {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        color: var(--color-nav-link);
        border-left: 1px solid var(--color-mobile-divider);
    }

    .toggle-icon {
        display: block;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform var(--transition);
    }

    .has-children.is-open > .sub-menu-toggle .toggle-icon {
        transform: rotate(-135deg);
    }

    /* -------------------------------------------------------
       Sub-menus — accordion (the wrap div is what toggles)
       ------------------------------------------------------- */
    .sub-menu-wrap,
    .sub-sub-menu-wrap {
        display: none;
    }

    .has-children.is-open > .sub-menu-wrap,
    .has-children.is-open > .sub-sub-menu-wrap {
        display: block;
    }

    .sub-menu,
    .sub-sub-menu {
        background-color: var(--color-mobile-submenu-bg);
    }

    .sub-menu .menu-item {
        border-top: 1px solid var(--color-mobile-divider);
    }

    .sub-menu a {
        display: block;
        padding: 14px var(--container-pad) 14px calc(var(--container-pad) + 1rem);
        color: var(--color-white-a85);
        font-size: var(--fs-nav);
        transition: color var(--transition);
    }

    .sub-sub-menu a {
        padding-inline-start: calc(var(--container-pad) + 2rem);
    }

    .sub-menu .sub-menu-toggle {
        width: 48px;
        height: 48px;
    }

    .sub-menu a:hover,
    .sub-menu a:focus-visible,
    .sub-menu .current-menu-item > a {
        color: var(--color-white);
    }

} /* end @media mobile */