/* Quote page + form. Loaded only on template-quote.php (NFR-01).
   Colours come from presets; hairline/cyan alphas derived via color-mix. */

.quote {
	position: relative;
	overflow: hidden;
	padding: var(--wp--preset--spacing--3-xl) 0;
}

.quote__pattern {
	position: absolute;
	right: -230px;
	top: -170px;
	width: 640px;
	height: 640px;
	opacity: 0.2;
	pointer-events: none;
}

.quote__inner {
	position: relative;
	max-width: 760px;
	margin-inline: auto;
	padding-inline: 24px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2-xl);
}

.quote__intro {
	text-align: center;
}

.quote__sub {
	max-width: 600px;
	margin: var(--wp--preset--spacing--sm) auto 0;
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
	text-wrap: pretty;
}

/* What-happens-next stepper */
.quote__steps {
	list-style: none;
	margin: 0;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	position: relative;
	counter-reset: none;
}

.quote__steps::before {
	content: "";
	position: absolute;
	left: calc(16.66% + 20px);
	right: calc(16.66% + 20px);
	top: 20px;
	height: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--hairline) 30%, transparent);
}

.quote__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	color: var(--wp--preset--color--hairline);
	max-width: 190px;
	margin-inline: auto;
}

.quote__step-num {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--ink);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--hairline) 50%, transparent);
	box-sizing: border-box;
	color: var(--wp--preset--color--hairline);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
}

.quote__step--now {
	color: var(--wp--preset--color--paper);
}

.quote__step--now .quote__step-num {
	background: var(--wp--preset--color--orange);
	border: none;
	color: var(--wp--preset--color--ink);
}

.quote__guarantee {
	margin: calc(-1 * var(--wp--preset--spacing--md)) 0 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--hairline);
}

/* Minimal header variant */
.site-header--minimal .site-header__back {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--hairline);
	text-decoration: none;
	white-space: nowrap;
}

.site-header--minimal .site-header__back:hover {
	color: var(--wp--preset--color--aqua);
}

/* Form */
.qform {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2-xl);
}

.qform__section,
.qform__group {
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--md);
}

.qform__group {
	gap: 10px;
}

.qform__legend {
	width: 100%;
	padding: 0 0 var(--wp--preset--spacing--sm);
	margin: 0 0 var(--wp--preset--spacing--md);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--hairline) 30%, transparent);
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.1;
	color: var(--wp--preset--color--cyan);
}

.qform__label {
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.2;
	padding: 0;
}

legend.qform__label {
	margin: 0 0 10px;
}

.qform__req {
	font-weight: 400;
	color: var(--wp--preset--color--hairline);
}

.qform__help {
	margin: 0;
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	color: var(--wp--preset--color--hairline);
}

.qform__grid {
	display: grid;
	gap: var(--wp--preset--spacing--md);
}

.qform__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.qform__field--phone {
	grid-column: 1 / -1;
}

.qform input[type="text"],
.qform input[type="email"],
.qform input[type="tel"],
.qform input[type="url"],
.qform textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0 14px;
	height: 48px;
	background: transparent;
	border: 1px solid var(--wp--preset--color--hairline);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--brand);
	font-size: var(--wp--preset--font-size--base);
}

.qform textarea {
	min-height: 120px;
	height: auto;
	padding: 14px;
	line-height: 1.5;
	resize: vertical;
}

.qform ::placeholder {
	color: var(--wp--preset--color--muted);
}

.qform input:focus,
.qform textarea:focus {
	border-color: var(--wp--preset--color--cyan);
}

.qform input:focus-visible,
.qform textarea:focus-visible,
.qform__submit:focus-visible,
.qform__summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--cyan);
	outline-offset: 2px;
}

.qform [aria-invalid="true"] {
	border-color: var(--wp--preset--color--amber);
}

/* Option pickers: native inputs styled as tiles / chips / rows */
.qform__opts {
	display: grid;
	gap: 8px;
}

.qform__opts--chip {
	display: flex;
	flex-wrap: wrap;
}

.qform__opt {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--hairline) 50%, transparent);
	box-sizing: border-box;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--brand);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.2;
	color: var(--wp--preset--color--paper);
}

.qform__opt:has(input:checked) {
	border-color: var(--wp--preset--color--cyan);
	background: color-mix(in srgb, var(--wp--preset--color--cyan) 8%, transparent);
}

.qform__opt:has(input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--cyan);
	outline-offset: 2px;
}

.qform__opt input {
	appearance: none;
	flex: none;
	width: 14px;
	height: 14px;
	margin: 0;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--hairline);
	background: transparent;
}

.qform__opt input[type="radio"] {
	border-radius: 50%;
}

.qform__opt input:checked {
	border-color: var(--wp--preset--color--cyan);
	background: var(--wp--preset--color--cyan);
}

.qform__opt--tile {
	flex-direction: row;
	align-items: flex-start;
	min-height: 124px;
	padding: 20px;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md);
}

.qform__opt--tile input {
	margin-top: 4px;
}

.qform__opt-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.qform__opt-hint {
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	color: var(--wp--preset--color--hairline);
}

.qform__opt--chip {
	display: inline-flex;
	gap: 10px;
	min-height: 44px;
}

.qform__consent {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
}

.qform__consent input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--wp--preset--color--orange);
}

/* Errors */
.qform__error {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--amber);
}

.qform__summary {
	border: 1px solid var(--wp--preset--color--amber);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--amber);
}

.qform__summary p {
	margin: 0 0 8px;
	font-weight: 700;
}

.qform__summary ul {
	margin: 0;
	padding-left: 1.2em;
}

.qform__summary a {
	color: var(--wp--preset--color--amber);
}

/* Honeypot: offscreen, never display:none on the input */
.qform__hp {
	position: absolute;
	left: -9999px;
}

.qform__submit {
	width: 100%;
	height: 60px;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--ink);
	border: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.qform__submit:hover {
	background: var(--wp--preset--color--amber);
}

.qform__note {
	margin: calc(-1 * var(--wp--preset--spacing--md)) 0 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--hairline);
}

@media (min-width: 640px) {
	.qform__grid {
		grid-template-columns: 1fr 1fr;
	}

	.qform__opts--row.qform__opts--n3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.qform__opts--row.qform__opts--n4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.qform__opts--row.qform__opts--n6 {
		grid-template-columns: repeat(3, 1fr);
	}

	.qform__opts--tile {
		grid-template-columns: 1fr 1fr;
	}
}