/* eSCeTech2 – EXPERIMENT: mobilná spodná navigácia.
   Samostatné štýly, aby bolo možné experiment odstrániť bez úprav site.css. */
.mobile-bottom-nav { display: none; }

@media (max-width: 760px) {
    :root {
        --mobile-nav-height: 70px;
        --mobile-nav-bottom-safe: env(safe-area-inset-bottom, 0px);
    }

    /* Na mobile nahradíme hamburger menu spodnou navigáciou. */
    .site-header .nav-toggle,
    .site-header .site-nav { display: none; }
    .site-header .nav-shell {
        min-height: 64px;
        justify-content: center;
    }
    .site-header .brand img { width: 142px; }

    /* Pri poslednej sekcii a v pätičke nič nezakryje fixný panel. */
    body { padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-nav-bottom-safe)); }

    .mobile-bottom-nav {
        display: block;
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 500;
        padding-bottom: var(--mobile-nav-bottom-safe);
        background: rgba(6, 20, 29, .96);
        border-top: 1px solid rgba(138, 171, 190, .28);
        box-shadow: 0 -10px 32px rgba(0, 0, 0, .28);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    .mobile-bottom-nav__items {
        height: var(--mobile-nav-height);
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        max-width: 560px;
        margin-inline: auto;
        padding: 4px 6px 5px;
        gap: 2px;
    }

    .mobile-bottom-nav__item {
        min-width: 0;
        min-height: 54px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #a9bcc8;
        border: 0;
        border-radius: 11px;
        background: transparent;
        font-family: inherit;
        font-size: 10px;
        line-height: 1.25;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .18s ease, color .18s ease;
    }

    .mobile-bottom-nav__item svg,
    .mobile-bottom-nav__popup svg {
        width: 22px;
        height: 22px;
        flex: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-bottom-nav__item.is-active,
    .mobile-bottom-nav__more[open] > summary {
        color: #75c3ff;
        background: rgba(38, 150, 255, .12);
    }

    .mobile-bottom-nav__item:active { background: rgba(117, 195, 255, .16); }
    .mobile-bottom-nav__item:focus-visible,
    .mobile-bottom-nav__popup a:focus-visible {
        outline: 2px solid #75c3ff;
        outline-offset: -2px;
    }

    .mobile-bottom-nav__more { position: relative; min-width: 0; }
    .mobile-bottom-nav__more > summary {
        list-style: none;
        height: 100%;
    }
    .mobile-bottom-nav__more > summary::-webkit-details-marker { display: none; }

    .mobile-bottom-nav__popup {
        position: absolute;
        right: 0;
        bottom: calc(100% + 13px);
        width: min(240px, calc(100vw - 24px));
        padding: 7px;
        border: 1px solid rgba(138, 171, 190, .32);
        border-radius: 16px;
        background: #101f2a;
        box-shadow: 0 20px 55px rgba(0, 0, 0, .45);
    }

    .mobile-bottom-nav__popup a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px 12px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 650;
        color: #f0f6f9;
    }
    .mobile-bottom-nav__popup a + a { border-top: 1px solid rgba(255,255,255,.07); }
    .mobile-bottom-nav__popup a[aria-current="page"] {
        background: rgba(38,150,255,.12);
        color: #75c3ff;
    }

    /* Lightbox má vlastné ovládanie a musí byť nad všetkým. */
    body.lightbox-open .mobile-bottom-nav { display: none; }
    body.lightbox-open { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav__item { transition: none; }
}