/* Module headings are scoped `.fl-module-content .x` (0,2,0): BB Global Styles h1–h6 rules are (0,1,1) and would resize them. */
/* ── pardee-gate module ───────────────────────────────────────
   Relies on canonical .pardee-btn / .pardee-textlink (see _components.scss) and the
   row's surface tokens (--pardee-btn-bg/-fg flip on dark rows).
   Bespoke: the modal (backdrop + cream panel) and Gravity Forms chrome inside it.
   Content module: no padding, the row pads. page/links modes render nothing visible.
   ───────────────────────────────────────────────────────────── */

.pardee-gate--page,
.pardee-gate--links {
    display: contents;
}

.pardee-gate--button {
    display: flex;
    justify-content: flex-start;
}

.pardee-gate--button.pardee-gate--align-center {
    justify-content: center;
}

/* Buttons: same metrics as the core Button module, colours from the surface tokens. */
.pardee-gate .pardee-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    box-sizing: border-box;
    text-decoration: none;
}

@media (max-width: 640px) {
    .pardee-gate .pardee-btn {
        width: 100%;
        justify-content: center;
        white-space: normal;
        height: auto;
        min-height: var(--pardee-btn-h, 48px);
        padding-top: 12px;
        padding-bottom: 12px;
        line-height: 1.2;
        text-align: center;
    }
}

.pardee-gate__btn--filled {
    background: var(--pardee-btn-bg, var(--pp-ink-mid));
    color: var(--pardee-btn-fg, var(--pp-cream));
    border: 1px solid var(--pardee-btn-bg, var(--pp-ink-mid));
}

.pardee-gate__btn--filled:hover {
    background: var(--pardee-btn-bg-hover, var(--pp-ink));
    border-color: var(--pardee-btn-bg-hover, var(--pp-ink));
    color: var(--pardee-btn-fg, var(--pp-cream));
}

.pardee-gate__btn--outline {
    background: transparent;
    color: var(--pardee-fg, var(--pp-ink-mid));
    border: 1px solid var(--pardee-fg, var(--pp-ink-mid));
}

.pardee-gate__btn--outline:hover {
    background: var(--pardee-btn-bg, var(--pp-ink-mid));
    color: var(--pardee-btn-fg, var(--pp-cream));
}

.pardee-gate__textlink {
    color: var(--pardee-fg, var(--pp-ink-mid));
}

.pardee-gate__notice {
    margin: 0;
    font-family: "Courier New", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pp-clay);
}

/* ── Modal ──────────────────────────────────────────────── */

.pardee-gate__modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.pardee-gate__modal[hidden] {
    display: none;
}

.pardee-gate__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 18, 28, .72);
}

.pardee-gate__panel {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    overflow: auto;
    padding: clamp(28px, 4vw, 44px);
    background: var(--pp-cream);
    color: var(--pp-ink-mid);
    border-radius: var(--r-md);
    box-shadow: 0 30px 80px rgba(0, 18, 28, .35);
    /* light-surface tokens inside the panel whatever the row surface */
    --pardee-fg: var(--pp-ink-mid);
    --pardee-fg-muted: var(--pp-clay);
    --pardee-line: var(--line-soft);
    --pardee-btn-bg: var(--pp-ink-mid);
    --pardee-btn-fg: var(--pp-cream);
    --pardee-btn-bg-hover: var(--pp-ink);
}

.pardee-gate__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 26px;
    line-height: 1;
    color: var(--pp-clay);
    transition: color var(--dur-base);
}

.pardee-gate__close:hover {
    color: var(--pp-ink-mid);
}

.fl-module-content .pardee-gate__heading {
    margin: 0 0 8px 24px;
    margin-left: 0;
    padding-right: 32px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.15;
    letter-spacing: -.005em;
    color: var(--pp-ink-mid);
}

.pardee-gate__text {
    margin: 0 0 20px;
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--pp-clay);
}

/* ── Gravity Form: the LOOK (labels, inputs, checkboxes, selects, button, validation) is site-wide in the theme —
   scss/redesign-2026/_forms.scss on the --pardee-input-* tokens (Component Library §05). This module owns only where the
   fields sit. ── */
/* the modal panel is always cream, whatever row the gate sits in → light-mode form tokens on the panel */
.pardee-gate__panel {
    --pardee-fg: var(--pp-ink-mid); --pardee-fg-muted: var(--pp-clay); --pardee-outline: var(--pp-ink-mid);
    --pardee-btn-bg: var(--pp-ink-mid); --pardee-btn-fg: var(--pp-cream); --pardee-btn-bg-hover: var(--pp-ink);
    --pardee-input-bg: var(--pp-cream); --pardee-input-fg: var(--pp-ink-mid); --pardee-input-border: var(--pp-tan); --pardee-input-border-w: 1px;
    --pardee-input-radius: var(--r-sm); --pardee-input-pad: 0 14px; --pardee-input-ph: #6E5A4C; --pardee-input-focus: var(--pp-ink-mid);
    --pardee-input-focus-ring: 0 0 0 3px rgba(2, 37, 52, .12); --pardee-input-disabled-bg: var(--pp-sand);
    --pardee-label-color: var(--pp-clay); --pardee-check-accent: var(--pp-ink-mid);
    --pardee-select-chevron: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23022534' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    --pardee-select-chevron-pos: right 14px center;
}

/* ── The panel is a LIGHT surface inside ANY row ──────────────────────────────────────────────
   Mirrors what the theme already does for a light-surfaced COLUMN on a dark row
   (`scss/redesign-2026/_forms.scss`, "$pardee-light-cols"). Two halves:

   (a) TOKENS. Custom properties inherit from the ROW, so a gate on an ink/brown/photo row would take
       the dark set onto its cream panel. The block above re-declares the form + button tokens; the rest
       (`--pardee-fg-faint`, `--pardee-link`, `--pardee-eyebrow-color`, …) would still resolve dark.
       Nearest declaration wins for custom properties, so declaring the theme's light-surface values
       on the panel is enough; on a light row they are the values already inherited, so nothing moves.

   (b) HARD RULES. The theme's dark-ROW form block ("$pardee-dark-rows") is NOT token-driven and is
       gated on the row surface only, so it cannot see the panel:
         `.fl-row[data-pardee-spacing][data-pardee-surface="ink"] .fl-module-content .gform_wrapper
          .gchoice label { color: rgba(255, 246, 240, .85) }`   → (0,6,1)
       would paint the Gravity Form's radio/checkbox labels cream ON the cream panel — invisible; the same
       for `.gform_description` (0,6,0) and `select` (0,6,1), plus the mockup metrics (38px fields,
       64px textarea): labels resolve to rgba(255,246,240,.85) and the description to
       rgba(255,246,240,.5) on a rgb(255,246,240) panel.
       Re-assert them here at the LIGHT values from a prefix that reaches (0,7,0) — the modal's
       `[data-gate-modal]` and the panel's `[role="dialog"]` are what carry it past (0,6,1), so no
       `!important` — and repeat GF's 7-long `:not()` chain where the theme repeats it ((0,13,1)).
       Values are the theme's light-surface ones, so a gate on a light row computes unchanged.
   ──────────────────────────────────────────────────────────────────────────────────────────────── */
.pardee-gate__panel {
    --pardee-fg-faint: var(--pp-clay);
    --pardee-fg-soft: var(--pp-clay);
    --pardee-link: #012F48;
    --pardee-link-hover: var(--pp-ink);
    --pardee-line: var(--line-soft);
    --pardee-eyebrow-color: var(--pp-clay);
    --pardee-accent-color: var(--pp-clay);
    --pardee-card-bg: var(--pp-cream);
    --pardee-card-bg-hover: var(--pp-cream-warm);
}

/* (0,8,1) — beats the dark-row choice-label rule (0,6,1) */
.pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper .gfield_checkbox label,
.pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper .gfield_radio label,
.pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper .gchoice label {
    font-family: var(--font-body);
    font-weight: var(--pardee-w-regular);
    font-size: 14px;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--pardee-fg);
}

/* (0,8,0) — beats the dark-row description rule (0,6,0); the designs' legal/consent line */
.pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper .gform_description {
    color: var(--pardee-fg-faint, var(--pardee-fg-muted));
}

/* (0,8,0) — field labels + legends: token-driven in the theme, re-asserted so the panel owns them */
.pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper .gfield_label,
.pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper .gform-field-label,
.pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper .ginput_complex label {
    color: var(--pardee-label-color);
}

/* (0,14,1) / (0,7,1) — the mockup metrics the dark-row block hard-codes; light values = what the
   same modal computes on /equity/, /international/, /mortgage-reset-game-plan/ today */
.pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]):not([type=hidden]),
.pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper select {
    height: auto;
    min-height: var(--pardee-input-h);
    padding-top: 0;
    padding-bottom: 0;
    color: var(--pardee-input-fg);
}

/* (0,7,1) */
.pardee-gate .pardee-gate__modal[data-gate-modal] .pardee-gate__panel[role="dialog"] .pardee-gate__form .gform_wrapper textarea {
    height: auto;
    min-height: 120px;
}

.pardee-gate__form .gform_wrapper .gform_heading { padding-right: 32px; }   /* clear the close button */
.pardee-gate__form .gform_wrapper .gform_button, .pardee-gate__form .gform_wrapper input[type="submit"] { width: 100%; }   /* the modal's one action fills the panel */


body.pardee-gate-open {
    overflow: hidden;
}

/* In the builder: never trap the editor behind a page gate; show the modal inline for editing. */
.fl-builder-edit .pardee-gate__modal {
    position: static;
    display: block;
    padding: 0;
    margin-top: 16px;
}
.fl-builder-edit .pardee-gate__modal[hidden] { display: block; }
.fl-builder-edit .pardee-gate__backdrop { display: none; }
.fl-builder-edit .pardee-gate__panel { box-shadow: none; border: 1px dashed var(--pp-tan); max-width: none; }


/* BB Global Styles paint every bare <button> in a module as the site button —
   `.fl-builder-content .fl-module-content:not(:has(.fl-inline-editor)) button:not(.fl-content-ui-button)` is (0,4,1)
   for background-color, `.fl-builder-content button:not(.fl-content-ui-button)` (0,2,1) for the cream text, border,
   4px radius and 13px/700 uppercase type — so the modal's × rendered as a navy chip on the cream panel.
   The dismiss is a bare glyph (no claude-design counterpart: the gate replaces the legacy
   ppbbm-content-gate / #resource-popup), so re-assert the rule above at (0,5,0). */
.fl-builder-content .fl-module-content .pardee-gate .pardee-gate__panel .pardee-gate__close {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    color: var(--pp-clay);
    font-family: var(--font-body);
    font-weight: var(--pardee-w-regular, 400);
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.fl-builder-content .fl-module-content .pardee-gate .pardee-gate__panel .pardee-gate__close:hover,
.fl-builder-content .fl-module-content .pardee-gate .pardee-gate__panel .pardee-gate__close:focus {
    background: none;
    color: var(--pp-ink-mid);
}

/* The × glyph sits in a <span>; `.fl-builder-content button:not(.fl-content-ui-button) *` (0,2,1) paints
   every descendant of a button cream, so the span inherits the button's own colour here at (0,4,1). */
.fl-builder-content .pardee-gate .pardee-gate__panel .pardee-gate__close span,
.pardee-gate .pardee-gate__modal .pardee-gate__panel .pardee-gate__close span {
    color: inherit;
}

/* Keyboard focus: a visible ink ring around the dismiss. */
.fl-builder-content .fl-module-content .pardee-gate .pardee-gate__panel .pardee-gate__close:focus-visible,
.pardee-gate.pardee-gate--inline .pardee-gate__modal .pardee-gate__panel button.pardee-gate__close:focus-visible {
    outline: 2px solid var(--pp-ink-mid);
    outline-offset: 2px;
    border-radius: 2px;
}


/* ── Gate inside CLASSIC post content ────────────────────────────────────────
   `[pardee_gate]` renders the same markup as the module in `button` mode, plus
   `.pardee-gate--inline`. In an article there is no BB row to pad it, so the
   block owns its own vertical rhythm; and the modal's × has to beat the same BB
   Global Styles button rules the module fights above (0,4,1), at a selector that
   does not assume a `.fl-module-content` ancestor — hence (0,5,1) below.
   Nothing here applies to the Gate module on existing pages: `--inline` is only
   ever emitted by the shortcode.
   ───────────────────────────────────────────────────────────────────────────── */
.pardee-gate--inline {
    margin: 32px 0;
}

.pardee-gate--inline + .pardee-gate--inline {
    margin-top: 16px;
}

/* Article prose paints every <a> inside it: `.pp-prose .pardee-postbody a { color: var(--pardee-fg) }`
   is (0,2,1) and loads AFTER this file, so it would tie with `.pardee-gate--inline a.pardee-btn` and win on
   order, rendering the gate's label ink-on-ink, i.e. invisible. Compounding `.pardee-gate` onto
   the modifier takes
   these to (0,3,1), which the prose rules do not reach, wherever the shortcode is placed. */
.pardee-gate.pardee-gate--inline a.pardee-btn {
    text-decoration: none;
    background: var(--pardee-btn-bg, var(--pp-ink-mid));
    color: var(--pardee-btn-fg, var(--pp-cream));
    border: 1px solid var(--pardee-btn-bg, var(--pp-ink-mid));
}

.pardee-gate.pardee-gate--inline a.pardee-btn:hover {
    background: var(--pardee-btn-bg-hover, var(--pp-ink));
    border-color: var(--pardee-btn-bg-hover, var(--pp-ink));
    color: var(--pardee-btn-fg, var(--pp-cream));
}

.pardee-gate.pardee-gate--inline a.pardee-btn.pardee-gate__btn--outline {
    background: transparent;
    color: var(--pardee-fg, var(--pp-ink-mid));
    border: 1px solid var(--pardee-fg, var(--pp-ink-mid));
}

.pardee-gate.pardee-gate--inline a.pardee-btn.pardee-gate__btn--outline:hover {
    background: var(--pardee-btn-bg, var(--pp-ink-mid));
    color: var(--pardee-btn-fg, var(--pp-cream));
}

.pardee-gate.pardee-gate--inline a.pardee-textlink {
    text-decoration: none;
    color: var(--pardee-fg, var(--pp-ink-mid));
}

.pardee-gate.pardee-gate--inline .pardee-gate__modal .pardee-gate__panel button.pardee-gate__close {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    color: var(--pp-clay);
    font-family: var(--font-body);
    font-weight: var(--pardee-w-regular, 400);
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.pardee-gate.pardee-gate--inline .pardee-gate__modal .pardee-gate__panel button.pardee-gate__close:hover {
    background: none;
    color: var(--pp-ink-mid);
}

/* Mid-article Gravity Form (`[pardee_form]`) — the legacy module sat in its own BB row. */
.pardee-article-form {
    margin: 32px 0;
}