/* =============================================================================
   Bogdanbor Child — Site Header
   Premium minimalist winery header.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Custom properties
   ----------------------------------------------------------------------------- */
:root {
	--header-height:      180px;
	--header-bg-init:     transparent;
	--header-bg-solid:    #ffffff;
	--header-shadow:      0 1px 24px rgba(0, 0, 0, 0.07);
	--header-color:       #1a1a1a;
	--header-color-hover: #7b3b2f; /* deep wine */
	--header-transition:  0.3s ease;
	/* --font-serif and --font-ui are defined in typography.css */
}

/* -----------------------------------------------------------------------------
   Base — fixed, transparent, full-width
   ----------------------------------------------------------------------------- */
.site-header {
	position:         fixed;
	top:              0;
	left:             0;
	width:            100%;
	/* Must be above .mini-cart-panel (z-index: 2000) so the cart trigger
	   remains click-accessible when the drawer is open. The panel's top
	   is offset by --header-height so the overlay + drawer start below
	   this header strip, keeping both trigger and close-button accessible. */
	z-index:          2001;
	background-color: var(--header-bg-init);
	transition:
		background-color var(--header-transition),
		box-shadow       var(--header-transition);
}

/* Offset page content below fixed header */
body {
	padding-top: var(--header-height);
}

/* Scrolled state — injected by header.js */
.site-header.is-scrolled {
	background-color: var(--header-bg-solid);
	box-shadow:       var(--header-shadow);
}

/* -----------------------------------------------------------------------------
   Inner layout — three-column flex row
   ----------------------------------------------------------------------------- */
.header-inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	max-width:       1280px;
	margin:          0 auto;
	padding:         0 3rem;
	height:          var(--header-height);
}

/* -----------------------------------------------------------------------------
   Brand / Logo
   ----------------------------------------------------------------------------- */
.header-brand {
	flex:        1;
	display:     flex;      /* makes brand-link a flex child so align-items works */
	align-items: center;
}

.brand-link {
	display:         flex;
	align-items:     center;
	text-decoration: none;
	color:           var(--header-color);
	padding-top: 15px;
}

/* Logo sizing.
   .brand-logo is output by wp_get_attachment_image() — not the_custom_logo().
   This avoids Blocksy's dynamic CSS hooks on .custom-logo / .custom-logo-link.
   Explicit height (not max-height) gives predictable rendering regardless of
   the PNG's intrinsic dimensions. object-fit: contain handles any transparent
   canvas padding in the source file gracefully.
   60px = 60% of 100px header — logo text and illustration stay within the nav axis.
   Do not increase beyond 60px: the illustration is bottom-biased in the composition,
   so taller values push the grapes below the nav optical center. */
.brand-link .brand-logo {
	display:         block;
	height:          110px;
	width:           auto;
	max-width:       300px;
	object-fit:      contain;
	object-position: left center;
}

/* Text fallback */
.brand-name {
	font-family:    var( --font-serif );
	font-size:      var( --text-lg );
	letter-spacing: var( --tracking-ultra );
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   Desktop navigation — centered
   ----------------------------------------------------------------------------- */
.header-nav {
	flex:            2;
	display:         flex;
	justify-content: center;
	
}

.header-nav .nav-list {
	display:     flex;
	gap:         3.5rem;
	list-style:  none;
	margin:      0;
	padding:     0;
}

.header-nav .nav-list a {
	position:        relative;
	font-family:     var( --font-ui );
	font-size:       var( --text-sm );
	font-weight:     350;
	letter-spacing:  var( --tracking-widest );
	text-transform:  uppercase;
	text-decoration: none;
	color:           var( --header-color );
	padding-bottom:  3px;
	transition:      color var( --header-transition );
}

/* Underline reveal on hover */
.header-nav .nav-list a::after {
	content:          '';
	position:         absolute;
	bottom:           0;
	left:             0;
	width:            0;
	height:           1px;
	background-color: var(--header-color-hover);
	transition:       width var(--header-transition);
}

.header-nav .nav-list a:hover,
.header-nav .nav-list .current-menu-item > a {
	color: var(--header-color-hover);
}

.header-nav .nav-list a:hover::after,
.header-nav .nav-list .current-menu-item > a::after {
	width: 100%;
}

/* -----------------------------------------------------------------------------
   Actions — cart + hamburger
   ----------------------------------------------------------------------------- */
.header-actions {
	flex:            1;
	display:         flex;
	align-items:     center;
	justify-content: flex-end;
	gap:             1.25rem;
}

/* Cart icon */
.cart-icon {
	position:        relative;
	display:         inline-flex;
	align-items:     center;
	color:           var(--header-color);
	text-decoration: none;
	transition:      color var(--header-transition);
}

.cart-icon:hover {
	color: var(--header-color-hover);
}

/* Cart count badge */
.cart-count {
	position:         absolute;
	top:              -9px;
	right:            -11px;
	min-width:        18px;
	height:           18px;
	padding:          0 4px;
	background-color: var(--header-color-hover);
	color:            #ffffff;
	font-size:        0.625rem;
	font-weight:      700;
	line-height:      18px;
	text-align:       center;
	border-radius:    9px;
	letter-spacing:   0;
	pointer-events:   none;
}

.page-header,
.woocommerce-products-header {
	padding-top: 3rem;
}

/* -----------------------------------------------------------------------------
   Hamburger button
   ----------------------------------------------------------------------------- */
.hamburger {
	display:         none; /* shown only on mobile */
	flex-direction:  column;
	justify-content: center;
	gap:             5px;
	background:      none;
	border:          none;
	cursor:          pointer;
	padding:         4px 0;
	color:           var(--header-color);
}

.hamburger-bar {
	display:          block;
	width:            22px;
	height:           1.5px;
	background-color: currentColor;
	transition:
		transform var(--header-transition),
		opacity   var(--header-transition);
}

/* Open state — bars morph into × */
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
	opacity: 0;
}
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* -----------------------------------------------------------------------------
   Mobile menu panel
   ----------------------------------------------------------------------------- */
.mobile-menu {
	background-color: var(--header-bg-solid);
	border-top:       1px solid rgba(0, 0, 0, 0.06);
	padding:          1.75rem 2.5rem;
}

.mobile-menu .mobile-nav-list {
	list-style:     none;
	margin:         0;
	padding:        0;
	display:        flex;
	flex-direction: column;
	gap:            1.5rem;
}

.mobile-menu .mobile-nav-list a {
	font-family:     var( --font-ui );
	font-size:       0.875rem;
	font-weight:     300;
	letter-spacing:  var( --tracking-widest );
	text-transform:  uppercase;
	text-decoration: none;
	color:           var( --header-color );
	transition:      color var( --header-transition );
}

.mobile-menu .mobile-nav-list a:hover,
.mobile-menu .mobile-nav-list .current-menu-item > a {
	color: var(--header-color-hover);
}

/* -----------------------------------------------------------------------------
   Responsive
   ----------------------------------------------------------------------------- */

/* Mobile: hide desktop nav, show hamburger */
@media ( max-width: 900px ) {
	:root {
		--header-height: 64px;
	}

	.header-nav {
		display: none;
	}

	.hamburger {
		display: flex;
	}

	.brand-link .brand-logo {
		height:    38px;   /* 59% of 64px mobile header */
		max-width: 190px;
	}
}

/* Desktop: always hide mobile panel regardless of JS state */
@media ( min-width: 901px ) {
	.mobile-menu {
		display: none !important;
	}
}

/* -----------------------------------------------------------------------------
   Anchor link offset for fixed header
   ----------------------------------------------------------------------------- */
:target {
	scroll-margin-top: calc( var(--header-height) + 1rem );
}