/* Čistoća Zadar, prijedlog nove javne stranice. Listopad 2026.
   Sustav: mreža 1200 px, dvije podloge (bijela, svijetlo siva), tamnoplava traka za naslov i podnožje,
   jedno pismo (Source Sans 3) u pet veličina, jedan primarni i jedan sporedni gumb, tablice umjesto kartica. */

:root{
  --plava:#283878;      /* iz loga */
  --plava-2:#1F2C60;    /* tamnija, hover */
  --plava-3:#EEF0F7;    /* blaga podloga za istaknuti redak */
  --narancasta:#E8682A; /* iz loga, samo za oznaku reciklabilnog otpada */
  --crna:#1A1F26;
  --siva-1:#4A5260;     /* sporedni tekst, kontrast 7:1 */
  --siva-2:#C9CED8;     /* crte */
  --siva-3:#F3F4F7;     /* siva podloga sekcija */
  --bijela:#FFFFFF;
  --zelena:#1E6B3C; --zuta-podloga:#FFF4D6; --zuta-rub:#E3C987; --crvena:#A8261D;
  --mko:#464B52; --rec:#E8682A; --bio:#7A4A24; --glo:#5B6B7D; --staklo:#2F7A4C;
  --pismo:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
  --r:4px;
  --sirina:1200px;
  --rub:24px;
  --fokus:#F2A11B;
  font-size:18px;
}
html.velika-slova{font-size:21px}
html.kontrast{--plava:#000;--plava-2:#000;--plava-3:#fff;--crna:#000;--siva-1:#000;--siva-2:#000;--siva-3:#fff;--fokus:#FFD500}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
body{margin:0;font-family:var(--pismo);font-size:1rem;line-height:1.55;color:var(--crna);background:var(--bijela)}
img,svg{max-width:100%;height:auto;display:block}

/* pismo: 48 / 32 / 24 / 20 / 18 / 16 */
h1,h2,h3,h4{font-family:var(--pismo);font-weight:700;line-height:1.2;margin:0;color:var(--plava);text-wrap:balance}
h1{font-size:clamp(2rem,4.2vw,2.667rem)}
h2{font-size:clamp(1.5rem,2.6vw,1.778rem)}
h3{font-size:1.333rem}
h4{font-size:1.111rem}
p,li,dd,dt,td,th{text-wrap:pretty}
p{margin:0 0 1em}
a{color:var(--plava);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--plava-2);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
button{font:inherit;color:inherit}
small,.mali{font-size:.889rem}
.tihi{color:var(--siva-1)}
.wrap{max-width:var(--sirina);margin-inline:auto;padding-inline:var(--rub)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--rub);top:-200px;background:var(--plava);color:#fff;padding:10px 16px;z-index:100;font-weight:700}
.skip:focus{top:12px}
ul,ol{margin:0 0 1em;padding-left:22px}
li{margin-bottom:.3em}

/* gumbi: jedan primarni, jedan sporedni */
.gumb{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 22px;border:2px solid var(--plava);border-radius:var(--r);background:var(--plava);color:#fff;font-weight:700;text-decoration:none;cursor:pointer;line-height:1.2;white-space:nowrap}
.gumb:hover{background:var(--plava-2);border-color:var(--plava-2);color:#fff}
.gumb:active{transform:translateY(1px)}
.gumb.sporedni{background:transparent;color:var(--plava)}
.gumb.sporedni:hover{background:var(--plava-3);color:var(--plava-2)}
.gumb.bijeli{background:#fff;border-color:#fff;color:var(--plava)}
.gumb.bijeli:hover{background:var(--siva-3);border-color:var(--siva-3);color:var(--plava-2)}
.gumb.mali{min-height:40px;padding:4px 14px;font-size:.889rem}
.gumb[aria-pressed="true"]{background:var(--plava);border-color:var(--plava);color:#fff}
.gumb:disabled{opacity:.5;cursor:not-allowed}
.sunce{}

/* polja */
label.naslov,.polje>label,.polje>span{display:block;font-weight:700;margin-bottom:6px}
.polje{margin-bottom:16px}
.polje .pomoc{display:block;font-weight:400;color:var(--siva-1);font-size:.889rem;margin:-2px 0 8px}
input[type=text],input[type=search],input[type=tel],input[type=email],input[type=file],textarea,select{width:100%;font:inherit;font-size:1rem;padding:10px 14px;min-height:48px;border:1px solid var(--siva-1);border-radius:var(--r);background:#fff;color:var(--crna)}
textarea{min-height:140px;resize:vertical}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--fokus);outline-offset:1px}
.red-unos{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.red-unos .combo{flex:1 1 300px;position:relative}
.red-unos .gumb{flex:0 0 auto;min-height:48px}
.prijedlozi{list-style:none;margin:0;padding:6px 0;position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--siva-1);border-top:0;z-index:20;max-height:320px;overflow:auto;color:var(--crna)}
.prijedlozi[hidden]{display:none}
.prijedlozi li{padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;margin:0}
.prijedlozi li[aria-selected="true"],.prijedlozi li:hover{background:var(--plava-3)}
.prijedlozi li span{color:var(--siva-1);font-size:.889rem;white-space:nowrap}
.greska{color:var(--crvena);font-weight:700;font-size:.944rem;margin:6px 0 0}
.greska[hidden]{display:none}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border:2px solid var(--crvena)}
.poruka{margin:14px 0 0;padding:12px 14px;background:var(--plava-3);color:var(--plava);font-weight:700}
.poruka[hidden]{display:none}

/* pomoćna traka na vrhu */
.vrh{background:var(--plava);color:#fff;font-size:.833rem}
.vrh .wrap{display:flex;flex-wrap:wrap;gap:4px 24px;align-items:center;min-height:36px;padding-block:2px}
.vrh a{color:#fff;text-decoration:none}
.vrh a:hover,.vrh a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
.vrh .tel{font-weight:600}
.vrh-poveznice{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:0 24px;align-items:center}
.vrh-poveznice li{margin:0}
.vrh .pristup-gumb{background:none;border:0;padding:4px 0;color:#fff;font-size:inherit;cursor:pointer;text-decoration:none}
.vrh .pristup-gumb:hover,.vrh .pristup-gumb[aria-expanded="true"]{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.vrh-poveznices{display:none}.vrh-poveznice li:not(:last-child){display:none}}

/* zaglavlje */
.zaglavlje{background:#fff;border-bottom:1px solid var(--siva-2);position:sticky;top:0;z-index:50}
.zaglavlje .wrap{display:flex;align-items:center;gap:28px;min-height:88px;padding-block:10px}
@media (max-width:1400px){.logo .naziv{display:none}}
.logo{display:flex;align-items:center;gap:14px;flex-shrink:0;text-decoration:none;color:var(--plava)}
.logo img{height:60px;width:auto}
.logo .naziv{font-size:1.222rem;font-weight:700;line-height:1.15;letter-spacing:.01em}
.logo .naziv span{display:block;font-size:.833rem;font-weight:400;color:var(--siva-1);letter-spacing:0}
.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:0 4px}
.nav li{margin:0}
.nav a{display:block;padding:10px 8px;color:var(--crna);text-decoration:none;font-weight:500;font-size:.889rem;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--plava);border-bottom-color:var(--siva-2)}
.nav a[aria-current="page"]{color:var(--plava);border-bottom-color:var(--plava);font-weight:600}
.nav .samo-mobitel{display:none}
.gumb.moja{min-height:44px;padding:6px 18px;flex-shrink:0}
.izbornik-gumb{display:none}
@media (max-width:1180px){
  .zaglavlje .wrap{flex-wrap:wrap;gap:16px}
  .izbornik-gumb{display:inline-flex;margin-left:auto;min-height:44px}
  .gumb.moja{order:1}
  .nav{order:3;flex-basis:100%;margin:0;display:none;padding-block:4px 12px;border-top:1px solid var(--siva-2)}
  .nav.otvoren{display:block}
  .zaglavlje:has(.nav.otvoren){box-shadow:0 16px 32px rgba(26,31,38,.22)}
  html.izbornik-otvoren body::after{content:"";position:fixed;inset:0;background:rgba(26,31,38,.45);z-index:40}
  .nav ul{flex-direction:column}
  .nav a{padding:14px 4px;border-bottom:1px solid var(--siva-2);font-size:1rem}
  .nav a[aria-current="page"]{border-bottom-color:var(--siva-2)}
  .nav .samo-mobitel{display:block}
}
@media (max-width:560px){.logo .naziv{display:none}.gumb.moja{display:none}}

/* postavke prikaza */
.pristup{background:var(--siva-3);border-bottom:1px solid var(--siva-2)}
.pristup[hidden]{display:none}
.pristup .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding-block:12px}
.pristup .mali{margin-left:auto}
.pristup .gumb{background:#fff;color:var(--plava);border-color:var(--plava)}
.pristup .gumb:hover{background:var(--plava-3);color:var(--plava-2)}
.pristup .gumb[aria-pressed="true"]{background:var(--plava);color:#fff}
.pristup .gumb[aria-pressed="true"]::before{content:"✓ ";font-weight:400}

/* obavijest */
.uzbuna{background:#FFF8E6;border-bottom:1px solid #EAD9A8;font-size:.944rem}
.uzbuna .wrap{display:flex;gap:4px 14px;align-items:baseline;flex-wrap:wrap;padding-block:10px}
.uzbuna b{color:var(--plava)}

/* sekcije */
.sekcija{padding-block:72px}
.sekcija.siva,.sekcija.kamen{background:var(--siva-3)}
.uvod{max-width:70ch;margin-bottom:32px}
.uvod h2{margin-bottom:10px}
.uvod p{font-size:1.111rem;color:var(--siva-1);margin:0}
.dvostup{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start}
.dvostup>*,.pregled-pitanja>*,.pitajte>*,.stranica>*,.salter .hero>*{min-width:0}
@media (max-width:900px){.dvostup{grid-template-columns:1fr;gap:40px}.sekcija{padding-block:56px}}

/* naslovna traka: jedno pitanje, jedno polje */
.salter{background:var(--plava);color:#fff;padding-block:64px 72px}
.salter h1{color:#fff;margin-bottom:12px}
.salter .uvodni{font-size:1.222rem;max-width:56ch;color:rgba(255,255,255,.88);margin-bottom:28px}
.salter .hero{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center}
.salter .naslovni{max-width:760px}
.salter.unutarnja{padding-block:28px 56px}
.salter .mrvice{padding-block:0 20px}
.salter .mrvice a,.salter .mrvice li+li::before,.salter .mrvice span{color:rgba(255,255,255,.85)}
.hero-foto{margin:0}
.hero-foto img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}
@media (max-width:900px){.salter .hero{grid-template-columns:1fr;gap:32px}.hero-foto{order:-1;margin-inline:calc(-1*var(--rub))}.hero-foto img{aspect-ratio:16/9}}
.foto{margin:0}
.foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.uvod-foto{margin-bottom:32px;align-items:center}
.uvod-foto .uvod{margin-bottom:0}
.certifikati{margin-top:20px;width:360px;max-width:100%}
.partneri-traka{background:#fff;border-top:1px solid var(--siva-2)}
.partneri-traka .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;padding-block:24px}
.partneri-traka span{color:var(--siva-1);font-size:.889rem}
.partneri-traka a{display:flex;align-items:center;justify-content:center;min-height:48px}
.partneri-traka img{height:44px;width:auto;max-width:160px;object-fit:contain}
.partneri-traka img[src$="logo-tz.svg"]{height:48px}
@media (max-width:760px){
  .partneri-traka .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 12px;padding-block:20px 24px}
  .partneri-traka span{grid-column:1 / -1;text-align:left}
  .partneri-traka img{height:40px;max-width:100%}
  .partneri-traka img[src$="logo-tz.svg"]{height:40px}
}
.partneri-traka a:focus-visible{outline-offset:4px}
.obrazac-adresa .polje>label{color:#fff}
.obrazac-adresa input{border-color:#fff;min-height:56px;font-size:1.111rem}
.obrazac-adresa .gumb{min-height:56px}
.primjeri{color:rgba(255,255,255,.85);font-size:.944rem;margin:10px 0 0;max-width:64ch}
.primjeri button{background:none;border:0;padding:0;color:#fff;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:inherit}
.salter .greska{color:#fff;background:var(--crvena);display:inline-block;padding:6px 10px}
.salter .greska[hidden]{display:none}

/* rezultat: tablica kao papirnati kalendar */
.rezultat-sekcija{background:var(--siva-3);border-bottom:1px solid var(--siva-2)}
.rezultat-sekcija[hidden]{display:none}
.rezultat{padding-block:48px 56px;max-width:860px}
.rezultat header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;align-items:baseline;margin-bottom:20px}
.rezultat h2{margin:0}
.rezultat .zona{color:var(--siva-1)}
.kanta{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.kanta i{display:inline-block;width:14px;height:14px;border-radius:2px;background:var(--boja,#888);flex-shrink:0}
.kanta.mko{--boja:var(--mko)}.kanta.rec{--boja:var(--rec)}.kanta.bio{--boja:var(--bio)}.kanta.glo{--boja:var(--glo)}
.kanta.staklo{--boja:var(--staklo)}
.tjedan{width:100%;border-collapse:collapse;margin:0 0 24px;background:#fff}
.tjedan th,.tjedan td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--siva-2);vertical-align:top}
.tjedan tr:first-child th,.tjedan tr:first-child td{border-top:1px solid var(--siva-2)}
.tjedan th{font-weight:400;width:14em;white-space:nowrap}
.tjedan td .kanta+.kanta{margin-left:20px}
.tjedan .nista{color:var(--siva-1)}
.tjedan tr.danas th,.tjedan tr.danas td{font-weight:700;background:var(--plava-3)}
@media (max-width:520px){.tjedan th{width:auto;white-space:normal}.tjedan td .kanta{display:flex}.tjedan td .kanta+.kanta{margin:6px 0 0}}
.sazeto{margin:0 0 24px;display:grid;grid-template-columns:max-content 1fr;gap:8px 20px}
.sazeto dt{font-weight:700}
.sazeto dd{margin:0;color:var(--siva-1)}
@media (max-width:560px){.sazeto{grid-template-columns:1fr;gap:0}.sazeto dd{margin-bottom:10px}}
.rezultat .radnje{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.rezultat .radnje a:not(.gumb){margin-left:4px}
.napomena-demo{font-size:.833rem;color:var(--siva-1);margin:20px 0 0}

/* mjesečni kalendar (ekran i ispis) */
.mjesec[hidden]{display:none}
.mjesec{margin-top:24px}
.mjesec h3{margin-bottom:10px}
.mjesec table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.833rem;background:#fff}
.mjesec th{padding:8px 6px;border-bottom:2px solid var(--crna);text-align:left;font-weight:700}
.mjesec td{vertical-align:top;border:1px solid var(--siva-2);height:72px;padding:4px 6px}
.mjesec td b{display:block;font-size:.944rem}
.mjesec td.prazno{background:var(--siva-3)}
.mjesec td.danas{background:var(--plava-3)}
.mjesec .kanta{font-size:.722rem;margin-top:3px;gap:5px;white-space:normal;line-height:1.2}
.mjesec .kanta i{width:10px;height:10px}
@media (max-width:640px){.mjesec{overflow-x:auto}.mjesec table{min-width:620px}}

/* danas u čistoći: traka s tri stupca */
.danas{background:#fff;border-bottom:1px solid var(--siva-2)}
.danas .wrap{padding-block:28px 32px}
.danas .naslov-red{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;margin-bottom:16px}
.danas h2{font-size:1.333rem}
.danas .datum{color:var(--siva-1);margin:0}
.danas dl{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.danas dl>div{border-top:2px solid var(--plava);padding-top:12px}
.danas dt{font-weight:700;margin-bottom:4px}
.danas dd{margin:0;color:var(--siva-1)}
.danas .danas-link{margin:18px 0 0}
@media (max-width:860px){.danas dl{grid-template-columns:1fr;gap:16px}}

/* popis zadataka */
.zadaci{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.zadaci li{margin:0}
.zadatak{border-top:1px solid var(--siva-2);padding:20px 0 22px}
.zadaci li:nth-last-child(-n+2) .zadatak{border-bottom:1px solid var(--siva-2)}
.zadatak h3{font-size:1.222rem;margin-bottom:4px}
.zadatak h3 a{text-decoration:none}
.zadatak h3 a:hover{text-decoration:underline}
.zadatak h3 a::after{content:"";display:inline-block;width:.45em;height:.45em;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg);margin-left:10px;vertical-align:middle}
.zadatak p{margin:0;color:var(--siva-1)}
@media (max-width:760px){.zadaci{grid-template-columns:1fr}.zadaci li:nth-last-child(2) .zadatak{border-bottom:0}}

/* pitanja i odgovori: teme lijevo, pitanja odabrane teme desno */
.trazi-pitanja{max-width:720px;margin-bottom:8px}
#upit-stanje{margin:8px 0 0;min-height:1.4em}
.pregled-pitanja{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;margin-top:24px;align-items:start}
@media (max-width:900px){.pregled-pitanja{grid-template-columns:1fr;gap:24px}}
.teme-popis ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--siva-2)}
.teme-popis li{margin:0}
.teme-popis button{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--siva-2);padding:14px 12px;cursor:pointer;font-size:1rem;color:var(--crna)}
.teme-popis button:hover{color:var(--plava);text-decoration:underline;text-underline-offset:3px}
.teme-popis button[aria-current="true"]{font-weight:700;color:var(--plava);background:var(--plava-3)}
.teme-popis button span{color:var(--siva-1);font-weight:400;font-size:.889rem}
.tema-sadrzaj h3{margin-bottom:8px}
.tema-sadrzaj .tihi{margin-bottom:16px}
.tema details{border-top:1px solid var(--siva-2)}
.tema details:last-child{border-bottom:1px solid var(--siva-2)}
.tema summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px;line-height:1.35}
.tema summary::-webkit-details-marker{display:none}
.tema summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--plava);flex-shrink:0;font-weight:400}
.tema details[open] summary::after{content:"−"}
.tema .odg{padding:0 0 18px;color:var(--siva-1);max-width:64ch}
.tema .odg p{margin:0 0 8px}
.tema .odg p:last-child{margin:0}
.tema+.tema{margin-top:32px}
mark{background:#FFE9A8;color:inherit;padding:0 2px}
.pitajte{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
@media (max-width:900px){.pitajte{grid-template-columns:1fr;gap:24px}}
.pitajte h2{margin-bottom:10px}
.pitajte .dva{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media (max-width:640px){.pitajte .dva{grid-template-columns:1fr}}
.pitajte textarea{min-height:120px}
html.jednostavno .pregled-pitanja{grid-template-columns:1fr}

/* kamo s ovim */
.sorter{max-width:720px}
.cipovi{margin:8px 0 0;padding:0;list-style:none;font-size:.944rem;color:var(--siva-1);display:flex;flex-wrap:wrap;gap:0 6px}
.cipovi li{margin:0}
.cipovi li:not(:first-child):not(:last-child) button::after{content:","}
.cipovi button{background:none;border:0;padding:4px 0;color:var(--plava);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:inherit}
.odgovor{margin-top:24px;max-width:720px;border-top:2px solid var(--plava);padding-top:16px}
.odgovor[hidden]{display:none}
.odgovor h2{font-size:1.333rem;margin-bottom:6px}
.odgovor .kamo{display:flex;align-items:center;gap:12px;font-size:1.222rem;font-weight:700;margin:6px 0 10px}
.odgovor .kamo i{width:18px;height:18px;border-radius:2px;flex-shrink:0}
.odgovor p{margin:0 0 6px;color:var(--siva-1)}
.vrste{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 40px;margin-top:48px}
@media (max-width:980px){.vrste{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.vrste{grid-template-columns:1fr}}
.vrste section{border-top:1px solid var(--siva-2);padding-top:14px}
.vrste h2{font-size:1.111rem;display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--crna)}
.vrste h2 .kanta i{width:16px;height:16px}
.vrste ul{margin:0;padding-left:20px;color:var(--siva-1)}

/* tablice */
.tablica{width:100%;border-collapse:collapse;margin:0 0 16px;background:#fff}
.tablica caption{text-align:left;font-weight:700;padding-bottom:8px}
.tablica th,.tablica td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--siva-2);vertical-align:top}
.tablica thead th{background:var(--plava-3);font-weight:700;border-bottom:2px solid var(--plava)}
.tablica tbody th{font-weight:700}
.tablica-omot{overflow-x:auto}

/* reciklažna dvorišta */
.dvorista th[scope="row"]{white-space:nowrap}
.dvorista td.otv{color:var(--zelena);font-weight:700;white-space:nowrap}
.dvorista td.zatv{color:var(--siva-1)}
@media (max-width:720px){
  .dvorista thead{display:none}
  .dvorista,.dvorista tbody,.dvorista tr,.dvorista th,.dvorista td{display:block}
  .dvorista tr{border-bottom:1px solid var(--siva-2);padding:12px 0}
  .dvorista tbody th,.dvorista tbody td{border:0;padding:2px 0;background:transparent}
  .dvorista tbody th{font-size:1.111rem}
  .dvorista td.otv{white-space:normal}
}
.mobilno{margin-top:40px;max-width:70ch;border-top:1px solid var(--siva-2);padding-top:24px}
.mobilno h3{margin-bottom:6px}
.mobilno p{margin-bottom:8px}

/* obavijesti */
.vijesti{list-style:none;margin:0;padding:0}
.vijest{display:grid;grid-template-columns:150px 1fr;gap:4px 24px;padding:18px 0;border-top:1px solid var(--siva-2);margin:0}
.vijest:last-child{border-bottom:1px solid var(--siva-2)}
.vijest .vrsta{display:block;font-weight:700;font-size:.889rem;color:var(--siva-1)}
.vijest time{display:block;color:var(--siva-1);font-size:.889rem}
.vijest h3{font-size:1.167rem;margin-bottom:4px}
.vijest h3 a{text-decoration:none}
.vijest h3 a:hover{text-decoration:underline}
.vijest p{margin:0;color:var(--siva-1)}
@media (max-width:560px){.vijest{grid-template-columns:1fr}}
.bocno h3{font-size:1.167rem;margin:0 0 6px}
.bocno h3+ul{margin-bottom:32px}
.bocno ul{list-style:none;margin:0;padding:0}
.bocno li{padding:10px 0;border-top:1px solid var(--siva-2);margin:0}
.bocno li:last-child{border-bottom:1px solid var(--siva-2)}
.bocno li small{display:block;color:var(--siva-1)}

/* o čistoći */
.slogan{display:block;width:360px;max-width:100%;height:auto;margin:0 0 20px}
.brojke{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 32px;margin:32px 0 0;padding:0}
.brojke div{border-top:2px solid var(--plava);padding-top:12px}
.brojke dd{margin:0;font-size:2rem;font-weight:700;line-height:1.1;color:var(--plava);font-variant-numeric:tabular-nums}
.brojke dt{font-size:.944rem;color:var(--siva-1)}
@media (max-width:760px){.brojke{grid-template-columns:1fr 1fr}}
.projekti{list-style:none;margin:0;padding:0}
.projekti li{padding:12px 0;border-top:1px solid var(--siva-2);margin:0}
.projekti li:last-child{border-bottom:1px solid var(--siva-2)}
.projekti small{display:block;color:var(--siva-1)}
.podaci-tvrtke{list-style:none;margin:0;padding:0}
.podaci-tvrtke li{display:grid;grid-template-columns:11em 1fr;gap:16px;padding:10px 0;border-top:1px solid var(--siva-2);margin:0}
.podaci-tvrtke li:last-child{border-bottom:1px solid var(--siva-2)}
.podaci-tvrtke b{font-weight:700}

/* moja čistoća i podsjetnik */
.podnozje .slogan{width:240px;margin:16px 0 0;filter:brightness(0) invert(1);opacity:.9}

/* podnožje */
.podnozje{background:var(--plava);color:#fff;padding-block:56px 32px;font-size:.944rem}
.podnozje a{color:#fff}
.podnozje h3{font-size:1rem;margin-bottom:12px;color:#fff;text-transform:none}
.podnozje .stupci{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.podnozje ul{list-style:none;margin:0;padding:0}
.podnozje li{margin-bottom:8px}
.podnozje address{font-style:normal;line-height:1.6}
.podnozje .partneri{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.3);display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline}
.podnozje .partneri span{opacity:.8}
.legal{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.3);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;font-size:.889rem}
.legal .lijevo{display:flex;flex-wrap:wrap;gap:6px 18px}
.pokrece{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pokrece img{height:16px;width:auto;display:inline-block}
.pokrece a{text-decoration:none;font-weight:700}
.pokrece a:hover{text-decoration:underline}
.podnozje .gumb.mali{background:#fff;color:var(--plava);border-color:#fff}
@media (max-width:900px){.podnozje .stupci{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.podnozje .stupci{grid-template-columns:1fr}}

/* mobilni brzi kontakt */
.dock{display:none}
@media (max-width:760px){
  body{padding-bottom:80px}
  .dock{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--siva-2)}
  .dock .gumb{min-height:48px;padding:6px;font-size:.889rem}
}

/* unutarnja stranica */
.mrvice{font-size:.889rem;padding-block:16px 0}
.mrvice ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.mrvice li{margin:0}
.mrvice li+li::before{content:"/";margin-right:8px;color:var(--siva-1)}
.mrvice a{color:var(--siva-1)}
.stranica{display:grid;grid-template-columns:minmax(0,7.5fr) minmax(0,3.5fr);gap:64px;padding-block:24px 80px}
@media (max-width:900px){.stranica{grid-template-columns:1fr;gap:40px}}
.stranica h1{margin-bottom:14px}
.clanak>p:first-of-type{font-size:1.222rem;color:var(--siva-1)}
.sazetak{background:var(--siva-3);padding:22px 26px;margin:28px 0 40px}
.sazetak h2{font-size:1.111rem;margin-bottom:10px;color:var(--crna)}
.sazetak ul{margin:0;padding-left:22px}
.clanak h2{margin-top:48px;margin-bottom:12px}
.koraci{list-style:none;margin:0;padding:0;counter-reset:k}
.koraci li{counter-increment:k;display:grid;grid-template-columns:48px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--siva-2);margin:0}
.koraci li:last-child{border-bottom:1px solid var(--siva-2)}
.koraci li::before{content:counter(k);font-weight:700;font-size:1.333rem;color:var(--plava);line-height:1.2;padding-top:4px}
.koraci h3{margin:4px 0 4px;font-size:1.167rem;color:var(--crna)}
.koraci p{margin:0;color:var(--siva-1)}
.dva-popisa{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media (max-width:640px){.dva-popisa{grid-template-columns:1fr}}
.dva-popisa section{border-top:1px solid var(--siva-2);padding-top:14px}
.dva-popisa h3{font-size:1.167rem;margin-bottom:8px;color:var(--crna)}
.dva-popisa .ne h3{color:var(--crvena)}
.dva-popisa ul{padding-left:20px;margin:0}
.obrazac{background:var(--siva-3);padding:32px 32px 28px;margin-top:12px}
.obrazac fieldset{border:0;padding:0;margin:0 0 20px}
.obrazac legend{font-weight:700;margin-bottom:8px;padding:0}
.radio{display:flex;flex-wrap:wrap;gap:12px}
.radio label{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--siva-1);border-radius:var(--r);padding:10px 16px;cursor:pointer;min-height:48px}
.radio label:has(input:checked){border:2px solid var(--plava);background:var(--plava-3)}
.radio input{width:20px;height:20px;accent-color:var(--plava)}
.obrazac .dva{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media (max-width:640px){.obrazac .dva{grid-template-columns:1fr}}
.privola{display:flex;gap:12px;align-items:flex-start;margin:4px 0 20px}
.privola input{width:22px;height:22px;flex-shrink:0;margin-top:4px;accent-color:var(--plava)}
.uspjeh{background:var(--siva-3);border-top:2px solid var(--zelena);padding:22px 26px}
.uspjeh[hidden]{display:none}
.uspjeh h3{color:var(--zelena);margin-bottom:6px}
.pitanja details{border-top:1px solid var(--siva-2)}
.pitanja details:last-child{border-bottom:1px solid var(--siva-2)}
.pitanja summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:1.056rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.pitanja summary::-webkit-details-marker{display:none}
.pitanja summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--plava);flex-shrink:0;font-weight:400}
.pitanja details[open] summary::after{content:"−"}
.pitanja details p{margin:0 0 16px;color:var(--siva-1)}
.bocno-kutija{border-top:2px solid var(--plava);padding-top:14px;margin-bottom:32px}
.bocno-kutija h2{font-size:1.111rem;margin-bottom:8px;color:var(--crna)}
.bocno-kutija p{margin-bottom:8px}
.bocno-kutija .tel-velik{font-size:1.667rem;font-weight:700;color:var(--plava);text-decoration:none;display:block;line-height:1.1;margin:4px 0 6px}
.bocno-nav h2{font-size:1.111rem;margin-bottom:6px;color:var(--crna)}
.bocno-nav ul{list-style:none;margin:0;padding:0}
.bocno-nav li{margin:0}
.bocno-nav li a{display:block;padding:10px 0;border-top:1px solid var(--siva-2);text-decoration:none;color:var(--crna)}
.bocno-nav li:last-child a{border-bottom:1px solid var(--siva-2)}
.bocno-nav li a[aria-current="page"]{font-weight:700;color:var(--plava)}
.bocno-nav li a:hover{color:var(--plava);text-decoration:underline}
.sadrzaj-strane{position:sticky;top:112px}
.kontakti th{width:14em}
.povijest th{width:11em;white-space:nowrap}

/* jednostavan prikaz */
html.jednostavno .dvostup,html.jednostavno .zadaci,html.jednostavno .vrste,html.jednostavno .stranica,html.jednostavno .podnozje .stupci,html.jednostavno .brojke,html.jednostavno .pitajte,html.jednostavno .danas dl{grid-template-columns:1fr}
html.jednostavno .zaglavlje,html.jednostavno .sadrzaj-strane{position:static}
html.jednostavno .partneri{display:none}
html.jednostavno .sekcija{padding-block:40px}

/* ispis: samo kalendar za frižider */
@media print{
  .vrh,.zaglavlje,.pristup,.uzbuna,.dock,.podnozje,.sekcija,.danas,.salter,.rezultat .radnje,.sazeto,.napomena-demo,.poruka,.tjedan{display:none!important}
  .rezultat-sekcija{background:#fff;border:0}
  .rezultat{padding:0;max-width:none}
  .mjesec{display:block!important;margin:0}
  .mjesec td{height:88px}
  body{font-size:12pt;color:#000}
  .kanta i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* abecedni popis */
.abeceda{margin-top:56px;border-top:1px solid var(--siva-2);padding-top:32px}
.abeceda h2{margin-bottom:6px}
.slova{display:flex;flex-wrap:wrap;gap:4px 2px;margin:16px 0 24px}
.slova a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:0 6px;text-decoration:none;font-weight:600;border:1px solid var(--siva-2);border-radius:var(--r)}
.slova a:hover{background:var(--plava-3)}
.slovo{break-inside:avoid;margin-bottom:20px}
.slovo h3{font-size:1.222rem;border-bottom:2px solid var(--plava);padding-bottom:4px;margin-bottom:8px}
.slovo ul{list-style:none;margin:0;padding:0}
.slovo li{margin:0;padding:5px 0;display:flex;flex-wrap:wrap;gap:0 8px;align-items:baseline}
.slovo li .tihi{font-size:.889rem}
#abeceda-popis{columns:3;column-gap:48px}
@media (max-width:1000px){#abeceda-popis{columns:2}}
@media (max-width:640px){#abeceda-popis{columns:1}}
.veza{background:none;border:0;padding:0;color:var(--plava);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
.veza:hover{color:var(--plava-2);text-decoration-thickness:2px}
.odgovor .nepoznato{color:var(--siva-1)}