/* ==========================================================================
   KUĆA ZDRAVLJA, zaglavlje, navigacija, podnožje
   ========================================================================== */

/* --- Zaglavlje ------------------------------------------------------------ */
.kz-zaglavlje {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--kz-krem) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--kz-lako), background var(--kz-lako),
              box-shadow var(--kz-lako);
}
.kz-zaglavlje.je-odlepljeno {
  border-bottom-color: var(--kz-linija-blaga);
  box-shadow: var(--kz-senka-sm);
}

.kz-zaglavlje__traka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kz-r-5);
  min-height: var(--kz-zaglavlje-visina);
}

/* --- Logo ----------------------------------------------------------------- */
.kz-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--kz-r-3);
  text-decoration: none;
  color: var(--kz-mastilo);
  flex-shrink: 0;
}
.kz-logo:hover { color: var(--kz-zelena-duboka); }
.kz-logo__znak { flex-shrink: 0; color: var(--kz-zelena-duboka); }
.kz-logo:hover .kz-logo__znak { color: var(--kz-terakota); }
.kz-logo__znak svg { display: block; transition: color var(--kz-brzo); }

.kz-logo__tekst { display: flex; flex-direction: column; line-height: 1.16; }
.kz-logo__ime {
  font-family: var(--kz-font-naslov);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.kz-logo__uloga {
  font-size: 0.665rem;
  letter-spacing: 0.115em;
  text-transform: uppercase;
  color: var(--kz-tekst-tih);
  font-weight: 500;
  margin-top: 2px;
}

@media (max-width: 26rem) {
  .kz-logo__uloga { display: none; }
}

/* --- Glavna navigacija ---------------------------------------------------- */
.kz-nav { display: flex; align-items: center; gap: var(--kz-r-2); }

.kz-meni {
  display: flex;
  align-items: center;
  gap: var(--kz-r-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.kz-meni li { margin: 0; position: relative; }

.kz-meni > li > a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.55rem 0.72rem;
  border-radius: var(--kz-zaob-pun);
  font-size: 0.925rem;
  font-weight: 500;
  color: var(--kz-tekst);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--kz-brzo), color var(--kz-brzo);
}
.kz-meni > li > a:hover {
  background: var(--kz-zelena-najbleda);
  color: var(--kz-zelena-duboka);
}
.kz-meni > li.current-menu-item > a,
.kz-meni > li.current-menu-parent > a,
.kz-meni > li.current-page-ancestor > a,
.kz-meni > li[aria-current] > a {
  color: var(--kz-zelena-duboka);
  font-weight: 650;
  background: var(--kz-zelena-najbleda);
}

/* Padajući meni */
.kz-meni .sub-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 50%;
  translate: -50% 0;
  min-width: 15rem;
  background: var(--kz-bela);
  border: 1px solid var(--kz-linija-blaga);
  border-radius: var(--kz-zaob-md);
  box-shadow: var(--kz-senka-md);
  padding: var(--kz-r-2);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--kz-lako), transform var(--kz-lako),
              visibility var(--kz-lako);
  z-index: 20;
}
.kz-meni > li:hover > .sub-menu,
.kz-meni > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.kz-meni .sub-menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--kz-zaob-sm);
  font-size: 0.9rem;
  color: var(--kz-tekst);
  text-decoration: none;
  transition: background var(--kz-brzo), color var(--kz-brzo);
}
.kz-meni .sub-menu a:hover {
  background: var(--kz-zelena-najbleda);
  color: var(--kz-zelena-duboka);
}

.kz-nav__akcije { display: flex; align-items: center; gap: var(--kz-r-2); }

/* Dugme za pretragu */
.kz-ikon-dugme {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--kz-linija);
  border-radius: var(--kz-zaob-pun);
  background: transparent;
  color: var(--kz-tekst-blazi);
  padding: 0;
  transition: background var(--kz-brzo), color var(--kz-brzo),
              border-color var(--kz-brzo);
}
.kz-ikon-dugme:hover {
  background: var(--kz-zelena-najbleda);
  color: var(--kz-zelena-duboka);
  border-color: var(--kz-zelena-bleda);
}

/* --- Hamburger ------------------------------------------------------------ */
.kz-hamburger {
  display: none;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--kz-linija);
  border-radius: var(--kz-zaob-pun);
  background: transparent;
  padding: 0;
  place-items: center;
}
.kz-hamburger__linije {
  display: block;
  position: relative;
  width: 17px;
  height: 11px;
}
.kz-hamburger__linije span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.6px;
  border-radius: 2px;
  background: var(--kz-mastilo);
  transition: transform var(--kz-lako), opacity var(--kz-brzo), top var(--kz-lako);
}
.kz-hamburger__linije span:nth-child(1) { top: 0; }
.kz-hamburger__linije span:nth-child(2) { top: 4.7px; }
.kz-hamburger__linije span:nth-child(3) { top: 9.4px; }

.kz-hamburger[aria-expanded="true"] .kz-hamburger__linije span:nth-child(1) {
  top: 4.7px; transform: rotate(45deg);
}
.kz-hamburger[aria-expanded="true"] .kz-hamburger__linije span:nth-child(2) { opacity: 0; }
.kz-hamburger[aria-expanded="true"] .kz-hamburger__linije span:nth-child(3) {
  top: 4.7px; transform: rotate(-45deg);
}

/* --- Mobilna fioka -------------------------------------------------------- */
.kz-fioka {
  position: fixed;
  inset: var(--kz-zaglavlje-visina) 0 0;
  background: var(--kz-krem);
  z-index: 95;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--kz-r-5) 0 var(--kz-r-9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--kz-lako), transform var(--kz-lako),
              visibility var(--kz-lako);
}
.kz-fioka.je-otvorena { opacity: 1; visibility: visible; transform: none; }
body.kz-zakljucan { overflow: hidden; }

.kz-fioka__meni { list-style: none; margin: 0; padding: 0; }
.kz-fioka__meni li { margin: 0; border-bottom: 1px solid var(--kz-linija-blaga); }
.kz-fioka__meni > li > a {
  display: block;
  padding: var(--kz-r-4) 0;
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-md);
  color: var(--kz-mastilo);
  text-decoration: none;
}
.kz-fioka__meni > li > a:hover { color: var(--kz-terakota); }
.kz-fioka__meni .sub-menu {
  list-style: none;
  margin: 0 0 var(--kz-r-4);
  padding: 0 0 0 var(--kz-r-4);
  border-left: 2px solid var(--kz-zelena-bleda);
}
.kz-fioka__meni .sub-menu li { border: 0; }
.kz-fioka__meni .sub-menu a {
  display: block;
  padding: var(--kz-r-2) 0;
  font-size: var(--kz-t-sm);
  color: var(--kz-tekst-blazi);
  text-decoration: none;
}
.kz-fioka__meni .sub-menu a:hover { color: var(--kz-zelena-duboka); }

.kz-fioka__dno { margin-top: var(--kz-r-6); display: grid; gap: var(--kz-r-3); }

@media (max-width: 62rem) {
  .kz-nav__meni { display: none; }
  .kz-hamburger { display: grid; }
}
@media (min-width: 62.0625rem) {
  .kz-fioka { display: none; }
}

/* --- Podnožje ------------------------------------------------------------- */
.kz-podnozje {
  background: var(--kz-zelena-najdublja);
  color: color-mix(in srgb, var(--kz-bela) 74%, transparent);
  padding-top: var(--kz-r-9);
  margin-top: auto;
}
.kz-podnozje a {
  color: color-mix(in srgb, var(--kz-bela) 82%, transparent);
  text-decoration: none;
}
.kz-podnozje a:hover { color: var(--kz-zlatna-bleda); }

.kz-podnozje__mreza {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--kz-r-7) var(--kz-r-6);
  padding-bottom: var(--kz-r-8);
}
@media (max-width: 62rem) {
  .kz-podnozje__mreza { grid-template-columns: 1fr 1fr; }
  .kz-podnozje__brend { grid-column: 1 / -1; }
}
@media (max-width: 34rem) {
  .kz-podnozje__mreza { grid-template-columns: 1fr; gap: var(--kz-r-6); }
}

.kz-podnozje__brend p {
  font-size: var(--kz-t-sm);
  line-height: 1.68;
  max-width: 26rem;
  margin-bottom: var(--kz-r-4);
}
.kz-podnozje .kz-logo { color: var(--kz-bela); margin-bottom: var(--kz-r-4); }
.kz-podnozje .kz-logo__znak { color: var(--kz-zlatna); }
.kz-podnozje .kz-logo__uloga { color: color-mix(in srgb, var(--kz-bela) 55%, transparent); }
.kz-podnozje .kz-logo:hover { color: var(--kz-zlatna-bleda); }

.kz-podnozje__naslov {
  font-family: var(--kz-font-telo);
  font-size: var(--kz-t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kz-zlatna);
  margin-bottom: var(--kz-r-4);
}

.kz-podnozje__lista { list-style: none; margin: 0; padding: 0; }
.kz-podnozje__lista li { margin-bottom: var(--kz-r-3); font-size: var(--kz-t-sm); }
.kz-podnozje__lista li:last-child { margin-bottom: 0; }

.kz-podnozje__dno {
  border-top: 1px solid color-mix(in srgb, var(--kz-bela) 12%, transparent);
  padding-block: var(--kz-r-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kz-r-4);
  font-size: var(--kz-t-xs);
  color: color-mix(in srgb, var(--kz-bela) 58%, transparent);
}
.kz-podnozje__dno p { margin: 0; }

.kz-drustvene { display: flex; gap: var(--kz-r-2); }
.kz-drustvene a {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--kz-zaob-pun);
  border: 1px solid color-mix(in srgb, var(--kz-bela) 18%, transparent);
  transition: background var(--kz-brzo), border-color var(--kz-brzo),
              color var(--kz-brzo);
}
.kz-drustvene a:hover {
  background: color-mix(in srgb, var(--kz-bela) 12%, transparent);
  border-color: var(--kz-zlatna);
  color: var(--kz-zlatna);
}

/* Telo kao flex kolona da podnožje uvek pada na dno. */
.kz-telo { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.kz-glavno { flex: 1 0 auto; }

/* --- Mobilno zaglavlje ----------------------------------------------------
   Logo + pretraga + hamburger staju u 375px; poziv na akciju se seli u
   fioku, gde ionako stoji kao prvo dugme.                                  */
@media (max-width: 48rem) {
  .kz-nav__zakazi { display: none; }
  .kz-zaglavlje__traka { gap: var(--kz-r-3); }
  .kz-nav__akcije { gap: var(--kz-r-2); }
}

/* Na vrlo uskim ekranima i pretraga se seli u fioku. */
@media (max-width: 22rem) {
  #kz-dugme-pretrage { display: none; }
}

/* Pravni linkovi i medicinska ograda u podnožju */
.kz-podnozje__pravno {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kz-r-4);
}
.kz-podnozje__pravno a {
  font-size: var(--kz-t-xs);
  text-decoration: none;
  color: color-mix(in srgb, var(--kz-bela) 62%, transparent);
}
.kz-podnozje__pravno a:hover { color: var(--kz-zlatna-bleda); }

.kz-podnozje__ograda {
  padding-bottom: var(--kz-r-6);
}
.kz-podnozje__ograda p {
  margin: 0;
  font-size: var(--kz-t-xs);
  line-height: 1.6;
  color: color-mix(in srgb, var(--kz-bela) 42%, transparent);
  max-width: 52rem;
}