/* ============================================================================
   HEADER — stilovi nativnog headera (inc/header.php)
   Doslovno prenet CSS koji je UiCore Blocks generisao za Theme Builder šablon
   „heder" (post 298: uploads/uicore-blocks/uicore-298-{mobile,tablet,desktop}.css).
   Isti selektori (html .uicore-bl-298 .uicore-block-*) jer je i markup isti.
   Redosled: mobile → tablet → desktop.
   ⚠️ ISPRAVKA PRELOMA (2026-09-15): UiCore je tablet raspored (logo i ikonice u koloni) držao
   do 1024px, a style.css desktop meni prikazuje već od 997px — na 997–1023px važilo je oboje
   i header je bio visok 340px preko hero-a (isto i na live-u). Tablet je sada do 996px, desktop
   od 997px — isti prelom kao style.css (`section#heder nav.ivapix-drawer-menu`).
   Ostala pravila headera su i dalje u style.css (fixed pozicija, pill, meni, skrol stanja).
   ============================================================================ */

/* ── mobile: (max-width: 767px) ── */
@media (max-width: 767px) {
    html .uicore-bl-298 .uicore-block-gb18aamqqy{--ui-container-size:1240px;display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:center;justify-items:center;background-color:#fbfdfc;border-style:solid;border-width:1px;border-color:var(--uicore-white-color);border-radius:24px 24px 24px 24px}
    html .uicore-bl-298 .uicore-block-gb18aamqqy.uicore-is-active{border-style:solid}
    #heder{box-shadow:0 20px 30px #ce86670d}
    html .uicore-bl-298 .uicore-block-w3dsxb70rh img{width:185px}
    html .uicore-bl-298 .uicore-block-h5ulh6hkoh{display:inline-flex;flex-direction:row}
    html .uicore-bl-298 .uicore-block-ok3wp6ti99>*,html .uicore-bl-298 .uicore-block-u9f0u4944k>*{width:46px;height:auto}
    html .uicore-bl-298 .uicore-block-ok3wp6ti99>.uicore-is-active *,html .uicore-bl-298 .uicore-block-u9f0u4944k>.uicore-is-active *{height:auto}
}

/* ── tablet: (max-width: 996px) and (min-width: 768px) — UiCore je imao 1024px ── */
@media (max-width: 996px) and (min-width: 768px) {
    html .uicore-bl-298 .uicore-block-gb18aamqqy{--ui-container-size:1240px;display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:center;justify-items:center;background-color:#fbfdfc;border-style:solid;border-width:1px;border-color:var(--uicore-white-color);border-radius:24px 24px 24px 24px}
    html .uicore-bl-298 .uicore-block-gb18aamqqy.uicore-is-active{border-style:solid}
    html .uicore-bl-298 .uicore-block-gb18aamqqy:hover{background-color:#fbfdfc;border-style:solid}
    #heder{box-shadow:0 20px 30px #ce86670d}
    html .uicore-bl-298 .uicore-block-w3dsxb70rh img{width:185px}
    html .uicore-bl-298 .uicore-block-h5ulh6hkoh{display:inline-flex;flex-direction:column}
    html .uicore-bl-298 .uicore-block-ok3wp6ti99>*,html .uicore-bl-298 .uicore-block-u9f0u4944k>*{width:46px;height:auto}
    html .uicore-bl-298 .uicore-block-ok3wp6ti99>.uicore-is-active *,html .uicore-bl-298 .uicore-block-u9f0u4944k>.uicore-is-active *{height:auto}
}

/* ── desktop: (min-width: 997px) — UiCore je imao 1024px ── */
@media (min-width: 997px) {
    html .uicore-bl-298 .uicore-block-gb18aamqqy{--ui-container-size:1240px;display:flex;flex-direction:row;align-content:center;align-items:center;justify-content:center;justify-items:center;background-color:#fbfdfc;border-style:solid;border-width:1px;border-color:var(--uicore-white-color);border-radius:24px 24px 24px 24px;transition:background-color .3s ease,color .3s ease}
    html .uicore-bl-298 .uicore-block-gb18aamqqy.uicore-is-active{border-style:solid}
    html .uicore-bl-298 .uicore-block-gb18aamqqy:hover{background-color:#fbfdfc;border-style:solid}
    #heder{box-shadow:0 20px 30px #ce86670d}
    html .uicore-bl-298 .uicore-block-w3dsxb70rh img{width:185px}
    html .uicore-bl-298 .uicore-block-h5ulh6hkoh{display:inline-flex;flex-direction:row;--ui-bl-width-desktop:10%}
    html .uicore-bl-298 .uicore-block-ok3wp6ti99>*,html .uicore-bl-298 .uicore-block-u9f0u4944k>*{width:46px;height:auto}
    html .uicore-bl-298 .uicore-block-ok3wp6ti99>.uicore-is-active *,html .uicore-bl-298 .uicore-block-u9f0u4944k>.uicore-is-active *{height:auto}
}

/* ── bočni meni u skrolovanom stanju ──────────────────────────────────────────
   Bočni meni (#site-drawer) i njegov overlay su UNUTAR headera, a header ima
   `will-change: transform` (style.css) → njihov `position: fixed` je relativan na
   header, ne na ekran. style.css to poništava za header na vrhu stranice
   (.drawer top -40px na desktopu / 0 na ≤996, overlay -40px). header-scroll.js u
   skrolovanom stanju pomera header (desktop 40→20px, ≤996 10→20px), pa se meni
   pomeri isto toliko — ovde se vraća na isto mesto kao na vrhu stranice. */
#uicore-tb-header.header-scrolled .drawer,
#uicore-tb-header.header-scrolled .drawer-overlay { top: -20px; }
@media only screen and (max-width: 996px) {
    #uicore-tb-header.header-scrolled .drawer { top: -10px; }
    #uicore-tb-header.header-scrolled .drawer-overlay { top: -50px; }
}

/* ── 997–999px: razmak desktop menija ─────────────────────────────────────────
   style.css smanjuje razmak stavki menija na 20px tek od 1000px
   (`@media (min-width: 1000px) and (max-width: 1400px)`), a desktop raspored sada
   važi od 997px — na 997–999px meni se sa razmakom od 40px prelamao u dva reda
   (header 40–158px). Isto pravilo, prošireno na te tri širine. */
@media only screen and (min-width: 997px) and (max-width: 999.98px) {
    nav.ivapix-drawer-menu ul { gap: 20px; padding: 0; }
}