/* ==========================================================================
   Announcement bar

   Above the header and deliberately not sticky: the header follows a visitor
   down the page because navigation is wanted everywhere, and a sale banner is
   not. It is the one place on this site where accent is a background rather
   than a control colour — which is why the whole bar is a link when a link is
   set, so the colour still belongs to something interactive.

   No export covers it, so it is built from theme.json's scale. Nothing in here
   is hardcoded and none of it needed a new token.
   ========================================================================== */

/*
 * No `display` on the bar itself. assets/js/announcement.js hides a dismissed
 * bar with the hidden attribute, and a display declaration here would beat the
 * user agent's [hidden] rule and leave it on screen. The rule below says so
 * explicitly rather than relying on nobody adding one later.
 */
.tfs-announce[hidden] {
	display: none;
}

.tfs-announce {
	color: var(--wp--preset--color--surface);
	background-color: var(--wp--preset--color--accent);
}

.tfs-announce__inner {
	display: grid;
	gap: var(--wp--custom--step--4);
	align-items: center;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	/* The distance from the viewport edge to the content column, as core
	   derives it from the gutter tokens. */
	padding: var(--wp--custom--step--8) var(--wp--style--root--padding-left);
}

/*
 * At 360px the message takes the row and the controls sit under it. Wrapping
 * rather than shrinking is the whole point: an announcement clipped mid-word is
 * worse than one on two lines, and `auto` rows let the text wrap as far as it
 * needs to.
 */
@media (min-width: 782px) {
	.tfs-announce__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--wp--preset--spacing--20);
	}
}

.tfs-announce__message {
	margin: 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	/* Wrap long words rather than let one run past the edge. A ZIP-code-long
	   promo code is exactly the kind of thing an editor pastes in. */
	overflow-wrap: anywhere;
}

.tfs-announce__link {
	color: inherit;
	text-decoration: underline;
}

.tfs-announce__link:hover {
	color: inherit;
	text-decoration: none;
}

/* Focus indicators are exempt from the no-shadow rule: outline, never shadow.
   currentColor, because an accent ring on the accent background is invisible. */
.tfs-announce__link:focus-visible,
.tfs-announce__dismiss:focus-visible {
	outline: var(--wp--custom--focus--width) solid currentColor;
	outline-offset: calc(var(--wp--custom--focus--offset) * -1);
}

.tfs-announce__aside {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--step--4);
}

@media (min-width: 782px) {
	.tfs-announce__aside {
		justify-content: flex-end;
	}
}

.tfs-announce__dismiss {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--control--tap-target-minimum);
	min-height: var(--wp--custom--control--tap-target-minimum);
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.tfs-announce__dismiss:hover {
	opacity: 0.72;
}

/*
 * The bar is slim, so the social icons in it drop their 44px targets to the
 * bar's own height. They are a secondary route to accounts the footer lists in
 * full at full size — not the primary one — and a 44px target here would make
 * a "slim bar" 44px tall.
 */
.tfs-announce .tfs-social__link {
	min-width: var(--wp--preset--spacing--40);
	min-height: var(--wp--preset--spacing--40);
}

.tfs-announce .tfs-social__icon {
	width: var(--wp--custom--step--16);
	height: var(--wp--custom--step--16);
}