/*
 * Sitewide alert bar.
 *
 * Drawn to the V7 wireframe's alert bar: a small gold pill, the message, a
 * plain gold link and a cross, on the dark the redesign pairs its gold with.
 *
 * Two things stay the theme's rather than the wireframe's, both for contrast,
 * both noted at the rule: the link's gold and the cross's grey. Everything
 * else — sizes, weights, tracking, the pill — follows the wireframe.
 *
 * Loaded only on pages that show the bar — see treg_alert_bar_assets().
 */

/*
 * Hidden for someone who closed it, before the page paints. The class is set
 * by the inline script in the head; see treg_alert_bar_head_script() for why it
 * cannot wait for this file or for the deferred script.
 */
.treg-alert-dismissed .treg-alert {
	display: none;
}

.treg-alert {
	position: relative;
	z-index: 80;
	/* The redesign's dark, which is what its gold is meant to sit on. White
	   text on the gold itself is only 3.6:1 and fails AA — see style.css. */
	background-color: #1e1e1e;
	color: #fff;
	font-family: var(--font-body);
	font-size: 13.5px;
	line-height: 1.4;
	/* Several of the templates this sits above centre their text, and the link
	   inherited it once the row wrapped on a phone. */
	text-align: left;
}

/*
 * Movement, so the bar is noticed rather than read past.
 *
 * It drops in from behind the top edge once, and the gold pill gives two slow
 * pulses and then stops — a loop that never settles turns a notice into a
 * distraction on every page of the site.
 *
 * Both are off under prefers-reduced-motion: the whole point is to catch the
 * eye, which is exactly what that setting asks us not to do.
 */
@media (prefers-reduced-motion: no-preference) {
	.treg-alert {
		animation: treg-alert-drop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.treg-alert .treg-alert__flag {
		/* Starts as the bar finishes dropping. */
		animation: treg-alert-pulse 1.6s ease-in-out 0.5s 2 both;
	}
}

@keyframes treg-alert-drop {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes treg-alert-pulse {
	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(177, 126, 32, 0);
	}

	50% {
		transform: scale(1.06);
		box-shadow: 0 0 0 6px rgba(177, 126, 32, 0.25);
	}
}

/*
 * The same box as the nav and the rest of the site — 85% wide, capped at 1300.
 *
 * Full-bleed, the message sat hard left and the link hard right, so on a wide
 * desktop they were separated by a very large empty gap. Holding them to the
 * nav's width brings them back together and lines the bar up with the header
 * below it.
 */
.treg-alert__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 85%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 9px 0;
}

/*
 * The gold pill. V7 draws this much smaller than a button and rounds it fully:
 * it is a label on the message, not a control, and at button size it read as
 * the thing to press.
 *
 * Sized by its own padding rather than a fixed height, so the capitals sit
 * centred without a correction. The radius is --pdp-radius-pill, the site-wide
 * switch defined in style.css, so this squares up with everything else when the
 * redesign settles that way.
 */
.treg-alert .treg-alert__flag {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 9px;
	border: 0;
	border-radius: var(--pdp-radius-pill);
	/* The button gold and white, like every gold fill on the site (#117). */
	background-color: var(--color-button, #956a1b);
	color: var(--color-button-text, #fff);
	/* The button face, Inter (--btn-font), in small caps as a label. It was
	   Erbaum, which didn't match the buttons. */
	font-family: var(--btn-font);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

/* style.css gives every paragraph a margin and left alignment. */
.treg-alert .treg-alert__message {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	text-align: left;
	color: #fff;
}

.treg-alert .treg-alert__message strong {
	font-weight: 600;
}

/*
 * Gold, semibold, no rule under it, per V7. The underline arrives on hover and
 * focus, which is the wireframe's own behaviour and also what keeps the link
 * from being distinguished by colour alone.
 *
 * The lighter gold, not the wireframe's base one: on #1e1e1e the base is 4.6:1
 * and this is 5.9:1. They read as the same gold, and the link is the one thing
 * here people have to be able to take in at a glance.
 */
.treg-alert .treg-alert__link {
	flex: 0 0 auto;
	color: var(--color-primary-light);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.treg-alert .treg-alert__link:hover,
.treg-alert .treg-alert__link:focus {
	color: var(--color-primary-light);
	text-decoration: underline;
}

.treg-alert .treg-alert__close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 24px is what sets the height of the whole bar, since it is the tallest
	   thing in the row. It is also the smallest a target may be under WCAG
	   2.5.8, so this is as close to the wireframe's 45px bar as the control can
	   get without going under. */
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
	border: 0;
	/* 4.6:1 on the bar. The wireframe's #8f8f8f is 3.5:1, which is thin for a
	   control once you account for how fine the glyph is. */
	color: #a5a5a5;
	cursor: pointer;
	transition: color 0.15s ease;
}

/*
 * The design's own cross, masked rather than dropped in as an <img> so it takes
 * its colour from the button and can change on hover and focus. The glyph in
 * the file runs corner to corner, so it needs no padding of its own.
 */
.treg-alert__close span[aria-hidden] {
	display: block;
	width: 13px;
	height: 13px;
	background-color: currentColor;
	-webkit-mask: url("../images/close-btn.svg") no-repeat center / contain;
	mask: url("../images/close-btn.svg") no-repeat center / contain;
}

/* V7 has no plate behind the cross; the colour change is the whole hover. */
.treg-alert .treg-alert__close:hover,
.treg-alert .treg-alert__close:focus-visible {
	color: #fff;
}

.treg-alert .treg-alert__close:focus-visible {
	outline: 2px solid var(--color-primary-light);
	outline-offset: 2px;
}

.treg-alert .treg-alert__link:focus-visible {
	outline: 2px solid var(--color-primary-light);
	outline-offset: 3px;
}

/*
 * Narrow. The row wraps and the link drops to its own line rather than being
 * squeezed against the close button — at this width the message alone fills
 * the row.
 */
@media only screen and (max-width: 700px) {

	.treg-alert {
		font-size: 13px;
	}


	.treg-alert__inner {
		flex-wrap: wrap;
		gap: 8px 12px;
		padding: 10px 0;
	}

	.treg-alert .treg-alert__message {
		/* Beside the pill, with the close button pulled up onto the first row. */
		flex: 1 1 100%;
		order: 2;
	}

	.treg-alert .treg-alert__flag {
		order: 1;
	}

	.treg-alert .treg-alert__close {
		order: 1;
		margin-left: auto;
	}

	.treg-alert .treg-alert__link {
		flex: 1 1 100%;
		order: 3;
		white-space: normal;
	}
}