/**
 * Contact form block styles (block-scoped; enqueued only when the block is present).
 * BEM only, prefixed with the block slug. Do not touch the theme's global style.css.
 *
 * Half of this file styles markup the theme does not generate: Contact Form 7
 * builds the controls. Those rules are grouped at the bottom and each one says
 * why it has to reach for a foreign class.
 */

/*
 * The theme ships no global box-sizing, so a rail written as max-width plus
 * padding would hang that padding outside the rail. Scope border-box to the
 * block instead, as every other block here does.
 */
.sws-contact-form,
.sws-contact-form *,
.sws-contact-form *::before,
.sws-contact-form *::after {
	box-sizing: border-box;
}

.sws-contact-form {
	container: sws-contact-form / inline-size;
	position: relative;
	z-index: 1;
	/*
	 * The drifting symbols travel up to 141px on sws-drift, and nothing above
	 * this block clips — neither body nor #page nor .site-main sets overflow —
	 * so without this one of them leaves through the right edge and the page
	 * picks up a horizontal scrollbar.
	 */
	overflow: hidden;
	/*
	 * The reference leaves this section on the plain white body — the only
	 * separation is the contrast between the filled inputs and the page.
	 *
	 * Keep responsive rules off the root: an element cannot be styled by its own
	 * container query.
	 *
	 * The explicit z-index is load-bearing, not decoration. The shapes below sit
	 * at z-index -1 so they pass behind the content, and that only holds while
	 * this element is a stacking context. container-type alone does not make
	 * one — with z-index left at auto they sink past the section and the white
	 * page background swallows them.
	 */
}

.sws-contact-form__inner {
	/* Mobile-first base. Same rail formula as the header, so both stay flush. */
	max-width: min(var(--sws-content, 1116px), 100% - 2 * var(--sws-gutter, 0.75rem));
	margin-inline: auto;
	padding-block: 3.125rem;
}

/*--------------------------------------------------------------
# Section head
--------------------------------------------------------------*/

.sws-contact-form__head {
	margin-bottom: 2.5rem;
	text-align: center;
}

.sws-contact-form__heading {
	margin: 0;
	color: var(--wp--preset--color--heading, #0e314c);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

/*
 * The travelling dot on its rule. Both sizes live here so the block can change
 * them together; --sws-bar-travel is what the shared keyframe in css/base.css
 * reads to know how far to go.
 */
.sws-contact-form__bar {
	--sws-contact-form-bar: 5.625rem;
	--sws-contact-form-dot: 0.625rem;

	position: relative;
	width: var(--sws-contact-form-bar);
	height: 0.3125rem;
	margin: 1.25rem auto;
	border-radius: 30px;
	background: var(--wp--preset--color--accent-soft, #cdf1d8);
}

.sws-contact-form__bar::before {
	--sws-bar-travel: calc(var(--sws-contact-form-bar) - var(--sws-contact-form-dot));

	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--sws-contact-form-dot);
	height: var(--sws-contact-form-dot);
	margin-top: calc(var(--sws-contact-form-dot) / -2);
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #44ce6f);
	animation: sws-bar-dot 3s linear infinite alternate;
}

.sws-contact-form__text {
	max-width: 32.5rem;
	margin: 0 auto;
	color: var(--wp--preset--color--text, #4a6f8a);
	font-size: 0.875rem;
	line-height: 1.9;
}

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

.sws-contact-form__body {
	display: grid;
	gap: 2.5rem;
}

/*--------------------------------------------------------------
# Ways to reach you
--------------------------------------------------------------*/

.sws-contact-form__contacts {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Grid rather than a floated or absolutely placed icon, so a wrapped address
 * keeps its hanging indent — the same shape css/footer.css uses for its
 * contact list.
 */
.sws-contact-form__contact {
	display: grid;
	grid-template-columns: 3.125rem minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
}

.sws-contact-form__contact + .sws-contact-form__contact {
	margin-top: 1.875rem;
}

.sws-contact-form__contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.125rem;
	height: 3.125rem;
	border-radius: 50%;
	background: var(--wp--preset--color--surface-alt, #f7fafd);
	color: var(--wp--preset--color--accent, #44ce6f);
	transition: background-color var(--sws-transition, 0.3s ease), color var(--sws-transition, 0.3s ease);
}

/*
 * Explicit size, not optional: the icons ship with a viewBox and no width or
 * height, and an unsized SVG in HTML falls back to 300x150.
 */
.sws-contact-form__contact-icon svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	stroke-width: 4;
}

.sws-contact-form__contact:hover .sws-contact-form__contact-icon {
	background: var(--wp--preset--color--accent, #44ce6f);
	color: var(--wp--preset--color--surface, #ffffff);
}

.sws-contact-form__contact-label {
	margin: 0 0 0.3125rem;
	color: var(--wp--preset--color--heading, #0e314c);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.sws-contact-form__contact-value {
	margin: 0;
	color: var(--wp--preset--color--text, #4a6f8a);
	font-size: 0.875rem;
	line-height: 1.8;
}

.sws-contact-form__contact-link {
	color: inherit;
	text-decoration: none;
	transition: color var(--sws-transition, 0.3s ease);
}

.sws-contact-form__contact-link:hover,
.sws-contact-form__contact-link:focus-visible {
	color: var(--wp--preset--color--accent, #44ce6f);
}

/*--------------------------------------------------------------
# Form
--------------------------------------------------------------*/

.sws-contact-form__field {
	margin-bottom: 1.125rem;
}

.sws-contact-form__label {
	display: block;
	margin-bottom: 0.625rem;
	color: var(--wp--preset--color--heading, #0e314c);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
}

/*
 * font: inherit is load-bearing. Browsers do not inherit typography into form
 * controls, and the theme has no base layer for them at all — without this the
 * fields render in the browser's default face while everything around them is
 * Montserrat.
 *
 * The grey is the reference's own #eeeeee. The palette has no neutral of that
 * weight: --line is #dbeefd, which is blue and reads as a tint rather than as a
 * filled field, so the value is kept local to this block instead of being forced
 * onto a token that does not mean it.
 */
.sws-contact-form__control {
	--sws-contact-form-field: #eeeeee;

	display: block;
	width: 100%;
	height: 2.8125rem;
	padding: 0.625rem;
	border: 1px solid var(--sws-contact-form-field);
	border-radius: 0;
	background: var(--sws-contact-form-field);
	color: var(--wp--preset--color--heading, #0e314c);
	font: inherit;
	font-size: 0.875rem;
	transition: background-color var(--sws-transition, 0.3s ease), border-color var(--sws-transition, 0.3s ease);
}

textarea.sws-contact-form__control {
	height: auto;
	min-height: 8.75rem;
	resize: vertical;
}

.sws-contact-form__control:focus {
	border-color: var(--wp--preset--color--accent, #44ce6f);
	background: var(--wp--preset--color--surface, #ffffff);
}

.sws-contact-form__control::placeholder {
	color: var(--wp--preset--color--text, #4a6f8a);
	opacity: 0.7;
}

/*
 * The submit button, third of the family after the header CTA and the hero
 * button: green filling with purple from both edges, lifting as it goes.
 *
 * Those two draw the curtain with ::before and ::after halves. This one cannot —
 * CF7 renders [submit] as an <input>, and a replaced element has no pseudo-element
 * boxes. Two background-image layers pinned to opposite edges and grown from 0 to
 * 51% do the same thing with no extra markup. The 51% is the reference's own
 * figure: the overlap is what keeps a seam from showing where the halves meet.
 */
.sws-contact-form__button {
	display: inline-block;
	padding: 0.9375rem 2.5rem;
	border: none;
	border-radius: var(--sws-radius, 4px);
	background-color: var(--wp--preset--color--accent, #44ce6f);
	background-image:
		linear-gradient(var(--wp--preset--color--secondary, #c679e3), var(--wp--preset--color--secondary, #c679e3)),
		linear-gradient(var(--wp--preset--color--secondary, #c679e3), var(--wp--preset--color--secondary, #c679e3));
	background-repeat: no-repeat;
	background-position: left center, right center;
	background-size: 0 100%, 0 100%;
	box-shadow: var(--sws-shadow-button-hover, 0 13px 27px 0 rgb(68 206 111 / 25%));
	color: #ffffff;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
	cursor: pointer;
	appearance: none;
	transition:
		background-color var(--sws-transition, 0.3s ease),
		background-size var(--sws-transition, 0.3s ease),
		box-shadow var(--sws-transition, 0.3s ease),
		transform var(--sws-transition, 0.3s ease);
}

.sws-contact-form__button:hover,
.sws-contact-form__button:focus-visible {
	background-color: var(--wp--preset--color--heading, #0e314c);
	background-size: 51% 100%, 51% 100%;
	box-shadow: var(--sws-shadow-button, 0 13px 27px 0 rgb(198 121 227 / 25%));
	transform: translateY(-5px);
}

.sws-contact-form__notice {
	margin: 0;
	color: var(--wp--preset--color--text, #4a6f8a);
	font-size: 0.875rem;
}

/*--------------------------------------------------------------
# Decorative shapes
--------------------------------------------------------------*/

/*
 * The glyph size lives on the wrapper, not on the root: a container query
 * cannot reach the element that declares the container, and this is the nearest
 * ancestor of every shape that it can reach.
 *
 * The wrapper itself stays out of the flow and unpositioned, so each shape
 * resolves against the block root and the placements below can be read as
 * fractions of the whole section.
 */
.sws-contact-form__shapes {
	--sws-contact-form-icon-size: 2rem;
	--sws-contact-form-bloom-size: 9rem;
}

.sws-contact-form__shape {
	display: none;
	position: absolute;
	z-index: -1;
}

.sws-contact-form__shape img {
	display: block;
}

/*
 * Every symbol in assets/icons/ draws itself with stroke="currentColor", so the
 * colour is set once here on the wrapper and the whole glyph follows. This is
 * the entire reason the shapes are inlined instead of printed as <img>: inside
 * an <img> the icon is a separate document and `color` never reaches it.
 */
.sws-contact-form__shape--icon {
	/* Decoration, not content: it sits behind the form and must stay quiet. */
	opacity: 0.8;
}

.sws-contact-form__shape--accent {
	color: var(--wp--preset--color--accent, #44ce6f);
}

.sws-contact-form__shape--secondary {
	color: var(--wp--preset--color--secondary, #c679e3);
}

.sws-contact-form__shape--tertiary {
	color: var(--wp--preset--color--tertiary, #27eac8);
}

/*
 * Explicit size, not optional: the icons ship with a viewBox and no width or
 * height, and an unsized SVG in HTML falls back to 300x150.
 */
.sws-contact-form__shape-icon {
	display: block;
	width: var(--sws-contact-form-icon-size, 2.5rem);
	height: var(--sws-contact-form-icon-size, 2.5rem);
	stroke-width: 3.5;
}

/*
 * Placements are read off the measured section rather than guessed. At 1440,
 * with a classic 15px scrollbar, the section is 1425x791 with the rail at
 * x 155-1271: the gutters either side are empty full height, and the contact
 * list — Email, YouTube and TikTok, three 54px rows — stops at y 495 while the
 * three-field form runs to y 711, which leaves a 469x216 hole in the lower left.
 * Slot 1 sits in its lower corner and slots 4 and 6 inside it. Slot 4 clears the
 * last row by 18px and keeps that clearance: sws-drift carries it right and
 * down, never back up, its highest keyframe being a single pixel. Those
 * coordinates are in the desktop query; what is here is the narrow layout, where
 * the same percentages would land somewhere else entirely.
 *
 * Which animation a slot gets is not decoration either. sws-drift translates up
 * to 141px to the right, so a slot near the right edge would spend part of every
 * cycle outside the section and be cut off by the root's overflow. Slots against
 * that edge spin instead, which only rotates. The hero settled on the same rule.
 */
.sws-contact-form__shape:nth-child(1) {
	/*
	 * Narrow layout: one column, and the only reliably free ground is the corner
	 * beside the centred heading. Bleeding it off the edge is deliberate — it
	 * reads as a glow entering the frame rather than a circle parked in it.
	 */
	top: 1%;
	right: -6%;
	width: var(--sws-contact-form-bloom-size, 9rem);
	opacity: 0.4;
	animation: sws-rotate-3d 4s linear infinite;
}

.sws-contact-form__shape:nth-child(1) img {
	width: 100%;
	height: auto;
}

.sws-contact-form__shape:nth-child(2) {
	top: 12%;
	left: 3%;
	animation: sws-drift 20s linear infinite;
}

.sws-contact-form__shape:nth-child(3) {
	top: 18%;
	right: 4%;
	animation: sws-spin 22s linear infinite;
}

.sws-contact-form__shape:nth-child(4) {
	bottom: 30%;
	left: 26%;
	animation: sws-drift 20s linear infinite;
}

.sws-contact-form__shape:nth-child(5) {
	top: 6%;
	right: 7%;
	opacity: 0.2;
	animation: sws-bob 5s linear infinite;
}

/* Pushed right of centre on purpose: at left 14% it would land on the bloom. */
.sws-contact-form__shape:nth-child(6) {
	bottom: 10%;
	left: 33%;
	animation: sws-spin 25s linear infinite;
}

.sws-contact-form__shape:nth-child(7) {
	bottom: 26%;
	right: 3%;
	animation: sws-spin 18s linear infinite;
}

.sws-contact-form__shape:nth-child(8) {
	bottom: 4%;
	right: 22%;
	animation: sws-spin 20s linear infinite;
}

/*
 * Two of them below the desktop breakpoint, in opposite corners. The column runs
 * nearly edge to edge there, so anything placed inside it lands on the text
 * rather than behind an empty margin — the third slot tried and sat on the
 * intro paragraph.
 */
.sws-contact-form__shape:nth-child(1),
.sws-contact-form__shape:nth-child(8) {
	display: block;
}

/*--------------------------------------------------------------
# Contact Form 7's own markup
--------------------------------------------------------------*/

/*
 * Everything below reaches for classes the theme does not write. That is the
 * documented exception in the kit's CSS rules — the same one that lets the hero
 * style WYSIWYG output — and it is kept to four rules, because the controls
 * themselves carry our classes through CF7's own class: option.
 *
 * The plugin's stylesheet stays enqueued on pages that hold this block: it hides
 * .screen-reader-response and the hidden-fields fieldset, hides the response
 * until there is something to say, and draws the spinner. Those are behaviour,
 * not decoration, so they are inherited rather than reimplemented, and the rules
 * here only sit on top.
 */

/* CF7 wraps every control in an inline span, which will not take a width. */
.sws-contact-form__cf7 .wpcf7-form-control-wrap {
	display: block;
}

/* The per-field error. Text, not colour alone — a11y rule, and it is also the
   only thing screen readers get through aria-describedby. */
.sws-contact-form__cf7 .wpcf7-not-valid-tip {
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.sws-contact-form__cf7 .wpcf7-not-valid {
	border-color: #dc3232;
}

/* The form-level status line under the button. */
.sws-contact-form__cf7 .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.625rem 0.9375rem;
	font-size: 0.875rem;
	line-height: 1.6;
}

/*--------------------------------------------------------------
# Desktop
--------------------------------------------------------------*/

@container sws-contact-form (min-width: 782px) {

	.sws-contact-form__inner {
		padding-block: 5rem;
	}

	.sws-contact-form__head {
		margin-bottom: 3.75rem;
	}

	.sws-contact-form__heading {
		font-size: 1.75rem;
	}

	/*
	 * The form gets the wider column: its controls need the room, and the
	 * contact list is three short rows. On the measured 1116px rail the split
	 * gives the list 469 and the form 587.
	 *
	 * Top-aligned, not centred. The reference centres its row, but what it has
	 * on the left is a half-screen illustration; ours is a 221px list, and
	 * centring that against a 436px form would hang it in the middle of nowhere
	 * and split one gap into two. The decoration below fills the space instead.
	 */
	.sws-contact-form__body {
		grid-template-columns: 1fr 1.25fr;
		gap: 3.75rem;
		align-items: start;
	}

	/* The gutters and the hole under the contact list open up: show everything. */
	.sws-contact-form__shapes {
		--sws-contact-form-icon-size: 2.5rem;
		--sws-contact-form-bloom-size: 13rem;
	}

	.sws-contact-form__shape:nth-child(n) {
		display: block;
	}

	/*
	 * Two columns, so the bloom leaves the top corner and drops into the hole the
	 * contact list leaves behind it — the largest piece of empty ground in the
	 * section and the reason this decoration exists.
	 */
	.sws-contact-form__shape:nth-child(1) {
		top: auto;
		right: auto;
		bottom: 4%;
		left: 8%;
	}
}

/*--------------------------------------------------------------
# The form alone
--------------------------------------------------------------*/

/*
 * With no way to reach you beside it — render.php adds the modifier when not
 * one contact row is left to print — the form is the only cell of the grid and
 * would land in its first, narrower track. It takes one column of its own
 * instead: 35rem, about the 587px it has beside the list, centred under the
 * centred head.
 *
 * Every rule here carries the modifier, so the two-column layout above does
 * not move.
 */
.sws-contact-form--solo .sws-contact-form__body {
	grid-template-columns: minmax(0, 35rem);
	justify-content: center;
}

/*
 * The decoration was placed for two columns, and three of the eight slots end
 * up on the centred form. Measured the same way as above: the column is 560px
 * in the middle of the section, the form in it some 436px high.
 */
@container sws-contact-form (min-width: 782px) {

	/*
	 * The bloom sat in the hole under the contact list, which is now the form's
	 * own ground. It hangs off the column's left edge instead of a fraction of
	 * the section, so it clears the form at every width: half the column plus a
	 * gap, counted from the middle.
	 */
	.sws-contact-form--solo .sws-contact-form__shape:nth-child(1) {
		right: calc(50% + 17.5rem + 1.5rem);
		left: auto;
	}

	/*
	 * A little higher, and spinning in its corner: a drift from here goes 141px
	 * to the right and 122px down, and while the gutter is narrower than that it
	 * ends up behind the lead under the heading.
	 */
	.sws-contact-form--solo .sws-contact-form__shape:nth-child(2) {
		top: 8%;
		animation: sws-spin 22s linear infinite;
	}

	/*
	 * The speaker drifted across what is now the message field. It moves to the
	 * left gutter and spins there, because a drift from that spot would carry it
	 * back under the form.
	 */
	.sws-contact-form--solo .sws-contact-form__shape:nth-child(4) {
		top: 46%;
		bottom: auto;
		left: 4%;
		animation: sws-spin 24s linear infinite;
	}

	/* The motor would sit on the submit row at every width, so it goes. */
	.sws-contact-form--solo .sws-contact-form__shape:nth-child(6) {
		display: none;
	}
}

/* From here the gutter holds the whole drift, 24px clear of the lead. */
@container sws-contact-form (min-width: 1000px) {

	.sws-contact-form--solo .sws-contact-form__shape:nth-child(2) {
		animation: sws-drift 20s linear infinite;
	}
}

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

/*
 * A preference query, not a width one — the block's breakpoints stay container
 * queries. base.css collapses --sws-duration, which reaches transitions only; a
 * keyframe animation has no such handle, so the component that starts one also
 * stops it.
 */
@media (prefers-reduced-motion: reduce) {

	.sws-contact-form__bar::before {
		animation: none;
	}

	/*
	 * :nth-child(n) matches every shape and costs the same specificity as the
	 * per-slot placement rules above, so this reset wins on source order alone —
	 * no !important needed. The second selector is that same reset at the weight
	 * of the solo variant's rules, which carry one more class.
	 */
	.sws-contact-form__shape:nth-child(n),
	.sws-contact-form--solo .sws-contact-form__shape:nth-child(n) {
		animation: none;
	}

	.sws-contact-form__button:hover,
	.sws-contact-form__button:focus-visible {
		transform: none;
	}
}