/* ==========================================================================
   KUĆA ZDRAVLJA, osnova: reset, tipografija, elementi, pomoćne klase
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kz-zaglavlje-visina) + 1.5rem);
}

body {
  margin: 0;
  background: var(--kz-pozadina);
  color: var(--kz-tekst);
  font-family: var(--kz-font-telo);
  font-size: var(--kz-t-baza);
  line-height: var(--kz-visina-telo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Bez overflow-a na body: kad je jedna osa `clip`, druga prestaje da
     skroluje, pa se cela stranica zaglavi. Vodoravno prelivanje se
     rešava tamo gde nastaje, karusel i tabele imaju svoj okvir. */
}

img, svg, video, picture { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--kz-font-naslov);
  color: var(--kz-mastilo);
  font-weight: 600;
  line-height: var(--kz-visina-naslov);
  letter-spacing: -0.011em;
  margin: 0 0 var(--kz-r-4);
  text-wrap: balance;
}

h1 { font-size: var(--kz-t-3xl); line-height: var(--kz-visina-tesna); letter-spacing: -0.021em; }
h2 { font-size: var(--kz-t-2xl); letter-spacing: -0.017em; }
h3 { font-size: var(--kz-t-xl); }
h4 { font-size: var(--kz-t-lg); }
h5 { font-size: var(--kz-t-md); }
h6 { font-size: var(--kz-t-baza); }

p { margin: 0 0 var(--kz-r-5); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--kz-zelena-duboka);
  text-decoration-color: color-mix(in srgb, var(--kz-zelena-srednja) 45%, transparent);
  text-underline-offset: 0.19em;
  text-decoration-thickness: 1px;
  transition: color var(--kz-brzo), text-decoration-color var(--kz-brzo);
}
a:hover { color: var(--kz-terakota); text-decoration-color: var(--kz-terakota); }

/* Kažiprst na svemu što se klikće, globalno pravilo. */
a[href], button, summary, label[for], [role="button"], [role="tab"],
input[type="submit"], input[type="button"], input[type="checkbox"],
input[type="radio"], select, .kz-klik {
  cursor: pointer;
}
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--kz-fokus);
  border-radius: var(--kz-zaob-sm);
}

ul, ol { margin: 0 0 var(--kz-r-5); padding-left: 1.35em; }
li { margin-bottom: var(--kz-r-2); }
li:last-child { margin-bottom: 0; }

blockquote { margin: 0; }
figure { margin: 0; }

hr {
  border: 0;
  height: 1px;
  background: var(--kz-linija);
  margin: var(--kz-r-7) 0;
}

strong, b { font-weight: 650; color: var(--kz-mastilo); }
/* Podebljano u vezi uzima boju same veze, inače na tamnoj podlozi ispadne crno. */
a strong, a b { color: inherit; }
em, i { font-style: italic; }

small { font-size: var(--kz-t-sm); }

code, pre, kbd {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.9em;
}

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--kz-zelena-bleda); color: var(--kz-zelena-najdublja); }

/* --- Skip link ------------------------------------------------------------ */
.kz-preskoci {
  position: absolute;
  left: var(--kz-r-4);
  top: var(--kz-r-4);
  z-index: 200;
  transform: translateY(-160%);
  background: var(--kz-zelena-duboka);
  color: var(--kz-na-primarnoj);
  padding: var(--kz-r-3) var(--kz-r-5);
  border-radius: var(--kz-zaob);
  font-size: var(--kz-t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--kz-lako);
}
.kz-preskoci:focus { transform: translateY(0); color: var(--kz-na-primarnoj); }

/* --- Layout: omotači ------------------------------------------------------ */
.kz-omot {
  width: 100%;
  max-width: var(--kz-sirina-siroka);
  margin-inline: auto;
  padding-inline: var(--kz-oivicenje);
}
.kz-omot--puni    { max-width: var(--kz-sirina-puna); }
.kz-omot--srednji { max-width: var(--kz-sirina-srednja); }
.kz-omot--tekst   { max-width: var(--kz-sirina-tekst); }
.kz-omot--uski    { max-width: var(--kz-sirina-uska); }

.kz-sekcija { padding-block: var(--kz-sekcija); }
.kz-sekcija--tesna { padding-block: calc(var(--kz-sekcija) * 0.62); }
.kz-sekcija--utisnuta { background: var(--kz-pozadina-utisnuta); }
.kz-sekcija--tamna {
  background: var(--kz-zelena-najdublja);
  color: var(--kz-na-primarnoj);
}
.kz-sekcija--tamna :is(h1,h2,h3,h4,h5,h6) { color: var(--kz-bela); }
.kz-sekcija--tamna a { color: var(--kz-zelena-bleda); }
.kz-sekcija--tamna a:hover { color: var(--kz-zlatna-bleda); }

/* --- Zaglavlje sekcije ---------------------------------------------------- */
.kz-zaglavlje-sekcije { margin-bottom: var(--kz-r-8); max-width: var(--kz-sirina-tekst); }
.kz-zaglavlje-sekcije--sredina { margin-inline: auto; text-align: center; }
.kz-zaglavlje-sekcije > :last-child { margin-bottom: 0; }

.kz-nadnaslov {
  display: block;
  font-family: var(--kz-font-telo);
  font-size: var(--kz-t-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--kz-terakota);
  margin-bottom: var(--kz-r-3);
}
.kz-sekcija--tamna .kz-nadnaslov { color: var(--kz-zlatna); }

.kz-uvodni {
  font-size: var(--kz-t-md);
  line-height: var(--kz-visina-citak);
  color: var(--kz-tekst-blazi);
}
.kz-sekcija--tamna .kz-uvodni { color: color-mix(in srgb, var(--kz-bela) 78%, transparent); }

/* --- Dugmad --------------------------------------------------------------- */
.kz-dugme {
  display: inline-flex;
  align-items: center;
  gap: var(--kz-r-2);
  padding: 0.82em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--kz-zaob-pun);
  font-family: var(--kz-font-telo);
  font-size: var(--kz-t-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  transition: background var(--kz-brzo), color var(--kz-brzo),
              border-color var(--kz-brzo), transform var(--kz-brzo),
              box-shadow var(--kz-brzo);
}
.kz-dugme:active { transform: translateY(1px); }

.kz-dugme--puno {
  background: var(--kz-zelena-duboka);
  color: var(--kz-na-primarnoj);
  box-shadow: var(--kz-senka-sm);
}
.kz-dugme--puno:hover {
  background: var(--kz-zelena-najdublja);
  color: var(--kz-bela);
  box-shadow: var(--kz-senka);
}

.kz-dugme--akcenat { background: var(--kz-terakota); color: #FFF6EF; }
.kz-dugme--akcenat:hover { background: var(--kz-terakota-tamna); color: var(--kz-bela); }

.kz-dugme--obris {
  background: transparent;
  color: var(--kz-zelena-duboka);
  border-color: color-mix(in srgb, var(--kz-zelena-duboka) 30%, transparent);
}
.kz-dugme--obris:hover {
  background: var(--kz-zelena-duboka);
  color: var(--kz-na-primarnoj);
  border-color: var(--kz-zelena-duboka);
}

.kz-sekcija--tamna .kz-dugme--obris {
  color: var(--kz-bela);
  border-color: color-mix(in srgb, var(--kz-bela) 38%, transparent);
}
.kz-sekcija--tamna .kz-dugme--obris:hover {
  background: var(--kz-bela);
  color: var(--kz-zelena-najdublja);
  border-color: var(--kz-bela);
}

.kz-dugme--tih {
  background: transparent;
  color: var(--kz-zelena-duboka);
  padding-inline: 0.3em;
}
.kz-dugme--tih:hover { color: var(--kz-terakota); }

.kz-dugme--veliko { font-size: var(--kz-t-baza); padding: 0.95em 1.9em; }

/* Strelica koja se pomeri na hover */
.kz-dugme .kz-strelica { transition: transform var(--kz-lako); }
.kz-dugme:hover .kz-strelica { transform: translateX(3px); }

/* --- Veza sa strelicom (tekstualna) --------------------------------------- */
.kz-veza {
  display: inline-flex;
  align-items: center;
  gap: var(--kz-r-2);
  font-weight: 600;
  font-size: var(--kz-t-sm);
  text-decoration: none;
  color: var(--kz-zelena-duboka);
}
.kz-veza::after {
  content: '→';
  transition: transform var(--kz-lako);
  font-size: 1.05em;
}
.kz-veza:hover::after { transform: translateX(4px); }

/* --- Pomoćne klase -------------------------------------------------------- */
.kz-samo-citac {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.kz-sredina { text-align: center; }
.kz-bez-margine { margin: 0 !important; }

/* Održava odnos stranica slike bez skoka pri učitavanju. */
.kz-odnos { position: relative; overflow: hidden; background: var(--kz-krem-tamniji); }
.kz-odnos > img,
.kz-odnos > picture > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.kz-odnos--4-3   { aspect-ratio: 4 / 3; }
.kz-odnos--3-2   { aspect-ratio: 3 / 2; }
.kz-odnos--16-9  { aspect-ratio: 16 / 9; }
.kz-odnos--1-1   { aspect-ratio: 1 / 1; }
.kz-odnos--portret { aspect-ratio: 3 / 4; }

/* Suptilno pojavljivanje pri skrolu; bez JS-a ostaje vidljivo. */
.kz-otkrij {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--kz-mirno), transform var(--kz-mirno);
}
.kz-otkrij.je-vidljiv { opacity: 1; transform: none; }
html:not(.js) .kz-otkrij { opacity: 1; transform: none; }