/* Sirana Kolačević: stilovi
   Boje, fontovi i razmaci su u :root, pa se izgled mijenja na jednom mjestu. */

@font-face { font-family: "Bonum"; src: url("../fonts/bonum-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bonum"; src: url("../fonts/bonum-bolditalic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Carlito"; src: url("../fonts/carlito-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Carlito"; src: url("../fonts/carlito-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --mlijeko: #FFFCF2;      /* pozadina stranice */
  --maslac-s: #FBF0C9;     /* svijetli maslac, pozadina odjeljka */
  --maslac: #F2B632;       /* sirno žuta, gumbi i istaknuto */
  --emajl: #1B4585;        /* emajl plava, glavna boja marke */
  --emajl-t: #12305F;      /* tamnija plava, podnožje */
  --tinta: #14233F;        /* tekst */
  --nebo: #E9F1F8;         /* blijedoplava, pozadina odjeljka s policom */
  --kora: #A9561B;         /* boja kore, hover */
  --linija: rgba(20, 35, 63, .18);

  --f-naslov: "Bonum", "Bookman Old Style", Bookman, "URW Bookman", Georgia, serif;
  --f-tekst: "Carlito", Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --max: 72rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font: 400 1.125rem/1.6 var(--f-tekst);
  color: var(--tinta);
  background: var(--mlijeko);
  -webkit-font-smoothing: antialiased;
  /* podnožje ostaje pri dnu ekrana i na kratkim stranicama (hvala, privatnost) */
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
}
main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-naslov);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
a { color: var(--emajl); text-underline-offset: .2em; }
a:hover { color: var(--kora); }

:focus-visible { outline: 3px solid var(--emajl); outline-offset: 3px; border-radius: 4px; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.nb { white-space: nowrap; }   /* da se "e-pošta" ne lomi na crtici */

.preskoci {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  padding: .7rem 1rem; border-radius: 8px; background: var(--tinta); color: #fff;
}
.preskoci:focus { top: 1rem; }

/* ---------- gumbi ---------- */
.gumb {
  --rub: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .55rem 1.35rem;
  border: 2px solid var(--rub); border-radius: 10px;
  background: var(--mlijeko); color: var(--tinta);
  font: 700 1.0625rem/1.1 var(--f-tekst); text-align: center; text-decoration: none;
  box-shadow: 0 4px 0 var(--rub);
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
}
.gumb:hover { color: var(--tinta); transform: translateY(2px); box-shadow: 0 2px 0 var(--rub); }
.gumb:active { transform: translateY(4px); box-shadow: 0 0 0 var(--rub); }
.gumb--zlatni { background: var(--maslac); }
.gumb--mali { min-height: 2.75rem; padding: .35rem 1rem; font-size: 1rem; box-shadow: 0 3px 0 var(--rub); }
.gumb[disabled] { opacity: .65; cursor: progress; transform: none; box-shadow: 0 4px 0 var(--rub); }

/* ---------- zaglavlje ---------- */
.zaglavlje {
  position: sticky; top: 0; z-index: 50;
  background: var(--mlijeko); border-bottom: 2px solid var(--emajl);
}
.zaglavlje__red { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 4.25rem; }

.marka { display: inline-flex; align-items: center; gap: .6rem; color: var(--emajl); text-decoration: none; }
.marka:hover { color: var(--emajl); }
.marka__znak { flex: none; }
.marka__ime { font: 700 1.65rem/1 var(--f-naslov); letter-spacing: -.01em; }

.izbornik ul { display: flex; align-items: center; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.izbornik a:not(.gumb) {
  padding: .4rem 0; border-bottom: 3px solid transparent;
  color: var(--tinta); font-weight: 700; text-decoration: none;
}
.izbornik a:not(.gumb):hover { color: var(--tinta); border-bottom-color: var(--maslac); }

.izbornik-gumb {
  display: none; min-height: 2.75rem; padding: .3rem .9rem;
  border: 2px solid var(--tinta); border-radius: 10px; background: var(--mlijeko); color: var(--tinta);
  font: 700 1rem/1 var(--f-tekst); cursor: pointer;
}

@media (max-width: 52rem) {
  .js .izbornik-gumb { display: inline-flex; align-items: center; }
  .js .izbornik {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    padding: .75rem var(--gutter) 1.5rem;
    background: var(--mlijeko); border-bottom: 2px solid var(--emajl);
  }
  .js .izbornik.is-open { display: block; }
  .izbornik ul { flex-direction: column; align-items: stretch; gap: 0; }
  .izbornik li { border-bottom: 1px solid var(--linija); }
  .izbornik li:last-child { border-bottom: 0; padding-top: 1rem; }
  .izbornik a:not(.gumb) { display: block; padding: .85rem 0; border-bottom: 0; }
  .izbornik .gumb { display: flex; }
}

/* ---------- hero ---------- */
.hero { overflow: hidden; background: #BFDDEE; }
.hero__tekst { position: relative; z-index: 1; padding-top: clamp(1.75rem, 5vw, 3.5rem); }
.hero__ime {
  margin: 0 0 0 -.04em;
  color: var(--emajl);
  font-size: clamp(3.4rem, 16.5vw, 11.5rem);
  line-height: .92; letter-spacing: -.025em; overflow-wrap: normal;
}
.hero__podnaslov {
  max-width: 32ch; margin: clamp(.75rem, 2vw, 1.25rem) 0 0;
  font: italic 700 clamp(1.3rem, 3.4vw, 2rem)/1.22 var(--f-naslov);
  text-wrap: balance;
}
.hero__akcije { display: flex; flex-wrap: wrap; gap: .9rem 1rem; margin: 1.5rem 0 0; }
.hero__scena { margin-top: clamp(-6rem, -7vw, -2rem); }
.hero__slika {
  display: block; width: 100%; height: auto; min-height: 21rem; max-height: 50rem;
  object-fit: cover; object-position: 62% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
}

/* ---------- odjeljci ---------- */
.odjeljak { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.odjeljak--nebo { background: var(--nebo); }
.odjeljak--maslac { background: var(--maslac-s); }
.odjeljak--emajl { background: var(--emajl); color: #fff; }

.odjeljak__glava { max-width: 40rem; }
.odjeljak__glava h2 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); }
.odjeljak__glava p { margin: .75rem 0 0; font-size: 1.25rem; }

/* ---------- polica s proizvodima ---------- */
.polica {
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none;
}
@media (min-width: 40rem) { .polica { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .polica { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.roba { padding: 0 0 clamp(2rem, 4vw, 3rem); }
.roba__slika { position: relative; padding: 0 6%; }
.roba__slika img { position: relative; z-index: 1; display: block; width: 100%; }
.roba__slika::after {
  content: ""; position: absolute; left: 0; right: 0; top: 90.9%; height: 1.1rem;
  background: linear-gradient(#D6A566 0 24%, #B67F45 24% 72%, #8C5A2A 72%);
  box-shadow: 0 .4rem 0 rgba(20, 35, 63, .1);
}
.roba__tekst { padding: 1.6rem 6% 0; }
.roba__tekst h3 { color: var(--emajl); font-size: 1.5rem; }
.roba__tekst p { margin: .4rem 0 0; text-wrap: pretty; }
.polica__napomena { max-width: 40rem; margin: 0; }

/* ---------- o nama ---------- */
.o-nama { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.o-nama__slika { width: min(100%, 24rem); margin-inline: auto; }
.luk {
  display: block; width: 100%;
  border-radius: 999px 999px 0 0;
  box-shadow: 0 0 0 6px var(--maslac-s), 0 0 0 10px var(--emajl);
}
.o-nama__tekst { max-width: 34rem; }
.o-nama__tekst h2 { margin-bottom: 1rem; font-size: clamp(2.1rem, 5.4vw, 3.4rem); }
.o-nama__tekst p { font-size: 1.25rem; }
.potpis { margin-top: 1.5rem; color: var(--emajl); font: italic 700 1.6rem/1.2 var(--f-naslov); }
@media (min-width: 56rem) {
  .o-nama { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
  .o-nama__slika { margin-inline: 0; }
}

/* ---------- gdje kupiti ---------- */
.kupnja { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 5vw, 3rem); }
@media (min-width: 52rem) { .kupnja { grid-template-columns: 1fr 1fr; align-items: start; } }

.emajl {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 3px solid var(--emajl); border-radius: 20px; background: #fff;
  box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 7px var(--emajl);
}
.emajl h3 { margin-bottom: 1rem; color: var(--emajl); font-size: 1.6rem; }
.emajl address { margin: 0 0 1rem; font-style: normal; font-size: 1.25rem; }
.kontakt { margin: 0 0 1.5rem; }
.emajl__akcija { margin: 0; }

.radno-stanje { display: flex; align-items: center; margin: 0 0 .5rem; font-weight: 700; }
.tocka { flex: none; width: .8rem; height: .8rem; margin-right: .6rem; border-radius: 50%; background: #2E8B57; }
.radno-stanje--zatvoreno .tocka { background: #B5412F; }

.sati { width: 100%; margin: .25rem 0 0; border-collapse: collapse; }
.sati th, .sati td { padding: .75rem .6rem; border-top: 1px solid var(--linija); text-align: left; font-weight: 400; }
.sati th { font-weight: 700; }
.sati td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sati tr.je-danas { background: var(--maslac-s); }
.sati__napomena { margin: 1rem 0 0; font-size: 1rem; }

/* ---------- upit ---------- */
.upit { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 56rem) { .upit { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } }

.upit__uvod h2 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); }
.upit__uvod p { margin-top: 1rem; font-size: 1.25rem; }
.upit__kontakt { font-weight: 700; }
.odjeljak--emajl a { color: var(--maslac); }
.odjeljak--emajl a:hover { color: #fff; }
.odjeljak--emajl :focus-visible { outline-color: var(--maslac); }

.polje { margin-bottom: 1.15rem; }
.polje label { display: block; margin-bottom: .35rem; font-weight: 700; }
.polje__dodatak { font-weight: 400; }
.polje input[type="text"], .polje input[type="email"], .polje input[type="tel"], .polje select, .polje textarea {
  display: block; width: 100%; min-height: 3rem; padding: .65rem .85rem;
  border: 2px solid #fff; border-radius: 10px; background: #fff; color: var(--tinta);
  font: inherit;
}
.polje textarea { min-height: 9rem; resize: vertical; }
.polje input:focus-visible, .polje select:focus-visible, .polje textarea:focus-visible { outline: 3px solid var(--maslac); outline-offset: 2px; }
.polje [aria-invalid="true"] { border-color: #FF9C86; background: #FFF4F1; }

.greska { margin: .4rem 0 0; color: #FFD7CE; font-weight: 700; }
.greska::before { content: "Pogreška: "; }

.med { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.potvrda { display: flex; align-items: flex-start; gap: .75rem; font-weight: 400; }
.polje .potvrda { font-weight: 400; }
.potvrda input { flex: none; width: 1.6rem; height: 1.6rem; margin: .1rem 0 0; accent-color: var(--maslac); }

.obrazac__radnje { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 1.5rem; }
.stanje { margin: 0; font-weight: 700; }
.stanje--greska { color: #FFD7CE; }

.uspjeh { padding: clamp(1.6rem, 4vw, 2.4rem); border-radius: 20px; background: #fff; color: var(--tinta); }
.uspjeh h3 { margin-bottom: .75rem; color: var(--emajl); font-size: 1.8rem; }
.uspjeh:focus { outline: none; }

/* ---------- podnožje ---------- */
.podnozje { padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; background: var(--emajl-t); color: #DCE6F4; }
.podnozje a { color: var(--maslac); }
.podnozje a:hover { color: #fff; }
.podnozje :focus-visible { outline-color: var(--maslac); }
.podnozje__red { display: grid; gap: 1.5rem 2rem; }
@media (min-width: 48rem) { .podnozje__red { grid-template-columns: repeat(3, 1fr); } }
.podnozje p { margin: 0 0 .75rem; }
.podnozje__ime { color: #fff; font: 700 1.6rem/1.1 var(--f-naslov); }
.podnozje .podnozje__crta { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 1rem; }
.podnozje > .wrap:only-child .podnozje__crta { margin: 0; padding-top: 0; border-top: 0; }   /* kratke stranice: samo redak s autorskim pravom */

/* ---------- stranica s pravilima privatnosti ---------- */
.tekstualna { padding-block: clamp(2.5rem, 7vw, 5rem); }
.tekstualna .wrap { max-width: 46rem; }
.tekstualna h1 { margin-bottom: 1.5rem; color: var(--emajl); font-size: clamp(2.2rem, 6vw, 3.4rem); }
.tekstualna h2 { margin: 2rem 0 .6rem; color: var(--emajl); font-size: 1.6rem; }
.tekstualna ul { padding-left: 1.25rem; }
.obavijest { margin: 0 0 2rem; padding: 1rem 1.25rem; border: 2px solid var(--maslac); border-radius: 12px; background: var(--maslac-s); font-weight: 700; }