/*
 * Header in one row on desktop (inc/header-desktop.php):
 * logo · Prodavnica / Šeme STIHL delova / Akcija / Kontakt · search ·
 * phones · | · Nalog · Korpa, on a dark textured background.
 *
 * header.php keeps its rows (.header-main and .header-navigation) because
 * the phone header is built from them. At ≥1025px their wrappers get
 * display: contents, so every piece becomes a flex item of #masthead and
 * is placed with `order`. Loaded after style.css and mega-menu.css.
 */

/* ---------------------------------------------------------------- Phones block (tablet and desktop; hidden on phones by mobile-menu.css) */

@media (min-width: 769px) {
	.site-header .header-contact {
		display: flex;
		align-items: center;
		gap: 10px;
	}
}

.site-header .header-phone-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: #f37a1f;
}

.site-header .contact-numbers {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.3;
}

.site-header .contact-numbers .contact-number {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
}

.site-header .contact-numbers .contact-number:hover {
	color: #f37a1f;
}

/* ---------------------------------------------------------------- Desktop: one row */

@media (min-width: 1025px) {
	.site-header#masthead {
		display: flex;
		align-items: center;
		gap: 32px;
		min-height: 80px;
		margin-bottom: 0;
		padding: 0 32px;
		background:
			linear-gradient(90deg, rgba(15, 21, 32, 0.96) 0%, rgba(20, 27, 40, 0.93) 55%, rgba(24, 32, 46, 0.86) 100%),
			#18202e url('/wp-content/uploads/2025/09/footer-bg-1.webp') right center / cover no-repeat;
		box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
	}

	/* Clearfix pseudo-elements and the mobile sticky-nav placeholder would
	   become (empty) flex items and push the row to the right. */
	.site-header#masthead::before,
	.site-header#masthead::after,
	.site-header .header-navigation-placeholder {
		display: none;
	}

	/* Flatten the row wrappers. */
	.site-header > .header-main,
	.site-header > .header-main > .container,
	.site-header .header-main-content,
	.site-header > .header-navigation,
	.site-header > .header-navigation > .container,
	.site-header .navigation-content,
	.site-header .navigation-content > .container {
		display: contents;
	}

	.site-header .header-top-bar,
	.site-header .mobile-menu-toggle {
		display: none !important;
	}

	/* Order: logo · menu · search · phones · account + cart. */
	.site-header .site-branding {
		order: 1;
		flex: 0 0 auto;
	}

	body.woocommerce-active .site-header .site-branding {
		width: auto;
		max-width: none;
	}

	body .site-header .site-branding img {
		display: block;
		max-height: 54px;
		width: auto;
	}

	.site-header .main-nav {
		order: 2;
		flex: 0 0 auto;
		align-self: stretch;
	}

	.site-header .header-search {
		order: 3;
		flex: 1 1 auto;
		min-width: 240px;
		max-width: 760px;
		margin-left: auto;
	}

	.site-header .header-contact {
		order: 4;
		flex: 0 0 auto;
	}

	.site-header .header-account-cart {
		order: 5;
		flex: 0 0 auto;
		gap: 28px;
		padding-left: 32px;
		border-left: 1px solid rgba(255, 255, 255, 0.18);
	}

	/* ---------------------------------------------------------- Menu */

	.site-header .main-nav > .menu {
		height: 100%;
		margin: 0;
		gap: 30px;
	}

	/* Full-height items: the dropdowns start at the bottom of the header and
	   the pointer can move into them without leaving the item. */
	.site-header .main-nav > .menu > li.menu-primary {
		display: flex;
		align-items: center;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	body .site-header nav.main-nav ul li.menu-primary > a {
		position: relative;
		padding: 6px 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: #fff;
		font-size: 15px;
		font-weight: 600;
		white-space: nowrap;
	}

	body .site-header nav.main-nav ul li.menu-primary > a::after {
		content: '';
		position: absolute;
		right: 0;
		bottom: -2px;
		left: 0;
		height: 2px;
		border-radius: 2px;
		background: #f37a1f;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.2s ease;
	}

	body .site-header nav.main-nav ul li.menu-primary:hover > a,
	body .site-header nav.main-nav ul li.menu-primary.is-current > a {
		background: none;
		color: #fff;
	}

	body .site-header nav.main-nav ul li.menu-primary:hover > a::after,
	body .site-header nav.main-nav ul li.menu-primary.is-current > a::after {
		transform: scaleX(1);
	}

	/* Dropdowns open at the header's bottom edge. */
	.site-header .main-nav .categories-list,
	.site-header .main-nav .menu-stihl-delovi > .menu {
		top: 100%;
	}

	/* Mega menu next to the category list must stay inside the window. */
	.site-header .main-nav .mega-content {
		width: 1000px;
		max-width: calc(100vw - 560px);
	}

	/* ---------------------------------------------------------- Search (FiboSearch) */

	.site-header .header-search .dgwt-wcas-search-wrapp {
		max-width: none;
	}

	.site-header .header-search .dgwt-wcas-sf-wrapp {
		position: relative;
		height: 50px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.28);
		border-radius: 999px;
		background: rgba(10, 15, 24, 0.55);
		transition: border-color 0.2s, box-shadow 0.2s;
	}

	.site-header .header-search .dgwt-wcas-search-focused .dgwt-wcas-sf-wrapp,
	.site-header .header-search .dgwt-wcas-sf-wrapp:focus-within {
		border-color: #f37a1f;
		box-shadow: 0 0 0 3px rgba(243, 122, 31, 0.25);
	}

	/* Magnifier on the left (decorative; the button on the right submits). */
	.site-header .header-search .dgwt-wcas-sf-wrapp::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 18px;
		z-index: 2;
		width: 18px;
		height: 18px;
		background: #fff;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
		transform: translateY(-50%);
		pointer-events: none;
	}

	html:not(.dgwt-wcas-overlay-mobile-on) body .site-header .dgwt-wcas-style-pirx.dgwt-wcas-style-pirx-compact .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input,
	html:not(.dgwt-wcas-overlay-mobile-on) body .site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
		height: 48px;
		padding: 0 72px 0 48px;
		border: 0;
		border-radius: 999px;
		background: transparent;
		box-shadow: none;
		color: #fff;
		font-size: 14px;
	}

	body .site-header .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::placeholder {
		color: #aeb5c2;
		opacity: 1;
	}

	/* Submit: orange button with an arrow, on the right. */
	body .site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
		top: 3px;
		right: 3px;
		bottom: 3px;
		left: auto;
		width: 56px;
		height: auto;
		min-height: 0;
		margin: 0;
		padding: 0;
		border-radius: 999px 999px 999px 999px;
		background: #f37a1f;
		opacity: 1;
		transition: background-color 0.2s;
	}

	body .site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover {
		background: #d9650f;
	}

	body .site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg {
		display: none;
	}

	body .site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 20px;
		display: block;
		border: 0;
		background: #fff;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
		transform: translate(-50%, -50%);
	}

	body .site-header .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit::after {
		display: none;
	}

	/* ---------------------------------------------------------- Account + cart: framed icons, no text */

	.site-header .header-account-cart {
		gap: 14px;
	}

	.site-header .account-link,
	.site-header .ajax-mini-cart-toggle {
		display: flex;
		align-items: center;
		padding: 0;
		color: #fff;
		text-decoration: none;
	}

	/* Labels stay for screen readers only. */
	.site-header .account-text,
	.site-header .cart-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.site-header .account-icon,
	.site-header .cart-icon {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 48px;
		height: 48px;
		padding: 12px;
		border: 1px solid rgba(255, 255, 255, 0.14);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.07);
		transition: background-color 0.2s, border-color 0.2s;
	}

	.site-header .cart-icon svg {
		width: 24px;
		height: 24px;
		fill: currentColor;
	}

	.site-header .account-link:hover .account-icon,
	.site-header .ajax-mini-cart-toggle:hover .cart-icon,
	.site-header .account-link:focus-visible .account-icon,
	.site-header .ajax-mini-cart-toggle:focus-visible .cart-icon {
		border-color: #f37a1f;
		background: rgba(243, 122, 31, 0.16);
	}

	.site-header .account-link:hover,
	.site-header .ajax-mini-cart-toggle:hover {
		color: #fff;
	}

	.site-header .cart-count {
		position: absolute;
		top: -4px;
		right: -4px;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		border: 2px solid #18202e;
		border-radius: 999px;
		background: #f37a1f;
		color: #fff;
		font-size: 11px;
		font-weight: 800;
		line-height: 16px;
		text-align: center;
	}
}

/* Narrower desktops: the phones go first (they are also in the footer),
   then tighter spacing. */
@media (min-width: 1025px) and (max-width: 1499px) {
	.site-header .header-contact {
		display: none;
	}
}

@media (min-width: 1025px) and (max-width: 1399px) {
	.site-header#masthead {
		gap: 26px;
		padding: 0 22px;
	}

	.site-header .main-nav > .menu {
		gap: 24px;
	}

	.site-header .header-account-cart {
		gap: 20px;
		padding-left: 22px;
	}
}

@media (min-width: 1025px) and (max-width: 1199px) {
	body .site-header .site-branding img {
		max-height: 44px;
	}

	body .site-header nav.main-nav ul li.menu-primary > a {
		font-size: 14px;
	}

	.site-header .main-nav > .menu {
		gap: 18px;
	}

	.site-header .account-text,
	.site-header .cart-text {
		display: none;
	}

	.site-header .header-search {
		min-width: 200px;
	}
}