/* ============================================================
   Hero Banner Form — restyle of the parent theme's raw CF7 card.
   Two different wrappers render the same kind of raw CF7 card
   across the site, so every rule below targets both via :is():
   - .inner_page_form — rendered by lawcounsel/inc/header/theme-banner.php
     on the default page banner (CF7 id 59035d5 "home version 2 banner").
   - .radiant-contact-form — rendered by the radiantthemes-addons plugin's
     [rt_cf7_style] WPBakery shortcode (class-radiantthemes-style-cf7.php),
     which wraps the home page's hero CF7 form (id 312, "Request a free
     Consultation") inside the front page's WPBakery row/column content.

   Same form/markup as consult-panel.php's navy form-wrap variant —
   this file ports that card's structure/spacing techniques
   (row/col-sm-12/form-row flex layout, paired fields, flex radio
   groups, scrollable acceptance text) onto the parent's raw markup,
   since the parent banner can't use the consult-panel template part.
   ============================================================ */

:is(.inner_page_form, .radiant-contact-form) {
    border-radius: 16px !important;
    box-shadow: 0 40px 80px -40px rgba(15, 42, 114, .35) !important;
    box-sizing: border-box !important;
    padding: 26px 30px !important;
}
:is(.inner_page_form, .radiant-contact-form) * ,
:is(.inner_page_form, .radiant-contact-form) *::before,
:is(.inner_page_form, .radiant-contact-form) *::after { box-sizing: border-box !important; }

/* fieldset holding CF7's hidden meta inputs — never shown */
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form fieldset.hidden-fields-container { display: none !important; }

/* ── Row / column layout — same flex trick as consult-panel:
   .col-sm-12 becomes a transparent pass-through (display:contents)
   so .form-row's become direct flex children of .row, laid out with
   a consistent gap instead of the parent's default block stacking. ── */
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .row {
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    column-gap: 14px !important;
}
:is(.radiant-contact-form) .wpcf7-form .row {
    row-gap: 0px !important;
}
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .row > .col-sm-12 { display: contents !important; }
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .row h3,
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .row .form-row { flex: 0 0 100% !important; width: 100% !important; }
/* margin:0 (not just margin-bottom): .inner_page_form pages get their
   <p>/<h3> margins zeroed for free via style.css's global
   ".ssd-wrap * { margin: unset!important }" reset. .radiant-contact-form
   (the home page's WPBakery-embedded instance) sits outside .ssd-wrap
   entirely, so CF7's browser-default <p> top-margin was still stacking
   on top of the .row's own row-gap on every field, on that page only. */
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row p { margin: 0 !important; }
/* Same reset for the "Request a FREE Consultation" <h3> — only its
   margin-top, so the page-authored inline margin-bottom:20px (the gap
   before the first field) still applies. */
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .row h3 { margin-top: 0 !important; }

/* Pair first/last name and phone/email side by side once there's
   room — halves the card's vertical height on tablet/desktop where
   the column sits next to the banner image. */
@media (min-width: 480px) {
    :is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row:has([data-name="first-name"]),
    :is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row:has([data-name="last-name"]),
    :is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row:has([data-name="your-phone"]),
    :is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row:has([data-name="your-email"]) {
        /* half of .row's 14px column-gap: two fields at this width plus
           the gap must total exactly 100%, or the extra overflow pushes
           the second field onto its own line. */
        flex: 1 1 calc(50% - 7px) !important;
        width: calc(50% - 7px) !important;
    }
}

/* Sidebar instance of this same [rt_cf7_style]/CF7-312 form (e.g. the
   sidebar consult widget on ssdi/ pages) reuses .radiant-contact-form
   in a much narrower column than the hero banner's — the pairing rule
   above only checks viewport width, not the sidebar's actual (much
   narrower) column width, so it was squeezing paired fields into that
   column regardless. The sidebar row carries its own ".sidebar_class"
   ancestor wrapper, which the hero banner instance never has, so that's
   the hook used here to opt this instance back out to one full-width
   field per row, overriding the pairing rule above (higher specificity
   via the extra .sidebar_class ancestor — wins regardless of viewport). */
.sidebar_class :is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row:has([data-name="first-name"]),
.sidebar_class :is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row:has([data-name="last-name"]),
.sidebar_class :is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row:has([data-name="your-phone"]),
.sidebar_class :is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row:has([data-name="your-email"]) {
    flex: 0 0 100% !important;
    width: 100% !important;
}

/* ── Contact Us page's "We Love to Hear from You" card ──
   A second, different .radiant-contact-form instance (CF7 fields:
   first-name/your-email/your-phone/subject/description, no last-name)
   sitting in a much narrower page column (a vc_col-sm-8 split with a
   map alongside it) than the hero banner's wide card. Restyled to one
   field per row (rather than the hero banner's 2-per-row pairing) with
   a tight gap between rows. Grid (not the flex approach above) because
   it sidesteps the flex-basis/min-content sizing issues that came up
   while pairing fields here. Scoped via the "subject" field (only this
   form has one) rather than any auto-generated CF7 id or
   radiantthemes-addons wrapper hash, both of which regenerate on every
   page load/re-save. */
@media (min-width: 480px) {
    .radiant-contact-form:has(.form-row [data-name="subject"]) .wpcf7-form .row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        row-gap: 6px !important;
    }
    .radiant-contact-form:has(.form-row [data-name="subject"]) .wpcf7-form .row > .col-sm-12 {
        display: contents !important;
    }
    /* Overrides the base rule's width:100%/flex:0 0 100% above and the
       flex-pairing rule's width:calc(50% - 7px) — both still apply here
       (their selectors match any .radiant-contact-form) and would
       otherwise leave your-phone/your-email at the flex pairing's fixed
       calc(50% - 7px) box width instead of this grid's single column. */
    .radiant-contact-form:has(.form-row [data-name="subject"]) .wpcf7-form .form-row {
        min-width: 0 !important;
        width: auto !important;
    }
}

/* ── Inputs / textarea ──
   height:auto (not a fixed px) + padding controls the box: the
   parent's own ".form-row input{height:40px!important}" rule would
   otherwise win on its own (nothing here contested it), forcing a
   fixed height that clipped/misaligned taller content — same root
   cause as the submit button below.
   Selectors go through .form-row (matching the actual markup) rather
   than straight to input/textarea: the radiantthemes-addons plugin's
   own CF7 stylesheet (radiantthemes-contact-form-element-one.css) —
   auto-loaded only when the home page's [rt_cf7_style] shortcode
   renders, never on .inner_page_form pages — sets
   ".radiant-contact-form .form-row textarea{height:80px!important;
   padding:5px 15px!important}" at the exact same specificity
   (2 classes + 1 element) as this rule used to have, so it was a
   coin-flip on load order which one won — on the home page the
   plugin's 80px was winning, making the textarea visibly taller and
   pushing the consent box down. Adding .form-row here matches the
   plugin's own selector depth plus one, so ours always wins outright
   regardless of load order. */
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row input[type="text"],
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row input[type="email"],
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row input[type="tel"] {
    height: auto !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    color: #1A1A2E !important;
    width: 100% !important;
}
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row textarea {
    width: 100% !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #1A1A2E !important;
    resize: vertical !important;
    height: 52px !important;
    min-height: 0 !important;
}

/* Sidebar instance only (see .sidebar_class note above) — smaller
   inputs/textarea than the hero banner's, since the sidebar column
   itself is much narrower. */
.sidebar_class :is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row input[type="text"],
.sidebar_class :is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row input[type="email"],
.sidebar_class :is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row input[type="tel"] {
    padding: 8px 12px !important;
    font-size: 13px !important;
}
.sidebar_class :is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row textarea {
    padding: 8px 12px !important;
    font-size: 13px !important;
    height: 44px !important;
}
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row:has(textarea) br { display: none !important; }

/* ── Radio questions — flex row instead of the parent's
   one-option-per-line (.wpcf7-list-item{width:100%}) stacking. ── */
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form label { color: rgba(255,255,255,.9) !important; font-size: 14px !important; line-height: 1.5 !important; }
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .wpcf7-radio, input[type='radio'] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 24px !important;
    margin: 6px 0 4px !important;
}
:is(.radiant-contact-form) .wpcf7-form .wpcf7-radio, input[type='radio'] {
    margin: 0px 0 0px !important;
}
/* Sidebar instance only — the question label's line-height and the
   Yes/No gap (6px row-gap, 24px column-gap) both read as too roomy
   in the sidebar's narrower column, so both shrink here. */
.sidebar_class :is(.inner_page_form, .radiant-contact-form) .wpcf7-form label {
    line-height: 1.3 !important;
}
.sidebar_class :is(.inner_page_form, .radiant-contact-form) .wpcf7-form .wpcf7-radio {
    gap: 2px 16px !important;
}
/* Applies everywhere this card renders (hero banner + sidebar +
   inner pages) — only the .form-row wrapping a radio question, not
   every .form-row, so plain text-field rows are untouched. */
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row:has(input[type="radio"]) {
    margin-bottom: -10px !important;
}
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .wpcf7-list-item {
    width: auto !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .wpcf7-list-item label {
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .wpcf7-list-item-label { color: rgba(255,255,255,.9) !important; }

/* ── Consent acceptance — fixed-height scroll box (not max-height,
   so the box is a consistent size whether the CF7 copy is short or
   long) with the checkbox centered against that fixed box rather
   than pinned to the text's first line. Wrapped in its own bordered
   box (matching consult-panel's navy-variant treatment in style.css)
   so it reads as one distinct control instead of loose text. ── */
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .wpcf7-acceptance {
    display: block !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.04) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
}
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .wpcf7-acceptance label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,.65) !important;
}
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    flex-shrink: 0 !important;
    margin: 0 !important;
    align-self: flex-start;
    position: relative;
    top: -7px;
}
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .wpcf7-acceptance .wpcf7-list-item-label {
    display: block !important;
    height: 64px !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
    color: rgba(255,255,255,.65) !important;
}

/* ── Submit button ──
   height:auto + display:flex centering: the parent's own
   ".form-row input{height:40px!important}" rule otherwise wins
   uncontested on height (this rule only out-specifies it on padding),
   fixing the box at 40px while padding:15px top+bottom alone needed
   30px+ — the label text got squeezed down against the bottom edge. */
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form input[type="submit"] {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--ssd-accent, #4eb21e) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 13px 15px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    cursor: pointer !important;
    margin-top: 8px !important;
    transition: background 150ms !important;
}
/* CF7 renders the submit button with the disabled attribute and only
   removes it via JS once the required consent checkbox is checked —
   until then it was showing the exact same bright green as the active
   button, wrongly signalling it was clickable. Selector goes through
   .form-row (not just input[type="submit"]) to out-specify the
   radiantthemes-addons plugin's own
   ".form-row input[type=submit]{cursor:pointer!important}" rule,
   which would otherwise keep the pointer cursor on the disabled button. */
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .form-row input[type="submit"]:disabled {
    background: rgba(255,255,255,.15) !important;
    color: rgba(255,255,255,.5) !important;
    cursor: not-allowed !important;
}
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form input[type="submit"]:hover {
    background: var(--ssd-accent-dark, #3A8516) !important;
}

/* ── Validation / response messaging ── */
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form .wpcf7-not-valid-tip { color: #ff6b6b !important; font-size: 12px !important; display: block !important; }
:is(.inner_page_form, .radiant-contact-form) .wpcf7-form span.wpcf7-not-valid { border: none !important; outline: none !important; background: transparent !important; }
:is(.inner_page_form, .radiant-contact-form) .wpcf7-response-output { margin: 12px 0 0 !important; padding: 10px 14px !important; border-radius: 8px !important; color: #ffffff !important; }

@media (min-width: 768px) {
    :is(.inner_page_form, .radiant-contact-form) { padding: 15px 35px 0px 35px !important; }
    :is(.radiant-contact-form) { padding: 25px 25px 0px 25px !important; }
}
:is(.inner_page_form, .radiant-contact-form) .form-row label {
  margin-bottom: 0px !important;
}