/* Contact page — patterns/contact-form.php and patterns/locations.php.
 * Both patterns share this one stylesheet (AGENTS.md §12a) since they only
 * ever appear together on the Contact page. Everything expressible as a
 * block attribute (padding, radius, background, blockGap desktop value)
 * is already set inline in the pattern markup; this file only carries what
 * block attributes cannot — responsive overrides, hover/focus states, and
 * the bare <input>/<textarea> elements that have no core block equivalent.
 */

/* ---- Section / container: rail padding as a literal rule ----
 * WRAPPER (.idia-contact-form-section, .idia-locations-section) is
 * align:full with layout:constrained, so WordPress's has-global-padding
 * de-dup rule zeroes CONTAINER's own auto-applied root padding — the exact
 * collision documented in AGENTS.md §8.1a and already solved the same way
 * by blogs.css/pricing.css/gallery.css/work.css: a literal padding rule
 * reading --wp--custom--rail directly, not reliance on WordPress's
 * root-padding re-application. Confirmed by measurement: without this rule
 * .idia-contact-form-section__container computed padding-left:0, matched by
 * the de-dup selector `.has-global-padding :where(...) > .has-global-padding`
 * — the same rule work.css's own comment names. !important wins the
 * specificity tie against that core-generated rule, which prints after this
 * enqueued file.
 */
.idia-contact-form-section__container,
.idia-locations-section__container {
	padding-left: var(--wp--custom--rail) !important;
	padding-right: var(--wp--custom--rail) !important;
}

/* ---- Form controls ----
 * No core block renders a bare <input>/<textarea>, so these come from the
 * core/html blocks bracketing the field markup in contact-form.php. Values
 * match .input-field-new in the reference: 1px border-light, radius 12,
 * height 56px, padding 12/12/12/16, placeholder in secondary, focus border
 * in the accent (primary) colour — all via existing presets.
 */
/* ---- Content column: left-anchored, not centred ----
 * CONTAINER is layout:constrained (required — see the pattern's structure
 * comment and AGENTS.md §8.1a), and WordPress's constrained-layout rule
 * `.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))`
 * sets `margin-left: auto !important; margin-right: auto !important` on
 * every child. That centred this 1000px column inside the 1376px rail box:
 * measured margin-left 188px, left edge x=220 at 1440 instead of x=32.
 *
 * AGENTS.md §8.3: the rail decides where a line STARTS, the measure decides
 * where it STOPS — text is never centred inside a wider container to
 * simulate a measure. So the fix is to return the auto margins to 0, not to
 * drop the measure. !important is required to answer core's own
 * !important; the rule is scoped to this one element rather than the
 * generic constrained selector, which 8-10 elements per page depend on.
 *
 * Caught by the layout audit's 1-rail invariant (left edge 220.0px;
 * expected 32px), not by eye — changing the block's own layout type does
 * nothing here, because the rule that centres it belongs to its PARENT.
 */
.idia-contact-form__content {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---- Vertical rhythm ----
 * Everything expressible as blockGap is set in the pattern markup so the
 * site owner can change it in the editor (badge→details 64, form row→row
 * 24, label→input 12, first name↔email 16, detail↔detail 16, label→value
 * 8). Only what blockGap cannot express lives here: the details→form 44
 * offset with its two responsive steps, and the last row→submit 16.
 *
 * details → form: 44 desktop, 32 ≤991, 24 ≤767 — the reference's
 * .form-block margin-top. CONTENT's blockGap (64) would otherwise apply
 * between them, so this overrides the flow margin rather than adding to it.
 */
.idia-contact-form__content > .idia-contact-form {
	margin-top: var(--wp--preset--spacing--44);
}

@media (max-width: 991px) {
	.idia-contact-form__content > .idia-contact-form {
		margin-top: var(--wp--preset--spacing--32);
	}
}

@media (max-width: 767px) {
	.idia-contact-form__content > .idia-contact-form {
		margin-top: var(--wp--preset--spacing--24);
	}
}

/* form row → form row: 24, the reference's .form-wrapper margin-top.
 *
 * This one cannot be blockGap. The <form> comes from a bare core/html
 * block, so WordPress attaches no layout to it and emits no gap rule for
 * its children — measured as margin-top:0 on every child before this rule
 * existed. The pattern's blockGap on .idia-contact-form applies to that
 * wrapper's own children (the form, and the two message containers), not
 * to elements inside the raw <form>. Flow margin on the direct children is
 * the only mechanism available without restructuring the frozen wiring
 * contract.
 */
.idia-contact-form__form > * + * {
	margin-top: var(--wp--preset--spacing--24);
}

/* last field row → submit: 16, the reference's .button.form margin-top —
 * tighter than the 24 between field rows, so it overrides the rule above.
 */
.idia-contact-form__form > .idia-contact-form__actions {
	margin-top: var(--wp--preset--spacing--16);
}

/* ---- Details block ----
 * Two border-accented columns side by side (16 apart, set as blockGap in
 * the pattern), stacking at ≤479. No card surface — the reference has none
 * here; see the pattern's structure comment.
 */
.idia-contact-form__details {
	align-items: flex-start;
}

.idia-contact-form__details > .idia-contact-form__row {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 479px) {
	.idia-contact-form__details {
		flex-direction: column;
	}

	.idia-contact-form__details > .idia-contact-form__row {
		width: 100%;
	}
}

/* Detail value links inherit the row's colour preset rather than the global
 * link colour — .contact-link in the reference is the muted grey, not the
 * accent, and it is not underlined until hover.
 */
.idia-contact-form__value a {
	color: inherit;
	text-decoration: none;
}

.idia-contact-form__value a:hover,
.idia-contact-form__value a:focus-visible {
	text-decoration: underline;
}

/* ---- Field labels ----
 * Visible, not screen-reader-only. is-style-eyebrow (style.css) already
 * supplies the mono/uppercase/500/size-s treatment matching the
 * reference's .text-level; a <label> is not a paragraph, so only the
 * display mode needs setting here for the block style to take effect.
 */
.idia-contact-form__label {
	display: block;
}

.idia-contact-form__required {
	color: var(--wp--preset--color--primary);
}

.idia-contact-form__field-row {
	align-items: flex-start;
}

.idia-contact-form__field-row > .idia-contact-form__field {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 767px) {
	.idia-contact-form__field-row {
		flex-direction: column;
	}
}

.idia-contact-form__field {
	width: 100%;
}

/* style.css's global reset (input:not([type="submit"]):not([type="radio"]),
 * line 93) has specificity (0,2,1) — element plus two :not() pseudo-classes,
 * each carrying its attribute-selector argument's own specificity. A single
 * class compounded with the element type only reaches (0,1,1), which still
 * loses; that first attempt left the reset's own .5em/1em padding and 5px
 * radius rendering instead of these values (confirmed via the layout audit
 * — 3-vertical-spacing/7-radius both flagged the reset's numbers). Two
 * classes compounded with the element type reaches (0,2,1), a true tie that
 * source order then resolves in this file's favour (it is enqueued after
 * style.css) — matching how hero-card.css and counter.css already beat a
 * core-generated selector elsewhere in this theme.
 */
input.idia-contact-form__input.idia-contact-form__input,
textarea.idia-contact-form__input.idia-contact-form__input {
	display: block;
	width: 100%;
	height: 56px;
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--12) var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--custom--radius--12);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--base);
	box-shadow: none;
}

.idia-contact-form__input::placeholder {
	color: var(--wp--preset--color--secondary);
	opacity: 1;
}

input.idia-contact-form__input:focus-visible,
textarea.idia-contact-form__input:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

/* Reference .input-field-new.text-area is height 160 (was 140 here — an
 * earlier approximation, corrected against the crawled source).
 *
 * Compounded to (0,2,1) to match the height:56px rule above, which is
 * itself compounded to beat style.css's reset. A single class here reached
 * only (0,1,1) and lost — the textarea rendered at 56px, the input height,
 * caught by measurement rather than by eye.
 */
textarea.idia-contact-form__input.idia-contact-form__input--textarea {
	height: 160px;
	resize: vertical;
}

/* House hover (AGENTS.md §11.1): .has-house-hover already supplies the
 * pill-to-16px radius transition (style.css) — nothing to add here beyond
 * applying the class in the pattern markup, done on both the form wrapper
 * and the submit button.
 *
 * DELIBERATE DIVERGENCE from the reference: its .button carries
 * `transition: all .35s` plus a dual-layer text-roll (a decorative div over
 * an opacity:0 real submit input). We reproduce neither. AGENTS.md §11.1
 * allows one gesture — the radius change — and stacking colour/scale on top
 * reads as a template. Ours is a single honest <input type="submit">.
 */

/* ---- Submit button ----
 * The reference's .button is a primary action, not a form control: pill
 * radius, 12/20 padding, weight 500. style.css's global input reset
 * (specificity (0,2,1)) also matches input[type="submit"] through
 * .wp-block-button__link, so the same two-class compounding trick the input
 * rule above uses is needed to win the tie — without it the reset's own
 * padding renders and the button reads as a default-sized field.
 *
 * The radius itself is NOT set here: .has-house-hover on the wrapping
 * .wp-block-button supplies the pill token and its hover transition, and
 * setting radius on the inner input too would fight it. Only the inner
 * element's own radius is inherited from the wrapper's clip.
 */
.idia-contact-form__submit {
	display: inline-block;
	overflow: hidden;
}

input.wp-block-button__link.wp-element-button {
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--20);
	border: none;
	border-radius: inherit;
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--body);
	cursor: pointer;
}

/* ---- Success / error messages: hidden until phase 2 toggles them ---- */
.idia-contact-form__success,
.idia-contact-form__error {
	display: none;
}

/* ---- Locations section ---- */

/* Row: dashed bottom border in border-dark, matching the reference's
 * .location-list-item exactly. The theme's registered separator-dotted
 * block style has no CSS backing yet, so a border rule here needs writing
 * regardless — putting it directly on the row avoids an extra
 * core/separator block per row.
 */
.idia-locations__row {
	border-bottom: 1px dashed var(--wp--preset--color--border-dark);
}

.idia-locations__row:last-child {
	border-bottom: none;
}

.idia-locations__left {
	align-items: center;
}

.idia-locations__image img {
	display: block;
	width: 120px;
	height: auto;
	border-radius: var(--wp--custom--radius--12);
}

@media (max-width: 991px) {
	.idia-locations__row {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 767px) {
	.idia-locations__image img {
		width: 100%;
		border-radius: var(--wp--custom--radius--24);
	}
}