/* ============================================================
   Site header + primary navigation
   Luxury fashion-house direction — deep burgundy, editorial type.
   ============================================================ */

/* Announcement bar (sits above the header) */
.announcement-bar {
	background-color: #4A080B;
	color: #F4ECE0;
	text-align: center;
	padding: 0.65rem 1.5rem 0.75rem;
}
.announcement-bar__line {
	margin: 0 0 0.15rem;
	font-family: var(--font-heading);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.announcement-bar__link {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 0.78rem;
	font-style: italic;
	color: #F4ECE0;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 200ms ease;
}
.announcement-bar__link:hover,
.announcement-bar__link:focus {
	opacity: 0.75;
}
@media (max-width: 600px) {
	.announcement-bar {
		padding: 0.6rem 1rem 0.7rem;
	}
	.announcement-bar__line,
	.announcement-bar__link {
		font-size: 0.68rem;
		letter-spacing: 0.08em;
	}
}

.site-header {
	--header-bg: #F0EDE8;
	--header-bg-scrolled: #E9E5DD;
	--header-ivory: #4A080B;
	--header-ivory-soft: rgba(74, 8, 11, 0.72);
	--header-hairline: rgba(74, 8, 11, 0.16);

	background-color: var(--header-bg);
	position: sticky;
	top: 0;
	z-index: 200;
	transition: background-color 260ms ease, box-shadow 260ms ease;
}
.site-header.is-scrolled {
	box-shadow: 0 10px 26px rgba(12, 1, 2, 0.28);
}

.site-header a,
.site-header button {
	font-family: 'Montserrat', var(--font-body);
	/* Root-cause fix for the dark square that appeared over the mobile
	   menu toggle/close icon: mobile WebKit/Chromium draws a default
	   tap-highlight rectangle over the whole hit area of a tapped
	   <button>/<a> unless this is explicitly disabled. It was effectively
	   invisible on the old dark-burgundy header background, but became a
	   visible dark box once the header background was changed to cream.
	   Disabling it here (scoped to the header only) removes the artifact
	   without touching the real close icon, which is a separate element. */
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
}
.site-header a:focus-visible,
.site-header button:focus-visible {
	outline: 1px solid var(--header-ivory);
	outline-offset: 3px;
}

/* Buttons only: also neutralise native OS/browser chrome (iOS Safari can
   apply its own default button background/border on tap) and the tap
   highlight box specifically for the toggle-style icon buttons. */
.site-nav__toggle,
.submenu-toggle,
.site-search-toggle,
.site-search-panel__close {
	-webkit-appearance: none;
	appearance: none;
	touch-action: manipulation;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-block: 1.75rem;
	padding-inline: clamp(1.5rem, 5vw, 4rem);
}

/* Wordmark */
.site-branding { margin-right: auto; }
.site-wordmark {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	transition: opacity 200ms ease;
}
.site-wordmark__img {
	display: block;
	height: 22px;
	width: auto;
	/* The exported wordmark is ivory-on-transparent (made for the old
	   burgundy header); recolor it to solid dark ink so it stays legible
	   on the new cream nav bar without needing a re-exported asset. */
	filter: brightness(0) saturate(100%);
}
.site-wordmark:hover,
.site-wordmark:focus { opacity: 0.78; }

/* Primary nav (desktop, centred) */
.site-nav { display: flex; align-items: center; position: relative; }

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.75rem);
}
.primary-menu > li { position: relative; display: flex; align-items: center; }

.primary-menu > li > a {
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--header-ivory);
	text-decoration: none;
	position: relative;
	padding: 0.5rem 0.05rem;
}
.primary-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1px;
	background: var(--header-ivory);
	transition: right 260ms ease;
}
.primary-menu > li > a:hover::after,
.primary-menu > li.current-menu-item > a::after,
.primary-menu > li.current_page_item > a::after { right: 0; }
.primary-menu > li > a:hover { opacity: 1; }

/* Desktop relies on hover/focus — hide the mobile toggle affordance */
.submenu-toggle { display: none; }

/* Editorial dropdown */
.sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 6px);
	min-width: 230px;
	margin: 0;
	padding: 1.4rem 0;
	list-style: none;
	background: var(--header-bg);
	border-top: 1px solid var(--header-hairline);
	box-shadow: 0 20px 36px rgba(10, 1, 2, 0.30);
	display: none;
	z-index: 60;
}
.primary-menu > li:hover > .sub-menu,
.primary-menu > li:focus-within > .sub-menu,
.primary-menu > li.is-open > .sub-menu { display: block; }

.sub-menu a {
	display: block;
	padding: 0.6rem 2rem;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	white-space: nowrap;
	color: var(--header-ivory-soft);
	text-decoration: none;
	transition: color 200ms ease, padding-left 200ms ease;
}
.sub-menu a:hover {
	color: var(--header-ivory);
	padding-left: 2.3rem;
}

/* Utility — search + bag */
.site-header__utility {
	
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.site-search-toggle {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0.2rem;
	color: var(--header-ivory);
	cursor: pointer;
	transition: opacity 200ms ease;
}
.site-search-toggle:hover { opacity: 0.75; }

.site-bag {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--header-ivory);
	text-decoration: none;
	transition: opacity 200ms ease;
}
.site-bag:hover { opacity: 0.78; }
.site-bag__icon { display: block; }
.site-bag__count {
	position: absolute;
	top: -5px;
	right: -9px;
	font-size: 0.6rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	color: var(--header-ivory);
}

/* Search panel */
.site-search-panel[hidden] { display: none; }
.site-search-panel {
	border-top: 1px solid var(--header-hairline);
	background: var(--header-bg);
}
.site-search-panel__inner {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding-block: 1.1rem;
}
.site-search-panel .search-form {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
}
.site-search-panel .search-field {
	flex: 1;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(74, 8, 11, 0.35);
	border-radius: 0;
	color: var(--header-ivory);
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	padding: 0.5rem 0;
}
.site-search-panel .search-field::placeholder { color: rgba(74, 8, 11, 0.5); }
.site-search-panel .search-field:focus { outline: none; border-bottom-color: var(--header-ivory); }
.site-search-panel .search-submit {
	background: transparent;
	border: 1px solid rgba(74, 8, 11, 0.4);
	border-radius: 0;
	color: var(--header-ivory);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.55rem 1.15rem;
	cursor: pointer;
	transition: border-color 200ms ease, opacity 200ms ease;
}
.site-search-panel .search-submit:hover { border-color: var(--header-ivory); opacity: 0.85; }
.site-search-panel__close {
	background: transparent;
	border: 0;
	color: var(--header-ivory);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 0.2rem;
}

/* Mobile/tablet toggle — minimal hamburger that morphs into an X */
.site-nav__toggle {
	display: none;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 160;
	width: 22px;
	height: 15px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	flex-shrink: 0;
}
/*
 * Root cause of the dark square that flashed over this icon while it opened:
 * each bar transitioned `top` (a layout/paint property) at the same time as
 * `transform: rotate()` (a compositor-only property) on the same element.
 * Animating a layout property and a compositor property together forces the
 * browser to repaint the bars' bounding box on every frame while it is also
 * compositing the rotation, and on mobile GPUs those two pipelines can land
 * a frame out of sync — the three overlapping bars briefly paint as a solid
 * filled rectangle before the correctly-composited "X" frame replaces it.
 * It was invisible on the old dark-burgundy header (dark-on-dark) and only
 * became visible once the header background changed to cream.
 *
 * Fix: give every bar a fixed `top` that never animates, and drive the open/
 * close state purely with `transform` (translateY + rotate) and `opacity` —
 * both compositor-only, so the three bars animate on the GPU with nothing to
 * repaint, and the "top square" frame can no longer occur.
 */
.site-nav__toggle-bar {
	position: absolute;
	left: 0;
	top: 7px;
	width: 100%;
	height: 1.5px;
	background: var(--header-ivory);
	transform-origin: center;
	transition: transform 260ms ease, opacity 200ms ease;
	will-change: transform, opacity;
}
.site-nav__toggle-bar:nth-child(1) { transform: translateY(-7px) rotate(0deg); }
.site-nav__toggle-bar:nth-child(2) { transform: translateY(0) rotate(0deg); }
.site-nav__toggle-bar:nth-child(3) { transform: translateY(7px) rotate(0deg); }

.site-nav.is-open .site-nav__toggle-bar:nth-child(1) { transform: translateY(0) rotate(45deg); }
.site-nav.is-open .site-nav__toggle-bar:nth-child(2) { opacity: 0; transform: translateY(0) scaleX(0.4); }
.site-nav.is-open .site-nav__toggle-bar:nth-child(3) { transform: translateY(0) rotate(-45deg); }

.site-nav__mobile-bag { display: none; }
.site-nav__mobile-bag-count { color: var(--header-ivory-soft); font-weight: 400; }

/* Tablet + mobile */
@media (max-width: 1024px) {
	/* Keep the bag visible and reachable at all times; only the search
	   affordance collapses into the hamburger panel on small screens. */
	.site-search-toggle { display: none; }
	.site-header__inner {

		justify-content: space-between;
		padding-block: 1.15rem;
		padding-inline: 2rem;
	}

	/* Hamburger (left) — logo (center) — bag (right), so the bag never
	   depends on the menu being open. */
	.site-nav { order: -1; }
	.site-branding { margin-right: 0; text-align: center; flex: 1; }
	.site-header__utility { margin-left: 0; }

	.site-nav__toggle { display: inline-block; }

	.primary-menu {
		position: fixed;
		inset: 0;
		margin: 0;
		padding: 6.5rem 2rem 3rem;
		background: var(--header-bg);
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 260ms ease, transform 260ms ease, visibility 260ms ease;
		overflow-y: auto;
		z-index: 150;
	}
	.site-nav.is-open .primary-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.primary-menu > li {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		border-bottom: 1px solid var(--header-hairline);
	}
	.primary-menu > li > a {
		display: block;
		padding: 1.15rem 0;
		font-size: 0.95rem;
		letter-spacing: 0.12em;
	}
	.primary-menu > li > a::after { display: none; }

	.submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		color: var(--header-ivory);
		background: transparent;
		border: 1px solid rgba(244, 236, 224, 0.3);
	}

	.sub-menu {
		position: static;
		transform: none;
		min-width: 0;
		background: transparent;
		border-top: 0;
		box-shadow: none;
		padding: 0 0 0.75rem 0;
		width: 100%;
		display: none;
	}
	.primary-menu > li.is-open > .sub-menu { display: block; }
	.sub-menu a { padding: 0.65rem 0 0.65rem 1rem; font-size: 0.85rem; }

	body.nav-open { overflow: hidden; }

	/* The persistent .site-bag icon (shown at all times on mobile now)
	   covers this affordance, so the in-panel text duplicate stays hidden. */
}