/* ═══════════════════════════════════════════════════════════════════════════
   Navigace všech stránek (lib/nav.php + js/nav.js).

   Mobil (<= 860 px): kompaktní horní lišta s logem + pevná spodní lišta
   (vzor: TrustMeBottomBar v aplikaci) + bottom sheet „Více“.
   Desktop: horní lišta s položkami, „Více“ jako rozbalovací panel.

   Kontrast: appkový akcent #00A2E8 nesplní 4,5:1 na bílé, proto má navigace
   vlastní token --nav-active (#0077b3 světlý ≈ 4,9:1, #22b1f2 tmavý).
   Neaktivní položky berou sekundární text stránky (--nav-idle).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --nav-active: #0077b3;
    --nav-idle:   var(--text-2, var(--t2, #5a6b85));
    --nav-fg:     var(--text, var(--t, #0d1b2a));
    --nav-surface: var(--bg-card, #ffffff);
    --nav-line:   var(--border, #e3eaf3);
    --nav-pill:   rgba(0, 119, 179, .14);
    --nav-h:      62px;
    --nav-bar-h:  64px;
}
html[data-theme="dark"] {
    --nav-active: #22b1f2;
    --nav-pill:   rgba(34, 177, 242, .20);
}

.dn-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dn-top[hidden], .dn-backdrop[hidden], .dn-sheet[hidden] { display: none !important; }

.dn-ic { width: 24px; height: 24px; flex-shrink: 0; fill: currentColor; display: block; }
.dn-ic-f { display: none; }
.is-active > .dn-ic-o, [aria-current="page"] > .dn-ic-o,
.is-active > .dn-pill > .dn-ic-o, [aria-current="page"] > .dn-pill > .dn-ic-o { display: none; }
.is-active > .dn-ic-f, [aria-current="page"] > .dn-ic-f,
.is-active > .dn-pill > .dn-ic-f, [aria-current="page"] > .dn-pill > .dn-ic-f { display: block; }

.dn-top button, .dn-bottom button, .dn-sheet button { font: inherit; }

html { scroll-padding-top: calc(var(--nav-h, 62px) + 12px); }

/* ── Horní lišta ─────────────────────────────────────────────────────── */
.dn-top {
    position: sticky; top: 0; z-index: 200;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--nav-line);
}
html[data-theme="dark"] .dn-top { background: rgba(13, 13, 21, .88); }

.dn-top-in {
    display: flex; align-items: center; gap: 1.2rem;
    height: var(--nav-h); padding: 0 2.5rem;
}
.dn-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex-shrink: 0; }
.dn-brand img { width: 32px; height: 32px; }
.dn-brand-t { display: flex; flex-direction: column; line-height: 1.1; }
.dn-brand-n { font-size: 1.05rem; font-weight: 900; color: var(--nav-fg); }
.dn-brand-c { font-size: .6rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--nav-active); }

.dn-desk { margin-left: auto; }
.dn-desk ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .2rem; }
.dn-link {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 44px; padding: 0 .85rem;
    background: none; border: 0; border-radius: 12px; cursor: pointer;
    color: var(--nav-idle); font-size: .92rem; font-weight: 500; text-decoration: none;
    transition: background .15s, color .15s;
}
.dn-link .dn-ic { width: 22px; height: 22px; }
.dn-link:hover { background: rgba(0, 0, 0, .05); color: var(--nav-fg); }
html[data-theme="dark"] .dn-link:hover { background: rgba(255, 255, 255, .08); }
.dn-link.is-active, .dn-link[aria-current="page"] { color: var(--nav-active); font-weight: 700; background: var(--nav-pill); }
.dn-more-btn[aria-expanded="true"] { color: var(--nav-active); }

.dn-top-r { display: flex; align-items: center; gap: .6rem; }
.dn-top .theme-toggle { margin: 0; color: var(--nav-idle); }
.dn-top .theme-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.dn-top .theme-toggle { width: 44px; height: 44px; border-radius: 12px; }
.dn-cta {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2rem;
    background: #0077b3; color: #fff; border-radius: 12px;
    font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: background .15s;
}
.dn-cta:hover { background: #006699; }
html[data-theme="dark"] .dn-cta { background: #22b1f2; color: #04121c; }
html[data-theme="dark"] .dn-cta:hover { background: #4cc0f5; }

/* Užší desktop (861-1180 px): lišta by jinak přetékala. */
@media (min-width: 861px) and (max-width: 1180px) {
    .dn-top-in { gap: .6rem; padding: 0 1.25rem; }
    .dn-brand-c { display: none; }
    .dn-desk ul { gap: .1rem; }
    .dn-link { padding: 0 .5rem; gap: .35rem; font-size: .88rem; }
    .dn-top-r { gap: .4rem; }
    .dn-cta { padding: 0 .9rem; font-size: .86rem; }
}

/* ── Spodní lišta (jen mobil) ────────────────────────────────────────── */
.dn-bottom { display: none; }

/* ── Panel „Více“ ────────────────────────────────────────────────────── */
.dn-backdrop {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(8, 14, 24, .5);
    opacity: 0; transition: opacity .22s ease;
}
.dn-backdrop.is-open { opacity: 1; }

.dn-sheet {
    position: fixed; z-index: 310;
    background: var(--nav-surface); color: var(--nav-fg);
    border: 1px solid var(--nav-line);
    overflow-y: auto; overscroll-behavior: contain;
    font-family: 'Inter', system-ui, sans-serif;
    box-shadow: 0 24px 60px rgba(10, 30, 60, .25);
    outline: none;
    opacity: 0; transition: opacity .2s ease, transform .25s ease;
}
html[data-theme="dark"] .dn-sheet { box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.dn-sheet.is-open { opacity: 1; transform: none; }

.dn-handle { display: none; }
.dn-sheet-h { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1rem .4rem 1.2rem; }
.dn-sheet-h h2 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--nav-fg); }
.dn-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0; margin: -6px -6px -6px 0;
    background: none; border: 0; border-radius: 14px; cursor: pointer; color: var(--nav-idle);
}
.dn-close:hover { background: rgba(0, 0, 0, .05); color: var(--nav-fg); }
html[data-theme="dark"] .dn-close:hover { background: rgba(255, 255, 255, .08); }

.dn-list { list-style: none; margin: 0; padding: .2rem .6rem; }
.dn-list-2 { border-top: 1px solid var(--nav-line); margin-top: .3rem; padding-top: .5rem; }
.dn-row {
    display: flex; align-items: center; gap: .9rem; width: 100%;
    min-height: 48px; padding: .4rem .7rem;
    background: none; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
    color: var(--nav-fg); font-size: .95rem; font-weight: 500; text-decoration: none;
    transition: background .15s;
}
.dn-row .dn-ic { color: var(--nav-idle); }
.dn-row:hover { background: rgba(0, 0, 0, .05); }
html[data-theme="dark"] .dn-row:hover { background: rgba(255, 255, 255, .08); }
.dn-row.is-active, .dn-row[aria-current="page"] { color: var(--nav-active); font-weight: 700; background: var(--nav-pill); }
.dn-row.is-active .dn-ic, .dn-row[aria-current="page"] .dn-ic { color: var(--nav-active); }
/* Řádek s motivem: ikona ukazuje, kam přepnutí vede (jako .theme-toggle). */
.dn-row .icon-sun { display: none; }
html[data-theme="dark"] .dn-row .icon-sun { display: block; }
html[data-theme="dark"] .dn-row .icon-moon { display: none; }

.dn-sheet-cta {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 48px; margin: .6rem 1.2rem 1.2rem; padding: 0 1.2rem;
    background: #0077b3; color: #fff; border-radius: 14px;
    font-size: .95rem; font-weight: 700; text-decoration: none;
}
.dn-sheet-cta:hover { background: #006699; }
html[data-theme="dark"] .dn-sheet-cta { background: #22b1f2; color: #04121c; }
html[data-theme="dark"] .dn-sheet-cta:hover { background: #4cc0f5; }

.dn a:focus-visible, .dn-top a:focus-visible, .dn-top button:focus-visible,
.dn-bottom a:focus-visible, .dn-bottom button:focus-visible,
.dn-sheet a:focus-visible, .dn-sheet button:focus-visible, .dn-sheet:focus-visible {
    outline: 3px solid var(--nav-active); outline-offset: 2px;
}
.dn-sheet:focus-visible { outline: none; }
.dn-bottom a:focus-visible, .dn-bottom button:focus-visible { outline-offset: -3px; border-radius: 14px; }

/* Zámek posouvání stránky a schování plovoucího asistenta, dokud je panel otevřený. */
/* Zámek jen na mobilu; na desktopu není potřeba a html{overflow:hidden} by rozbil sticky lištu. */
@media (max-width: 860px) {
    html.dn-lock body { overflow: hidden; }
}
html.dn-lock .asst { opacity: 0; pointer-events: none; }

/* ── Desktop: panel jako rozbalovací okno pod horní lištou ───────────── */
@media (min-width: 861px) {
    .dn-backdrop { background: transparent; }
    .dn-sheet {
        top: calc(var(--nav-h) + 6px); right: 1.5rem;
        width: 320px; max-height: calc(100vh - var(--nav-h) - 24px);
        border-radius: 16px; transform: translateY(-8px);
    }
    .dn-sheet-cta { display: none; }
    .dn-sheet-h { padding-top: .6rem; }
}

/* ── Mobil ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    :root { --nav-h: 56px; }
    .dn-top-in { padding: 0 1rem; }
    .dn-desk, .dn-top-r { display: none; }

    /* Lišta nesmí nic překrývat. */
    body { padding-bottom: calc(var(--nav-bar-h) + env(safe-area-inset-bottom, 0px)); }

    .dn-bottom {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
        height: calc(var(--nav-bar-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--nav-surface);
        border-top: 1px solid var(--nav-line);
        box-shadow: 0 -4px 16px rgba(10, 30, 60, .08);
    }
    html[data-theme="dark"] .dn-bottom { box-shadow: 0 -4px 16px rgba(0, 0, 0, .45); }
    .dn-bottom ul {
        list-style: none; margin: 0; padding: 0 4px;
        height: var(--nav-bar-h); display: flex; align-items: center; justify-content: space-around;
    }
    .dn-bottom li { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
    .dn-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        min-width: 48px; min-height: 48px; padding: 4px 6px; width: 100%; max-width: 92px;
        background: none; border: 0; cursor: pointer; text-decoration: none;
        color: var(--nav-idle); -webkit-tap-highlight-color: transparent;
    }
    .dn-pill {
        display: flex; align-items: center; justify-content: center;
        width: 52px; height: 28px; border-radius: 14px; transition: background .18s;
    }
    .dn-lbl {
        font-size: 11px; line-height: 1.1; font-weight: 500; letter-spacing: 0;
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dn-item.is-active, .dn-item[aria-current="page"],
    .dn-more-btn[aria-expanded="true"].dn-item { color: var(--nav-active); }
    .dn-item.is-active .dn-pill, .dn-item[aria-current="page"] .dn-pill,
    .dn-more-btn[aria-expanded="true"].dn-item .dn-pill { background: var(--nav-pill); }
    .dn-item.is-active .dn-lbl, .dn-item[aria-current="page"] .dn-lbl { font-weight: 700; }
    .dn-more-btn.dn-item[aria-expanded="true"] .dn-ic-o { display: none; }
    .dn-more-btn.dn-item[aria-expanded="true"] .dn-ic-f { display: block; }

    /* Bottom sheet */
    .dn-sheet {
        left: 0; right: 0; bottom: 0; top: auto;
        max-height: 85vh; max-height: 85dvh;
        border-radius: 20px 20px 0 0; border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform: translateY(100%);
    }
    .dn-handle { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--nav-line); margin: 10px auto 0; }
    .dn-sheet-h { padding-top: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dn-backdrop, .dn-sheet, .dn-link, .dn-row, .dn-pill { transition: none; }
}

/* Horní lišta po posunu stránky (dřív inline padding v js/child-safety.js). */
.dn-top.scrolled { box-shadow: 0 2px 14px rgba(10, 30, 60, .10); }
html[data-theme="dark"] .dn-top.scrolled { box-shadow: 0 2px 14px rgba(0, 0, 0, .5); }