/* ============================================================
 * Aitrixa — Contact page styles (assets/css/contact.css)
 *
 * Loaded only on pages using the Contact template (page-contact.php),
 * via aitrixa_child_enqueue_contact_assets() in functions.php. Depends
 * on assets/css/aitrixa.css for the design tokens (colors, fonts,
 * spacing, --maxw, --gutter).
 *
 * The mock at pages/Aitrixa Contact.html ships with extra rules for
 * .contact-hero, .contact-types, and .contact-cta but does NOT use
 * those sections in its rendered DOM. Those rules are intentionally
 * not carried over — adding dead CSS would only create confusion if
 * the design ever revives those sections (the mock is the source of
 * truth, so revive them there first, then port the styles back).
 * ============================================================ */

/* ---- MAIN CONTACT BODY -------------------------------------- */
.contact-body {
	background: var(--white);
	border-bottom: 1px solid var(--line);
}
.contact-body__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: clamp(48px, 8vh, 100px) var(--gutter);
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(48px, 7vw, 120px);
	align-items: start;
}

/* ---- CONTACT SIDEBAR ---------------------------------------- */
.contact-sidebar__header {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 40px;
}
.contact-sidebar__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 16px;
}
.contact-sidebar__eyebrow strong {
	color: var(--ink);
	font-weight: 500;
	margin-right: 8px;
}
.contact-sidebar__title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(28px, 3.5vw, 46px);
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--ink);
}

.contact-channels {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--line);
	margin-bottom: 40px;
}
.contact-channel {
	padding: 24px;
	border-bottom: 1px solid var(--line-soft);
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: background 0.2s;
}
.contact-channel:last-child {
	border-bottom: none;
}
.contact-channel:hover {
	background: var(--panel-2);
}
.contact-channel__tag {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--mute);
	border: 1px solid var(--line);
	padding: 3px 8px;
	display: inline-block;
	margin-bottom: 4px;
	width: fit-content;
}
.contact-channel__label {
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 500;
	color: var(--ink);
	letter-spacing: -0.005em;
}
.contact-channel__value {
	font-family: var(--font-mono);
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--mute);
	line-height: 1.6;
}
.contact-channel__value a {
	color: var(--body);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--line);
	transition: color 0.2s, text-decoration-color 0.2s;
}
.contact-channel__value a:hover {
	color: var(--ink);
	text-decoration-color: var(--ink);
}

/* ---- CONTACT FORM SHELL ------------------------------------- */
.contact-form-wrap__header {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 40px;
}
.contact-form-wrap__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 16px;
}
.contact-form-wrap__eyebrow strong {
	color: var(--ink);
	font-weight: 500;
	margin-right: 8px;
}
.contact-form-wrap__title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: clamp(28px, 3.5vw, 46px);
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--ink);
}

/* ---- THE FORM ----------------------------------------------- *
 * Namespaced .aitrixa-form__* so it never collides with WC or CF7
 * default form CSS. The class names are passed through CF7's
 * class:/id: shortcode attributes — see docs/09-page-contact.md
 * for the exact CF7 form-tag markup the client must paste into the
 * CF7 form editor for these styles to land.
 * ------------------------------------------------------------- */
.aitrixa-form {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.aitrixa-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}
.aitrixa-form__row--full {
	grid-template-columns: 1fr;
}
.aitrixa-form__field {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--line);
	border-right: 1px solid var(--line);
	position: relative;
}
.aitrixa-form__row .aitrixa-form__field:last-child {
	border-right: none;
}
.aitrixa-form__row--full .aitrixa-form__field {
	border-right: none;
}
.aitrixa-form__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	padding: 16px 20px 0;
	transition: color 0.2s;
	pointer-events: none;
}
.aitrixa-form__field:focus-within .aitrixa-form__label {
	color: var(--ink);
}
.aitrixa-form__input,
.aitrixa-form__select,
.aitrixa-form__textarea {
	font-family: var(--font-sans);
	font-size: 17px;
	color: var(--ink);
	background: transparent;
	border: none;
	outline: none;
	padding: 8px 20px 16px;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	resize: none;
}
.aitrixa-form__input::placeholder,
.aitrixa-form__textarea::placeholder {
	color: var(--mute-2);
}
.aitrixa-form__select {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6d73' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
	padding-right: 44px;
}
.aitrixa-form__select option {
	background: var(--white);
	color: var(--ink);
}
.aitrixa-form__textarea {
	min-height: 140px;
	line-height: 1.6;
}

/* Animated focus underline on each field */
.aitrixa-form__field::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s;
}
.aitrixa-form__field:focus-within::after {
	transform: scaleX(1);
}

/* Acceptance / consent row */
.aitrixa-form__check-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 24px 0 28px;
	border-bottom: 1px solid var(--line);
}
.aitrixa-form__check-row input[type='checkbox'] {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	accent-color: var(--ink);
	cursor: pointer;
}
.aitrixa-form__check-row label {
	font-size: 15px;
	line-height: 1.65;
	color: var(--body);
	cursor: pointer;
}
.aitrixa-form__check-row label a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Submit row */
.aitrixa-form__submit-row {
	padding-top: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.aitrixa-form__disclaimer {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mute);
	line-height: 1.7;
	max-width: 320px;
}

/* Bespoke success state — used when JS swap is enabled (see contact.js) */
.aitrixa-form__success {
	display: none;
	background: var(--panel);
	border: 1px solid var(--line);
	padding: 48px 40px;
	text-align: center;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.aitrixa-form__success.visible {
	display: flex;
}
.aitrixa-form__success__icon {
	width: 40px;
	height: 40px;
	border: 1px solid var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 8px;
}
.aitrixa-form__success h3 {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 26px;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.aitrixa-form__success p {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--body);
	max-width: 400px;
}

/* ---- "Form being configured" PLACEHOLDER --------------------
 * Shown when CF7 is missing or the form ID is not yet set. Visually
 * matches .aitrixa-form__success so the slot does not look empty —
 * the template explains why and (for admins) what to do next.
 * ------------------------------------------------------------- */
.aitrixa-form__placeholder {
	background: var(--panel);
	border: 1px solid var(--line);
	padding: 40px 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.aitrixa-form__placeholder-eyebrow {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mute);
	margin-bottom: 8px;
}
.aitrixa-form__placeholder p {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--body);
	margin: 0;
}
.aitrixa-form__placeholder a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.aitrixa-form__placeholder-admin {
	margin-top: 12px;
	padding: 14px 16px;
	background: var(--white);
	border: 1px dashed var(--line);
	font-family: var(--font-mono);
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--body);
	letter-spacing: 0.04em;
}
.aitrixa-form__placeholder-admin strong {
	color: var(--ink);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-right: 8px;
}

/* ---- CF7 NORMALISATION -------------------------------------- *
 * CF7 wraps every field in <span class="wpcf7-form-control-wrap">
 * inside a <p>. We strip the cosmetic noise so our flat
 * .aitrixa-form__field grid still works and CF7's own validation
 * surfaces (response-output, not-valid-tip, spinner) match our
 * tokens. See docs/09-page-contact.md for the full rationale.
 * ------------------------------------------------------------- */

/* CF7 injects a <p> around each form-tag — flatten it. */
.aitrixa-form p {
	margin: 0;
	display: contents;
}

/* The <span class="wpcf7-form-control-wrap"> is a layout-neutral
   wrapper around inputs. Make it invisible to layout. */
.aitrixa-form .wpcf7-form-control-wrap {
	display: contents;
}

/* Field-level validation message under an input. */
.wpcf7-not-valid-tip {
	display: block;
	font: 400 11px / 1.4 var(--font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stock-out);
	padding: 0 20px 12px;
	margin-top: -4px;
}
.aitrixa-form__field:has(.wpcf7-not-valid-tip) {
	border-bottom-color: var(--stock-out);
}
.aitrixa-form__field:has(.wpcf7-not-valid-tip)::after {
	background: var(--stock-out);
}

/* Form-level response output (success / error banner). */
.wpcf7-response-output {
	border: 1px solid var(--ink);
	padding: 14px 18px;
	font: 400 12px / 1.5 var(--font-mono);
	letter-spacing: 0.08em;
	margin-top: 24px;
	color: var(--ink);
	background: var(--white);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--stock-out);
	color: var(--stock-out);
}
.wpcf7 form.sent .wpcf7-response-output {
	background: var(--ink);
	color: var(--white);
	border-color: var(--ink);
}

/* CF7 spinner — restyle to match the design (square, mono). */
.wpcf7-spinner {
	background-color: var(--mute);
	width: 14px;
	height: 14px;
	border-radius: 0;
	margin-left: 14px;
}

/* ---- RESPONSIVE --------------------------------------------- */
@media (max-width: 900px) {
	.contact-body__inner {
		grid-template-columns: 1fr;
	}
	.contact-sidebar {
		order: 2;
	}
	.contact-form-wrap {
		order: 1;
	}
}
@media (max-width: 640px) {
	.aitrixa-form__row {
		grid-template-columns: 1fr;
	}
	.aitrixa-form__field {
		border-right: none !important;
	}
	.aitrixa-form__submit-row {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---- ASTRA / PARENT-THEME SPECIFICITY OVERRIDES -------------
 * Astra's main.min.css applies border-radius, border, padding,
 * and font-size to bare attribute selectors
 * (input[type=text], input[type=email], textarea, select, ...).
 * At equal-or-higher specificity those rules win over our flat
 * class selectors. Re-scoping under the `.aitrixa-form` ancestor
 * lifts our specificity from (0,1,0) to (0,2,0) so we win cleanly
 * without resorting to !important.
 *
 * Keep the un-scoped rules above (they're reused by the placeholder
 * markup which is rendered OUTSIDE the .aitrixa-form element).
 * ------------------------------------------------------------- */
.contact-form-wrap .wpcf7-form.aitrixa-form .aitrixa-form__input,
.contact-form-wrap .wpcf7-form.aitrixa-form .aitrixa-form__select,
.contact-form-wrap .wpcf7-form.aitrixa-form .aitrixa-form__textarea {
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.4;
	color: var(--ink);
	background: transparent;
	border: none;
	border-radius: 0;
	outline: none;
	padding: 8px 20px 16px;
	width: 100%;
	height: auto;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
}
.contact-form-wrap .wpcf7-form.aitrixa-form .aitrixa-form__textarea {
	min-height: 140px;
	line-height: 1.6;
	resize: none;
}
.contact-form-wrap .wpcf7-form.aitrixa-form .aitrixa-form__select {
	padding-right: 44px;
	cursor: pointer;
}

/* Astra also applies focus rings + box-shadow on inputs — strip them. */
.contact-form-wrap .wpcf7-form.aitrixa-form .aitrixa-form__input:focus,
.contact-form-wrap .wpcf7-form.aitrixa-form .aitrixa-form__select:focus,
.contact-form-wrap .wpcf7-form.aitrixa-form .aitrixa-form__textarea:focus {
	border: none;
	outline: none;
	box-shadow: none;
	background: transparent;
	color: var(--ink);
}

/* Submit button — Astra restyles all <button> + .button. Re-assert our
   .btn / .btn--primary tokens with .aitrixa-form ancestry to win. */
.contact-form-wrap .wpcf7-form.aitrixa-form .wpcf7-submit,
.contact-form-wrap .wpcf7-form.aitrixa-form input[type="submit"].wpcf7-submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--white);
	background: var(--ink);
	border: 1px solid var(--ink);
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	width: auto;
	height: auto;
	line-height: 1;
}
.contact-form-wrap .wpcf7-form.aitrixa-form .wpcf7-submit:hover,
.contact-form-wrap .wpcf7-form.aitrixa-form input[type="submit"].wpcf7-submit:hover {
	background: var(--white);
	color: var(--ink);
}


/* ---- CF7 STRUCTURAL CLEANUP -------------------------------
 * CF7 inserts a <fieldset class="hidden-fields-container"> at
 * the top of the form to hold hidden inputs (nonce, locale,
 * version). Astra/UA styles render a visible bordered box
 * around that empty fieldset. display:contents drops the
 * fieldset out of the layout while keeping its children in
 * the DOM and submitted with the form.
 *
 * Likewise, the .wpcf7-response-output at the form footer is
 * present-but-empty until CF7 populates it after submit. CF7
 * toggles aria-hidden between true (empty) and false (active),
 * so we hide the empty state via the attribute selector.
 * ----------------------------------------------------------- */
.aitrixa-form .hidden-fields-container,
.contact-form-wrap .wpcf7-form .hidden-fields-container {
	display: contents;
	border: none;
	padding: 0;
	margin: 0;
}

.aitrixa-form .wpcf7-response-output[aria-hidden="true"],
.contact-form-wrap .wpcf7-form .wpcf7-response-output[aria-hidden="true"] {
	display: none;
}


/* ---- ACCEPTANCE CHECKBOX LAYOUT ---------------------------
 * CF7 [acceptance] markup nests deeper than expected:
 *   <p>
 *     <span.wpcf7-form-control-wrap>
 *       <span.wpcf7-form-control.wpcf7-acceptance>
 *         <span.wpcf7-list-item>
 *           <label>
 *             <input type=checkbox>
 *             <span.wpcf7-list-item-label>...text + links...</span>
 *           </label>
 * The <input> and the label-text-span are siblings inside the <label>,
 * not siblings of the label. So the flex container has to be the
 * <label>, not the <span.wpcf7-list-item> as I first tried.
 *
 * Strategy: collapse all wrapper spans + the <p> via display:contents,
 * then make the <label> the flex container holding [input + label-text].
 * ----------------------------------------------------------- */
.aitrixa-form__check-row > p,
.aitrixa-form__check-row .wpcf7-form-control-wrap,
.aitrixa-form__check-row .wpcf7-form-control.wpcf7-acceptance,
.aitrixa-form__check-row .wpcf7-list-item {
	display: contents;
	margin: 0;
	padding: 0;
}
.aitrixa-form__check-row label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	cursor: pointer;
	font-size: 15px;
	line-height: 1.65;
	color: var(--body);
}
.aitrixa-form__check-row label input[type="checkbox"] {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	margin: 5px 0 0 0;
	accent-color: var(--ink);
	cursor: pointer;
}
.aitrixa-form__check-row .wpcf7-list-item-label {
	display: inline; /* let it flow inline as the text body of the label */
	flex: 1;
	color: var(--body);
}
.aitrixa-form__check-row label a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- CF7 SPINNER VISIBILITY (override above) -------------
 * The .wpcf7-spinner rule earlier in this file styles the size
 * and color; this block hides it by default and reveals it only
 * while the form is submitting (CF7 adds .submitting on <form>).
 * Without this, the bare <span class="wpcf7-spinner"> emitted
 * after the submit button renders as a gray square at all times.
 * ----------------------------------------------------------- */
.wpcf7 .wpcf7-spinner {
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s;
}
.wpcf7 form.submitting .wpcf7-spinner {
	visibility: visible;
	opacity: 1;
	animation: aitrixa-spinner-pulse 1s ease-in-out infinite;
}
@keyframes aitrixa-spinner-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}