/* ==========================================================================
   Mega-menu za public navbar (Takmicenja / Kultura)
   - desktop: 2-kolone (lijevo kategorije, desno event-liste stack-ovane u
     istom grid row-u, vidljiva je samo aktivna)
   - mobile: accordion (kategorije jedna ispod druge, klik otvara svoje
     event-liste inline)
   ========================================================================== */

.nav-mega {
    position: relative;
}

/* ==========================================================================
   Mini-dropdown — manji od mega-menu, koristi se za "Program" stavku u
   krovnom navbaru (Danas / Cijeli program). Hover (desktop) i klik (mobile).
   ========================================================================== */

.nav-mini-drop {
    position: relative;
}

.nav-mini-drop__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-mini-drop__chevron {
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform .25s ease;
    margin-left: 4px;
}

.nav-mini-drop:hover .nav-mini-drop__chevron,
.nav-mini-drop.is-open .nav-mini-drop__chevron {
    transform: rotate(225deg) translateY(-1px);
}

.nav-mini-drop__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 100;
    min-width: 180px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(15,17,22,.10);
    padding: 8px;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity .18s ease,
        transform .22s cubic-bezier(.22,.61,.36,1),
        visibility .18s linear .18s;
}

.nav-mini-drop:hover .nav-mini-drop__menu,
.nav-mini-drop.is-open .nav-mini-drop__menu,
.nav-mini-drop:focus-within .nav-mini-drop__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Drzi otvoren panel kad mis prelazi sa trigger-a na menu */
.nav-mini-drop__menu::before {
    content: "";
    position: absolute;
    top: -8px; left: 0; right: 0;
    height: 8px;
}

.nav-mini-drop__menu li { list-style: none; margin: 0; padding: 0; }

.nav-mini-drop__menu a {
    display: block;
    padding: 8px 14px;
    border-radius: 8px;
    color: #4b4f57;
    font-size: .92rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.nav-mini-drop__menu a:hover {
    background: #f6f5f1;
    color: #14161a;
}

/* Mobile: accordion ponasanje (open ispod trigger-a, bez absolute) */
@media (max-width: 860px) {
    .nav-mini-drop__menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 6px 16px;
        background: transparent;
        max-height: none;
        display: none;
        transition: none;
    }
    .nav-mini-drop.is-open .nav-mini-drop__menu { display: block; }
    .nav-mini-drop:hover .nav-mini-drop__menu {
        /* na mobile uvijek koristi click (is-open), ne hover */
        display: none;
    }
    .nav-mini-drop.is-open:hover .nav-mini-drop__menu,
    .nav-mini-drop.is-open .nav-mini-drop__menu { display: block; }
}

/* Trigger u navbar-u */
.nav-mega-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: none;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: .92rem;
    color: #4b4f57;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}

.nav-mega-trigger:hover {
    color: #14161a;
    background: #f6f5f1;
}

.nav-mega-trigger__chevron {
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform .25s ease;
    margin-left: 4px;
}

.nav-mega.is-open .nav-mega-trigger__chevron {
    transform: rotate(225deg) translateY(-1px);
}

.nav-mega.is-open .nav-mega-trigger {
    color: #14161a;
    background: #f6f5f1;
}

/* ---------------- Desktop panel (>1100px) ----------------
   Novi UX: glavni panel = uska lista kategorija (~300px). Na hover/focus
   kategorije, otvara se flyout DESNO od te kategorije sa njenim događajima.
   Korisnik ne mora vraćati pogled na vrh menija. */

.nav-mega-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: auto;
    z-index: 100;
    width: 300px;
    max-width: calc(100vw - 32px);
    /* KLJUCNO: nikad overflow auto/scroll/hidden — to bi naljepilo scrollbar
       na dnu kad flyout izlazi desno. `visible` znaci da je flyout slobodan
       da izadje van panela. Lista kategorija je obicno 5-12 stavki = nikad
       preko 600px, pa nema potrebe za vertikalnim scroll-om panela. */
    overflow: visible;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15,17,22,.12);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity .2s ease,
        transform .25s cubic-bezier(.22,.61,.36,1),
        visibility .2s linear .2s;
}

.nav-mega-grid {
    overflow: visible;
}

/* Reverse: trigger blizu desne ivice — panel se otvara prema lijevo,
   a flyout izlazi LIJEVO od kategorije. */
.nav-mega--reverse .nav-mega-panel {
    left: auto;
    right: 0;
}

.nav-mega.is-open .nav-mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Hover bridge IZNAD panela — da hover ne pukne kad miš prelazi sa
   trigger-a na panel (10px gap). */
.nav-mega-panel::before {
    content: "";
    position: absolute;
    top: -10px; left: 0; right: 0;
    height: 10px;
}

/* === Kategorije: vertikalna lista u panelu === */

.nav-mega-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* .nav-mega-item postaje relativni kontejner — flyout (event-list) ide
   absolute pored njega. NIJE vise display: contents. */
.nav-mega-item {
    display: block;
    position: relative;
}

.nav-mega-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 9px 14px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.3;
    color: #4b4f57;
    transition: background-color .18s ease, color .18s ease;
}

.nav-mega-category:hover,
.nav-mega-category.is-active,
.nav-mega-category:focus-visible,
.nav-mega-item:hover .nav-mega-category,
.nav-mega-item:focus-within .nav-mega-category {
    background: color-mix(in srgb, #b9852c 8%, transparent);
    color: #14161a;
    outline: none;
}

/* Strelica → desno od kategorije — vizuelni signal "ovo ima podmeni".
   UVIJEK vidljiva (diskretno), ne samo na hover — kao kod desktop context
   menija. Hover je samo polish (full bronze + klizi 2px desno). */
.nav-mega-category__arrow {
    color: #b9852c;
    opacity: .55;
    transform: translateX(0);
    transition: opacity .18s ease, transform .18s ease, color .18s ease;
    flex-shrink: 0;
    font-size: .95em;
}

.nav-mega-category.is-active .nav-mega-category__arrow,
.nav-mega-category:hover .nav-mega-category__arrow,
.nav-mega-item:hover .nav-mega-category__arrow,
.nav-mega-item:focus-within .nav-mega-category__arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* === Hover bridge IZMEĐU kategorije i flyout-a ===
   Nevidljiv pravougaonik desno od kategorije pokriva gap pa hover ne pukne
   kad miš putuje od kategorije ka flyout-u. 14px width + 8px gap = 6px
   sigurno preklapanje (zona uvijek pod hover-om). */
.nav-mega-item::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 14px;
    pointer-events: none;
}

.nav-mega-item:hover::after,
.nav-mega-item:focus-within::after {
    pointer-events: auto;
}

/* Reverse: bridge ide LIJEVO. */
.nav-mega--reverse .nav-mega-item::after {
    left: auto;
    right: 100%;
}


/* === Flyout: event-lista pored konkretne kategorije === */

.nav-mega-event-list {
    position: absolute;
    top: -6px;                    /* lagano nadolje za optical alignment sa kategorijom */
    left: calc(100% + 8px);       /* 8px gap — kratak put za miš */
    z-index: 110;
    min-width: 280px;
    max-width: 360px;
    max-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15,17,22,.14);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    pointer-events: none;
    transition:
        opacity .16s ease,
        transform .2s cubic-bezier(.22,.61,.36,1),
        visibility .16s linear .16s;
}

/* Reverse: flyout izlazi LIJEVO od kategorije. */
.nav-mega--reverse .nav-mega-event-list {
    left: auto;
    right: calc(100% + 8px);
    transform: translateX(6px);
}

/* Kontekst-menu pattern: flyout otvara ISKLJUCIVO :hover ili :focus-within
   na kategoriji. `.is-active` (od JS-a / template-a) sada NE forsira flyout
   da se otvori — daje samo warm hover background. Tako prva kategorija
   nema otvoren flyout kad korisnik tek otvori dropdown panel.
   `.nav-mega-event-list:hover` zadrzava flyout otvoren kad mis predje na njega. */
.nav-mega-item:hover .nav-mega-event-list,
.nav-mega-item:focus-within .nav-mega-event-list,
.nav-mega-event-list:hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
    transition-delay: 0s;
}

/* Kategorija bez događaja (prazan event-list) — ne pokazuj prazan flyout.
   Koristi moderan `:has` selektor. */
.nav-mega-item:not(:has(.nav-mega-event)) .nav-mega-event-list {
    display: none !important;
}

/* Ako kategorija nema event-e, skini i strelicu — vizuelni signal
   "ovo nema podmeni" (na nivou desktop context menu konvencije). */
.nav-mega-item:not(:has(.nav-mega-event)) .nav-mega-category__arrow {
    display: none;
}

.nav-mega-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #14161a;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: normal;
    transition: background-color .15s ease, color .15s ease;
}

.nav-mega-event::after {
    content: "→";
    flex: 0 0 auto;
    color: #b9852c;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity .18s ease, transform .18s ease;
    font-weight: 700;
}

.nav-mega-event:hover,
.nav-mega-event:focus-visible {
    background: color-mix(in srgb, #b9852c 8%, transparent);
    color: #14161a;
    outline: none;
}

.nav-mega-event:hover::after,
.nav-mega-event:focus-visible::after {
    opacity: 1;
    transform: translateX(0);
}

/* ---------------- Mobile accordion (≤1100px) — UI/UX polish ----------------
   3-nivoa hijerarhija sa rucno dotjeranim premium feel-om:
     Nivo 1: .nav-mega-trigger  — "Takmicenje" / "Kultura" (glavni tip)
     Nivo 2: .nav-mega-category — "Atletika" / "Konjske trke" (kategorija)
     Nivo 3: .nav-mega-event    — konkretni dogadjaj (kartica, primarni cilj)

   Dizajn principi:
   - bez agresivnih border-a; razdvajanje preko whitespace i suptilnih bg promjena
   - akcent boja (#b9852c) koristi se kao tacka/linija, nikad kao tekst
   - cubic-bezier easing (.4, 0, .2, 1) za "ruceno" osjecanje umjesto default ease
   - layered shadow umjesto solid box-a za "lift" kod event kartice
   - generous spacing izmedju sections, tighter unutar grupe
*/

@media (max-width: 1100px) {

    /* Stagger izmedju glavnih tipova — daje vazduh i ritam. */
    .nav-mega + .nav-mega { margin-top: 4px; }

    /* === NIVO 1: glavni tip (.nav-mega-trigger) === */

    .nav-mega-trigger {
        width: 100%;
        justify-content: space-between;
        align-items: center;
        min-height: 50px;
        padding: 13px 16px;
        font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: -.005em;
        color: #14161a;
        background: transparent;
        border-radius: 12px;
        transition:
            background .25s cubic-bezier(.4, 0, .2, 1),
            color .25s cubic-bezier(.4, 0, .2, 1);
    }

    /* Otvoren tip — suptilan dijagonalni warm gradient. Bez 1px border-a
       (izgledao kao form input). Mekan, prirodan, ne kao admin alert. */
    .nav-mega.is-open .nav-mega-trigger {
        background:
            linear-gradient(135deg,
                color-mix(in srgb, #b9852c 10%, transparent) 0%,
                color-mix(in srgb, #b9852c 3%, transparent) 100%);
        color: #14161a;
    }

    .nav-mega-trigger__chevron {
        color: #b9852c;
        opacity: .7;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
    }
    .nav-mega.is-open .nav-mega-trigger__chevron { opacity: 1; }

    /* Panel — bez extra borders, samo whitespace. */
    .nav-mega-panel {
        position: static;
        width: 100%;
        max-width: none;
        max-height: none;
        overflow: visible;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 4px 0 10px 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        display: none;
    }

    .nav-mega.is-open .nav-mega-panel {
        display: block;
    }

    /* === Sub-items unutar otvorenog tipa — sekvencijalan glass talas === */
    .nav-mega.is-open .nav-mega-item {
        opacity: 0;
        animation: navSubItemIn .26s cubic-bezier(.4, 0, .2, 1) both;
    }
    .nav-mega.is-open .nav-mega-item:nth-child(1)  { animation-delay: 60ms; }
    .nav-mega.is-open .nav-mega-item:nth-child(2)  { animation-delay: 95ms; }
    .nav-mega.is-open .nav-mega-item:nth-child(3)  { animation-delay: 130ms; }
    .nav-mega.is-open .nav-mega-item:nth-child(4)  { animation-delay: 165ms; }
    .nav-mega.is-open .nav-mega-item:nth-child(5)  { animation-delay: 200ms; }
    .nav-mega.is-open .nav-mega-item:nth-child(6)  { animation-delay: 235ms; }
    .nav-mega.is-open .nav-mega-item:nth-child(7)  { animation-delay: 270ms; }
    .nav-mega.is-open .nav-mega-item:nth-child(n+8) { animation-delay: 305ms; }

    @keyframes navSubItemIn {
        from { opacity: 0; transform: translateY(-6px) scale(.99); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    .nav-mega-panel::after { display: none; }

    .nav-mega-grid {
        display: block;
        min-height: 0;
        column-gap: 0;
    }

    /* Mehki separator izmedju kategorija — vrlo svjetli, samo nagovjestaj. */
    .nav-mega-item {
        display: block;
        padding: 0;
    }

    /* Skidamo desktop flyout hover bridge — na mobile-u nije potreban. */
    .nav-mega-item::after {
        content: none !important;
    }

    /* Skidamo desktop absolute flyout pozicioniranje — mobile koristi
       accordion (in-flow). */
    .nav-mega-event-list {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        transition: none !important;
        z-index: auto !important;
    }


    /* === NIVO 2: kategorija (.nav-mega-category) === */
    /* Skinut "inset shadow" border-trik. Umjesto toga — mala tacka levo
       preko ::before. Tacka raste i ispunjava se kad je kategorija otvorena.
       Prirodan tradicionalan accent, ne "Bootstrap alert". */

    .nav-mega-category {
        position: relative;
        width: 100%;
        min-height: 46px;
        padding: 11px 12px 11px 28px;
        font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
        font-size: .93rem;
        font-weight: 500;
        line-height: 1.3;
        background: transparent !important;
        color: #4b4f57 !important;
        border-radius: 8px;
        transition:
            color .25s cubic-bezier(.4, 0, .2, 1),
            background .25s cubic-bezier(.4, 0, .2, 1);
    }

    /* Suptilna tacka levo — vizuelan signal "ovo je kategorija". */
    .nav-mega-category::before {
        content: "";
        position: absolute;
        left: 12px;
        top: 50%;
        width: 5px;
        height: 5px;
        margin-top: -2.5px;
        border-radius: 50%;
        background: color-mix(in srgb, #b9852c 40%, transparent);
        transition:
            background .25s cubic-bezier(.4, 0, .2, 1),
            transform .25s cubic-bezier(.4, 0, .2, 1);
    }

    .nav-mega-category__arrow {
        opacity: .55 !important;
        transform: rotate(0) !important;
        transition:
            transform .3s cubic-bezier(.4, 0, .2, 1),
            opacity .25s ease;
        color: #b9852c;
        font-size: .9em;
    }

    /* Otvorena kategorija — minimalna izmjena pozadine, tacka postaje puna,
       tekst tamniji. Bez agresivnog accent border-a. */
    .nav-mega-item.is-active .nav-mega-category {
        background: color-mix(in srgb, #b9852c 4%, transparent) !important;
        color: #14161a !important;
    }
    .nav-mega-item.is-active .nav-mega-category::before {
        background: #b9852c;
        transform: scale(1.4);
    }
    .nav-mega-item.is-active .nav-mega-category__arrow {
        transform: rotate(90deg) !important;
        opacity: 1 !important;
    }


    /* === NIVO 3: konkretni dogadjaj (.nav-mega-event) === */
    /* PRIMARNI CILJ KORISNIKA. Premium kartica:
       - soft cream pozadina sa diskretnim diagonal gradijentom
       - tanak warm border (1px, bronze 12%)
       - 2px lijeva akcent linija (ne 3px — finije od prethodnog)
       - layered shadow za "lift" — ne grub solid box
       - arrow desno u toned-down krugu na hover */

    .nav-mega-event-list {
        display: none !important;
        grid-row: auto;
        grid-column: auto;
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
        padding: 8px 4px 12px 28px;
        gap: 10px;
        animation: none;
    }

    .nav-mega-item.is-active .nav-mega-event-list {
        display: flex !important;
        flex-direction: column;
    }

    /* === Event kartice — premium glass press kad se kategorija otvori === */
    .nav-mega-item.is-active .nav-mega-event {
        opacity: 0;
        animation: navEventGlassPress .42s cubic-bezier(.4, 0, .2, 1) both;
    }
    .nav-mega-item.is-active .nav-mega-event:nth-child(1) { animation-delay: 70ms; }
    .nav-mega-item.is-active .nav-mega-event:nth-child(2) { animation-delay: 115ms; }
    .nav-mega-item.is-active .nav-mega-event:nth-child(3) { animation-delay: 160ms; }
    .nav-mega-item.is-active .nav-mega-event:nth-child(4) { animation-delay: 205ms; }
    .nav-mega-item.is-active .nav-mega-event:nth-child(5) { animation-delay: 250ms; }
    .nav-mega-item.is-active .nav-mega-event:nth-child(n+6) { animation-delay: 295ms; }

    @keyframes navEventGlassPress {
        0%   { opacity: 0; transform: translateY(-8px) scale(.985) rotateX(-3deg); }
        55%  { opacity: 1; transform: translateY(1px) scale(1.006) rotateX(1deg); }
        78%  { transform: translateY(-1px) scale(.998) rotateX(0); }
        100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
    }

    .nav-mega-event {
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 52px;
        padding: 14px 16px 14px 18px;
        font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
        font-size: .95rem;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -.003em;
        color: #14161a;
        text-decoration: none;
        background:
            linear-gradient(135deg,
                rgba(250, 247, 241, .96) 0%,
                rgba(244, 238, 224, .92) 100%);
        border: 1px solid color-mix(in srgb, #b9852c 12%, transparent);
        border-radius: 14px;
        box-shadow:
            0 1px 2px rgba(20, 22, 26, .03),
            0 6px 14px rgba(20, 22, 26, .035);
        transition:
            background .25s cubic-bezier(.4, 0, .2, 1),
            border-color .25s cubic-bezier(.4, 0, .2, 1),
            box-shadow .3s cubic-bezier(.4, 0, .2, 1),
            transform .15s cubic-bezier(.4, 0, .2, 1);
    }

    /* 2px lijeva akcent linija preko ::before (umjesto inset box-shadow). */
    .nav-mega-event::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 2px;
        border-radius: 2px;
        background: color-mix(in srgb, #b9852c 55%, transparent);
        transition: background .25s cubic-bezier(.4, 0, .2, 1);
    }

    /* Strelica "→" — uvijek vidljiva, na hover ulazi u soft circle frame. */
    .nav-mega-event::after {
        content: "→";
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: transparent;
        font-size: .95rem;
        font-weight: 700;
        color: #b9852c;
        transition:
            background .25s cubic-bezier(.4, 0, .2, 1),
            transform .25s cubic-bezier(.4, 0, .2, 1);
    }

    .nav-mega-event:hover,
    .nav-mega-event:focus-visible {
        background:
            linear-gradient(135deg,
                rgba(245, 238, 225, .98) 0%,
                rgba(239, 230, 215, .95) 100%);
        border-color: color-mix(in srgb, #b9852c 24%, transparent);
        box-shadow:
            0 1px 2px rgba(20, 22, 26, .04),
            0 10px 22px rgba(20, 22, 26, .055);
    }

    .nav-mega-event:hover::before,
    .nav-mega-event:focus-visible::before {
        background: #b9852c;
    }

    .nav-mega-event:hover::after,
    .nav-mega-event:focus-visible::after {
        background: color-mix(in srgb, #b9852c 12%, transparent);
        transform: translateX(2px);
    }

    .nav-mega-event:active {
        transform: scale(.992);
        box-shadow:
            0 1px 2px rgba(20, 22, 26, .04),
            0 4px 10px rgba(20, 22, 26, .04);
    }

    .nav-mega-event__title {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* Aktivno stanje — korisnik je trenutno na ovom dogadjaju. Topla,
       jasna razlika ali bez nasilnog kontrasta. */
    .nav-mega-event.is-active,
    .nav-mega-event[aria-current="page"] {
        background:
            linear-gradient(135deg,
                rgba(239, 230, 215, .98) 0%,
                rgba(232, 219, 196, .95) 100%);
        border-color: color-mix(in srgb, #b9852c 32%, transparent);
    }
    .nav-mega-event.is-active::before,
    .nav-mega-event[aria-current="page"]::before {
        background: #b9852c;
        width: 3px;
    }
    .nav-mega-event.is-active::after,
    .nav-mega-event[aria-current="page"]::after {
        background: color-mix(in srgb, #b9852c 14%, transparent);
    }


    /* ===================================================================
       PROFESIONALNI ULAZAK MOBILNOG MENIJA
       ===================================================================
       Kad .nav-links postane .is-open, svi glavni <li> items uđu odozgo
       ka dole sa suptilnim glass press efektom. Plus diskretan shimmer
       sweep preko Nivo 1 trigger-a i glavnih link-ova.
       Trajanje: 420ms po elementu, stagger 40ms.
       =================================================================== */

    /* Perspective na drawer-u — daje 3D dubinu rotateX-u u keyframe-u. */
    .nav-links {
        perspective: 900px;
        perspective-origin: 50% 0%;
    }

    /* Glavni items ulaze sekvencijalno. transform-origin top-center daje
       prirodan "padajuci" osjecaj kao da items "stoje" u nizu. */
    .nav-links.is-open > li {
        opacity: 0;
        transform-origin: 50% 0%;
        animation: navMainItemGlassIn .42s cubic-bezier(.4, 0, .2, 1) both;
    }

    .nav-links.is-open > li:nth-child(1)  { animation-delay: 40ms;  }
    .nav-links.is-open > li:nth-child(2)  { animation-delay: 80ms;  }
    .nav-links.is-open > li:nth-child(3)  { animation-delay: 120ms; }
    .nav-links.is-open > li:nth-child(4)  { animation-delay: 160ms; }
    .nav-links.is-open > li:nth-child(5)  { animation-delay: 200ms; }
    .nav-links.is-open > li:nth-child(6)  { animation-delay: 240ms; }
    .nav-links.is-open > li:nth-child(7)  { animation-delay: 280ms; }
    .nav-links.is-open > li:nth-child(8)  { animation-delay: 320ms; }
    .nav-links.is-open > li:nth-child(9)  { animation-delay: 360ms; }
    .nav-links.is-open > li:nth-child(10) { animation-delay: 400ms; }
    .nav-links.is-open > li:nth-child(11) { animation-delay: 440ms; }
    .nav-links.is-open > li:nth-child(12) { animation-delay: 480ms; }
    .nav-links.is-open > li:nth-child(13) { animation-delay: 510ms; }
    .nav-links.is-open > li:nth-child(14) { animation-delay: 540ms; }
    .nav-links.is-open > li:nth-child(n+15) { animation-delay: 570ms; }

    /* Glass press keyframe — 4 faze:
       0%  : iznad linije + blur + rotateX nazad
       55% : prelazi liniju, mala overshoot scala
       78% : povlaci se par px nazad (settle)
       100%: smiren u poziciji */
    @keyframes navMainItemGlassIn {
        0% {
            opacity: 0;
            transform: translateY(-10px) scale(.985) rotateX(-4deg);
            filter: blur(2px);
        }
        55% {
            opacity: 1;
            transform: translateY(2px) scale(1.006) rotateX(1deg);
            filter: blur(0);
        }
        78% {
            transform: translateY(-1px) scale(.998) rotateX(0);
            filter: blur(0);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1) rotateX(0);
            filter: blur(0);
        }
    }

    /* === DISKRETAN SHIMMER preko Nivo 1 + glavnih nav linkova ===
       Kratak svetli sweep s lijeva na desno, sinhronizovan sa appearance
       elementa (delay = njegov delay + 90ms). Vrlo suptilno, ne reklama. */

    .nav-links.is-open > li .nav-mega-trigger,
    .nav-links.is-open > li > a {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .nav-links.is-open > li .nav-mega-trigger::after,
    .nav-links.is-open > li > a::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, .28) 42%,
            rgba(255, 255, 255, .10) 52%,
            transparent 70%
        );
        transform: translateX(-130%);
        opacity: 0;
        pointer-events: none;
        z-index: 1;
        animation: navGlassShimmer .65s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    /* Shimmer kasni 90ms za pojavom elementa — udje TEK posle "settle" faze. */
    .nav-links.is-open > li:nth-child(1) .nav-mega-trigger::after,
    .nav-links.is-open > li:nth-child(1) > a::after { animation-delay: 130ms; }
    .nav-links.is-open > li:nth-child(2) .nav-mega-trigger::after,
    .nav-links.is-open > li:nth-child(2) > a::after { animation-delay: 170ms; }
    .nav-links.is-open > li:nth-child(3) .nav-mega-trigger::after,
    .nav-links.is-open > li:nth-child(3) > a::after { animation-delay: 210ms; }
    .nav-links.is-open > li:nth-child(4) .nav-mega-trigger::after,
    .nav-links.is-open > li:nth-child(4) > a::after { animation-delay: 250ms; }
    .nav-links.is-open > li:nth-child(5) .nav-mega-trigger::after,
    .nav-links.is-open > li:nth-child(5) > a::after { animation-delay: 290ms; }
    .nav-links.is-open > li:nth-child(6) .nav-mega-trigger::after,
    .nav-links.is-open > li:nth-child(6) > a::after { animation-delay: 330ms; }
    .nav-links.is-open > li:nth-child(7) .nav-mega-trigger::after,
    .nav-links.is-open > li:nth-child(7) > a::after { animation-delay: 370ms; }
    .nav-links.is-open > li:nth-child(8) .nav-mega-trigger::after,
    .nav-links.is-open > li:nth-child(8) > a::after { animation-delay: 410ms; }
    .nav-links.is-open > li:nth-child(n+9) .nav-mega-trigger::after,
    .nav-links.is-open > li:nth-child(n+9) > a::after { animation-delay: 450ms; }

    @keyframes navGlassShimmer {
        0%   { transform: translateX(-130%); opacity: 0; }
        25%  { opacity: 1; }
        60%  { opacity: .7; }
        100% { transform: translateX(130%); opacity: 0; }
    }

    /* Nav-mega-trigger ima chevron kao child — z-index osigurava da shimmer
       NE prekrije text/chevron iznad. */
    .nav-mega-trigger { z-index: 0; }
    .nav-mega-trigger > * { position: relative; z-index: 2; }
    .nav-links > li > a > * { position: relative; z-index: 2; }
}


/* ===================================================================
   ACCESSIBILITY: prefers-reduced-motion
   Iskljucujemo SVE animacije i shimmer-e u mobile meniju ako je
   korisnik ukljucio reduced motion u OS settings.
   =================================================================== */
@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
    .nav-links,
    .nav-links *,
    .nav-links *::before,
    .nav-links *::after {
        animation: none !important;
        transition: none !important;
    }
    .nav-links.is-open > li {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .nav-mega.is-open .nav-mega-item,
    .nav-mega-item.is-active .nav-mega-event {
        opacity: 1 !important;
        transform: none !important;
    }
}