/* --- Hamburger menu pro telefon: sdílené pro všechny stránky, ovládá ho nav.js ---
   Selektory "header nav" mají vyšší specificitu než "nav" ve stylech stránek,
   takže je přepíšou bez ohledu na pořadí načtení. */

/* Hamburger tlačítko: zobrazí se jen na telefonu */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 40px;
    padding: 12px 10px;
    /* Záporný okraj: velká plocha pro prst, ale hlavička nezvýší výšku a ikona lícuje s okrajem */
    margin: -8px -10px -8px 0;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    height: 2px;
    background-color: var(--text-light, #ffffff);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle:focus-visible {
    outline: 2px solid var(--accent-yellow, #f1a80a);
    outline-offset: 2px;
}

/* Otevřené menu: z čárek se stane křížek */
header.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

header.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

header.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* --- Telefon: navigace schovaná pod hamburgerem --- */
@media (max-width: 640px) {
    .nav-toggle {
        display: flex;
    }

    /* Rozbalovací panel přes celou šířku hned pod hlavičkou (sticky header je jeho kotvou) */
    header nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 4px 20px 12px 20px;
        background-color: var(--primary-blue, #04142c);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
        /* visibility schová odkazy i před Tabem a čtečkami, ale dovolí animaci */
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    }

    header.nav-open nav {
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    header nav a {
        padding: 14px 0;
        font-size: 17px;
        line-height: 1.5;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    header nav a:last-child {
        border-bottom: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    header nav,
    .nav-toggle span { transition: none; }
}