/*
 * 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: 1279px) {
	: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 letters are fill="currentColor", so they take the header's
 * text colour: light on this dark bar, and they would turn dark by themselves
 * if the bar ever went white. Height only - the viewBox keeps the proportions.
 * 15px makes it ~134px wide: the Russian tabs leave ~29px spare at 1366px,
 * and the old 117px EcoFlow wordmark used 17px of that.
 */
.site-header__logo-svg {
	display: block;
	height: 15px;
	width: auto;
}

/* The compact mark replaces the wordmark where the bar is too narrow for it. */
.site-header__logo-mark {
	display: none;
	width: 28px;
	height: 28px;
}

@media (max-width: 767px) {
	.site-header__logo-svg {
		display: none;
	}

	.site-header__logo-mark {
		display: block;
	}
}

/* --- 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 1280px 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: 1279px) {
	.site-header__phone-text {
		display: none;
	}

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

/* --- 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 -------------------------------------------------------------- */

/* Matches the breakpoint where the mega menu becomes a drawer. */
@media (max-width: 1279px) {
	/* 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;
	}
}

/* --- Language switcher (UA | RU) ---------------------------------------- */

/*
 * Plain links to the translation of the current page. In the bar on desktop;
 * below 1280px the bar has no room left, so the same switcher sits at the
 * bottom of the drawer menu instead (see mega-menu.css, .mega__lang).
 */
.lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.lang-switch__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 44px;
	padding: 0 2px;
	color: var(--ef-header-fg);
	text-decoration: none;
	opacity: 0.6;
	transition: opacity var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.lang-switch__item:hover,
.lang-switch__item:focus-visible {
	opacity: 1;
	color: var(--ef-header-fg);
}

.lang-switch__item.is-current {
	opacity: 1;
	font-weight: 600;
}

.lang-switch__sep {
	color: var(--ef-header-fg);
	opacity: 0.35;
}

@media (max-width: 1279px) {
	.lang-switch--header {
		display: none;
	}
}

/*
 * Desktop bar: logo, seven menu tabs (with «Монтаж» and «Сервіс»), then the
 * language switcher, the phone number and four icons, all inside the 1320px
 * content box. The full number fits from 1366px once the bar is denser -
 * 13px tabs with 6px padding, a tighter row gap, and no phone glyph next to
 * the digits. Measured on the Russian labels, the longer set. 1280-1365px
 * keeps the tel: icon.
 */
@media (min-width: 1280px) {
	.site-header__row {
		gap: var(--wp--preset--spacing--3);
	}

	.site-header .mega__tab {
		padding: 0 6px;
		font-size: 13px;
	}

	.site-header__phone-text {
		display: none;
	}

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

@media (min-width: 1366px) {
	.site-header__phone-text {
		display: inline;
	}

	.site-header__phone-icon {
		display: none;
	}

	.site-header__phone {
		width: auto;
		padding: 0 6px;
		font-size: 13px;
	}
}