/* ==========================================================================
   cro-stat.com / vizualni identitet: inačice (od 30. 9. 2026., točka 8)

   Tri inačice pisma i boja biraju se atributom data-stil na <html>
   (postavlja ga styles/dinamika.html iz parametra ?stil=a|b|c, pamti se u
   pregledniku). Bez atributa vrijedi dosadašnji izgled. Kad vlasnica odabere
   inačicu, njezini tokeni sele u styles/custom*.scss kao zadani, a ovaj sloj
   ostaje samo za zajedničke sastavnice (boje skupina, kartice, klizni niz).

   Zajedničko svim inačicama:
   - pismo: Wix Madefor Display (naslovi, navigacija), Wix Madefor Text (tekst),
     iz repozitorija (styles/fonts.css);
   - crvena za podatkovne linije ostaje (--cs-accent u custom-light.scss);
   - boje tematskih skupina za kartice i oznake (kontrast na bijeloj >= 4,5:1);
   - kartice: zaobljeni kutovi, tanka gradijentna crta na vrhu u boji skupine.
   Stranica ima samo svijetlu temu (tamna je ukinuta 1. 10. 2026.).
   ========================================================================== */

:root {
  /* Boje tematskih skupina (profesionalne, prigušene; sve >= 4,5:1 na bijeloj). */
  --cs-skupina-gospodarstvo:  #1D4E89;
  --cs-skupina-trziste-rada:  #2E6E63;
  --cs-skupina-cijene:        #A8542A;
  --cs-skupina-nekretnine:    #6A5A96;
  --cs-skupina-javne-financije: #4E6B2E;
  --cs-skupina-novac:         #8A661C;
  --cs-skupina-energetika:    #2A6F8E;
  --cs-skupina:               var(--cs-primary);   /* boja trenutne stranice, postavlja JS */
  /* Analiticki okvir, plocice i pozadina (odluka 9. 10. 2026., poglavlje 75): boje iz predloska docs/primjeri/rashodi-za-obranu.html,
     neutralne na svim stranicama; obojeni su samo grafikoni. R: cs_boja_plocica, cs_boje_okvira. */
  --cs-okvir-podloga:         #EEF3F8;   /* svijetloplavosiva podloga okvira (--box) */
  --cs-okvir-naslov:          #1F4F82;   /* tamnoplavi naslov okvira (--accent) */
  --cs-plocica:               #FFFFFF;   /* bijela plocica (--surface) */
  --cs-plocica-rub:           #DDE1E6;   /* tanki sivi rub plocice (--line) */
  --cs-stranica-podloga:      #F7F8F9;   /* svijetlosiva pozadina stranice (--bg) */
  --cs-kartica-radius:        12px;
  --cs-dur:                   220ms;
  --cs-ease:                  cubic-bezier(0.22, 0.61, 0.36, 1);
}
html[data-skupina="gospodarstvo"]   { --cs-skupina: var(--cs-skupina-gospodarstvo); }
html[data-skupina="trziste-rada"]   { --cs-skupina: var(--cs-skupina-trziste-rada); }
html[data-skupina="cijene"]         { --cs-skupina: var(--cs-skupina-cijene); }
html[data-skupina="nekretnine"]     { --cs-skupina: var(--cs-skupina-nekretnine); }
html[data-skupina="javne-financije"]{ --cs-skupina: var(--cs-skupina-javne-financije); }
html[data-skupina="novac"]          { --cs-skupina: var(--cs-skupina-novac); }
html[data-skupina="energetika"]     { --cs-skupina: var(--cs-skupina-energetika); }

/* --- Pismo (sve tri inačice) ------------------------------------------------ */
html[data-stil] {
  --cs-font-sans: "Wix Madefor Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --cs-font-serif: "Wix Madefor Display", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; /* naslovi: token je povijesno "serif" */
  --cs-font-naslov: "Wix Madefor Display", "Segoe UI", system-ui, sans-serif;
}
html[data-stil] body {
  background: var(--cs-stranica-podloga);   /* poglavlje 75 */
  font-family: var(--cs-font-sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
}
html[data-stil] h1, html[data-stil] h2, html[data-stil] h3, html[data-stil] h4,
html[data-stil] .quarto-title-block .title, html[data-stil] h1.title {
  font-family: var(--cs-font-naslov);
  letter-spacing: -0.015em;
}
html[data-stil] h1.title, html[data-stil] .quarto-title-block .title { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.12; }
html[data-stil] h1:not(.title) { font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.9rem); }
html[data-stil] h2 { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem); }
html[data-stil] h3 { font-size: 1.15rem; }
/* Brojke u tablicama i osi: tabularne znamenke gdje ih pismo podržava. */
html[data-stil] table, html[data-stil] .cs-izvor__datum, html[data-stil] .monitor-card__header { font-variant-numeric: tabular-nums; }

/* --- Inačica A "mirna" (po uzoru na leonardasrdelic.com) -------------------- */
html[data-stil="a"] {
  --cs-ink: #101820; --cs-heading: #101820; --cs-muted: #5B636C; --cs-source: #676E77;
  --cs-border: #E2E5E9; --cs-bg-subtle: #F6F7F8;
  --cs-link: #1D4E89; --cs-link-hover: #163B68; --cs-primary: #1D4E89; --cs-primary-600: #163B68; --cs-primary-700: #10305A;
  --cs-kartica-radius: 12px;
}
html[data-stil="a"] h1, html[data-stil="a"] h2, html[data-stil="a"] h3, html[data-stil="a"] h1.title { font-weight: 600; }
html[data-stil="a"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62% 52% at 10% 6%, rgba(29, 78, 137, 0.07) 0%, transparent 72%),
    radial-gradient(58% 48% at 94% 92%, rgba(194, 170, 130, 0.08) 0%, transparent 72%);
}
html[data-stil="a"] h2 { border-bottom-color: var(--cs-border); }

/* --- Inačica B "plava dubina" (prijelaz od tamnije prema svjetlijoj, po uzoru
       na naslovnicu cro-climate.com) ------------------------------------------ */
html[data-stil="b"] {
  --cs-ink: #16202B; --cs-heading: #0F2A47; --cs-muted: #545E69; --cs-source: #66707A;
  --cs-border: #DCE3EA; --cs-bg-subtle: #F2F6FA;
  --cs-link: #0B4F8A; --cs-link-hover: #083A66; --cs-primary: #0B4F8A;
  --cs-kartica-radius: 10px;
}
html[data-stil="b"] h1, html[data-stil="b"] h2, html[data-stil="b"] h3, html[data-stil="b"] h1.title { font-weight: 700; }
html[data-stil="b"] body {
  background:
    linear-gradient(180deg, #DDE8F4 0px, rgba(221, 232, 244, 0) 520px),
    #FFFFFF;
}
html[data-stil="b"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 85% 10%, rgba(11, 79, 138, 0.10) 0%, transparent 70%),
    radial-gradient(50% 40% at 8% 90%, rgba(251, 231, 223, 0.55) 0%, transparent 70%);
}
html[data-stil="b"] h1.title::after, html[data-stil="b"] .quarto-title-block .title::after {
  content: ""; display: block; width: 56px; height: 4px; margin-top: 10px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cs-skupina), rgba(11, 79, 138, 0.15));
}
html[data-stil="b"] h2 { border-bottom: 0; padding-bottom: 0; }
html[data-stil="b"] h2::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--cs-skupina); opacity: 0.85; }

/* --- Inačica C "kontrast" (jači naslovi; navigacijska traka je ista u svim inačicama, styles/navigacija.css) ---------- */
html[data-stil="c"] {
  --cs-ink: #0F1720; --cs-heading: #0F1720; --cs-muted: #4F5964; --cs-source: #5F6973;
  --cs-border: #D9DEE4; --cs-bg-subtle: #F4F5F7;
  --cs-link: #16467E; --cs-link-hover: #0E3160; --cs-primary: #16467E;
  --cs-kartica-radius: 8px;
}
html[data-stil="c"] h1, html[data-stil="c"] h2, html[data-stil="c"] h3, html[data-stil="c"] h1.title { font-weight: 700; }
html[data-stil="c"] h1.title { font-weight: 800; letter-spacing: -0.025em; }
html[data-stil="c"] body {
  background: linear-gradient(180deg, #EEF1F5 0px, rgba(238, 241, 245, 0) 360px), #FFFFFF;
}
html[data-stil="c"] h2 { border-bottom: 2px solid var(--cs-skupina); }

/* --- Kartice (sve inačice): zaobljeni kutovi, tanka gradijentna crta na vrhu
       u boji skupine ------------------------------------------------------- */
html[data-stil] .quarto-layout-cell.card,
html[data-stil] .monitor-card,
html[data-stil] .cs-skupine__kartica {
  position: relative;
  overflow: hidden;
  border-radius: var(--cs-kartica-radius);
}
html[data-stil] .quarto-layout-cell.card::before,
html[data-stil] .monitor-card::before,
html[data-stil] .cs-skupine__kartica::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--cs-skupina) 0%, color-mix(in srgb, var(--cs-skupina) 25%, transparent) 100%);
  pointer-events: none;
}
/* Kartice na pregledu skupine i na naslovnici nose boju SVOJE skupine. */
.cs-kartice[data-skupina="gospodarstvo"] .card, .cs-skupine__kartica[data-skupina="gospodarstvo"] { --cs-skupina: var(--cs-skupina-gospodarstvo); }
.cs-kartice[data-skupina="trziste-rada"] .card, .cs-skupine__kartica[data-skupina="trziste-rada"] { --cs-skupina: var(--cs-skupina-trziste-rada); }
.cs-kartice[data-skupina="cijene"] .card, .cs-skupine__kartica[data-skupina="cijene"] { --cs-skupina: var(--cs-skupina-cijene); }
.cs-kartice[data-skupina="nekretnine"] .card, .cs-skupine__kartica[data-skupina="nekretnine"] { --cs-skupina: var(--cs-skupina-nekretnine); }
.cs-kartice[data-skupina="javne-financije"] .card, .cs-skupine__kartica[data-skupina="javne-financije"] { --cs-skupina: var(--cs-skupina-javne-financije); }
.cs-kartice[data-skupina="novac"] .card, .cs-skupine__kartica[data-skupina="novac"] { --cs-skupina: var(--cs-skupina-novac); }
.cs-kartice[data-skupina="energetika"] .card, .cs-skupine__kartica[data-skupina="energetika"] { --cs-skupina: var(--cs-skupina-energetika); }
html[data-stil] .cs-freq { color: var(--cs-skupina); background: color-mix(in srgb, var(--cs-skupina) 10%, transparent); }
html[data-stil] .quarto-layout-cell.card h3 a { color: var(--cs-heading); }

/* --- Klizni niz kartica tematskih skupina (naslovnica) ---------------------- */
.cs-skupine { position: relative; margin: 8px 0 24px; }
.cs-skupine__traka {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 2px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch;   /* bez trake za pomicanje: strelice, dodir i kotacic */
}
.cs-skupine__traka::-webkit-scrollbar { display: none; }
.cs-skupine__kartica {
  flex: 0 0 240px; scroll-snap-align: start; display: block; padding: 16px 18px 14px;
  background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-kartica-radius);
  color: var(--cs-ink); text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative; overflow: hidden;
}
.cs-skupine__kartica::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--cs-skupina), color-mix(in srgb, var(--cs-skupina) 25%, transparent)); }
.cs-skupine__kartica:hover { text-decoration: none; color: var(--cs-ink); }
.cs-skupine__naziv { display: block; font-family: var(--cs-font-naslov, var(--cs-font-sans)); font-weight: 600; font-size: 1.02rem; color: var(--cs-skupina); margin-bottom: 4px; }
.cs-skupine__opis { display: block; font-size: 0.86rem; color: var(--cs-muted); line-height: 1.4; }
.cs-skupine__gumb {
  position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--cs-border); background: var(--cs-surface); color: var(--cs-ink); font-size: 18px; line-height: 1;
  cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); display: none; align-items: center; justify-content: center; z-index: 2;
}
.cs-skupine__gumb--lijevo { left: -14px; } .cs-skupine__gumb--desno { right: -14px; }
.cs-skupine__gumb[disabled] { opacity: 0.35; cursor: default; }
@media (pointer: fine) and (min-width: 900px) { .cs-skupine__gumb { display: inline-flex; } }

/* --- Dinamika, suzdržano (točka 9): najviše 300 ms, poštuje reduced-motion --- */
/* Pojavljivanje i podizanje pri dolasku u vidno polje, jednom. Samo tekst i
   kartice pregleda; grafikoni i brojke (chart-item, monitor-card, tablice)
   vidljivi su odmah. Bez JS-a (html bez .cs-js) sve je vidljivo. */
html.cs-js .cs-reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--cs-dur) var(--cs-ease), transform var(--cs-dur) var(--cs-ease); }
html.cs-js .cs-reveal.cs-vidljiv { opacity: 1; transform: none; }
/* Kartice reagiraju na prelazak pokazivačem: lagano podizanje i sjena. */
.quarto-layout-cell.card, .monitor-link, .cs-skupine__kartica { transition: transform var(--cs-dur) var(--cs-ease), box-shadow var(--cs-dur) var(--cs-ease); }
@media (hover: hover) {
  .quarto-layout-cell.card:hover, .monitor-link:hover, .cs-skupine__kartica:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 24, 32, 0.10); }
}
/* Ljepljivo zaglavlje koje se pri pomicanju skuplja u užu traku. */
.navbar { transition: padding 150ms ease; }
.navbar .navbar-brand-logo img, .navbar .navbar-logo { transition: height var(--cs-dur) var(--cs-ease), max-height var(--cs-dur) var(--cs-ease); }
html.cs-skupljeno .navbar { padding-top: 0.15rem; padding-bottom: 0.15rem; }
html.cs-skupljeno .navbar .navbar-brand-logo img, html.cs-skupljeno .navbar .navbar-logo { height: 34px; max-height: 34px; }
@media (prefers-reduced-motion: reduce) {
  :root { --cs-dur: 0ms; }
  html.cs-js .cs-reveal { opacity: 1; transform: none; transition: none; }
  .quarto-layout-cell.card, .monitor-link, .cs-skupine__kartica, .navbar, .navbar .navbar-brand-logo img { transition: none; }
  .cs-skupine__traka { scroll-behavior: auto; }
}