/**
 * Announcement promo banner (soft-gold strip under the slate header).
 *
 * Sibling of pr-popup.css: same token-first approach so the strip
 * takes the host theme's gold / slate / copper tokens and falls back
 * to the same values elsewhere. Palette since 2026-09-18 (client:
 * "logo-gold bar, then the soft-gold banner"; CTA matches the site's
 * other slate buttons; the reminder chip is the only copper left):
 *   strip    --gold-soft #E8C85A, slate-2 ink #3A434A     6.17:1
 *   eyebrow  copper #A0522D chip, white label              5.62:1
 *   CTA      slate #49555C pill, white label               7.67:1
 *            hover slate-2 #3A434A, white label           10.09:1
 *            slate edge vs gold-soft (1.4.11)              4.59:1
 *   close    slate-2 stroke on gold-soft (1.4.11)          6.17:1
 * The 3px logo-gold rule directly above is the header's nav-strip
 * border (theme nav.css), not part of this file.
 * Sticky so it stays reachable once the header scrolls away; the theme
 * drops it in `traxx_pr_banner_slot` right after </header> so the skip
 * link still comes first.
 *
 * Stacking: the strip must sit ABOVE scrolling page content but BELOW
 * the header's dropdown menus, drawers and overlays -- those open into
 * the space the banner occupies. It therefore takes the theme's
 * `--z-banner` (40 in spartan-traxx, under `--z-nav` 50) and falls
 * back to a deliberately low 40 elsewhere.
 */

.traxx-pr-banner {
	position: sticky;
	top: 0;
	z-index: var(--z-banner, 40);
	background: var(--gold-soft, #E8C85A);
	color: var(--slate-blue-2, #3A434A);
	border-bottom: 1px solid var(--rule-light, rgba(0, 0, 0, 0.10));
	font-family: var(--font-body, "Titillium Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	font-size: 0.9375rem;
	line-height: 1.4;
	box-shadow: var(--elev-2, 0 4px 8px -2px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.06));
}

.traxx-pr-banner,
.traxx-pr-banner * {
	box-sizing: border-box;
}

.traxx-pr-banner__inner {
	max-width: var(--max-w, 1200px);
	margin: 0 auto;
	padding: 10px clamp(16px, 3vw, 24px);
	display: flex;
	align-items: center;
	gap: 12px 20px;
	flex-wrap: wrap;
}

.traxx-pr-banner__text {
	margin: 0;
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.traxx-pr-banner__eyebrow {
	display: inline-block;
	padding: 3px 10px;
	background: var(--copper, #A0522D);
	color: #FFFFFF;
	border-radius: var(--r-pill, 50px);
	font-family: var(--font-display, "Oswald", Impact, sans-serif);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: var(--tracking-eyebrow, 0.22em);
	text-transform: uppercase;
	line-height: 1.5;
	white-space: nowrap;
}

.traxx-pr-banner__title {
	font-family: var(--font-display, "Oswald", Impact, sans-serif);
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--slate-blue-2, #3A434A);
}

.traxx-pr-banner__summary {
	color: var(--slate-blue-2, #3A434A);
}

.traxx-pr-banner__cta {
	display: inline-block;
	padding: 9px 22px;
	background: var(--slate-blue, #49555C);
	color: #FFFFFF;
	border-radius: var(--r-pill, 50px);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.traxx-pr-banner__cta:hover {
	background: var(--slate-blue-2, #3A434A);
	color: #FFFFFF;
	transform: translateY(-1px);
	text-decoration: none;
}

.traxx-pr-banner__close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--slate-blue-2, #3A434A);
	border: 1.5px solid var(--slate-blue-2, #3A434A);
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.traxx-pr-banner__close:hover {
	background: var(--slate-blue-2, #3A434A);
	color: var(--gold-soft, #E8C85A);
}

.traxx-pr-banner__cta:focus-visible,
.traxx-pr-banner__close:focus-visible {
	outline: 3px solid var(--slate-blue-2, #3A434A);
	outline-offset: 3px;
}

.traxx-pr-banner[hidden],
.traxx-pr-banner.is-dismissed {
	display: none;
}

@media (max-width: 599px) {
	.traxx-pr-banner__inner {
		padding-top: 12px;
		padding-bottom: 12px;
	}
	/* Row 1: text. Row 2: CTA stretched, close button at the end.
	   DOM order is unchanged so Tab order still matches the visual. */
	.traxx-pr-banner__text {
		flex-basis: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.traxx-pr-banner__cta {
		flex: 1 1 auto;
		text-align: center;
	}
}