/*
 * Lead form block.
 *
 * Geometry follows docs/figma-template/blocks/contact-us.md — intro column 391,
 * white form card 670x580, 109 between them, 40 of card padding, fields 280x60
 * on a 30 gutter — and docs/figma-template/components/form-fields.md for the
 * parts the layout never drew: visible labels, the consent checkbox, the radio
 * group and every interaction state.
 *
 * Three departures from the template, all deliberate:
 *
 * 1. Fields get a 1px border. The layout draws none at all, which on the white
 *    card leaves the control boundary at 1.06:1 against a required 3:1 — and
 *    form-fields.md calls that out itself. The palette-as-is decision of this
 *    project is about colour values, not about a boundary the layout simply
 *    never drew, so the border uses the existing Body token (3.79:1 on the fill).
 * 2. Checkbox and radio carry a 44px hit area even though their square stays the
 *    26px of the layout: docs/site-spec/technical/04-seo-analytics-quality.md
 *    section 6 asks for it.
 * 3. Contact values are Dark rather than Body. Same reasoning as the hero: the
 *    handle IS the content of the card, and Body lands at 4.16:1. The hierarchy
 *    the layout builds with colour is rebuilt with size and weight.
 *
 * Breakpoints are container queries, not media queries: the editor canvas is
 * narrower than the window, and a media query would style the block for a width
 * it does not actually have. The field grid asks its own container — the form
 * element — because the card is only as wide as the section layout left it.
 */

.sws-lead-form {
	container: sws-lead-form / inline-size;

	/*
	 * The three icon tiles of the layout. They are tints of the palette rather
	 * than colours of their own (01-design-tokens.md lists this family as
	 * derivatives), so they are written out here instead of faked with an
	 * opacity, which lands visibly duller on the warm one.
	 */
	--sws-lf-tile-warm: #fceeec;
	--sws-lf-tile-mint: #eef7f7;
	--sws-lf-tile-sun: #fff7e5;

	/* Field chrome, shared by input, select, textarea and the honeypot's twin. */
	--sws-lf-field-h: 3.75rem; /* 60px */
	--sws-lf-field-inset: 1.25rem; /* 20px */

	/* Containing block for the decorative layer below. */
	position: relative;

	/* The corner figures reach past the section on purpose. */
	overflow: hidden;
}

/* The theme ships no global reset, so keep the box model local to the block. */
.sws-lead-form,
.sws-lead-form *,
.sws-lead-form *::before,
.sws-lead-form *::after {
	box-sizing: border-box;
}

/* Background
--------------------------------------------- */

.sws-lead-form--bg-white {
	background-color: var(--wp--preset--color--white, #fff);
}

.sws-lead-form--bg-shade {
	background-color: var(--wp--preset--color--shade, #f8f8f8);
}

.sws-lead-form--bg-shade-warm {
	background-color: var(--wp--preset--color--shade-warm, #f8efee);
}

.sws-lead-form--bg-shade-mint {
	background-color: var(--wp--preset--color--shade-mint, #e9fbfa);
}

/* Decoration
--------------------------------------------- */

.sws-lead-form__decor {
	/* Shown only once there is room beside the content. */
	display: none;
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.sws-lead-form__shape {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/*
 * In the layout all three figures lie outside the 1170 container — x < 375 and
 * x > 1545 on a 1920 artboard — which section 8 of contact-us.md says outright,
 * adding that below that width they can simply be dropped without losing
 * anything. So each one is anchored to the edge of the content column rather
 * than to a percentage of the section, and each waits for the margin it needs:
 * a percentage would have walked them onto the card as the section narrowed.
 *
 * Content column = container + two gutters = 1230px, so the free margin is
 * (section - 1230) / 2 and the queries below are 1230 + twice each figure's
 * width and gap.
 */
.sws-lead-form__shape--dots {
	right: calc(50% + var(--wp--custom--container, 1170px) / 2 + 1.5rem);
	bottom: 10%;
	width: 4.5rem; /* 72px */
	aspect-ratio: 72 / 77;
	background-image: url("decor/dots.svg");
}

.sws-lead-form__shape--circles {
	left: calc(50% + var(--wp--custom--container, 1170px) / 2 + 1rem);
	top: 2rem;
	width: 2.3125rem; /* 37px */
	aspect-ratio: 37 / 63;
	background-image: url("decor/circles.svg");
}

.sws-lead-form__shape--swirl {
	left: calc(50% + var(--wp--custom--container, 1170px) / 2 + 1rem);
	bottom: 12%;
	width: 8.25rem; /* 132px */
	aspect-ratio: 132 / 76;
	background-image: url("decor/swirl.svg");
}

/* Each figure waits for a margin wide enough to hold it. */
.sws-lead-form__shape--dots,
.sws-lead-form__shape--swirl {
	display: none;
}

/* Layout
--------------------------------------------- */

.sws-lead-form__inner {
	/* Lifts the content above the decoration. */
	position: relative;
	z-index: 1;

	/* 1170px of content plus the gutter, so the column matches the layout exactly. */
	max-width: calc(var(--wp--custom--container, 1170px) + var(--wp--custom--gutter, 1rem) * 2);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--70, clamp(3.5rem, 8vw, 8.5rem));
	padding-inline: var(--wp--custom--gutter, 1rem);

	display: grid;
	gap: var(--wp--preset--spacing--60, 3.5rem);
}

/* Nothing on the left: the card stops being a column and centres on the text width. */
.sws-lead-form--form-only .sws-lead-form__card {
	max-width: 43.125rem; /* 690px — the layout card plus its own gutter. */
	margin-inline: auto;
	width: 100%;
}

/* Intro column
--------------------------------------------- */

.sws-lead-form__head {
	/*
	 * A 44px heading across the full 1170 reads as a banner, not as a heading.
	 * In the two-column layout the column caps it anyway; this is for the
	 * stacked one.
	 */
	max-width: 42rem;
}

.sws-lead-form__eyebrow {
	margin: 0;
	color: var(--wp--preset--color--secondary, #5eb9b3);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 500;
	line-height: 1.5;
}

.sws-lead-form__title {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--huge, 2.75rem);
	font-weight: 700;
	line-height: 1.4;
}

.sws-lead-form__accent {
	padding-bottom: 0.125rem;
	background-image: url("../../assets/brush.svg");
	background-repeat: no-repeat;
	background-position: 0 88%;
	background-size: 100% 0.08em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: var(--wp--preset--color--primary, #ef5743);
}

.sws-lead-form__lead {
	margin: var(--wp--preset--spacing--30, 1.5rem) 0 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.6;
}

/* Contact channels
--------------------------------------------- */

.sws-lead-form__channels {
	/* 162px from the heading in the layout, minus the lead's own margin. */
	margin: var(--wp--preset--spacing--50, 2rem) 0 0;
	padding: 0;
	list-style: none;

	display: grid;
	gap: var(--wp--preset--spacing--50, 2rem);
}

.sws-lead-form__channel {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--30, 1.5rem);
	align-items: center;
}

.sws-lead-form__channel-tile {
	display: grid;
	place-items: center;
	width: 3.5rem; /* 56px */
	height: 3.5rem;
	border-radius: 0.75rem;
}

.sws-lead-form__channel-icon {
	width: 1.5rem; /* 24px */
	height: 1.5rem;
}

/*
 * One colourless file per channel, painted through a mask so the same icon can
 * take any tile colour. The tints repeat the layout: mail warm, phone mint,
 * address sun; the three social channels borrow the same two.
 */
.sws-lead-form__channel--warm .sws-lead-form__channel-tile {
	background-color: var(--sws-lf-tile-warm);
}

.sws-lead-form__channel--warm .sws-lead-form__channel-icon {
	background-color: var(--wp--preset--color--primary, #ef5743);
}

.sws-lead-form__channel--mint .sws-lead-form__channel-tile {
	background-color: var(--sws-lf-tile-mint);
}

.sws-lead-form__channel--mint .sws-lead-form__channel-icon {
	background-color: var(--wp--preset--color--secondary, #5eb9b3);
}

.sws-lead-form__channel--sun .sws-lead-form__channel-tile {
	background-color: var(--sws-lf-tile-sun);
}

.sws-lead-form__channel--sun .sws-lead-form__channel-icon {
	background-color: var(--wp--preset--color--accent, #ffb200);
}

.sws-lead-form__channel-icon--instagram {
	-webkit-mask: url("icons/instagram.svg") no-repeat center / contain;
	mask: url("icons/instagram.svg") no-repeat center / contain;
}

.sws-lead-form__channel-icon--threads {
	-webkit-mask: url("icons/threads.svg") no-repeat center / contain;
	mask: url("icons/threads.svg") no-repeat center / contain;
}

.sws-lead-form__channel-icon--telegram {
	-webkit-mask: url("icons/telegram.svg") no-repeat center / contain;
	mask: url("icons/telegram.svg") no-repeat center / contain;
}

.sws-lead-form__channel-icon--email {
	-webkit-mask: url("icons/mail.svg") no-repeat center / contain;
	mask: url("icons/mail.svg") no-repeat center / contain;
}

.sws-lead-form__channel-icon--phone {
	-webkit-mask: url("icons/phone.svg") no-repeat center / contain;
	mask: url("icons/phone.svg") no-repeat center / contain;
}

.sws-lead-form__channel-icon--address {
	-webkit-mask: url("icons/address.svg") no-repeat center / contain;
	mask: url("icons/address.svg") no-repeat center / contain;
}

.sws-lead-form__channel-body {
	display: grid;
	gap: 0.125rem;
	min-width: 0;
}

.sws-lead-form__channel-label {
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	font-weight: 600;
	line-height: 1.5;
}

.sws-lead-form__channel-value {
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 500;
	line-height: 1.5;
	overflow-wrap: anywhere;
	text-decoration: none;
}

a.sws-lead-form__channel-value:hover,
a.sws-lead-form__channel-value:focus-visible {
	color: var(--wp--preset--color--primary, #ef5743);
	text-decoration: underline;
}

a.sws-lead-form__channel-value:focus-visible {
	outline: 2px solid var(--wp--preset--color--dark, #232d36);
	outline-offset: 2px;
}

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

.sws-lead-form__card {
	padding: clamp(1.5rem, 4cqi, 2.5rem);
	border-radius: var(--wp--custom--radius, 8px);
	background-color: var(--wp--preset--color--white, #fff);

	/* In the layout this shadow is load-bearing: it is what separates the card
	   from a section that has no fill of its own. */
	box-shadow: var(--wp--custom--shadow--card, 0 4px 24px rgba(35, 45, 54, 0.08));
}

.sws-lead-form__placeholder {
	margin: 0;
	padding: var(--wp--preset--spacing--50, 2rem);
	border: 1px dashed var(--wp--preset--color--body, #7b7b8a);
	border-radius: var(--wp--custom--radius, 8px);
	color: var(--wp--preset--color--body, #7b7b8a);
	text-align: center;
}

.sws-lead-form__note {
	margin: var(--wp--preset--spacing--30, 1.5rem) 0 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.5;
}

/* Form fields (markup from Contact Form 7)
--------------------------------------------- */

.sws-lead-form__form {
	/* The field grid measures the form, not the section: the card is only as
	   wide as the two-column layout left it. */
	container: sws-lead-form-fields / inline-size;
	margin: 0;
}

.sws-lead-form .sws-form {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.875rem);
}

.sws-lead-form .sws-form__row {
	display: grid;
	gap: var(--wp--preset--spacing--40, 1.875rem);
}

.sws-lead-form .sws-form__field {
	margin: 0;
	min-width: 0;
}

.sws-lead-form .sws-form__label,
.sws-lead-form .sws-form__legend {
	display: block;
	margin-bottom: 0.5rem;
	padding: 0;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 600;
	line-height: 1.5;
}

/* Visual only: Contact Form 7 puts aria-required on the control itself. */
.sws-lead-form .sws-form__req {
	color: var(--wp--preset--color--primary, #ef5743);
}

.sws-lead-form .sws-form__fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

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

.sws-lead-form .wpcf7-form-control:where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="date"],
	select,
	textarea
) {
	width: 100%;
	min-height: var(--sws-lf-field-h);
	padding: 0.9375rem var(--sws-lf-field-inset);
	border: 1px solid var(--wp--preset--color--body, #7b7b8a);
	border-radius: var(--wp--custom--radius, 8px);
	background-color: var(--wp--preset--color--shade, #f8f8f8);
	color: var(--wp--preset--color--dark, #232d36);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
	transition: border-color var(--wp--custom--transition, 200ms ease), background-color var(--wp--custom--transition, 200ms ease);
}

.sws-lead-form .wpcf7-form-control::placeholder {
	color: var(--wp--preset--color--body, #7b7b8a);
	opacity: 1;
}

.sws-lead-form .wpcf7-form-control:where(textarea) {
	min-height: 12.5rem; /* 200px in the layout. */
	resize: vertical;
}

/* The arrow is drawn here because the layout never drew a select at all and the
   browser's own control would ignore every value above. */
.sws-lead-form .wpcf7-form-control:where(select) {
	appearance: none;
	padding-right: 3rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232d36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--sws-lf-field-inset) center;
	background-size: 1.5rem 1.5rem;
}

.sws-lead-form .wpcf7-form-control:where(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--dark, #232d36);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--dark, #232d36);
	background-color: var(--wp--preset--color--white, #fff);
}

/* Error is never carried by colour alone — .wpcf7-not-valid-tip below spells it out. */
.sws-lead-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--wp--preset--color--primary, #ef5743);
	background-color: var(--wp--preset--color--white, #fff);
}

.sws-lead-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	color: var(--wp--preset--color--primary, #ef5743);
	font-size: var(--wp--preset--font-size--small, 1rem);
	font-weight: 500;
	line-height: 1.4;
}

/* Choices: radio group and the consent checkbox
--------------------------------------------- */

.sws-lead-form .wpcf7-form-control:where(.wpcf7-radio, .wpcf7-acceptance) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var(--wp--preset--spacing--30, 1.5rem);
}

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

.sws-lead-form .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;

	/* The square stays the 26px of the layout; the padding is what turns the row
	   into the ~44px target section 6 of the quality doc asks for. */
	padding-block: 0.5rem;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.5;
	cursor: pointer;
}

.sws-lead-form .wpcf7-list-item input[type="radio"],
.sws-lead-form .wpcf7-list-item input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.625rem; /* 26px */
	height: 1.625rem;
	margin: 0;
	accent-color: var(--wp--preset--color--primary, #ef5743);
	cursor: pointer;
}

.sws-lead-form .wpcf7-list-item input:focus-visible {
	outline: 2px solid var(--wp--preset--color--dark, #232d36);
	outline-offset: 2px;
}

.sws-lead-form .wpcf7-list-item-label a {
	color: var(--wp--preset--color--primary, #ef5743);
}

/* Actions and response
--------------------------------------------- */

.sws-lead-form .sws-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 1rem);
	margin: 0;
}

/*
 * The submit carries wp-element-button, so fill, radius, type and states come
 * from theme.json. Only the layout's own 186x60 box is added here.
 */
.sws-lead-form .wpcf7-submit {
	min-width: 11.625rem; /* 186px */
	min-height: var(--sws-lf-field-h);
	width: auto;
}

.sws-lead-form .wpcf7-submit:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.sws-lead-form .wpcf7-spinner {
	margin: 0;
}

/*
 * Three classes deep on purpose: Contact Form 7's own rule is
 * `.wpcf7 form .wpcf7-response-output`, and anything shorter would depend on
 * which stylesheet the page happened to print last.
 */
.sws-lead-form .sws-lead-form__form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--30, 1.5rem) 0 0;
	padding: 0.75rem 1rem;
	border: 0;
	border-radius: var(--wp--custom--radius, 8px);
	background-color: var(--wp--preset--color--shade, #f8f8f8);
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--small, 1rem);
	line-height: 1.5;
}

.sws-lead-form .sws-lead-form__form.sent .wpcf7-response-output {
	background-color: var(--wp--preset--color--shade-mint, #e9fbfa);
}

.sws-lead-form .sws-lead-form__form:where(.invalid, .unaccepted, .failed, .aborted, .spam) .wpcf7-response-output {
	background-color: var(--sws-lf-tile-warm);
}

/* Success dialog
--------------------------------------------- */

.sws-lead-form__dialog {
	width: min(28rem, calc(100vw - 2rem));
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius, 8px);
	background-color: var(--wp--preset--color--white, #fff);
	box-shadow: var(--wp--custom--shadow--raised, 0 12px 40px rgba(35, 45, 54, 0.14));
	color: var(--wp--preset--color--dark, #232d36);
}

/* ::backdrop is outside the document tree, so it inherits nothing — the colour
   cannot be a token reference here. */
.sws-lead-form__dialog::backdrop {
	background-color: rgba(35, 45, 54, 0.55);
}

.sws-lead-form__dialog[open] {
	animation: sws-lead-form-in 200ms ease-out;
}

@keyframes sws-lead-form-in {

	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
}

.sws-lead-form__dialog-body {
	position: relative;
	padding: var(--wp--preset--spacing--50, 2rem);
	text-align: center;
}

.sws-lead-form__dialog-dismiss {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	margin: 0;
}

.sws-lead-form__dialog-close {
	display: grid;
	place-items: center;

	/* Same 44px target rule as the checkbox row. */
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.sws-lead-form__dialog-close:hover {
	background-color: var(--wp--preset--color--shade, #f8f8f8);
}

.sws-lead-form__dialog-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--dark, #232d36);
	outline-offset: -2px;
}

.sws-lead-form__dialog-title {
	margin: var(--wp--preset--spacing--20, 1rem) 0 0;
	color: var(--wp--preset--color--dark, #232d36);
	font-size: var(--wp--preset--font-size--x-large, 1.5rem);
	font-weight: 700;
	line-height: 1.4;
}

.sws-lead-form__dialog-text {
	margin: var(--wp--preset--spacing--20, 1rem) 0 0;
	color: var(--wp--preset--color--body, #7b7b8a);
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.6;
}

.sws-lead-form__dialog-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20, 1rem);
	margin-top: var(--wp--preset--spacing--50, 2rem);
}

/* The second button is the quieter of the two: same box, outlined instead of filled. */
.sws-lead-form__dialog-button--secondary {
	background-color: transparent;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--dark, #232d36);
	color: var(--wp--preset--color--dark, #232d36);
}

.sws-lead-form__dialog-button--secondary:hover,
.sws-lead-form__dialog-button--secondary:focus {
	background-color: var(--wp--preset--color--dark, #232d36);
	color: var(--wp--preset--color--white, #fff);
}

/* Fields side by side
--------------------------------------------- */

@container sws-lead-form-fields (min-width: 30rem) {

	/* Two columns of 280 on a 30 gutter, exactly as the layout lays them out. */
	.sws-lead-form .sws-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Two columns
--------------------------------------------- */

@container sws-lead-form (min-width: 62rem) {

	/*
	 * 391 : 670 with 109 between them, all three read off the 1170 container of
	 * the layout. The tracks are fr so the ratio survives every width above.
	 */
	.sws-lead-form__inner {
		grid-template-columns: minmax(0, 391fr) minmax(0, 670fr);
		column-gap: clamp(2rem, 6cqi, 6.8125rem);
		align-items: start;
	}

	.sws-lead-form--form-only .sws-lead-form__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Decoration, once there is margin to put it in
--------------------------------------------- */

/* 1230 content box + 2 x (37px figure + 16px gap). */
@container sws-lead-form (min-width: 84rem) {

	.sws-lead-form__decor {
		display: block;
	}
}

/* 1230 + 2 x (72px + 24px). */
@container sws-lead-form (min-width: 89rem) {

	.sws-lead-form__shape--dots {
		display: block;
	}
}

/* 1230 + 2 x (132px + 16px) — the width the layout itself was drawn at. */
@container sws-lead-form (min-width: 96rem) {

	.sws-lead-form__shape--swirl {
		display: block;
	}
}

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

@media (prefers-reduced-motion: reduce) {

	.sws-lead-form__dialog[open] {
		animation: none;
	}

	.sws-lead-form .wpcf7-form-control {
		transition: none;
	}
}