/**
 * Navigation Menu - Compact State Styles
 * Styles for the collapsed hamburger menu mode
 */

/* Compact Layout */
navigation-menu[compact] {
    display: block;
}

navigation-menu[compact] navigation-menu-body::before,
navigation-menu[compact] navigation-menu-header::before {
    content: none;
}

navigation-menu[compact] navigation-menu-body>*:first-of-type {
    margin-top: 1.5rem;
}

navigation-menu[compact] navigation-menu-body>*:last-of-type {
    margin-bottom: 1.5rem;
}

navigation-menu[compact] navigation-menu-header {
    padding: 0 2em;
    flex-grow: 1;
}

@media (max-width: 420px) {
    navigation-menu-active-entry-name span,
    navigation-menu-active-entry-preview {
        max-width: 4em;
    }

    navigation-menu[compact] navigation-menu-header {
        padding: 0 1em;
    }
}

@media(min-width: 750px) {
    navigation-menu-active-entry-name span,
    navigation-menu-active-entry-preview {
        max-width: 42vw;
    }
}

/* Compact Body */
navigation-menu[compact] navigation-menu-body {
    height: 0;
    overflow: hidden;
    pointer-events: none;
    display: block;
    transition: none;
    opacity: 0;
}

navigation-menu[compact][expanded] navigation-menu-body {
    height: auto;
    /* Cap to available viewport height below the header so the body scrolls
       internally instead of pushing the page. 100dvh accounts for Safari's
       dynamic viewport; the header height (~3.5rem + top offset) is subtracted. */
    max-height: 68vh;
    /* Fallback if dvh is not available */
    max-height: 68dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* Absorb the bottom overhang of the last entry's decoration, which is
       absolutely positioned with --inset-active-entry: -0.5em and would
       otherwise extend the scrollable overflow area by 0.5em. */
    padding-bottom: 0.5em;
    /* Fallback if calc is not available */
    padding-bottom: calc(-1*var(--inset-active-entry));

    pointer-events: auto;
    transition: opacity var(--timing-decoration-double) ease var(--timing-decoration-half);
    opacity: 1;
}

navigation-menu[compact][expanded] navigation-menu-body a:not([entry="home"]) {
    display: flex;
    flex-direction: column;
    width: auto;
    margin-bottom: 1.5em;
}

/* Compact Trigger */
navigation-menu[compact] navigation-menu-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Active Entry Name in Compact.
   The name stands in for the whole menu while it is collapsed, so opening and
   closing should hand over between the two rather than blink. `display` cannot be
   interpolated, so the fade needs help at both ends: `allow-discrete` keeps the
   name rendered until its opacity has finished leaving, and @starting-style gives
   it somewhere to fade up from when it comes back. Without them the element would
   switch instantly and there would be nothing for the opacity to transition. */
navigation-menu[compact] navigation-menu-active-entry-name {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition:
        opacity var(--timing-decoration) ease,
        display var(--timing-decoration) allow-discrete;
}

navigation-menu[compact][expanded] navigation-menu-active-entry-name {
    display: none;
    opacity: 0;
}

@starting-style {
    navigation-menu[compact]:not([expanded]) navigation-menu-active-entry-name {
        opacity: 0;
    }
}

/* Active Overlay in Compact */
navigation-menu[compact] navigation-menu-active-overlay {
    top: var(--inset-active-entry-vertical-compact);
    left: var(--inset-active-entry-horizontal-compact);
    bottom: var(--inset-active-entry-vertical-compact);
    right: var(--inset-active-entry-horizontal-compact);
}

/* Loading indicator position in Compact */
@media (min-width: 500px) {
    navigation-menu[compact] navigation-menu-active::after {
        right: -2.5em;
    }
}

navigation-menu[compact][expanded] navigation-menu-active::after {
    right: 0.5em;
}

@media (min-width: 500px) {
    navigation-menu[compact] navigation-menu-active::before {
        right: -1em;
    }
}

navigation-menu[compact][expanded] navigation-menu-active::before {
    right: 2em;
}

/* =============================================================================
   COMPACT SUBMENUS
   ============================================================================= */

/* Entry with submenu - base layout */
navigation-menu[compact] div[entry][has-submenu] {
    flex-direction: column;
    align-items: stretch;
    position: relative;
    padding: 0.5em;
}

navigation-menu[compact] div[entry][has-submenu] {
    margin: 0.5em;
}

navigation-menu[compact] div[entry][has-submenu]>.entry-link {
    flex: 1;
}

/* Trigger positioned inline next to entry link */
navigation-menu[compact] navigation-submenu-trigger {
    position: absolute;
    right: 1em;
    top: 1.5em;
}

/* Submenu in compact mode - not absolute, flows in document.
   overflow: hidden clips invisible children when the submenu is closed
   (height: 0 from base.css), preventing them from extending the
   parent body's scrollable area. */
navigation-menu[compact] navigation-submenu {
    position: static;
    margin-top: 0.5em;
    padding: 0;
    min-width: auto;
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
    /* fixing empty space below last navmenu element making menu scrollable even though it shouldn't be */
}

navigation-menu[compact] *[has-submenu][open] navigation-submenu {
    padding: 0;
    overflow: unset;
    /* due to box shadow and overlay rendering issues */
}

/* Submenu entries in compact mode */
navigation-menu[compact] navigation-submenu>a {
    padding: 0.5em 1em;
}