/**
 * Novu Keys — header refinement.
 *
 * Kept isolated from style.css so the global navigation can be adjusted or
 * rolled back without affecting WooCommerce, Gutenberg or the home modules.
 */

:root {
	--novu-header-bg: #0b0d0c;
	--novu-header-bg-sticky: rgba(11, 13, 12, 0.91);
	--novu-header-text: rgba(255, 255, 255, 0.72);
	--novu-header-text-strong: #ffffff;
	--novu-header-line: rgba(255, 255, 255, 0.09);
	--novu-header-accent: var(--fwc-accent, #16e781);
}

/* Shell and proportions */
#header [data-row] {
	background-color: var(--novu-header-bg) !important;
	border-bottom: 1px solid var(--novu-header-line) !important;
	box-shadow: none !important;
}

#header [data-row*="middle"] {
	--height: 76px !important;
}

#header [data-row] > .ct-container,
#header [data-row*="boxed"] > div {
	width: min(calc(100% - 48px), 1320px) !important;
	max-width: 1320px !important;
}

#header .site-logo-container {
	--logo-max-height: 42px !important;
}

#header [data-items] > * {
	--margin: 0 8px;
}

/* Lighter, calmer navigation */
#header .ct-menu-link {
	position: relative;
	color: var(--novu-header-text) !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: 0.075em !important;
	text-transform: uppercase !important;
	transition: color 180ms ease !important;
}

#header .ct-menu-link::after {
	position: absolute;
	content: "";
	left: 50%;
	right: 50%;
	bottom: 16px;
	height: 1px;
	background: var(--novu-header-accent);
	transition: left 180ms ease, right 180ms ease;
}

#header .ct-menu-link:hover,
#header .menu-item.current-menu-item > .ct-menu-link,
#header .menu-item.current-menu-ancestor > .ct-menu-link,
#header .menu-item.current_page_item > .ct-menu-link {
	color: var(--novu-header-text-strong) !important;
}

#header .ct-menu-link:hover::after,
#header .menu-item.current-menu-item > .ct-menu-link::after,
#header .menu-item.current-menu-ancestor > .ct-menu-link::after,
#header .menu-item.current_page_item > .ct-menu-link::after {
	left: 25%;
	right: 25%;
}

/* One consistent language for every utility icon */
#header .ct-header-search,
#header .ct-header-account .ct-account-item,
#header .ct-header-cart .ct-cart-item,
#header .ct-header-trigger,
#header .novu-fav-header-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	min-width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	margin: 0 !important;
	color: rgba(255, 255, 255, 0.78) !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 50% !important;
	transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
}

#header .ct-header-search {
	color: var(--novu-header-accent) !important;
	border-color: rgba(22, 231, 129, 0.34) !important;
}

#header .ct-header-search:hover,
#header .ct-header-account .ct-account-item:hover,
#header .ct-header-cart .ct-cart-item:hover,
#header .ct-header-trigger:hover,
#header .novu-fav-header-icon:hover {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.07) !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
}

#header .ct-header-search:hover {
	color: var(--novu-header-accent) !important;
	border-color: rgba(22, 231, 129, 0.7) !important;
}

#header :is(.ct-header-search, .ct-account-item, .ct-cart-item, .ct-header-trigger, .novu-fav-header-icon) svg {
	width: 19px !important;
	height: 19px !important;
	fill: currentColor !important;
	color: inherit !important;
	stroke-width: 1.75;
}

/* Small counters remain legible without visually taking over the header. */
#header :is(.ct-dynamic-count-cart, .novu-fav-badge) {
	min-width: 16px !important;
	height: 16px !important;
	padding: 0 4px !important;
	font-size: 9px !important;
	font-weight: 700 !important;
	line-height: 16px !important;
	background: var(--novu-header-accent) !important;
	color: #07100b !important;
	border: 2px solid var(--novu-header-bg) !important;
	box-sizing: content-box !important;
}

/* Frosted sticky state: restrained depth, no heavy shadow. */
#header [data-sticky*="yes"] [data-row] {
	background-color: var(--novu-header-bg-sticky) !important;
	-webkit-backdrop-filter: blur(16px) saturate(135%) !important;
	backdrop-filter: blur(16px) saturate(135%) !important;
	border-bottom-color: rgba(255, 255, 255, 0.11) !important;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.16) !important;
}

#header [data-sticky*="yes"] [data-row*="middle"] {
	--shrink-height: 66px !important;
}

/* Mobile drawer follows the same visual system. */
@media (max-width: 999.98px) {
	#header [data-row*="middle"] {
		--height: 68px !important;
	}

	#header [data-row] > .ct-container,
	#header [data-row*="boxed"] > div {
		width: min(calc(100% - 32px), 1320px) !important;
	}

	#header .site-logo-container {
		--logo-max-height: 36px !important;
	}

	#offcanvas .ct-panel-inner {
		background: #0b0d0c !important;
	}

	#offcanvas .ct-panel-actions {
		border-bottom: 1px solid var(--novu-header-line);
		padding-bottom: 20px;
	}

	#offcanvas .mobile-menu a {
		color: rgba(255, 255, 255, 0.82) !important;
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
		font-size: 0.94rem !important;
		font-weight: 500 !important;
		letter-spacing: 0.015em !important;
	}

	#offcanvas .mobile-menu li:not(:last-child) {
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	}

	#offcanvas .mobile-menu :is(.current-menu-item, .current-menu-ancestor) > a,
	#offcanvas .mobile-menu a:hover {
		color: var(--novu-header-accent) !important;
	}
}

@media (max-width: 479.98px) {
	#header [data-row] > .ct-container,
	#header [data-row*="boxed"] > div {
		width: calc(100% - 24px) !important;
	}

	#header [data-items] > * {
		--margin: 0 4px;
	}

	#header .ct-header-search,
	#header .ct-header-account .ct-account-item,
	#header .ct-header-cart .ct-cart-item,
	#header .ct-header-trigger,
	#header .novu-fav-header-icon {
		width: 36px !important;
		min-width: 36px !important;
		height: 36px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#header *,
	#header *::before,
	#header *::after {
		transition-duration: 0.01ms !important;
	}
}