/* reset5 2011 opensource.736cs.com MIT */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
audio,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
mark,
menu,
meter,
nav,
output,
progress,
section,
summary,
time,
video {
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  margin: 0;
  padding: 0;
}
body {
  line-height: 1;
}
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section,
blockquote {
  display: block;
}
nav ul {
  list-style: none;
}
ol {
  list-style: decimal;
}
ul {
  list-style: disc;
}
ul ul {
  list-style: circle;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}
ins {
  text-decoration: underline;
}
del {
  text-decoration: line-through;
}
mark {
  background: none;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
input[type='submit'],
input[type='button'],
button {
  margin: 0;
  padding: 0;
}
input,
select,
a img {
  vertical-align: middle;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

.cf:before,
.cf:after {
  content: ' '; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

.cl {
  clear: both;
}

/* Reset postavlja display:block na blockquote, footer, section i jos sedam
   elemenata, cime gazi atribut hidden — element ostane vidljiv. Bez ovoga
   js/recenzije.js ne bi sakrio nijednu recenziju. */
[hidden] {
  display: none !important;
}

/*-- end reset css --*/
a.link {
  color: #1f72c4;
  text-decoration: none;
}

a.link:hover {
  color: #000;
}

* {
  box-sizing: border-box;
}

body {
  background: #fff;
  color: #333;
  font-size: 62.5%;
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Tahoma, sans-serif;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  line-height: 1;
}

header {
  font-size: 1.6em;
  margin: 0 auto;
  position: absolute;
  width: 100%;
  z-index: 1000;

  padding: 40px;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.11) 76%, rgba(0, 0, 0, 0) 93%);
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.11) 76%, rgba(0, 0, 0, 0) 93%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.11) 76%, rgba(0, 0, 0, 0) 93%);
}

/* max-width, ne width.
   header ima `padding: 40px` koji se nigdje ne smanjuje, pa na ekranu od 320px
   sadrzaju ostaje 240px — a fiksnih 280px je prelijevalo stranicu za 40px.
   Sada logo drzi 280px dok ima mjesta, a ispod se skuplja. */
h1 {
  margin: 0 auto;
  max-width: 280px;
  width: 100%;
}

h1 > img {
  display: block;
  height: auto;
  max-width: 100%;
}

#headerInfo {
  left: 5%;
  line-height: 47px;
  position: absolute;
  top: 40px;
}

header a {
  color: #fff;
  display: block;
  float: left;
  text-decoration: none;
}

#headerInfo > a {
  text-decoration: underline;
}

#headerInfo > a:hover {
  text-decoration: none;
}

/* 1.125em od zaglavljevih 16px = 18px. Ruzan broj, ali tocan: prije je stajalo
   1.2em, sto je davalo 19.2px — vrijednost koja je ispala iz gniježđenja, kao
   nekad na heroju. Ikone smiju biti vece od teksta uz sebe (16px), samo neka to
   bude odluka. */
#headerInfo span {
  display: block;
  float: left;
  font-size: 1.125em;
  margin-left: 10px;
}

#headerInfo span + span {
  margin-left: 5px;
}

#zastaveInfo {
  height: 47px;
  position: absolute;
  right: 5%;
  top: 40px;
}

#zastave {
  list-style: none;
  margin-top: 11px;
  width: 134px;
}

#zastave li {
  float: left;
  margin-right: 2px;
  width: 32px;
}

#zastave li:last-of-type {
  margin-right: 0;
}

#zastave a {
  display: block;
}

#zastave img {
  width: 100%;
}

/* Razmak medju sekcijama = 2x padding, jer se padding ne stapa kao margina.
   32px daje 64px, a naslov je od svog sadrzaja udaljen 32px — omjer 2:1.
   Taj omjer je ono sto se cuva pri svakoj izmjeni: kad se priblizi 1:1, naslov
   prestaje pripadati sekciji ispod sebe i pocinje visiti izmedju dvije. */
section {
  padding: 32px 0;
}

#wrapper {
  height: 100vh;
  margin-bottom: 32px;
  padding: 0;
  position: relative;
}

/* Hero karusel: CSS scroll-snap, bez plugina.
   Zamijenio je Owl Carousel (43 KB uz jQuery), koji je za ovo radio jedno —
   jedan slajd u pogledu, listanje i autoplay. Prva dva sada daje preglednik.

   overflow-x: auto NIJE ukras: bez njega nema scroll spremnika, pa ni snapa.
   Traka se skriva jer je karusel preko cijelog ekrana i traka bi presjekla
   sliku; listanje ostaje prstom, strelicama i tipkovnicom. */
#slider-area {
  display: flex;
  height: 100vh;
  left: 0;
  overflow-x: auto;
  overflow-y: hidden;
  position: absolute;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  top: 0;
  width: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#slider-area::-webkit-scrollbar {
  display: none;
}

/* flex: 0 0 100% — slajd drzi punu sirinu i ne skuplja se.
   scroll-snap-align: center, ne start: uz `start` zadnji slajd ne moze doci u
   sredinu pa se snap na njemu ponasa drukcije nego na ostalima. */
#slider-area .item {
  flex: 0 0 100%;
  height: 100vh;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Slajdovi su prije bili pozadinske slike (.s1 do .s7), pa su se sve dohvacale
   pri ucitavanju. Sada su <img> — vidi komentar u index.php-u. */
#slider-area .item img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* --- strelice ------------------------------------------------------------
   Izvan #slider-area: unutra bi bile dio scroll spremnika i putovale bi sa
   slajdovima. pointer-events na omotacu je none da traka preko sredine ekrana
   ne hvata klikove namijenjene slici; gumbi ga vracaju na auto. */
.hero-nav {
  left: 2%;
  pointer-events: none;
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

.hero-nav[hidden] {
  display: none;
}

.hero-strelica {
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 50px;
  pointer-events: auto;
  position: relative;
  transition: background 0.3s;
  width: 50px;
}

.hero-strelica:hover {
  background: rgba(255, 255, 255, 0.85);
}

.hero-strelica--naprijed {
  float: right;
}

/* Kvacica se crta rubovima, kao u kalendaru — bez ikonskog fonta. Owl je za
   dvije strelice povlacio IcoFont s dva glifa. */
.hero-strelica:after {
  border-right: 2px solid #333;
  border-top: 2px solid #333;
  content: '';
  height: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 12px;
}

.hero-strelica--natrag:after {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.hero-strelica--naprijed:after {
  transform: translate(-70%, -50%) rotate(45deg);
}

/* --- galerija -------------------------------------------------------------
   Ista tehnika kao hero: scroll-snap traka. Zamijenila je sliderPro (91 KB uz
   85 KB jQueryja), koji je uz to nosio vlastito lijeno ucitavanje preko
   data-src — pa galerija bez JS-a nije postojala. Sada je loading="lazy".

   Strelice dijele izgled s herojem (.hero-strelica), pa se dvije trake na istoj
   stranici ne razlikuju bez razloga; razlikuje se samo polozaj omotaca. */
.galerija {
  position: relative;
}

.galerija-traka {
  display: flex;
  gap: 4px;
  margin: 0 auto;
  max-width: 1140px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  width: 90%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.galerija-traka::-webkit-scrollbar {
  display: none;
}

/* Jedna slika na mobitelu, dvije od 700px, tri od 1000px.
   Sirina se racuna iz gapa: n slika u pogledu ostavlja (n-1) razmaka, pa
   `calc((100% - (n-1)*gap) / n)`. Da stoji gola postotna vrijednost, razmaci bi
   se zbrojili preko 100% i zadnja bi slika virila.

   scroll-snap-align: start, ne center kao kod heroja. Uz vise vidljivih slika
   centriranje nema smisla — prva i zadnja se nikad ne mogu naci u sredini, pa
   bi se snap na njima ponasao drukcije nego na ostalima. Kod heroja je slajd
   preko cijele sirine, gdje su start i center ista tocka.

   Bez scroll-snap-stop: always. Kod heroja (7 slajdova) je pravilo "jedan po
   jedan" tocno, ali ovdje ih je 82 — prisilno zaustavljanje na svakoj tocki
   pretvorilo bi prelistavanje galerije u dvadesetak zamaha. */
.galerija-slika {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

@media (min-width: 700px) {
  .galerija-slika {
    flex-basis: calc((100% - 4px) / 2);
  }
}

@media (min-width: 1000px) {
  .galerija-slika {
    flex-basis: calc((100% - 8px) / 3);
  }
}

/* aspect-ratio 3/2 — sve slike galerije su 1200x800. Time visina trake stoji
   prije nego ijedna slika stigne, pa se sadrzaj ispod ne pomakne. width/height
   u markupu rade isto za pojedinu sliku; ovo drzi i praznu traku. */
.galerija-slika img {
  aspect-ratio: 3 / 2;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* Strelice galerije stoje unutar njezine sirine (90%, max 1140px), ne uz rub
   ekrana kao kod heroja koji je preko cijele sirine. */
.galerija-nav {
  left: 5%;
  pointer-events: none;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.galerija-nav[hidden] {
  display: none;
}

/* Slika u traci je poveznica na punu velicinu — bez JS-a klik otvara samu
   fotografiju, s JS-om js/povecanje.js. Poveznica ne smije nositi podcrtu ni
   boju teksta jer je sadrzaj slika. */
.galerija-veza {
  display: block;
  text-decoration: none;
}

.galerija-veza:hover img {
  opacity: 0.9;
}

.galerija-veza img {
  transition: opacity 0.2s;
}

/* --- povecanje preko stranice --------------------------------------------- */

.povecanje {
  align-items: center;
  background: rgba(0, 0, 0, 0.9);
  bottom: 0;
  display: flex;
  gap: 12px;
  justify-content: center;
  left: 0;
  padding: 24px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2000;
}

.povecanje[hidden] {
  display: none;
}

/* max-height, ne visina: uspravna slika mora stati po visini, vodoravna po
   sirini, a omjer ostaje netaknut. */
.povecanje-slika {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Strelice nasljeduju izgled iz .hero-strelica; ovdje se samo skidaju s
   apsolutnog polozaja jer su u flex retku. */
.povecanje-strelica {
  flex: none;
}

.povecanje-zatvori {
  background: none;
  border: 0;
  cursor: pointer;
  height: 44px;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 44px;
}

/* Kriz iz dvije crte, bez ikonskog fonta — kao kvacice na strelicama. */
.povecanje-zatvori:before,
.povecanje-zatvori:after {
  background: #fff;
  content: '';
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 22px;
}

.povecanje-zatvori:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.povecanje-zatvori:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Na uskom ekranu strelice odlaze pod sliku: sa strane bi joj pojele sirinu. */
@media (max-width: 700px) {
  .povecanje {
    flex-wrap: wrap;
    padding: 12px;
  }

  .povecanje-slika {
    flex: 1 0 100%;
    max-height: calc(100% - 70px);
  }
}

/* Bez font-size. Prije je ovdje stajalo 1.8em i sluzilo je samo kao mnozitelj:
   omotac nema vlastitog teksta, a tri ugnijezdena `em` (1.8 → 1.2 → 3) davala
   su 21.6px za natuknice i 64.8px za ikone. Te brojeve nitko nije odabrao,
   ispali su iz gniježđenja — a 21.6px je natuknicu "besplatan wi-fi" cinilo
   vecom od glavnog teksta stranice (18px) i trecom po velicini na cijeloj
   stranici, odmah iza naslova i cijene.

   Sada natuknice nose svoju velicinu izravno (1.6em od body-jevih 10px = 16px),
   a ikona mnozi samo jednom i namjerno: 3em od 16px = 48px. */
#features div.features {
  bottom: 5%;
  display: flex;
  left: 0;
  margin: auto;
  max-width: 900px;
  position: absolute;
  right: 0;
  width: 90%;
  z-index: 1000;
}

/* 16px — ista velicina kao ostali sporedni tekst na stranici. Natuknice o
   wi-fiju i parkingu su prednosti, ne naslov, pa nemaju sto konkurirati s h2. */
/* min-width: 0 iz istog razloga kao kod polja datuma: bez njega se stavka ne
   moze suziti ispod najduze rijeci. Najduza je njemacki "haustierfreundlich",
   18 znakova — tri takve natuknice traze vise nego sto uski ekran ima. */
#features div.features > div {
  color: #fff;
  flex: 1;
  font-size: 1.6em;
  min-width: 0;
  text-align: center;
}

/* 3em od 16px = 48px. Jedino namjerno mnozenje u ovom bloku. */
#features div.features i {
  font-size: 3em;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
}

section h2 {
  color: #555;
  font-family: 'Lato', sans-serif;
  font-size: 4em;
  font-weight: 300;
  margin: 0 5% 32px;
  text-align: center;
  width: 90%;
}

#cjenik div.nema {
  max-width: 1140px;
  margin: 0 auto;
  width: 90%;
  display: none;
}

/* Cjenik je nekad bio <table class="cjenik">, a uz njega je stajao selektor

     table.cjenik, th, td { border: 1px solid #ddd; ... }

   kojemu je zarez bio na krivom mjestu, pa je pogadjao SVAKI th i td na
   stranici — ukljucujuci celije dana u kalendaru, koji se crta kao tablica.
   Selektor je obrisan 31.07.2026.; tablicu su zamijenile kartice (dl.cjenik
   nize). Pravila su vezana iskljucivo na .cjenik. */

p.text {
  font-size: 1.8em;
  line-height: 160%;
  margin: 0 auto;
  max-width: 760px;
  text-align: center;
  width: 90%;
}

/* 14px, ne 16. Na 16px je razlika prema glavnom tekstu (18px) bila 11% — oko to
   ne cita kao "ovo je sporedno", nego kao nemar. Na 14px napomene padaju na
   istu stepenicu kao .pravilo u cjeniku, sto je dosljedno: i jedno i drugo su
   uvjeti uz cijenu (polog, psi, ugovor). */
p.text.napomena {
  font-size: 1.4em;
}

p.text + p.text {
  margin-top: 20px;
}

p.text.napomena + p.text.napomena {
  margin-top: 10px;
}

/* Depozit i naknada za psa stoje u istom redu, razdvojeni rubom. Rub, a ne znak
   "|", jer bi znak neki citaci ekrana procitali kao "uspravna crta"; rub je
   cisto vizualan i nikad se ne izgovara. */
p.napomena.uvjeti {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  justify-content: center;
}

p.napomena.uvjeti span + span {
  border-left: 1px solid #ddd;
  padding-left: 18px;
}

/* Kartice cjenika.
   auto-fill + minmax sami biraju broj stupaca, pa nema media queryja: pri
   1140px stanu 4 kartice, dalje se lomi na 3, 2, pa 1.

   1140px je sirina koju stranica vec koristi za kalendar i recenzije — pri
   900px je cjenik odudarao od stupca ispod sebe.

   260px minmax daje 4 stupca pri 1140px (kartica 276px, unutra 260px). Najduzi
   sadrzaj je pravilo o danu — njemacko "An- und Abreise samstags" i talijansko
   "arrivo e partenza il sabato" — koje pri 1.3em traze oko 160px, dakle stane u
   jedan red sa zalihom.

   min(260px, 100%) umjesto golih 260px — inace bi na ekranu uzem od 260px
   stupac ostao siri od spremnika i stranica bi dobila vodoravni scrollbar. */
dl.cjenik {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  margin: 0 auto 20px;
  max-width: 1140px;
  width: 90%;
}

/* Jedna kartica. column-reverse okrece samo prikaz: u DOM-u je razdoblje pa
   cijena (redoslijed koji cita citac ekrana), a na ekranu je cijena gore. */
dl.cjenik > div {
  align-items: center;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  padding: 16px 8px;
  text-align: center;
}

dl.cjenik dd {
  align-items: baseline;
  color: #333;
  display: flex;
  justify-content: center;
  font-family: 'Lato', sans-serif;
  font-size: 2.8em;
  font-weight: 300;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;
}

/* margin-top je na dt, a zbog column-reverse se vidi kao razmak ISPOD cijene. */
dl.cjenik dt {
  margin-top: 8px;
}

/* 16px, ne 13. Cijena od 28px bez raspona ne znaci nista — gost mora znati za
   koji period vrijedi, pa je raspon podatak jednake vaznosti. Na 13px je bio
   2.2x manji od cijene, sto ga je citalo kao fusnotu uz cijenu umjesto kao
   drugu polovicu istog podatka. Sada je omjer 1.75:1, jedna stepenica.

   nowrap ostaje: najduzi raspon je "04.07.26. – 21.08.26.", 21 znak, na 16px
   oko 185px. Najuza kartica (260px minus 2x8 paddinga) ima 244px. */
dl.cjenik .raspon {
  color: #555;
  display: block;
  font-size: 1.6em;
  line-height: 1.3;
  white-space: nowrap;
}

/* "/ noc" uz cijenu. Prije je bila zasebna napomena ispod cjenika ("Cijene su
   izrazene za 1 noc"); na kartici je jasnija i napomena je otpala. */
/* 0.43em od cijeninih 28px = 12px. Mora se mnoziti jer stoji unutar <dd>, koji
   nosi cijenu — zato nezgodan broj, ali pada na stepenicu ljestvice. */
dl.cjenik .jedinica {
  color: #999;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.43em;
  margin-left: 4px;
}

/* Pravilo razdoblja, u dva retka: broj noci pa dan. Prije je stajalo u zasebnom
   odlomku ispod cjenika, gdje su se rasponi pravila i rasponi cijena razilazili
   pa ih je gost morao spajati sam.

   14px i #707070, a ne 11.5px i #999. Ovdje stoji "najmanje 7 noci" i "dolazak
   i odlazak subotom" — uvjeti zbog kojih rezervacija biva odbijena ako ih gost
   previdi. Na 11.5px su bili najsitniji tekst na stranici, sitniji i od "/ noc".
   Boja se mijenja iz istog razloga: #999 daje kontrast 2.85:1 na bijeloj i pada
   ispod WCAG AA praga (4.5:1), pa bi povecanje samo pola rijesilo problem.
   #707070 daje 4.95:1 i isti je ton kao datum recenzije.

   Ostaje sitnije i svjetlije od raspona — na kartici je uvjet, ne podatak koji
   gost trazi. */
dl.cjenik .pravilo {
  /* Boja ostaje #707070 (5.2:1 na bijeloj, iznad WCAG AA praga od 4.5:1).
     Razlika prema rasponu se radi VELICINOM, ne posvjetljivanjem: ovaj redak
     nosi pravilo rezervacije — tko ga previdi, odabere termin koji server
     odbije. Svjetlije od #767676 vise ne prolazi prag. */
  color: #707070;
  display: block;
  font-size: 1.3em;
  line-height: 1.35;
}

dl.cjenik .raspon + .pravilo {
  margin-top: 4px;
}

/* Razmak do legende ispod. Namjerno mali: legenda objasnjava celije kalendara,
   pa mora citati kao njegov nastavak, a ne kao prva u nizu fusnota. Ranije je
   iznad i ispod legende stajalo po 20px — element jednako udaljen od onoga cemu
   pripada i od onoga cemu ne pripada ne pripada nicemu.

   !important je otisao: stajao je zbog starog datepickera, cijih pravila vise
   nema, a nijedan vendor CSS ne cilja #calendar. */
#calendar {
  margin-bottom: 8px;
}

/* Blago siva traka preko cijele sirine. Obrazac je jedini dio stranice na
   kojem gost nesto radi, pa se ton koristi da ga odvoji od ostatka — bez
   dodavanja ijedne nove linije. Bijela polja s #ddd obrubom na njemu iskoce.
   Sirinu sadrzaja i dalje drzi fieldset.upit; traka je puna sirina. */
/* Jedina sekcija s vlastitim paddingom, i to s razlogom: kod bijelih sekcija
   se padding stapa sa susjednim praznim prostorom, kod trake je vidljiv rub.
   32px bi sadrzaj priljubilo uz boju. */
/* Cjenik dobiva dvostruki padding — 96px do susjeda naspram 64px drugdje.
   Jedna brojka, ne padding + margin: sekcija nema pozadinu, pa se to dvoje
   vizualno ne razlikuje i razdvajanje bi samo raspodijelilo isti razmak na dva
   mjesta koja treba zbrajati u glavi. */
section#cjenik {
  padding: 64px 0;
}

section#rezervacija {
  background: #f5f5f5;
  padding: 48px 0;
}

/* Susjedi trake dobivaju VISE, ne manje.

   Kod dvije bijele sekcije bjelina je zbroj obaju paddinga: 32 + 32 = 64px. Na
   rubu boje bjelina pocinje tek na rubu trake — trakinih 48px je unutar nje i
   oku se ne broji kao razmak. Dakle susjedov padding je CIJELI vidljivi razmak,
   a ne polovica: uz 32px bi ga bilo upola manje nego drugdje, a uz 16px cetiri
   puta manje.

   48px, ne 64px: rub boje i sam razdvaja, pa mu treba nesto manje bjeline nego
   mekoj granici izmedju dvije bijele sekcije.

   :has() hvata sekciju PRIJE trake. Preglednik koji ga ne podrzava pravilo
   preskoci i vrati se na 32px — dakle na stanje otprije, ne u kvar. */
section#rezervacija + section {
  padding-top: 48px;
}

section:has(+ section#rezervacija) {
  padding-bottom: 48px;
}

/* min-width: 0 na samom fieldsetu.
   <fieldset> u zadanom stilu preglednika ima `min-inline-size: min-content` —
   ne moze se suziti ispod svog sadrzaja, i `width: 90%` na to ne utjece. Njegov
   min-content diktiraju <textarea cols="50"> (~400px) i <select> s opcijom
   "Sjeverna Makedonija", pa je obrazac prelijevao stranicu na uskim ekranima i
   nakon sto su pojedinacna polja dobila min-width: 0.
   To je vlastitost fieldseta, ne nasih pravila — zato se ne vidi u CSS-u dok se
   izrijekom ne ponisti. */
/* Obrazac se nakon uspjesno poslanog upita skloni.
   Prijelaz radi CSS, ne JS — prije je to bio jQueryjev slideUp. Ovako ga
   prefers-reduced-motion gasi zajedno sa svim ostalim animacijama na stranici,
   bez posebnog koda. */
#forma {
  transition: opacity .35s;
}

#forma.poslano {
  opacity: 0;
  pointer-events: none;
}

fieldset.upit {
  margin: 0 auto;
  max-width: 760px;
  min-width: 0;
  width: 90%;
}

fieldset.upit ol {
  list-style: none;
  padding: 0;
}

fieldset.upit li {
  margin-bottom: 10px;
  width: 100%;
}

/* Zadnji redak je gumb. 24px iznad, uz 10px koje daje prethodni redak — dakle
   34px naspram 10px izmedju obicnih redaka. Gumb je kraj obrasca, ne jos jedno
   polje u nizu. */
fieldset.upit li:last-child {
  margin-bottom: 0;
  margin-top: 24px;
}

fieldset.upit.admin li:hover {
  background: #f7f7f7;
}

fieldset.upit input.text,
fieldset.upit input.textx,
input.slike,
select,
textarea,
input.submit {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  color: #000;
  font-family: 'Open Sans', Tahoma, sans-serif;
  font-size: 1.6em;
  margin: 0;
  padding: 12px 8px;
  width: 100%;
}

fieldset.upit input.textx {
  width: 120px;
}

fieldset.upit input.textx + input.textx {
  margin-left: 2%;
}

/* Dva polja u jednom retku: ime + mail, telefon + drzava.
   Obrazac time ide sa 7 redaka na 5. Parovi su srodni (identitet, pa kontakt) —
   to je uvjet da visestupcani obrazac ne skodi: nesrodna polja u istom retku se
   preskacu jer oko ne zna kojim putem ide.

   min-width: 0 nije ukras. Flex stavka po defaultu ima min-width: auto, pa se
   ne moze suziti ispod svog sadrzaja — dugacka e-mail adresa bi rastegnula
   polje i prelila redak. Ista zamka kao `1fr` u gridu kalendara. */
/* Retci obrasca nemaju klasu cf. U flex spremniku ::before i ::after iz
   clearfixa postaju flex STAVKE, pa gap pada i izmedju njih i polja — razmak se
   pojavi i na rubovima retka, ne samo izmedju polja. Unutar fieldset.upit ionako
   nema nijednog floata, pa clearfix nista nije ni cistio. */
li.par {
  display: flex;
  gap: 4px;
}

li.par > input,
li.par > select {
  flex: 1;
  min-width: 0;
}

/* Red s brojem osoba i datumima.
   Flex, ne inline-block. Prije su #osoba i #datumi_holder bili inline-block s
   izracunatim sirinama (120px + 30px + calc(100% - 150px)), sto je imalo dva
   problema:

     1. Bjelina izmedju tagova u HTML-u daje razmak od oko 4px, pa je zbroj
        prelazio 100% i red se mogao prelomiti.
     2. #datumi_holder je div i poravnavao se po baseline, dok input iz reseta
        dobiva vertical-align: middle — pa su stajali na razlicitoj visini.

   Flex uklanja oboje: bjelina se ne racuna, a align-items: center poravnava. */
li.datumi-red {
  align-items: center;
  display: flex;
  gap: 8px;
}

/* flex: 0 0 auto, ne 0 0 120px — sirinu daje vec postojece pravilo
   `fieldset.upit input.textx { width: 120px }`. Da je broj i ovdje, stajao bi na
   dva mjesta i prva izmjena jednog razisla bi ih. */
li.datumi-red > input#osoba {
  flex: 0 0 auto;
}

/* flex: 1 -> holder uzme sve sto ostane nakon #osoba i razmaka.
   Bez calc(100% - 150px): ta bi brojka morala pratiti i sirinu #osoba i gap, pa
   bi svaka promjena jednog trazila rucni ispravak. */
#datumi_holder {
  cursor: pointer;
  display: flex;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

/* flex: 1 na oba polja -> (sirina holdera - gap) / 2, bez postotaka.
   Prije je stajalo width: 49%, sto je 98% + 2% razmaka — priblizna aritmetika
   koja je izgledala tocno. width: auto ponistava 120px iz .textx; flex-basis
   ionako ima prednost, ali izrijekom je jasnije. */
/* min-width: 0 na OBA mjesta — na spremniku i na poljima.
   Ista zamka opisana uz li.par: flex stavka ima min-width: auto, pa se ne moze
   suziti ispod svog sadrzaja. Kod <input> taj sadrzaj nije tekst nego atribut
   `size`, koji bez navodjenja iznosi 20 znakova — oko 190px na 16px. Dva takva
   polja plus 120px za broj osoba traze ~510px, a fieldset ima 90% sirine
   ekrana. Redovi se slazu u stupac tek ispod 500px, pa je izmedju 500 i ~570px
   redak prelijevao stranicu vodoravno. */
#datumi_holder input {
  flex: 1;
  min-width: 0;
  width: auto;
}

/* Polja datuma se ne tipkaju — puni ih kalendar. Zato pointer-events: none i
   tabindex -1 u markupu.

   Prije su prazna bila CRVENA (rub i tekst #f00), a siva tek kad se ispune.
   Crveno je boja greske, a gost tu gresku nije napravio — tek je otvorio
   stranicu. Uz to ta polja ne moze ni ispraviti izravno, jer se ne tipkaju.
   Sada izgledaju kao svako drugo polje; crveno je rezervirano za .error, kako
   to vec radi polje za provjeru zbroja. */
/* Mjerodavna usporedba su OSTALA POLJA, ne traka.
   Prije je ovdje stajalo #ebebeb, korak ispod trake #f5f5f5, uz obrazlozenje da
   polje mora izgledati povuceno u odnosu na podlogu. Ali uz njega stoje polja
   za ime, mail i telefon, sva #fff — na toj pozadini je #ebebeb ispadao tamna
   mrlja, a ne tise polje.
   #fafafa je tek stepenicu ispod ostalih polja: ista obitelj, malo prigusenije.

   Specificnost (0,3,1) je dovoljna da pregazi pravilo za input.textx, pa
   !important vise ne treba. */
fieldset.upit input.textx[data-readonly],
fieldset.upit input.text[data-readonly] {
  background: #fafafa;
}

input[data-readonly] {
  pointer-events: none;
}

input[data-readonly].error {
  border: 1px solid #f00 !important;
}

fieldset.upit input:read-only {
}

fieldset.upit input.nofocus {
  outline: none;
}

fieldset.upit input::-webkit-input-placeholder {
  /* Edge */
  color: #999;
}

fieldset.upit input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #999;
}

fieldset.upit ::placeholder {
  color: #999;
}

/* Gumb dijeli osnovno pravilo sa svim poljima (padding 10px, 1.6em), pa je bez
   ovoga izgledao kao jos jedno polje, samo crno. Ovdje dobiva vlastitu tezinu.

   Padding, a ne line-height: dio preglednika line-height na input[type=submit]
   ignorira, jer gumb sadrzaj ne slaze u linijske okvire kao obican tekst.
   Padding se postuje svugdje. */
input.submit {
  background: #000;
  border-color: #000;
  color: #fff;
  cursor: pointer;
  font-size: 1.8em;
  padding: 12px 8px;
  transition: background 0.2s;
}

input.submit:hover {
  background: #777;
}

#results {
  margin-bottom: 10px;
}

#results p {
  background: #f7f7f7;
  border: 1px solid #eee;
  margin: 0 auto;
  max-width: 760px;
  padding: 20px;
  text-align: center;
  width: 90%;
}

#results_inner {
  color: green;
  font-size: 1.8em;
  text-align: center;
  width: 100%;
}

#results_inner.error {
  color: red;
}

section.opis {
}

/* Recenzije: mreza, ne traka.
   `columns` umjesto grida jer su recenzije od 48 do 1087 znakova — u gridu bi
   se redovi poravnavali na najvisu karticu i kratke bi plivale u praznini.
   Ovako svaka zauzme tocno svoju visinu.

   `columns: 300px 2` = stupci siroki barem 300px, najvise dva. Broj se bira
   sam, pa nema media queryja.

   Dva, a ne tri: na 1140px tri stupca daju 367px, sto je na 15px teksta oko 49
   znakova u retku — donji rub podnosljivog za prozu (45-75). Dva daju 560px,
   oko 70 znakova uz uvecani tekst nize. Njemacke recenzije sa slozenicama su
   se na 367px lomile najgore. Stranica time nije bitno dulja: siri stupac
   znaci manje redaka po recenziji, pa razlika u visini ispadne ~12%, ne 50%. */
.recenzije-mreza {
  columns: 300px 2;
  gap: 44px;
  margin: 0 auto;
  max-width: 1140px;
  width: 90%;
}

/* Svijetli okvir oko svake recenzije. Prije je ovdje stajalo obrazlozenje zasto
   okvira NEMA — da osamnaest kutija ne djeluje tesko. Taj argument pada na dvije
   stvari: inicijalno se vidi samo sest, a #ebebeb je dovoljno svijetao da citas
   sadrzaj, ne rubove. U korist okvira ide to da su recenzije diskretni objekti,
   svaka od druge osobe; u dva stupca neujednacenih visina bez ruba nije uvijek
   jasno gdje jedna zavrsava.

   Padding usput popravlja i tipografiju: 548px stupac minus 48px paddinga daje
   498px teksta, oko 62 znaka u retku — sredina raspona 45-75.

   break-inside: recenzija se ne smije prelomiti preko dva stupca. */
.recenzije-mreza blockquote {
  border: 1px solid #ebebeb;
  break-inside: avoid;
  margin-bottom: 30px;
  padding: 22px 24px 18px;
}

/* 1.6em (16px), a ne 1.5: uz stupac od 560px 15px teksta daje ~75 znakova u
   retku, sto je gornja granica podnosljivog. 16px vraca na ~70. */
.recenzije-mreza p {
  font-size: 1.6em;
  line-height: 160%;
}

/* Potpis, u Latu — istom fontu kao naslovi sekcija — da se cita kao ime osobe,
   a ne kao sitni otisak ispod citata. Boja je #555, ista kao naslovi; #888 ga
   je gurao u istu tezinu kao napomene.

   Namjerno NIJE #1f72c4: to je boja linkova na ovoj stranici (a.link), pa bi
   osamnaest plavih imena izgledalo kao osamnaest linkova koji se ne daju
   kliknuti.

   Crta stoji ovdje, iznad potpisa, a ne na vrhu recenzije — odvaja citat od
   imena. background/color/padding se ponistavaju izrijekom jer globalno
   pravilo za podnozje stranice inace oboji svaki <footer> u crno. */
/* Bez font-size na samom podnozju: ime i datum nose svoje velicine izravno od
   body-jevih 10px (14px i 12px), umjesto da se mnoze kroz ovaj element. Prije
   je ovdje stajalo 1.3em, pa je datum na 0.92em ispadao 11.96px — broj koji
   nitko nije trazio. Podnozje nema vlastitog teksta izvan <cite> i <time>. */
.recenzije-mreza .potpis {
  background: none;
  border-top: 1px solid #e4e4e4;
  color: inherit;
  margin-top: 14px;
  padding: 10px 0 0;
  text-align: right;
}

.recenzije-mreza cite {
  color: #555;
  font-family: 'Lato', sans-serif;
  font-size: 1.4em;
  font-style: normal;
}

/* Datum u svom retku ispod imena, a ne uz njega — imena su razlicitih duljina
   pa bi u istom retku trebao separator, a ovako poravnanje udesno slozi i ime i
   datum uz isti rub.

   #707070 daje kontrast 4.8:1 na bijeloj. #8a8a8a bi bio ljepsi, ali na 12px
   pada ispod WCAG AA praga od 4.5:1. */
.recenzije-mreza .potpis time {
  color: #707070;
  display: block;
  font-size: 1.2em;
  margin-top: 4px;
}

.recenzije-mreza blockquote:focus {
  outline: none;
}

button.vise {
  background: none;
  border: 1px solid #ddd;
  color: #555;
  cursor: pointer;
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: 1.6em;
  font-weight: 300;
  margin: 10px auto 0;
  padding: 10px 24px;
  transition:
    border-color 0.2s,
    color 0.2s;
}

button.vise:hover {
  border-color: #1f72c4;
  color: #1f72c4;
}

section ul.udaljenosti {
  list-style: none;
  margin: 0 auto;
  max-width: 920px;
  width: 90%;
}

section ul.udaljenosti li {
  border-bottom: 1px solid #eee;
  display: block;
  float: left;
  font-size: 1.6em;
  line-height: 150%;
  margin: 0 10% 10px 0;
  width: 45%;
}

section ul.udaljenosti li:nth-child(2n) {
  margin-right: 0;
}

section ul.udaljenosti li:nth-last-of-type(-n + 2) {
  margin-bottom: 0;
}

section ul.udaljenosti span {
  float: right;
}

/* Kontakt: karta lijevo, podaci desno.

   Slagano jedno ispod drugog sekcija je bila visoka ~1230px — cijeli zaslon za
   jedan pin i pet kratkih podataka. Uz to je `#map` imao `max-width: 90%` bez
   granice u pikselima, pa je na 1920px karta bila siroka 1728px a tekst ispod
   nje 760px; jedini element na stranici koji nije postivao 1140px kao recenzije
   i cjenik.

   3fr/2fr, a ne pola-pola: na 1140px polovica je 560px, a karta je visoka 510 —
   ispao bi kvadrat. Zoom je 12, dakle regionalni pogled na Motovun, Groznjan i
   obalu, i tome treba sirina. Podaci su pet kratkih blokova i u 456px im je
   ugodno.

   Leaflet se inicijalizira na DOMContentLoaded, kad je grid vec izracunat, pa
   invalidateSize() ne treba. */
.kontakt-splet {
  align-items: center;
  display: grid;
  gap: 40px;
  grid-template-columns: 3fr 2fr;
  margin: 0 auto;
  max-width: 1140px;
  width: 90%;
}

#map {
  height: 510px;
  width: 100%;
}

/* Uz kartu podaci idu ulijevo: pet blokova jedan ispod drugog treba zajednicki
   lijevi rub da se cita kao popis. Centrirani svaki pluta za sebe. */
.kontakt-podaci p.text {
  max-width: none;
  text-align: left;
  width: 100%;
}

span.head {
  font-family: 'Lato', sans-serif;
  text-transform: uppercase;
}

/* body > footer, ne samo footer. Nekvalificirano pravilo je pogadjalo SVAKI
   <footer> na stranici — pa je i potpis u recenziji dobivao crnu pozadinu i
   bijeli tekst. Podnozje stranice je jedini footer koji je izravno dijete
   body-ja, pa ga to precizno odvaja. */
body > footer {
  background: #000;
  color: #fff;
  font-size: 1.6em;
  line-height: 160%;
  margin-top: 10px;
  padding: 30px 10px;
  text-align: center;
}

body > footer a {
  color: #fff;
  text-decoration: underline;
}

body > footer a:hover {
  text-decoration: none;
}

@media screen and (max-width: 1000px) {
  header {
    text-align: center;
  }

  header > a,
  header > div {
    position: static;
  }

  #headerInfo,
  #zastaveInfo {
    margin: 0 auto;
    position: static;
  }

  #headerInfo {
    display: inline-block;
  }

  #zastave {
    display: inline-block;
  }

  /* Ispod 1000px stupac s podacima postaje pretijesan, pa se karta i podaci
     vracaju jedno ispod drugog — i tekst se vraca na centrirano, kako stoji
     svugdje drugdje na stranici kad je sam u svojoj sirini. */
  .kontakt-splet {
    display: block;
  }

  .kontakt-podaci {
    margin-top: 40px;
  }

  .kontakt-podaci p.text {
    max-width: 760px;
    text-align: center;
    width: 90%;
  }
}

@media screen and (max-width: 700px) {
  /* Velicina ide na natuknicu, ne na omotac — omotac vise nema font-size (vidi
     komentar uz #features div.features). 1.4em = 14px, pa ikona (3em) ispadne
     42px. Na telefonu tri natuknice dijele ~340px, pa se duze ionako prelamaju
     u dva retka; 14px je odabran tako da prijelom bude na dva, a ne na tri. */
  #features div.features > div {
    font-size: 1.4em;
    padding: 0 10px;
  }

  section ul.udaljenosti li {
    margin-right: 0;
    width: 100%;
  }

  section ul.udaljenosti li:nth-child(2n) {
    margin-bottom: 10px;
  }
}

@media screen and (max-width: 500px) {
  p.napomena.uvjeti {
    flex-direction: column;
    gap: 6px;
  }

  p.napomena.uvjeti span + span {
    border-left: 0;
    padding-left: 0;
  }

  section {
    padding: 20px 0;
  }

  /* Razmaci: 40px medju sekcijama naspram 16px ispod naslova = 2.5:1. Prije je
     bilo 25px, dakle 1.6:1 — naslov je bio gotovo jednako daleko od svoje
     sekcije i od prethodne. Omjer se popravlja stiskanjem naslova, ne dodavanjem
     okomitog prostora: njega je na mobitelu najmanje.

     Velicina: 34px, ne 30. Cijena u cjeniku je 28px i nema mobilni override, pa
     su na telefonu naslov i cijena bili 7% razlike — dvije razlicite uloge iste
     velicine. Gore od toga, naslov je Lato 300 u #555 a cijena Lato 300 u #333,
     pa je svjetliji naslov djelovao i manje vazno od cijene ispod sebe.
     34:28 je 1.21, prva razlika koja se vidi. Isprobano je i 32px (1.14) — bolje
     od 30, ali jos uvijek se cita kao "slucajno malo vece", ne kao stepenica.

     Ne kosi se s odlomkom o razmacima gore: omjer 2.5:1 se racuna iz margina,
     kojih ova izmjena ne dira. Naslov je visi za 4px, i to je sav trosak. */
  section h2 {
    font-size: 3.4em;
    margin-bottom: 16px;
  }

  section#cjenik {
    padding: 40px 0;
  }

  section#rezervacija {
    padding: 28px 0;
  }

  /* Isti razlog kao na desktopu: susjedov padding je cijeli vidljivi razmak. */
  section#rezervacija + section {
    padding-top: 30px;
  }

  section:has(+ section#rezervacija) {
    padding-bottom: 30px;
  }

  /* 16px, ne 17. 1.7em je bila vrijednost izmedju stepenica; 16px je uz to i
     najcesca velicina glavnog teksta na mobitelu. Poravnanje ulijevo ostaje —
     centrirana proza na uskom ekranu daje razlomljen lijevi rub. */
  p.text {
    font-size: 1.6em;
    text-align: left;
  }

  p.text.c {
    text-align: center;
  }

  /* Bez font-size: otkad su napomene 14px i na desktopu, ovdasnjih 1.45em
     (14.5px) bi ih na mobitelu ucinilo VECIMA nego na desktopu. Ostaje samo
     poravnanje. 14px je i .pravilo u cjeniku, koji nema mobilni override — pa
     su uvjeti uz cijenu svugdje iste velicine. */
  p.text.napomena {
    text-align: center;
  }

  fieldset.upit input.textx {
    width: 100%;
  }

  fieldset.upit input.textx + input.textx {
    margin: 10px 0 0;
  }

  li.par,
  li.datumi-red {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  li.datumi-red > input#osoba {
    flex: 0 0 auto;
  }

  /* 14px, ne 14.5. Ista stepenica kao napomene i potpis recenzije. */
  .recenzije-mreza p,
  section ul.udaljenosti li {
    font-size: 1.4em;
  }

  /* Margina je sada na .kontakt-splet, ovdje ostaje samo visina. */
  #map {
    height: 400px;
  }
}

/* Honeypot. Izvan ekrana, ne display:none — dio botova preskace polja koja
   nisu prikazana. Ne smije se vidjeti, dohvatiti tabom ni procitati (aria-hidden
   i tabindex -1 su u markupu). */
.zamka {
  height: 0;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

/* Pristupacnost
----------------------------------
   Dodano 31.07.2026. uz reorganizaciju CSS-a. */

/* Labela koju citac ekrana cita, a ne zauzima prostor.
   Obrazac je prije imao samo placeholdere — a placeholder nije labela:
   nestane cim se pocne tipkati i citaci ga ne tretiraju kao naziv polja. */
.vizualno-skriveno {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Vidljiv fokus. Stranica je imala 16 :hover pravila i 2 :focus, pa se
   tipkovnicom nije vidjelo gdje si. :focus-visible se ne pali na klik misem,
   nego samo kod tipkovnice — pa ne mijenja dojam za vecinu posjetitelja. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #0a58ca;
  outline-offset: 2px;
}

/* Preglednici bez :focus-visible (Safari < 15.4) — bolje bilo kakav fokus
   nego nikakav. */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus {
    outline: 3px solid #0a58ca;
    outline-offset: 2px;
  }
}

/* input.nofocus izrijekom gasi outline na poljima datuma. Ta polja su
   pointer-events: none i tabindex -1, pa ih fokus ionako ne dohvaca. */

/* Smanjena animacija. Hero karusel i recenzije se sami vrte; za dio
   posjetitelja to nije samo neugodno nego izaziva mucninu. Autoplay karusela
   gasi skripta u index.php-u (matchMedia); ovdje se gase prijelazi i CSS
   animacije, koje CSS moze sam. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}