/**
 * Site drawer (.sidebar-nav) + hamburger toggle.
 *
 * Loaded after style.css / tdtv-modern.css, so the plain-class rules here win
 * over the legacy `left: -250px` drawer without needing !important.
 *
 * --tdtv-header-h is measured from the real header bar by assets/js/main.js, so
 * the drawer and its scrim always start under the header whatever its height is
 * (admin bar, mobile breakpoint, logo style).
 */

:root {
    --tdtv-header-h: 60px;
    --tdtv-drawer-w: 268px;
    --tdtv-drawer-ease: cubic-bezier(.22, .61, .36, 1);
}

/* Header bar stays above the drawer so the toggle is never covered. */
#header.site-header-bar {
    z-index: 60;
}

/* --------------------------------------------------------------------------
   Drawer
   -------------------------------------------------------------------------- */

.sidebar-nav {
    position: fixed;
    top: var(--tdtv-header-h);
    left: 0;
    width: var(--tdtv-drawer-w);
    max-width: 86vw;
    height: calc(100% - var(--tdtv-header-h));
    z-index: 40;
    padding: 8px 0 28px;
    box-sizing: border-box;
    background: var(--tdtv-surface, #16171c);
    border-right: 1px solid var(--tdtv-border, rgba(255, 255, 255, .07));
    box-shadow: 18px 0 44px rgba(0, 0, 0, .5);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translate3d(-102%, 0, 0);
    transition: transform .34s var(--tdtv-drawer-ease), visibility 0s linear .34s;
    will-change: transform;
}

.sidebar-nav.in {
    left: 0;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition: transform .34s var(--tdtv-drawer-ease), visibility 0s;
}

/* The header toggle is always visible now, so the in-drawer copy is redundant. */
.sidebar-nav .bars,
.sidebar-toggle--drawer {
    display: none !important;
}

.sidebar-nav::-webkit-scrollbar,
.sidebar-nav.in::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track,
.sidebar-nav.in::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb,
.sidebar-nav.in::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Drawer items
   -------------------------------------------------------------------------- */

.sidebar-nav .sidebar-menu > li > a,
.sidebar-nav .sidebar-menu > li > button {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 2px 8px;
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--tdtv-text, #f5f6f8) !important;
    line-height: 1.2;
    text-align: left;
    /* The sign-in / sign-up buttons carry an inline width:100%, which overflows
       the 8px side margins. */
    width: auto !important;
    text-decoration: none !important;
    transition: background .18s var(--tdtv-ease, ease), color .18s var(--tdtv-ease, ease), transform .18s var(--tdtv-ease, ease);
}

.sidebar-nav .sidebar-menu > li > a:hover,
.sidebar-nav .sidebar-menu > li > button:hover,
.sidebar-nav .sidebar-menu > li > a:focus-visible,
.sidebar-nav .sidebar-menu > li > button:focus-visible {
    background: rgba(255, 255, 255, .06);
    color: var(--tdtv-accent, #ffdd95) !important;
}

.sidebar-nav .sidebar-menu > li > a:active,
.sidebar-nav .sidebar-menu > li > button:active {
    transform: scale(.985);
}

/* Legacy markup spaces the labels with   runs; the flex gap replaces it. */
.sidebar-nav .sidebar-menu > li > a > .mobile-icon,
.sidebar-nav .sidebar-menu > li > button > .mobile-icon {
    float: none;
    margin: 0;
    font-size: 20px;
    line-height: 0;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tdtv-muted, #9aa0ac);
    transition: color .18s var(--tdtv-ease, ease);
}

.sidebar-nav .sidebar-menu > li > a:hover > .mobile-icon,
.sidebar-nav .sidebar-menu > li > button:hover > .mobile-icon {
    color: inherit;
}

.sidebar-nav .mobile-text {
    padding: 16px 20px 6px;
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--tdtv-muted, #9aa0ac) !important;
}

/* Staggered entrance. Kept behind no-preference so the reduced-motion reset in
   tdtv-modern.css (animation: none) can never leave items stuck at opacity 0. */
@media (prefers-reduced-motion: no-preference) {

    .sidebar-nav .sidebar-menu > li > a,
    .sidebar-nav .sidebar-menu > li > button,
    .sidebar-nav .sidebar-menu > li > p {
        opacity: 0;
        transform: translateX(-14px);
    }

    .sidebar-nav.in .sidebar-menu > li > a,
    .sidebar-nav.in .sidebar-menu > li > button,
    .sidebar-nav.in .sidebar-menu > li > p {
        animation: tdtv-drawer-item .32s var(--tdtv-drawer-ease) both;
    }

    .sidebar-nav.in .sidebar-menu > li > :nth-child(1) { animation-delay: .04s; }
    .sidebar-nav.in .sidebar-menu > li > :nth-child(2) { animation-delay: .07s; }
    .sidebar-nav.in .sidebar-menu > li > :nth-child(3) { animation-delay: .10s; }
    .sidebar-nav.in .sidebar-menu > li > :nth-child(4) { animation-delay: .13s; }
    .sidebar-nav.in .sidebar-menu > li > :nth-child(5) { animation-delay: .16s; }
    .sidebar-nav.in .sidebar-menu > li > :nth-child(6) { animation-delay: .19s; }
    .sidebar-nav.in .sidebar-menu > li > :nth-child(7) { animation-delay: .22s; }
    .sidebar-nav.in .sidebar-menu > li > :nth-child(8) { animation-delay: .25s; }
    .sidebar-nav.in .sidebar-menu > li > :nth-child(9) { animation-delay: .28s; }
    .sidebar-nav.in .sidebar-menu > li > :nth-child(10) { animation-delay: .31s; }
    .sidebar-nav.in .sidebar-menu > li > :nth-child(11) { animation-delay: .34s; }
    .sidebar-nav.in .sidebar-menu > li > :nth-child(n+12) { animation-delay: .37s; }
}

@keyframes tdtv-drawer-item {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Scrim
   -------------------------------------------------------------------------- */

.mobile-shadow {
    position: fixed;
    top: var(--tdtv-header-h);
    left: 0;
    right: 0;
    width: auto;
    height: calc(100% - var(--tdtv-header-h));
    z-index: 30;
    background: rgba(0, 0, 0, .58);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--tdtv-drawer-ease), visibility 0s linear .3s;
}

.mobile-shadow.in {
    top: var(--tdtv-header-h);
    height: calc(100% - var(--tdtv-header-h));
    width: auto;
    z-index: 30;
    background: rgba(0, 0, 0, .58);
    opacity: 1;
    visibility: visible;
    transition: opacity .3s var(--tdtv-drawer-ease), visibility 0s;
}

/* --------------------------------------------------------------------------
   Hamburger toggle - above the drawer, morphs into a close icon
   -------------------------------------------------------------------------- */

.header__brand .bars {
    z-index: 70;
    width: 48px;
    height: 48px;
    overflow: hidden;
}

button.sidebar-toggle--header {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Neutralise the inline padding on the icon span so the glyph stays centred. */
.sidebar-toggle--header .tdtv-icon {
    padding: 0 !important;
    display: inline-flex;
    line-height: 0;
}

.sidebar-toggle--header::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 221, 149, .38) 0%, rgba(255, 221, 149, 0) 68%);
    opacity: 0;
    transform: scale(.3);
    pointer-events: none;
}

.sidebar-toggle--header.is-pressed::after {
    animation: tdtv-toggle-ripple .5s ease-out;
}

@keyframes tdtv-toggle-ripple {
    from {
        opacity: .95;
        transform: scale(.25);
    }

    to {
        opacity: 0;
        transform: scale(1.6);
    }
}

.sidebar-toggle .tdtv-icon--menu svg {
    overflow: visible;
    transition: transform .4s var(--tdtv-drawer-ease);
}

.bars.in .sidebar-toggle .tdtv-icon--menu svg {
    transform: rotate(180deg);
}

/* Lucide "menu" draws the middle, top and bottom rules in that order. */
.sidebar-toggle .tdtv-icon--menu svg line {
    transform-box: view-box;
    transform-origin: 12px 12px;
    transition: transform .4s cubic-bezier(.66, -.2, .3, 1.3), opacity .2s ease;
}

.bars.in .sidebar-toggle .tdtv-icon--menu svg line:nth-of-type(1) {
    opacity: 0;
    transform: scaleX(.12);
}

/* Translate before rotating: each rule is centred on 12,12 first, so it turns
   about the icon's middle rather than swinging out from its own row. */
.bars.in .sidebar-toggle .tdtv-icon--menu svg line:nth-of-type(2) {
    transform: rotate(45deg) translateY(6px);
}

.bars.in .sidebar-toggle .tdtv-icon--menu svg line:nth-of-type(3) {
    transform: rotate(-45deg) translateY(-6px);
}

.bars.in {
    background: rgba(255, 221, 149, .14);
}

@media (max-width: 984px) {
    body.tdtv-drawer-open {
        overflow: hidden;
    }
}