/**
 * contact.css — Contact's page-specific patterns, per docs/ARCHITECTURE.md
 * §7's "pages/" cascade layer. Only enqueued on Contact (inc/enqueue.php).
 *
 * Ported directly from the inline <style> block in releases/v1.0/contact.html.
 * None of these patterns (contact list, disabled form shell, fit chips,
 * plain-section paragraphs) are reused anywhere else in the theme, so
 * none of it belongs in a shared component — verified against every
 * other page's stylesheet.
 */

.contact-list {
	margin-top: 24px;
	font-size: 15.5px;
	color: var(--ink-soft);
	line-height: 2.1;
}

.contact-list a {
	color: var(--oxblood);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 600;
}

.contact-list strong {
	color: var(--ink);
}

/* Disabled consultation-form shell — replaced with a real, live form in
   Phase 5 (docs/IMPLEMENTATION_ROADMAP.md), not styled for reuse elsewhere. */
.field-group {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 520px;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--ink);
}

.field input,
.field select,
.field textarea {
	font-family: var(--font-sans);
	font-size: 14.5px;
	color: var(--ink);
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 11px 14px;
	outline-offset: 2px;
}

.field textarea {
	resize: vertical;
	min-height: 96px;
}

.form-note {
	margin-top: 22px;
	padding: 16px 18px;
	border: 1px dashed var(--line);
	border-radius: 10px;
	font-size: 13px;
	color: var(--slate);
	line-height: 1.7;
	max-width: 520px;
	background: var(--paper-raised);
}

/* The required legal acknowledgment immediately below the consultation
   form (both the live Gravity Forms embed and the disabled fallback
   shell) — a plain caption, not a boxed callout like .form-note, since
   it's routine required text rather than a status message. Matches
   .cta-band__note's treatment of adjacent fine print. */
.form-legal-note {
	margin-top: 14px;
	font-size: 13px;
	color: var(--ink-soft);
	line-height: 1.7;
	max-width: 520px;
}

.form-legal-note a {
	color: var(--oxblood);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* "Not Sure Where Your Matter Fits?" */
.fit-intro {
	margin-top: 14px;
	font-size: 15px;
	color: var(--ink-soft);
	line-height: 1.75;
	max-width: 66ch;
}

.fit-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* Visually similar to, but a verified distinct pattern from,
   related-chips.php's .related-chip (13.5px/10px 18px here vs.
   13px/9px 16px there, plus a hover transition) — not a reuse. */
.fit-chip {
	font-size: 13.5px;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 10px 18px;
	text-decoration: none;
	color: var(--ink-soft);
	background: var(--paper-raised);
	transition: border-color .15s ease, color .15s ease;
}

.fit-chip:hover {
	border-color: var(--oxblood);
	color: var(--oxblood);
}

/* Jurisdiction / Confidentiality sections. */
.plain p {
	font-size: 15px;
	color: var(--ink-soft);
	line-height: 1.8;
	max-width: 66ch;
	margin-top: 14px;
}

/**
 * Gravity Forms override — makes the live form (once the plugin is
 * installed) match the disabled shell's existing look above, rather than
 * Gravity Forms' own default styling. Verified live in Local 2026-07-27
 * against Gravity Forms 2.10.5's actual rendered markup, which defaults
 * to the newer "Orbital" theme (`gform-theme--orbital`), not the
 * `gravity-theme` class this file originally assumed (that class
 * belongs to GF's older default theme, superseded by Orbital in 2.9).
 * Deliberately not qualified by any theme class below — GF keeps the
 * classic class names (`gfield`, `gfield_label`, `ginput_container`,
 * `gform_footer`, `gform_button`, etc.) present alongside the new
 * Orbital-specific ones for exactly this kind of backward-compatible
 * styling, confirmed present in the actual rendered HTML. The button
 * rule below does use `!important` (`gform_button`'s background/border)
 * — confirmed necessary, not defensive habit: GF enqueues its own
 * Orbital theme stylesheet after this one at equal specificity, so it
 * wins by source order without it.
 */
.gform_wrapper {
	margin-top: 28px;
	max-width: 520px;
}

/* Not :first-child — Gravity Forms renders its honeypot field first in
 * DOM order (hidden via GF's own CSS), which would otherwise put this
 * spacing on the wrong (invisible) field and leave the actually-first
 * visible field (Name) with no top margin removed. */
.gform_wrapper .gfield + .gfield {
	margin-top: 18px;
}

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--ink);
	margin-bottom: 6px;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper select,
.gform_wrapper textarea {
	font-family: var(--font-sans);
	font-size: 14.5px;
	color: var(--ink);
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 11px 14px;
	width: 100%;
}

.gform_wrapper textarea {
	resize: vertical;
	min-height: 96px;
}

/* The Privacy Consent field: a plain required checkbox (not GF's
 * 'consent' field type — see inc/gravity-forms.php for why), so its
 * choice label carries GF's generic inline-choice-label class rather
 * than the consent-specific `.gfield_consent_label`. */
.gform_wrapper .gfield--type-checkbox .gchoice label {
	font-size: 13px;
	color: var(--ink-soft);
}

.gform_wrapper .gfield--type-checkbox .gchoice label a {
	color: var(--oxblood);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gform_wrapper .gform_footer {
	margin-top: 22px;
	padding: 0;
}

.gform_wrapper .gform_button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* !important: confirmed live 2026-07-27 this is genuinely needed, not
	 * defensive habit — Gravity Forms enqueues its own Orbital theme CSS
	 * (gravity_forms_orbital_theme-css) after this stylesheet, at equal
	 * selector specificity, so it wins the button's background/border on
	 * source order alone without it (verified via computed style: GF's
	 * blue #204ce5 was rendering instead of this override). */
	background: var(--oxblood) !important;
	color: #fff !important;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	padding: 11px 20px;
	border-radius: 6px;
	border: 1px solid var(--oxblood) !important;
	cursor: pointer;
}

.gform_wrapper .gform_button:hover {
	background: var(--oxblood-deep);
}

.gform_wrapper .validation_error,
.gform_wrapper .gfield_description.validation_message {
	color: var(--oxblood);
	font-size: 13px;
}

.gform_confirmation_message {
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--paper-raised);
	font-size: 15px;
	color: var(--ink-soft);
	line-height: 1.7;
	max-width: 520px;
}