/* pardee-lead-gate — the lead form that opens over a property page when the link carries the
   social lead parameters.

   The form's look (labels, fields, checkboxes, consent text, button, validation) is the theme's
   site-wide Gravity Forms layer: the popup markup opts into its scope (ContentGate::popup()).
   This file owns only what is particular to this popup: the panel it sits on, the two scope
   wrappers, and the form's own heading, which this form shows ABOVE the fields (the site-wide
   layer turns a form description into a small legal line under the button).

   Panel = the site's 2026 dialogs (the gate module's panel, the showing request dialog): cream,
   8px radius, deep shadow. Every value is a design token or a value those dialogs already use.
   The #utm-gate-popup prefix (1,x,0) outranks the legacy .modal-div rule and the form layer's
   (0,5,0)–(0,6,1) rules on specificity, not load order. */

/* ── backdrop ────────────────────────────────────────────────
   The same ink scrim as the property page's showing request dialog (plain ink at .92, no blend). The popup
   opens with Magnific's mainClass `mfp-utm-popup`, which only this gate uses, and the gate adds
   `mfp-popup-open` to body while it is open; (0,4,2) outranks the theme's (0,3,0) navy-multiply rule. */
html body.mfp-popup-open .mfp-bg.mfp-utm-popup {
    background: rgba(0, 12, 19, .92);
    mix-blend-mode: normal;
    opacity: 1;
}

/* The popup scrolls inside its own fixed layer (ContentGate fixedContentPos); a swipe past the end of the
   form stays in that layer instead of moving the page underneath (iOS rubber-band). */
.mfp-wrap.mfp-utm-popup {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* The property page's gallery rule makes .mfp-content a full-height clipping box (and the theme's gate rule
   scrolls it), so the panel scrolled inside an invisible frame that cut its top and bottom off — on iPhone a
   frame taller than the visible screen. Natural height here: the fixed layer above does the scrolling.
   (0,3,1) outranks those (0,2,0) / (0,3,0) rules. */
body .mfp-wrap.mfp-utm-popup .mfp-content {
    height: auto;
    overflow: visible;
}

/* ── panel ───────────────────────────────────────────────── */
#utm-gate-popup.pardee-lgate {
    box-sizing: border-box;
    width: auto;
    max-width: 560px;
    margin: 20px auto;
    padding: clamp(28px, 4vw, 44px);
    background: var(--pp-cream, #fff6f0);
    color: var(--pardee-fg, #022534);
    border-radius: var(--r-md, 8px);
    box-shadow: 0 30px 80px rgba(0, 18, 28, .35);
}

/* the scope wrappers are hooks only: no box of their own */
#utm-gate-popup .pardee-lgate__scope,
#utm-gate-popup .pardee-lgate__scope .pardee-lgate__form {
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: none;
    background: none;
}

/* ── the form's heading + intro, above the fields ──────────
   The form's description holds an h3 + p; Gravity Forms wraps it in <p class="gform_description">,
   which the browser closes before the h3, so the heading and intro land as siblings of an empty
   paragraph inside .gform_heading. */
#utm-gate-popup .pardee-lgate__form .gform_wrapper .gform_heading {
    order: 0;
    margin: 0 0 20px;
    padding: 0;
}

#utm-gate-popup .pardee-lgate__form .gform_wrapper .gform_heading > p:empty {
    display: none;
}

#utm-gate-popup .pardee-lgate__form .gform_wrapper .gform_heading h3 {
    margin: 0 0 6px;
    padding: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.15;
    letter-spacing: -.005em;
    text-transform: none;
    color: var(--pardee-fg, #022534);
}

#utm-gate-popup .pardee-lgate__form .gform_wrapper .gform_heading p {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--pardee-body-weight, 400);
    font-size: 14.5px;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pardee-fg-muted, #624a3e);
}

/* ── the popup's one action fills the panel (as in the site's other form dialogs) ── */
#utm-gate-popup .pardee-lgate__form .gform_wrapper .gform_footer .gform_button,
#utm-gate-popup .pardee-lgate__form .gform_wrapper .gform_footer input[type="submit"] {
    width: 100%;
}

/* ── phone ───────────────────────────────────────────────── */
@media (max-width: 600px) {
    #utm-gate-popup.pardee-lgate {
        margin: 12px 10px;   /* + the popup container's 6px = the site's 16px phone gutter */
        padding: 28px 20px 24px;
        border-radius: var(--r-sm, 4px);
    }
}