/*
 * Site header.
 *
 * Modelled on ecoflow.com/us: a thin black bar, white wordmark, white nav
 * centred between the logo and the controls, and a white pill button on the
 * right. Measured from that site: 45px tall, #000 ground, nav at 14px/500 with
 * 12px of padding either side of each label, pill at 12px with a full radius.
 *
 * Ours is 48px rather than 45px - the icon controls need a 44px touch target
 * and 45px leaves no room around it. Everything else follows the reference.
 *
 * The bar is constant: one height, one colour, on every page and at every
 * scroll position. There is no transparent-over-hero state and no shrink, so
 * nothing about it moves while scrolling.
 */

:root {
	--ef-header-h: 48px;
}

@media (max-width: 899px) {
	:root {
		--ef-header-h: 56px;
	}
}

/* The bar is fixed, so the space it would occupy is paid for once here. */
.wp-site-blocks {
	padding-top: var(--ef-header-h);
}

.site-header {
	--ef-header-fg: var(--wp--preset--color--base);

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base-darker);
}

.site-header__row {
	height: var(--ef-header-h);
	align-items: center;
	gap: var(--wp--preset--spacing--5);
}

/*
 * Centering the tab strip does NOT need overriding the row's own flex
 * layout: `.mega { flex-grow: 1 }` (mega-menu.css) already claims exactly
 * the real space between the logo and the actions cluster - no more, no
 * less - and `.mega__tabs { justify-content: center }` already centres the
 * tab list inside that space. That combination is the correct fix on its
 * own, because it centres the tabs relative to however wide the logo and
 * actions actually are, at any viewport, with no risk of the tabs
 * colliding with either side (unlike forcing two equal-width flanking grid
 * columns, which starts overlapping the actions cluster the moment it is
 * wider than half the remaining space - true here once the phone number
 * chip was added). No override needed here at all.
 */

/* --- Logo ------------------------------------------------------------- */

.site-header__logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.site-header__logo-link {
	display: inline-flex;
	align-items: center;
	color: var(--ef-header-fg);
	transition: opacity var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.site-header__logo-link:hover {
	opacity: 0.7;
	color: var(--ef-header-fg);
}

/*
 * The wordmark's own paths are fill="currentColor", so it takes the header's
 * text colour: light on this dark bar, and it would turn dark by itself if the
 * bar ever went white. Height only - the viewBox keeps the proportions.
 */
.site-header__logo-svg {
	display: block;
	height: 13px;
	width: auto;
}

@media (max-width: 899px) {
	.site-header__logo-svg {
		height: 12px;
	}
}

/* --- Controls ----------------------------------------------------------- */

.site-header__actions {
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	flex-shrink: 0;
}

.site-header__account,
.site-header__cart,
.site-header__search summary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--ef-header-fg);
	border-radius: var(--wp--custom--radius--md);
	transition: opacity var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.site-header__account:hover,
.site-header__cart:hover,
.site-header__search summary:hover {
	opacity: 0.65;
	color: var(--ef-header-fg);
}

/* --- Phone number ------------------------------------------------------- */

/*
 * A `tel:` chip on the left edge of the actions cluster: phone icon + the
 * human-formatted number. Visible on desktop only — below ~900px the label
 * would fight the search/account/cart icons for width, so the label is
 * hidden there and only the icon (still a `tel:` link) remains, keeping
 * the number reachable at every breakpoint.
 */
.site-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 12px;
	color: var(--ef-header-fg);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.site-header__phone:hover {
	opacity: 0.75;
	color: var(--ef-header-fg);
}

.site-header__phone-icon {
	flex-shrink: 0;
	display: block;
}

@media (max-width: 899px) {
	.site-header__phone-text {
		display: none;
	}

	.site-header__phone {
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
	}
}

/* --- Store pill --------------------------------------------------------- */

/*
 * The white pill from the reference header. Ours is 32px rather than their
 * 24px so it stays a comfortable target next to the 44px icons.
 */
.site-header__store {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	margin-left: var(--wp--preset--spacing--2);
	padding: 0 16px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base-darker);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: opacity var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.site-header__store:hover {
	opacity: 0.85;
	color: var(--wp--preset--color--base-darker);
}

/* --- Search disclosure -------------------------------------------------- */

.site-header__search {
	position: relative;
}

.site-header__search summary {
	list-style: none;
	cursor: pointer;
}

.site-header__search summary::-webkit-details-marker {
	display: none;
}

.site-header__search[open] summary {
	opacity: 0.65;
}

.site-header__search .wp-block-search {
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--2));
	right: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--lg);
	padding: var(--wp--preset--spacing--3);
	width: min(340px, calc(100vw - var(--wp--preset--spacing--10)));
	animation: ef-popover-in var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

@keyframes ef-popover-in {
	from {
		transform: translateY(-8px);
	}
}

/* The popover is a light card, so its text opts out of the header token. */
.site-header__search .wp-block-search,
.site-header__search .wp-block-search input {
	color: var(--wp--preset--color--contrast);
}

/* --- Cart --------------------------------------------------------------- */

.site-header__cart {
	position: relative;
}

.site-header__cart-count {
	position: absolute;
	top: 4px;
	right: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base-darker);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.site-header__cart-count.is-bumped {
	animation: ef-badge-bump 420ms var(--wp--custom--ease--out);
}

@keyframes ef-badge-bump {
	40% {
		transform: scale(1.35);
	}
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 899px) {
	/* No room for the pill beside the icons and the menu button. */
	.site-header__store {
		display: none;
	}
}

/* Matches the breakpoint where the mega menu becomes a drawer. */
@media (max-width: 899px) {
	/* Order: hamburger, logo, then search + cart. */
	.site-header__nav {
		order: 1;
		flex-grow: 0;
	}

	.site-header__logo {
		order: 2;
		flex-grow: 1;
	}

	.site-header__actions {
		order: 3;
	}

	.site-header__row {
		gap: var(--wp--preset--spacing--2);
	}

	/* Account lives inside the overlay menu on small screens. */
	.site-header__account {
		display: none;
	}
}