/* Default two-panel variant. */
.contact-form-panel--default .contact-form-panel__container {
    display: grid;
    grid-template-columns: var(--grid-template, minmax(0, 1fr) minmax(0, 1fr));
    width: 100%;
}

.contact-form-panel--default .contact-form-panel__left,
.contact-form-panel--default .contact-form-panel__right {
    min-width: 0;
    padding: var(--space-16) var(--adst-container-inset);
}

.contact-form-panel--default .contact-form-panel__left {
    position: relative;
    display: flex;
    align-items: center;
    background-position: center;
    background-size: cover;
    isolation: isolate;
}

.contact-form-panel--default .contact-form-panel__overlay {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: rgb(var(--adst-primary-rgb) / 0.55);
}

.contact-form-panel--default .contact-form-panel__content,
.contact-form-panel--default .contact-form-panel__form {
    width: min(100%, 590px);
    margin-inline: auto;
}

.contact-form-panel--default .contact-form-panel__heading-icon {
    display: block;
    height: auto;
    margin-bottom: var(--space-5);
}

.contact-form-panel--default .contact-form-panel__heading {
    margin: 0 0 var(--space-4);
    color: inherit;
    font-family: var(--adst-font-heading);
    font-size: var(--wp--preset--font-size--heading-large);
    font-weight: var(--adst-font-bold);
    line-height: 1.2;
}

.contact-form-panel--default .contact-form-panel__subtitle {
    margin: 0 0 var(--space-6);
    color: inherit;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.6;
}

.contact-form-panel--default .contact-form-panel__bullets {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-form-panel--default .contact-form-panel__bullet {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.contact-form-panel--default .contact-form-panel__bullet-icon {
    flex: 0 0 auto;
    font-weight: var(--adst-font-bold);
}

.contact-form-panel--default .wpcf7,
.contact-form-panel--default .wpcf7 form {
    width: 100%;
    max-width: none;
    margin: 0;
}

@media (max-width: 782px) {
    .contact-form-panel--default .contact-form-panel__container {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-form-panel--default .contact-form-panel__left,
    .contact-form-panel--default .contact-form-panel__right {
        padding-block: var(--space-10);
    }
}

/* Yellow footer-band variant. Raw colour attributes are deliberately ignored. */
.contact-form-panel--yellow {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--secondary);
}

.contact-form-panel--yellow .contact-form-panel__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-inline: auto;
    max-width: 900px; /* measured: prod heading width is 900px at 1440 (ticket #23 production measurements) */
    width: 100%;
}

.contact-form-panel--yellow .contact-form-panel__left,
.contact-form-panel--yellow .contact-form-panel__right {
    background: transparent;
    padding: 0;
}

.contact-form-panel--yellow .contact-form-panel__content {
    color: var(--wp--preset--color--secondary);
    text-align: center;
}

.contact-form-panel--yellow .contact-form-panel__heading {
    color: var(--wp--preset--color--secondary);
    font-family: var(--adst-font-heading);
    font-size: var(--wp--preset--font-size--display-large); /* measured: prod heading 42px at 1440 and 375 (ticket #23 production measurements) */
    font-weight: var(--adst-font-bold);
    line-height: 1.3; /* measured: prod 54.6px / 42px (ticket #23 production measurements) */
    margin: 0 0 124px; /* measured: prod heading-to-form gap is 123.69px (ticket #23 production measurements) */
}

.contact-form-panel--yellow .contact-form-panel__heading-accent {
    color: var(--wp--preset--color--secondary);
    display: block;
    font-size: var(--wp--preset--font-size--xx-large); /* requested larger second line; prod baseline is 42px (ticket #23 production measurements) */
}

.contact-form-panel--yellow .contact-form-panel__heading:has(+ .contact-form-panel__bullets) {
    margin-bottom: var(--space-8);
}

.contact-form-panel--yellow .contact-form-panel__bullets,
.contact-form-panel--yellow .contact-form-panel__form,
.contact-form-panel--yellow .wpcf7 {
    max-width: 824px; /* aligns the proof list and form to prod's measured 824px form width (ticket #23 production measurements) */
}

.contact-form-panel--yellow .contact-form-panel__bullets {
    color: var(--wp--preset--color--secondary);
    display: grid;
    gap: var(--space-3);
    list-style: none;
    margin: 0 auto var(--space-16);
    padding: 0;
    text-align: left;
}

.contact-form-panel--yellow .contact-form-panel__bullet {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
}

.contact-form-panel--yellow .contact-form-panel__bullet-icon {
    flex: 0 0 auto;
    /* #129: one check-mark treatment across the page — mask the literal ✓ glyph with
       the same outlined circle-check .adst-about__highlight-icon uses. Markup is
       unchanged (the character stays, hidden by font-size:0); the icon colour follows
       the band's secondary text colour so it stays legible on yellow. */
    width: 20px;
    height: 20px;
    font-size: 0;
    background-color: var(--wp--preset--color--secondary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") center / contain no-repeat;
    margin-top: 2px;
}

.contact-form-panel--yellow .contact-form-panel__form,
.contact-form-panel--yellow .wpcf7 {
    margin-inline: auto;
    padding: 0;
    width: 100%;
}

.contact-form-panel--yellow .wpcf7 form {
    gap: var(--space-4);
}

.contact-form-panel--yellow .wpcf7 label,
.contact-form-panel--yellow .wpcf7-list-item-label {
    color: var(--wp--preset--color--secondary);
    font-family: var(--adst-font-family);
    font-size: var(--wp--preset--font-size--medium); /* measured: prod fields 16px (ticket #23 production measurements) */
    font-weight: var(--adst-font-regular);
}

.contact-form-panel--yellow .wpcf7 input[type="text"],
.contact-form-panel--yellow .wpcf7 input[type="email"],
.contact-form-panel--yellow .wpcf7 textarea {
    background: transparent;
    /* Charcoal on the yellow band is 9.43:1, clearing WCAG 1.4.11 Non-text Contrast (3:1) for a control boundary. The 2px perimeter follows WCAG 2.4.13 Focus Appearance's two-CSS-pixel benchmark. Corrected 2026-08-28: this and ticket #32 contrast calculations both cited "2.4.11", which is Focus Not Obscured and says nothing about area. */
    border: 2px solid var(--wp--preset--color--secondary);
    border-radius: 0;
    box-shadow: none;
    color: var(--wp--preset--color--secondary);
    min-height: 51px; /* measured: prod single-line field height (ticket #23 production measurements) */
    padding: var(--space-4);
}

.contact-form-panel--yellow .wpcf7 textarea {
    height: 150px; /* measured: prod textarea height at 1440 and 375 (ticket #23 production measurements) */
    min-height: 150px;
}

.contact-form-panel--yellow .wpcf7 input[type="text"]:focus,
.contact-form-panel--yellow .wpcf7 input[type="email"]:focus,
.contact-form-panel--yellow .wpcf7 textarea:focus {
    border-bottom-color: var(--wp--preset--color--secondary);
    box-shadow: none;
    /* WCAG 2.4.13 Focus Appearance's benchmark is 2px; 3px stays distinct from the 2px resting underline. (Not 2.4.11 — see the correction above.) */
    outline: 3px solid var(--wp--preset--color--secondary);
    /* The matching 3px offset keeps the focus outline visually separate from that resting underline. */
    outline-offset: 3px;
}

.contact-form-panel--yellow .wpcf7 .wpcf7-not-valid-tip {
    color: var(--wp--preset--color--secondary); /* charcoal/yellow is 9.43:1; ticket #32 contrast calculations */
    font-weight: var(--adst-font-semibold);
}

.contact-form-panel--yellow .wpcf7 .wpcf7-acceptance {
    align-items: flex-start;
}

.contact-form-panel--yellow .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
    accent-color: var(--wp--preset--color--secondary);
    /* --space-6 resolves to the 24px minimum target size in WCAG 2.5.8 (AA). */
    height: var(--space-6);
    width: var(--space-6);
}

.contact-form-panel--yellow .wpcf7 .wpcf7-acceptance a {
    color: var(--wp--preset--color--secondary);
}

/* Production aligns the submit control to the form's right edge (ticket #32 production measurements). */
.contact-form-panel--yellow .wpcf7 p:has(.wpcf7-submit) {
    align-items: flex-end;
}

.contact-form-panel--yellow .wpcf7 input[type="submit"],
.contact-form-panel--yellow .wpcf7 .wpcf7-submit {
    font-size: var(--wp--preset--font-size--large); /* Prod submit: 20px at 1440 and 375; ticket #33 production measurements. */
    min-height: 56px; /* Prod submit: 56px; ticket #33 production measurements. */
    padding: 6px 20px; /* Prod submit: 6px 20px; ticket #33 production measurements. */
    width: auto; /* Prod is compact at 140.77px and right-aligned; ticket #33 production measurements. */
}

.contact-form-panel--yellow .wpcf7-form.invalid .wpcf7-response-output,
.contact-form-panel--yellow .wpcf7-form.unaccepted .wpcf7-response-output,
.contact-form-panel--yellow .wpcf7-form.sent .wpcf7-response-output,
.contact-form-panel--yellow .wpcf7-form.failed .wpcf7-response-output {
    background: var(--wp--preset--color--white);
    border-left-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--secondary); /* 13.77:1 on white and 9.43:1 on yellow; ticket #32 contrast calculations */
}

@media (max-width: 1024px) { /* measured: theme tablet breakpoint is 1024px; header's 980/981 split is its documented prod-parity exception (ticket #23 production measurements) */
    .contact-form-panel--yellow .contact-form-panel__heading {
        font-size: var(--wp--preset--font-size--display-large); /* measured: prod mobile heading 42px (ticket #23 production measurements) */
        margin-bottom: var(--space-16);
    }

    .contact-form-panel--yellow .contact-form-panel__heading-accent {
        font-size: var(--wp--preset--font-size--xx-large); /* requested larger second line; prod baseline is 42px (ticket #23 production measurements) */
    }
}

/* ==========================================================================
   Dark variant — the shared contact/CTA section (#166).
   Self-contained: paints its own ground and rhythm so the block can be dropped
   into any page, post or CPT, not only the footer band.
   ========================================================================== */
.contact-form-panel--dark {
    background: var(--wp--preset--color--secondary);
    /* Yellow closes the band. Without it this charcoal runs straight into the
       equally charcoal footer bar and the two read as one over-tall dark area. */
    border-bottom: 4px solid var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
}

.contact-form-panel--dark .contact-form-panel__container {
    align-items: start;
    display: grid;
    gap: var(--space-16);
    /* The form column carries more controls than the copy column carries lines. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    margin-inline: auto;
    /* The rhythm lives on the container, not the block root: page templates reset
       padding on `.wp-block-post-content > .alignfull`, which outranks the root
       selector and flattened the band to zero height when reused inside a page. */
    max-width: calc(1180px + 2 * var(--adst-container-inset));
    padding: var(--space-24) var(--adst-container-inset);
    width: 100%;
}

.contact-form-panel--dark .contact-form-panel__eyebrow {
    color: var(--wp--preset--color--primary);
    font-family: var(--adst-font-heading);
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: var(--adst-font-bold);
    letter-spacing: 0.16em;
    margin: 0 0 var(--space-4);
    text-transform: uppercase;
}

.contact-form-panel--dark .contact-form-panel__heading {
    color: var(--wp--preset--color--white);
    font-family: var(--adst-font-heading);
    font-size: var(--wp--preset--font-size--display-large);
    font-weight: var(--adst-font-black);
    line-height: 1.15;
    margin: 0 0 var(--space-5);
}

.contact-form-panel--dark .contact-form-panel__subtitle {
    color: rgba(255, 255, 255, 0.85); /* 11.0:1 on #2d2d2d; AA body text. */
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.7;
    margin: 0 0 var(--space-8);
    max-width: 46ch;
}

.contact-form-panel--dark .contact-form-panel__bullets {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0;
}

.contact-form-panel--dark .contact-form-panel__bullet {
    align-items: flex-start;
    display: flex;
    font-size: var(--wp--preset--font-size--medium);
    gap: var(--space-3);
    line-height: 1.5;
}

/* #129's single check-mark treatment: the literal glyph is masked by the shared
   outlined circle-check, so no icon system is introduced. */
.contact-form-panel--dark .contact-form-panel__bullet-icon {
    background-color: var(--wp--preset--color--primary);
    flex: 0 0 auto;
    font-size: 0;
    height: 20px;
    margin-top: 2px;
    width: 20px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Channels wrap to content width: three equal tracks squeeze the phone number
   onto two lines inside the copy column. */
.contact-form-panel--dark .contact-form-panel__channels {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5) var(--space-12);
    margin: 0;
    padding-top: var(--space-6);
}

.contact-form-panel--dark .contact-form-panel__channel dt {
    color: rgba(255, 255, 255, 0.7); /* 7.0:1 on #2d2d2d. */
    font-family: var(--adst-font-heading);
    font-size: var(--wp--preset--font-size--utility);
    font-weight: var(--adst-font-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.contact-form-panel--dark .contact-form-panel__channel dd {
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--medium);
    margin: var(--space-2) 0 0;
}

.contact-form-panel--dark .contact-form-panel__channel a {
    color: var(--wp--preset--color--white);
    text-decoration: none;
}

.contact-form-panel--dark .contact-form-panel__channel a:hover,
.contact-form-panel--dark .contact-form-panel__channel a:focus-visible {
    text-decoration: underline;
}

.contact-form-panel--dark .contact-form-panel__channel a.contact-form-panel__phone {
    color: var(--wp--preset--color--primary);
    font-family: var(--adst-font-heading);
    font-size: var(--wp--preset--font-size--large);
    font-weight: var(--adst-font-bold);
    white-space: nowrap;
}

/* ---- the form card ---- */

.contact-form-panel--dark .contact-form-panel__card {
    background: var(--wp--preset--color--white);
    border-radius: 12px;
    color: var(--wp--preset--color--dark-text);
    padding: var(--space-10);
}

.contact-form-panel--dark .contact-form-panel__card-title {
    color: var(--wp--preset--color--secondary);
    font-family: var(--adst-font-heading);
    font-size: var(--wp--preset--font-size--large);
    font-weight: var(--adst-font-bold);
    margin: 0 0 var(--space-6);
}

.contact-form-panel--dark .wpcf7,
.contact-form-panel--dark .wpcf7 form {
    margin: 0;
    max-width: none;
    width: 100%;
}

.contact-form-panel--dark .wpcf7 form {
    display: grid;
    gap: var(--space-5);
}

.contact-form-panel--dark .wpcf7 p {
    margin: 0;
}

/* CF7 always prints the response box; empty it reserves ~50px inside the card. */
.contact-form-panel--dark .wpcf7-response-output[aria-hidden="true"],
.contact-form-panel--dark .wpcf7-response-output:empty {
    display: none;
}

.contact-form-panel--dark .wpcf7 label {
    color: var(--wp--preset--color--secondary);
    display: block;
    font-family: var(--adst-font-heading);
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--adst-font-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.contact-form-panel--dark .wpcf7 input[type="text"],
.contact-form-panel--dark .wpcf7 input[type="email"],
.contact-form-panel--dark .wpcf7 textarea {
    background: var(--wp--preset--color--background-alt);
    /* #767676 on #f7f7f7 is 4.5:1, clearing WCAG 1.4.11 Non-text Contrast for a control boundary. */
    border: 1px solid #767676;
    border-radius: 8px;
    box-shadow: none;
    color: var(--wp--preset--color--dark-text);
    font-size: var(--wp--preset--font-size--medium);
    margin-top: var(--space-2);
    min-height: 52px;
    padding: var(--space-3) var(--space-4);
    width: 100%;
}

.contact-form-panel--dark .wpcf7 textarea {
    height: 132px;
    min-height: 132px;
}

.contact-form-panel--dark .wpcf7 input[type="text"]:focus,
.contact-form-panel--dark .wpcf7 input[type="email"]:focus,
.contact-form-panel--dark .wpcf7 textarea:focus {
    background: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--secondary);
    /* WCAG 2.4.13 Focus Appearance benchmark is 2px; 3px stays distinct from the 1px resting border. */
    outline: 3px solid var(--wp--preset--color--secondary);
    outline-offset: 2px;
}

.contact-form-panel--dark .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.contact-form-panel--dark .wpcf7-acceptance .wpcf7-list-item label {
    align-items: flex-start;
    display: flex;
    gap: var(--space-3);
    letter-spacing: 0;
    text-transform: none;
}

.contact-form-panel--dark .wpcf7-acceptance .wpcf7-list-item-label {
    color: var(--wp--preset--color--dark-text);
    font-family: var(--adst-font-family);
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--adst-font-regular);
    line-height: 1.5;
}

.contact-form-panel--dark .wpcf7-acceptance input[type="checkbox"] {
    accent-color: var(--wp--preset--color--secondary);
    /* --space-6 resolves to the 24px minimum target size in WCAG 2.5.8 (AA). */
    height: var(--space-6);
    width: var(--space-6);
}

/* Gold is the action colour; on the white card it needs its charcoal boundary (9.43:1). */
.contact-form-panel--dark .wpcf7 input[type="submit"],
.contact-form-panel--dark .wpcf7 .wpcf7-submit {
    --btn-bg: var(--wp--preset--color--primary);
    --btn-hover-bg: var(--wp--preset--color--primary-dark);
    --btn-text: var(--wp--preset--color--secondary);
    --btn-hover-text: var(--wp--preset--color--secondary);
    --btn-border: var(--wp--preset--color--secondary);
    min-height: 56px;
    width: 100%;
}

@media (max-width: 374px) {
    .contact-form-panel--dark .wpcf7 .wpcf7-submit {
        letter-spacing: normal;
        padding-inline: var(--space-4);
    }
}

@media (max-width: 1024px) { /* theme tablet breakpoint */
    .contact-form-panel--dark .wpcf7 {
        padding-inline: 0;
    }

    .contact-form-panel--dark .wpcf7 form {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-form-panel--dark .contact-form-panel__container {
        gap: var(--space-10);
        padding-block: var(--space-20);
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-form-panel--dark .contact-form-panel__heading {
        font-size: var(--wp--preset--font-size--heading-large);
    }

    .contact-form-panel--dark .contact-form-panel__card {
        padding: var(--space-6);
    }
}