/**
 * The invitation popup and the home-page card.
 *
 * DESIGN POSITION: this is not a new visual language. Every colour and every
 * typeface here is one the campaign already defines in theme.json — ink, page,
 * stone, accent, Fraunces for display, Figtree for text — read through the
 * theme's own custom properties so that a palette change in the theme reaches
 * these components too. The card is a quiet block on a page whose primary
 * visual elements are photography and typography, and it is deliberately not
 * competing with them: no gradient, no glass, no shadow stack, one rule and
 * one button.
 *
 * The fallbacks after each var() are the theme's literal values, so the
 * components still render correctly if this stylesheet is ever loaded on a
 * page where the theme's presets are not.
 */

/* ------------------------------------------------------------------ popup -- */

.eu1144-q-invite {
	position: fixed;
	inset: 0;
	/*
	 * BELOW THE CONSENT UI (90) AND THE SKIP LINK (100), ON PURPOSE.
	 * See the long note in invitation.php: a consent choice must never be
	 * covered by this dialog. The server also refuses to render the popup
	 * before consent is settled; this is the backstop for that.
	 */
	z-index: 80;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
}

.eu1144-q-invite[hidden] {
	display: none;
}

.eu1144-q-invite__scrim {
	position: absolute;
	inset: 0;
	background: rgba( 30, 27, 25, 0.42 );
	opacity: 0;
	transition: opacity 220ms ease;
}

.eu1144-q-invite.is-open .eu1144-q-invite__scrim {
	opacity: 1;
}

.eu1144-q-invite__dialog {
	position: relative;
	width: 100%;
	max-width: 34rem;
	margin: 0;
	padding: 1.75rem 1.5rem 1.5rem;
	background: var( --wp--preset--color--paper, #fff );
	color: var( --wp--preset--color--ink, #333133 );
	border-top: 3px solid var( --wp--preset--color--accent, #f27121 );
	box-shadow: 0 -2px 24px rgba( 30, 27, 25, 0.18 );
	transform: translateY( 12px );
	opacity: 0;
	transition: transform 240ms ease, opacity 240ms ease;
}

.eu1144-q-invite.is-open .eu1144-q-invite__dialog {
	transform: translateY( 0 );
	opacity: 1;
}

.eu1144-q-invite__title {
	margin: 0 0 0.5rem;
	font-family: var( --wp--preset--font-family--display, Fraunces, Georgia, serif );
	font-size: clamp( 1.25rem, 1.05rem + 0.9vw, 1.5rem );
	line-height: 1.2;
}

.eu1144-q-invite__body {
	margin: 0 0 1.25rem;
	font-family: var( --wp--preset--font-family--text, Figtree, Helvetica, Arial, sans-serif );
	font-size: 0.975rem;
	line-height: 1.55;
}

.eu1144-q-invite__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.eu1144-q-invite__accept,
.eu1144-q-card__cta {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	background: var( --wp--preset--color--accent, #f27121 );
	/*
	 * #1E1B19 on #F27121 is about 6.6:1. White on the same orange is only
	 * about 3.1:1 and would fail AA for this text size, which is why the
	 * button's label is dark rather than the more obvious white.
	 */
	color: var( --wp--preset--color--dark, #1e1b19 );
	font-family: var( --wp--preset--font-family--text, Figtree, Helvetica, Arial, sans-serif );
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid var( --wp--preset--color--accent, #f27121 );
	border-radius: 2px;
}

.eu1144-q-invite__accept:hover,
.eu1144-q-invite__accept:focus-visible,
.eu1144-q-card__cta:hover,
.eu1144-q-card__cta:focus-visible {
	background: var( --wp--preset--color--dark, #1e1b19 );
	border-color: var( --wp--preset--color--dark, #1e1b19 );
	color: var( --wp--preset--color--paper, #fff );
}

.eu1144-q-invite__later {
	padding: 0.7rem 0.5rem;
	background: none;
	border: 0;
	color: var( --wp--preset--color--ink, #333133 );
	font-family: var( --wp--preset--font-family--text, Figtree, Helvetica, Arial, sans-serif );
	font-size: 0.925rem;
	/*
	 * UNDERLINED, NOT GREYED OUT. "Maybe later" is a real choice and has to
	 * look like one: styling the refusal as faint secondary text while the
	 * acceptance is a solid button is the standard way a dialog nudges, and
	 * this one must not.
	 */
	text-decoration: underline;
	cursor: pointer;
}

.eu1144-q-invite__close {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	/* 44x44 minimum target, WCAG 2.2 target size. */
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var( --wp--preset--color--ink, #333133 );
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.eu1144-q-invite__accept:focus-visible,
.eu1144-q-invite__later:focus-visible,
.eu1144-q-invite__close:focus-visible,
.eu1144-q-card__cta:focus-visible {
	outline: 3px solid var( --wp--preset--color--dark, #1e1b19 );
	outline-offset: 2px;
}

@media ( min-width: 48em ) {
	.eu1144-q-invite {
		align-items: center;
		padding: 1.5rem;
	}

	.eu1144-q-invite__dialog {
		border-top-width: 4px;
		box-shadow: 0 12px 40px rgba( 30, 27, 25, 0.22 );
	}
}

/* ------------------------------------------------------------------- card -- */

.eu1144-q-card {
	margin: 3.5rem auto;
	max-width: min( 46rem, calc( 100vw - 2.5rem ) );
	background: var( --wp--preset--color--stone, #e8e1d8 );
	border-left: 4px solid var( --wp--preset--color--accent, #f27121 );
}

.eu1144-q-card__inner {
	padding: 1.75rem 1.5rem;
}

.eu1144-q-card__eyebrow {
	margin: 0 0 0.4rem;
	font-family: var( --wp--preset--font-family--text, Figtree, Helvetica, Arial, sans-serif );
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink, #333133 );
	opacity: 0.72;
}

.eu1144-q-card__title {
	margin: 0 0 0.5rem;
	font-family: var( --wp--preset--font-family--display, Fraunces, Georgia, serif );
	font-size: clamp( 1.3rem, 1.1rem + 1vw, 1.75rem );
	line-height: 1.15;
	color: var( --wp--preset--color--dark, #1e1b19 );
}

.eu1144-q-card__body {
	margin: 0 0 1.25rem;
	max-width: 42ch;
	font-family: var( --wp--preset--font-family--text, Figtree, Helvetica, Arial, sans-serif );
	font-size: 1rem;
	line-height: 1.55;
	color: var( --wp--preset--color--ink, #333133 );
}

@media ( min-width: 48em ) {
	.eu1144-q-card__inner {
		padding: 2.25rem 2.5rem;
	}
}

/* --------------------------------------------------------------- motion -- */

/*
 * The transitions are shortened to a value the browser still treats as a
 * transition rather than removed entirely: a duration of 0 can cancel the
 * transitionend bookkeeping some browsers do, and the dialog's appearance
 * must not depend on an event that never fires. Nothing here moves by more
 * than 12px in any case.
 */
@media ( prefers-reduced-motion: reduce ) {
	.eu1144-q-invite__scrim,
	.eu1144-q-invite__dialog {
		transition-duration: 1ms;
		transform: none;
	}
}