/* Rucne dopune uz Webflow eksport.
   apartman-brzece.css je Webflow generisao - u njega se ne dira.
   Sve sto pisemo sami ide ovde, i ucitava se posle njega. */

/* --- Kontakt: telefon i mejl su sada linkovi, ne obican tekst --- */

a.text-block,
a.text-block-3 {
  color: #1a6e81;
  padding: 12px 6px;
  text-decoration: none;
  display: inline-block;
}

a.text-block:hover,
a.text-block-3:hover {
  text-decoration: underline;
}

/* Broj je razmaknut zbog citljivosti (+381 62 555 172), a u href stoji spojen.
   nowrap da se ne prelomi u dva reda na uskom ekranu. */

a.text-block-3 {
  white-space: nowrap;
  font-size: 25px;
}

/* --- Google mapa u futeru ---
   Ovo je pravilo koje je nekad zalutalo u atribute <iframe> taga. */

.mapa,
.html-embed-2 {
  width: 100%;
}

.google-map {
  width: 100%;
  padding-bottom: 50%;
  position: relative;
}

.google-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
}

/* --- Dugme "Navigacija do apartmana" ispod mape ---
   width: fit-content jer se inace na mobilnom razvuce preko cele sirine ekrana,
   ivice mu padnu na same rubove i vise ne izgleda kao dugme nego kao dve crte. */

.mapa-navigacija {
  color: #1a6e81;
  text-align: center;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid #1a6e81;
  border-radius: 4px;
  width: fit-content;
  margin: 12px auto 0;
  padding: 8px 16px;
  text-decoration: none;
  display: flex;
}

.mapa-navigacija:hover {
  color: #fff;
  background-color: #1a6e81;
}

/* --- Futer ispod mape: dugme + tri reda teksta ---
   Merilo je red "STAR Apartman Brzece Kopaonik" (.ime-foother), koji ide
   20 px / 16 px do 991 px / 13 px do 479 px.

   Adresa (.text-block-7) je imala svojih fiksnih 17 px na svim sirinama, pa je
   na desktopu ispadala manja od ostatka a na mobilnom veca. Sada prati merilo.
   Dugme "Navigacija do apartmana" isto. */

.mapa-navigacija,
.ime-foother.text-block-7 {
  font-family: Playfair Display, sans-serif;
  font-size: 20px;
}

@media screen and (max-width: 991px) {
  .mapa-navigacija,
  .ime-foother.text-block-7 {
    font-size: 16px;
  }

  /* Isti problem kao ispod 479 px, samo sa drugim brojevima: .ime-foother ima
     margin-top 35 px, adresa svojih 17 px. Razmak do adrese je zato upola manji
     od ostalih. Svi na 6 px, sto uz padding-bottom 10 px daje 16 px belog
     prostora izmedju redova od 16 px - isti odnos kao na desktopu. */
  .ime-foother,
  .ime-foother.text-block-7 {
    margin-top: 6px;
  }

  .mapa-navigacija {
    margin-bottom: 16px;
  }
}

@media screen and (max-width: 479px) {
  .mapa-navigacija,
  .ime-foother.text-block-7 {
    font-size: 13px;
  }

  /* Da prvi red teksta ne bude zalepljen za dugme, posto je razmak
     izmedju redova nize smanjen na 3 px. */
  .mapa-navigacija {
    margin-bottom: 14px;
  }

  /* .ime-foother ima margin-top 20 px uz padding-bottom 10 px, sto je 30 px
     razmaka izmedju redova od 13 px - izgleda kao prazan red. Adresa je vec
     imala svojih 3 px, pa je razmak do nje bio 13 px. Sad su svi 13 px.
     Adresa mora biti navedena i ovde: pravilo iz bloka za 991 px je sa dve
     klase specificnije od golog .ime-foother, pa bi inace gazilo ovo. */
  .ime-foother,
  .ime-foother.text-block-7 {
    margin-top: 3px;
  }
}

/* .mail-div ima fiksnu visinu 52 px ispod 479 px, a sadrzaj mu je 84 px.
   Flex je zato sabijao telefon (49 px prirodne visine na 36 px) i broj je
   nalegao na ivicu futera. Visina neka prati sadrzaj. */

@media screen and (max-width: 479px) {
  .mail-div {
    height: auto;
    min-height: 52px;
  }
}

/* ==================================================================
   TAP-ZONE: najmanje 44 px na dodirnim ekranima
   ------------------------------------------------------------------
   Merenje je pokazalo klikabilne elemente od 14 do 31 px. Preporuka je
   44 px (Apple) odnosno 48 dp (Google) - ispod toga se masi prstom.

   Webflow je svakom elementu ukucao fiksnu visinu u px, pa kutije ne
   mogu da narastu. Sve je box-sizing: border-box, gde min-height
   nadjacava height, pa je dovoljan min-height na samom linku - ali
   kontejneri iznad njega moraju da dobiju height: auto.

   Uz svaki height: auto ide min-height sa zatecenom vrednoscu, da se
   nijedna kutija ne moze smanjiti - samo narasti.

   Sve je unutar 991 px. Desktop se ne dira.
   ================================================================== */

@media screen and (max-width: 991px) {
  .navbar {
    height: auto;
    min-height: 300px;
  }

  /* .apart-drop.apart-foother ima svoju visinu sa dve klase, pa mu
     golo .apart-drop { height: auto } ne moze nista. */
  .apart-drop.apart-foother {
    height: auto;
  }

  .nav-menu {
    height: auto;
    min-height: 50px;
  }

  .apartm-list {
    height: auto;
    min-height: 91px;
  }

  /* Elementi koji se dodiruju */
  .navbar .nav-link,
  .navbar .dropdown-toggle,
  .foother .kontakt-foother,
  .foother .dropdown-toggle,
  .w-dropdown-link,
  .social-media-block a {
    min-height: 44px;
  }

  /* Ovi nisu flex, pa bi im tekst posle rasta kutije otisao na vrh */
  .foother .kontakt-foother,
  .w-dropdown-link,
  .social-media-block a {
    align-items: center;
    display: flex;
  }

  .foother .kontakt-foother,
  .social-media-block a {
    justify-content: center;
  }
}

@media screen and (max-width: 767px) {
  .navbar {
    min-height: 152px;
  }

  .navbar-container {
    height: auto;
    min-height: 107px;
  }

  .nav-menu {
    min-height: 112px;
  }

  .apart-drop {
    height: auto;
    min-height: 30px;
  }

  .apartm-list.w--open {
    height: auto;
    min-height: 89px;
  }

  .kolona-foother {
    height: auto;
    min-height: 600px;
  }
}

@media screen and (max-width: 479px) {
  .navbar {
    min-height: 150px;
  }

  .nav-menu {
    min-height: 126px;
  }

  .proba {
    height: auto;
    min-height: 119px;
  }

  .apart-drop {
    min-height: 20px;
  }

  .apartm-list.w--open {
    min-height: 74px;
  }

  .kolona-mreze {
    height: auto;
    min-height: 50px;
  }

  .social-media-block {
    height: auto;
    min-height: 50px;
  }
}

/* Dugme "Pogledajte vise" - inline-flex, ne flex, da se ne razvuce
   preko cele sirine. */

@media screen and (max-width: 991px) {
  .button-3 {
    align-items: center;
    justify-content: center;
    min-height: 44px;
    display: inline-flex;
  }
}

/* Navigacija je porasla zbog tap-zona, a .navbar je position: absolute
   preko hero-a. Na telefonu je "Kontakt" ulazio tacno u hero naslov -
   oba su bila na 133-177 px. Naslov zato ide nize. */

@media screen and (max-width: 479px) {
  .div-block.hero-naslov {
    margin-top: 190px;
  }
}

/* Navigacija je porasla i na unutrasnjim stranicama, a .navbar je
   position: absolute sa z-index 99 - lezi preko sadrzaja. Webflow je
   pocetak prve sekcije rucno namestio da tacno promasi navbar od 150 px,
   pa sad fali prostora.

   Izmereno na 375 i 600 px: kopaonik je ulazio u navigaciju (naslov
   "Kopaonik" i link "Kontakt" delili su 159-169 px), brzece je bio cist
   ali sa samo 11 px zazora. Onama ima 41 px i ne dira se. */

@media screen and (max-width: 767px) {
  .kop-section {
    padding-top: 45px;
  }

  .brzece-sec {
    padding-top: 20px;
  }
}