/*
  PROPLANAK — osnova (general.css)

  Vizuelni pravac je iz hero stranice u Test2/ („Od brvnare do
  browsera"): krem papir, ravna ilustracija brda sa borovima, sunce kao
  krug, naslovi u DM Serif Display, tekst u Figtree-ju, tamnozelena
  dugmad i jedan topli terakota akcenat. Nema stakla ni zamućenja —
  površine su pune, sa tankom ivicom i mekom senkom.

  Pravila za svaki sajt (CLAUDE.md): BEZ KURZIVA — ni reč u naslovu.
  Istaknuta reč je samo u boji akcenta (.naglasak).

  Tokeni su po ULOZI, ne po boji. Tamna tema (css/tamno.css) menja samo
  njih, pa se ne ponavlja zamka „boja naslova je i podloga": dugme ima
  svoje tokene (--dugme-*), podnožje svoje (--podnozje-*), ilustracija
  svoje (--brdo-*, --nebo-*).

  Redosled učitavanja: general → style → queries → tamno.
*/

/* ////////////////////////////////////////////////////////////////////
   TOKENI
   //////////////////////////////////////////////////////////////////// */

:root {
  /* površine */
  --papir: #f6eedd;
  --papir-2: #efe5cf;
  --povrsina: #fffdf8;
  --povrsina-2: #f3ecdd;
  --povrsina-3: #ebe2cf;

  /* tekst */
  --naslov: #22301f;
  --tekst: #2e3a2b;
  --tekst-tiho: #4e5a49;
  --tekst-ugaseno: #6e7768;
  --ivica: rgb(34 48 31 / 0.12);
  --ivica-jaka: rgb(34 48 31 / 0.24);

  /* akcenat — terakota. --akcenat je za površine i velika slova,
     --akcenat-tekst za sitan tekst (kontrast 5.6:1 na papiru) */
  --akcenat: #b4502a;
  --akcenat-tekst: #9c4322;
  --akcenat-meko: rgb(180 80 42 / 0.16);
  --akcenat-meko-2: rgb(180 80 42 / 0.26);
  --na-akcentu: #fff8ee;

  /* dugmad */
  --dugme-pozadina: #2c4430;
  --dugme-hover: #243a28;
  --dugme-tekst: #f6eedd;
  --dugme-senka: 0 1rem 2.4rem -1.2rem rgb(44 68 48 / 0.6);
  --dugme-tiho: rgb(34 48 31 / 0.06);
  --dugme-tiho-hover: rgb(34 48 31 / 0.1);

  /* ilustracija (hero, kartica, placeholderi, podnožje) */
  --nebo-gore: #f6eedd;
  --nebo-kartica: #f1ddb8;
  --sunce: #edb45c;
  --brdo-1: #dcddbf;
  --brdo-2: #b3c094;
  --brdo-3: #7c9660;
  --bor-1: #6f8b58;
  --bor-2: #2c4430;
  --brdo-4: #34523a;
  --kucica-krov: #5e3a22;
  --kucica-zid: #8a5a36;
  --kucica-svetlo: #f5c66b;
  --kucica-temelj: #3e2716;
  --zvezde: 0;

  /* kalendar */
  --dan-slobodan: #f3ecdd;
  --dan-slobodan-hover: #e9dfca;
  --dan-zauzet-1: #e6ddca;
  --dan-zauzet-2: #f6f0e3;
  --dan-zauzet-tekst: #8e927f;
  --dan-izabran: var(--akcenat);
  --dan-izabran-tekst: #fff8ee;
  --dan-raspon: rgb(180 80 42 / 0.2);
  --dan-raspon-tekst: #22301f;
  --dan-proslo: #b3b39f;

  /* forme */
  --polje-pozadina: #fffdf8;
  --polje-ivica: rgb(34 48 31 / 0.18);
  --fokus: #2c4430;
  --greska-tekst: #9b2f14;
  --greska-pozadina: rgb(155 47 20 / 0.09);
  --uspeh: #3f6b3c;
  --prekidac-pozadina: rgb(34 48 31 / 0.16);
  --prekidac-ukljucen: #2c4430;
  --prekidac-dugme: #ffffff;

  /* podnožje — tamna traka brda, u OBE teme tamna */
  --podnozje-pozadina: #34523a;
  --podnozje-pozadina-2: #2c4430;
  --podnozje-tekst: #f3ebda;
  --podnozje-tiho: #c9d3bf;
  --podnozje-ivica: rgb(243 235 218 / 0.16);

  /* senke — tanka ivica + meka senka, kao kartica u hero stranici */
  --senka-1: 0 0 0 1px rgb(34 48 31 / 0.08), 0 1.4rem 3rem -1.4rem rgb(34 48 31 / 0.4);
  --senka-2: 0 0 0 1px rgb(34 48 31 / 0.12), 0 4rem 7rem -3rem rgb(34 48 31 / 0.45);
  --senka-3: 0 0 0 1px rgb(34 48 31 / 0.1), 0 2.4rem 6rem -2rem rgb(20 30 18 / 0.5);
  --iza-sloja: rgb(20 28 18 / 0.42);

  /* kontakt ikonice */
  --kontakt-telefon: #3f6b3c;
  --kontakt-viber: #7360f2;
  --kontakt-whatsapp: #25a55a;
  --kontakt-instagram: #c13584;
  --kontakt-mejl: #b4502a;

  /* oblici */
  --r-malo: 0.7rem;
  --r: 1rem;
  --r-dugme: 1.2rem;
  --r-kartica: 1.4rem;
  --r-veliko: 2.2rem;
  --r-pilula: 100rem;

  /* kretanje — sporo i meko */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-izlaz: cubic-bezier(0.16, 1, 0.3, 1);

  /* tipografija */
  --font-naslov: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* raspored */
  --sirina: 124rem;
  --ivica-strane: 2rem;
  --visina-zaglavlja: 7.2rem;

  color-scheme: light;
}

/* ////////////////////////////////////////////////////////////////////
   OSNOVA
   //////////////////////////////////////////////////////////////////// */

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

html {
  /* 10px = 1rem */
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  background: var(--papir);
}

/* 4K monitor bez skaliranja (zamka iz Sajt firme 4): iznad 1920 px cela
   strana raste srazmerno, inače bi sadržaj bio trećina ekrana */
@media (min-width: 120em) {
  html {
    font-size: min(0.5208vw, 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* LENIS preuzima skrol — ugrađeni `scroll-behavior: smooth` bi se sa njim
   otimao: Lenis svaki kadar postavlja skrol, a browser bi svaki taj korak
   još jednom animirao, pa strana kasni za točkićem i trza se (izmereno:
   stvarni skrol je zaostajao za Lenisom i do 670 px). Zato čim Lenis
   radi (klasa `lenis` na <html>), native smooth je isključen. Selektor je
   `html.lenis`, ne samo `.lenis-smooth` — Lenis 1.1 tu klasu dodaje tek
   kad prepozna svoj skrol, a do tada je sukob već počeo. */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* mapa u iframe-u ne sme da „pojede" točkić dok Lenis skroluje stranu */
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--papir);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 400ms var(--ease);
}

/* bez ovoga `hidden` ne radi na elementima koji su flex/grid */
[hidden] {
  display: none !important;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

a {
  color: inherit;
}

:focus {
  outline: none;
}

/* prsten samo pri kretanju tastaturom (zamka sa Studenca: *:focus je
   posle klika mišem ostavljao okvir) */
:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 0.6rem;
}

::selection {
  color: var(--na-akcentu);
  background: var(--akcenat);
}

/* SVG sprite — NE display:none (u nekim browserima <use> tada prestane
   da radi); sklonjen je nultom veličinom */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ikona {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.preskoci {
  position: fixed;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 500;
  padding: 1.2rem 1.8rem;
  border-radius: var(--r-dugme);
  font-weight: 600;
  color: var(--dugme-tekst);
  background: var(--dugme-pozadina);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 300ms var(--ease);
}

.preskoci:focus-visible {
  transform: none;
}

.bez-loma {
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: calc(var(--sirina) + 2 * var(--ivica-strane));
  margin-inline: auto;
  padding-inline: var(--ivica-strane);
}

/* ////////////////////////////////////////////////////////////////////
   TIPOGRAFIJA
   //////////////////////////////////////////////////////////////////// */

.nadnaslov {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akcenat-tekst);
}

.nadnaslov .ikona {
  width: 1.6rem;
  height: 1.6rem;
  stroke-width: 2;
}

.naslov-sekcije {
  margin-top: 1.4rem;
  font-family: var(--font-naslov);
  font-size: clamp(3.4rem, 8vw, 5.6rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--naslov);
  text-wrap: balance;
}

/* istaknuta reč — samo boja, NIKAD kurziv (pravilo za svaki sajt) */
.naglasak {
  font-style: normal;
  color: var(--akcenat);
}

.tekst {
  max-width: 62ch;
  margin-top: 1.6rem;
  color: var(--tekst-tiho);
  text-wrap: pretty;
}

.tekst--uvod {
  font-size: 1.9rem;
  line-height: 1.55;
  color: var(--tekst);
}

.podnaslov-sekcije {
  font-family: var(--font-naslov);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--naslov);
}

.zaglavlje-sekcije {
  max-width: 72rem;
  margin-bottom: 4rem;
}

.zaglavlje-sekcije--sredina {
  margin-inline: auto;
  text-align: center;
}

.zaglavlje-sekcije--sredina .tekst {
  margin-inline: auto;
}

/* ////////////////////////////////////////////////////////////////////
   DUGMAD — svaka varijanta i BEZ :link/:visited (zamka iz CLAUDE.md:
   <button> bez stila browser crta po svom, plavo na iOS-u)
   //////////////////////////////////////////////////////////////////// */

.btn,
.btn:link,
.btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  min-height: 5rem;
  padding: 0 2.4rem;
  border-radius: var(--r-dugme);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 260ms var(--ease), color 260ms var(--ease),
    box-shadow 260ms var(--ease), transform 260ms var(--ease);
}

.btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
}

.btn .ikona {
  width: 1.8rem;
  height: 1.8rem;
  stroke-width: 2;
  transition: transform 360ms var(--ease-izlaz);
}

.btn--puno,
.btn--puno:link,
.btn--puno:visited {
  color: var(--dugme-tekst);
  background: var(--dugme-pozadina);
  box-shadow: var(--dugme-senka);
}

.btn--obris,
.btn--obris:link,
.btn--obris:visited {
  color: var(--naslov);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ivica-jaka);
}

.btn--tiho,
.btn--tiho:link,
.btn--tiho:visited {
  color: var(--naslov);
  background: var(--dugme-tiho);
}

/* svetla dugmad na tamnom podnožju — u obe teme */
.btn--svetlo,
.btn--svetlo:link,
.btn--svetlo:visited {
  color: var(--podnozje-pozadina-2);
  background: var(--podnozje-tekst);
}

.btn--obris-svetlo,
.btn--obris-svetlo:link,
.btn--obris-svetlo:visited {
  color: var(--podnozje-tekst);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--podnozje-ivica);
}

.btn--veliko {
  min-height: 5.8rem;
  padding: 0 2.8rem;
  font-size: 1.7rem;
}

.btn--malo {
  min-height: 4.4rem;
  padding: 0 1.8rem;
  font-size: 1.5rem;
}

.btn--sirina {
  width: 100%;
}

.btn:disabled {
  opacity: 0.55;
  cursor: default;
}

@media (hover: hover) {
  .btn--puno:hover {
    background: var(--dugme-hover);
  }

  .btn--puno:hover .ikona--strelica {
    transform: translateX(0.3rem);
  }

  .btn--obris:hover {
    box-shadow: inset 0 0 0 1.5px var(--naslov);
  }

  .btn--tiho:hover {
    background: var(--dugme-tiho-hover);
  }

  .btn--svetlo:hover {
    background: #ffffff;
  }

  .btn--obris-svetlo:hover {
    box-shadow: inset 0 0 0 1.5px var(--podnozje-tekst);
  }
}

/* link sa podvlakom u boji akcenta — kao „Pogledajte radove" u hero stranici */
.link-podvuceno,
.link-podvuceno:link,
.link-podvuceno:visited {
  display: inline-flex;
  align-items: center;
  min-height: 4.4rem;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--naslov);
  text-decoration: none;
  background: linear-gradient(var(--akcenat), var(--akcenat)) left calc(100% - 0.9rem) / 100% 2px no-repeat;
  transition: color 240ms var(--ease), background-size 360ms var(--ease-izlaz);
}

@media (hover: hover) {
  .link-podvuceno:hover {
    color: var(--akcenat-tekst);
  }
}

.link-dugme,
.link-dugme:link,
.link-dugme:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 4.4rem;
  font-weight: 600;
  color: var(--akcenat-tekst);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.35em;
}

.link-dugme .ikona {
  width: 1.8rem;
  height: 1.8rem;
}

/* ////////////////////////////////////////////////////////////////////
   SCROLL REVEAL — mek ulaz: providnost + mali pomeraj, bez skoka.
   Važi samo pod html.js (skripta u <head>-u), pa bez JS-a sve se vidi.
   Posle animacije JS skida atribut (konvencija sa Studenca), da hover
   efekti rade sa svojim tranzicijama.
   //////////////////////////////////////////////////////////////////// */

.js [data-otkrij] {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity 900ms var(--ease) var(--kasnjenje, 0s),
    transform 1100ms var(--ease-izlaz) var(--kasnjenje, 0s);
}

.js [data-otkrij].je-otkriven {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-otkrij] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ////////////////////////////////////////////////////////////////////
   ANIMACIJE (zajedničke)
   //////////////////////////////////////////////////////////////////// */

@keyframes ulaz-gore {
  from {
    opacity: 0;
    transform: translateY(1.6rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ulaz-blago {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes tacka-skace {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  40% {
    transform: translateY(-0.4rem);
    opacity: 1;
  }
}

@keyframes kostur-pulsira {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

@keyframes puls {
  0% {
    box-shadow: 0 0 0 0 rgb(63 107 60 / 0.5);
  }
  70% {
    box-shadow: 0 0 0 0.8rem rgb(63 107 60 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(63 107 60 / 0);
  }
}

@keyframes crtaj {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes broj-iskoci {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes kal-napred {
  from {
    opacity: 0;
    transform: translateX(2.4rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes kal-nazad {
  from {
    opacity: 0;
    transform: translateX(-2.4rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes dim-plovi {
  from {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }
  30% {
    opacity: 0.55;
  }
  to {
    opacity: 0;
    transform: translate(1.6rem, -4.2rem) scale(1.4);
  }
}

@keyframes svetlo-dise {
  from {
    opacity: 0.75;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}