/* PMKTO keeps the hamburger drawer active through tablet widths because its Spanish navigation is longer than the
   shared NavMenu desktop breakpoint can carry. */
:root {
    --pmo-nav-logo-outline: url("/images/pmo-logo-outline-filter.svg?v=2_3q13sMs4u5#pmo-logo-outline-1-5px");
}

.topbar,
.topbar__brand {
    overflow: visible;
}

.topbar__brand img {
    filter: var(--pmo-nav-logo-outline);
}

@media (min-width: 901px) and (max-width: 1199px) {
    :root {
        --navmenu-img-h: 36px;
    }

    .topbar nav {
        display: none;
        position: fixed;
        top: var(--topbar-h, 68px);
        left: 0;
        max-width: 100vw;
        white-space: normal;
        overflow-wrap: anywhere;
        background: var(--navmenu-menu-background);
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem 0.75rem 1.5rem;
        gap: 0.15rem;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
        z-index: var(--navmenu-z-drawer);
        overflow-y: auto;
        max-height: calc(100dvh - var(--topbar-h, 68px));
    }

    .topbar nav.is-open {
        display: inline-flex;
    }

    .topbar nav.is-open a,
    .topbar.is-scrolled nav.is-open a,
    .topbar.nav-is-open nav.is-open a {
        color: var(--navmenu-menu-text);
        padding: 0.55rem 0.75rem;
        border-radius: var(--navmenu-radius-md);
        font-size: 1rem;
    }

    .topbar nav.is-open a:hover,
    .topbar.is-scrolled nav.is-open a:hover,
    .topbar.nav-is-open nav.is-open a:hover {
        background: var(--navmenu-menu-hover-background);
        color: var(--navmenu-menu-text-hover);
    }

    .topbar nav.is-open a.active,
    .topbar.is-scrolled nav.is-open a.active,
    .topbar.nav-is-open nav.is-open a.active {
        color: var(--navmenu-menu-text-active);
        background: var(--navmenu-menu-active-background);
    }

    .topbar__toggle {
        display: block;
        order: -1;
        flex-shrink: 0;
        min-width: 44px;
        min-height: 44px;
    }

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

    .topbar__brand img {
        width: auto;
        height: 36px;
        flex-shrink: 0;
    }

    .topbar__brand span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.85rem;
    }

    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: var(--navmenu-z-overlay);
    }

    .nav-overlay.is-open {
        display: block;
    }

    .nav-cascade {
        display: flex;
        flex-direction: column;
    }

    .nav-cascade__trigger {
        align-self: stretch;
    }

    .nav-cascade__menu,
    .nav-cascade:hover .nav-cascade__menu,
    .nav-cascade:focus-within .nav-cascade__menu {
        position: fixed;
        top: var(--topbar-h, 68px);
        left: 0;
        max-width: 100vw;
        display: inline-flex;
        flex-direction: column;
        pointer-events: none;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.3s var(--navmenu-ease-out), visibility 0s 0.3s;
        z-index: var(--navmenu-z-cascade);
        border-radius: 0;
        border: none;
        border-right: 1px solid var(--navmenu-menu-border);
        background: var(--navmenu-menu-background);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
        overflow-y: auto;
        animation: none;
        white-space: nowrap;
        gap: 0.15rem;
        max-height: calc(100dvh - var(--topbar-h, 68px));
    }

    .nav-cascade.is-open .nav-cascade__menu {
        transform: translateX(0);
        pointer-events: auto;
        visibility: visible;
        transition-delay: 0s;
    }

    .topbar .nav-cascade__menu a,
    .topbar.is-scrolled .nav-cascade__menu a,
    .topbar.nav-is-open .nav-cascade__menu a {
        color: var(--navmenu-menu-text);
        font-size: 1rem;
        padding: 0.75rem 1rem;
        border-radius: var(--navmenu-radius-md);
    }

    .topbar .nav-cascade__menu a:hover,
    .topbar.is-scrolled .nav-cascade__menu a:hover,
    .topbar.nav-is-open .nav-cascade__menu a:hover {
        background: var(--navmenu-menu-hover-background);
        color: var(--navmenu-menu-text-hover);
    }

    .topbar .nav-cascade__menu a.active,
    .topbar.is-scrolled .nav-cascade__menu a.active,
    .topbar.nav-is-open .nav-cascade__menu a.active {
        color: var(--navmenu-menu-text-active);
        background: var(--navmenu-menu-active-background);
        font-weight: 600;
    }

    .nav-cascade__back {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: none;
        border: none;
        border-bottom: 1px solid var(--navmenu-menu-border);
        font: inherit;
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--navmenu-menu-text-muted);
        cursor: pointer;
        padding: 0.75rem 0.5rem;
        min-height: 44px;
        margin-bottom: 0.5rem;
        text-align: left;
    }

    .nav-cascade__back svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
        stroke-width: 2.5;
        fill: none;
        flex-shrink: 0;
    }

    .nav-cascade__back:hover {
        color: var(--navmenu-menu-text-hover);
    }
}