/**
 * Beauvit — site header component.
 *
 * Base treatment is the light, sticky bar used across inner pages and
 * WooCommerce. On the home page (body.home) the header becomes a transparent
 * glass bar that floats over the full-bleed hero and gains a dark blurred
 * backdrop once the visitor scrolls (or opens the mobile menu).
 *
 * @package Beauvit
 */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--bv-bg); /* fallback for browsers without color-mix */
	background-color: color-mix(in srgb, var(--bv-bg) 85%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--bv-line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 74px;
	padding-block: 0.75rem;
}

/* Brand -------------------------------------------------------------- */
.site-brand__name {
	font-family: var(--bv-font-serif);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bv-ink);
}

.site-header__brand .custom-logo {
	max-height: 40px;
	width: auto;
}

/* Primary navigation ------------------------------------------------- */
.site-nav {
	margin-left: auto;
}

.site-nav__list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1.9rem;
	margin: 0;
	padding: 0;
}

.site-nav__list a {
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--bv-ink);
}

.site-nav__list a:hover {
	color: var(--bv-accent-strong);
}

/* Header actions ----------------------------------------------------- */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.site-header__cart {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	padding: 0.55rem 1rem;
	border: 1px solid var(--bv-line);
	border-radius: 999px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--bv-ink);
	background-color: var(--bv-surface);
	transition: border-color 0.2s var(--bv-ease), color 0.2s var(--bv-ease);
}

.site-header__cart:hover {
	border-color: var(--bv-accent);
	color: var(--bv-accent-strong);
}

.site-header__cart-count {
	color: var(--bv-accent);
	font-variant-numeric: tabular-nums;
}

/* Mobile toggle ------------------------------------------------------ */
.site-header__toggle {
	display: none;
	position: relative;
	width: 42px;
	height: 42px;
	background: var(--bv-surface);
	border: 1px solid var(--bv-line);
	border-radius: var(--bv-radius);
	cursor: pointer;
}

.site-header__toggle-bar,
.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
	position: absolute;
	left: 50%;
	width: 18px;
	height: 2px;
	background-color: var(--bv-ink);
	transform: translateX(-50%);
	transition: transform 0.2s var(--bv-ease), opacity 0.2s var(--bv-ease);
}

.site-header__toggle-bar {
	top: 50%;
	margin-top: -1px;
}

.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
	content: "";
	left: 0;
	transform: none;
}

.site-header__toggle-bar::before {
	top: -6px;
}

.site-header__toggle-bar::after {
	top: 6px;
}

/* -------------------------------------------------------------------- */
/* Home overlay — transparent glass header floating over the hero        */
/* -------------------------------------------------------------------- */
.home .site-header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom-color: transparent;
	transition: background-color 0.3s var(--bv-ease),
		-webkit-backdrop-filter 0.3s var(--bv-ease),
		backdrop-filter 0.3s var(--bv-ease),
		border-color 0.3s var(--bv-ease), box-shadow 0.3s var(--bv-ease);
}

.home .site-header.is-scrolled,
.home .site-header.is-menu-open {
	background-color: rgba(15, 11, 7, 0.72);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	backdrop-filter: saturate(150%) blur(14px);
	border-bottom-color: var(--bv-line);
	box-shadow: 0 12px 44px -26px rgba(0, 0, 0, 0.9);
}

.home .site-header__cart {
	background-color: rgba(255, 255, 255, 0.05);
	border-color: rgba(240, 208, 150, 0.22);
}

.home .site-header__toggle {
	background-color: rgba(255, 255, 255, 0.05);
	border-color: rgba(240, 208, 150, 0.22);
}

/* -------------------------------------------------------------------- */
/* Responsive                                                           */
/* -------------------------------------------------------------------- */
@media (max-width: 860px) {
	.site-header__toggle {
		display: block;
	}

	.site-nav {
		order: 4;
		flex-basis: 100%;
		margin-left: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.28s var(--bv-ease);
	}

	.site-nav.is-open {
		max-height: 60vh;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding-block: 0.25rem 1rem;
	}

	.site-nav__list li {
		width: 100%;
	}

	.site-nav__list a {
		display: block;
		width: 100%;
		padding: 0.85rem 0;
		border-bottom: 1px solid var(--bv-line);
		font-size: 1rem;
	}

	.site-header__actions {
		margin-left: auto;
	}

	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar {
		background-color: transparent;
	}

	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::before {
		top: 0;
		transform: rotate(45deg);
	}

	.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar::after {
		top: 0;
		transform: rotate(-45deg);
	}
}

@media (max-width: 420px) {
	.site-header__inner {
		gap: 0.75rem;
	}

	.site-header__cart {
		padding-inline: 0.85rem;
	}
}