/**
 * Nzele Navigation (Header & Dropdowns) Styles
 * Quiet Luxury, Museum-Quality Editorial Header System
 */

/* ==========================================================================
   1. Main Header Wrapper & Visual States
   ========================================================================== */

#nzle-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background-color: var(--nzle-bg-primary); /* Default to Warm Ivory */
	border-bottom: 1px solid var(--nzle-border);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.01);
	transition: background-color 250ms var(--nzle-transition-easing),
				border-color 250ms var(--nzle-transition-easing),
				box-shadow 250ms var(--nzle-transition-easing);
}

/* --- Homepage Transparent Initial State --- */
.home:not(.nzle-header-scrolled) #nzle-header {
	background-color: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

/* WP Admin Bar Position Adjustment */
.admin-bar #nzle-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar #nzle-header {
		top: 46px;
	}
}

/* ==========================================================================
   2. Header Container Sizing (Stable dimensions to prevent layout jumps)
   ========================================================================== */

.nzle-header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px var(--nzle-space-xl); /* Generous horizontal spacing, compressed height */
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.nzle-header-container {
		padding: 10px var(--nzle-space-md);
	}
}

/* ==========================================================================
   3. Logo Sizing and Visual Contrast Treatments
   ========================================================================== */

.nzle-logo {
	width: 150px; /* Sized down for a more refined, understated visual look */
	height: 24px; /* Set fixed height to crop any image whitespace and limit vertical footprint */
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-left: -10px; /* Shift slightly left to visually align with content edge */
}

.nzle-logo-link {
	display: block;
	width: 100%;
}

.nzle-logo-img,
.nzle-logo img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	object-fit: contain;
	filter: none; /* Dark logo by default for light scrolled/internal backgrounds */
	transition: filter 250ms var(--nzle-transition-easing);
}

/* Context-dependent transparent homepage initial state: Keep logo dark for light artwork background */
.home:not(.nzle-header-scrolled) .nzle-logo img {
	filter: none;
}

@media (max-width: 768px) {
	.nzle-logo {
		width: 120px;
		height: 19px;
		margin-left: -6px; /* Adjusted left offset on mobile */
	}
}

/* ==========================================================================
   4. Desktop Menu & Editorial Micro-interactions
   ========================================================================== */

.nzle-nav-desktop {
	display: flex;
	justify-content: center;
	align-items: center;
}

@media (max-width: 991px) {
	.nzle-nav-desktop {
		display: none;
	}
}

.nzle-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--nzle-space-lg);
}

.nzle-nav-menu > li {
	position: relative;
	padding: 0;
	margin: 0;
}

.nzle-nav-menu > li > a {
	font-family: var(--nzle-font-body);
	font-size: 0.75rem; /* 12px for modern refined styling */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--nzle-letter-spacing-extra-wide);
	color: var(--nzle-text-primary) !important;
	padding: 8px 12px;
	display: block;
	position: relative;
	transition: color 250ms var(--nzle-transition-easing);
}

/* Transparent homepage state text colors (Keep dark/black for contrast on light hero artwork) */
.home:not(.nzle-header-scrolled) .nzle-nav-menu > li > a {
	color: var(--nzle-text-primary) !important;
}

/* Elegant gold hover underline */
.nzle-nav-menu > li > a::after {
	content: '';
	position: absolute;
	width: 50%;
	height: 1px;
	bottom: 2px;
	left: 25%;
	background-color: var(--nzle-accent);
	transform: scaleX(0);
	transform-origin: bottom right;
	transition: transform var(--nzle-transition-duration) var(--nzle-transition-easing);
}

.nzle-nav-menu > li > a:hover::after,
.nzle-nav-menu > li.current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

.nzle-nav-menu > li > a:hover {
	color: var(--nzle-accent) !important;
}

/* Dropdown Sub-menus */
.nzle-nav-menu ul {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(12px);
	background-color: var(--nzle-white) !important;
	border: 1px solid var(--nzle-border);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
	padding: var(--nzle-space-sm) 0;
	min-width: 220px;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms var(--nzle-transition-easing),
				transform 250ms var(--nzle-transition-easing);
	z-index: 1010;
	border-radius: 4px;
}

.nzle-nav-menu li:hover > ul {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.nzle-nav-menu ul li {
	width: 100%;
	padding: 0;
	margin: 0;
}

.nzle-nav-menu ul li a {
	font-family: var(--nzle-font-body) !important;
	font-size: 0.75rem !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: var(--nzle-letter-spacing-wide) !important;
	color: var(--nzle-text-secondary) !important;
	padding: 10px 24px !important;
	display: block !important;
	transition: var(--nzle-transition-default) !important;
}

.nzle-nav-menu ul li a:hover {
	color: var(--nzle-accent) !important;
	background-color: var(--nzle-bg-primary) !important;
	padding-left: 28px !important; /* Premium visual shift */
}

/* ==========================================================================
   5. Utility Icons
   ========================================================================== */

.nzle-header-utilities {
	display: flex;
	align-items: center;
	gap: var(--nzle-space-md);
}

.nzle-utility-link {
	color: var(--nzle-text-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: color 250ms var(--nzle-transition-easing);
}

/* Utility icons color on transparent homepage hero state (Keep dark/black for contrast on light hero artwork) */
.home:not(.nzle-header-scrolled) .nzle-utility-link {
	color: var(--nzle-text-primary);
}

.nzle-utility-link:hover {
	color: var(--nzle-accent) !important;
}

.nzle-cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	background-color: var(--nzle-accent);
	color: var(--nzle-white);
	font-family: var(--nzle-font-body);
	font-size: 9px;
	font-weight: 600;
	height: 14px;
	width: 14px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   6. Mobile Menu & Drawer
   ========================================================================== */

.nzle-menu-toggle {
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: var(--nzle-text-primary);
	display: none;
	align-items: center;
	justify-content: center;
	transition: color 250ms var(--nzle-transition-easing);
}

.home:not(.nzle-header-scrolled) .nzle-menu-toggle {
	color: var(--nzle-text-primary);
}

.nzle-menu-toggle:hover {
	color: var(--nzle-accent) !important;
}

.nzle-menu-icon-close {
	display: none;
}

@media (max-width: 991px) {
	.nzle-menu-toggle {
		display: flex;
	}
}

.nzle-nav-mobile-drawer {
	position: fixed;
	top: 48px; /* Aligned with desktop header height (12px padding * 2 + 24px logo) */
	left: 100%;
	width: 100%;
	height: calc(100vh - 48px);
	background-color: var(--nzle-white);
	border-top: 1px solid var(--nzle-border);
	z-index: 999;
	transition: left var(--nzle-transition-duration) var(--nzle-transition-easing);
	overflow-y: auto;
}

@media (max-width: 768px) {
	.nzle-nav-mobile-drawer {
		top: 35px; /* Aligned with mobile header height (8px padding * 2 + 19px logo) */
		height: calc(100vh - 35px);
	}
}

.admin-bar .nzle-nav-mobile-drawer {
	height: calc(100vh - 48px - 32px);
}
@media (max-width: 782px) {
	.admin-bar .nzle-nav-mobile-drawer {
		height: calc(100vh - 35px - 46px);
	}
}

.nzle-mobile-menu-active .nzle-nav-mobile-drawer {
	left: 0;
}

.nzle-mobile-menu-active .nzle-menu-icon-open {
	display: none;
}

.nzle-mobile-menu-active .nzle-menu-icon-close {
	display: block;
}

.nzle-nav-menu-mobile {
	list-style: none;
	margin: 0;
	padding: var(--nzle-space-xl) var(--nzle-space-md);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.nzle-nav-menu-mobile li {
	display: block;
}

.nzle-nav-menu-mobile li a {
	font-family: var(--nzle-font-body);
	font-size: 1rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--nzle-letter-spacing-wide);
	color: var(--nzle-black);
	display: block;
	padding: 10px 0;
	border-bottom: 1px solid var(--nzle-border);
}

.nzle-nav-menu-mobile li a:hover {
	color: var(--nzle-accent);
}

.nzle-nav-menu-mobile ul {
	list-style: none;
	padding: var(--nzle-space-xs) 0 var(--nzle-space-xs) var(--nzle-space-md);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nzle-nav-menu-mobile ul li a {
	font-size: 0.85rem;
	font-weight: 400;
	border-bottom: none;
	padding: 6px 0;
	color: var(--nzle-text-secondary);
}