/*
 * The announce bar. Full-bleed green strip above everything, one line, centred.
 *
 * It is the only inverse context on the page, and it is a link when the whole strip points at the
 * survey, so the hit area is the strip rather than a few words inside it.
 */

.announce {
	padding-block: var(--space-2);
	text-align: center;
}

.announce__inner {
	display: block;
	color: var(--color-text);
	font-size: var(--font-5);
	line-height: var(--leading-snug);
	text-decoration: none;
}

.announce__text {
	color: var(--color-text);
}

/* The call to action inside the line, so the strip reads as one sentence with a destination. */
.announce__cue {
	color: var(--color-text);
	font-weight: var(--weight-medium);
	text-decoration: underline;
	text-decoration-thickness: max(0.06em, var(--border-hairline));
	text-underline-offset: 0.16em;
	transition: text-decoration-color var(--duration) var(--ease);
}

a.announce__inner:hover .announce__cue,
a.announce__inner:focus-visible .announce__cue {
	text-decoration-color: transparent;
}

.announce__sep {
	color: var(--color-text-muted);
	padding-inline: var(--space-05);
}

/* The strip is flush to the viewport, so the ring has to sit inside it or it is clipped away. */
a.announce__inner:focus-visible {
	outline-offset: -4px;
}

@media (max-width: 34rem) {
	.announce {
		/* The line wraps on a phone, so it needs a margin to wrap against rather than the bezel. */
		padding-inline: var(--space-4);
	}

	.announce__inner {
		font-size: var(--font-3);
	}
}