/**
 * LTS header (T1, Figma Nav 100:327): 15px Hearth stripe, 120px Clear bar, logo
 * left, five uppercase links with a Horizon pill on the current one, Deep CTA
 * pill. Markup = parts/header.html (rung 4: the stripe replaces the parent's
 * top strip, no search). Burger below 1024 (derived: no mobile frame).
 */

.lts-header__stripe {
	height: var(--wp--custom--layout--header-stripe);
	padding: 0;
	margin: 0;
}

.lts-header .kd-mainbar {
	--kd-nav-link: var(
		--wp--preset--color--contrast
	); /* Figma #183151 is off-palette: Deep. */
	--kd-burger-bar: var(--wp--preset--color--contrast);
	min-height: 7.5rem; /* 135 - 15 stripe. */
	/* Figma centres the row 5px above the bar's middle: 10px of Clear below it
	   (replaces the parent's 1px rule). */
	border-bottom: 0.625rem solid var(--wp--preset--color--base);
	gap: 1.5rem;
}

/* Logo: 205 x 73, optically 12px outside the column (Figma x100 vs 112). */
.lts-header .kd-brand-badge {
	margin-inline-start: calc(-1 * var(--wp--custom--layout--logo-offset));
}
body .kd-site-header.lts-header .kd-brand-badge img {
	width: 12.8125rem;
	height: auto;
	aspect-ratio: 3028.8 / 1080;
	filter: none;
	transition: none; /* the design has no scrolled shrink: the parent's 38px must not win. */
}

/* Primary links: Regular 16/24, +1px, uppercase. Items 14px wide each side plus a 6px
   gap, so neighbour TEXT sits 34px apart (Figma ~35) while the pills keep 6px between them. */
.lts-header .kd-menu--primary {
	flex-wrap: nowrap;
	gap: 0.375rem; /* C12: pills never touch (6px between any two); the 3px side margins keep the row 170 wide */
	margin-inline: 0.1875rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: var(--wp--custom--typography--tracking-nav);
	text-transform: uppercase;
	white-space: nowrap;
}
.lts-header .kd-menu--primary > li > a {
	padding: 0.5625rem 0.875rem;
	border-radius: var(--wp--custom--radius--pill);
	line-height: 1.5;
}
.lts-header .kd-menu--primary > li > a:hover {
	opacity: 1;
	background: var(--wp--preset--color--tint);
}
/* Current page: Horizon pill, Medium, Tide Dark label (4.9:1 on Horizon). Same pill size
   as a hovered link (C12: it no longer overhangs into its neighbours). */
.lts-header
	.kd-menu--primary
	> li:is(
		.current-menu-item,
		.current_page_item,
		.current-menu-ancestor,
		.current-page-ancestor
	)
	> a {
	background: var(--wp--preset--color--tint);
	color: var(
		--wp--custom--color--small-text
	) !important; /* beats the parent's !important nav colour. */
	font-weight: var(--wp--custom--typography--weight-medium);
}
.lts-header .kd-menu--primary > li > a:focus-visible {
	opacity: 1;
}

/* CTA: Deep pill, Medium 17 +1px (Figma 146 x 49). Rides the foundation button. */
.lts-header .kd-header-cta .wp-block-button__link,
body .lts-header .kd-header-donate .wp-block-button__link {
	min-height: 3.0625rem;
	padding: 0.5rem 1.125rem;
	font-size: 1.0625rem;
	line-height: 1.2;
	white-space: nowrap;
}

/* The brand never shrinks; the links give way instead. */
.lts-header .kd-brand-badge {
	flex: none;
}

/* 1024-1279: the full-size row (logo 205 + links 640 + CTA 155) needs ~1200, so
   the row tightens (derived: no tablet frame) and stays a row, per the "burger
   below 1024" default. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.lts-header .kd-mainbar {
		gap: 1rem;
	}
	.lts-header .kd-brand-badge {
		margin-inline-start: 0;
	}
	body .kd-site-header.lts-header .kd-brand-badge img {
		width: 8.75rem;
	}
	.lts-header .kd-menu--primary {
		font-size: 0.875rem;
	}
	.lts-header .kd-menu--primary > li > a {
		padding-inline: 0.3125rem; /* 5 + 6 gap + 5 = the 16 between texts */
	}
	.lts-header
		.kd-menu--primary
		> li:is(
			.current-menu-item,
			.current_page_item,
			.current-menu-ancestor,
			.current-page-ancestor
		)
		> a {
		margin-inline: 0;
		padding-inline: 0.3125rem;
	}
	.lts-header .kd-header-cta .wp-block-button__link,
	body .lts-header .kd-header-donate .wp-block-button__link {
		padding-inline: 1rem;
		font-size: 0.875rem;
	}
}

/* Burger below 1024 (the parent breaks at 768). */
@media (max-width: 1023.98px) {
	.lts-header .kd-menu-wrap--primary {
		display: none;
	}
	.lts-header .kd-hamburger {
		display: flex;
	}
	.lts-header .kd-mainbar {
		min-height: 5.5rem;
	}
	.lts-header .kd-brand-badge {
		margin-inline-start: 0;
	}
	body .kd-site-header.lts-header .kd-brand-badge img {
		width: 9.5rem;
	}
	.lts-header .kd-header-actions {
		gap: 0.5rem;
	}
}

@media (max-width: 767.98px) {
	.lts-header .kd-mainbar {
		min-height: 4.75rem;
		gap: 0.75rem;
	}
	body .kd-site-header.lts-header .kd-brand-badge img {
		width: 7.5rem;
		height: auto;
	}
	.lts-header .kd-header-cta .wp-block-button__link,
	body .lts-header .kd-header-donate .wp-block-button__link {
		min-height: 2.5rem;
		padding: 0.375rem 1rem;
		font-size: 0.8125rem;
		border-width: var(--wp--custom--control--border);
	}
}

/* Mobile panel (parent slide-in): Deep panel, Horizon-fill CTA (the parent's
   Tide label on white is 3.9:1). */
.lts-header .kd-mobile-panel,
.kd-mobile-panel {
	--kd-mobile-panel-width: min(85%, 22rem);
}
body .kd-mobile-cta .kd-btn.kd-btn-invert-solid {
	background: var(--wp--preset--color--tint);
	border-color: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
}
body .kd-mobile-cta .kd-btn.kd-btn-invert-solid:hover {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* The parent docks sticky sub-navs under --kd-mainbar-height: stripe + bar, per breakpoint. */
:root {
	--kd-mainbar-height: calc(
		7.5rem + var(--wp--custom--layout--header-stripe)
	);
}
@media (max-width: 1023.98px) {
	:root {
		--kd-mainbar-height: calc(
			5.5rem + var(--wp--custom--layout--header-stripe)
		);
	}
}
@media (max-width: 767.98px) {
	:root {
		--kd-mainbar-height: calc(
			4.75rem + var(--wp--custom--layout--header-stripe)
		);
	}
}