/* ==========================================================
   RESPONSIVE FIX — ubaci ovaj <link> u <head> od index.php,
   NAKON bootstrap.min.css linka, da override-a stare stilove:

   <link rel="stylesheet" href="responsive-fixes.css">

   Fajl treba biti na istoj razini kao index.php (root sitea).
   ========================================================== */

/* Ne dozvoli nikakvom elementu da probije širinu ekrana */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Sve slike se fluidno skaliraju, osim malih ikona (thermometer,
   humidity itd. su namjerno fiksne 50x50 i to je OK na mobitelu) */
img:not([width="50"]):not([height="50"]):not([width="45"]):not([width="48"]) {
  max-width: 100%;
  height: auto;
}

/* Generalni fallback za iframeove koji nemaju poseban wrapper:
   barem ih spriječi da probiju širinu containera */
iframe {
  max-width: 100%;
}

/* .container već ima bootstrapov padding, ali na jako uskim
   ekranima (< 360px) smanji ga malo da ne guši sadržaj */
@media (max-width: 400px) {
  .container {
    padding-left: 8px;
    padding-right: 8px;
  }
  h1 { font-size: 1.4rem; }
  h4 { font-size: 1.1rem; }
  h5 { font-size: 1rem; }
}

/* col-lg-2 blokovi u rekord.php/mjesec.php/jucer.php: na tabletu
   (sm/md) neka stanu 2 u red umjesto da se svi slažu u jedan stupac */
@media (min-width: 576px) and (max-width: 991.98px) {
  .col-lg-2 { flex: 0 0 33.33%; max-width: 33.33%; }
}
@media (max-width: 575.98px) {
  .col-lg-2 { flex: 0 0 50%; max-width: 50%; }
}

/* karte.php: col-lg-4 i col-lg-3 blokovi neka na tabletu stanu 2 u red */
@media (min-width: 576px) and (max-width: 991.98px) {
  .col-lg-4, .col-lg-3 { flex: 0 0 50%; max-width: 50%; }
}

/* Responsive wrapper za iframeove — koristi se u prognoza.php i
   karte.php umjesto fiksnih width/height px vrijednosti.
   Održava omjer stranica (aspect-ratio) i skalira fluidno. */
.embed-responsive {
  position: relative;
  width: 100%;
  max-width: 805px;
  margin: 0 auto 20px;
  height: 0;
  overflow: hidden;
}
.embed-responsive iframe,
.embed-responsive .embed-inner-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}
/* omjer 805:516 (meteoblue widget) */
.embed-responsive--forecast { padding-top: 64.1%; }
/* omjer 805:250 (tidegraph) */
.embed-responsive--tide { padding-top: 31.1%; }
/* omjer 280:200 (windy/satelit/maps) */
.embed-responsive--square { padding-top: 71.4%; }

/* grafovi.php: SVG grafovi (temperatura/vlaga/UV/vjetar) su sad
   preko viewBox-a fluidni — samo im treba dopustiti skaliranje */
.wxgraph {
  width: 100%;
  height: auto;
  max-width: 400px;
  aspect-ratio: 400 / 250;
  display: block;
  margin: 0 auto 12px;
}

/* banner.php: SVG banner/widget, skalira do max izvorne veličine 180x150 */
.wxbanner {
  width: 100%;
  height: auto;
  max-width: 180px;
  display: block;
}

/* podatci.php: trenutni podaci + požarni indeks — na mobitelu centrirano
   umjesto uz lijevi rub */
@media (max-width: 767.98px) {
  .wx-center-mobile {
    text-align: center;
  }
  .wx-center-mobile dl,
  .wx-center-mobile img {
    margin-left: auto;
    margin-right: auto;
  }
  .wx-center-mobile dt,
  .wx-center-mobile dd {
    text-align: center;
  }
}

/* data.php: accordion "Povijest podataka" — native <details>/<summary>
   umjesto Bootstrap collapse JS-a (pouzdanije, radi bez ovisnosti o JS-u) */
.wx-accordion-item {
  background-color: #161618;
  border: 1px solid #333;
  margin-bottom: 4px;
  border-radius: 4px;
  overflow: hidden;
}
.wx-accordion-summary {
  cursor: pointer;
  padding: 10px 15px;
  color: rgba(255, 255, 255, 0.70);
  list-style: none;
  font-size: 1rem;
  background-color: #1c1c1e;
}
.wx-accordion-summary::-webkit-details-marker {
  display: none;
}
.wx-accordion-summary::before {
  content: '▸  ';
}
.wx-accordion-item[open] > .wx-accordion-summary::before {
  content: '▾  ';
}
.wx-accordion-body {
  padding: 10px 15px;
  background-color: #161618;
}

/* v3: opće .col-lg-2 pravilo NE smije stisnuti stupac s trenutnim podacima */
@media (max-width: 991.98px) {
  .col-lg-2.wx-center-mobile { flex: 0 0 100%; max-width: 100%; text-align: center; }
}