/* Navigation mobile des pages secondaires historiques (Tracker et archives). */

html,
body {
    overflow-x: clip;
}

.secondary-mobile-menu-toggle,
.secondary-mobile-menu {
    display: none;
}

.secondary-mobile-menu-toggle {
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    align-content: center;
    gap: 4px;
    color: #f8fafc;
    background: rgba(15, 23, 42, .72);
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 999px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.secondary-mobile-menu-toggle span {
    width: 17px;
    height: 1.5px;
    display: block;
    background: currentColor;
    border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
}

.secondary-mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.secondary-mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.secondary-mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.secondary-mobile-menu-toggle:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, .62);
}

.secondary-mobile-menu-toggle:focus-visible,
.secondary-mobile-menu a:focus-visible {
    outline: 3px solid rgba(139, 92, 246, .72);
    outline-offset: 3px;
}

.secondary-mobile-menu[hidden] {
    display: none !important;
}

.secondary-nav-cta-short {
    display: none;
}

@media (max-width: 1023px) {
    .secondary-mobile-menu-toggle {
        display: grid;
    }

    .secondary-mobile-menu {
        position: absolute;
        top: 100%;
        right: 16px;
        width: min(340px, calc(100vw - 32px));
        padding: 10px;
        display: grid;
        gap: 3px;
        background: rgba(6, 8, 16, .96);
        border: 1px solid rgba(139, 92, 246, .32);
        border-radius: 0 0 16px 16px;
        box-shadow: 0 24px 54px rgba(0, 0, 0, .48);
        backdrop-filter: blur(20px) saturate(130%);
    }

    .secondary-mobile-menu a {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 14px;
        color: #cbd5e1;
        text-decoration: none;
        border-radius: 10px;
        font-size: .92rem;
        font-weight: 650;
        transition: color .2s ease, background .2s ease, transform .2s ease;
    }

    .secondary-mobile-menu a::after {
        content: "→";
        color: #a78bfa;
    }

    .secondary-mobile-menu a:hover,
    .secondary-mobile-menu a[aria-current="page"] {
        color: #fff;
        background: rgba(139, 92, 246, .14);
        transform: translateX(2px);
    }
}

@media (max-width: 520px) {
    .secondary-nav-cta {
        padding-inline: 13px !important;
        font-size: .75rem !important;
        white-space: nowrap;
    }
}

@media (max-width: 359px) {
    .secondary-nav-cta-full {
        display: none;
    }

    .secondary-nav-cta-short {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .secondary-mobile-menu-toggle,
    .secondary-mobile-menu a,
    .secondary-mobile-menu-toggle span {
        transition: none;
    }
}