/*
 * Site header and account menu.
 * Figma: Header (2221:1873), Account menu open (2214:1887).
 * Below 1024 the layout is our interpretation (no mobile design yet).
 */

.site-header {
	position: relative;
	z-index: 50;
	background: var(--bg);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 18px;
}

.site-header--container .site-header__inner {
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-header--full .site-header__inner {
	padding-inline: 40px;
}

.site-header__start {
	display: flex;
	align-items: center;
	gap: 42px;
	min-width: 0;
}

/* Logo artwork is 128 x 36 inside the 164 x 48 slot of the design. */
.site-header__logo {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	width: 164px;
	height: 48px;
	padding-left: 11px;
}

.site-header__logo img {
	width: 128px;
	height: auto;
}

/* Navigation */

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

.site-nav__link {
	color: var(--ink);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--ease-hover), opacity var(--ease-hover);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
	color: var(--plum);
}


/* Actions */

.site-header__actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
}

.header-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	transition: background-color var(--ease-hover);
}

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

.header-badge {
	position: absolute;
	top: 4px;
	left: 24px;
	padding: 1px 5px;
	border: 2px solid var(--bg);
	border-radius: var(--radius-pill);
	background: var(--red);
	color: var(--bg);
	font-size: var(--fs-tiny);
	font-weight: var(--fw-semibold);
	line-height: normal;
}

.header-badge[hidden] {
	display: none;
}

.site-header__divider {
	width: 1px;
	height: 28px;
	background: var(--line);
}

.header-login {
	padding: 10px 12px;
	color: var(--ink);
	font-size: var(--fs-button);
	font-weight: var(--fw-semibold);
	line-height: normal;
	text-decoration: none;
	transition: color var(--ease-hover);
}

.header-login:hover {
	color: var(--plum);
}

/* Avatar (initials, no Gravatar) */

.avatar {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	background: var(--plum);
	color: var(--bg);
	font-weight: var(--fw-semibold);
	line-height: 1;
}

.avatar--sm {
	width: 36px;
	height: 36px;
	font-size: var(--fs-small);
}

.avatar--md {
	width: 40px;
	height: 40px;
	font-size: var(--fs-body-sm);
}

/* Account pill and menu */

.account-nav {
	position: relative;
}

.account-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 12px 4px 4px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	color: var(--ink);
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--ease-hover), background-color var(--ease-hover);
}

.account-pill:hover {
	border-color: var(--subtle);
}

.account-pill[aria-expanded="true"] {
	border-color: var(--plum);
	background: var(--plum-tint-faint);
	box-shadow: 0 0 0 0.5px var(--plum);
}

.account-pill__text {
	display: flex;
	flex-direction: column;
	line-height: normal;
	white-space: nowrap;
}

.account-pill__name {
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
}

.account-pill__label {
	color: var(--muted);
	font-size: var(--fs-small-sm);
}

.account-pill__chevron {
	transition: transform var(--ease-hover);
}

.account-pill[aria-expanded="true"] .account-pill__chevron {
	transform: rotate(180deg);
}

.account-menu {
	position: absolute;
	top: calc(100% + 27px);
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: min(280px, calc(100vw - 2 * var(--gutter)));
	padding: 8px;
	border: 1px solid var(--border-soft);
	border-radius: 14px;
	background: var(--bg);
	box-shadow: var(--shadow-dropdown);
}

.account-menu[hidden] {
	display: none;
}

.account-menu__profile {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
	padding: 10px 10px 12px;
	border-bottom: 1px solid var(--line);
}

.account-menu__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: normal;
}

.account-menu__name {
	color: var(--ink);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
}

.account-menu__email {
	overflow: hidden;
	color: var(--muted);
	font-size: var(--fs-small);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-menu__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0 0 2px;
	border-bottom: 1px solid var(--line);
	list-style: none;
}

.account-menu__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--radius-control);
	color: var(--ink);
	font-size: var(--fs-body-sm);
	line-height: normal;
	text-decoration: none;
	transition: background-color var(--ease-hover);
}

.account-menu__item:hover,
.account-menu__item:focus-visible {
	background: var(--hover);
	font-weight: var(--fw-semibold);
}

.account-menu__item--logout {
	color: var(--red);
	font-weight: var(--fw-semibold);
}

/* Mobile menu toggle */

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: none;
	cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
	display: block;
	width: 18px;
	height: 1.5px;
	border-radius: 1px;
	background: var(--ink);
	transition: transform var(--ease-hover), opacity var(--ease-hover);
}

.menu-toggle__bars {
	position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-toggle__bars::before {
	top: -6px;
}

.menu-toggle__bars::after {
	top: 6px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars {
	background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/*
 * Overlay: transparent header on top of the Home hero (Figma 2102:9).
 * Wider container (1400) and white text. Dropdown panels keep their normal colours.
 */

.site-header--overlay {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background: transparent;
}

/* The admin bar pushes the page down; keep the header aligned with the hero. */
.admin-bar .site-header--overlay {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header--overlay {
		top: 46px;
	}
}

.site-header--overlay .site-header__inner {
	max-width: calc(var(--container-wide) + 2 * var(--gutter));
	min-height: 112px; /* 18px offset + 76px bar, as in the frame */
}

.site-header--overlay .site-header__logo {
	width: auto;
	height: 56px;
	padding-left: 0;
}

.site-header--overlay .site-header__logo img {
	width: 185px;
}

.site-header--overlay .header-login,
.site-header--overlay .account-pill {
	color: var(--bg);
}

.site-header--overlay .header-login:hover {
	color: var(--bg);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.site-header--overlay .header-icon > img,
.site-header--overlay .account-pill__chevron {
	filter: brightness(0) invert(1);
}

.site-header--overlay .header-icon:hover {
	background: var(--white-25);
}

.site-header--overlay .site-header__divider {
	background: var(--white-25);
}

.site-header--overlay .account-pill {
	border-color: var(--white-25);
}

.site-header--overlay .account-pill:hover,
.site-header--overlay .account-pill[aria-expanded="true"] {
	border-color: var(--bg);
	background: var(--white-25);
	box-shadow: none;
}

.site-header--overlay .account-pill__label {
	color: var(--bg);
	opacity: 0.75;
}

.site-header--overlay .menu-toggle__bars,
.site-header--overlay .menu-toggle__bars::before,
.site-header--overlay .menu-toggle__bars::after {
	background: var(--bg);
}

.site-header--overlay .menu-toggle[aria-expanded="true"] .menu-toggle__bars {
	background: transparent;
}

.site-header--overlay :focus-visible {
	outline-color: var(--bg);
}

.site-header--overlay .account-menu :focus-visible,
.site-header--overlay .mobile-menu :focus-visible {
	outline-color: var(--plum);
}

@media (min-width: 1024px) {
	.site-header--overlay .site-nav__list {
		gap: 26px;
	}

	.site-header--overlay .site-nav__link {
		color: var(--bg);
		font-size: var(--fs-body);
		opacity: 0.92;
	}

	.site-header--overlay .site-nav__link:hover,
	.site-header--overlay .site-nav__link[aria-current="page"] {
		color: var(--bg);
		opacity: 1;
	}
}

/*
 * Mobile menu: full-screen dialog below 1024px.
 * Figma: Home — Mobile 390 / Menu open (2296:2904). Logged-in buttons are our interpretation.
 */

.mobile-menu {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--bg);
	color: var(--ink);
}

.mobile-menu[open] {
	animation: mobile-menu-in 0.2s ease;
}

/* The page behind does not scroll while the menu is open. */
html:has(.mobile-menu[open]) {
	overflow: hidden;
}

.mobile-menu::backdrop {
	background: var(--bg);
}

@keyframes mobile-menu-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

.mobile-menu__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-height: 100%;
	padding: 16px 20px 28px;
}

.mobile-menu__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Same size and place as the logo in the header bar behind it. */
.mobile-menu__logo {
	display: flex;
}

.mobile-menu__logo img {
	width: 128px;
	height: auto;
}

.mobile-menu:focus {
	outline: none;
}

.mobile-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--cream-2);
	cursor: pointer;
	transition: background-color var(--ease-hover);
}

.mobile-menu__close:hover {
	background: var(--line);
}

.mobile-menu__search {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding-left: 16px;
	border-radius: var(--radius-tile);
	background: var(--cream-2);
}

.mobile-menu__search:focus-within {
	box-shadow: 0 0 0 2px var(--plum);
}

.mobile-menu__search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 16px 0 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	outline: none;
}

/* Darker than the design's --subtle, for AA contrast on cream. */
.mobile-menu__search input::placeholder {
	color: var(--muted);
	opacity: 1;
}

.mobile-menu__nav ul,
.mobile-menu__legal {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 16px;
	border-bottom: 1px solid var(--border);
	color: var(--ink);
	font-family: var(--font-heading);
	font-size: var(--fs-h4-sm);
	font-weight: var(--fw-semibold);
	line-height: normal;
	text-decoration: none;
	transition: color var(--ease-hover);
}

.mobile-menu__link img {
	transition: transform var(--ease-hover);
}

.mobile-menu__link:hover,
.mobile-menu__link[aria-current="page"] {
	color: var(--plum);
}

.mobile-menu__link:hover img {
	transform: translateX(3px);
}

.mobile-menu__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
}

.mobile-menu__button {
	width: 100%;
	padding-block: 15px;
}

.mobile-menu__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	font-size: var(--fs-small-sm);
	line-height: normal;
}

.mobile-menu__legal a,
.mobile-menu__legal button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted-2);
	font-family: var(--font-body);
	font-size: var(--fs-small-sm);
	line-height: normal;
	text-decoration: underline transparent;
	cursor: pointer;
	transition: color var(--ease-hover), text-decoration-color var(--ease-hover);
}

.mobile-menu__legal a:hover,
.mobile-menu__legal button:hover {
	color: var(--ink);
	text-decoration-color: currentColor;
}

/* Responsive */

@media (max-width: 1279px) {
	.site-header__start {
		gap: 32px;
	}

	.site-nav__list {
		gap: 28px;
	}
}

@media (max-width: 1023px) {
	.site-header--full .site-header__inner {
		padding-inline: var(--gutter);
	}

	/* Without JS the links wrap instead of collapsing. */
	html:not(.js) .site-nav__list {
		flex-wrap: wrap;
		gap: 8px 20px;
	}

	.js .menu-toggle {
		display: inline-flex;
	}

	/* The nav moves into the mobile menu dialog (template-parts/mobile-menu.php). */
	.js .site-nav {
		display: none;
	}
}

@media (max-width: 767px) {
	.site-header__inner {
		padding-block: 12px;
	}

	.site-header__logo {
		width: auto;
		padding-left: 0;
	}

	.site-header--overlay .site-header__inner {
		min-height: 0;
	}

	/*
	 * Home bar, Figma Home — Mobile 390 (2308:2772): logo and a white menu button only.
	 * Log in moves into the menu; the cart icon stays while the cart has items.
	 */
	.site-header--overlay .site-header__logo {
		height: 44px;
	}

	/* Same logo size as on the other pages (the design's 104px looked smaller). */
	.site-header--overlay .site-header__logo img {
		width: 128px;
	}

	.site-header--overlay .header-login,
	.site-header--overlay .site-header__divider,
	.site-header--overlay .header-icon--cart:has(.header-badge[hidden]) {
		display: none;
	}

	.site-header--overlay .menu-toggle {
		border-radius: var(--radius-control);
		background: var(--bg);
	}

	.site-header--overlay .menu-toggle__bars,
	.site-header--overlay .menu-toggle__bars::before,
	.site-header--overlay .menu-toggle__bars::after {
		width: 13.33px;
		height: 1.67px;
		background: var(--ink);
	}

	.site-header--overlay .menu-toggle__bars::before {
		top: -5px;
	}

	.site-header--overlay .menu-toggle__bars::after {
		top: 5px;
	}

	.site-header__actions {
		gap: 4px;
	}

	.header-icon--secondary,
	.header-register {
		display: none;
	}

	/* Only the avatar shows; the name and "My account" stay for screen readers. */
	.account-pill__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.account-pill {
		padding-right: 8px;
	}

	.account-menu {
		top: calc(100% + 16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu[open] {
		animation: none;
	}

	.mobile-menu__link img,
	.account-pill__chevron,
	.menu-toggle__bars,
	.menu-toggle__bars::before,
	.menu-toggle__bars::after {
		transition: none;
	}
}