/* Navigacija (inc/asuma-nav.php, assets/js/asuma-nav.js). Desktop: tiha kartica podmenija. Do 1200px: vlastiti meni preko cijelog ekrana.
   Prijelom 1200 je Salient Theme Options, Header Navigation, header-menu-mobile-breakpoint; mijenja se zajedno s njim. */

/* ---------- Desktop podmeni: tiha kartica ---------- */

@media (min-width: 1201px) {

	/* Zatvoren podmeni je visibility hidden, pa njegovi linkovi ne primaju fokus (Salient ga samo pomjeri za -9999px). */
	html body #header-outer #top nav > ul.sf-menu > li > ul.sub-menu {
		width: auto;
		min-width: 200px;
		margin-left: calc(-1 * var(--space-1) - 1px);
		padding: var(--space-1);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background-color: var(--color-bg);
		box-shadow: 0 12px 32px rgba(0, 39, 33, 0.08);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 200ms var(--ease-in), transform 200ms var(--ease-in), visibility 0s linear 200ms;
	}

	html body #header-outer #top nav > ul.sf-menu > li.sfHover > ul.sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), visibility 0s;
	}

	html body #header-outer #top nav > ul.sf-menu > li > ul.sub-menu > li {
		opacity: 1;
		transform: none;
		transition: none;
	}

	html body #header-outer #top nav > ul.sf-menu > li > ul.sub-menu > li > a {
		display: block;
		padding: 10px var(--space-2);
		border-radius: var(--radius-sm);
		color: var(--color-text);
		font-size: var(--fs-body);
		line-height: var(--lh-body);
		white-space: nowrap;
		transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
	}

	/* Salient Theme Options (dropdown hover) zaključa primary pozadinu s !important, pa je tekst iste boje nestajao. */
	html body #header-outer #top nav > ul.sf-menu > li > ul.sub-menu > li > a:hover,
	html body #header-outer #top nav > ul.sf-menu > li > ul.sub-menu > li.current-menu-item > a {
		background-color: var(--color-surface) !important;
		color: var(--color-primary);
	}

	html body #header-outer #top nav > ul.sf-menu > li > ul.sub-menu > li > a:active {
		transform: scale(0.98);
	}

	html body #header-outer #top nav > ul.sf-menu > li > a .sf-sub-indicator i {
		display: inline-block;
		transition: transform 250ms var(--ease-out);
	}

	html body #header-outer #top nav > ul.sf-menu > li.sfHover > a .sf-sub-indicator i {
		transform: rotate(180deg);
	}
}

/* ---------- Mobilni meni preko cijelog ekrana ---------- */

/* Salientov hamburger i meni se ne koriste. Salient hamburgeru između 1000 i 1200px zaključa display s !important. */
html body #header-outer #mobile-menu,
html body #header-outer #top .span_9 > .slide-out-widget-area-toggle.mobile-icon {
	display: none !important;
}

/* Dugme: dvije linije, u X se okreću oko istog centra. Vidljivo 22px, touch target 44px. */
.asuma-mmeni-dugme {
	position: relative;
	display: none;
	align-self: center;
	width: 44px;
	height: 44px;
	margin: 0 -11px 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text);
	cursor: pointer;
}

.asuma-mmeni-dugme:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -4px;
	border-radius: var(--radius-sm);
}

.asuma-mmeni-dugme__linija {
	position: absolute;
	top: 50%;
	left: 11px;
	width: 22px;
	height: 1.5px;
	margin-top: -0.75px;
	border-radius: 1px;
	background-color: currentColor;
	transition: transform 250ms var(--ease-out);
}

.asuma-mmeni-dugme__linija:first-child {
	transform: translateY(-4px);
}

.asuma-mmeni-dugme__linija:last-child {
	transform: translateY(4px);
}

html.asuma-mmeni-otvoren .asuma-mmeni-dugme__linija:first-child {
	transform: rotate(45deg);
}

html.asuma-mmeni-otvoren .asuma-mmeni-dugme__linija:last-child {
	transform: rotate(-45deg);
}

/* Panel ispod headera */
.asuma-mmeni {
	position: fixed;
	inset: var(--asuma-header-dno, 64px) 0 0 0;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--space-1) var(--asuma-header-rub, var(--space-2)) calc(var(--space-3) + env(safe-area-inset-bottom));
	background-color: var(--color-bg);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms var(--ease-in), visibility 0s linear 250ms;
}

html.asuma-mmeni-otvoren {
	overflow: hidden;
}

html.asuma-mmeni-otvoren .asuma-mmeni {
	opacity: 1;
	visibility: visible;
	transition: opacity 300ms var(--ease-out), visibility 0s;
}

/* AI dugme ne pluta preko otvorenog menija */
html.asuma-mmeni-otvoren .aichat-widget--floating[data-aichat-root] {
	opacity: 0;
	visibility: hidden;
}

.asuma-mmeni__nav:focus {
	outline: none;
}

.asuma-mmeni__linkovi,
.asuma-mmeni__pod {
	margin: 0;
	padding: 0;
	list-style: none;
}

.asuma-mmeni .asuma-mmeni__linkovi li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.asuma-mmeni__stavka {
	border-bottom: 1px solid var(--color-border);
}

.asuma-mmeni__red {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1);
}

/* Porodica i težina iz Salientove H3 tipografije (data-inherit-heading-family), ovdje samo veličina. */
.asuma-mmeni .asuma-mmeni__link {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-2) 0;
	border: 0;
	background: none;
	color: var(--color-text);
	font-size: var(--fs-h3, 24px);
	line-height: 1.25;
	letter-spacing: 0;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: color 150ms var(--ease-out);
}

.asuma-mmeni .asuma-mmeni__link:hover,
.asuma-mmeni .asuma-mmeni__link:active {
	color: var(--color-primary);
}

.asuma-mmeni__link:focus-visible,
.asuma-mmeni__otvori:focus-visible,
.asuma-mmeni__podlink:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

/* Podstavke (harmonika) */
.asuma-mmeni__otvori--ikona {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text-muted);
	cursor: pointer;
}

.asuma-mmeni__strelica {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin: 0 var(--space-1);
	border-right: 1.5px solid var(--color-text-muted);
	border-bottom: 1.5px solid var(--color-text-muted);
	transform: translateY(-3px) rotate(45deg);
	transition: transform 250ms var(--ease-out);
}

.asuma-mmeni__stavka.is-otvorena .asuma-mmeni__strelica {
	transform: translateY(2px) rotate(-135deg);
}

.asuma-mmeni__pod {
	overflow: hidden;
	transition: height 250ms var(--ease-out);
}

.asuma-mmeni .asuma-mmeni__pod li:last-child {
	padding-bottom: var(--space-2);
}

.asuma-mmeni .asuma-mmeni__podlink {
	display: block;
	padding: 10px 0 10px var(--space-2);
	border-left: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	text-decoration: none;
	transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}

.asuma-mmeni .asuma-mmeni__podlink:hover,
.asuma-mmeni .asuma-mmeni__podlink:active {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Dno: ASUMA Primary preko cijele širine */
.asuma-mmeni__dno {
	padding-top: var(--space-4);
}

.asuma-mmeni__dno .asuma-button {
	width: 100%;
}

.asuma-mmeni__dno .asuma-button__link {
	width: 100%;
}

/* Ulaz: stavke pa dugme, stagger 80ms */
.asuma-mmeni__stavka,
.asuma-mmeni__dno {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}

html.asuma-mmeni-otvoren .asuma-mmeni__stavka,
html.asuma-mmeni-otvoren .asuma-mmeni__dno {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 0) * 80ms + 60ms);
}

@media (max-width: 1200px) {

	.asuma-mmeni-dugme {
		display: block;
	}
}

@media (min-width: 1201px) {

	.asuma-mmeni {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	html body #header-outer #top nav > ul.sf-menu > li > ul.sub-menu,
	html body #header-outer #top nav > ul.sf-menu > li.sfHover > ul.sub-menu {
		transform: none;
		transition: none;
	}

	html body #header-outer #top nav > ul.sf-menu > li > a .sf-sub-indicator i,
	.asuma-mmeni-dugme__linija,
	.asuma-mmeni,
	html.asuma-mmeni-otvoren .asuma-mmeni,
	.asuma-mmeni__strelica,
	.asuma-mmeni__pod,
	.asuma-mmeni__stavka,
	.asuma-mmeni__dno,
	html.asuma-mmeni-otvoren .asuma-mmeni__stavka,
	html.asuma-mmeni-otvoren .asuma-mmeni__dno {
		transition: none;
	}

	.asuma-mmeni__stavka,
	.asuma-mmeni__dno {
		transform: none;
	}
}