/* ===================================================================
   FRIGO — Navigacija
   Stil je preslikan 1:1 sa HTML predloška.

   Svaka boja je zapisana kao `var(--token, #fallback)`. Kada je FRIGO
   tema aktivna, tokeni postoje i meni prati dizajn sistem — promena u
   base.css se odmah vidi i ovde. Kada teme nema, rezervne vrednosti
   drže isti izgled. Zato plugin radi i samostalno, a ne postaje drugi
   izvor istine za boje.

   Prag za mobilni meni je 1080 px. Nije 1024: na 1024 se pet stavki i
   crveno dugme sudaraju sa logotipom. Ako se prag promeni u widgetu,
   widget dopiše svoj @media koji gazi ove vrednosti.
   =================================================================== */

/* ---------- Omotač ----------
   Guranje udesno unutar .header-inner. Ako header pravi Elementor
   kontejner, ovo i dalje radi jer je omotač flex stavka. */
.frigo-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

/* ---------- Traka (desktop) ---------- */
.frigo-nav .main-nav { display: none; }

@media (min-width: 1080px) {
    .frigo-nav .main-nav {
        display: flex;
        align-items: center;
        gap: 2px;
    }
}

.frigo-nav .nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.frigo-nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: var(--tx-light, #F2F5F6);
    text-decoration: none;
    border-radius: var(--r-int, 2px);
    transition: background 0.22s, color 0.22s;
}
.frigo-nav .nav-link:hover,
.frigo-nav .nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--tx-light, #F2F5F6);
}

/* Crvena crta ispod aktivne stavke */
.frigo-nav .nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    background: var(--red-lt, #D2323A);
}

.frigo-nav .nav-caret {
    width: 9px;
    height: 9px;
    opacity: 0.55;
    flex: 0 0 auto;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.frigo-nav .nav-item:hover .nav-caret,
.frigo-nav .nav-item:focus-within .nav-caret {
    transform: rotate(180deg);
}

/* ---------- Padajući meni ----------
   Spoljni sloj je providan i služi kao „most" za miša: bez njega meni
   nestane dok kursor prelazi razmak između stavke i panela. */
.frigo-nav .nav-drop {
    position: absolute;
    top: 100%;
    left: 4px;
    padding-top: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.22s;
    z-index: 20;
}
.frigo-nav .nav-item:hover .nav-drop,
.frigo-nav .nav-item:focus-within .nav-drop,
.frigo-nav .nav-item.is-open .nav-drop {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.frigo-nav .nav-drop ul {
    min-width: 268px;
    margin: 0;
    padding: 7px;
    list-style: none;
    display: grid;
    gap: 1px;
    background: var(--steel-900, #16191C);
    border: 1px solid var(--line-d, rgba(242, 245, 246, 0.13));
    border-top: 2px solid var(--red, #B01F26);
    box-shadow: var(--sh-lg, 0 24px 64px rgba(16, 19, 21, 0.16));
}
.frigo-nav .nav-drop li { margin: 0; }

.frigo-nav .nav-drop a {
    display: grid;
    gap: 3px;
    padding: 10px 13px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--tx-light, #F2F5F6);
    text-decoration: none;
    border-radius: var(--r-int, 2px);
    transition: background 0.2s;
}
.frigo-nav .nav-drop a:hover,
.frigo-nav .nav-drop a:focus-visible,
.frigo-nav .nav-drop li.is-active > a {
    background: rgba(255, 255, 255, 0.07);
}

/* Opis iz ACF polja stranice.
   Boja je namerno --steel-400, ne --steel-500: na #16191C daje kontrast
   6.26 umesto 3.87, pa sitan tekst prolazi WCAG AA. */
.frigo-nav .nav-drop a small {
    display: block;
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.45;
    color: var(--steel-400, #939BA1);
}

/* Treći nivo — predložak ga ne predviđa, ali ne sme da se raspadne */
.frigo-nav .nav-drop-sub {
    list-style: none;
    margin: 4px 0 0;
    padding: 0 0 0 13px;
    display: grid;
    gap: 1px;
    border-left: 1px solid var(--line-d, rgba(242, 245, 246, 0.13));
}

/* ---------- Akcije u headeru ---------- */
.frigo-nav .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
@media (min-width: 1080px) {
    .frigo-nav .header-actions { margin-left: 18px; }
}

.frigo-nav .hdr-phone { display: none; }
@media (min-width: 1300px) {
    .frigo-nav .hdr-phone {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 4px;
        font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
        font-size: 13px;
        color: var(--tx-light, #F2F5F6);
        text-decoration: none;
        transition: color 0.25s;
    }
}
.frigo-nav .hdr-phone svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--red-lt, #D2323A);
}
/* Za tekst na tamnoj podlozi ide svetlija crvena — brend crvena tu pada
   ispod AA praga za slova. */
.frigo-nav .hdr-phone:hover { color: var(--red-tx, #E45C62); }

/* Dvostruka klasa je namerna: .btn niže postavlja display:inline-flex,
   pa bi sa jednom klasom dugme iskočilo i na 360 px, gde se sudara sa
   logotipom. Tamo poziv na akciju nose mobilna traka i meni. */
.frigo-nav .btn.hdr-cta { display: none; }
@media (min-width: 620px) {
    .frigo-nav .btn.hdr-cta { display: inline-flex; }
}

/* ---------- Hamburger ----------
   Hamburger je i dugme za zatvaranje: kad se meni otvori, dve crte se
   ukrste u X. Zato mora da ostane IZNAD sloja menija. Oba žive u istom
   kontekstu slaganja — Elementor kontejner zaglavlja ima svoj z-index —
   pa bi bez sopstvenog z-indexa sloj (290) prekrio hamburger i meni ne
   bi imao čime da se zatvori. */
.frigo-nav .burger {
    position: relative;
    z-index: 300;
    display: grid;
    gap: 6px;
    padding: 12px 8px;
    margin-right: -8px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--tx-light, #F2F5F6);
}
@media (min-width: 1080px) {
    .frigo-nav .burger { display: none; }
}
.frigo-nav .burger i {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
body.menu-open .frigo-nav .burger i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu-open .frigo-nav .burger i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Mobilni meni ----------
   Zatvoren sloj je i nevidljiv i neosetljiv na dodir. Sam clip-path ga
   samo iseče: element i dalje stoji preko celog ekrana, a neki mobilni
   pregledači pri hit-testu ne poštuju isečeni deo — dodir na hamburger
   tada ode sloju i meni se „ne otvara". Vidljivost se gasi tek po
   završetku animacije zatvaranja, da zavesa ne nestane naglo. */
.frigo-nav .menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 290;
    background: var(--night, #101315);
    color: var(--tx-light, #F2F5F6);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    pointer-events: none;
    transition: clip-path 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0.55s;
    will-change: clip-path;
    overflow-y: auto;
    overscroll-behavior: contain;
}
body.menu-open .frigo-nav .menu-overlay {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    pointer-events: auto;
    transition: clip-path 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0s;
}
@media (min-width: 1080px) {
    .frigo-nav .menu-overlay { display: none; }
}

/* Elementor „sticky" zaglavlje pravi skrivenu kopiju celog zaglavlja
   kao držač mesta. U njoj je i drugi sloj menija — mora da ostane
   skriven i kada je meni otvoren, inače se dva sloja preklope. */
.elementor-sticky__spacer .frigo-nav .menu-overlay,
.elementor-sticky__spacer .frigo-nav .burger {
    visibility: hidden !important;
    pointer-events: none !important;
}

.frigo-nav .menu-inner {
    min-height: 100%;
    display: grid;
    align-content: start;
    gap: 32px;
    padding: calc(var(--header-h, 76px) + 24px) var(--pad-x, clamp(20px, 5vw, 88px)) 40px;
}

.frigo-nav .menu-list { display: grid; gap: 0; }

.frigo-nav .menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line-d, rgba(242, 245, 246, 0.13));
    font-family: var(--font-display, "Inter", system-ui, sans-serif);
    font-size: clamp(21px, 5.2vw, 28px);
    font-weight: 700;
    letter-spacing: -0.028em;
    color: var(--tx-light, #F2F5F6);
    text-decoration: none;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.25s;
}
body.menu-open .frigo-nav .menu-link { opacity: 1; transform: none; }
body.menu-open .frigo-nav .menu-list a:nth-child(1) { transition-delay: 0.06s; }
body.menu-open .frigo-nav .menu-list a:nth-child(2) { transition-delay: 0.10s; }
body.menu-open .frigo-nav .menu-list a:nth-child(3) { transition-delay: 0.14s; }
body.menu-open .frigo-nav .menu-list a:nth-child(4) { transition-delay: 0.18s; }
body.menu-open .frigo-nav .menu-list a:nth-child(5) { transition-delay: 0.22s; }
body.menu-open .frigo-nav .menu-list a:nth-child(6) { transition-delay: 0.26s; }
body.menu-open .frigo-nav .menu-list a:nth-child(7) { transition-delay: 0.30s; }
body.menu-open .frigo-nav .menu-list a:nth-child(8) { transition-delay: 0.34s; }

.frigo-nav .menu-link:hover,
.frigo-nav .menu-link.is-active { color: var(--red-tx, #E45C62); }

.frigo-nav .menu-link em {
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--steel-600, #545C63);
}

/* Podstavke — niži stepen u hijerarhiji */
.frigo-nav .menu-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-size: 14px;
    color: var(--tx-mute-l, #98A1A7);
}
.frigo-nav .menu-sub a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s;
}
.frigo-nav .menu-sub a:hover { color: var(--tx-light, #F2F5F6); }

.frigo-nav .menu-foot {
    display: grid;
    gap: 12px;
    padding-top: 22px;
    border-top: 1px solid var(--line-d, rgba(242, 245, 246, 0.13));
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace);
    font-size: 13px;
    color: var(--tx-mute-l, #98A1A7);
}
.frigo-nav .menu-foot a { text-decoration: none; color: inherit; }
.frigo-nav .menu-foot a:hover { color: var(--red-tx, #E45C62); }

.frigo-nav .contact-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: inherit;
}
.frigo-nav .contact-line svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--red-lt, #D2323A);
}

/* ---------- Dugmad ----------
   Ponovljeno iz dizajn sistema samo da plugin radi i bez FRIGO teme.
   Kada je tema aktivna, njene vrednosti su iste, pa nema sudara. */
.frigo-nav .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--r-int, 2px);
    transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.15s;
}
.frigo-nav .btn:active { transform: translateY(1px); }
.frigo-nav .btn--red {
    background: var(--red, #B01F26);
    color: #fff;
    box-shadow: var(--red-sh, 0 1px 2px rgba(138, 19, 25, 0.28), 0 6px 18px rgba(138, 19, 25, 0.22));
}
.frigo-nav .btn--red:hover {
    background: var(--red-lt, #D2323A);
    color: #fff;
}
.frigo-nav .btn--sm { padding: 9px 16px; font-size: 13px; }
.frigo-nav .btn--block { width: 100%; }

/* ---------- Fokus ---------- */
.frigo-nav a:focus-visible,
.frigo-nav button:focus-visible {
    outline: 2px solid var(--red-lt, #D2323A);
    outline-offset: 3px;
}

/* ---------- Poruka u editoru ---------- */
.frigo-menu-notice {
    padding: 16px 20px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    color: #98A1A7;
    font-size: 14px;
}

/* ---------- Smanjena animacija ---------- */
@media (prefers-reduced-motion: reduce) {
    .frigo-nav *,
    .frigo-nav *::before,
    .frigo-nav *::after {
        transition-duration: 0.12s !important;
        animation-duration: 0.01ms !important;
    }
    .frigo-nav .menu-link { opacity: 1 !important; transform: none !important; }
}

/* ---------- Osnovni font ----------
   Sve u elementu što nije naslov (`--font-display`) ni sitan natpis
   (`--font-mono`) ide odavde. Bez ovoga ti delovi nemaju nijedan
   `font-family`, pa nasleđuju font teme i ne menjaju se kad urednik
   izabere font u panelu ili na elementu.

   `inherit` kao rezerva: dok font nije izabran, ponaša se tačno kao
   da pravila nema. */
.frigo-nav { font-family: var(--font-body, inherit); }