/* =========================================================
   SITE MENU V10 — NATURAL / CONTENT HEIGHT

   Based on the user's customized typography and spacing.

   Key idea for this test:
   - menu DOES NOT try to reach the bottom of the viewport
   - white surface is only as tall as its content
   - safe area / browser chrome is left completely alone
   - navbar remains sticky and unchanged
   - menu links still do NOT perform the close animation
   ========================================================= */


/* ---------- MENU HOST / INTERACTION SHIELD ---------- */

.site-menu {
    position: fixed;
    top: var(--navbar-height);
    right: 0;
    bottom: 0;
    left: 0;

    /*
       IMPORTANT:
       The HOST now fills the viewport below the navbar, but remains
       visually transparent. Its only job outside .site-menu-surface
       is to intercept interaction with the page underneath.

       The visible menu surface itself still keeps its natural/content
       height, so this does NOT turn the menu back into a full-height panel.
    */
    width: 100%;

    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: contain;
    background: transparent;

    z-index: 999;

    visibility: hidden;
    pointer-events: none;

    transition:
        visibility 0s linear 0.40s;
}

.site-menu.is-open {
    visibility: visible;
    pointer-events: auto;

    transition:
        visibility 0s linear 0s;
}


/* ---------- FULL-WIDTH SLIDING SURFACE ---------- */

.site-menu-surface {
    /*
       Natural height:
       this element participates in normal layout and its content
       determines the menu height.

       If the menu ever becomes taller than the available viewport,
       max-height + overflow-y keep it usable.
    */
    position: relative;

    width: 100%;
    max-height: calc(100dvh - var(--navbar-height));

    box-sizing: border-box;

    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;

    background: var(--surface-page);

    transform: translateY(-100%);


    transition:
        transform 0.40s cubic-bezier(0.4, 0, 0.2, 1);
            background-color: var(--primary-color);
            background-color: #191919;
            /*background-color: #283335;*/

}

.site-menu.is-open .site-menu-surface {
    transform: translateY(0);

    transition-duration: 0.34s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---------- NAVIGATION HANDOFF ---------- */

/*
   Clicking a navigation link must NOT perform the close animation.
   JS freezes the current menu open until the browser navigates away.
*/
.site-menu.is-navigating {
    visibility: visible;
    pointer-events: none;
}

.site-menu.is-navigating .site-menu-surface {
    transform: translateY(0);
    transition: none !important;
}


/*
   Destination pages initialize with the menu closed and without
   visually finishing an old close animation.
*/
.site-menu.is-initializing,
.site-menu.is-initializing .site-menu-surface {
    transition: none !important;
}


/* ---------- CONTENT / GUTTERS ---------- */

.site-menu-inner {
    /*
       IMPORTANT:
       no min-height:100% here.
       The content itself now defines the height of the white menu.
    */
    box-sizing: border-box;

    padding-top: 30px;
    padding-bottom: 60px;
}

.site-menu-nav {
    width: 100%;
}


/* ---------- GROUPS ---------- */

.site-menu-group + .site-menu-group {
    margin-top: 22px;
    border-top: 1px solid #FFFFFF30;
}

.site-menu-group-title {
    margin: 0;
    padding: 0 0 8px;
    border-bottom: 1px solid #00000028;

    font-family: var(--secondary-font);
    font-size: 12px;
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.08em;

    color: var(--secondary-color);
    opacity: 0.6;
    text-transform: uppercase;
    display: none;
}

.site-menu-links {
    display: flex;
    flex-direction: column;

    gap: 16px;
    margin-top: 20px;
}


/* ---------- LINKS ---------- */

.site-menu-link {
    display: block;
    min-width: 0;

    font-family: var(--secondary-font);
    font-size: 20px;
    font-weight: var(--weight-regular);
    line-height: 1.5;

    color: var(--primary-color);
    color: var(--secondary-color);
    text-decoration: none;

    transition: color 0.18s ease;
}

.site-menu-link--row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
}

.site-menu-link-meta {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-S);
    color: var(--secondary-color);
}

.site-menu-link:hover,
.site-menu-link:focus-visible {
    color: var(--primary-color);
    color: var(--surface-page);
}

.site-menu-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

.site-menu-link[aria-current="page"] {
    text-decoration: none;
    font-weight: var(--weight-semibold);
    color: var(--primary-color);
    color: var(--surface-page);
    border-left: 4px solid var(--surface-page);
    padding-left: 12px;
}


/* ---------- TOGGLE ---------- */

.site-navbar-menu-icon {
    user-select: none;
    -webkit-user-select: none;
}


/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
    .site-menu,
    .site-menu-surface {
        transition: none;
    }
}

/* ---------- MENU WIDTH = NAVBAR WIDTH ---------- */
@media (min-width: 1200px) {
    .site-menu-inner {
        width: min(
            var(--navbar-max-width),
            calc(100% - 80px)
        );
    }
}