/* ==========================================================================
   Header "Semina 2026" (Faza 2, po mockupu u Fazi 2b) — gornja traka, pretraga, telefon, korpa,
   glavni meni + mega-meni, mobilni meni, breadcrumbs.
   Struktura headera: tools/faza2-header.php, tools/faza2b-header-footer.php · Meni: tools/faza2-meni.php
   ========================================================================== */

/* --- Gornja traka (USP) --------------------------------------------------- */

.whb-top-bar {
	font-size: 13px;
}

.sem-usp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sem-space-6);
	color: #fff;
	font-weight: 500;
	white-space: nowrap;
}

.sem-usp__item::before {
	color: var(--sem-yellow);
}

/* Mobitel: jedna poruka u isto vrijeme, rotacija svakih 4 s. */
.sem-usp--rotate {
	position: relative;
	display: block;
	height: 1.5em;
	overflow: hidden;
	text-align: center;
}

.sem-usp--rotate .sem-usp__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	animation: sem-usp-rotate 12s infinite;
}

.sem-usp--rotate .sem-usp__item:nth-child(2) {
	animation-delay: 4s;
}

.sem-usp--rotate .sem-usp__item:nth-child(3) {
	animation-delay: 8s;
}

@keyframes sem-usp-rotate {
	0%, 30% { opacity: 1; transform: none; }
	33.33%, 100% { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
	.sem-usp--rotate .sem-usp__item {
		animation: none;
	}

	.sem-usp--rotate .sem-usp__item:first-child {
		opacity: 1;
	}
}

/* --- Glavni red: pretraga ------------------------------------------------- */

.whb-general-header .whb-column9 .wd-search-form,
.whb-general-header .whb-column9 .searchform {
	width: 100%;
	max-width: 680px;
}

.whb-general-header .searchform input[type="text"] {
	border: 2px solid var(--sem-ink);
	border-radius: var(--sem-radius);
	background: #fff;
	padding-inline-end: 64px;
}

.searchform.wd-style-with-bg .searchsubmit {
	--btn-color: var(--sem-ink);
	--btn-bgcolor: var(--sem-yellow);
	--btn-bgcolor-hover: var(--sem-yellow-dark);
	width: 60px;
	border-radius: 0 var(--sem-radius) var(--sem-radius) 0;
	background-color: var(--sem-yellow);
	color: var(--sem-ink);
}

.searchform.wd-style-with-bg .searchsubmit:hover {
	background-color: var(--sem-yellow-dark);
	color: var(--sem-ink);
}

.whb-general-header .searchform input[type="text"]::placeholder {
	color: var(--sem-muted);
}

/* Rezultati AJAX pretrage: slika + naziv + cijena. */
.wd-search-results .wd-entities-title {
	font-weight: 500;
}

.wd-search-results .price {
	font-weight: 700;
}

/* --- Glavni red: telefon -------------------------------------------------- */

.sem-header-phone {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	column-gap: var(--sem-space-2);
	align-items: center;
	color: var(--sem-ink);
	text-decoration: none;
	line-height: 1.15;
}

/* Ikona telefona u sivom krugu (mockup): ikona je slika pozadine, ne maska, da krug ostane vidljiv.
   a.….sem-ico: jače od opšteg pravila za ikone (icons.css). */
a.sem-header-phone.sem-ico::before {
	grid-row: 1 / span 2;
	width: 44px !important;
	height: 44px !important;
	margin: 0 6px 0 0 !important;
	border-radius: 50%;
	background: var(--sem-bg-soft) var(--sem-ico) center / 20px no-repeat;
	-webkit-mask: none;
	mask: none;
}

.sem-header-phone__label {
	font-size: 12px;
	color: var(--sem-muted);
}

.sem-header-phone__number {
	font-weight: 700;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
}

.sem-header-phone:hover .sem-header-phone__number {
	text-decoration: underline;
}

/* Header checkouta na mobitelu (samo logo + telefon, tools/faza4-checkout.php): logo lijevo, telefon
   desno, bez natpisa "Savjet i narudžba" — inače se logo i telefon preklapaju (mockup checkouta). */
@media (max-width: 1024px) {
	.whb-header .whb-column_mobile2.whb-empty-column {
		display: none;
	}

	.whb-header .whb-column_mobile2.whb-empty-column + .whb-column_mobile3 {
		flex: 1 1 auto;
		justify-content: flex-start;
	}

	.whb-column_mobile4 .sem-header-phone__label {
		display: none;
	}

	.whb-column_mobile4 .sem-header-phone {
		grid-template-rows: auto;
	}

	.whb-column_mobile4 a.sem-header-phone.sem-ico::before {
		grid-row: 1;
	}

	.whb-column_mobile4 a.sem-header-phone.sem-ico::before {
		width: 34px !important;
		height: 34px !important;
		background-size: 16px;
	}

	.whb-column_mobile4 .sem-header-phone__number {
		font-size: 15px;
	}
}

/* --- Glavni red: lista želja + korpa -------------------------------------- */

/* Žuti broj artikala (jače od WoodMart .wd-tools-element:is(.wd-design-2, …) .wd-tools-count). */
.whb-header .wd-tools-element.wd-tools-element .wd-tools-count {
	background-color: var(--sem-yellow);
	color: var(--sem-ink);
}

/* Desktop korpa: antracit dugme sa ikonom korpe, žutim brojem artikala i iznosom. */
.whb-column10 .wd-header-cart > a {
	padding: 10px 18px;
	border-radius: var(--sem-radius);
	background: var(--sem-ink);
	color: #fff;
}

.whb-column10 .wd-header-cart > a:hover {
	background: var(--sem-ink-2);
	color: #fff;
}

.whb-column10 .wd-header-cart > a *,
.whb-column10 .wd-header-cart .wd-tools-icon::before {
	color: #fff;
}

.whb-column10 .wd-header-cart .amount {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.whb-column10 .wd-header-cart .subtotal-divider {
	display: none;
}

.whb-column10 .wd-header-cart.wd-tools-element .wd-cart-number {
	inset: -9px auto auto -9px;
	color: var(--sem-ink);
	font-weight: 700;
}

.whb-column10 .wd-header-cart .wd-cart-number > span {
	display: none;
}

/* --- Donji red: glavni meni ----------------------------------------------- */

/* "Sve kategorije" kao običan link sa ikonom menija (mockup); dropdown sa kategorijama ostaje. */
.whb-header .wd-header-cats {
	width: auto;
	min-width: 0;
	margin-inline-end: var(--sem-space-3);
}

/* :not(.has-bg) i klasa šeme boja: WoodMart CSS ovog elementa se učitava kasnije (u body), sa istom specifičnošću. */
.whb-header .wd-header-cats .menu-opener:not(.has-bg),
.whb-header .wd-header-cats .menu-opener.color-scheme-light {
	width: auto;
	min-width: 0;
	max-width: none;
	padding: 0 4px 0 0;
	background: none;
	color: var(--sem-ink);
	text-transform: none;
}

.whb-header .wd-header-cats .menu-opener::after,
.whb-header .wd-header-cats .menu-opener-arrow {
	display: none;
}

.whb-header .wd-header-cats .menu-opener-icon,
.whb-header .wd-header-cats .menu-open-label {
	color: var(--sem-ink);
	font-size: 14px;
	text-transform: none;
}

.whb-header .wd-header-cats .menu-opener:hover .menu-open-label {
	text-decoration: underline;
}

.whb-header .wd-header-cats .wd-dropdown-cats {
	min-width: 290px;
}

/* Bez strelica pored stavki (podmeniji i dalje rade na hover). */
.wd-nav-main > li.menu-item-has-children > a::after,
.wd-nav-main > li > a .wd-nav-arrow {
	display: none;
}

/* Meni u jednom redu preko cijele širine, AKCIJA uz desni rub (mockup). */
.whb-header-bottom .wd-nav-main {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	column-gap: 6px;
}

.whb-header-bottom .wd-nav-main > li > a {
	padding-inline: 10px;
}

.whb-header-bottom .wd-nav-main > li.sem-menu-akcija {
	margin-inline-start: auto;
}

.wd-nav-main > li > a,
.wd-header-cats .menu-opener {
	text-transform: none;
	font-family: var(--sem-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0;
}

/* Prvi nivo: linijska ikona umjesto slike kategorije. */
.wd-nav-main > li > a > .wd-nav-img,
.wd-nav-mobile > li > a > .wd-nav-img,
.wd-header-cats .wd-nav-vertical > li > a > .wd-nav-img {
	display: none;
}

.wd-nav-main > li.sem-ico > a::before {
	display: none; /* horizontalni meni: samo tekst, ikone su u dropdownu "Sve kategorije" i na mobitelu */
}

/* AKCIJA — žuti badge. */
.wd-nav-main > li.sem-menu-akcija > a {
	margin-inline-start: var(--sem-space-3);
	padding: 6px 14px;
	border-radius: var(--sem-radius-pill);
	background: var(--sem-yellow);
	color: var(--sem-ink);
	text-transform: uppercase;
	font-weight: 700;
	height: auto;
}

.wd-nav-main > li.sem-menu-akcija > a:hover {
	background: var(--sem-yellow-dark);
}

/* Mega-meni: podkategorije u kolonama, mala slika kategorije uz naziv. */
.wd-nav-main .wd-dropdown-menu.wd-design-sized .wd-sub-menu {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--sem-space-3) var(--sem-space-5);
}

.wd-nav-main .wd-dropdown-menu .wd-sub-menu > li > a {
	display: flex;
	align-items: center;
	gap: var(--sem-space-2);
	font-weight: 600;
	color: var(--sem-ink);
	text-transform: none;
}

.wd-nav-main .wd-dropdown-menu .wd-nav-img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	flex: 0 0 28px;
}

.wd-nav-main .wd-dropdown-menu .sub-sub-menu a {
	color: var(--sem-muted);
	font-size: 13px;
}

/* "Sve kategorije" (vertikalni dropdown): ikona ispred svake glavne kategorije. */
.wd-header-cats .wd-nav-vertical > li > a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-weight: 500;
}

/* --- Mobilni meni (off-canvas) -------------------------------------------- */

.mobile-nav .wd-nav-mobile li > a {
	min-height: 48px;
	display: flex;
	align-items: center;
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
}

.mobile-nav .wd-nav-mobile > li.sem-menu-akcija > a {
	color: var(--sem-ink);
	background: var(--sem-yellow);
	font-weight: 700;
}

.mobile-nav .wd-nav-mobile .wd-nav-img {
	display: none;
}

/* --- Breadcrumbs ---------------------------------------------------------- */

.wd-breadcrumbs,
.woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--sem-muted);
}

.wd-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: var(--sem-ink-2);
}