/**
 * The pre-launch banner.
 *
 * Every colour, background and border is stated on the element itself: a theme styles `p`, `a`,
 * `button` and `time` directly, and an inherited value loses to any rule that matches the element
 * (the "Welcome back" lesson). Layout-critical rules are at doubled class specificity rather than
 * !important, so a site can still win with one more class.
 */

.avh-pl {
	--avh-pl-bg: #191410;
	--avh-pl-text: #f7f1e6;
	--avh-pl-accent: #c29a4f;
	--avh-pl-font: var(--avh-font-body, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif);

	position: relative;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.55rem 2.75rem;
	background: var(--avh-pl-bg);
	color: var(--avh-pl-text);
	font-family: var(--avh-pl-font);
	font-size: 0.8125rem;
	line-height: 1.45;
	text-align: center;
}

.avh-pl-closed .avh-pl.avh-pl--demo {
	display: none;
}

.avh-pl.avh-pl .avh-pl__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem 0.75rem;
	max-width: 80rem;
	margin: 0;
	padding: 0;
	color: var(--avh-pl-text);
	font: inherit;
	letter-spacing: 0.01em;
}

.avh-pl.avh-pl .avh-pl__tag {
	display: inline-block;
	padding: 0.1rem 0.6rem;
	border: 1px solid var(--avh-pl-accent);
	border-radius: 999px;
	background: transparent;
	color: var(--avh-pl-accent);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.avh-pl.avh-pl .avh-pl__text {
	color: var(--avh-pl-text);
}

/* The demo style is a label in its own right, so it reads as one. */
.avh-pl--demo.avh-pl--demo .avh-pl__text {
	color: var(--avh-pl-accent);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.avh-pl.avh-pl .avh-pl__when time {
	color: var(--avh-pl-text);
	font-weight: 600;
}

.avh-pl.avh-pl .avh-pl__clock {
	color: var(--avh-pl-accent);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.avh-pl.avh-pl .avh-pl__clock[hidden] {
	display: none;
}

/* Once the clock is running the date is still there for screen readers, just not on screen. */
.avh-pl.is-ticking .avh-pl__when {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.avh-pl.avh-pl .avh-pl__link,
.avh-pl.avh-pl .avh-pl__link:visited {
	background: transparent;
	color: var(--avh-pl-text);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--avh-pl-accent);
	text-underline-offset: 0.2em;
}

.avh-pl.avh-pl .avh-pl__link:hover,
.avh-pl.avh-pl .avh-pl__link:focus-visible {
	color: var(--avh-pl-accent);
}

.avh-pl.avh-pl .avh-pl__close {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--avh-pl-text);
	cursor: pointer;
	transform: translateY(-50%);
}

/* display:inline-flex outranks the browser's own [hidden] rule, so say it again. */
.avh-pl.avh-pl .avh-pl__close[hidden] {
	display: none;
}

.avh-pl.avh-pl .avh-pl__close:hover {
	background: rgba(255, 255, 255, 0.08);
}

.avh-pl.avh-pl .avh-pl__link:focus-visible,
.avh-pl.avh-pl .avh-pl__close:focus-visible {
	outline: 2px solid var(--avh-pl-accent);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.avh-pl {
		padding: 0.5rem 2.5rem 0.5rem 1rem;
		font-size: 0.75rem;
	}

	/* No close button to make room for: keep the gutters even. */
	.avh-pl:not(.avh-pl--demo) {
		padding-right: 1rem;
	}
}

@media print {
	.avh-pl {
		display: none;
	}
}