/**
 * Korte — navbar scroll efekat.
 * Navbar je na vrhu providan (preko hero slike), a pri skrolu dobija boju
 * i tekst postaje taman. Sve ostalo se stilizuje kroz Elementor.
 *
 * Boje ovde menjaš samo za "skrolovano" stanje navbara:
 *   pozadina: #eceae5, tekst: #2a2620
 */

.korte-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: transparent !important;
	border-bottom: 1px solid transparent;
	transition: background-color 0.35s ease, border-color 0.35s ease;
}

body.korte-scrolled .korte-header {
	background-color: #eceae5 !important;
	border-bottom-color: #d3d0c9;
}

/* Tekst navigacije: svetao na vrhu (podešava se u Elementoru), crn pri skrolu */
.korte-header .elementor-icon-list-text {
	transition: color 0.35s ease;
}

body.korte-scrolled .korte-header .elementor-icon-list-text {
	color: #2a2620 !important;
}

/* ---------- Tablet (768–1024px): raspored sekcija ----------
   Elementor za tablet nema podešavanja, pa se desktop raspored sa
   fiksnim px širinama samo sabija. Ovde se sekcije preslažu. */

@media (min-width: 768px) and (max-width: 1024px) {
	/* Kolaž "Izaberi svoju scenu": kolona sa fotkama i kolona sa
	   listom idu jedna ispod druge, pune širine */
	.elementor-20325 .elementor-element.elementor-element-4822402,
	.elementor-20325 .elementor-element.elementor-element-7f1f62b {
		--width: 100%;
	}

	/* Fotke u kolažu: po dve u redu, jednake širine (gap je 14px) */
	.elementor-20325 .elementor-element.elementor-element-acf6bed,
	.elementor-20325 .elementor-element.elementor-element-b873b33,
	.elementor-20325 .elementor-element.elementor-element-0ad4315,
	.elementor-20325 .elementor-element.elementor-element-bc88787 {
		--width: calc(50% - 7px);
	}

	/* "Iz Korte produkcije": 3 fotke po redu umesto 6 (koje se na
	   tabletu lome u 5+1), ujednačena visina */
	.elementor-20325 .elementor-element.elementor-element-9c803f7,
	.elementor-20325 .elementor-element.elementor-element-9dd718a,
	.elementor-20325 .elementor-element.elementor-element-0a312f8,
	.elementor-20325 .elementor-element.elementor-element-053dddd,
	.elementor-20325 .elementor-element.elementor-element-4d30b67,
	.elementor-20325 .elementor-element.elementor-element-b609299 {
		--width: calc(33.33% - 11px);
	}

	.elementor-20325 .elementor-element.elementor-element-e228850 .elementor-widget-image img {
		height: 240px;
	}
}

/* ---------- Hamburger meni (tablet i telefon, <= 1024px) ----------
   Elementor sakriva icon-list navigaciju na tabletu i telefonu
   (elementor-hidden-tablet / elementor-hidden-phone), pa burger
   mora da pokrije ceo opseg do 1024px. */

.korte-burger,
.korte-mobile-panel {
	display: none;
}

@media (max-width: 1024px) {
	.korte-burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 40px;
		height: 38px;
		margin-left: 12px;
		background: transparent;
		border: 0;
		padding: 4px;
		cursor: pointer;
		flex-shrink: 0;
	}

	.korte-burger span {
		display: block;
		height: 2px;
		width: 26px;
		border-radius: 2px;
		background: #eceae5; /* svetle crte preko hero slike */
		transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.35s ease;
	}

	body.korte-scrolled .korte-header .korte-burger span,
	body.korte-menu-open .korte-header .korte-burger span {
		background: #2a2620;
	}

	body.korte-menu-open .korte-burger span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	body.korte-menu-open .korte-burger span:nth-child(2) {
		opacity: 0;
	}

	body.korte-menu-open .korte-burger span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Otvoren meni: header dobija pozadinu i kad nije skrolovan */
	body.korte-menu-open .korte-header {
		background-color: #eceae5 !important;
		border-bottom-color: #d3d0c9;
	}

	.korte-mobile-panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #eceae5;
		border-bottom: 1px solid #d3d0c9;
		padding: 6px 24px 14px;
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	}

	body.korte-menu-open .korte-mobile-panel {
		display: block;
	}

	.korte-mobile-panel ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: block !important;
	}

	.korte-mobile-panel li {
		display: block !important;
		margin: 0 !important;
		padding: 13px 0 !important;
		border-bottom: 1px solid #d3d0c9;
	}

	.korte-mobile-panel li:last-child {
		border-bottom: 0;
	}

	.korte-mobile-panel a {
		text-decoration: none;
	}

	.korte-mobile-panel .elementor-icon-list-text,
	.korte-mobile-panel a {
		color: #2a2620 !important;
		font-family: Archivo, sans-serif;
		font-size: 16px;
		font-weight: 500;
	}
}