/* nav-mobile.css — mobilni menu (hamburger).
   Sdileji vsechny stranky, protoze navigace je vsude stejna.
   Linkovat VZDY AZ ZA base.css / home.css — prepisuje jejich pravidla
   pro .nav-links a .nav-dropdown v uzkych oknech. */

/* Na desktopu tlacitko neexistuje. */
.nav-toggle { display: none; }

/* 900 px, ne 768: pet polozek plus logo se do radku nevejde uz driv,
   nez zabere puvodni breakpoint. */
@media (max-width: 900px) {

    /* ---- tlacitko ---- */
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;              /* minimalni rozumna dotykova plocha */
        height: 44px;
        margin-left: 12px;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-toggle:focus-visible {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    .nav-toggle-line {
        display: block;
        width: 24px;
        height: 2px;
        margin: 0 auto;
        background-color: #f1f5f9;
        border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.15s ease;
    }

    /* Otevrene menu: z hamburgeru se stane krizek. */
    .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* ---- vysouvaci panel ---- */
    .nav-links {
        display: none;            /* prepisuje flex z base.css i home.css */
        position: fixed;
        top: 70px;                /* vyska hlavicky */
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        gap: 0;
        padding: 8px 0 20px;
        background-color: rgba(2, 6, 23, 0.98);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid #1e293b;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    }

    .nav-links.otevreno { display: flex; }

    .nav-links > a,
    .nav-item > a {
        display: block;
        padding: 15px 24px;
        font-size: 1rem;
        border-bottom: 1px solid rgba(30, 41, 59, 0.7);
    }

    /* ---- rozbalovaci polozka ----
       Na desktopu se rozbaluje pri hoveru. Na dotykovem displeji hover
       neexistuje, a puvodni pravidlo ji pod 768 px skryvalo uplne, takze
       Hikvision a Ctronics nebyly z telefonu dostupne vubec. Tady jsou
       proto rovnou videt jako odsazene podpolozky. */
    .nav-item {
        display: block;
        position: static;
        height: auto;
    }

    .nav-item > a::after { content: none; }

    .nav-dropdown {
        display: block;
        position: static;
        min-width: 0;
        margin: 0;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .nav-dropdown::before { content: none; }

    .nav-dropdown a {
        display: block;
        padding: 13px 24px 13px 44px;
        font-size: 0.95rem;
        color: #94a3b8;
        border-bottom: 1px solid rgba(30, 41, 59, 0.7);
        background: none;
    }

    .nav-dropdown a:hover,
    .nav-dropdown a:focus { background-color: rgba(59, 130, 246, 0.1); }

    /* Posledni polozka uz oddelovac nepotrebuje. */
    .nav-links > a:last-child,
    .nav-dropdown a:last-child { border-bottom: 0; }
}

/* Uzke telefony: logo se musi vejde vedle tlacitka. */
@media (max-width: 420px) {
    .logo img { height: 40px; }
    .logo { font-size: 1.05rem; gap: 8px; }
}