/*
Theme Name: Computerhergebruik
Author: Luc van Wijngaarden
Description: Block theme voor Computerhergebruik: een onepage over gratis ophalen, fysieke datavernietiging en hergebruik van computers, plus een contactpagina met ophaalverzoek. Zwart, grijs en turquoise, met een eigen set symbolen.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: computerhergebruik
Tags: block-patterns, block-styles, custom-colors, full-site-editing, one-column
*/

/* -------------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------------- */
:root {
	--ch-ink: var(--wp--preset--color--ink);
	--ch-accent: var(--wp--preset--color--accent);
	--ch-accent-deep: var(--wp--preset--color--accent-deep);
	--ch-line: var(--wp--preset--color--line);
	--ch-line-dark: var(--wp--preset--color--line-dark);
	--ch-ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--ch-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--ch-ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3.5l2 5-2.6 1.6a11.5 11.5 0 0 0 6 6l1.6-2.6 5 2v3.5a2 2 0 0 1-2 2A16.5 16.5 0 0 1 3 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
	}
}

:where([id]) {
	scroll-margin-top: 24px;
}

::selection {
	background: var(--ch-accent);
	color: var(--ch-ink);
}

:focus-visible {
	outline: 3px solid var(--ch-accent);
	outline-offset: 3px;
}

/* Full-width sections sit flush against each other and against header and footer */
:root .wp-site-blocks > * {
	margin-block-start: 0;
}

:root .wp-block-post-content > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Links on dark grounds */
.has-ink-background-color a:where(:not(.wp-element-button)),
.has-graphite-background-color a:where(:not(.wp-element-button)),
.is-style-card-dark a:where(:not(.wp-element-button)) {
	color: var(--ch-accent);
}

/* -------------------------------------------------------------------------
   Texture and decorative symbols
   ------------------------------------------------------------------------- */
.ch-dots {
	background-image: radial-gradient(circle, #23292c 1.2px, transparent 1.6px);
	background-size: 24px 24px;
}

.ch-hero,
.ch-loop-bg,
.ch-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ch-hero::before,
.ch-loop-bg::before,
.ch-cta::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.ch-hero::before {
	right: -160px;
	top: -90px;
	width: 640px;
	height: 640px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%231B2124' stroke-width='.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7A13 13 0 1 1 7 20'/%3E%3Cpath d='M3.5 21.5L7 17l3.5 4.5'/%3E%3C/svg%3E");
}

.ch-loop-bg::before {
	left: -180px;
	bottom: -200px;
	width: 560px;
	height: 560px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171B1D' stroke-width='.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.7-4.4'/%3E%3Cpath d='M4.5 3.5v3.6h3.6'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.7 4.4'/%3E%3Cpath d='M19.5 20.5v-3.6h-3.6'/%3E%3C/svg%3E");
}

.ch-cta::before {
	right: -120px;
	top: -140px;
	width: 520px;
	height: 520px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%230D0F10' stroke-opacity='.1' stroke-width='.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7A13 13 0 1 1 7 20'/%3E%3Cpath d='M3.5 21.5L7 17l3.5 4.5'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   Typography helpers
   ------------------------------------------------------------------------- */
.is-style-eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ch-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	padding: 8px 14px;
	border: 1px solid #2a3033;
	border-radius: 999px;
	background: #121517;
	color: var(--wp--preset--color--mist);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ch-pill::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ch-accent);
}

:root .ch-hero-title {
	margin-top: 28px;
}

.ch-lead {
	max-width: 560px;
}

.ch-measure {
	max-width: 640px;
}

:root .ch-statement {
	max-width: 920px;
	font-size: clamp(40px, 5.6vw, 76px);
	line-height: 1.02;
	letter-spacing: -0.035em;
}

:root .ch-page-title {
	font-size: clamp(46px, 6vw, 80px);
	line-height: 1;
	letter-spacing: -0.04em;
}

.ch-num {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--subtle);
}

.has-ink-background-color .ch-num,
.is-style-card-dark .ch-num {
	color: var(--ch-accent);
}

.ch-small {
	font-size: 13px;
	line-height: 1.35;
}

.ch-breadcrumb {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8a9296;
}

:root .ch-breadcrumb a {
	color: #8a9296;
	text-decoration: none;
}

:root .ch-breadcrumb a:hover {
	color: #fff;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

.ch-arrow .wp-block-button__link::after,
.ch-more a::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--ch-ico-arrow) center / contain no-repeat;
	mask: var(--ch-ico-arrow) center / contain no-repeat;
}

.ch-phone .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--ch-ico-phone) center / contain no-repeat;
	mask: var(--ch-ico-phone) center / contain no-repeat;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 2px;
}

.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1.5px;
	border-color: #3a4246;
}

.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--ch-accent);
}

/* -------------------------------------------------------------------------
   Lists
   ------------------------------------------------------------------------- */
ul.is-style-checks,
ul.is-style-checks-inline,
ol.is-style-steps,
ul.is-style-plain {
	list-style: none;
	padding-left: 0;
}

.is-style-checks {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.is-style-checks li {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 30px;
	padding-left: 44px;
	font-weight: 600;
}

.is-style-checks li::before,
.is-style-checks li::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.is-style-checks li::before {
	left: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ch-ink);
}

.is-style-checks li::after {
	left: 7px;
	width: 16px;
	height: 16px;
	background: var(--ch-accent);
	-webkit-mask: var(--ch-ico-check) center / contain no-repeat;
	mask: var(--ch-ico-check) center / contain no-repeat;
}

.is-style-checks-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	font-size: 15px;
	font-weight: 600;
}

.is-style-checks-inline li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.is-style-checks-inline li::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: var(--ch-accent);
	-webkit-mask: var(--ch-ico-check) center / contain no-repeat;
	mask: var(--ch-ico-check) center / contain no-repeat;
}

.is-style-steps {
	display: flex;
	flex-direction: column;
	gap: 18px;
	counter-reset: ch-step;
	font-size: 15px;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.is-style-steps li {
	position: relative;
	min-height: 32px;
	padding-left: 46px;
	counter-increment: ch-step;
}

.is-style-steps li::before {
	content: counter(ch-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ch-ink);
	color: var(--ch-accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-weight: 600;
	line-height: 32px;
	text-align: center;
}

.is-style-steps strong {
	display: block;
	font-size: 16px;
	color: var(--wp--preset--color--charcoal);
}

.is-style-plain {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* -------------------------------------------------------------------------
   Cards and tiles (group block styles)
   ------------------------------------------------------------------------- */
.is-style-card,
.is-style-card-dark,
.is-style-card-accent,
.is-style-card-outline {
	border-radius: 24px;
	padding: clamp(24px, 3vw, 36px);
}

.is-style-card {
	background: #fff;
	border: 1px solid var(--ch-line);
}

.is-style-card-dark {
	background: var(--wp--preset--color--graphite);
	border: 1px solid var(--ch-line-dark);
	color: #fff;
}

.is-style-card-accent {
	background: var(--ch-accent);
	color: var(--ch-ink);
}

.is-style-card-outline {
	border: 1.5px dashed #3a4246;
}

.is-style-tile {
	padding: 22px;
	border-radius: 20px;
	background: var(--wp--preset--color--surface);
}

:root .ch-card-title {
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	margin-top: 8px;
}

:root .ch-step-title {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

:root .ch-ladder-title {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-top: 8px;
}

.ch-card-sub {
	font-size: 19px;
	font-weight: 700;
}

.ch-tile-title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.ch-tile-text {
	font-size: 14px;
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}

:root .is-layout-flex > .ch-more {
	margin-top: auto;
}

.ch-more {
	padding-top: 8px;
	font-weight: 700;
}

.ch-more a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

:root .ch-highlight {
	border: 1.5px solid var(--ch-accent);
}

.ch-chip {
	display: inline-flex;
	padding: 4px 10px;
	border: 1px solid var(--ch-accent);
	border-radius: 999px;
	color: var(--ch-accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ch-ladder-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ch-tile-title,
.ch-tile-text {
	overflow-wrap: normal;
	hyphens: auto;
}

@media (max-width: 480px) {
	.is-style-tile {
		padding: 18px;
	}

	.ch-tile-title {
		font-size: 15px;
	}
}

/* -------------------------------------------------------------------------
   Photos with badges
   ------------------------------------------------------------------------- */
.ch-photo-wrap {
	position: relative;
}

:root .ch-photo-wrap > * {
	margin: 0;
}

.ch-photo-wrap .wp-block-image img {
	display: block;
	width: 100%;
}

:root .ch-badge {
	position: absolute;
	z-index: 2;
	margin: 0;
	padding: 10px 18px 10px 10px;
	border-radius: 18px;
	background: #fff;
	color: var(--ch-ink);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	line-height: 1.25;
}

.ch-badge p {
	margin: 0;
	font-size: 15px;
}

.ch-badge .ch-small {
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

.ch-badge--1 {
	top: 40px;
	left: -20px;
}

.ch-badge--2 {
	top: 46%;
	right: -20px;
}

.ch-badge--3 {
	bottom: 40px;
	left: -12px;
}

:root .ch-badge--dark {
	right: 24px;
	bottom: -24px;
	padding: 12px 20px 12px 12px;
	background: var(--ch-ink);
	color: #fff;
	box-shadow: 0 18px 40px rgba(13, 15, 16, 0.25);
}

.ch-badge--dark p {
	font-family: var(--wp--preset--font-family--display);
	font-size: 17px;
	font-weight: 700;
}

@media (max-width: 781px) {
	.ch-badge--1,
	.ch-badge--3 {
		left: 8px;
	}

	.ch-badge--2 {
		right: 8px;
	}
}

/* -------------------------------------------------------------------------
   Ticker band
   ------------------------------------------------------------------------- */
:root .ch-ticker-row {
	column-gap: 36px;
	row-gap: 10px;
}

.ch-ticker p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

/* -------------------------------------------------------------------------
   Certificate (datavernietiging)
   ------------------------------------------------------------------------- */
:root .ch-cert {
	position: relative;
	max-width: 460px;
	margin-inline: auto;
	padding: 36px;
	border: 1px solid var(--ch-line);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 30px 60px rgba(13, 15, 16, 0.12);
	transform: rotate(-1.5deg);
}

.ch-cert-meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
}

:root .ch-cert-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.ch-cert-row {
	padding: 13px 0;
	border-top: 1px solid var(--ch-line);
	font-size: 15px;
}

.ch-cert-row:last-child {
	border-bottom: 1px solid var(--ch-line);
}

.ch-cert-row p {
	margin: 0;
}

.ch-cert-row p:first-child {
	color: var(--wp--preset--color--subtle);
}

.ch-cert-row p:last-child {
	font-weight: 600;
	text-align: right;
}

.ch-sign {
	width: 100%;
	padding-top: 8px;
	border-top: 2px dashed #cbd2d4;
	font-size: 14px;
	color: var(--wp--preset--color--subtle);
}

:root .ch-stamp {
	position: absolute;
	right: -16px;
	bottom: 18px;
	width: 116px;
	height: 116px;
	margin: 0;
	border: 3px solid var(--ch-accent-deep);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	color: var(--ch-accent-deep);
	transform: rotate(-14deg);
}

.ch-stamp p {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

@media (max-width: 781px) {
	:root .ch-cert {
		transform: none;
	}

	:root .ch-stamp {
		right: 8px;
	}
}

/* -------------------------------------------------------------------------
   Pull quote
   ------------------------------------------------------------------------- */
:root .ch-pullquote {
	position: relative;
	margin-top: 40px;
	padding: 0 0 0 72px;
	border: 0;
}

.ch-pullquote::before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: -6px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 96px;
	font-weight: 800;
	line-height: 0.8;
	color: var(--ch-accent-deep);
}

:root .ch-pullquote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ch-ink);
}

:root .ch-pullquote cite {
	display: block;
	margin-top: 12px;
	font-size: 15px;
	font-style: normal;
	color: var(--wp--preset--color--subtle);
}

/* -------------------------------------------------------------------------
   CTA
   ------------------------------------------------------------------------- */
.ch-cta-text {
	flex: 1 1 520px;
	min-width: 0;
}

:root .ch-cta-title {
	font-size: clamp(34px, 4.2vw, 52px);
}

/* -------------------------------------------------------------------------
   Logo and symbol blocks
   ------------------------------------------------------------------------- */
:root .wp-block-computerhergebruik-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	text-decoration: none;
}

.wp-block-computerhergebruik-logo svg {
	flex: none;
	color: var(--ch-accent);
}

.ch-wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-size: 23px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: inherit;
}

.ch-wordmark__accent {
	color: var(--ch-accent);
}

.wp-block-computerhergebruik-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: fit-content;
	line-height: 0;
}

.wp-block-computerhergebruik-icon svg {
	display: block;
}

.ch-icon--tile {
	padding: calc(var(--ch-size, 24px) * 0.5);
	border-radius: calc(var(--ch-size, 24px) * 0.55);
}

.ch-icon--dark {
	background: var(--ch-ink);
	color: var(--ch-accent);
}

.ch-icon--accent {
	background: var(--ch-accent);
	color: var(--ch-ink);
}

.ch-icon--graphite {
	background: var(--wp--preset--color--graphite-light);
	color: var(--ch-accent);
}

.ch-icon--outline {
	background: var(--wp--preset--color--graphite);
	border: 1px solid var(--ch-line-dark);
	color: var(--ch-accent);
}

.ch-icon-muted {
	color: #8a9296;
}

/* Icon cluster on the contact hero */
.ch-icon-cluster {
	display: grid;
	grid-template-columns: repeat(3, 84px);
	gap: 14px;
	justify-content: center;
	padding-bottom: 28px;
}

:root .ch-icon-cluster > * {
	margin: 0;
}

:root .ch-icon-cluster .wp-block-computerhergebruik-icon {
	padding: 24px;
	border-radius: 22px;
}

.ch-icon-cluster .ch-lift {
	transform: translateY(28px);
}

/* -------------------------------------------------------------------------
   Contact page
   ------------------------------------------------------------------------- */
:root .ch-aside-title {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

:root .ch-aside-title--small {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

:root .ch-contact-row {
	min-height: 60px;
	padding: 10px 14px;
	border: 1px solid var(--ch-line-dark);
	border-radius: 16px;
	background: var(--wp--preset--color--graphite);
	transition: border-color 0.15s ease;
}

:root .ch-contact-row:hover {
	border-color: var(--ch-accent);
}

.ch-contact-row p {
	margin: 0;
	line-height: 1.3;
}

.ch-contact-row .ch-label {
	font-size: 13px;
	color: var(--wp--preset--color--muted-dark);
}

:root .ch-contact-row a {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.ch-aside-foot {
	padding-top: 20px;
	border-top: 1px solid #23292c;
	font-size: 15px;
	color: var(--wp--preset--color--mist);
}

.ch-aside-foot p {
	margin: 0;
}

.ch-badge-line {
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}

/* Form block wrapper */
.wp-block-computerhergebruik-ophaalformulier {
	padding: clamp(24px, 4vw, 48px);
	border: 1px solid var(--ch-line);
	border-radius: 28px;
	background: #fff;
}

.ch-form-fallback {
	margin: 0;
	padding: 18px 20px;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

/* Contact Form 7, styled through the html_class "ch-form" */
.ch-form fieldset {
	min-width: 0;
	margin: 0 0 40px;
	padding: 0;
	border: 0;
}

.ch-form legend {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.ch-form .ch-step {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ch-ink);
	color: var(--ch-accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.ch-form .ch-hint {
	margin: -12px 0 18px;
	font-size: 15px;
	color: var(--wp--preset--color--subtle);
}

.ch-form .ch-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.ch-form .ch-field {
	display: flex;
	flex: 1 1 240px;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.ch-form .ch-field--wide {
	flex: 2 1 260px;
}

.ch-form .ch-field--narrow {
	flex: 1 1 140px;
}

.ch-form .ch-field--full {
	flex: 1 1 100%;
}

.ch-form .ch-field--select {
	max-width: 320px;
	margin-top: 22px;
}

.ch-form label {
	font-size: 15px;
	font-weight: 600;
}

.ch-form .ch-req {
	color: var(--ch-accent-deep);
}

.ch-form .ch-opt {
	font-weight: 500;
	color: var(--wp--preset--color--subtle);
}

.ch-form .wpcf7-form-control-wrap {
	display: block;
}

.ch-form input[type="text"],
.ch-form input[type="email"],
.ch-form input[type="tel"],
.ch-form select,
.ch-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 50px;
	padding: 12px 14px;
	border: 1.5px solid #cbd2d4;
	border-radius: 12px;
	background: #fff;
	color: var(--wp--preset--color--charcoal);
	font: inherit;
	font-size: 16px;
}

.ch-form textarea {
	min-height: 120px;
	resize: vertical;
}

.ch-form input::placeholder,
.ch-form textarea::placeholder {
	color: #7a8387;
}

.ch-form input:focus,
.ch-form select:focus,
.ch-form textarea:focus {
	border-color: var(--ch-accent-deep);
	outline: none;
	box-shadow: 0 0 0 3px rgba(46, 211, 198, 0.35);
}

.ch-form .wpcf7-checkbox,
.ch-form .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ch-form .wpcf7-list-item {
	margin: 0;
}

.ch-form .wpcf7-checkbox .wpcf7-list-item label,
.ch-form .wpcf7-radio .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 16px;
	border: 1.5px solid #cbd2d4;
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
}

.ch-form .wpcf7-list-item label:hover {
	border-color: var(--ch-accent-deep);
}

.ch-form .wpcf7-list-item label:has(input:checked) {
	border-color: var(--ch-accent-deep);
	background: var(--wp--preset--color--accent-soft);
}

.ch-form input[type="checkbox"],
.ch-form input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ch-accent-deep);
}

.ch-form .ch-callout {
	margin-top: 20px;
	padding: 18px 20px;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

:root .ch-form .ch-callout .wpcf7-list-item label {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 16px;
	font-weight: 700;
}

.ch-form .ch-callout p {
	margin: 4px 0 0 28px;
	font-size: 14px;
	color: var(--wp--preset--color--subtle);
}

.ch-form .ch-submit-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 12px;
	padding-top: 28px;
	border-top: 1px solid var(--ch-line);
}

.ch-form .wpcf7-acceptance .wpcf7-list-item label {
	display: inline-flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	font-weight: 400;
}

.ch-form .wpcf7-submit {
	min-height: 56px;
	padding: 0 30px;
	border: 0;
	border-radius: 999px;
	background: var(--ch-ink);
	color: #fff;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.ch-form .wpcf7-submit:hover {
	background: #23292c;
	transform: translateY(-1px);
}

.ch-form .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ch-form .ch-submit-row > .wpcf7-form-control-wrap,
.ch-form .ch-submit-row > .ch-form-note {
	flex: 1 1 100%;
}

.ch-form .wpcf7-spinner {
	margin: 0;
}

.ch-form .ch-form-note {
	margin: 0;
	font-size: 14px;
	color: var(--wp--preset--color--subtle);
}

.ch-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 14px;
	color: #b42318;
}

.ch-form .wpcf7-response-output {
	margin: 24px 0 0 !important;
	padding: 14px 16px !important;
	border-radius: 12px;
}

/* -------------------------------------------------------------------------
   Header and footer
   ------------------------------------------------------------------------- */
.ch-header {
	border-bottom: 1px solid #23292c;
}

:root .ch-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--mist);
	text-decoration: none;
}

:root .ch-header .wp-block-navigation-item__content:hover {
	color: #fff;
}

.ch-header .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: 24px;
}

:root .ch-header .wp-block-button__link {
	min-height: 44px;
	padding: 0 20px;
	font-size: 15px;
}

:root .ch-footer a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--mist);
	text-decoration: none;
}

:root .ch-footer a:where(:not(.wp-element-button)):hover {
	color: #fff;
}

:root .ch-footer-title {
	margin-bottom: 16px;
	color: var(--ch-accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ch-footer-payoff {
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-weight: 700;
	color: #fff;
}

.ch-iconrow p {
	margin: 0;
}

.ch-footer-bottom {
	padding-top: 24px;
	border-top: 1px solid #23292c;
	font-size: 14px;
	color: #8a9296;
}

.ch-footer-bottom p {
	margin: 0;
}

:root .ch-footer-bottom a:where(:not(.wp-element-button)) {
	color: #8a9296;
}

.ch-legal a + a {
	margin-left: 24px;
}