/* ==========================================================================
   Contact page — header, info column, form card, Contact Form 7 styling.

   Layout numbers that don't map onto a theme.json preset (organic clamp()
   values, odd px increments like 5/6/11/14/18/22px) are hardcoded here per
   the page spec — see the implementation report for the full flagged list.
   Colors, font sizes and font families are theme.json presets throughout.
   ========================================================================== */

/* -- Header ---------------------------------------------------------------- */

.fi-contact-header {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 1240px;
	margin: 0 auto;
	padding-top: 88px; /* spacing-110 renders 92 at 1440; design hero pad-top 88 */
	padding-right: var(--wp--preset--spacing--65);
	padding-left: var(--wp--preset--spacing--65);
	padding-bottom: clamp(28px, 4vw, 44px);
}

.fi-contact-header > * {
	margin: 0;
}

/* Eyebrow line-height fix: moved to assets/css/patterns.css
   (.fi-contact-header .fi-eyebrow, grouped with the same fix on other
   pages — the global .fi-eyebrow already supplies 12px font-size and
   0.2em tracking; only line-height needed restoring here). */

.fi-contact-h1 {
	max-width: 22ch;
	text-wrap: pretty;
}

.fi-contact-sub {
	max-width: 56ch;
	line-height: 1.7;
	text-wrap: pretty;
}

/* -- Info + form grid ------------------------------------------------------- */

.fi-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
	max-width: 1240px;
	margin: 0 auto;
	padding-top: clamp(16px, 2vw, 28px);
	padding-right: var(--wp--preset--spacing--65);
	padding-left: var(--wp--preset--spacing--65);
	padding-bottom: var(--wp--preset--spacing--130);
}

/* -- Left column: contact info ---------------------------------------------- */

.fi-info-col {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.fi-info-item {
	border-top: 1px solid var(--wp--preset--color--line);
	padding: 16px 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.fi-info-item > * {
	margin: 0;
}

.fi-info-label {
	font-size: 11.5px !important;
	letter-spacing: 1.84px;
	line-height: normal;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.fi-info-value {
	font-weight: 500;
}

.fi-info-value a {
	color: inherit;
	text-decoration: none;
}

.fi-info-value a:hover {
	color: var(--wp--preset--color--deep);
}

.fi-info-box {
	margin-top: var(--wp--preset--spacing--50);
	display: inline-flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	border-radius: 14px;
	padding: 16px 20px !important;
}

.fi-info-dot {
	width: var(--wp--preset--spacing--20);
	height: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: var(--wp--preset--color--deep);
	flex: none;
	/* The global block-gap reset (style.css: `:where(.is-layout-flow,
	   .is-layout-constrained) > * { margin-block-start: 0 }`) outranks the
	   single-class rule below on specificity and wins in the cascade, since
	   .fi-info-box carries is-layout-flow — it was zeroing this dot's
	   downward nudge, leaving the dot flush with the text's top edge instead
	   of centered on the first line. Scope to the parent to beat it. */
	margin-top: 6px;
}

.fi-info-box > .fi-info-dot {
	margin-top: 6px;
}

.fi-info-text {
	/* Design note box text is 16px / normal line-height. */
	font-size: 16px;
	line-height: normal;
	margin: 0;
}

/* -- Right column: form card ------------------------------------------------ */

.fi-form-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 22px;
	padding: clamp(24px, 3vw, 36px);
	box-shadow: 0 18px 48px rgba(var(--fi-shadow-rgb), 0.06);
}

/* -- Success state (shown via CF7's own .sent status class on the <form>,
      no custom JS needed — see florentina CF7 note in report) -------------- */

.fi-success-card {
	display: none;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
	padding: 12px 4px;
}

.fi-form-card:has(.fi-cf7.sent) .fi-success-card {
	display: flex;
}

.fi-form-card:has(.fi-cf7.sent) > .wpcf7 {
	display: none;
}

.fi-success-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--tint);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--deep);
	font-size: 22px;
}

.fi-success-icon::before {
	content: "\2713";
}

.fi-success-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.2;
	margin: 0;
}

.fi-success-body {
	font-size: 15px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.fi-success-actions {
	margin-top: 4px;
}

.fi-reset-btn .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--line);
	background: transparent;
	border-radius: 999px;
	padding: 11px 20px;
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	color: var(--wp--preset--color--ink);
}

/* -- Contact Form 7 field grid ----------------------------------------------
   CF7 runs its `_form` template through wpautop(), which wraps each bare
   <label> line in an auto <p>. display:contents removes that wrapper from
   the box tree so .fi-field becomes the real grid item. ------------------- */

.fi-cf7 .fi-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 18px;
}

.fi-cf7 .fi-form-grid > p {
	display: contents;
}

/* GDPR acceptance + submit rows are wrapped in <div class="fi-field">, so
   wpautop's auto <p> around the raw shortcode content isn't caught by the
   `.fi-form-grid > p` rule above — it keeps its UA default margin and
   inflates the row. Strip it. */
.fi-cf7 .fi-field > p {
	margin: 0;
}

.fi-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 16.5px;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

/* CF7's `_form` template line-breaks between the label span and the field
   shortcode; wpautop() turns that into a <br>, which becomes its own flex
   item inside the column layout and inflates the label→input gap by a full
   line-height. Collapse it out of the box tree — spacing is owned by the
   .fi-field gap above. */
.fi-field br {
	display: none;
}

.fi-field--full {
	grid-column: 1 / -1;
}

.fi-field__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: rgb(44, 42, 36);
}

.fi-cf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.fi-cf7 textarea,
.fi-cf7 select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--bg);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 11px;
	padding: 12px 14px;
	font-size: 14.5px;
	font-family: inherit;
	color: var(--wp--preset--color--ink);
}

/* CF7 wraps each control in an inline <span class="wpcf7-form-control-wrap">;
   without a block display it leaves inline-formatting-context descender
   space beneath the (now block) control, inflating every row. */
.fi-cf7 .wpcf7-form-control-wrap {
	display: block;
}

.fi-cf7 textarea {
	resize: vertical;
}

.fi-cf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.fi-cf7 textarea:focus,
.fi-cf7 select:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--preset--color--tint);
}

/* GDPR acceptance checkbox */

.fi-gdpr .wpcf7-list-item {
	display: block;
}

.fi-gdpr label {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	cursor: pointer;
}

.fi-gdpr input[type="checkbox"] {
	margin-top: 3px;
	accent-color: var(--wp--preset--color--deep);
	width: 13px;
	height: 16px;
	flex: none;
}

.fi-gdpr .wpcf7-list-item-label {
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* Submit button */

.fi-submit-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.fi-cf7 .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Design button is 188px wide (it includes a trailing arrow the CF7 <input>
	   can't render); force the width so the pill matches. */
	min-width: 188px;
	gap: 10px;
	background: var(--wp--preset--color--deep);
	color: var(--wp--preset--color--button-text);
	border: none;
	cursor: pointer;
	padding: 14px 28px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	font-family: inherit;
	letter-spacing: 0.01em;
	transition: transform var(--fi-dur-fast) var(--fi-ease), opacity var(--fi-dur-fast) var(--fi-ease);
}

.fi-cf7 .wpcf7-submit:hover {
	transform: translateY(-2px);
	opacity: 0.93;
}

/* -- Error / validation states -----------------------------------------------
   No error/danger color exists in theme.json's token system (TOKENS.md has
   no such entry) — this red is hardcoded and flagged per the job's HARD
   RULES rather than borrowed from a palette token that doesn't fit. -------- */

.fi-cf7 {
	--fi-error: #b3261e;
}

.fi-cf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--fi-error);
}

.fi-cf7 .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--fi-error);
}

.fi-cf7 .wpcf7-response-output {
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 11px;
	font-size: 13.5px;
	line-height: 1.5;
	border: 1px solid var(--fi-error);
	color: var(--fi-error);
}

.fi-cf7 .wpcf7-response-output:empty {
	display: none;
}

.fi-cf7 .wpcf7-spinner {
	margin: 0 0 0 4px;
}

/* CF7 wraps the submit input in a <p> that ends up centered in the form column;
   design has the button flush-left with the fields (r5 finding). */
.fi-cf7 .fi-submit-row p {
	margin: 0;
	width: 100%;
	text-align: left;
}

/* Consent (GDPR) row: WPCF7's list-item wrapper carries a left inset + 4px
   checkbox margin that indents the row ~17px; design has it flush with the
   field column (x=785) — r6 finding. */
.fi-cf7 .wpcf7-acceptance .wpcf7-list-item {
	margin-left: 0;
}
.fi-cf7 .wpcf7-acceptance input[type="checkbox"] {
	margin-left: 0;
}