/* ============================================================
   Compact Conversion ("Get Started") — reusable template-part
   template-parts/conversion-compact.php
   Left info panel (eyebrow, heading, lede, phone card) + a dense
   charcoal form panel on the right. Background of the SECTION is
   deliberately not set here — pass 'bg' per page, same as faq-compact.
   Form panel background and button color are named brand tokens
   (--ssd-conversion-form-bg / --ssd-primary) from style.css :root.
   ============================================================ */

.ssd-conversion-compact {
    padding: clamp(28px, 4vw, 48px) 0;
}
/* style.css has a sitewide ".ssd-wrap section" rule that force-adds
   padding-left/right: clamp(20px, 5vw, 56px) !important to every raw
   <section> under .ssd-wrap — since this component is also a <section>,
   it was getting that ON TOP OF .ssd-conversion-compact__inner's own
   border-box gutter below, double-insetting the form relative to the
   post header above it. .ssd-wrap .ssd-conversion-compact (two classes)
   outranks .ssd-wrap section (one class + one type), so this cancels
   just the generic padding — same fix already applied to .ssd-related. */
.ssd-wrap .ssd-conversion-compact {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding: 56px 5px !important;
}

/* Border-box gutter technique — matches faq-compact.css: content area
   equals exactly --ssd-container-w (the header's own width) once the
   box hits its cap; below that, width:100% takes over and the 20px
   padding still holds as a safe mobile gutter. */
.ssd-conversion-compact__inner {
    width: 100%;
    max-width: calc(var(--ssd-container-w) + 40px);
    margin: 0 auto !important;
    padding: 0 20px;
    box-sizing: border-box;
}

.ssd-conversion-compact__grid {
    display: grid;
    grid-template-columns: minmax(200px, 300px) 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 860px) {
    .ssd-conversion-compact__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ── Left info panel ── */
.ssd-conversion-compact__aside {
    position: sticky;
    top: 116px;
}

@media (max-width: 860px) {
    .ssd-conversion-compact__aside {
        position: static;
    }
}

.ssd-conversion-compact__eyebrow {
    margin: 0 0 6px !important;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ssd-primary-dark);
}

.ssd-conversion-compact__heading {
    margin: 0 !important;
    /* Matches the site's other section H2s (snapshot, offices, reviews,
       FAQ) for one consistent heading scale across the page. */
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: var(--ssd-text);
}

.ssd-conversion-compact__lede {
    margin: 10px 0 0 !important;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ssd-text-secondary);
}

.ssd-conversion-compact__contact {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px !important;
    padding: 12px 14px;
    background: var(--ssd-white);
    border: 1px solid var(--ssd-border);
    border-radius: var(--ssd-radius);
}

.ssd-conversion-compact__contact-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ssd-primary);
    color: var(--ssd-white);
    display: grid;
    place-items: center;
}

.ssd-conversion-compact__contact-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ssd-conversion-compact__contact-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ssd-muted);
}

.ssd-conversion-compact__contact-phone {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ssd-text);
    text-decoration: none;
}

.ssd-conversion-compact__contact-phone:hover {
    color: var(--ssd-primary-dark);
}

/* ── Trust bullets — large screens only. On mobile/tablet the aside is
   already full of the heading/lede/phone card with no spare room, so
   this fills the free space that only appears once the aside sits
   beside the (much taller) form on a wide layout.
   city-b.css has ".ssd-city-b ul,ol,li{margin:0!important;padding:0
   !important}" which is MORE specific (class+type) than a bare single
   class selector, so it wins even with !important on both sides —
   ".ssd-conversion-compact__aside" prefix bumps us to two classes to
   beat it. ── */
.ssd-conversion-compact__trust {
    display: none;
}

@media (min-width: 861px) {
    .ssd-conversion-compact__aside .ssd-conversion-compact__trust {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 28px 0 0 !important;
        padding: 20px 0 0 !important;
        border-top: 1px solid var(--ssd-border);
        list-style: none;
    }

    .ssd-conversion-compact__aside .ssd-conversion-compact__trust li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        line-height: 1.4;
        color: var(--ssd-text-secondary);
    }

    .ssd-conversion-compact__trust-mark {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--ssd-primary-light);
        color: var(--ssd-primary-dark);
        display: grid;
        place-items: center;
        font-size: 11px;
        font-weight: 700;
    }
}

/* ── Right: form panel ── */
.ssd-conversion-compact__form-panel {
    background: var(--ssd-conversion-form-bg);
    border-radius: var(--ssd-radius);
    padding: 24px;
}

@media (min-width: 480px) {
    .ssd-conversion-compact__form-panel {
        padding: 28px 32px;
    }
}

/* Every field CF7 renders sits in its own <div> (from the form's own
   markup) — grid-ify that flow directly. One column on mobile, two on
   desktop, three on large screens; specific fields below (radios,
   consent, message, submit) are pinned to full width regardless of
   column count via grid-column:1/-1, so they don't need any changes
   per breakpoint. */
.ssd-conversion-compact__form-panel .wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Row-gap was 5px — each field div's own margin is stripped below
       (grid gap is meant to be the only spacing), so 5px read as rows
       stacked directly on top of one another with no breathing room. */
    gap: 5px 14px;
}

@media (min-width: 1200px) {
    .ssd-conversion-compact__form-panel .wpcf7-form {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .ssd-conversion-compact__form-panel .wpcf7-form {
        grid-template-columns: 1fr;
    }
}

/* Different CF7 forms wrap fields differently — some in a plain <div>,
   some in a <div class="one-half">/<div class="one-half last"> (the
   PARENT theme's own float:left;width:50% grid classes, which would
   otherwise fight our CSS Grid), and some fields (textarea, consent)
   aren't wrapped in a div at all. Reset every possible direct-child
   shape so only OUR grid controls their width. */
.ssd-conversion-compact__form-panel .wpcf7-form > div,
.ssd-conversion-compact__form-panel .wpcf7-form > .wpcf7-form-control-wrap,
.ssd-conversion-compact__form-panel .wpcf7-form > label,
.ssd-conversion-compact__form-panel .wpcf7-form > p {
    grid-column: span 1;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    clear: none !important;
    min-width: 0;
}

/* Full width by CONTROL TYPE, not by field name — works with any CF7
   form the SSD_CF7_ID constant points to, not just the one it was
   built against. Yes/No radio questions, the consent block, the
   message field, the submit button, and the response banner always
   run the full width regardless of column count or wrapper shape. */
.ssd-conversion-compact__form-panel .wpcf7-form > div:has(.wpcf7-radio),
.ssd-conversion-compact__form-panel .wpcf7-form > div:has(.wpcf7-acceptance),
.ssd-conversion-compact__form-panel .wpcf7-form > .wpcf7-form-control-wrap:has(.wpcf7-radio),
.ssd-conversion-compact__form-panel .wpcf7-form > .wpcf7-form-control-wrap:has(.wpcf7-acceptance),
.ssd-conversion-compact__form-panel .wpcf7-form > .wpcf7-form-control-wrap:has(textarea),
.ssd-conversion-compact__form-panel .wpcf7-form > label,
.ssd-conversion-compact__form-panel .wpcf7-form > p,
.ssd-conversion-compact__form-panel .wpcf7-form input[type="submit"],
.ssd-conversion-compact__form-panel .wpcf7-form .wpcf7-response-output {
    grid-column: 1 / -1;
}

/* Extra breathing room between one Yes/No question and the next — on
   top of the grid's own (intentionally tight) row-gap used for the
   paired text-field rows above. */
.ssd-conversion-compact__form-panel .wpcf7-form > div:has(.wpcf7-radio),
.ssd-conversion-compact__form-panel .wpcf7-form > .wpcf7-form-control-wrap:has(.wpcf7-radio) {
    margin-top: 8px !important;
}

/* ── Field labels (plain text CF7 renders above each control) — some
   forms wrap the field's label in the field div, others (e.g. a bare
   "Consent" label before an unwrapped acceptance field) render it as
   a direct child of the form itself.
   ashton's screen.css ships a blanket `.wpcf7-form label { line-height:
   1px; font-size:10px; }` that collapses every CF7 label sitewide to a
   1px line box (text still paints outside it, so it looks fine on its
   own — until the label sits directly above another element, which is
   exactly this layout). Set line-height explicitly so this component
   is correct wherever it's used, regardless of what page-specific CSS
   happens to also be loaded. */
.ssd-conversion-compact__form-panel .wpcf7-form > div > label,
.ssd-conversion-compact__form-panel .wpcf7-form > label {
    display: block;
    margin: 0 0 5px !important;
    font-size: 12.5px;
    line-height: 1.4 !important;
    font-weight: 600;
    color: rgba(var(--ssd-white-rgb), .85);
}

/* ── Text / email / tel / select ──
   Two competing !important rules at the SAME specificity as ours exist
   elsewhere and load after this file, so they win any tie unless we
   out-specificity them by adding ".wpcf7" to the chain:
     - ashton/css/core/screen.css: generic input/select/textarea
       { font-size:12px!important; padding:8px 12px; }
     - city-b.css: .ssd-city-b .wpcf7 input[...] { padding:13px 16px
       !important; font-size:15px!important; } and textarea's
       { min-height:90px!important; } — min-height creates a floor
       that overrides even a smaller explicit height.
   margin-bottom matters here too: the grid's own row-gap (see
   .wpcf7-form above) is intentionally small on its own, and expects
   this rule to add the rest of the visible space between one row and
   the next — without it, rows read as touching/stacked. */
.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form input[type="text"],
.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form input[type="email"],
.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form input[type="tel"],
.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form input[type="number"],
.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form select {
    /* Explicit height (not just padding) so <select> renders the exact
       same box as text inputs — native select widgets don't always
       honor padding for vertical sizing the way inputs do. */
    width: 100% !important;
    height: 34px !important;
    margin-bottom: 10px !important;
    background: var(--ssd-white) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    color: var(--ssd-text) !important;
    box-sizing: border-box !important;
    appearance: auto;
}

/* CF7 renders rows="10" on this field by default; height/min-height
   override that regardless of the rows attribute. */
.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form textarea {
    width: 100% !important;
    height: 48px !important;
    background: var(--ssd-white) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    color: var(--ssd-text) !important;
    box-sizing: border-box !important;
    resize: vertical;
    min-height: 48px !important;
}

/* ── Yes/No radio rows ──
   city-b.css has ".ssd-city-b .wpcf7 .wpcf7-radio{margin:6px 0 10px
   !important}" etc. at the same specificity, loading after this file —
   the extra 10px bottom margin per question was a real contributor to
   the "too much space between fields" feel. ".wpcf7" bumps specificity
   so our leaner margins win instead. */
.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form .wpcf7-radio {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 20px !important;
    margin: 2px 0 0 !important;
}

.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form .wpcf7-list-item {
    margin: 0 !important;
}

.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form .wpcf7-list-item label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: var(--ssd-white) !important;
    cursor: pointer !important;
}

/* ── Consent (acceptance checkbox + scrollable disclaimer) ── */
.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form .wpcf7-acceptance label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    color: rgba(var(--ssd-white-rgb), .65) !important;
}

.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px !important;
}

/* This is the scrollable disclaimer box under the consent checkbox —
   the CF7 form's own content gives it an inline background:#fff, so
   its text needs a DARK color here, not the light color used for text
   that sits directly on the panel's charcoal background. !important
   alone isn't enough: city-b.css has ".ssd-city-b .wpcf7 p{color:
   rgba(white,.85)!important}" at the SAME specificity that loads
   after this file, so it wins any tie — adding ".wpcf7" here raises
   our specificity a notch to win regardless of load order. */
.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form > div > p,
.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form > p {
    margin: 4px 0 0 !important;
    /* CF7's own inline style sets padding:0 6px — more breathing room
       around the disclaimer text than that. */
    padding: 8px 10px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: var(--ssd-text-secondary) !important;
    /* CF7's own inline style sets a fixed height:60px, which is
       shorter than this specific SMS-consent paragraph actually needs
       at this font-size/width — it was capped at max-height:56px to
       avoid an oversized empty box, but that guaranteed a permanent
       scrollbar (and a bare, unstyled one at that — reads as broken)
       for text that only overflows by ~10-12px. 84px comfortably fits
       the real text with room to spare; overflow-y stays as a safety
       net only, not the expected default state. */
    height: auto !important;
    max-height: 84px !important;
    overflow-y: auto !important;
}

/* Same paragraph, narrower box: the text wraps to more lines once the
   form panel drops to a single narrow column, so 84px isn't enough
   here either — needs about double at typical phone widths. */
@media (max-width: 480px) {
    .ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form > div > p,
    .ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form > p {
        max-height: 170px !important;
    }
}

.ssd-conversion-compact__form-panel .wpcf7-form > div > p a,
.ssd-conversion-compact__form-panel .wpcf7-form > p a {
    color: var(--ssd-primary-dark) !important;
}

/* ── Submit button — brand teal ──
   city-b.css's ".ssd-city-b .wpcf7 input[type=submit]" also sets
   padding/margin-top !important at the same specificity — ".wpcf7"
   bump + !important throughout so ours wins. */
.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form input[type="submit"] {
    width: 100% !important;
    background: var(--ssd-primary) !important;
    color: var(--ssd-white) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 11px !important;
    margin-top: 4px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    cursor: pointer !important;
    transition: background-color 150ms;
}

.ssd-conversion-compact__form-panel .wpcf7 .wpcf7-form input[type="submit"]:hover {
    background: var(--ssd-primary-dark) !important;
}

/* ── Validation ── */
.ssd-conversion-compact__form-panel .wpcf7-not-valid-tip {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #ffb4b4;
}

.ssd-conversion-compact__form-panel .wpcf7-form input.wpcf7-not-valid,
.ssd-conversion-compact__form-panel .wpcf7-form textarea.wpcf7-not-valid {
    border: 2px solid var(--ssd-error);
}

.ssd-conversion-compact__form-panel .wpcf7-response-output {
    margin: 4px 0 0 !important;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--ssd-white);
    border-color: rgba(var(--ssd-white-rgb), .3) !important;
}