/* ==========================================================================
   Divigi — thank-you.css
   The confirmation page shown after a form is submitted (page-thank-you.php).

   A confirmation is read in about four seconds: did it work, what now, where do
   I go. So the page is one centred column with a clear order of reading and
   nothing competing for attention — no cards, no second surface, no imagery.

   Colours come from the theme's own tokens (--primary, --secondary, --border),
   which :root .dark already flips, so this follows the theme toggle for free.
   The brand yellow appears only as the tick and the primary button, which is
   the one thing the eye should land on first.
   ========================================================================== */

.ty-area {
	--ty-ease: cubic-bezier(.22, 1, .36, 1);
	--ty-yellow: #ebf212;

	padding-top: clamp(150px, 20vh, 260px);
	padding-bottom: clamp(90px, 14vh, 170px);
}

.ty-inner {
	/* Centred and capped: a confirmation read across 1480px would have the eye
	   travelling further than the message is worth. */
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
}

/* --------------------------------------------------------------------------
   The tick — the page's single authored moment
   -------------------------------------------------------------------------- */

.ty-mark {
	display: inline-block;
	width: 62px;
	height: 62px;
	margin-bottom: clamp(22px, 3vh, 34px);
}

.ty-mark svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ty-mark-ring {
	stroke: var(--border);
}

.ty-mark-tick {
	stroke: var(--ty-yellow);
	/* Drawn on rather than faded in: the stroke tracing itself reads as the
	   confirmation happening, where a fade reads as a page merely loading. */
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: ty-draw .55s var(--ty-ease) .15s forwards;
}

@keyframes ty-draw {
	to { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   Words
   -------------------------------------------------------------------------- */

.ty-title {
	margin: 0 0 16px;
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--primary);
	text-wrap: balance;
}

.ty-lead {
	margin: 0 auto clamp(34px, 5vh, 52px);
	max-width: 52ch;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--secondary);
}

/* --------------------------------------------------------------------------
   What happens next

   Left-aligned inside the centred column on purpose: three lines of centred
   body text would force the eye to hunt for the start of each one.
   -------------------------------------------------------------------------- */

.ty-steps {
	margin: 0 0 clamp(34px, 5vh, 52px);
	padding: clamp(22px, 3vh, 30px) 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	list-style: none;
	text-align: left;
}

.ty-steps li {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	gap: 14px;
	align-items: baseline;
	margin-bottom: 14px;
}

.ty-steps li:last-child {
	margin-bottom: 0;
}

.ty-step-n {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--secondary);
	font-variant-numeric: tabular-nums;
}

.ty-step-t {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--secondary);
}

.ty-step-t strong {
	color: var(--primary);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Where to go next — a confirmation should never be a dead end
   -------------------------------------------------------------------------- */

.ty-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: clamp(26px, 4vh, 38px);
}

.ty-btn {
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid var(--border);
	border-radius: 100px;
	font-size: 0.9375rem;
	line-height: 1;
	color: var(--primary);
	text-decoration: none;
	transition: border-color .35s var(--ty-ease), color .35s var(--ty-ease),
	            background-color .35s var(--ty-ease);
}

.ty-btn:hover,
.ty-btn:focus-visible {
	border-color: var(--primary);
	color: var(--primary);
}

.ty-btn-primary {
	background: var(--ty-yellow);
	border-color: var(--ty-yellow);
	/* Fixed near-black rather than var(--primary): on the dark theme --primary
	   is white, and white on this yellow is about 1.2:1 — unreadable. The
	   button's own background does not flip with the theme, so its text colour
	   must not either. */
	color: #121212;
	font-weight: 500;
}

.ty-btn-primary:hover,
.ty-btn-primary:focus-visible {
	background: #f4fa4e;
	border-color: #f4fa4e;
	color: #121212;
}

.ty-btn:focus-visible {
	outline: 2px solid var(--ty-yellow);
	outline-offset: 3px;
}

.ty-note {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--secondary);
}

.ty-note a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
	.ty-mark-tick {
		animation: none;
		stroke-dashoffset: 0;
	}

	.ty-btn {
		transition: none;
	}
}