/*
==========================================================
CONTACT BLOCK — contact_block.css
==========================================================
WHAT IT IS:
A reusable contact block with simple CTA and advanced
contact intake layouts, switchable via ACF.

WHAT IT DOES:
Simple mode renders a compact contact CTA box with an
optional phone number and form embed. Advanced mode
renders a two-column intake section with a form card,
checklist, contact details, social links, and an optional
map embed in the content column.

HOW TO USE:
1. Add the "Contact / Form" block to any page or post.
2. Pick a Layout: Simple box (contact_block_layout_simple)
   or Full contact section (contact_block_layout_advanced),
   and where the phone and email come from.
3. Simple box tabs: Title & text · Phone & email · Form ·
   Colors (Form = optional code from another service).
4. Full contact section tabs: Title & text · Form · Starting fields ·
   Questions · After sending · Helpful information · Phone &
   email · More details · Map · Social links · Colors ·
   Technical setup. The built-in form keeps Name, Email and
   Message, can ask for Phone/Website, and adds any number of
   questions (short/long text, dropdown, choose one/several,
   date, number) with limits, counters and inline errors;
   social links come from Business Settings unless "Type
   different links here" is picked.
5. Optional look (Section Variant) is at the bottom of
   Colors.

All values use boilerplate CSS tokens from style.css.
==========================================================
*/


/* ── Base ───────────────────────────────────────────────── */

.contact_block {
    width: 100%;
    margin: var(--space-8) 0;
}

.contact_block_wrapper {
    display: block;
}


/* ── Simple Layout ─────────────────────────────────────── */

.contact_cta {
    background: var(--color-bg-alt);
    padding: var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.contact_cta h2 {
    color: var(--color-accent);
    margin-top: 0;
}

.contact_cta_inner > :first-child {
    margin-top: 0;
    padding-top: 0;
}

.contact_cta_copy {
    color: var(--color-text);
}

.contact_cta_copy p {
    color: inherit;
}

a.phone_num,
a.email_addr {
    display: block;
    margin: var(--space-4) 0 0 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a.phone_num:hover,
a.email_addr:hover {
    color: var(--color-accent);
}

.cta_form_html_house {
    margin: var(--space-8) 0 0 0;
}


/* ── Advanced Layout ───────────────────────────────────── */

.contact_block_layout_advanced {
    margin: var(--space-10) 0;
}

.contact_block_panel {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: var(--space-8);
    align-items: stretch;
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-bg-alt);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.contact_block_form_col,
.contact_block_content_col {
    min-width: 0;
}

.contact_block_order_form_right .contact_block_form_col {
    order: 2;
}

.contact_block_order_form_right .contact_block_content_col {
    order: 1;
}

.contact_block_form_card,
.contact_block_content_col {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.contact_block_form_card {
    height: 100%;
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}

.contact_block_content_col {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-8);
}

.contact_block_form_eyebrow,
.contact_block_eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0 0 var(--space-5) 0;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: transparent;
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.contact_block_form_intro,
.contact_block_intro_text,
.contact_block_reassurance {
    color: var(--color-text);
    line-height: var(--leading-relaxed);
}

.contact_block_form_intro p,
.contact_block_intro_text p,
.contact_block_reassurance p {
    color: inherit;
}

.contact_block_form_intro p:last-child,
.contact_block_intro_text p:last-child,
.contact_block_reassurance p:last-child {
    margin-bottom: 0;
}

.contact_block_embed {
    margin-top: var(--space-6);
    min-height: 360px;
    padding: var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
}

.contact_block_embed p {
    color: inherit;
    text-align: center;
    margin: 0;
}

.contact_block_embed iframe,
.cta_form_html_house iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
}

.contact_block_intro {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.contact_block_heading {
    margin: 0 0 var(--space-4) 0;
    color: var(--color-primary);
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
}

.contact_block_group_heading {
    margin: 0 0 var(--space-4) 0;
    color: var(--color-secondary);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
}

.contact_block_info_group {
    position: relative;
}

.contact_block_checklist,
.contact_block_details,
.contact_block_socials {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact_block_checklist {
    display: grid;
    gap: var(--space-3);
}

.contact_block_checklist li {
    position: relative;
    padding-left: var(--space-6);
    color: var(--color-text);
    line-height: var(--leading-normal);
}

.contact_block_checklist li::before {
    content: "";
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: var(--radius-full);
    background: var(--color-accent);
}

.contact_block_details {
    display: grid;
    gap: var(--space-3);
}

.contact_block_details li {
    display: grid;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    color: var(--color-text);
    line-height: var(--leading-normal);
}

.contact_block_details i {
    margin-top: 0.15rem;
    color: var(--color-secondary);
}

.contact_block_details a,
.contact_block_socials a {
    color: var(--color-accent);
    text-decoration: none;
}

.contact_block_details a:hover,
.contact_block_socials a:hover {
    color: var(--color-accent-hover);
    text-decoration: none;
}

.contact_block_reassurance {
    margin-top: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
}

.contact_block_map {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: transparent;
}

.contact_block_map_embed {
    position: relative;
    width: 100%;
    min-height: 260px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
}

.contact_block_map_embed iframe {
    display: block;
    width: 100%;
    min-height: 260px;
    border: 0;
}

.contact_block_socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.contact_block_socials a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.contact_block_socials i {
    color: var(--color-secondary);
}


/* ── Section Background Mode (Batch 8F Round 3, §8F.3) ───────────────────
   Three independent brand-new regions, each resolved in PHP via the same
   shared $resolve_bg_mode closure, each with its own class prefix so
   setting one never touches another. The background-color itself always
   travels as an inline style (contact_block.php), which already wins over
   any class-based rule — including the Minimal variant's existing
   `background: transparent` override on both .contact_cta and
   .contact_block_panel — so Theme Default (no class, no inline style)
   leaves Minimal's transparent panel completely untouched, and an
   explicit choice always overrides it, matching this project's
   established "explicit inline choice always outranks an implicit
   class-based default" rule. Only text color needs a CSS rule at all.

   Ambient default for every region here is LIGHT (--color-bg-alt/
   --color-bg, dark-toned text) — the opposite starting assumption from
   Zone Band/Services Core — so Background/Alternate/Custom+Dark-Text need
   no override; only Dark/Accent/Custom+Light-Text need an explicit flip.

   Audit finding, accent-color collision: .contact_cta h2 is accent-colored
   unconditionally today — the exact collision pattern already found and
   fixed in Zone Band, Flexible Content, Image Grid, Before/After, Timeline,
   and Services Core this batch. Included in the dark-group flip below,
   not left unverified. */

/* ── Panel (shared) — .contact_cta in Simple, .contact_block_form_card in Advanced ── */

.contact_cta.contact_panel_bg_dark h2,
.contact_cta.contact_panel_bg_accent h2,
.contact_cta.contact_panel_text_light h2 {
    color: var(--color-text-inverse);
}

.contact_cta.contact_panel_bg_dark .contact_cta_copy,
.contact_cta.contact_panel_bg_accent .contact_cta_copy,
.contact_cta.contact_panel_text_light .contact_cta_copy {
    color: var(--color-text-inverse-soft);
}

.contact_cta.contact_panel_bg_dark .contact_cta_copy h1, .contact_cta.contact_panel_bg_dark .contact_cta_copy h2,
.contact_cta.contact_panel_bg_dark .contact_cta_copy h3, .contact_cta.contact_panel_bg_dark .contact_cta_copy h4,
.contact_cta.contact_panel_bg_dark .contact_cta_copy h5, .contact_cta.contact_panel_bg_dark .contact_cta_copy h6,
.contact_cta.contact_panel_bg_accent .contact_cta_copy h1, .contact_cta.contact_panel_bg_accent .contact_cta_copy h2,
.contact_cta.contact_panel_bg_accent .contact_cta_copy h3, .contact_cta.contact_panel_bg_accent .contact_cta_copy h4,
.contact_cta.contact_panel_bg_accent .contact_cta_copy h5, .contact_cta.contact_panel_bg_accent .contact_cta_copy h6,
.contact_cta.contact_panel_text_light .contact_cta_copy h1, .contact_cta.contact_panel_text_light .contact_cta_copy h2,
.contact_cta.contact_panel_text_light .contact_cta_copy h3, .contact_cta.contact_panel_text_light .contact_cta_copy h4,
.contact_cta.contact_panel_text_light .contact_cta_copy h5, .contact_cta.contact_panel_text_light .contact_cta_copy h6 {
    color: var(--color-text-inverse);
}

.contact_cta.contact_panel_bg_dark .contact_cta_copy a,
.contact_cta.contact_panel_bg_accent .contact_cta_copy a,
.contact_cta.contact_panel_text_light .contact_cta_copy a {
    color: var(--color-text-inverse);
}

.contact_cta.contact_panel_bg_dark .contact_cta_copy a:hover,
.contact_cta.contact_panel_bg_accent .contact_cta_copy a:hover,
.contact_cta.contact_panel_text_light .contact_cta_copy a:hover {
    color: var(--color-text-inverse-soft);
}

.contact_cta.contact_panel_bg_dark a.phone_num,
.contact_cta.contact_panel_bg_accent a.phone_num,
.contact_cta.contact_panel_text_light a.phone_num,
.contact_cta.contact_panel_bg_dark a.email_addr,
.contact_cta.contact_panel_bg_accent a.email_addr,
.contact_cta.contact_panel_text_light a.email_addr {
    color: var(--color-text-inverse);
}

.contact_cta.contact_panel_bg_dark a.phone_num:hover,
.contact_cta.contact_panel_bg_accent a.phone_num:hover,
.contact_cta.contact_panel_text_light a.phone_num:hover,
.contact_cta.contact_panel_bg_dark a.email_addr:hover,
.contact_cta.contact_panel_bg_accent a.email_addr:hover,
.contact_cta.contact_panel_text_light a.email_addr:hover {
    color: var(--color-text-inverse-soft);
}

.contact_block_form_card.contact_panel_bg_dark .contact_block_form_eyebrow,
.contact_block_form_card.contact_panel_bg_accent .contact_block_form_eyebrow,
.contact_block_form_card.contact_panel_text_light .contact_block_form_eyebrow {
    border-color: color-mix(in srgb, var(--color-text-inverse) 40%, transparent);
    color: var(--color-text-inverse-soft);
}

.contact_block_form_card.contact_panel_bg_dark .contact_block_form_intro,
.contact_block_form_card.contact_panel_bg_accent .contact_block_form_intro,
.contact_block_form_card.contact_panel_text_light .contact_block_form_intro {
    color: var(--color-text-inverse-soft);
}

.contact_block_form_card.contact_panel_bg_dark .contact_block_form_intro a,
.contact_block_form_card.contact_panel_bg_accent .contact_block_form_intro a,
.contact_block_form_card.contact_panel_text_light .contact_block_form_intro a {
    color: var(--color-text-inverse);
}

.contact_block_form_card.contact_panel_bg_dark .contact_block_form_intro a:hover,
.contact_block_form_card.contact_panel_bg_accent .contact_block_form_intro a:hover,
.contact_block_form_card.contact_panel_text_light .contact_block_form_intro a:hover {
    color: var(--color-text-inverse-soft);
}

/* Native form — labels, markers, legends sit directly on the form card's
   own background (the individual inputs/buttons/radio pills are each a
   self-contained surface with their own explicit light background,
   independent of the card behind them, so they're left untouched here —
   the same reasoning already established for Zone Band's pill and
   Timeline's card/arrow this batch). */

.contact_block_form_card.contact_panel_bg_dark .contact_form_field label,
.contact_block_form_card.contact_panel_bg_accent .contact_form_field label,
.contact_block_form_card.contact_panel_text_light .contact_form_field label,
.contact_block_form_card.contact_panel_bg_dark .contact_form_fieldset legend,
.contact_block_form_card.contact_panel_bg_accent .contact_form_fieldset legend,
.contact_block_form_card.contact_panel_text_light .contact_form_fieldset legend {
    color: var(--color-text-inverse-soft);
}

.contact_block_form_card.contact_panel_bg_dark .contact_form_optional,
.contact_block_form_card.contact_panel_bg_accent .contact_form_optional,
.contact_block_form_card.contact_panel_text_light .contact_form_optional {
    color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
}

.contact_block_form_card.contact_panel_bg_dark .contact_form_privacy,
.contact_block_form_card.contact_panel_bg_accent .contact_form_privacy,
.contact_block_form_card.contact_panel_text_light .contact_form_privacy {
    color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
}

.contact_block_form_card.contact_panel_bg_dark .contact_form_privacy a,
.contact_block_form_card.contact_panel_bg_accent .contact_form_privacy a,
.contact_block_form_card.contact_panel_text_light .contact_form_privacy a {
    color: var(--color-text-inverse);
}

.contact_block_form_card.contact_panel_bg_dark .contact_form_success_heading,
.contact_block_form_card.contact_panel_bg_accent .contact_form_success_heading,
.contact_block_form_card.contact_panel_text_light .contact_form_success_heading {
    color: var(--color-text-inverse);
}

.contact_block_form_card.contact_panel_bg_dark .contact_form_success p,
.contact_block_form_card.contact_panel_bg_accent .contact_form_success p,
.contact_block_form_card.contact_panel_text_light .contact_form_success p {
    color: var(--color-text-inverse-soft);
}

/* Correction pass (2026-10-16) — Codex found the required-field marker,
   form error text, and field error text were not actually audited against
   measured contrast, only dismissed as "negligible." Measured (same real-
   browser luminance formula used throughout this batch): --color-accent's
   required asterisk is a literal 1.00:1 collision in Accent (identical
   color) and a real 2.63:1 against Dark, below WCAG AA; --color-error's
   form/field error text measures 1.22:1 against Accent and 3.2:1 against
   Dark, also below the 4.5:1 normal-text threshold. Fixed below — not
   dismissed. */
.contact_block_form_card.contact_panel_bg_dark .contact_form_required,
.contact_block_form_card.contact_panel_bg_accent .contact_form_required,
.contact_block_form_card.contact_panel_text_light .contact_form_required {
    color: var(--color-text-inverse);
}

.contact_block_form_card.contact_panel_bg_dark .contact_field_error,
.contact_block_form_card.contact_panel_bg_accent .contact_field_error,
.contact_block_form_card.contact_panel_text_light .contact_field_error {
    color: var(--color-text-inverse);
}

/* .contact_form_error keeps its red --color-error text (the semantic
   "this is an error" signal is worth preserving, unlike a plain marker) by
   giving its own box an opaque, reliably light background instead — the
   same self-contained-surface approach already used for Zone Band's pill
   and this block's own native-input fields, rather than losing the color
   that identifies it as an error state. Error red against this light
   token measures 5.44:1, comfortably above WCAG AA. */
.contact_block_form_card.contact_panel_bg_dark .contact_form_error,
.contact_block_form_card.contact_panel_bg_accent .contact_form_error,
.contact_block_form_card.contact_panel_text_light .contact_form_error {
    background: var(--color-bg-alt);
}


/* ── Content Column — Advanced only ──────────────────────────────────── */

.contact_block_content_col.contact_content_bg_dark .contact_block_heading,
.contact_block_content_col.contact_content_bg_accent .contact_block_heading,
.contact_block_content_col.contact_content_text_light .contact_block_heading {
    color: var(--color-text-inverse);
}

.contact_block_content_col.contact_content_bg_dark .contact_block_eyebrow,
.contact_block_content_col.contact_content_bg_accent .contact_block_eyebrow,
.contact_block_content_col.contact_content_text_light .contact_block_eyebrow {
    border-color: color-mix(in srgb, var(--color-text-inverse) 40%, transparent);
    color: var(--color-text-inverse-soft);
}

.contact_block_content_col.contact_content_bg_dark .contact_block_intro_text,
.contact_block_content_col.contact_content_bg_accent .contact_block_intro_text,
.contact_block_content_col.contact_content_text_light .contact_block_intro_text {
    color: var(--color-text-inverse-soft);
}

.contact_block_content_col.contact_content_bg_dark .contact_block_intro_text a,
.contact_block_content_col.contact_content_bg_accent .contact_block_intro_text a,
.contact_block_content_col.contact_content_text_light .contact_block_intro_text a {
    color: var(--color-text-inverse);
}

.contact_block_content_col.contact_content_bg_dark .contact_block_intro_text a:hover,
.contact_block_content_col.contact_content_bg_accent .contact_block_intro_text a:hover,
.contact_block_content_col.contact_content_text_light .contact_block_intro_text a:hover {
    color: var(--color-text-inverse-soft);
}

.contact_block_content_col.contact_content_bg_dark .contact_block_group_heading,
.contact_block_content_col.contact_content_bg_accent .contact_block_group_heading,
.contact_block_content_col.contact_content_text_light .contact_block_group_heading {
    color: var(--color-text-inverse);
}

.contact_block_content_col.contact_content_bg_dark .contact_block_checklist li,
.contact_block_content_col.contact_content_bg_accent .contact_block_checklist li,
.contact_block_content_col.contact_content_text_light .contact_block_checklist li,
.contact_block_content_col.contact_content_bg_dark .contact_block_details li,
.contact_block_content_col.contact_content_bg_accent .contact_block_details li,
.contact_block_content_col.contact_content_text_light .contact_block_details li {
    color: var(--color-text-inverse-soft);
}

/* Correction pass (2026-10-16) — Codex found the checklist bullet and
   detail icons dismissed as "acceptable decorative accents" without being
   measured. Both are meaningful indicators (the bullet marks a real list
   item; the icons identify email/phone/location/availability), not purely
   decorative, and a literal 1:1 collision is not excused by being small.
   Measured: --color-accent's bullet is 1.00:1 against Accent, 2.63:1
   against Dark; --color-secondary's icon is 1.13:1 against Accent, 2.33:1
   against Dark. Both fixed, not dismissed. */
.contact_block_content_col.contact_content_bg_dark .contact_block_checklist li::before,
.contact_block_content_col.contact_content_bg_accent .contact_block_checklist li::before,
.contact_block_content_col.contact_content_text_light .contact_block_checklist li::before {
    background: var(--color-text-inverse);
}

.contact_block_content_col.contact_content_bg_dark .contact_block_details i,
.contact_block_content_col.contact_content_bg_accent .contact_block_details i,
.contact_block_content_col.contact_content_text_light .contact_block_details i {
    color: var(--color-text-inverse);
}

.contact_block_content_col.contact_content_bg_dark .contact_block_details a,
.contact_block_content_col.contact_content_bg_accent .contact_block_details a,
.contact_block_content_col.contact_content_text_light .contact_block_details a {
    color: var(--color-text-inverse);
}

.contact_block_content_col.contact_content_bg_dark .contact_block_details a:hover,
.contact_block_content_col.contact_content_bg_accent .contact_block_details a:hover,
.contact_block_content_col.contact_content_text_light .contact_block_details a:hover {
    color: var(--color-text-inverse-soft);
}

/* .contact_block_reassurance and .contact_block_socials a are each a
   self-contained surface with their own explicit light background
   (--color-bg-alt), independent of the content column behind them — same
   reasoning as the form card's native-input fields above — so neither is
   touched here. .contact_block_map's own embed box is likewise
   self-contained (--color-bg-alt). */


/* ── Advanced Outer Panel — .contact_block_panel, Advanced only ───────── */
/* No direct text content of its own — it is the grid wrapper that the
   form card and content column render inside, both independently
   colorable above. Nothing further needed here beyond the inline
   background-color PHP already applies to this element. */


/* ── Section Variants (v4 pattern) ─────────────────────── */

/* default — base block styles, no override */

/* homepage-feature — extra breathing room */
.contact_block_variant_homepage_feature {
    margin: var(--space-16) 0;
}

/* minimal — stripped back, no panel chrome */
.contact_block_variant_minimal {
    margin: var(--space-4) 0;
}

.contact_block_variant_minimal .contact_block_panel {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.contact_block_variant_minimal .contact_cta {
    background: transparent;
    border: none;
    padding: 0;
}

/* split-feature */
.contact_block_variant_split_feature {
    margin: var(--space-12) 0;
}

/* cards-feature */
.contact_block_variant_cards_feature {
    margin: var(--space-12) 0;
}

/* inner-banner — compact for interior pages */
.contact_block_variant_inner_banner {
    margin: var(--space-4) 0;
}


/* ── Native Form (advanced layout — no embed) ───────────── */

/* Hidden guard — prevents display:flex overriding HTML hidden attr */
.contact_block_layout_advanced [hidden] {
    display: none !important;
}

.contact_block_native_form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.contact_form_hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.contact_form_fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.contact_form_fieldset legend {
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-secondary);
    margin-bottom: var(--space-3);
    padding: 0;
}

.contact_form_field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.contact_form_field label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-secondary);
}

.contact_form_required {
    color: var(--color-accent);
    margin-left: 2px;
}

.contact_form_optional {
    font-weight: var(--weight-normal);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.contact_block_native_form input[type="text"],
.contact_block_native_form input[type="email"],
.contact_block_native_form input[type="tel"],
.contact_block_native_form input[type="number"],
.contact_block_native_form input[type="date"],
.contact_block_native_form select,
.contact_block_native_form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.contact_block_native_form input:focus,
.contact_block_native_form select:focus,
.contact_block_native_form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.contact_block_native_form textarea {
    resize: vertical;
    min-height: 120px;
}

/* Card radio group — 2-column grid */
.contact_card_group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.contact_card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: var(--leading-normal);
}

.contact_card input[type="radio"],
.contact_card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.contact_card:hover {
    border-color: var(--color-accent);
}

.contact_card:has(input:checked) {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
    color: var(--color-primary);
    font-weight: var(--weight-semi);
}

.contact_card:has(input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Full-width card — always spans both columns */
.contact_card_full {
    grid-column: 1 / -1;
}

/* Pill radio group — timeline */
.contact_pill_group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.contact_pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    font-size: var(--text-sm);
    color: var(--color-text);
    white-space: nowrap;
}

.contact_pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.contact_pill:hover {
    border-color: var(--color-accent);
}

.contact_pill:has(input:checked) {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
    color: var(--color-primary);
    font-weight: var(--weight-semi);
}

.contact_pill:has(input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.contact_form_error {
    padding: var(--space-3) var(--space-4);
    border: 1px solid currentColor;
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: var(--text-sm);
    background: color-mix(in srgb, var(--color-error) 8%, transparent);
}

.contact_field_error {
    font-size: var(--text-xs);
    color: var(--color-error);
    min-height: 1rem;
}

/* ── Adaptable form (Batch 8H, §21 #13) ─────────────────────
   Help, limit and counter lines are linked to their field with
   aria-describedby; an invalid field gets aria-invalid="true" from
   contact_block.js. Nothing here hides a field visually only. */

.contact_form_help,
.contact_form_limit,
.contact_form_counter {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}

.contact_form_counter_over {
    color: var(--color-error);
    font-weight: var(--weight-semi);
}

/* Element-qualified so it outranks the input[type="…"] rules above. */
.contact_block_native_form input[aria-invalid="true"],
.contact_block_native_form select[aria-invalid="true"],
.contact_block_native_form textarea[aria-invalid="true"] {
    border-color: var(--color-error);
}

.contact_form_fieldset.contact_form_field_invalid .contact_card,
.contact_form_fieldset.contact_form_field_invalid .contact_pill {
    border-color: var(--color-error);
}

.contact_form_fieldset .contact_form_help {
    display: block;
    margin: calc(var(--space-2) * -1) 0 var(--space-3);
}

.contact_form_fieldset .contact_field_error {
    display: block;
    margin-top: var(--space-2);
}

.contact_form_next {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-secondary);
}

/* Read by screen readers, not shown — e.g. "(required)" after the visible *. */
.contact_form_sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.contact_form_submit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-8);
    background: var(--color-accent);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-white, #fff);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.contact_form_submit:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.contact_form_submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Correction pass (2026-10-16) — Codex found the submit button's accent
   fill + accent border fully disappear on an Accent-colored form card: the
   button, its border, and the panel behind it are the literal same color,
   a 1.00:1 collision, not merely a boundary-contrast nicety. Fixed
   following the established Accent-panel button treatment from Hero/CTA
   Banner/Split View: dark fill + inverse text, inverting to white fill +
   dark text on hover, so the button stays visibly identifiable in normal,
   hover, and disabled (opacity-dimmed, inherits whichever fill is active)
   states. Scoped to Accent only, matching that same established
   precedent — Dark and Custom + Light Text are not touched: the button's
   solid accent fill is a different, clearly distinguishable color from a
   dark panel over its entire visible area (not a thin border relying on
   boundary contrast alone), confirmed, not assumed, by the same real-
   browser testing used throughout this correction (see Validation). */
.contact_block_form_card.contact_panel_bg_accent .contact_form_submit {
    background: var(--color-bg-dark);
    border-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

.contact_block_form_card.contact_panel_bg_accent .contact_form_submit:hover {
    background: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
    color: var(--color-primary);
}

/* The sitewide :focus-visible rule (style.css §12a) outlines every button
   in --color-accent — found, while testing this fix's focus-visible state
   specifically, to sit directly on this Accent panel's own background,
   the same collision pattern as everything else in this correction pass,
   just surfaced one layer further out (the focus ring, not the button
   itself). Overridden to match this button's own inverted color scheme. */
.contact_block_form_card.contact_panel_bg_accent .contact_form_submit:focus-visible {
    outline-color: var(--color-text-inverse);
}

.contact_form_privacy {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: 0;
}

.contact_form_privacy a {
    color: var(--color-accent);
    text-decoration: none;
}

.contact_form_privacy a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.contact_form_success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-10);
    text-align: center;
    min-height: 200px;
}

.contact_form_success_heading {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    margin: 0;
}

.contact_form_success p {
    color: var(--color-text-muted);
    margin: 0;
}


/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 900px) {
    .contact_block_panel {
        grid-template-columns: 1fr;
        padding: var(--space-6);
    }

    .contact_block_order_form_right .contact_block_form_col,
    .contact_block_order_form_right .contact_block_content_col {
        order: initial;
    }

    .contact_block_form_col {
        order: 1;
    }

    .contact_block_content_col {
        order: 2;
    }
}

@media (max-width: 768px) {
    .contact_cta,
    .contact_block_form_card,
    .contact_block_content_col {
        padding: var(--space-6);
    }

    .contact_block_panel {
        gap: var(--space-6);
    }

    .contact_block_heading {
        font-size: var(--text-2xl);
    }

    a.phone_num,
    a.email_addr {
        font-size: var(--text-lg);
    }
}

@media (max-width: 480px) {
    .contact_cta,
    .contact_block_form_card,
    .contact_block_content_col,
    .contact_block_panel {
        padding: var(--space-4);
    }

    .contact_block_embed {
        padding: var(--space-4);
    }
}

/* ── EDITOR PREVIEW ONLY ─────────────────────────────────
   Shown by contact_block.php in place of a third-party form/map embed
   when $is_preview is true — never on the frontend, where the real
   embed always renders exactly as before. */
.contact_block_embed_preview_placeholder {
    margin: 0;
    padding: var(--space-5) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
    text-align: center;
}