/* =========================================
   Side Menu — Fixed overlay navigation
   Mobile-only panel triggered by hamburger
   ========================================= */

/* Tab button — hidden (mobile-only menu uses hamburger) */
.side-menu-tab {
    display: none;
}

/* =========================================
   Backdrop overlay
   ========================================= */
.side-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 1000;
}

/* =========================================
   Panel — slides in from right
   ========================================= */
.side-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: calc(0.9 * var(--frame-w));
    height: 100vh;
    height: 100dvh;
    background: var(--color-brand-dark-teal);
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4em 2.5em;
    z-index: 1001;
    border-left: calc(0.03 * var(--frame-w)) solid var(--color-brand-red);
}

/* Extra coverage on the right so the spring bounce doesn't reveal the page */
.side-menu-panel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 6em;
    background: var(--color-brand-dark-teal);
}

/* =========================================
   Nav links
   ========================================= */
.side-menu-nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    gap: 8em;
}

.side-menu-nav a {
    color: var(--color-menu-muted, #B4B4B4);
    text-decoration: none;
    font-family: var(--font-family-primary);
    font-weight: 400;
    font-size: calc(0.05 * var(--frame-w));
    text-transform: uppercase;
    line-height: 1.4;
    transition: font-size 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                font-weight 0.15s ease,
                color 0.3s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: left center;
    /* Initial hidden state for stagger */
    opacity: 0;
    transform: translateX(1em);
}

.side-menu-nav a.active {
    font-weight: 600;
    color: var(--color-brand-white);
    font-size: calc(0.07 * var(--frame-w));
}

.side-menu-nav a:hover:not(.active) {
    color: var(--color-brand-white);
    font-weight: 400;
    font-size: calc(0.07 * var(--frame-w));
}

/* =========================================
   Logo — bottom-right of panel
   ========================================= */
.side-menu-logo {
    position: absolute;
    bottom: 2em;
    right: 2em;
}

.side-menu-logo img {
    width: calc(0.256 * var(--frame-w));
    height: calc(0.064 * var(--frame-w));
}

/* =========================================
   Footer link — bottom-left of panel
   ========================================= */
.side-menu-footer {
    position: absolute;
    bottom: 2.5em;
    left: 2.5em;
    display: flex;
    align-items: center;
    gap: 2em;
}

.side-menu-footer a {
    color: var(--color-menu-muted, #B4B4B4);
    text-decoration: none;
    font-family: var(--font-family-primary);
    font-weight: 200;
    font-size: 3em;
    transition: color 0.3s ease;
}

.side-menu-footer a:hover {
    color: var(--color-brand-white);
}

/* =========================================
   Open state
   ========================================= */
.side-menu.open .side-menu-overlay {
    opacity: 1;
    pointer-events: auto;
}

.side-menu.open .side-menu-panel {
    transform: translateX(0);
}

/* Items visible whenever menu is open (no JS dependency) */
.side-menu.open .side-menu-nav a {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================
   Close button — top-right of panel
   ========================================= */
.side-menu-close {
    position: absolute;
    top: 1.5em;
    right: 1.5em;
    width: 5em;
    height: 5em;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-brand-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1200;
}

.side-menu-close svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke: currentColor;
    stroke-width: 1;
    stroke-linecap: round;
    fill: none;
}

.side-menu-close:hover {
    opacity: 0.75;
}