/*
 * AVOLIO questionnaire — the homepage CTA and the first-entry invitation.
 *
 * EVERY CUSTOM PROPERTY IS READ WITH A FALLBACK. These files are loaded by a
 * plugin and the tokens are defined by the theme; a token that is renamed in a
 * theme release must degrade to a correct-looking default here, not to a
 * zero-width band or an invisible button. The fallbacks are the theme's current
 * values, so the degraded state is the intended state.
 *
 * COLOUR PAIRS USED, all from the Avolio palette:
 *   ink        #17211A on page  #F4F2EC   body text
 *   ink        #17211A on stone #E4E5D8   band text
 *   paper      #FFFFFF on ink-brand #004610  the button
 * Lime (#A2C63F) is used ONLY as a rule and never carries text: it does not
 * reach 4.5:1 against either ground.
 */

/* ------------------------------------------------------ the homepage CTA --- */

.eu-qcta {
	--eu-qcta-ink: var( --av-ink, #17211A );
	--eu-qcta-brand: var( --av-ink-brand, #004610 );
	--eu-qcta-stone: var( --av-stone, #E4E5D8 );
	--eu-qcta-paper: #FFFFFF;
	--eu-qcta-lime: #A2C63F;

	display: block;
	margin-block-start: clamp( 3rem, 7vw, 6rem );
	padding-inline: var( --eu-gutter, 1.25rem );
	color: var( --eu-qcta-ink );
}

.eu-qcta__inner {
	position: relative;
	box-sizing: border-box;
	max-width: var( --eu-container, 72rem );
	margin-inline: auto;
	padding: clamp( 1.75rem, 4vw, 3rem ) clamp( 1.25rem, 4vw, 3.5rem );
	background: var( --eu-qcta-stone );
	border-top: 3px solid var( --eu-qcta-lime );
}

.eu-qcta__eyebrow {
	margin: 0 0 0.65rem;
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.72;
}

.eu-qcta__title {
	margin: 0 0 0.5rem;
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: clamp( 1.35rem, 2.6vw, 1.9rem );
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
}

.eu-qcta__body {
	max-width: 52ch;
	margin: 0 0 1.4rem;
	font-size: 1rem;
	line-height: 1.55;
}

.eu-qcta__actions {
	margin: 0;
}

.eu-qcta__button {
	display: inline-block;
	padding: 0.8em 1.6em;
	background: var( --eu-qcta-brand );
	color: var( --eu-qcta-paper );
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 2px solid var( --eu-qcta-brand );
	transition: background-color 160ms ease, color 160ms ease;
}

.eu-qcta__button:hover,
.eu-qcta__button:focus-visible {
	background: transparent;
	color: var( --eu-qcta-brand );
}

.eu-qcta__button:focus-visible {
	outline: 3px solid var( --eu-qcta-ink );
	outline-offset: 3px;
}

/*
 * The band is wide on a wide screen but the reading measure is not: at the
 * container's full width the body line would run past 90 characters, which is
 * where an invitation starts reading as a paragraph of terms.
 */
@media ( min-width: 60rem ) {
	.eu-qcta__inner {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) auto;
		grid-template-areas:
			"eyebrow action"
			"title   action"
			"body    action";
		column-gap: clamp( 2rem, 5vw, 4rem );
		align-items: center;
	}

	.eu-qcta__eyebrow { grid-area: eyebrow; }
	.eu-qcta__title   { grid-area: title; }
	.eu-qcta__body    { grid-area: body; margin-bottom: 0; }

	.eu-qcta__actions {
		grid-area: action;
		align-self: center;
		white-space: nowrap;
	}
}

/* ------------------------------------------------ the invitation dialog --- */

.eu-qinvite[hidden] {
	display: none;
}

.eu-qinvite {
	position: fixed;
	inset: 0;
	z-index: 900; /* Below the consent notice, deliberately. See invitation.js. */
	display: flex;
	align-items: flex-start;
	justify-content: center;

	/*
	 * ANCHORED BELOW THE MASTHEAD, NOT CENTRED IN THE VIEWPORT. The masthead
	 * carries the EU emblem and the campaign lockup, and the footer band
	 * carries the accompanying line and the funding disclaimer. A viewport-
	 * centred dialog covers the first on a short screen; a full-height one
	 * reaches the second.
	 *
	 * `--eu-qinvite-top` IS WRITTEN BY invitation.js FROM A MEASURED
	 * getBoundingClientRect(), not taken from a layout token. The token that
	 * looked right, `--eu-header-sticky-h`, reads 60px while the header renders
	 * 252px tall — see the comment on anchor() for what that cost. The fallback
	 * below is only for the instant before the script runs, and the dialog is
	 * hidden until it does.
	 */
	padding-block-start: calc( var( --eu-qinvite-top, 16rem ) + clamp( 1rem, 4vh, 2.5rem ) );
	padding-block-end: clamp( 1rem, 4vh, 2.5rem );
	padding-inline: var( --eu-gutter, 1.25rem );
	overflow-y: auto;
}

.eu-qinvite__backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 20, 32, 26, 0.55 ); /* --av-dark at 55%. */
}

.eu-qinvite__dialog {
	position: relative;
	box-sizing: border-box;
	width: min( 34rem, 100% );
	max-height: calc( 100vh - var( --eu-qinvite-top, 16rem ) - 6rem );
	overflow-y: auto;
	padding: clamp( 1.5rem, 4vw, 2.25rem );
	padding-inline-end: clamp( 2.75rem, 6vw, 3.25rem ); /* room for the close button */
	background: #FFFFFF;
	color: var( --av-ink, #17211A );
	border-top: 3px solid #A2C63F;
	box-shadow: 0 1.5rem 3rem rgba( 20, 32, 26, 0.28 );
}

.eu-qinvite__close {
	position: absolute;
	inset-block-start: 0.4rem;
	inset-inline-end: 0.4rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.eu-qinvite__close:hover {
	background: var( --av-stone, #E4E5D8 );
}

.eu-qinvite__title {
	margin: 0 0 0.7rem;
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: clamp( 1.2rem, 3.4vw, 1.5rem );
	font-weight: 600;
	line-height: 1.2;
}

.eu-qinvite__body {
	margin: 0 0 1.5rem;
	font-size: 0.98rem;
	line-height: 1.55;
}

.eu-qinvite__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.eu-qinvite__accept {
	display: inline-block;
	padding: 0.75em 1.5em;
	background: var( --av-ink-brand, #004610 );
	color: #FFFFFF;
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid var( --av-ink-brand, #004610 );
}

.eu-qinvite__accept:hover,
.eu-qinvite__accept:focus-visible {
	background: transparent;
	color: var( --av-ink-brand, #004610 );
}

.eu-qinvite__later {
	padding: 0.75em 1.2em;
	background: transparent;
	border: 0;
	color: inherit;
	font-family: inherit;
	font-size: 0.95rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.eu-qinvite__later:hover {
	text-decoration-thickness: 2px;
}

.eu-qinvite :focus-visible {
	outline: 3px solid var( --av-ink, #17211A );
	outline-offset: 3px;
}

/* The page behind a modal does not scroll. */
.eu-qinvite-open,
.eu-qinvite-open body {
	overflow: hidden;
}

/*
 * MOTION IS OPT-OUT, NOT OPT-IN. The dialog appears with a short rise by
 * default and with no movement at all when the reader has asked for reduced
 * motion — and the OPACITY step is dropped too, because a fade is still motion
 * to a reader with vestibular sensitivity.
 */
@media ( prefers-reduced-motion: no-preference ) {
	.eu-qinvite__dialog {
		animation: eu-qinvite-rise 220ms ease-out both;
	}

	@keyframes eu-qinvite-rise {
		from { opacity: 0; transform: translateY( 0.75rem ); }
		to   { opacity: 1; transform: none; }
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.eu-qcta__button,
	.eu-qinvite__accept {
		transition: none;
	}
}

/* A narrow screen gets the full width and the buttons on their own rows. */
@media ( max-width: 26rem ) {
	.eu-qinvite__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.eu-qinvite__accept {
		text-align: center;
	}
}

@media ( forced-colors: active ) {
	.eu-qinvite__dialog {
		border: 1px solid CanvasText;
	}

	.eu-qcta__button,
	.eu-qinvite__accept {
		border: 2px solid ButtonText;
	}
}