/* =====================================================
   Site Custom — custom.css
   Ovaj fajl se automatski učitava na svim stranicama.
   ===================================================== */

/* ── Širina i visina ─────────────────────────────── */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.wh-100 { width: 100% !important; height: 100% !important; }

/* ── Vidljivost po uređaju ───────────────────────── *
 *
 *  Breakpointi:
 *    mobile  → do 767px
 *    tablet  → 768px – 1024px
 *    desktop → 1025px i više
 *
 *  Klase:
 *    .hide-mobile   – sakrij na mobilnom
 *    .hide-tablet   – sakrij na tabletu
 *    .hide-desktop  – sakrij na desktopu
 *
 *    .show-mobile   – prikaži SAMO na mobilnom
 *    .show-tablet   – prikaži SAMO na tabletu
 *    .show-desktop  – prikaži SAMO na desktopu
 *
 * ─────────────────────────────────────────────────── */

/* Sakrij na mobilnom (do 767px) */
@media (max-width: 767px) {
	.hide-mobile { display: none !important; }
}

/* Sakrij na tabletu (768px – 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
	.hide-tablet { display: none !important; }
}

/* Sakrij na desktopu (1025px+) */
@media (min-width: 1025px) {
	.hide-desktop { display: none !important; }
}

/* Prikaži SAMO na mobilnom */
.show-mobile {
	display: none !important;
}
@media (max-width: 767px) {
	.show-mobile { display: revert !important; }
}

/* Prikaži SAMO na tabletu */
.show-tablet {
	display: none !important;
}
@media (min-width: 768px) and (max-width: 1024px) {
	.show-tablet { display: revert !important; }
}

/* Prikaži SAMO na desktopu */
.show-desktop {
	display: none !important;
}
@media (min-width: 1025px) {
	.show-desktop { display: revert !important; }
}

/* ── Prikaži posle 600px scrolla ─────────────────── */
.show-after-600 {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.show-after-600.is-visible {
	opacity: 1;
	visibility: visible;
}

/* ── Blur na navigaciji (dropdown / mega meni) ─────────────────────────
 *
 *  PROBLEM:
 *  Na .header-bg je postavljen `backdrop-filter: blur(...)`. Element sa
 *  backdrop-filter-om postaje "backdrop root" — sve unutar njega (cela
 *  navigacija i svi dropdown paneli) gubi pristup sadržaju IZA headera,
 *  pa njihov sopstveni backdrop-filter nema šta da zamuti. Zato se vidi
 *  bela boja sa transparencijom, ali bez blura. Dodatno, na samom
 *  submenu kontejneru je bio `isolation: isolate` (još jedan backdrop
 *  root) + zaostala/neispravna pravila (blur(px), crvena debug pozadina).
 *
 *  REŠENJE:
 *  1) Blur headera prebacujemo na ::before sloj, da .header-bg VIŠE NIJE
 *     backdrop root — onda dropdownovi mogu da zamute sadržaj iza.
 *  2) Dropdown / mega meni dobijaju pravi backdrop-filter direktno.
 * ──────────────────────────────────────────────────────────────────── */

/* 1) Header: frosted pozadina ide na ::before sloj (ne na sam element) */
.sticky-header .header-bg {
	position: relative;
	background-color: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
.sticky-header .header-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background-color: #e7e5e4ad;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	pointer-events: none;
}
.sticky-header .header-bg > * {
	position: relative;
	z-index: 1;
}

/* 2) Dropdown (običan WP submenu) — ista pozadina i blur kao header.
 *    Specifičnost (3 klase) mora da nadjača temino pravilo:
 *    `.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container`
 *    koje postavlja punu sivu #D6D3D1. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background: #e7e5e4ad !important;
	-webkit-backdrop-filter: blur(12px) !important;
	backdrop-filter: blur(12px) !important;
	isolation: auto !important;
	margin-top: 10px !important;
}
/* Stavke unutar dropdowna moraju biti providne da bi se video frosted sloj
   (tema im inače stavlja istu sivu #D6D3D1). */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
	background-color: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
/* poništi zaostali ::before "blur layer" trik (ostaje bez efekta) */
.wp-block-navigation__submenu-container::before {
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* 2b) Ollie mega meni — pozadina je na UNUTRAŠNJOJ .has-background grupi
 *     (inline `background-color:#d6d3d1`), ne na kontejneru. Inline stil se
 *     nadjačava samo sa !important. Sam kontejner ostaje providan. */
.wp-block-ollie-mega-menu__menu-container {
	background: transparent !important;
	isolation: auto !important;
}
.wp-block-ollie-mega-menu__menu-container > .wp-block-group > .wp-block-group.has-background {
	background-color: #e7e5e4ad !important;
	-webkit-backdrop-filter: blur(12px) !important;
	backdrop-filter: blur(12px) !important;
}
.wp-block-ollie-mega-menu__menu-container::before {
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* ------------------------------------------------------------------ *
 * Grid blok – responsivni broj kolona
 * Dodaj odgovarajuću klasu u "Additional CSS class(es)" na Grid bloku.
 *   mobile-1-column / mobile-2-columns   -> ekrani do 600px
 *   tablet-1-column / tablet-2-columns   -> ekrani 601px–781px
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {
	.wp-block-group.is-layout-grid.mobile-1-column,
	.is-layout-grid.mobile-1-column {
		grid-template-columns: 1fr !important;
	}
	.wp-block-group.is-layout-grid.mobile-2-columns,
	.is-layout-grid.mobile-2-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 601px) and (max-width: 781px) {
	.wp-block-group.is-layout-grid.tablet-1-column,
	.is-layout-grid.tablet-1-column {
		grid-template-columns: 1fr !important;
	}
	.wp-block-group.is-layout-grid.tablet-2-columns,
	.is-layout-grid.tablet-2-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}