/* Utility bar and search overlay. */

.jmns-utility {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	align-items: center;
	justify-content: flex-end;
	/*
	 * Full-bleed band, contained content. Constraining inline-size shrank the
	 * band itself, so the green stopped short of the viewport edge and the
	 * strip read as a floating pill rather than a bar.
	 */
	padding-inline: max(
		var(--wp--preset--spacing--50, 1.5rem),
		calc((100% - var(--wp--style--global--wide-size, 75rem)) / 2)
	);
	/*
	 * White chrome, not a green band. The page descends into its colour instead
	 * of opening with it — see the body gradient in the theme — so the strip is
	 * a surface carrying ink at 14.98:1, where it previously carried the page
	 * ground on interactive at 7.83:1.
	 *
	 * The hairline is doing real work now: without a fill change between this
	 * strip and the masthead below it, the whole top of the page is one white
	 * mass and the strip stops reading as a strip.
	 */
	background-color: var(--wp--preset--color--surface, #FFFFFF);
	color: var(--wp--preset--color--text-primary, #1F2925);
	border-block-end: 1px solid var(--wp--preset--color--divider, #E4EAE6);
	font-size: 0.8125rem;
	/*
	 * Air around the row. Every item in here is a 44px target and the band was
	 * 45px tall, so the controls touched both edges and the strip read as
	 * packed. This is the difference between a 44px control in a 45px box and
	 * the same control in a 56px one.
	 */
	padding-block: var(--wp--preset--spacing--10, 0.25rem);
}

.jmns-utility__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jmns-utility__link,
.jmns-utility__search-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	/* 44px targets even in a compact strip. */
	min-block-size: 44px;
	padding-inline: 0.25rem;
	color: inherit;
	background: transparent;
	border: 0;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.jmns-utility__link:hover,
.jmns-utility__search-toggle:hover {
	text-decoration: underline;
}

.jmns-utility__icon {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	object-fit: contain;
}

.jmns-utility__badge {
	padding: 0.05em 0.4em;
	border-radius: 2px;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--jmns-on-primary, #FFFFFF);
}

/* teal-500 is too light for white text (2.75:1), so this one takes ink instead. */

/*
 * Badge colours. The gold badge takes ink rather than the reversed-out white
 * the other two take — white on this gold is 2.69:1 and fails.
 *
 * That ink is `--jmns-on-gold` and not `text-primary`. The gold moves with the
 * scheme and body ink moves with it in the opposite direction, so the pairing
 * that measures 5.56:1 today measures 1.68:1 under `malam`, where the gold
 * lightens to #CBAE6E and the ink lightens to #DFE6E1, and 3.01:1 under
 * `kontras`, where the gold darkens to #6B5720 and the ink is black. Both are
 * unreadable, and neither declaration looks wrong: they name real tokens and
 * they apply. With an ink token of its own the same badge measures 5.56 / 5.65
 * / 6.98 / 8.80 / 5.00 across the five.
 */
.jmns-utility__badge--primary { background-color: var(--wp--preset--color--interactive, #245746); }
.jmns-utility__badge--error   { background-color: var(--wp--preset--color--error-text, #BD4D4D); }
.jmns-utility__badge--gold    { background-color: var(--wp--preset--color--gold, #B89A58); color: var(--jmns-on-gold, #1F2925); }

/*
 * The strip is a light surface now, so primary-light would be a 2.08:1 focus
 * ring on it — under the 3:1 SC 1.4.11 requires. `interactive` measures 8.31:1
 * here. The overlay keeps its own ring because it still draws over a dark scrim.
 */
.jmns-utility :focus-visible {
	outline: 3px solid var(--wp--preset--color--interactive, #245746);
	outline-offset: 2px;
}

/*
 * The overlay's ring is the scrim's own ink, not `primary-light`.
 *
 * `primary-light` is a brand tint that happens to be pale under `rasmi`; it is
 * #0B2E22 under `kontras`, which is a near-black ring on a near-black scrim.
 * `--jmns-on-scrim` is the token that means "whatever can be seen on the dark
 * chrome", and it stays light under all five because a scrim is dark under all
 * five. It is also better here today: 11.75:1 against primary-light's 4.92:1
 * on this 96% ground.
 */
.jmns-search-overlay :focus-visible {
	outline: 3px solid var(--jmns-on-scrim, #FFFFFF);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- overlay --- */

.jmns-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background-color: rgb(var(--jmns-shade-rgb, 38 51 42) / 0.96);
	overflow-y: auto;
}

.jmns-search-overlay__inner {
	max-inline-size: 44rem;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--60, 3rem) var(--wp--preset--spacing--30, 1rem);
}

.jmns-search-overlay__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.jmns-search-overlay__input {
	flex: 1 1 14rem;
	min-block-size: 48px;
	padding: 0.6rem 0.9rem;
	border: 0;
	font-size: max(1rem, 16px);
}

.jmns-search-overlay__submit,
.jmns-search-overlay__close {
	min-block-size: 48px;
	min-inline-size: 48px;
	padding-inline: 1rem;
	border: 1px solid var(--wp--preset--color--background, #FAF8F2);
	background: transparent;
	color: var(--wp--preset--color--text-primary, #1F2925);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.jmns-search-overlay__results {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
	color: var(--wp--preset--color--text-primary, #1F2925);
}

.jmns-search-overlay__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.jmns-search-overlay__list a {
	color: var(--wp--preset--color--text-primary, #1F2925);
	font-weight: 600;
}

.jmns-search-overlay__meta {
	display: block;
	font-size: 0.8125rem;
	opacity: 0.85;
}

/* Stop the page behind the overlay scrolling. */
body.jmns-search-open {
	overflow: hidden;
}

@media (max-width: 48rem) {
	.jmns-utility {
		justify-content: center;
	}

	/* Labels would wrap to three lines on a phone; icons plus the search
	   button carry it, and each link keeps its accessible name. */
	.jmns-utility__list {
		gap: var(--wp--preset--spacing--20, 0.5rem);
		font-size: 0.75rem;
	}
}