/* ------------------------------------------------------------------------- *
 * CERT. See patterns/section-cert-hero.php, section-incident-steps.php and
 * section-cert-requested.php. Loaded only on pages that carry them.
 *
 * The hero is the contact section (.vallem-contact) on white, laid out after
 * Cloudflare's /under-attack-hotline/, so the grid and the form fields come
 * from style.css. The confirmation is danger-dark, Untitled UI Error 700,
 * #B42318: white on it is 6.57:1 and the 85% white of its lines 5.11:1.
 * ------------------------------------------------------------------------- */

/* Links take the colour of the line they sit in: red for the number, grey in
   the fine print, white on the confirmation. theme.json's primary blue is
   1.17:1 on danger-dark. */
.vallem-cert a:not(.wp-element-button) {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.vallem-cert--requested .vallem-cert__intro {
	color: rgb(255 255 255 / 85%);
}

/* A phone number never breaks across lines. */
.vallem-cert a[href^="tel:"] {
	white-space: nowrap;
}

.vallem-cert .vallem-cert__line {
	padding-block-start: var(--wp--preset--spacing--20);
}

/* The number is the call to action. Tabular figures keep the groups even, and
   the tracking is Inter's own for display sizes. */
.vallem-cert__number {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.0223em;
}

.vallem-cert .vallem-cert__number a {
	text-decoration: none;
}

.vallem-cert .vallem-cert__number a:hover,
.vallem-cert .vallem-cert__number a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* ---- Hero ---------------------------------------------------------------- */

/* Cloudflare puts 40px between the heading block and its list; the column's
   own gap is 24. Two classes to clear core's container margin. */
.vallem-cert--hero .vallem-points {
	--vallem-points-icon-size: 20px;

	margin-block-start: var(--wp--preset--spacing--40);
}

/* Their icon tile: 40px, 8px corner, the accent at a tenth. danger-surface is
   that tint in the palette already. */
.vallem-cert--hero .vallem-points__icon {
	box-sizing: content-box;
	margin-block-start: 0;
	padding: 10px;
	border-radius: 8px;
	background-color: var(--wp--preset--color--danger-surface);
}

/* The lead-in becomes a title line over the grey sentence. */
.vallem-cert--hero .vallem-points__text strong {
	display: block;
	margin-block-end: 2px;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* No card: the form sits on the page. Start-aligned so the column does not
   stretch to the copy's height. */
.vallem-cert__form {
	align-self: start;
}

/* Row and wrap, not the vertical flex the block's layout attribute asks for.
   In a column the two 50% fields stack at half width and the button shrinks
   to its label; in a wrapping row Jetpack's width rules put naam and
   organisatie side by side and everything else takes a full line. Two classes
   against core's one-class container rule. */
.vallem-cert__form .wp-block-jetpack-contact-form {
	flex-direction: row;
}

/* Full width and a little taller than the site's other buttons, as the
   reference's is. Jetpack sizes the submit from its own input height, which
   the min-block-size reset takes back. */
.vallem-cert__form .wp-block-jetpack-contact-form :is(.wp-block-button, .wp-block-jetpack-button) .wp-block-button__link {
	inline-size: 100%;
	min-block-size: 0;
	padding-block: 0.8em;
}

/* ---- Confirmation -------------------------------------------------------- */

.vallem-cert--requested {
	display: flex;
	align-items: center;
	min-block-size: 70vh;
	min-block-size: 70svh;
	padding-block: var(--wp--preset--spacing--80);
}

.vallem-cert__inner {
	box-sizing: border-box;
	inline-size: 100%;
	max-width: var(--vallem-content-line);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

.vallem-cert__inner > * {
	max-width: 48rem;
}

/* Without a stored number the slot holds a sentence, not a number, so it is
   set as one. Three classes and !important to get past the preset size. */
.vallem-cert .vallem-cert__callback:not(.is-filled) {
	font-size: var(--wp--preset--font-size--display-small) !important;
	font-weight: 500 !important;
	letter-spacing: -0.022em;
}

/* ---- Steps: van incident naar herstel ------------------------------------ *
 * patterns/section-incident-steps.php. section-steps-media without the
 * picture, so everything but the width and the ramp is style.css.
 *
 * The ramp runs danger to base, red at the incident to white at the report,
 * in even steps instead of style.css's start, plateau, end. Each step sets its
 * share of red and the share of the step after it; style.css still pins the
 * last step and the line into it to the end colour, whatever the count.
 * danger on contrast is 3.67:1.
 * ------------------------------------------------------------------------- */

.vallem-incident-steps .vallem-steps-media__copy > * {
	max-width: 50rem;
}

.vallem-steps-media.vallem-incident-steps {
	--vallem-steps-media-ramp-start: var(--wp--preset--color--danger);
	--vallem-steps-media-ramp-end: var(--wp--preset--color--base);
}

.vallem-incident-steps .vallem-steps-media__step {
	--vallem-incident-red: 20%;
	--vallem-incident-red-next: 20%;
	--vallem-steps-media-tone: color-mix(in srgb, var(--wp--preset--color--danger) var(--vallem-incident-red), var(--wp--preset--color--base));
	--vallem-steps-media-tone-next: color-mix(in srgb, var(--wp--preset--color--danger) var(--vallem-incident-red-next), var(--wp--preset--color--base));
}

.vallem-incident-steps .vallem-steps-media__step:nth-child(1) {
	--vallem-incident-red: 100%;
	--vallem-incident-red-next: 80%;
}

.vallem-incident-steps .vallem-steps-media__step:nth-child(2) {
	--vallem-incident-red: 80%;
	--vallem-incident-red-next: 60%;
}

.vallem-incident-steps .vallem-steps-media__step:nth-child(3) {
	--vallem-incident-red: 60%;
	--vallem-incident-red-next: 40%;
}

.vallem-incident-steps .vallem-steps-media__step:nth-child(4) {
	--vallem-incident-red: 40%;
	--vallem-incident-red-next: 20%;
}