/*
 * Despot Militari: header (gornja traka, sticky glavna traka, mobilna fioka).
 * Sadržaj: 1 tokeni, 2 gornja traka, 3 glavna traka, 4 meni, 5 akcije,
 * 6 pretraga, 7 fioka, 8 pristupačnost.
 * Učitava se posle main.css; dugmad imaju prefiks "button." jer main.css
 * stilizuje goli `button` i `button:focus` (zlatna ispuna).
 */

/* ==========================================================================
   1. Tokeni
   Visina glavne trake je jedina istina: hero.css rezerviše prostor preko nje.
   ========================================================================== */
:root {
	--dm-header-h: 72px;
	--dm-topbar-h: 32px;
	--dm-header-bg: color-mix(in srgb, var(--dm-bg-dark) 82%, transparent);
	--dm-header-panel-bg: color-mix(in srgb, var(--dm-surface-dark) 94%, transparent);
	--dm-header-dur: 180ms;
}

@media (max-width: 921px) {
	:root { --dm-header-h: 60px; }
}

/* ==========================================================================
   2. Gornja traka (ne lepi se, odlazi sa skrolom)
   ========================================================================== */
.dm-topbar {
	background: var(--dm-bg-dark);
	color: color-mix(in srgb, var(--dm-text-on-dark) 62%, var(--dm-bg-dark));
	font-family: var(--dm-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
}

.dm-topbar__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dm-space-4);
	max-width: 1240px;
	height: var(--dm-topbar-h);
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 40px);
}

.dm-topbar__note {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0;
	white-space: nowrap;
}

.dm-topbar__tel {
	color: var(--dm-text-on-dark);
	text-decoration: none;
	white-space: nowrap;
}

@media (hover: hover) {
	.dm-topbar__tel:hover { color: var(--dm-gold-hover); }
}

@media (max-width: 921px) {
	/* Jedan red: samo pouzeće i telefon. */
	.dm-topbar__dot,
	.dm-topbar__ship { display: none; }
}

/* ==========================================================================
   3. Glavna traka
   Poluprovidan materijal: blur + zasićenje, bez tvrde linije ispod.
   Na početnoj je providna dok je hero na vrhu, pa postaje materijal posle skrola.
   ========================================================================== */
.dm-header {
	position: sticky;
	top: 0;
	z-index: 100;
	color: var(--dm-text-on-dark);
	background-color: var(--dm-header-bg);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	box-shadow: 0 1px 0 rgba(237, 235, 227, 0.06), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
	transition:
		background-color var(--dm-header-dur) ease-out,
		box-shadow var(--dm-header-dur) ease-out,
		backdrop-filter var(--dm-header-dur) ease-out,
		-webkit-backdrop-filter var(--dm-header-dur) ease-out;
}

/* Na početnoj traka lebdi nad hero-om: sledeći blok ulazi ispod nje. */
.dm-header.is-overlay {
	margin-bottom: calc(var(--dm-header-h) * -1);
}

.dm-header.is-overlay:not(.is-scrolled) {
	background-color: transparent;
	-webkit-backdrop-filter: blur(0) saturate(1);
	backdrop-filter: blur(0) saturate(1);
	box-shadow: 0 1px 0 transparent, 0 10px 28px -14px transparent;
}

.admin-bar .dm-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .dm-header { top: 46px; }
}

/* Ispod 600px WordPress traka nije fiksirana nego odskroluje sa stranicom,
   pa header mora da se zalepi za sam vrh. Inače iznad njega ostaje praznina. */
@media (max-width: 600px) {
	.admin-bar .dm-header { top: 0; }
}

.dm-header__bar {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--dm-space-4);
	max-width: 1240px;
	height: var(--dm-header-h);
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 40px);
}

.dm-header__logo {
	display: flex;
	align-items: center;
	flex: none;
	color: var(--dm-text-on-dark);
	text-decoration: none;
}

/* Logo je JPG sa belim motivom na crnoj pozadini, dok ne stigne providan PNG.
   `screen` skriva crnu na tamnoj traci, ali je sticky traka izolovana grupa
   (providna ili poluprovidna pozadina), pa sam `screen` ostavlja crn okvir.
   Zato filter #dm-logo-key (header.php) prvo pretvara svetlinu u providnost. */
.dm-header__logo-img {
	display: block;
	width: auto;
	height: 36px;
	max-width: none;
	mix-blend-mode: screen;
	filter: url("#dm-logo-key");
}

.dm-header__logo-text {
	font-family: var(--dm-font-display);
	font-weight: 700;
	font-size: 1.375rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

@media (min-width: 922px) {
	.dm-header__logo-img { height: 44px; }
}

/* ==========================================================================
   4. Navigacija (desktop)
   ========================================================================== */
.dm-nav { display: none; }

@media (min-width: 922px) {
	.dm-nav {
		display: block;
		margin-left: var(--dm-space-5);
	}
}

.dm-nav__list,
.dm-nav__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dm-nav__list { display: flex; align-items: stretch; height: var(--dm-header-h); }

.dm-nav__item {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}

.dm-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--dm-space-3);
	color: var(--dm-text-on-dark);
	font-family: var(--dm-font-display);
	font-weight: 700;
	font-size: 1.1875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Tanka zlatna crta za aktivnu stavku, bez pomeranja rasporeda. */
.dm-nav__link::after {
	content: "";
	position: absolute;
	left: var(--dm-space-3);
	right: var(--dm-space-3);
	bottom: 6px;
	height: 2px;
	background: var(--dm-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dm-header-dur) var(--dm-ease);
}

.dm-nav__item.is-current > .dm-nav__link { color: var(--dm-gold-hover); }
.dm-nav__item.is-current > .dm-nav__link::after { transform: scaleX(1); }

@media (hover: hover) {
	.dm-nav__link:hover { color: var(--dm-gold-hover); }
	.dm-nav__link:hover::after { transform: scaleX(1); }
}

/* Dugme za podmeni, odmah uz link (tastatura i dodir). */
button.dm-nav__toggle,
button.dm-nav__toggle:hover,
button.dm-nav__toggle:focus {
	display: grid;
	place-items: center;
	width: 28px;
	min-height: 44px;
	margin: 0 0 0 -10px;
	padding: 0;
	color: var(--dm-text-on-dark);
	background: transparent;
	border: 0;
	border-radius: var(--dm-radius-sm);
}

.dm-nav__toggle .dm-icon {
	width: 16px;
	height: 16px;
	transition: transform var(--dm-header-dur) var(--dm-ease);
}

.dm-nav__toggle[aria-expanded="true"] .dm-icon { transform: rotate(180deg); }

@media (hover: hover) {
	button.dm-nav__toggle:hover { color: var(--dm-gold-hover); }
}

/* Podmeni izlazi iz roditelja (origin gore levo) i zatvara se istim putem. */
@media (min-width: 922px) {
	.dm-nav__sub {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		padding: var(--dm-space-2) 0;
		background: var(--dm-header-panel-bg);
		-webkit-backdrop-filter: blur(16px) saturate(1.4);
		backdrop-filter: blur(16px) saturate(1.4);
		border-radius: 0 0 var(--dm-radius-lg) var(--dm-radius-lg);
		box-shadow: 0 18px 32px -16px rgba(0, 0, 0, 0.7);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px) scale(0.98);
		transform-origin: top left;
		transition:
			opacity var(--dm-header-dur) var(--dm-ease),
			transform var(--dm-header-dur) var(--dm-ease),
			visibility 0s linear var(--dm-header-dur);
	}

	.dm-nav__item.is-open > .dm-nav__sub {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.dm-nav__sub .dm-nav__link {
		min-height: 44px;
		padding: 0 var(--dm-space-5);
		font-size: 1.0625rem;
	}

	.dm-nav__sub .dm-nav__link::after { display: none; }
	.dm-nav__sub .dm-nav__item.is-current > .dm-nav__link { color: var(--dm-gold-hover); }
}

/* ==========================================================================
   5. Akcije (pretraga, nalog, korpa, hamburger)
   ========================================================================== */
.dm-header__actions {
	display: flex;
	align-items: center;
	gap: var(--dm-space-1);
	margin-left: auto;
}

button.dm-header__action,
button.dm-header__action:hover,
button.dm-header__action:focus,
a.dm-header__action {
	position: relative;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	color: var(--dm-text-on-dark);
	background: transparent;
	border: 0;
	border-radius: var(--dm-radius);
	text-decoration: none;
	cursor: pointer;
	transition:
		color var(--dm-dur-color) var(--dm-ease),
		transform var(--dm-dur-press) ease-out;
}

.dm-icon {
	display: block;
	width: 24px;
	height: 24px;
}

/* Trenutan odziv na pritisak. */
button.dm-header__action:active,
a.dm-header__action:active,
button.dm-nav__toggle:active {
	transform: scale(0.96);
}

@media (hover: hover) {
	button.dm-header__action:hover,
	a.dm-header__action:hover { color: var(--dm-gold-hover); }
}

button.dm-header__search-toggle[aria-expanded="true"] { color: var(--dm-gold-hover); }

/* Hamburger samo ispod Astra preloma (922px), na desktopu nalog stoji u traci. */
button.dm-header__burger { display: none; }

@media (max-width: 921px) {
	button.dm-header__burger { display: grid; margin-left: -10px; }
	a.dm-header__account { display: none; }
	.dm-header__actions { gap: 0; margin-right: -10px; }
}

/* Značka sa brojem artikala, bez cene i bez okvira. */
.dm-cart__badge {
	position: absolute;
	top: 3px;
	right: 1px;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	color: var(--dm-text-on-light);
	background: var(--dm-gold);
	border-radius: 9px;
	font-family: var(--dm-font-body);
	font-weight: 600;
	font-size: 0.6875rem;
	line-height: 1;
	pointer-events: none;
}

.dm-cart__badge[hidden] { display: none; }

/* ==========================================================================
   6. Panel za pretragu (ispod trake)
   ========================================================================== */
.dm-search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--dm-header-panel-bg);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
	box-shadow: 0 18px 32px -16px rgba(0, 0, 0, 0.7);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity var(--dm-header-dur) var(--dm-ease),
		transform var(--dm-header-dur) var(--dm-ease),
		visibility 0s linear var(--dm-header-dur);
}

.dm-search.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.dm-search__inner {
	box-sizing: border-box;
	max-width: 1240px;
	margin: 0 auto;
	padding: var(--dm-space-4) clamp(16px, 4vw, 40px);
}

.dm-search__form {
	display: flex;
	gap: var(--dm-space-2);
	max-width: 640px;
}

/* Astra i main.css boje polje svetlo uz veću specifičnost, zato .dm-header/.dm-drawer ispred. */
.dm-header input.dm-search__input,
.dm-drawer input.dm-search__input,
.dm-header input.dm-search__input:focus,
.dm-drawer input.dm-search__input:focus {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 var(--dm-space-4);
	color: var(--dm-text-on-dark);
	background: rgba(237, 235, 227, 0.08);
	border: 1px solid rgba(237, 235, 227, 0.28);
	border-radius: var(--dm-radius);
	box-shadow: none;
	font-family: var(--dm-font-body);
	font-size: 1rem;
}

.dm-header input.dm-search__input:focus,
.dm-drawer input.dm-search__input:focus {
	border-color: var(--dm-gold);
	box-shadow: 0 0 0 1px var(--dm-gold);
}

.dm-search__input::placeholder { color: color-mix(in srgb, var(--dm-text-on-dark) 60%, transparent); }

button.dm-search__submit { flex: none; height: 48px; }

/* ==========================================================================
   7. Mobilna fioka
   Klizi samo transform/opacity; CSS tranzicija se okreće od trenutne pozicije,
   pa ponovni klik usred animacije ne blokira ulaz.
   ========================================================================== */
.dm-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear 280ms;
}

.dm-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.dm-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(6, 8, 4, 0.62);
	opacity: 0;
	transition: opacity 280ms var(--dm-ease);
}

.dm-drawer.is-open .dm-drawer__scrim { opacity: 1; }

.dm-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: min(88vw, 360px);
	padding: 0 var(--dm-space-5) var(--dm-space-5);
	overflow-y: auto;
	overscroll-behavior: contain;
	color: var(--dm-text-on-dark);
	background: var(--dm-bg-dark);
	box-shadow: 18px 0 40px -18px rgba(0, 0, 0, 0.7);
	transform: translateX(-100%);
	transition: transform 280ms var(--dm-ease);
}

.dm-drawer.is-open .dm-drawer__panel { transform: none; }

.dm-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: none;
	height: var(--dm-header-h);
	margin-right: -10px;
}

.dm-drawer__title {
	color: color-mix(in srgb, var(--dm-text-on-dark) 62%, var(--dm-bg-dark));
	font-family: var(--dm-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dm-drawer .dm-nav__list {
	display: block;
	height: auto;
	border-top: 1px solid rgba(237, 235, 227, 0.1);
}

.dm-drawer .dm-nav__item {
	display: grid;
	grid-template-columns: 1fr 44px;
	align-items: center;
	border-bottom: 1px solid rgba(237, 235, 227, 0.1);
}

.dm-drawer .dm-nav__link {
	min-height: 52px;
	padding: 0;
	font-size: 1.5rem;
}

.dm-drawer .dm-nav__link::after { display: none; }

.dm-drawer button.dm-nav__toggle,
.dm-drawer button.dm-nav__toggle:hover,
.dm-drawer button.dm-nav__toggle:focus {
	width: 44px;
	min-height: 52px;
	margin: 0;
}

.dm-drawer .dm-nav__toggle .dm-icon { width: 20px; height: 20px; }

/* Podmeni kao harmonika. */
.dm-drawer .dm-nav__sub {
	display: none;
	grid-column: 1 / -1;
	padding: 0 0 var(--dm-space-3) var(--dm-space-4);
}

.dm-drawer .dm-nav__item.is-open > .dm-nav__sub { display: block; }

.dm-drawer .dm-nav__sub .dm-nav__link {
	min-height: 44px;
	font-size: 1.125rem;
	color: color-mix(in srgb, var(--dm-text-on-dark) 82%, var(--dm-bg-dark));
}

.dm-drawer .dm-nav__sub .dm-nav__item {
	display: block;
	border: 0;
}

.dm-drawer__search { margin-top: var(--dm-space-5); }
.dm-drawer__search .dm-search__form { max-width: none; }

.dm-drawer__links {
	margin: var(--dm-space-5) 0 0;
	padding: 0;
	list-style: none;
}

.dm-drawer__links a {
	display: flex;
	align-items: center;
	gap: var(--dm-space-3);
	min-height: 48px;
	color: var(--dm-text-on-dark);
	font-family: var(--dm-font-display);
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform var(--dm-dur-press) ease-out;
}

.dm-drawer__links a:active { transform: scale(0.96); }

.dm-drawer__tel {
	font-family: var(--dm-font-mono);
	font-weight: 400;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
}

@media (hover: hover) {
	.dm-drawer__links a:hover,
	.dm-drawer .dm-nav__link:hover { color: var(--dm-gold-hover); }
}

/* Zaključan skrol dok je fioka otvorena. */
html.dm-scroll-lock { overflow: hidden; }

/* Fioka ne postoji iznad preloma. */
@media (min-width: 922px) {
	.dm-drawer { display: none; }
}

/* ==========================================================================
   8. Pristupačnost i korisnička podešavanja
   ========================================================================== */
.dm-header :focus-visible,
.dm-drawer :focus-visible {
	outline: 2px solid var(--dm-gold-hover);
	outline-offset: 2px;
}

@media (prefers-reduced-transparency: reduce) {
	.dm-header,
	.dm-header.is-overlay:not(.is-scrolled) {
		background-color: var(--dm-bg-dark);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.dm-search,
	.dm-nav__sub {
		background: var(--dm-surface-dark);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@media (prefers-contrast: more) {
	.dm-header,
	.dm-header.is-overlay:not(.is-scrolled) {
		background-color: var(--dm-bg-dark);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow: none;
		border-bottom: 1px solid var(--dm-text-on-dark);
	}

	.dm-search,
	.dm-nav__sub {
		background: var(--dm-surface-dark);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: 1px solid var(--dm-text-on-dark);
	}

	.dm-drawer__panel { border-right: 1px solid var(--dm-text-on-dark); }
	.dm-topbar { color: var(--dm-text-on-dark); }
}

/* Bez klizanja: samo kratka promena providnosti. */
@media (prefers-reduced-motion: reduce) {
	.dm-header,
	.dm-nav__link::after,
	.dm-nav__toggle .dm-icon {
		transition-duration: 0.01ms;
	}

	.dm-nav__sub,
	.dm-search {
		transform: none;
		transition: opacity 100ms linear, visibility 0s linear 100ms;
	}

	.dm-nav__item.is-open > .dm-nav__sub,
	.dm-search.is-open { transition-delay: 0s; }

	.dm-drawer__panel {
		transform: none;
		opacity: 0;
		transition: opacity 100ms linear;
	}

	.dm-drawer.is-open .dm-drawer__panel { opacity: 1; }

	.dm-drawer__scrim { transition-duration: 100ms; }
	.dm-drawer { transition-duration: 0s; transition-delay: 100ms; }
	.dm-drawer.is-open { transition-delay: 0s; }
}

.dm-header__defs {
	position: absolute;
	pointer-events: none;
}

/* Padajući meni Prodavnica: link na sve kategorije je odvojen linijom. */
.dm-nav__sub .dm-nav__item--all {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid rgba(184, 149, 74, .35);
}

.dm-nav__sub .dm-nav__item--all > .dm-nav__link {
	color: var(--dm-gold);
}