/* Slide-in drawer. Visible at every breakpoint — the Figma navbar keeps its
   "Menu" button on desktop too, with the inline links as a shortcut. */

.navigation-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100svh;
    background-color: var(--clr-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0.2s;
    z-index: var(--index-overlay);
}

.navigation-overlay.open {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.navigation-panel {
    --panel-width: min(24rem, 90vw);
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: calc(-1 * var(--panel-width));
    width: var(--panel-width);
    height: 100svh;
    background-color: var(--clr-brand);
    color: var(--clr-text-inverse);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transition: inset-inline-end 0.25s ease-out;
    z-index: var(--index-navigation);
}

.navigation-panel.open {
    inset-inline-end: 0;
}

.navigation-panel__head {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-normal);
}

.menu-close {
    appearance: none;
    background: none;
    border: none;
    color: var(--clr-text-inverse);
    font-size: var(--font-size-double);
    line-height: 1;
    aspect-ratio: 1;
    cursor: pointer;
}

.menu-close::before {
    content: "\00D7";
    display: block;
}

ul.main-nav {
    display: grid;
    align-content: start;
    gap: 2px;
    margin: 0;
    padding: 0;
    flex: 1;
}

ul.main-nav li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--clr-text-inverse);
}

ul.main-nav .wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-quarter);
    padding-inline: var(--space-double);
    padding-block: var(--space-half);
}

ul.main-nav .l2.wrapper {
    padding-inline-start: calc(2 * var(--space-double));
}

ul.main-nav .wrapper a {
    flex: 1;
    display: block;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: var(--font-size-small);
    padding-block: var(--space-quarter);
}

ul.main-nav .wrapper a:hover {
    text-decoration: underline;
}

ul.main-nav li[level="2"] .wrapper a {
    text-transform: none;
    font-weight: 400;
    opacity: 0.85;
}

.subnav-btn {
    appearance: none;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: var(--font-size-normal);
    rotate: 90deg;
    transition: rotate 0.2s ease-out;
    padding: var(--space-quarter);
}

.subnav {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease-out;
}

.subnav > ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

ul.main-nav li[level="1"][active] > .subnav {
    grid-template-rows: 1fr;
}

ul.main-nav li[level="1"][active] > .wrapper {
    background-color: hsl(0 0% 100% / 12%);
}

ul.main-nav li[level="1"][active] > .wrapper .subnav-btn {
    rotate: -90deg;
}

.navigation-panel__foot {
    display: grid;
    gap: var(--space-half);
    padding: var(--space-double);
    border-block-start: 1px solid hsl(0 0% 100% / 20%);
}

.navigation-panel__foot a {
    display: flex;
    align-items: center;
    gap: var(--space-half);
    color: var(--clr-text-inverse);
    text-decoration: none;
    font-size: var(--font-size-small);
}

.navigation-panel__foot a:hover {
    text-decoration: underline;
}

.navigation-panel__foot .icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}