/* =========================================================================
 * Uklapanje tuđih widgeta u dizajn.
 *
 * CookieConsent, Swiper, GLightbox i toast poruke dolaze sa svojim izgledom.
 * Ovdje se svode na tokene teme (`--color-brand`, `--color-ink`, `Inter`, ravne
 * ivice) — bez diranja njihovih fajlova, da nadogradnja biblioteke ne pregazi
 * izmjene.
 *
 * Pisano rukom, ne generisano: ovo su tuđi selektori, pa ih Tailwind build ne
 * može ni vidjeti ni proizvesti.
 * ====================================================================== */

/* ---- CookieConsent v3 ------------------------------------------------- */
#cc-main {
    --cc-font-family: var(--font-sans);
    --cc-bg: #fff;
    --cc-primary-color: var(--color-ink);
    --cc-secondary-color: color-mix(in srgb, var(--color-ink) 70%, transparent);
    --cc-link-color: var(--color-brand);

    /* Dizajn nema zaobljene ivice — ni na dugmadima ni na karticama. */
    --cc-btn-border-radius: 0;
    --cc-modal-border-radius: 0;
    --cc-pm-toggle-border-radius: 0;

    --cc-btn-primary-bg: var(--color-brand);
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-border-color: var(--color-brand);
    --cc-btn-primary-hover-bg: var(--color-ink);
    --cc-btn-primary-hover-color: #fff;
    --cc-btn-primary-hover-border-color: var(--color-ink);

    --cc-btn-secondary-bg: #fff;
    --cc-btn-secondary-color: var(--color-ink);
    --cc-btn-secondary-border-color: var(--color-ink);
    --cc-btn-secondary-hover-bg: var(--color-ink);
    --cc-btn-secondary-hover-color: #fff;
    --cc-btn-secondary-hover-border-color: var(--color-ink);

    --cc-cookie-category-block-bg: var(--color-surface);
    --cc-cookie-category-block-border: var(--color-surface);
    --cc-cookie-category-block-hover-bg: color-mix(in srgb, var(--color-brand) 8%, #fff);
    --cc-cookie-category-block-hover-border: color-mix(in srgb, var(--color-brand) 25%, #fff);
    --cc-toggle-on-bg: var(--color-brand);
    --cc-separator-border-color: color-mix(in srgb, var(--color-ink) 10%, transparent);
    --cc-footer-bg: var(--color-surface);
    --cc-footer-color: var(--color-ink);
    --cc-footer-border-color: color-mix(in srgb, var(--color-ink) 10%, transparent);
}

#cc-main .cm,
#cc-main .pm {
    box-shadow: var(--shadow-card);
}

/* Dugmad prate tipografiju dugmadi u dizajnu (`.btn`): velika slova, razmak
   između slova, bez zaobljenja. */
#cc-main .cm__btn,
#cc-main .pm__btn {
    text-transform: uppercase;
    letter-spacing: .0625em;
    font-weight: 600;
    min-height: 46px;
}

#cc-main .cm__title,
#cc-main .pm__title {
    letter-spacing: .023em;
    font-weight: 700;
}

/* ---- Navigacija u headeru --------------------------------------------- */
/* Strelica padajućeg menija stoji UZ naziv stavke, kao u dizajnu. Isporučeni
   CSS ju je spuštao ispod reda (`top: calc(100% + 3px)`), pa se čitala kao
   zasebna crta ispod navigacije, ne kao oznaka da stavka ima podmeni. */
.nav-drop__toggle {
    top: 50%;
    left: calc(100% + 7px);
    width: 11px;
    height: 11px;
    align-items: center;
    transform: translateY(-50%);
}
.nav-drop__arrow { width: 11px; height: auto; }

/* ---- Footer na dodirnim ekranima -------------------------------------- */
/*
 * Isporučeni CSS na dodirnim ekranima svakoj stavci footera daje 44px visine
 * (`min-height`) i gasi razmak — pa spisak izgleda razvučeno, sa oko 24px
 * praznine između redova.
 *
 * Ovdje se VIDLJIVA visina svodi na red teksta, a površina za dodir se vraća
 * kroz `::after` koji izlazi izvan okvira. Rezultat: razmak manji za ~70%, a
 * prst i dalje ima 44px — ono zbog čega je pravilo i postojalo.
 */
@media (hover: none) and (pointer: coarse) {
    footer ul[role="list"] > li > a,
    footer ul[role="list"] > li > span > a {
        min-height: 0;
        position: relative;
        display: inline-block;
    }
    footer ul[role="list"] > li > a::after,
    footer ul[role="list"] > li > span > a::after {
        content: "";
        position: absolute;
        inset-block: -11px;
        inset-inline: 0;
    }
    footer ul[role="list"] > li + li { margin-top: 8px; }
}

/* ---- Meni preko cijelog ekrana na dodirnim ekranima ------------------- */
/*
 * Isti slučaj kao u footeru: isporučeni CSS svakoj stavci daje 44px visine i
 * gasi razmak, pa spisak izgleda razvučeno. Vidljiva visina se svodi na red
 * teksta, a površina za dodir vraća kroz `::after` — razmak manji za ~50%, prst
 * i dalje ima 44px.
 */
@media (hover: none) and (pointer: coarse) {
    .menu-cols li > a {
        min-height: 0;
        position: relative;
        display: inline-block;
    }
    .menu-cols li > a::after {
        content: "";
        position: absolute;
        inset-block: -10px;
        inset-inline: 0;
    }
    .menu-cols ul > li + li { margin-top: 9px; }
}

/* ---- Swiper ----------------------------------------------------------- */
/* Tačkice slajdera u brend zelenoj, bez zaobljenja — kao i ostatak dizajna. */
.swiper-pagination-bullet {
    background: #fff;
    opacity: .45;
    border-radius: 0;
    width: 18px;
    height: 3px;
    transition: opacity .4s var(--ease-out-expo), background-color .4s var(--ease-out-expo);
}
.swiper-pagination-bullet-active {
    background: var(--color-brand);
    opacity: 1;
}

/* Hero slajder: pretapanje slaže slajdove jedan preko drugog, pa širinu
   određuje okvir — ne Swiper-ov proračun. Bez ovoga slajd zadrži širinu
   izmjerenu pri jednom rasporedu i na užem ekranu isječe naslov, jer ga
   roditelj (`overflow:hidden`) odsiječe umjesto da strana dobije vodoravni
   skrol. `!important` je nužan: Swiper piše `width` inline. */
[data-hero-swiper] .swiper-slide { width: 100% !important; }

/* Strelica „prethodni" u carousel dugmadima. Isporučeni CSS okreće strelicu
   pravilom `.carousel-btn__arrow.rotate-180`, ali Tailwind istim imenom klase
   postavlja i zasebno svojstvo `rotate: 180deg` — dva okreta se saberu i
   strelica opet gleda udesno. Zato zasebno ime, bez sudara. */
.carousel-btn__arrow--prev { transform: rotate(225deg) translate(-2px); }

/* ---- GLightbox -------------------------------------------------------- */
.glightbox-clean .gslide-description { background: var(--color-ink); }
.glightbox-clean .gdesc-inner { font-family: var(--font-sans); }
.glightbox-clean .gslide-title {
    font-family: var(--font-sans);
    letter-spacing: .022em;
    font-weight: 600;
}

/* ---- Poruke formi (flex-toast) --------------------------------------- */
.flex-toast {
    border-radius: 0 !important;
    font-family: var(--font-sans);
    letter-spacing: .022em;
}

/* ---- Sekcije sa otvaranjem (usluge, tehnologije) ---------------------- */
/*
 * Opis stavke stoji ISPOD njenog naslova i otvara se klikom (zahtjev klijenta):
 * ranije je stajao preko fotografije i mijenjao se na prelazak miša. Animacija
 * visine je ona koju dizajn već koristi za pitanja i odgovore (`.acc__panel`):
 * mreža `0fr → 1fr`, jer `height: auto` nema prelaz.
 *
 * Isporučeni CSS zna samo za `aria-selected` (spisak je bio tab lista); sada je
 * to harmonika, pa ista stanja idu na `aria-expanded`.
 */
.swap-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    /* `visibility` skida sklopljeni panel iz reda za tastaturu i iz čitača
       ekrana — inače se dugme „Saznaj više" iz zatvorene stavke i dalje može
       fokusirati, a ne vidi se. U prelazu je namjerno: pri otvaranju se mijenja
       odmah, pri zatvaranju tek na kraju. */
    visibility: hidden;
    transition: grid-template-rows .55s var(--ease-out-expo), opacity .4s var(--ease-out-expo),
                visibility .55s var(--ease-out-expo);
}
.swap-panel > div { overflow: hidden; }
[aria-expanded="true"] + .swap-panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; }

/* Prelaz se pali tek kad JS namjesti početno stanje — inače bi se na telefonu
   prva stavka vidno sklopila pri učitavanju strane. */
[data-swap]:not([data-ready]) .swap-panel { transition: none; }

/* Spisak („Naše usluge"): crta razdvaja STAVKE, pa ide na `li`. Dok je stajala
   na dugmetu, otvoreni opis je ostajao ispod crte — odvojen od naslova kojem
   pripada. Ista logika koju `.acc__item` već ima. */
[data-swap-list="list"] > li {
    border-bottom: 1px solid #2222221a;
    border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 10%, transparent);
    transition: border-color .5s var(--ease-out-expo);
}
[data-swap-list="list"] > li:last-child { border-bottom: 0; }
[data-swap-list="list"] > li:has(> [aria-expanded="true"]) { border-bottom-color: var(--color-ink); }
[data-swap-list="list"] > li:first-child .svc { padding-top: 0; }
[data-swap-list="list"] .svc { border-bottom-color: transparent; }

.svc[aria-expanded="true"] .svc__name { color: var(--color-ink); font-weight: 600; }
.svc[aria-expanded="true"] .svc__num { color: var(--color-brand); }

.tech-card[aria-expanded="true"] { box-shadow: var(--shadow-card); border-color: transparent; }
.tech-card[aria-expanded="true"] .tech-card__icon svg { transform: scale(1.06); }