/* ===================================================================
   DIZAJN TOKENI
   Sve boje, senke, zaobljenja i veličine fonta na jednom mestu.
   =================================================================== */

:root {
    /* Brend boje */
    --brand: #f68712;
    /* tamnija narandžasta (dobar kontrast) */
    --brand-light: #FFAD51;
    /* svetlija narandžasta - naslovi h2, okviri, isticanja, pozadina mobilnog menija */
    --info: #3AABBD;
    /* tirkizna - naziv mesta, indeks kvaliteta, datumi */
    --success: #4EBE4B;
    /* zelena - dugme pretrage */
    --heading: #F68712;
    /* boja h1 naslova - ista kao temperatura (--brand). Ostaje zasebna
       promenljiva da se h1 i istaknuti podaci mogu menjati nezavisno. */

    /* Tekst */
    --text: #323c46;
    /* glavni tekst i naslovi */
    --text-muted: #898e8f;
    /* sporedni tekst unutar kartica */
    --text-quiet: #616a75;
    /* meni i futer - sporedan, ali mora da se čita: --text-muted na sivoj
       podlozi hedera daje kontrast 2.93, ispod preporučenih 4.5, dok ova
       vrednost daje 4.85 */
    --text-placeholder: #a8adae;
    /* tekst-nagoveštaj u praznom polju za pretragu - namerno svetliji od
       --text-muted, jer ne označava sporedan podatak nego prazno polje;
       ispod ove vrednosti postaje teško čitljiv na svetloj podlozi */

    /* Površine - strana je svetlo siva, kartice bele, redovi unutar kartica
       blago sivi. Ranije je bilo obrnuto (bela strana, sive kartice, beli
       redovi u njima), pa su kartice delovale kao udubljenja u strani, a beli
       redovi su se borili sa belom pozadinom iza sebe. Ovako svaki sloj ide
       za nijansu tamnije ka unutra, kao što oko i očekuje. */
    --page: #F5F7FB;
    /* pozadina strane */
    --surface: #FFFFFF;
    /* kartice, heder, futer */
    --surface-inset: #F2F5FA;
    /* redovi i oblačići unutar kartica - zamenjuju bele oblačiće */
    --line: #E4E9F1;
    /* tanke linije: ivica hedera i futera, razdelnici, okvir polja */
    --surface-input: #FFFFFF;
    /* polje za pretragu */

    /* Žuto-smeđa za "umeren" nivo polena. Stoji među tokenima, a ne u
       polenskom bloku na dnu, da bude na raspolaganju i drugde. */
    --warn: #C77D00;

    /* Poruka o grešci */
    --danger: #be3c28;
    --danger-bg: #fff0eb;
    --danger-border: #ec6631;

    /* Senke - meke, padaju nadole (umesto starog "oreola" na sve strane) */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 6px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 1px 3px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.08);

    /* Zaobljenja */
    --radius-sm: 5px;
    --radius-md: 10px;
    /* redovi unutar kartica - manje od spoljnog zaobljenja. Ranije su oba
       bila 15px, pa je unutrašnji oblačić imao isti luk kao kartica oko
       njega i to je na oko izgledalo kao greška. Pravilo: unutrašnji
       radijus = spoljni minus unutrašnji razmak (16 - 6). */
    --radius-lg: 16px;
    /* kartice */
    --radius-pill: 999px;
    /* polje i dugme pretrage */

    /* Skala fontova - 5 koraka (naslov / istaknuto / osnovno / sporedno / sitno) */
    --fs-xs: 0.75em;
    --fs-sm: 0.875em;
    --fs-base: 1em;
    --fs-lg: 1.375em;
    --fs-xl: 2em;

    /* Debljine fonta */
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Visina jednog sivog reda u tri gornje kartice - satne kartice u "Vremenu
       danas" i oblačići u "Kvalitetu vazduha". Sve ostale mere u tom redu se
       računaju iz nje, pa je dovoljno promeniti ovaj jedan broj da bi ceo red
       ostao usklađen. Bilo je 32px. */
    --red-visina: 28px;
    /* Razmak između tih redova na desktopu (na mobilnom je 6px). */
    --red-razmak: 5px;

    /* Broj satnih redova u "Vremenu danas". Mora da prati HOURLY_SLOTS u
       script.js - odatle dolazi koliko se termina ispisuje. */
    --satnih-redova: 8;

    /* Visine traka na vrhu i dnu strane. Futer se računa iz hedera, pa im je
       odnos uvek zlatni presek (1.618) bez obzira na to koju vrednost daš
       hederu. Visine su zadate, a ne prepuštene sadržaju: heder je visok
       koliko logo i meni traže plus vazduh oko njih, i ta mera ne sme da se
       menja sa logotipom, jer futer sa njom ide u paru.
       Obe trake računaju visinu kao border-box, pa je u broj uračunata i
       linija od 1px koja ih deli od sadržaja. */
    --zlatni-presek: 1.618;
    --heder-visina: 56px;
    --futer-visina: calc(var(--heder-visina) / var(--zlatni-presek));

    /* Razmak od sivog reda do ivice bele kartice. Jedna vrednost za ceo sajt -
       čitaju je i tri gornje kartice i kartice prognoze, i na desktopu i na
       mobilnom. Ranije su se razilazile: gornje kartice su imale 14px sa
       strane a 8px odozgo i odozdo, kartice prognoze 10px, a mobilna verzija
       15px. Vrednost je uzeta sa mobilnog, gde je razmak izgledao kako treba. */
    --kartica-razmak: 15px;

    /* Visina tri gornje kartice na desktopu - sve tri je čitaju odavde, pa ne
       mogu da se raziđu. Meru diktira "Vreme danas", jer je jedino njen
       sadržaj krut: osam redova stalne visine sa stalnim razmakom, i ništa u
       njoj ne može da se skupi ni razvuče. Kartica je zato tačno onolika
       koliko taj niz traži, plus razmak do ivica sa obe strane.
       Ranije je meru diktiralo "Trenutno vreme", pa je "Vremenu danas"
       ostajalo 13px viška. Pošto je ta kartica sidrena za dno, višak se
       skupljao iznad prvog reda - razmak tamo je bio 28px umesto 15px.
       Druge dve kartice tu razliku upijaju same: obe imaju rastegljivu
       sredinu (red sa temperaturom, odnosno ocenu kvaliteta vazduha) koja
       zauzima onoliko koliko preostane. */
    --hero-card-height: calc(2 * var(--kartica-razmak) + var(--satnih-redova) * var(--red-visina) + (var(--satnih-redova) - 1) * var(--red-razmak));
}

html {
    scroll-behavior: smooth;
    /* Uspravni klizač se prikazuje uvek, i kad nema šta da se skroluje. Bez
       toga strana puna kartica ima klizač, a prazna (posle neuspešne pretrage)
       nema, pa prozor postane širi za njegovih ~15px i sav centriran sadržaj -
       i meni i telo strane - skoči udesno za polovinu te razlike.
       Koristi se overflow-y, a ne scrollbar-gutter: to novije svojstvo deluje
       samo na elementima kojima je prelivanje zadato, a html ga podrazumevano
       nema, pa nije imalo efekta. Na sistemima gde klizač lebdi preko sadržaja
       (macOS, telefoni) ovo ionako ništa ne menja, jer tamo ni ne zauzima
       prostor pa do pomeranja ne dolazi. */
    overflow-y: scroll;
}

body {
    /* Montserrat je pismo logotipa, pa ga koristi cela strana - zaglavlje i
       sadržaj govore istim glasom. Ranije je ovde bio Poppins, a Montserrat
       samo na naslovima; to nije radilo, jer su oba geometrijski groteski.
       Previše slični da bi se čitali kao namerna kombinacija, a dovoljno
       različiti da izgledaju kao previd. */
    font-family: "Montserrat", sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--page);
    color: var(--text-muted);
    text-align: center;
    /* Namerno bez justify-content: center. Body je uspravan flex kontejner visok
       bar ceo ekran, pa bi centriranje po visini pomeralo sadržaj naniže kad ga
       ima malo - tačno u stanju posle neuspešne pretrage, gde su kartice
       sakrivene. Zaglavlje i polje za pretragu tako ostaju na svom mestu bez
       obzira na to koliko sadržaja ima ispod. Futer i dalje pada na dno
       ekrana, ali preko margin-top: auto na samom futeru. */
}

/* Jedini način na koji se sakrivaju delovi sa podacima. !important je ovde
   opravdan: kartice svoj display dobijaju iz medijskih upita (grid, flex), pa
   bi obično pravilo izgubilo od njih. */
.is-hidden {
    display: none !important;
}

main {
    flex: 1;
    padding: 80px 20px 16px;
    /* Dodajemo padding-top kako bi sadržaj bio udaljen od hedera */
    align-items: center;
    /* Centriranje sadržaja unutar main */
    text-align: center;
    flex-direction: column;
}

h1 {
    color: var(--heading);
    /* Krupniji od naslova sekcije (1em), pa hijerarhija ostaje čitljiva i kad
       su svi u verzalu. Ako ikad bude prelamao red na najužim telefonima,
       spuštati ovu vrednost - ostalo se podešava samo. */
    font-size: 1.25em;
    margin-bottom: 20px;
    margin-top: 20px;
}

/* h2 pokriva dve različite uloge, pa ima i dva stila. Zajedničko je samo ono
   što važi za obe. */
h2 {
    font-weight: var(--fw-medium);
    font-size: var(--fs-base);
    margin-top: 20px;
    color: var(--heading)
}

/* Naslov strane (h1), nazivi iznad kartica ("Trenutno vreme") i naslovi
   sekcija ("Prognoza za 5 dana") dele isti karakter - verzalom, sa razmaknutim
   slovima - jer sva tri uvode sadržaj koji sledi. Razlikuju se samo veličinom
   i bojom, po tome koliko sadržaja najavljuju: h1 celu stranu, naslov sekcije
   grupu kartica, naziv iznad kartice jednu karticu. */
h1,
.card-label,
.section-title {
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    /* Montserrat je za nijansu širi od Poppinsa, koji je ovde bio ranije.
       Najduži naslov ("VREMENSKA PROGNOZA", 20px) je u Poppinsu zauzimao
       262px, a na najužem telefonu ima 280px na raspolaganju. Ako se sada
       prelomi u dva reda, prvo spuštati ovaj razmak (0.06em), pa tek onda
       font-size. */
    letter-spacing: 0.08em;
}

.card-label {
    font-size: 0.8125em;
    color: var(--text-quiet);
    margin-top: 0;
    margin-bottom: 8px;
}

.section-title {
    font-size: 1em;
    color: var(--heading);
    margin-bottom: 14px;
}

/* Polja i dugmad ne nasleđuju font od stranice - pregledač im daje svoj
   podrazumevani (obično sistemski), pa su polje pretrage i dugme "Prikaži"
   bili u drugom pismu od ostatka strane. font: inherit to ispravlja. */
input,
button,
select,
textarea {
    font: inherit;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Jedno pravilo za sve što se može fokusirati tastaturom. :focus-visible, a
   ne :focus - miš ne ostavlja okvir za sobom. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Narandžasta je rezervisana za ono što treba da odskoči - logo, temperaturu
   i ocenu kvaliteta vazduha. Meni je zato u neutralnoj boji, a narandžastu
   dobija samo stavka na kojoj se nalazite ili preko koje prelazite mišem.
   Time narandžasta dobija značenje umesto da bude ukras, a usput se popravlja
   i čitljivost: --brand na sivoj podlozi hedera daje kontrast 2.18. */
/* VAŽNO: selektor mora da bude "body > header", a ne goli "header".
   Goli selektor pogađa SVAKI <header> na strani, pa je i zaglavlje članka
   (<header class="clanak-zaglavlje">) dobijalo position: fixed - naslov
   teksta se lepio uz vrh ekrana, ostajao tamo pri listanju i prekrivao
   pravi heder sa logom i menijem. */
body > header {
    background: var(--surface);
    color: var(--text-quiet);
    font-weight: var(--fw-medium);
    /* Razmak je prebačen na .nav-container, koji je sada ograničen na istu
       širinu kao sadržaj strane. Bez toga logo visi uz levu ivicu ekrana, a
       naslov ispod njega počinje 250px desnije - dve različite leve linije
       na istoj strani. */
    padding: 0;
    height: var(--heder-visina);
    box-sizing: border-box;
    border-bottom: 1px solid var(--line);
    text-align: center;
    position: fixed;
    /* Postavljamo heder na vrh ekrana */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* Postavljamo z-index da bismo osigurali da se heder nalazi iznad ostalog sadržaja */
    box-sizing: border-box;
}

.nav {
    display: flex;
    flex-grow: 3;
    order: 2;
    /* Set the nav order to be second */
    flex-direction: column;
    /* Dodajemo ovu liniju kako bismo meni prikazali vertikalno */
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    /* Dodajemo box-sizing da bi padding bio uračunat u širinu */
    /* Ista širina i isti bočni razmak kao main - logo pada tačno na levu
       liniju naslova, meni na desnu ivicu sadržaja. */
    max-width: 1260px;
    margin: 0 auto;
    /* Visinu daje heder; ovde se samo popunjava, a align-items: center iz
       gornjeg pravila centrira logo i meni u toj visini. */
    height: 100%;
    padding: 0 40px;
}

.nav-container .logo {
    order: 1;
    /* Set the logo order to be first */
    display: flex;
}

.nav-container .logo img {
    /* display: block je ovde presudan, nije kozmetika. Slika je podrazumevano
       inline element, pa je pregledač postavlja na osnovnu liniju teksta i
       ispod nje ostavlja prostor za "repove" slova (p, g, j) - oko 7px kod
       ovog fonta. Okvir oko slike je zbog toga viši od nje same, a slika sedi
       uz njegov vrh. Heder centrira taj okvir, ne sliku, pa je logo ispadao
       ~4px iznad sredine, dok je meni (običan tekst, bez slike) bio na svom
       mestu. Kao blok element slika nema osnovnu liniju, okvir je tačno njene
       visine i centriranje pada na samu sliku. */
    display: block;
    max-width: 100%;
    /* Možete koristiti procente za širinu */
    height: auto;
    /* Automatski prilagoditi visinu prema širini */
    border-radius: var(--radius-sm);
}

/* Meni je navigacija, a ne štivo - zato sitan verzal sa razmaknutim slovima,
   isto kao oznake iznad kartica. Ranije je bio 16px, koliko i osnovni tekst,
   pa je po veličini delovao kao sadržaj. */
.nav--ul__one {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8125em;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0;
    margin: 0;
    justify-content: right;
}

.nav--ul__one a {
    transition: color 0.2s ease-in-out;
}

.nav--ul__one a:hover,
.nav--ul__one a.active {
    color: var(--brand);
}

/* Stavka na kojoj se nalazite je i podebljana, da se razlikuje i kad je
   stranica crno-bela ili kad boje ne pomažu (daltonizam). */
.nav--ul__one a.active {
    font-weight: var(--fw-semibold);
}

.hamburger-menu {
    display: none;
    /* Hidden by default for larger screens */
    cursor: pointer;
    order: 2;
    /* Set the hamburger menu order to be second */
    z-index: 1001;
    /* Ensure hamburger icon is above the header */

    /* Otkad je ovo <button> a ne <span>, moraju da se ponište podrazumevani
       stilovi dugmeta - inače dobije sivu pozadinu, ivicu i sistemski font.
       Button je izabran zato što je sam po sebi dostupan tastaturi i nosi
       aria-expanded; span bi za isto tražio tabindex i rukovanje tasterima. */
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    line-height: 1;
}

/* Futer deli boju i debljinu sa menijem, ali ostaje malim slovima - to je
   rečenica, a ne oznaka, a verzal bi progutao i velika slova u imenima
   ("MeteoGea", "LeJa Design"). */
/* Visina je 1/1.618 visine hedera - traka na dnu je lakša od trake na vrhu,
   u istoj srazmeri u kojoj su i polje i dugme za pretragu. Ranije je futer bio
   viši od hedera (52px prema 47px), pa je dno strane delovalo teže od vrha.
   Tekst se centrira u toj visini umesto da je razmak zadat paddingom - tako
   visina ostaje tačna i kad se veličina slova promeni. */
footer {
    color: var(--text-quiet);
    font-weight: var(--fw-semibold);
    background: var(--surface);
    border-top: 1px solid var(--line);
    /* min-height, ne height: na najužim telefonima (oko 320px) se potpis
       prelama u dva reda i tada mora da sme da poraste. Kod svih širina na
       kojima staje u jedan red - a to je sve preko ~340px - visina je tačno
       zadata i odnos prema hederu ostaje 1.618. Sa fiksnom visinom bi taj
       drugi red izašao van trake, iznad i ispod linije. */
    min-height: var(--futer-visina);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Uspravni razmak se ne vidi dok tekst staje u jedan red (visina je tada
       veća od zbira teksta i ovog razmaka); služi samo da prelomljeni tekst
       ne dodiruje ivice trake. */
    padding: 4px 20px;
    margin-top: auto;
}

footer p {
    margin: 0;
    font-size: 0.8125em;
}

section {
    margin-bottom: 20px;
}

.search-container {
    display: flex;
    /* position: relative čini polje referentnom tačkom za padajući meni, koji
       je njegovo dete i lebdi ispod njega. Širina polja je promenljiva, jer je
       čitaju i samo polje i meni - inače bi se pri promeni jednog razišli. */
    position: relative;
    /* Polje i dugme dele ovaj red u zlatnom preseku: 61.8% prema 38.2%, što
       je odnos 1.618. Između njih stoji razmak od 10px (margin-right na
       polju), pa se svakom oduzima njegov deo tog razmaka - polju 6.18px,
       dugmetu 3.82px, u istoj srazmeri. Zbir je tako tačno 100% širine
       kontejnera, red se ne preliva i flex ne mora ništa da skuplja.
       Ranije je bilo 63% / 32%, odnos 1.97. */
    --search-input-width: calc(61.8% - 6.18px);
    justify-content: center;
    /* Centriranje sadržaja horizontalno */
    align-items: center;
    /* Centriranje sadržaja vertikalno */
    text-align: center;
    width: 38%;
    /* Postavljamo širinu na 38% */
    margin: 0 auto;
    /* Automatske margine za centriranje */
}

.search-container input {
    /* box-sizing: border-box znači da zadatih 63% obuhvataju i padding i okvir.
       Bez toga polje stvarno zauzima 63% + 42px, pa red sa dugmetom prelazi
       raspoloživu širinu i flex ga skuplja - a koliko će ga skupiti zavisi od
       širine dugmeta, pa se ta vrednost ne može unapred izračunati. Zbog toga
       se padajući meni nije poklapao sa poljem. */
    box-sizing: border-box;
    width: var(--search-input-width);
    padding: 10px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: var(--fs-base);
    transition: border-color 0.2s ease;
    margin-right: 10px;
    background-color: var(--surface-input);
}

/* Tekst-nagoveštaj u polju za pretragu je bleđi od upisanog teksta, da se na
   prvi pogled vidi da polje još nije popunjeno. Ima svoju promenljivu, a ne
   deli --text-muted, jer to nije isti podatak - menjanje jedne ne treba da
   povuče drugu. Pravilo važi u obe verzije (mobilnoj i desktop), jer nije
   unutar medijskog upita. Opacity: 1 je tu zato što neki pregledači sami
   dodaju providnost na ::placeholder, pa bi tekst inače bio bleđi nego što je
   zadato. */
.search-container input::placeholder {
    color: var(--text-placeholder);
    opacity: 1;
}

/* Narandžasta se pojavljuje tek kad je polje aktivno - dok stoji prazno,
   okvir je neutralan i ne otima pažnju zelenom dugmetu pored sebe. Prsten
   od senke zamenjuje uklonjeni outline, da fokus ostane vidljiv i onima
   koji se kreću tastaturom. */
.search-container input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(246, 137, 22, 0.18);
}

.search-container>button {
    /* Drugi deo zlatnog preseka iz .search-container; vidi objašnjenje tamo.
       box-sizing: border-box je ovde obavezan iz istog razloga kao kod polja:
       bez njega se 40px paddinga dodaje spolja na zadatu širinu, red se prelije
       preko kontejnera i flex skupi oba elementa - koliko, zavisi od dužine
       teksta na dugmetu, pa odnos prestane da bude onaj koji piše. */
    box-sizing: border-box;
    width: calc(38.2% - 3.82px);
    padding: 10px 20px;
    font-size: var(--fs-base);
    background-color: var(--success);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.search-container>button {
    cursor: pointer;
}

.search-container>button:hover {
    box-shadow: var(--shadow-md);
}

.search-container>button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(78, 190, 75, 0.35);
}

/* Padajući meni sa predlozima naselja - lebdi ispod polja za pretragu i iste
   je širine kao ono, pa deluje kao njegov nastavak. */
.place-suggestions {
    display: none;
    /* Lebdi ispod polja umesto da stoji u toku strane - ranije je otvaranje
       menija guralo sve kartice naniže. z-index ga drži iznad njih; kartice su
       na z-index: 0, pa je dovoljna svaka veća vrednost. */
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    /* Ista širina kao polje, bez ikakvog dodavanja - oba računaju širinu na
       isti način (border-box), pa se ivice poklapaju same od sebe. */
    width: var(--search-input-width);
    z-index: 60;
    /* Ako se pojavi mnogo pogodaka, meni dobija sopstveni skrol umesto da se
       razvuče preko pola strane. */
    max-height: 320px;
    overflow-y: auto;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: left;
    /* Bez unutrašnjeg razmaka, da linije između redova idu od ivice do ivice;
       overflow: hidden drži isticanje prvog i poslednjeg reda unutar
       zaobljenih uglova. */
    overflow-x: hidden;
}

/* Predlog je red teksta, a ne dugme sa pozadinom - pilule i boje ovde bi se
   takmičile sa samim nazivima. Ostaje u jednom redu; ako naziv ipak ne stane,
   skraćuje se sa tri tačke umesto da se prelomi. */
.place-suggestion {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: var(--fs-sm);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Bleda linija razdvaja redove; prvi je nema, da meni ne počinje crtom. */
.place-suggestion+.place-suggestion {
    border-top: 1px solid var(--line);
}

/* Ista pozadina za prelaz mišem i za stavku izabranu strelicama - da izbor
   tastaturom izgleda isto kao izbor mišem. Pozadina prekriva ceo red. */
.place-suggestion:hover,
.place-suggestion:focus-visible,
.place-suggestion.is-active {
    background: var(--surface-inset);
    outline: none;
}

/* Poruka o grešci lebdi ispod polja za pretragu i iste je širine kao ono -
   isto rešenje kao kod padajućeg menija, s kojim i deli mesto (nikad se ne
   pojavljuju istovremeno). Ranije je stajala kao element posle polja, dakle
   dete glavne mreže, pa je padala u jednu od dvanaest kolona i ispadala uska. */
.error-message {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: var(--search-input-width);
    box-sizing: border-box;
    z-index: 55;
    padding: 10px 15px;
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
}

#weather {
    margin-bottom: 0;
}

/* Vidljivost delova sa podacima kontroliše klasa .is-hidden, a ne display iz
   ovog pravila - inače bi se kartica sakrivala na tri načina (CSS, atribut
   style u HTML-u i JavaScript), koji se međusobno gaze. */
#weatherResult {
    font-size: var(--fs-base);
    padding: var(--kartica-razmak);
    color: var(--text-muted);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.temp-row {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
}

#weathericon {
    margin-top: 0;
    margin-bottom: 0;
}

#weathericon img {
    display: block;
    /* display: block uklanja prazan prostor ispod slike koji inline element
       ostavlja za "rep" slova - bez toga red sa ikonicom je ~6px viši nego
       što izgleda, pa se ne uklapa u proračun visine kartice. */
    width: 26px;
    height: 26px;
    /* Bez image-rendering: crisp-edges. PNG ikonice se prikazuju manje od
       svoje prave veličine, a to podešavanje isključuje uglačavanje pri
       smanjivanju, pa su ivice ispadale nazubljene. */
    margin: 0px;
    padding: 0px;
}

/* Šest podataka (od "Subjektivno" do izlaska sunca) stoje u jednom belom
   oblačiću - isti vizuelni jezik kao oblačići u "Kvalitetu vazduha": bela
   pozadina, isto zaobljenje, ista senka, isti bočni padding (14px) i isti
   raspored reda (naziv levo podebljan, vrednost desno običnim fontom). */
.current-details {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    box-sizing: border-box;
    background: var(--surface-inset);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    text-align: left;
}

#subjective,
#wind,
#humidity,
#cloudiness,
#pressure,
#sunrise {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    font-size: var(--fs-xs);
    line-height: 1.2;
}

.cw-label {
    font-weight: var(--fw-bold);
    color: var(--text);
}

/* UV indeks stoji na malom krugu u boji, dok sam broj ostaje u istoj boji kao
   ostale vrednosti u kartici. Boja je time nosilac isticanja, a čitljivost ne
   trpi - tamni tekst na #F7C66E daje kontrast 7.09.
   Krug je krug dok je vrednost jednocifrena; za dvocifrenu (UV ide do 11) se
   razvuče u zaobljenu pilulu.
   Ranije je krug bio dizan negativnim marginama i "top: -5px", pa je vidno
   lebdeo iznad reda u kome stoji. Sada je inline-flex sa centriranim
   sadržajem, a red ga poravnava kao i svaku drugu vrednost (align-items:
   center na samom redu) - bez ijednog pomeraja. */
.cw-value.uv-vrednost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    background: #FFCB2B;
    border-radius: var(--radius-pill);
    color: var(--text);
    font-weight: var(--fw-semibold);
    line-height: 1;
}

.cw-value {
    font-weight: normal;
    color: var(--text);
    text-align: right;
}

#airQuality {
    margin-bottom: 0;
}

#airQualityResult {
    display: flex;
    padding: var(--kartica-razmak);
    color: var(--text-muted);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    margin: 0;
    flex-direction: column;
    gap: 6px;
}

/* Svaki zagađivač je bela "oblačica" - ista geometrija kao .hourly-row-item
   kartica u "Vreme danas": ista pozadina, isto zaobljenje, ista senka, isti
   font i ista visina reda (--red-visina). Razlikuju se dve stvari: raspored
   sadržaja (ovde naziv levo, vrednost desno) i bočni padding (14px umesto
   12px - ovde je red kratak pa podnosi više vazduha uz ivice). */
#pm10,
#pm2_5,
#o3,
#no2,
#so2,
#co {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    background: var(--surface-inset);
    border-radius: var(--radius-md);
    padding: 4px 14px;
    min-height: var(--red-visina);
    margin: 0;
    font-size: var(--fs-xs);
    /* margin: 0 uklanja podrazumevanu marginu <p> elementa - razmak između
       "oblačica" dolazi samo od gap na #airQualityResult (6px na mobilnom,
       5px na desktopu - tačno kao razmak satnih kartica na istoj širini). */
}

.aq-label {
    font-weight: var(--fw-bold);
    color: var(--text);
}

.aq-value {
    font-weight: normal;
    color: var(--text);
}

#aqi {
    font-weight: var(--fw-bold);
    margin-bottom: 0;
    margin-top: 0;
    color: var(--info);
}

/* "Vreme danas" je do sada imala pozadinu i senku SAMO u desktop pravilima -
   na mobilnom je ostajala bez ičega od toga. Dodato ovde da radi svuda, ne
   samo iznad 701px. */
#hourlyForecastData {
    box-sizing: border-box;
    padding: var(--kartica-razmak);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

/* overflow: hidden seče sadržaj koji prelazi zadatu visinu kartice i drži ga
   unutar zaobljenih uglova. Ovde je nekada stajao i "sunčev sjaj" - narandžast
   krug u donjem desnom uglu sve tri kartice. Bio je smišljen dok su kartice
   bile sive, gde se čitao kao topla nijansa podloge; na beloj kartici isti taj
   krug izgleda kao fleka, i to jedini ukras na strani na kojoj sve ostalo
   nešto znači. Uklonjen, a ne ublažen - toplinu na strani već nose
   temperatura i naslovi sekcija. */
#weatherResult,
#airQualityResult {
    position: relative;
    overflow: hidden;
}

#aqiDescription {
    color: var(--brand);
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    line-height: 1;
    margin-bottom: 6px;
    margin-top: -3px;
    /* line-height: 1 uklanja "nevidljivi" prostor ispod teksta, margin-top:
       -3px pomera opis malo naviše (na sredinu između #aqi i prve oblačiće),
       a margin-bottom: 6px dodaje malo više razmaka do prve oblačiće (uz
       postojeći gap: 6px sa #airQualityResult, ukupno ~12px). */
}

/* Razmak između svih stavki (aqi, opis, svaka "oblačica") dolazi od
   gap: 6px postavljenog na #airQualityResult - nije potrebna margina ovde. */

#hourlyForecastContainer {
    margin: 0;
    font-weight: var(--fw-bold);
}

#cityName {
    font-size: var(--fs-lg);
    margin: 0;
    color: var(--info);
    font-weight: var(--fw-bold);
}

/* Poravnate cifre iste širine - korisno kod kolona sa brojevima
   (temperatura, AQI, satnica), bez obzira što je font sad isti svuda. */
.num {
    font-variant-numeric: tabular-nums;
}

#temperature {
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--brand);
    margin-bottom: 10px;
    margin-top: 5px;
}

#dateandtime {
    margin-top: 0;
    margin-bottom: 0;
}

#description {
    font-size: var(--fs-lg);
    margin: 0;
}

#description::first-letter {
    text-transform: uppercase;
}

/* Ista veličina kao datum na vrhu kartice (--fs-sm) - i jedno i drugo je
   naslov u toj kartici, samo je ovaj na dnu i može da se otvori. Bez toga je
   "Prognoza po satima" nasleđivala 16px i bila krupnija od samog datuma. */
.hourly-forecast-container summary {
    cursor: pointer;
    color: var(--success);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    margin-top: 10px;
    /* Red sa strelicom je flex, a ne obična linija teksta. Kod inline
       rasporeda se strelica poravnava prema osnovnoj liniji fonta, pa njena
       visina zavisi od metrike Poppinsa - i svako doterivanje brojem
       (vertical-align) važi samo za taj font i tu veličinu slova. Ovako se
       poravnava geometrijski, po sredini reda, i pogađa sredinu velikih slova
       bez ijedne ručno zadate vrednosti. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* Podrazumevani marker se gasi i crta se sopstveni, u ::before ispod.
       Razlog je isti kao kod hamburgera: marker koji pregledač sam crta nije
       ista stvar na svakom uređaju. Zatvoreno i otvoreno stanje su dva
       različita znaka, a ako im se širine razlikuju - a na iOS-u se razlikuju -
       centriran tekst pored njih se pri otvaranju pomeri u stranu.
       list-style pokriva Chrome i Firefox, ::-webkit-details-marker Safari. */
    list-style: none;
}

.hourly-forecast-container summary::-webkit-details-marker {
    display: none;
}

/* Strelica je kvadrat od 9px sa isečenim trouglom. Kvadrat je bitan: pri
   okretanju za 90 stepeni zauzima potpuno isti prostor, pa otvaranje ne pomera
   ni tekst pored nje ni bilo šta ispod. Sam transform ionako ne ulazi u
   raspored - menja se samo ono što se vidi. */
.hourly-forecast-container summary::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    /* flex-shrink: 0 - bez toga bi flex skupio strelicu kad je tekst dugačak,
       a ona bi tada prestala da bude kvadrat i otvaranje bi opet pomeralo red. */
    flex-shrink: 0;
    background: currentColor;
    clip-path: polygon(15% 0%, 100% 50%, 15% 100%);
    transition: transform 0.15s ease;
}

/* Otvoreno stanje: strelica gleda nadole, ka tabeli koja se otvorila ispod
   nje. Prostor koji zauzima je isti kao zatvorena, jer je kvadrat. */
.hourly-forecast-container[open] summary::before {
    transform: rotate(90deg);
}

.hourly-forecast-container[open] summary {
    margin-bottom: 10px;
}

/* Satnica unutar dnevne kartice - kompaktna tabela umesto niza kartica.
   Ranije je svaki sat bio zasebna kartica sa naslovom, opisom, ikonicom od
   40px i četiri reda podataka (~210px po satu, ~1800px po danu). Sada nazivi
   podataka stoje jednom u zaglavlju, a svaki sat je jedan red od ~26px. */
.hourly-table {
    width: 100%;
    /* Sa fiksnim rasporedom tabela deli raspoloživu širinu po zadatim
       kolonama, umesto da traži onoliko koliko joj sadržaj želi. Uz
       minmax(0, 1fr) na mreži to znači da otvaranje satnice ne pomera ništa. */
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface-inset);
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Brojevi su poravnati desno da bi cifre stajale jedna ispod druge kroz celu
   kolonu - tako se najlakše vidi kad temperatura pada ili kad kiša staje.
   Prva kolona (sat) je poravnata levo.
   Bočni padding je 3px, a ne 5px: sa 5px je zbir svih razmaka bio 70px od
   ~192px koliko tabela ima na najširem desktopu, pa je sadržaju ostajalo
   122px iako mu treba 143px. Zbog toga je "km/h" (32px) izlazio iz svoje
   ćelije i udarao u "mm". Sa 3px razmaci troše 46px i sve staje. */
.hourly-table th,
.hourly-table td {
    padding: 2px 3px;
    text-align: right;
    white-space: nowrap;
}

/* Procenti su izvedeni iz stvarno izmerenih širina sadržaja na 12px fontu,
   a ne odokativno. Merodavno za svaku kolonu je ono što je šire - zaglavlje
   ili vrednost:
     sat "02:00" 36px | ikonica 16px | "°C" / vrednosti 14px
     "km/h" 32px (zaglavlje, vrednosti su 14px) | "mm" 24px | "100" 21px
   Zbir je 143px, plus 46px razmaka = 189px, a tabela na najširem desktopu
   ima ~192px - ostatak od 3px dobija kolona sa temperaturom.
   Zbir procenata je 100, pa se tabela uklapa u karticu koliko god ona bila
   široka. Napomena: ispod ~1200px širine ekrana (kad pet kartica stanu u red
   na užem prozoru) tabela se sužava ispod tih 189px, pa "km/h" opet postaje
   tesan - tada bi pomoglo samo manje slovo u zaglavlju. */
.hourly-table th:nth-child(1) { width: 24.5%; }
.hourly-table th:nth-child(2) { width: 11.5%; }
.hourly-table th:nth-child(3) { width: 12%; }
.hourly-table th:nth-child(4) { width: 19.8%; }
.hourly-table th:nth-child(5) { width: 15.6%; }
.hourly-table th:nth-child(6) { width: 16.6%; }

/* Fino doterivanje pozicije, bez diranja širina kolona. Pošto je tekst desno
   poravnat, njegov položaj pomera desni padding ćelije:
   - temperatura ide 3px udesno (desni padding 3px -> 0);
   - vetar ide 2px ulevo (desni padding 3px -> 5px), a ta dva piksela su uzeta
     od njegovog levog paddinga (3px -> 1px) da kolona ne izgubi ništa od
     širine sadržaja - "km/h" je tačno 32px i popunjava je do poslednjeg
     piksela.
   Pravila važe i za th i za td, pa se naziv kolone pomera zajedno sa
   brojevima ispod sebe i ostaje unutar svoje kolone. */
.hourly-table th:nth-child(3),
.hourly-table td:nth-child(3) {
    padding-right: 0;
}

.hourly-table th:nth-child(4),
.hourly-table td:nth-child(4) {
    padding-left: 1px;
    padding-right: 5px;
}

/* Nazivi kolona se pomeraju odvojeno od brojeva ispod sebe - pravila važe
   samo za th. Naziv je širi od vrednosti ("km/h" je 32px, a "14" je 14px),
   pa desno poravnanje koje odgovara brojevima ne odgovara i njemu.
   Pomeraji: km/h 3px udesno, mm 2px udesno, °C 1px ulevo.
   Posle pomeranja naslovi stoje ovako (tabela ~192px na najširem desktopu):
     °C 78.2-91.2 | km/h 96.2-128.2 | mm 135.1-159.1 | % 173.0-184.0
   - svaki unutar svoje kolone, sa najmanje 5px zazora između susednih. */
.hourly-table th:nth-child(3) {
    padding-right: 1px;
}

.hourly-table th:nth-child(4) {
    padding-right: 2px;
}

.hourly-table th:nth-child(5) {
    padding-right: 1px;
}

/* Drugi krug pomeranja naslova, preko transform a ne paddinga: "km/h" je već
   bio na 2px od desne ivice svoje kolone, a "mm" na 1px, pa im padding nije
   imao odakle da uzme još. transform pomera samo ono što se vidi i ne dira
   raspored tabele, pa kolone ostaju gde jesu.
   Pomeraji: °C 2px ulevo, km/h 3px udesno, mm 3px udesno. Na desktopu "km/h"
   time izlazi 1px, a "mm" 2px preko granice svoje kolone, ali do sledećeg
   naslova ostaje 7px odnosno 11px praznog, pa se ništa ne dodiruje. */
.hourly-table th:nth-child(3) {
    transform: translateX(-2px);
}

.hourly-table th:nth-child(4),
.hourly-table th:nth-child(5) {
    transform: translateX(3px);
}

/* Ikonica je jedina koja nije broj, pa joj desno poravnanje iz osnovnog
   pravila ne treba. Na desktopu kolona je široka tačno koliko i ikonica, pa
   se ništa ne menja; na telefonu je kolona šira (procenat od šire tabele) i
   ikonica se pomera ulevo, bliže satu. */
.hourly-table td:nth-child(2) {
    text-align: left;
}

.hourly-table th:first-child,
.hourly-table td:first-child {
    text-align: left;
    padding-left: 8px;
}

.hourly-table th:last-child,
.hourly-table td:last-child {
    padding-right: 8px;
}

.hourly-table th {
    font-weight: var(--fw-bold);
    color: var(--text);
    border-bottom: 1px solid var(--line);
    padding-top: 8px;
}

.hourly-table tbody tr:last-child td {
    padding-bottom: 8px;
}

/* Bez ovog pravila ikonicu bi uhvatilo ".forecast-item img" i razvuklo je
   na 60px, koliko je velika dnevna ikonica iznad. 16px je taman toliko da ne
   diktira visinu reda - red teksta na 12px je 18px visok, pa ikonica staje
   unutar njega i redovi mogu da budu gušći. */
.forecast-item .hourly-table img {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto;
}

/* Tekst koji vide samo čitači ekrana - kolona sa ikonicom nema vidljiv
   naziv, ali zaglavlje ne sme da ostane prazno. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Kompaktna kartica "Vreme danas" - jedan red po satu (ikonica + jedan red
   teksta), koristi se i na mobilnom i na desktopu. Bočni padding je 12px
   (isti kao kod oblačića u "Kvalitetu vazduha") - razmak od leve ivice do
   ikonice i od poslednjeg znaka do desne ivice je isti. */
/* Red je mreža sa stalnim kolonama, a ne niz vrednosti razdvojen tačkama.
   Zbog toga sat stoji ispod sata, temperatura ispod temperature i cela
   kartica se čita kao tabela - ranije su tačke pomerale svaki red za koji
   piksel, pa se kolone nisu poklapale.

   Kolone sa brojevima su fiksne širine (u ch, tj. u širini cifre), tek
   toliko da najduža vrednost stane. Između njih stoje prazne kolone od po
   1fr - one nose sav višak prostora i dele ga na jednake delove, pa su
   razmaci međusobno jednaki. Ranije su i same kolone sa brojevima bile 1fr:
   tada je višak upadao u njih, a pošto je tekst desno poravnat, ispadao je
   ispred kraćih vrednosti ("0 mm", "0%") kao veći razmak nego ispred dužih.

   Raspored kolona: 1 ikonica, 2 sat, 4 temperatura, 6 vetar, 8 padavine,
   10 verovatnoća; neparne od treće naviše su razmaknice. Zbog njih se
   vrednosti raspoređuju izričito (grid-column), a ne redom.
   Osnovni razmak (column-gap) od 6px stoji između svih kolona, pa ga imaju i
   ikonica i sat; razmaknice mu dodaju jednake porcije viška samo između
   kolona sa brojevima.
   Sat je jedini poravnat ulevo, ostalo je udesno; jedinice (°C, km/h, mm, %)
   ostaju uz broj, pa naslovi kolona nisu potrebni.

   font-size stoji na samom redu, a ne samo na spanovima unutra, jer se
   jedinica ch računa prema slovu elementa u kom je zadata. Dok je red
   nasleđivao 16px iz body-ja, 1ch je bio 9.6px umesto 7.2px, pa su sve četiri
   kolone bile šire za trećinu - na desktopu se to gubilo u razmaknicama, a na
   telefonu je mreža bila šira od reda i poslednja kolona je izlazila van sive
   pozadine.

   Rezervisane širine su izmerene na 12px, gde je cifra široka 7.2px (0.6em):
   "23°C" 28.5px (3.96ch), "20 km/h" 49.4px (6.86ch), "12 mm" 40.3px (5.6ch),
   "88%" 25.8px (3.58ch). Svaka kolona ima sitnu rezervu preko toga.
   Ove vrednosti su jednom bile spuštene na 3.7/6.3/5.1/3.3ch, po pogrešno
   izvedenoj cifri od 8.0px - tada su se "23°C" i "20 km/h" sekli i dobijali
   tri tačke. Ako ikad opet zatreba prostor, uzimati ga iz column-gap-a, a ne
   odavde.

   Poslednja kolona (verovatnoća) je merena samo na dvocifrenom "88%", ali
   pop ume da stigne i do 100 - "100%" je 33px (4.58ch), pa je kolona
   podignuta sa 3.7ch na 4.7ch (ista sitna rezerva kao i kod ostale tri). Bez
   ovoga se poslednja cifra sekla i tekst se završavao na "10…". */
.hourly-row-item {
    display: grid;
    grid-template-columns:
        20px max-content
        minmax(0, 1fr) 4.2ch
        minmax(0, 1fr) 7ch
        minmax(0, 1fr) 5.7ch
        minmax(0, 1fr) 4.7ch;
    align-items: center;
    column-gap: 6px;
    box-sizing: border-box;
    font-size: var(--fs-xs);
    min-height: var(--red-visina);
    background: var(--surface-inset);
    color: var(--text-muted);
    border-radius: var(--radius-md);
    padding: 4px 12px;
    text-align: right;
    margin-bottom: 6px;
}

.hourly-row-item .hr-temp {
    grid-column: 4;
}

.hourly-row-item .hr-wind {
    grid-column: 6;
}

.hourly-row-item .hr-precip {
    grid-column: 8;
}

.hourly-row-item .hr-prob {
    grid-column: 10;
}

/* Poslednja kartica bez donje margine - da razmak do donje ivice sive
   pozadine bude isti kao razmak od gornje ivice do prve kartice. */
.hourly-row-item:last-child {
    margin-bottom: 0;
}

/* Ikonica je 20px - staje u red od --red-visina uz 4px paddinga, pa visinu
   reda diktira sam red, a ne slika u njemu. */
.hourly-row-item img {
    grid-column: 1;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 0;
}

/* Veličinu slova nosi sam red (zbog ch u mreži), pa je ovde inherit - da se
   0.75em ne primeni po drugi put i spusti brojeve na 9px. */
.hourly-row-item span {
    font-size: inherit;
    line-height: 1.2;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sat vodi red, pa je jedini poravnat ulevo i jedini podebljan - isto kao
   naziv podatka u ostalim karticama. */
.hourly-row-item .hr-time {
    grid-column: 2;
    text-align: left;
    font-weight: var(--fw-bold);
}

#forecast {
    margin-bottom: 0;
}

#forecastResult {
    margin-top: 0;
}

.forecast-item {
    color: var(--text-muted);
    background: var(--surface);
    padding: var(--kartica-razmak);
    border-radius: var(--radius-lg);
    margin-bottom: 15px;
    box-shadow: var(--shadow-md);
}

.forecast-item p {
    margin: 2px;
}

/* Opis vremena je jedini red u kartici čija dužina varira - kratki opisi
   ("Vedro") staju u jedan red, duži ("Kiša, mestimično oblačno") se prelome u
   dva. Pošto su kartice u mreži pa se po visini razvlače do najviše u redu,
   jedan duži opis podigne ceo red i ostale kartice dobiju prazan prostor na
   dnu. Zato se ovde unapred rezervišu dva reda: 2 x 1.2em = 2.4em. Prazan
   prostor kod kratkih opisa sada postoji u svakoj kartici na istom mestu, pa
   deluje kao deo rasporeda, a visina kartice više ne zavisi od toga kakvo je
   vreme tog dana. */
.forecast-description {
    line-height: 1.2;
    min-height: 2.4em;
}

/* Min temperatura ide uz Max - negativna gornja margina poništava razmak
   koji dolazi od "margin: 2px" na svim <p> u kartici, pa dva reda deluju kao
   jedan par. Menjati samo ovu vrednost ako treba još bliže ili dalje.
   Dva selektora pokrivaju istu stvar: klasa .temp-min dolazi iz script.js, a
   nth-of-type(4) gađa četvrti pasus u kartici (1. datum, 2. opis vremena,
   3. Max, 4. Min - slika i beli oblačić nisu pasusi pa se ne broje), pa
   pravilo radi i ako script.js nije osvežen. Ako se ikada doda još neki red
   iznad Min temperature, drugi selektor treba obrisati. */
.forecast-item .temp-min,
.forecast-item>p:nth-of-type(4) {
    margin-top: -6px;
}

/* Beli oblačić sa podacima u karticama dnevne prognoze - isti vizuelni jezik
   kao oblačić u "Trenutnom vremenu" i oblačići u "Kvalitetu vazduha". Max i
   Min temperatura namerno ostaju izvan njega (istaknuti su i stoje uz
   ikonicu), kao i "Prognoza po satima" koja se otvara i zatvara. */
.day-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: var(--surface-inset);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    margin-top: 8px;
    text-align: left;
}

/* flex-wrap dozvoljava da se duža vrednost (npr. "1 mm kiše i 2 mm snega")
   prelomi ispod naziva umesto da probije karticu. */
.forecast-item .day-details p {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.2;
}

/* Najviša dnevna temperatura - boja se sada zadaje ovde, a ne iz script.js */
.temp-max {
    color: var(--brand);
}

.forecast-item>p:first-child {
    font-size: var(--fs-sm);
    color: var(--info);
}

.forecast-item img {
    width: 60px;
    height: 60px;
    margin-top: 5px;
}


/* ===================================================================
   DESKTOP / TABLET RASPORED (701px i šire)
   Ispod 701px koristi se postojeći mobilni raspored (jedna kolona,
   sve centrirano) definisan u media query na dnu fajla.
   =================================================================== */

@media (min-width: 701px) {
    body {
        text-align: left;
    }

    /* width: 100% i box-sizing su ovde neophodni, a ne ukras. Body je uspravan
       flex kontejner, a element sa "margin: 0 auto" u takvom kontejneru
       prestaje da se razvlači i dobija širinu svog sadržaja. Posledica je bila
       da širina cele strane zavisi od najdužeg reda u "Vreme danas" (taj red
       ima nowrap), pa se menjala od mesta do mesta i "popravljala" otvaranjem
       satnice, koja je širinu podizala do granice.
       Sa zadatom širinom main uvek zauzima sve što ima, a max-width ga
       zaustavlja. Granica je 1260px umesto 1180px jer se uz border-box u nju
       uračunava i padding od 2x40px - sadržaj i dalje ostaje 1180px širok. */
    main {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: 28px;
        row-gap: 22px;
        width: 100%;
        box-sizing: border-box;
        max-width: 1260px;
        margin: 0 auto;
        /* Donji padding je 16px, koliko i razmak od linije do prvog reda
           izvora - tako je blok jednako odvojen i odozgo i odozdo. Ranije je
           bio 60px, pa je između izvora i futera zjapio prazan prostor. */
        padding: 95px 40px 16px;
        align-items: start;
        /* align-content: start sprečava da se redovi mreže razvuku po visini.
           Main se rasteže preko celog ekrana (flex: 1 na uspravnom body-ju), a
           redovi su automatske visine - bez ovoga se višak visine deli među
           njima, pa se pri malo sadržaja sve ispod naslova spušta naniže, a
           poruka o grešci, vezana za dno razvučenog polja za pretragu, završava
           ispod vidnog polja. */
        align-content: start;
        text-align: left;
    }

    main>h1 {
        grid-column: 1 / -1;
        text-align: left;
        margin: 0;
    }

    #searchContainer {
        grid-column: 1 / -1;
        justify-content: flex-start;
        width: auto;
        max-width: 460px;
        margin: 0;
    }

    /* Trenutno vreme, Vreme danas i Kvalitet vazduha - tri kolone iste visine.
       Visina reda je ograničena da stane u prvi ekran; ako "Vreme danas" ima
       više karata nego što stane, ta kolona dobija sopstveni unutrašnji skrol
       umesto da gura ostatak stranice naniže. */
    .hero-row {
        grid-column: 1 / -1;
        display: flex;
        align-items: flex-start;
        gap: 24px;
    }

    .hero-row>#weather,
    .hero-row>.hourly-column,
    .hero-row>#airQuality {
        flex: 1 1 0;
        min-width: 0;
        min-height: 0;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }

    /* Nazivi iznad tri kartice - veličina i boja dolaze iz .card-label; ovde
       se zadaje samo poravnanje i razmak do kartice. Ranije je ovde stajala i
       boja (--brand-light), koja je zbog jačeg selektora (id) nadjačavala
       zajedničko pravilo. */
    #currentWeatherTitle,
    #airQualityTitle,
    #hourlyForecastTitle {
        margin: 0 0 10px;
        text-align: left;
    }

    /* Kartica ima četiri reda: naziv mesta, datum, red "ikonica + opis +
       temperatura" i beli oblačić sa podacima. Treći red je 1fr, pa sav višak
       prostora ide oko njega - naziv i datum ostaju uz vrh, sivi oblačić uz
       dno kartice (tačno kao oblačići u druge dve kolone). Razmak do ivica je
       isti kao u druge dve kolone, pa je oblačić uvučen isto koliko i satni
       redovi pored njega. */
    #weatherResult {
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        height: var(--hero-card-height);
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
        row-gap: 0;
        text-align: left;
        padding: var(--kartica-razmak);
    }

    /* Naziv mesta i datum se poravnavaju po istoj levoj liniji sa nazivima
       podataka u sivom oblačiću (14px paddinga, koliko oblačić ima iznutra).
       Isti padding ima i .temp-row, pa cela kartica ima jednu levu liniju.
       Vrednost ostaje 14px i pošto je oblačić sužen: i on i ovaj tekst
       počinju od unutrašnje ivice kartice, pa ih njen bočni padding pomera
       zajedno. */
    #cityName,
    #dateandtime {
        padding-left: 14px;
    }

    /* Hijerarhija veličina: temperatura je najkrupnija (40px), naziv mesta
       osetno manji nego ranije (18px umesto 22px), opis 16px, podaci u
       oblačiću 12px. Ranije su naziv i temperatura bili preblizu po veličini
       pa su se takmičili za pažnju. */
    #cityName {
        font-size: 1.125em;
        line-height: 1.2;
    }

    #dateandtime {
        font-size: var(--fs-sm);
        color: var(--text-muted);
        line-height: 1.2;
    }

    /* Temperatura, ikonica i opis su jedna celina, a ne tri odvojena mesta:
       stoje u istom redu, poravnati po sredini, i počinju na istoj levoj
       liniji kao naziv mesta. Temperatura više nije apsolutno pozicionirana -
       stoji u toku, uz ikonicu i opis koji je prate. */
    .temp-row {
        align-self: center;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        padding-left: 14px;
        column-gap: 16px;
        row-gap: 2px;
    }

    /* Redosled u redu: temperatura, pa ikonica, pa opis. Zadaje se preko
       "order", a ne redosledom u HTML-u, da bi mobilna verzija zadržala svoj
       raspored (ikonica i opis gore, temperatura ispod njih). */
    #temperature {
        order: 1;
        margin: 0;
        font-size: 2.5em;
        line-height: 1;
    }

    #weathericon {
        order: 2;
    }

    #description {
        order: 3;
        flex: 0 0 100px;
        font-size: var(--fs-base);
        line-height: 1.15;
        margin: 0;
        /* Uska kolona od 100px prelama opis od dve reči u dva reda ("Blaga
           oblačnost"), dok jednorečni opisi ("Oblačno", "Grmljavina") ostaju
           u jednom redu - najduža pojedinačna reč je oko 85px, pa staje.
           Opis pritom ostaje u istom redu sa temperaturom i ikonicom; lomi se
           samo tekst unutar te kolone, ne i sam red. */
    }

    /* Sivi blok je visok tačno koliko i poslednjih 5 satnih redova u koloni
       "Vreme danas", pa je i izražen tako - a ne prepisanim brojem. U njemu je
       6 redova, pa se ne mogu poklopiti svi: poklapaju se prvi i poslednji, a
       ostala četiri idu ravnomerno između njih (space-between).
       Uspravni padding izlazi iz istog pravila: sredina prvog reda mora da
       padne na polovinu visine satnog reda, mereno od vrha bloka. Uz red
       teksta od 18px to je --red-visina / 2 - 9px. */
    .current-details {
        height: calc(5 * var(--red-visina) + 4 * var(--red-razmak));
        padding: calc(var(--red-visina) / 2 - 9px) 14px;
        justify-content: space-between;
    }

    .current-details p {
        flex: 0 0 18px;
    }

    #airQualityResult {
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        height: var(--hero-card-height);
    }

    #cityName,
    #dateandtime {
        margin: 0;
        line-height: 1.2;
    }

    /* Ikonica je veća nego ranije (32px umesto 26px). Opis je na --fs-base
       (16px) i ograničen na 140px širine, pa se duži opisi prelamaju u dva
       reda umesto da naiđu na temperaturu desno. Sa 140px opis se završava
       na ~204px, a cifre temperature počinju tek oko 210-220px. */
    #weathericon img {
        width: 40px;
        height: 40px;
    }

    /* Kvalitet vazduha - sive "oblačice" iz osnovnog pravila; ovde se kartica
       poravnava sa "Vreme danas": isti razmak do ivica kartice, isti razmak
       između oblačića (5px umesto 6px)
       i isto sidrenje za dno kartice. Ranije je sadržaj bio centriran po visini, pa je poslednji
       oblačić stajao par piksela više nego poslednja satna kartica levo. */
    #airQualityResult {
        justify-content: flex-end;
        padding: var(--kartica-razmak);
        gap: var(--red-razmak);
    }

    /* Kartica ima fiksnu visinu, pa uvek ostane malo slobodnog prostora iznad
       oblačića. Sa "margin: auto 0" taj višak se deli na tačno dva jednaka
       dela - jedan iznad opisa, jedan ispod njega. Posledica: "Indeks
       kvaliteta" ide skroz uz vrh kartice, oblačići ostaju sidreni za dno
       (i dalje poravnati sa satnim karticama levo), a opis stoji tačno na
       sredini između naslova i prvog oblačića. */
    #aqiDescription {
        margin-top: auto;
        margin-bottom: auto;
        position: relative;
        top: -5px;
        /* margin: auto deli slobodan prostor na dva geometrijski jednaka dela,
           ali "Indeks kvaliteta" iznad ima veći red od svog teksta (prazan
           prostor ispod slova), pa gornji razmak deluje veći nego donji.
           top: -5px pomera opis naviše samo vizuelno - ne pomera ni naslov ni
           oblačiće, jer position: relative ne menja raspored. Za finije
           podešavanje menjati samo ovu vrednost. */
    }

    /* Vreme danas - kompaktna vertikalna lista kartica (umesto mreže), da bi
       stalo pored trenutnog vremena i kvaliteta vazduha. Fiksna visina, ista
       za sve tri glavne kartice, bez obzira na broj stavki. Siva pozadina
       ista kao kod kvaliteta vazduha, bele satne kartice unutra.
       justify-content: flex-end sidri listu za dno kartice - isto kao i kod
       "Kvaliteta vazduha", pa poslednji beli oblačić u obe kolone stoji na
       istoj visini (a pošto je i korak reda isti - --red-visina plus
       --red-razmak - poklapaju se onda i svi redovi iznad njega). */
    #hourlyForecastData {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: var(--red-razmak);
        height: var(--hero-card-height);
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
        background: var(--surface);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        padding: var(--kartica-razmak);
    }

    #hourlyForecastData .hourly-row-item {
        margin-bottom: 0;
    }

    /* Obe sekcije zauzimaju svih dvanaest kolona glavne mreže. Bez toga bi
       "Prognoza alergena" pala u jednu kolonu, pa bi njene kartice bile uže od
       onih u dnevnoj prognozi. */
    #pollen,
    #forecast {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    /* Bez ovoga blok sa izvorima pada u jednu od dvanaest kolona i prikazuje se
       kao uska traka teksta. */
    .izvori {
        grid-column: 1 / -1;
    }

    /* Razmak iznad naslova sekcije: 18px margine se nadovezuje na 22px
       row-gap glavne mreže, što daje 40px - isto koliko ima i iznad
       "Prognoze za 5 dana". */
    #pollenResult h2 {
        margin-top: 18px;
    }

    #forecast h2 {
        text-align: left;
    }

    /* Razmak iznad naslova sekcije je veći od razmaka između kartica unutar
       sekcije (18px), da bi se videlo gde se jedna celina završava a druga
       počinje. Kod "5 dana" 18px margine se nadovezuje na 22px row-gap glavne
       mreže, pa ukupno ispada 40px; "15 dana" nije u posebnom redu mreže, pa
       istih 40px dobija kroz samu marginu. */
    #forecastResult h2 {
        margin-top: 18px;
    }

    #forecastResult2 h2 {
        margin-top: 40px;
    }

    /* "Vreme danas", 5-dnevna i 15-dnevna prognoza - ista mreža kartica.
       3 kolone na tablet širinama, 5 kolona od 1000px na dalje. */
    /* minmax(0, 1fr) umesto samog 1fr. "1fr" je skraćenica za minmax(auto, 1fr),
       a taj auto znači da kolona ne sme da bude uža od najužeg mogućeg sadržaja
       u njoj - pa kad se otvori satna tabela, ona postane taj sadržaj, njena
       kartica se raširi a ostale se skupe. Sa nulom kao donjom granicom kolone
       ostaju jednake bez obzira na to šta je u njima. */
    .forecast-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    /* Kartica je običan blok - sadržaj se ređa odozgo naniže i "Prognoza po
       satima" stoji odmah ispod belog oblačića, tamo gde je i završava.
       Ovde je nakratko stajao uspravan flex sa "margin-top: auto", koji je taj
       natpis lepio za dno kartice. To je izgledalo uredno dok su sve kartice
       zatvorene, ali čim se u jednoj otvori satna tabela, red poraste - a
       natpis zalepljen za dno padne zajedno sa njim, pa se u ostale četiri
       kartice pomeri iako se u njima ništa nije promenilo. Sa običnim blokom
       otvaranje jedne kartice ne pomera ništa u ostalima.
       Poravnanje natpisa među karticama ionako više ne zavisi od ovoga:
       sadržaj iznad njega svuda zauzima isti broj redova otkad je opis vremena
       dobio rezervisana dva reda (.forecast-description), a verovatnoća
       padavina zaokružena vrednost. */
    .forecast-item {
        margin-bottom: 0;
        text-align: center;
    }

    /* Satne kartice (i u traci "Vreme danas" i ugnežđene unutar dnevnih kartica)
       - vertikalan raspored da vreme, ikonica i detalji ne guraju jedno drugo
       kad je kartica uska. */
    /* Jedna kolona - svaki podatak u svom redu, umesto dve kolone. */
}

@media (min-width: 1000px) {
    .forecast-container {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}


@media (max-width: 700px) {
    /* Viši heder nego na desktopu: na telefonu je traka jedina stalna tačka
       na ekranu i hamburger u njoj je meta za prst. Futer se ne dira - čita
       istu promenljivu i sam ostaje u zlatnom preseku prema ovoj visini
       (60 / 1.618 = 37.08px). */
    :root {
        --heder-visina: 60px;
    }

    .nav-container {
        width: 100%;
        /* Bočni razmak isti kao sadržaj strane (main ima 20px). */
        padding: 0 20px;
    }


    /* Ikonica, opis i temperatura idu jedna ispod druge - vidi .temp-row
       pravilo dole (flex-direction: column). */
    #weathericon img {
        width: 48px;
        height: 48px;
    }

    #temperature {
        text-align: center;
        margin: 0;
        line-height: 1;
    }


    .nav-container .logo {
        order: 1;
        /* Set the logo order to be first */
        margin-left: 0;
    }

    .nav-container .logo img {
        max-width: 90%;
        /* Prilagodite prema potrebama */
        height: auto;
        /* Automatski prilagoditi visinu prema širini */
    }

    /* Verzal i razmak slova ostaju kao na desktopu, ali veličina se vraća na
       16px - mobilni meni je preko celog ekrana i stavke su mete za prst, pa
       13px kao u hederu ovde ne odgovara. */
    .nav--ul__one {
        flex-direction: column;
        font-size: var(--fs-base);
        margin: 0;
        margin-left: auto;
        /* Dodajemo ovu liniju za pomeranje udesno */
        margin-right: 30px;
        gap: 1rem;
    }

    /* Ikonica se crta, ne piše. U HTML-u stoji znak ☰ (U+2630), ali ga Poppins
       nema, pa ga svaki uređaj vadi iz svog rezervnog fonta - a gde znak sedi
       unutar svog reda zavisi od metrike tog fonta. Zbog toga je na desktopu i
       u inspect prikazu izgledao centrirano, a na pravom telefonu spušteno:
       nije se pomerala kutija, nego znak unutar nje. Tri crte iscrtane
       pozadinom su svuda iste i sede tačno na sredini kutije.
       font-size: 0 sakriva sam znak; ostaje u HTML-u, pa ništa u JS-u ne mora
       da se menja. */
    .hamburger-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Kutija je 44px - najmanja preporučena meta za prst. Ikonica u njoj
           je 22px, pa sa svake strane ostaje po 11px praznog prostora;
           negativna desna margina od 11px vraća desnu ivicu crta tačno na
           liniju sadržaja, da meta za prst ne pomeri ikonicu ulevo. */
        width: 44px;
        height: 44px;
        margin-right: -11px;
        font-size: 0;
        color: var(--brand);
    }

    /* 22px široko, 17px visoko: tri crte od 3px sa razmakom od 4px. Malo
       krupnije od znaka ☰ koji je tu stajao ranije (oko 18px), ali ne toliko
       da preuzme traku - u njoj su samo logo i ovo. */
    .hamburger-menu::before {
        content: "";
        width: 22px;
        height: 17px;
        background:
            linear-gradient(currentColor, currentColor) center top / 100% 3px no-repeat,
            linear-gradient(currentColor, currentColor) center center / 100% 3px no-repeat,
            linear-gradient(currentColor, currentColor) center bottom / 100% 3px no-repeat;
    }

    .nav {
        position: absolute;
        top: 0;
        left: 100%;
        bottom: 0;
        width: 100%;
        padding-top: 6rem;
        align-items: center;
        text-align: center;
        background-color: var(--brand-light);
        color: white;
        transition: 0.2s ease-in-out;
        flex-direction: column;
        gap: 2rem;
        justify-content: flex-start;
    }

    .nav.active {
        position: fixed;
        /* Podešavamo meni na fiksni položaj kada je aktiviran */
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        padding-top: 6rem;
        align-items: right;
        text-align: right;
        background-color: var(--brand-light);
        color: white;
        transition: 0.2s ease-in-out;
        z-index: 999;
        /* Postavljamo z-index kako bi bio iznad ostalog sadržaja */
    }

    h1 {
        margin-bottom: 10px;
        margin-top: 5px;
    }

    /* Dugme stoji ispod polja, oba centrirana na sredinu ekrana - kao i naslov
       iznad njih i nazivi kartica ispod. */
    .search-container {
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .search-container {
        /* Zlatni presek kao i na desktopu, samo bez oduzimanja: tamo polje i
           dugme dele jedan red pa im se razmak od 10px oduzima od širina, a
           ovde stoje jedno ispod drugog i tog razmaka nema. Odnos je isti -
           61.8 / 38.2 = 1.618.
           Razmak do sadržaja ispod: bez njega se prva kartica naslanja odmah
           na dugme. */
        --search-input-width: 61.8%;
        margin: 0 0 24px;
    }

    .search-container input {
        /* Razmak do dugmeta iz osnovnog pravila ovde nema smisla - dugme je
           ispod, ne pored. Da je ostao, pomerio bi polje 5px levo od sredine. */
        margin-right: 0;
    }

    /* Polje je centrirano, a ne uz levu ivicu kontejnera, pa left: 0 iz
       osnovnog pravila ne pada na njegovu levu ivicu. Meni sa naseljima i
       poruka o grešci se zato centriraju isto kao polje - širinu ionako
       čitaju iz iste promenljive. */
    .error-message,
    .place-suggestions {
        left: 50%;
        transform: translateX(-50%);
    }

    .search-container>button {
        /* 13px, ne 10px: h1 ima margin-bottom: 10px, ali njegov red teksta nosi
           i sopstveni "vazduh" ispod slova (line-height), pa je stvarni
           vizuelni razmak do polja ~13px. Ovde nema teksta koji bi to
           kompenzovao, pa 13px doslovno daje isti razmak na oko. */
        margin: 13px 0 0;
        width: 38.2%;
    }

    /* Na mobilnom se tri kartice ređaju jedna ispod druge, pa naslovi druge i
       treće moraju da se odvoje od kartice iznad sebe. Naslov prve kartice se
       ne dira - njemu razmak već daje margina polja za pretragu. */
    #airQualityTitle,
    #hourlyForecastTitle {
        margin-top: 20px;
    }

    /* Naslovi sekcija se odvajaju od poslednje kartice iznad sebe. Vrednost je
       24px, nešto veća od 20px između kartica u gornjem redu, jer ovde počinje
       nova celina a ne samo sledeća kartica.
       Napomena: dnevne kartice imaju donju marginu od 15px, a susedne margine
       se stapaju u veću od dve - pa je razmak tačno 24px, ne 39px. */
    .section-title {
        margin-top: 24px;
        margin-bottom: 7px;
    }

    /* Kartica sada ima samo četiri deteta (naziv, datum, red sa ikonicom i
       beli oblačić sa podacima) i svi idu punom širinom - jedna kolona.
       row-gap je ugašen (0) - razmaci između ova četiri dela više nisu
       jednaki, pa svaki dobija sopstvenu marginu ispod (vidi dole). */
    #weatherResult {
        margin-top: 0px;
        padding: var(--kartica-razmak);
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    /* Razmak od gornje ivice do naziva mesta - isti kao ostala tri razmaka
       na susednim karticama (13px na oko). */
    #weatherResult {
        padding-top: 7px;
    }

    /* Datum se primiče nazivu mesta - obe su naslovni red kartice i čitaju
       se kao celina, pa ne treba da ih deli isti razmak kao veći razdeo
       koji sledi (do reda sa ikonicom). */
    #dateandtime {
        margin-top: -5px;
    }

    /* Ikonica i temperatura su uparene u isti red - to su dva "glavna"
       elementa (grafika + broj), pa deluju kao celina umesto kao dva
       odvojena reda. Opis ("Vedro") je manji, odvojen naslov ispod njih,
       kao potpis. flex-basis: 100% na opisu ga prelama u sopstveni red. */
    .temp-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        column-gap: 14px;
        row-gap: 6px;
        margin-top: 10px;
    }

    #weathericon {
        order: 1;
    }

    #temperature {
        order: 2;
        line-height: 1;
        margin: 0;
    }

    #description {
        order: 3;
        flex: 0 0 100%;
        text-align: center;
        font-size: 16px;
        color: var(--text-muted);
        margin: 0;
    }

    /* Beli oblačić ovde nema fiksnu visinu - kartica na mobilnom raste po
       sadržaju, pa se redovi ređaju sa razmakom od 6px (gap iz osnovnog
       pravila) umesto da se razvlače po visini. Margina odozgo zamenjuje
       ugašeni row-gap sa #weatherResult. */
    .current-details {
        justify-content: flex-start;
        margin-top: 10px;
    }

    /* Razmak između bele "oblačice" i sive ivice kartice usklađen sa
       "Trenutnim vremenom" (15px levo/desno/dole) - ranije je ovde bilo
       10px iz osnovnog pravila (nasleđeno sa desktopa, gde je taj razmak
       8px), pa je "Trenutno vreme" jedina kartica delovala uvučenije od
       ostalih. Sam beli oblačić (padding, zaobljenje, senka) ostaje isti -
       menja se samo uvlačenje od sive ivice. */
    #airQualityResult,
    #hourlyForecastData,
    .forecast-item {
        padding: var(--kartica-razmak);
    }

    /* Na telefonu je red uži nego u koloni na desktopu, pa se prostor uzima
       odavde, a ne od kolona sa vrednostima - one moraju da zadrže svoju
       širinu da se brojevi ne bi sekli. Mreža ima devet razmaka, pa svaki
       piksel ovde vredi devet: sa 4px umesto 6px oslobađa se 18px, koliko
       razmaknicama treba da ostanu vidljive i na ekranu od 360px. */
    .hourly-row-item {
        column-gap: 4px;
    }

    /* Razmak od gornje ivice do "Indeks kvaliteta..." - bio je 20px na oko
       (15px padding + optički vazduh ispod slova), veći od ostalih 13px
       razmaka. Gornji padding smanjen na 8px samo za ovu karticu; levo,
       desno i dole ostaju 15px iz pravila iznad. */
    #airQualityResult {
        padding-top: 8px;
    }

    /* Razmak od gornje ivice do dana i datuma u Prognozi za 5 i 15 dana -
       isti princip kao kod Alergena (13px na oko): veći font naslova (17px,
       podebljan) nosi više optičkog vazduha, pa je gornji padding smanjen sa
       15px na 5px, ista vrednost koja je odgovarala i kod Alergena jer dele
       identičan stil naslova. */
    #forecastData .forecast-item,
    #forecastData2 .forecast-item {
        padding-top: 5px;
    }

    /* Razmak od "Prognoza po satima" do donje ivice - samo Prognoza za 5
       dana ima ovaj red (15-dnevna nema satnicu), pa je donji padding
       smanjen posebno samo ovde, isto na 13px na oko. */
    #forecastData .forecast-item {
        padding-bottom: 11px;
    }

    /* Razmak od gornje ivice kartice do naziva dana ("Dan X") sada je isti
       kao razmak od belog oblačića do donje ivice (13px vizuelno, i levo
       i desno na drugim karticama je 15px kutije - ovde je manje jer
       "Dan X" nosi sopstveni "vazduh" ispod slova pa 15px kutije ovde ne bi
       delovalo isto). Padding-top je namerno manji (7px) nego na ostalim
       karticama (15px), samo da bi na oko ispalo jednako - izmereno
       piksel po piksel, ne računski. Ne dira levo/desno/dole, ni ostale
       .forecast-item kartice (5-dnevna, 15-dnevna prognoza). */
    .polen-item {
        padding-top: 5px;
    }
}

/* ===================================================================
   POLEN
   Dodati na kraj style.css.

   Kartice koriste postojeće .forecast-item i .day-details - ista siva
   kartica sa belim oblačićem kao u dnevnoj prognozi. Novo je samo bedž
   sa nivoom, jer je to jedini element koji ovde nosi značenje bojom.
   =================================================================== */

/* Nivo polena je jedini podatak na sajtu koji se čita bojom, pa boje moraju
   da rastu po jačini a ne da budu ukrasne. Zelena i narandžasta dolaze iz
   postojećih tokena, crvena iz --danger (ista koja se koristi za greške -
   nema razloga uvoditi drugu crvenu), a žuto-smeđa iz --warn. */
.polen-nivo {
    display: inline-block;
    padding: 1px 9px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    white-space: nowrap;
    /* Boja teksta se ne nasleđuje iz .cw-value, pa se zadaje po nivou. */
}

/* Nizak nivo je jedini koji ne traži pažnju - bledi ton, bez ispune, da
   oko ne skače na njega dok traži ono što je zaista visoko. */
.polen-nivo--nizak {
    color: var(--success);
    background: rgba(78, 190, 75, 0.12);
}

.polen-nivo--umeren {
    color: var(--warn);
    background: rgba(199, 125, 0, 0.12);
}

.polen-nivo--visok {
    color: var(--brand);
    background: rgba(246, 137, 22, 0.16);
}

/* Jedini nivo sa punom ispunom - "vrlo visok" je stanje zbog kog neko i
   otvara ovu sekciju, pa se razlikuje po tipu, ne samo po nijansi. */
.polen-nivo--vrlo-visok {
    color: #fff;
    background: var(--danger);
}

/* Kartica polena nema ni ikonicu ni temperature, pa je kraća od kartice
   dnevne prognoze. Bez ovoga bi u mreži izgledala prazno pri dnu. */
.polen-item .day-details {
    margin-top: 6px;
}

/* Napomena da je polen model, a ne merenje sa stanice - to je informacija za
   korisnika, ne pravna obaveza. Atribucija izvora je u .izvori bloku. */
.polen-napomena {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.4;
    /* Leva margina je 0, a ne auto - napomena se poravnava sa levom ivicom
       prve kartice iznad, umesto da stoji centrirana ispod mreže. */
    margin: 10px 0 0;
}

/* Napomena o polenu na mobilnom: manji razmak od kartice iznad (5px umesto
   10px) i poravnanje ulevo, jer main na mobilnom centrira tekst pa bi ga
   napomena inače nasledila uprkos levoj margini na pravilu iznad.
   Ovo pravilo mora da stoji POSLE osnovnog - ranije je identičan override
   bio u @media bloku ranije u fajlu, pa ga je ovo pravilo, koje dolazi posle
   njega u dokumentu, uvek nadjačavalo na svim širinama. */
@media (max-width: 700px) {
    .polen-napomena {
        margin-top: 5px;
        text-align: left;
    }

    /* Dan i datum na vrhu kartice u Prognozi za 5 i 15 dana i u Alergenima -
       bio je 14px, isto kao ostali tekst u kartici, pa se nije isticao kao
       naslov. Selektor mora da bude ">" (direktno dete), ne razmak - inače
       "p:first-child" pogađa i prvi red UNUTAR belog oblačića (Vetar, UV
       indeks, Ambrozija), jer je i on prvo dete SVOG roditelja
       (.day-details), samo dublje u stablu. */
    #forecastData .forecast-item > p:first-child,
    #forecastData2 .forecast-item > p:first-child,
    #pollenData .forecast-item > p:first-child {
        font-size: 16px;
    }

    /* Razmak od naziva dana do belog oblačića usklađen sa druga dva razmaka
       na istoj kartici (13px na oko). Osnovno pravilo (margin-top: 6px)
       daje samo 12px na oko, jer "Dan X" ispod slova nosi malo manje
       optičkog vazduha nego iznad njih. Ovo pravilo mora da stoji POSLE
       osnovnog, iz istog razloga objašnjenog gore. */
    .polen-item .day-details {
        margin-top: 6px;
    }

    /* Razmak od poslednje kartice do napomene "Modelska prognoza..." -
       bio je 16px na oko (osnovnih 15px margin-bottom + malo od senke
       kartice), veći od ostala tri razmaka na kartici (13px). Ovo ga
       svodi na isto, samo za poslednju karticu - ostale zadržavaju
       15px razmak medjusobno. */
    .polen-item:last-child {
        margin-bottom: 12px;
    }
}


/* ===================================================================
   ATRIBUCIJA IZVORA

   Stoji na dnu <main>, a ne u futeru, jer sva tri izvora traže da bude
   uz podatke odnosno na strani gde se podaci prikazuju. Namerno je
   sitna i bleda, ali NE ispod --text-quiet: uslovi traže da bude
   čitljiva, pa je --text-muted na beloj podlozi donja granica.
   =================================================================== */
.izvori {
    /* Blok i tekst u njemu idu punom širinom, koliko i tanka linija iznad -
       tako se duži redovi (Copernicus) prelamaju u manje redova nego kad su
       stešnjeni na pola širine. Donja margina je mala, jer futer ima svoju
       pozadinu pa razmak do njega ne treba da zjapi. */
    margin: 30px 0 0;
    /* Razmak od linije do prvog reda i razmak od poslednjeg reda do futera su
       jednaki (16px): gornji dolazi odavde, donji od paddinga glavnog dela
       strane, uz poslednji red kojem je donja margina uklonjena. */
    padding-top: 16px;
    padding-bottom: 0;
    border-top: 1px solid var(--line);
    /* Poravnanje ulevo se zadaje ovde, a ne prepušta okolini: na desktopu ga
       main već ima, ali na mobilnom je sadržaj centriran, pa je i atribucija
       ispadala centrirana. Ovako izgleda isto u obe verzije. */
    text-align: left;
}

/* Bez margine između pasusa: razmak između svih redova u ovoj sekciji dolazi
   samo od line-height, pa su svi jednaki - i oni između izvora i oni unutar
   Copernicusovog teksta, koji se prelama u dva reda. */
.izvori-red {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Link mora da se prepozna kao link - podvlačenje je diskretnije od boje,
   a Visual Crossing izričito traži da tekst vodi na njihov sajt. */
.izvori-red a {
    color: var(--text-quiet);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.izvori-red a:hover,
.izvori-red a:focus-visible {
    color: var(--brand);
}

.izvori-logo {
    vertical-align: -3px;
    margin-right: 4px;
}

/* Prelom pred rečenicom o odgovornosti (Copernicus). Na desktopu odvaja pravnu
   napomenu od same atribucije, jer red ide punom širinom pa bi bez njega sve
   stajalo u jednom dugačkom redu. Na telefonu se tekst ionako prelama sam, pa
   bi zadati prelom napravio kratak red koji visi u sredini. */
@media (max-width: 700px) {
    .prelom-desktop {
        display: none;
    }
}