/**
 * PLGC Gravity Forms — Theme Stylesheet
 *
 * Design source: Figma node 42551:9980 (Membership Questions form)
 *
 * CORE PHILOSOPHY:
 *   This stylesheet styles GF's visual appearance only.
 *   It never touches GF's layout system (floats, grid, column classes).
 *   GF's half-width, third-width, and inline columns are left completely
 *   alone so they continue to work exactly as GF intends.
 *
 * Figma tokens:
 *   Labels       Open Sans SemiBold 20px / #000000
 *   Sub-labels   Open Sans Regular 16px  / #000000
 *   (Required)   Open Sans Regular 17px  / #567915
 *   Input border #2D5032, 1px solid
 *   Input height 46px
 *   Checkbox/Radio border #767676 (SC 1.4.11: 4.6:1 ✅)
 *   Submit       #FFAE40 pill, SemiBold 15px, 47px
 *
 * WCAG 2.1 AA:
 *   SC 1.4.3  — all text ≥4.5:1 ✅
 *   SC 1.4.11 — input borders #2D5032 on white 9.1:1 ✅
 *               checkbox/radio border #767676 on white 4.6:1 ✅
 *   SC 1.4.1  — errors: border-left + text, not colour alone ✅
 *   SC 2.4.7  — focus ring #567915 on white 5.07:1 ✅
 *   SC 2.5.5  — inputs 46px; checkbox/radio label min-height 44px ✅
 *   SC 3.3.2  — (Required) indicators always visible ✅
 *
 * @package PLGC
 * @since   1.6.37
 */

/* ============================================================
   1. WRAPPER RESET
   ============================================================ */

.gform_wrapper {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    color: var(--plgc-black, #000000);
}

.gform_wrapper *,
.gform_wrapper *::before,
.gform_wrapper *::after {
    box-sizing: border-box;
}

.gform_wrapper form {
    margin: 0;
}

/* ============================================================
   2. FIELD SPACING
   Only vertical rhythm — never touch GF's column/float layout.
   ============================================================ */

.gform_wrapper .gfield {
    margin-bottom: 0.5rem;            /* 8px — tight but readable rhythm between fields */
    padding: 0;
}

.gform_wrapper .gfield:last-child {
    margin-bottom: 0;
}

/* ============================================================
   3. LABELS
   GF uses several label classes depending on field type and version.
   All are brought to the same font so every label looks identical.
   ============================================================ */

/* Primary field label — covers all field types. */
.gform_wrapper .gfield_label {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 1.25rem !important;   /* 20px — Figma H4 */
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--plgc-black, #000000) !important;
    margin: 0 0 0.5rem !important;
    display: block;
}

/* Group-level label on complex fields (Name, Address, Email confirm, etc.)
   Chained selector (.gfield_label.gfield_label_before_complex) targets elements
   with BOTH classes simultaneously — higher specificity than GF5's orbital theme
   rules which target a single class and would otherwise win on source order. */
.gform_wrapper .gfield_label.gfield_label_before_complex,
.gform_wrapper .gform-field-label.gfield_label_before_complex {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--plgc-black, #000000) !important;
    margin: 0 0 0.875rem !important;  /* 14px — more gap before sub-label columns */
    display: block;
}

/* GF5 alternate label class — applies to top-level field labels in newer GF builds.
   Exclude choice labels, sub-labels, AND complex group labels
   (gfield_label_before_complex) — the latter has its own margin rule above. */
.gform_wrapper .gform-field-label:not(.gform-field-label--type-inline):not(.gform-field-label--type-sub):not(.gfield_label_before_complex) {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--plgc-black, #000000) !important;
    margin: 0 0 0.5rem !important;
}

/* Sub-labels on Name, Address complex fields (First, Last, City, State).
   GF5 marks these with --type-sub; older GF uses --type-inline.
   Kept at 20px to match the field input size, but 400 weight so they read as
   a sub-label rather than a peer of the group label above. */
.gform_wrapper .ginput_complex .gform-field-label--type-sub,
.gform_wrapper .ginput_complex .gform-field-label--type-inline {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: var(--plgc-black, #000000) !important;
    margin: 0 0 0.5rem !important;
}

/* Choice labels (checkbox + radio options) — override the broad rule above.
   Figma: 16px / 400 weight, body copy style. */
.gform_wrapper .gfield_checkbox .gform-field-label,
.gform_wrapper .gfield_radio .gform-field-label,
.gform_wrapper .gchoice .gform-field-label {
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 2rem !important;
    margin: 0 !important;
    display: block;
}

/* "Select All" toggle is bold per Figma */
.gform_wrapper .gchoice_select_all .gform-field-label {
    font-weight: 700 !important;
}

/* Sub-labels inside complex fields: First/Last on Name, City/State on Address */
.gform_wrapper .ginput_complex label,
.gform_wrapper .ginput_address label,
.gform_wrapper .name_sub_label,
.gform_wrapper .address_sub_label {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: var(--plgc-black, #000000) !important;
    margin-top: 0.375rem;
    display: block;
}

/* ============================================================
   4. REQUIRED INDICATORS
   SC 3.3.2 — must be clearly visible.
   Styled in brand green (#567915) per Figma design.
   IMPORTANT: never add display:none to any of these.
   ============================================================ */

.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_asterisk,
.gform_wrapper .gfield_required_text {
    color: var(--plgc-dark-green, #567915) !important;
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 1.0625rem !important;
    font-weight: 400 !important;
    margin-left: 0.25rem;
}

/* Suppress GF5's CSS-generated ::after indicator — GF adds its own span */
.gform_wrapper .gfield--is-required .gfield_label::after {
    content: none;
}

/* ============================================================
   5. FIELD DESCRIPTION
   ============================================================ */

.gform_wrapper .gfield_description,
.gform_wrapper .gfield_description.instruction {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.75rem;
    color: var(--plgc-black, #000000);
    margin: 0 0 0.625rem;
}

/* ============================================================
   6. TEXT INPUTS — text, email, phone, number, url, password,
      search, date, time
   ============================================================ */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="search"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="time"] {
    width: 100%;
    height: 2.875rem;                /* 46px */
    min-height: 2.75rem;             /* 44px — SC 2.5.5 */
    padding: 0 0.875rem;
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    font-weight: 400;
    color: var(--plgc-black, #000000) !important;
    background: var(--plgc-white, #FFFFFF);
    border: 1px solid var(--plgc-medium-green-tone, #2D5032);
    border-radius: 0;
    outline: none;
    transition: border-color var(--plgc-transition-fast, 150ms ease-in-out),
                box-shadow   var(--plgc-transition-fast, 150ms ease-in-out);
    -webkit-appearance: none;
    appearance: none;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper input[type="search"]:focus,
.gform_wrapper input[type="date"]:focus,
.gform_wrapper input[type="time"]:focus {
    border-color: var(--plgc-dark-green, #567915);
    box-shadow: 0 0 0 0.125rem var(--plgc-focus-color, #567915);
    outline: none;
}

/* ============================================================
   7. TEXTAREA
   ============================================================ */

.gform_wrapper textarea,
.gform_wrapper textarea.large,
.gform_wrapper textarea.medium,
.gform_wrapper textarea.small {
    width: 100%;
    min-height: 10rem;
    padding: 0.75rem 0.875rem;
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    font-weight: 400;
    color: var(--plgc-black, #000000) !important;
    background: var(--plgc-white, #FFFFFF);
    border: 1px solid var(--plgc-medium-green-tone, #2D5032);
    border-radius: 0;
    outline: none;
    resize: vertical;
    transition: border-color var(--plgc-transition-fast, 150ms ease-in-out),
                box-shadow   var(--plgc-transition-fast, 150ms ease-in-out);
    -webkit-appearance: none;
    appearance: none;
}

.gform_wrapper textarea:focus {
    border-color: var(--plgc-dark-green, #567915);
    box-shadow: 0 0 0 0.125rem var(--plgc-focus-color, #567915);
    outline: none;
}

/* ============================================================
   8. SELECT / DROPDOWN
   ============================================================ */

.gform_wrapper select {
    width: 100%;
    height: 2.875rem;
    min-height: 2.75rem;
    padding: 0 2.5rem 0 0.875rem;
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    font-weight: 400;
    color: var(--plgc-black, #000000) !important;
    background-color: var(--plgc-white, #FFFFFF);
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L10.5 11L20 1' stroke='%23233C26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 1rem auto;
    border: 1px solid var(--plgc-medium-green-tone, #2D5032);
    border-radius: 0;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--plgc-transition-fast, 150ms ease-in-out),
                box-shadow   var(--plgc-transition-fast, 150ms ease-in-out);
}

.gform_wrapper select:focus {
    border-color: var(--plgc-dark-green, #567915);
    box-shadow: 0 0 0 0.125rem var(--plgc-focus-color, #567915);
    outline: none;
}

/* Multi-select — restore height, remove chevron, allow multiple visible rows.
   NOTE: <option> background styling has no reliable cross-browser support.
   The OS/browser controls option highlighting in a native select[multiple].
   We do not attempt to override it — doing so breaks click behaviour
   in Chrome and Safari. The branded border and focus ring are sufficient. */
.gform_wrapper select[multiple] {
    height: auto;
    min-height: 8rem;
    background-image: none;          /* no chevron on multi-select */
    padding: 0.25rem 0;
}

/* ============================================================
   9. CHECKBOXES
   Custom-styled via label::before (box) and label::after (tick).

   GF5 STRUCTURE NOTE:
   Gravity Forms 5 renders choices as div.gchoice (not li). Older builds
   use ul.gfield_checkbox > li. Both are covered here.

   GF5 THEME FRAMEWORK NOTE:
   GF5's .gform-theme--framework CSS applies accent-color and appearance
   overrides via :where() selectors (specificity 0). We beat it with
   !important on the key hiding properties. Without !important, the native
   checkbox remains visible and shows the OS accent colour (often purple).

   TOUCH TARGET APPROACH:
   Native input hidden at natural size — inset:0 is NOT used because it
   caused adjacent half-width field click failures in earlier builds.

   SC 2.5.5 ✅: label min-height 44px, cursor:pointer on both elements.
   SC 1.4.11 ✅: border #767676 on white = 4.6:1 (3:1 required).
   ============================================================ */

/* Override GF's orbital theme label spacing variable for checkbox fields.
   --gf-label-space-y-md-secondary defaults to 12px in gform-theme--framework,
   which adds extra vertical space between checkbox rows.
   Chained with .gform-theme--framework to match the specificity of the
   rule that originally sets this variable, ensuring we win. */
.gform-theme--framework .gfield--type-checkbox,
.gform-theme--framework .gfield--type-multi_choice,
.gform-theme--orbital .gfield--type-checkbox,
.gform-theme--orbital .gfield--type-multi_choice,
.gform_wrapper .gfield--type-checkbox,
.gform_wrapper .gfield--type-multi_choice {
    --gf-label-space-y-md-secondary: 0px !important;
    --gf-label-space-y-secondary: 0px !important;
}

/* Container — both ul (older GF) and div (GF5) */
.gform_wrapper .gfield--type-checkbox .gfield_checkbox,
.gform_wrapper ul.gfield_checkbox {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Row — li (older GF) and div.gchoice (GF5).
   !important on margin AND padding prevents GF5 framework from adding spacing. */
.gform_wrapper .gfield--type-checkbox .gfield_checkbox li,
.gform_wrapper ul.gfield_checkbox li,
.gform_wrapper .gfield_checkbox .gchoice {
    display: flex;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 2.75rem;             /* 44px — SC 2.5.5 WCAG AA floor, cannot reduce */
    position: relative;
}

/* Native input: hidden, natural size, sits at left edge.
   !important required to beat GF5 theme framework resets. */
.gform_wrapper .gfield--type-checkbox input[type="checkbox"],
.gform_wrapper ul.gfield_checkbox input[type="checkbox"],
.gform_wrapper .gfield_checkbox .gchoice input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    accent-color: transparent !important;
}

/* Label = the touch target — covers both legacy label and GF5 gform-field-label */
.gform_wrapper .gfield--type-checkbox label,
.gform_wrapper ul.gfield_checkbox label,
.gform_wrapper .gfield_checkbox .gchoice label,
.gform_wrapper .gfield_checkbox .gchoice .gform-field-label {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5rem !important;  /* tighter than 2rem — row height still 44px via min-height */
    color: var(--plgc-black, #000000) !important;
    cursor: pointer;
    padding: 0.1875rem 0.75rem 0.1875rem 2rem !important;
    position: relative;
    min-height: 2.75rem;             /* 44px — SC 2.5.5 ✅ */
    display: flex !important;
    align-items: center;
    width: 100%;
    border-radius: 2px;
    transition: background var(--plgc-transition-fast, 150ms ease-in-out);
    margin: 0 !important;
}

.gform_wrapper .gfield--type-checkbox label:hover,
.gform_wrapper ul.gfield_checkbox label:hover,
.gform_wrapper .gfield_checkbox .gchoice label:hover,
.gform_wrapper .gfield_checkbox .gchoice .gform-field-label:hover {
    background: rgba(86, 121, 21, 0.06);
}

/* "Select All" label is bold */
.gform_wrapper .gchoice_select_all label,
.gform_wrapper .gchoice_select_all .gform-field-label {
    font-weight: 700 !important;
}

/* Custom checkbox box */
.gform_wrapper .gfield--type-checkbox label::before,
.gform_wrapper ul.gfield_checkbox label::before,
.gform_wrapper .gfield_checkbox .gchoice label::before,
.gform_wrapper .gfield_checkbox .gchoice .gform-field-label::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    background: var(--plgc-white, #FFFFFF) !important;
    border: 2px solid #767676 !important;  /* 4.6:1 on white — SC 1.4.11 ✅ */
    border-radius: 3px !important;
    flex-shrink: 0;
    transition: background     var(--plgc-transition-fast, 150ms ease-in-out),
                border-color   var(--plgc-transition-fast, 150ms ease-in-out);
}

/* Checkmark tick */
.gform_wrapper .gfield--type-checkbox label::after,
.gform_wrapper ul.gfield_checkbox label::after,
.gform_wrapper .gfield_checkbox .gchoice label::after,
.gform_wrapper .gfield_checkbox .gchoice .gform-field-label::after {
    content: '' !important;
    position: absolute !important;
    left: 0.375rem !important;        /* (18px box - 6px tick) / 2 = 6px — true horizontal center */
    top: 50% !important;
    transform: translateY(-60%) rotate(45deg) !important;  /* -60% visually centers diagonal tick */
    width: 0.375rem !important;
    height: 0.5625rem !important;
    border: 2px solid var(--plgc-white, #FFFFFF) !important;
    border-top: none !important;
    border-left: none !important;
    opacity: 0;
    transition: opacity var(--plgc-transition-fast, 150ms ease-in-out);
}

/* Checked — box fills green */
.gform_wrapper .gfield--type-checkbox input[type="checkbox"]:checked + label::before,
.gform_wrapper ul.gfield_checkbox input[type="checkbox"]:checked + label::before,
.gform_wrapper .gfield_checkbox .gchoice input[type="checkbox"]:checked + label::before,
.gform_wrapper .gfield_checkbox .gchoice input[type="checkbox"]:checked + .gform-field-label::before {
    background: var(--plgc-dark-green, #567915) !important;
    border-color: var(--plgc-dark-green, #567915) !important;
}

/* Checked — tick appears */
.gform_wrapper .gfield--type-checkbox input[type="checkbox"]:checked + label::after,
.gform_wrapper ul.gfield_checkbox input[type="checkbox"]:checked + label::after,
.gform_wrapper .gfield_checkbox .gchoice input[type="checkbox"]:checked + label::after,
.gform_wrapper .gfield_checkbox .gchoice input[type="checkbox"]:checked + .gform-field-label::after {
    opacity: 1;
}

/* Focus ring on box */
.gform_wrapper .gfield--type-checkbox input[type="checkbox"]:focus-visible + label::before,
.gform_wrapper ul.gfield_checkbox input[type="checkbox"]:focus-visible + label::before,
.gform_wrapper .gfield_checkbox .gchoice input[type="checkbox"]:focus-visible + label::before,
.gform_wrapper .gfield_checkbox .gchoice input[type="checkbox"]:focus-visible + .gform-field-label::before {
    border-color: var(--plgc-focus-color, #567915) !important;
    box-shadow: 0 0 0 0.125rem var(--plgc-focus-color, #567915);
}

/* ============================================================
   10. RADIO BUTTONS
   Same approach as checkboxes — label is the touch target,
   native input hidden with !important to beat GF5 framework.
   Both ul > li (older GF) and div.gchoice (GF5) covered.
   ============================================================ */

.gform_wrapper .gfield--type-radio .gfield_radio,
.gform_wrapper ul.gfield_radio {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.gform_wrapper .gfield--type-radio .gfield_radio li,
.gform_wrapper ul.gfield_radio li,
.gform_wrapper .gfield_radio .gchoice {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0 !important;
    min-height: 2.75rem;             /* 44px — SC 2.5.5 WCAG AA floor */
    position: relative;
}

/* Native input hidden — !important to beat GF5 theme framework */
.gform_wrapper .gfield--type-radio input[type="radio"],
.gform_wrapper ul.gfield_radio input[type="radio"],
.gform_wrapper .gfield_radio .gchoice input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    accent-color: transparent !important;
}

.gform_wrapper .gfield--type-radio label,
.gform_wrapper ul.gfield_radio label,
.gform_wrapper .gfield_radio .gchoice label,
.gform_wrapper .gfield_radio .gchoice .gform-field-label {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5rem !important;  /* tighter — row height still 44px via min-height */
    color: var(--plgc-black, #000000) !important;
    cursor: pointer;
    padding: 0.1875rem 0.75rem 0.1875rem 2rem !important;
    position: relative;
    min-height: 2.75rem;             /* 44px — SC 2.5.5 ✅ */
    display: flex !important;
    align-items: center;
    width: 100%;
    border-radius: 2px;
    transition: background var(--plgc-transition-fast, 150ms ease-in-out);
    margin: 0 !important;
}

.gform_wrapper .gfield--type-radio label:hover,
.gform_wrapper ul.gfield_radio label:hover,
.gform_wrapper .gfield_radio .gchoice label:hover,
.gform_wrapper .gfield_radio .gchoice .gform-field-label:hover {
    background: rgba(86, 121, 21, 0.06);
}

/* Radio circle */
.gform_wrapper .gfield--type-radio label::before,
.gform_wrapper ul.gfield_radio label::before,
.gform_wrapper .gfield_radio .gchoice label::before,
.gform_wrapper .gfield_radio .gchoice .gform-field-label::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    background: var(--plgc-white, #FFFFFF) !important;
    border: 2px solid #767676 !important;  /* 4.6:1 on white — SC 1.4.11 ✅ */
    border-radius: 50% !important;
    transition: background     var(--plgc-transition-fast, 150ms ease-in-out),
                border-color   var(--plgc-transition-fast, 150ms ease-in-out);
}

/* Radio dot */
.gform_wrapper .gfield--type-radio label::after,
.gform_wrapper ul.gfield_radio label::after,
.gform_wrapper .gfield_radio .gchoice label::after,
.gform_wrapper .gfield_radio .gchoice .gform-field-label::after {
    content: '' !important;
    position: absolute !important;
    left: 0.3125rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0.5rem !important;
    height: 0.5rem !important;
    background: var(--plgc-white, #FFFFFF) !important;
    border-radius: 50% !important;
    opacity: 0;
    transition: opacity var(--plgc-transition-fast, 150ms ease-in-out);
}

/* Checked */
.gform_wrapper .gfield--type-radio input[type="radio"]:checked + label::before,
.gform_wrapper ul.gfield_radio input[type="radio"]:checked + label::before,
.gform_wrapper .gfield_radio .gchoice input[type="radio"]:checked + label::before,
.gform_wrapper .gfield_radio .gchoice input[type="radio"]:checked + .gform-field-label::before {
    background: var(--plgc-dark-green, #567915) !important;
    border-color: var(--plgc-dark-green, #567915) !important;
}

.gform_wrapper .gfield--type-radio input[type="radio"]:checked + label::after,
.gform_wrapper ul.gfield_radio input[type="radio"]:checked + label::after,
.gform_wrapper .gfield_radio .gchoice input[type="radio"]:checked + label::after,
.gform_wrapper .gfield_radio .gchoice input[type="radio"]:checked + .gform-field-label::after {
    opacity: 1;
}

/* Focus ring */
.gform_wrapper .gfield--type-radio input[type="radio"]:focus-visible + label::before,
.gform_wrapper ul.gfield_radio input[type="radio"]:focus-visible + label::before,
.gform_wrapper .gfield_radio .gchoice input[type="radio"]:focus-visible + label::before,
.gform_wrapper .gfield_radio .gchoice input[type="radio"]:focus-visible + .gform-field-label::before {
    border-color: var(--plgc-focus-color, #567915) !important;
    box-shadow: 0 0 0 0.125rem var(--plgc-focus-color, #567915);
}

/* ============================================================
   11. NAME FIELD (multi-part ginput_complex)
   Layout fully deferred to GF's native gform-grid-row system.
   Only input width is set — GF handles columns, gap, and mobile stacking.
   ============================================================ */

.gform_wrapper .ginput_complex.ginput_container_name input {
    width: 100%;
}

/* ============================================================
   12. ADDRESS FIELD (multi-part)
   Layout fully deferred to GF's native gform-grid-row system,
   same as the name field. GF handles Street/Line2 (full-width),
   City/State (left/right), ZIP/Country (left/right) via
   ginput_full, ginput_left, ginput_right, and gform-grid-col.
   Overriding display/flex here breaks sub-label placement when
   the GF setting is changed between "above" and "below".
   Only input/select width is set so they fill their column.
   ============================================================ */

.gform_wrapper .ginput_complex.ginput_container_address input,
.gform_wrapper .ginput_complex.ginput_container_address select {
    width: 100%;
}

/* ============================================================
   13. FILE UPLOAD
   ============================================================ */

.gform_wrapper .ginput_container_fileupload input[type="file"] {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    color: var(--plgc-black, #000000);
    padding: 0.625rem 0;
    width: 100%;
    cursor: pointer;
    min-height: 2.75rem;
}

.gform_wrapper .ginput_container_fileupload input[type="file"]:focus-visible {
    outline: 0.125rem solid var(--plgc-focus-color, #567915);
    outline-offset: 0.125rem;
}

/* Multi-file drag-drop zone */
.gform_wrapper .gform_fileupload_multifile .gform_drop_area {
    border: 2px dashed var(--plgc-medium-green-tone, #2D5032);
    padding: 1.5rem;
    text-align: center;
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    color: var(--plgc-black, #000000);
    background: var(--plgc-very-light-green, #E5F0D0);
    transition: background var(--plgc-transition-fast, 150ms ease-in-out);
}

.gform_wrapper .gform_fileupload_multifile .gform_drop_area:hover,
.gform_wrapper .gform_fileupload_multifile .gform_drop_area:focus-within {
    background: #d6e8be;
}

.gform_wrapper .gform_fileupload_multifile .gform_drop_instructions {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* ============================================================
   14. SECTION BREAK / HEADING
   ============================================================ */

.gform_wrapper .gsection {
    border-bottom: 1px solid var(--plgc-medium-grey, #E7E4E4);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

.gform_wrapper .gsection_title {
    font-family: var(--plgc-font-heading, 'Libre Baskerville', serif);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.333;
    color: var(--plgc-black, #000000);
    margin: 0 0 0.375rem;
}

.gform_wrapper .gsection_description {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.75rem;
    color: var(--plgc-black, #000000);
    margin: 0;
}

/* ============================================================
   15. HTML BLOCK
   ============================================================ */

.gform_wrapper .gfield--type-html .ginput_container_html,
.gform_wrapper .gfield_html {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1.0625rem;
    line-height: 1.75rem;
    color: var(--plgc-black, #000000);
}

.gform_wrapper .gfield_html a {
    color: var(--plgc-dark-green, #567915);
    font-weight: 600;
    text-decoration: underline;
}

.gform_wrapper .gfield_html a:hover,
.gform_wrapper .gfield_html a:focus-visible {
    color: var(--plgc-dark-green-tone, #233C26);
}

/* ============================================================
   16. LIST FIELD
   GF5 renders column headers as div.gfield_header_item.gform-field-label
   (not <th>) inside .gfield_list_header. We target both the legacy
   <th> pattern and the GF5 div pattern.
   ============================================================ */

.gform_wrapper .gfield_list {
    width: 100%;
    border-collapse: collapse;
}

/* Space between the legend ("Family Memberships...") and the column headers */
.gform_wrapper .ginput_container_list {
    margin-top: 0.625rem;
}

/* GF5 column header row */
.gform_wrapper .gfield_list_header {
    margin-bottom: 0.375rem;
}

/* GF5 column header labels */
.gform_wrapper .gfield_header_item.gform-field-label,
.gform_wrapper .gfield_header_item {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--plgc-black, #000000) !important;
    margin: 0 !important;
}

/* Legacy <th> column headers (older GF) */
.gform_wrapper .gfield_list th {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    font-weight: 400;
    color: var(--plgc-black, #000000);
    padding: 0 0 0.375rem;
    text-align: left;
}

.gform_wrapper .gfield_list td {
    padding: 0.25rem 0.5rem 0.25rem 0;
}

/* Icon column — no layout overrides, let GF handle it entirely */

/* Add/Remove buttons — brand color + 44px touch target only.
   All layout (position, display, flex, stacking) left to GF's defaults.
   SC 2.5.5: min-width/height 44px ✅  aria-label on element ✅  5.07:1 contrast ✅ */
.gform_wrapper .gfield_list_icons button,
.gform_wrapper .gfield_list_icons a {
    min-width: 2.75rem !important;   /* 44px — SC 2.5.5 */
    min-height: 2.75rem !important;  /* 44px — SC 2.5.5 */
    background-color: var(--plgc-dark-green, #567915) !important;
    color: var(--plgc-white, #FFFFFF) !important;
    border-color: var(--plgc-dark-green, #567915) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
}

.gform_wrapper .gfield_list_icons button:hover,
.gform_wrapper .gfield_list_icons a:hover {
    background-color: var(--plgc-dark-green-tone, #233C26) !important;
    border-color: var(--plgc-dark-green-tone, #233C26) !important;
}

.gform_wrapper .gfield_list_icons button:focus-visible,
.gform_wrapper .gfield_list_icons a:focus-visible {
    outline: 0.125rem solid var(--plgc-focus-color, #567915) !important;
    outline-offset: 0.125rem !important;
}

.gform_wrapper .gfield_list_icons .delete_list_item {
    background-color: var(--plgc-medium-green-tone, #2D5032) !important;
    border-color: var(--plgc-medium-green-tone, #2D5032) !important;
}

.gform_wrapper .gfield_list_icons .delete_list_item:hover {
    background-color: var(--plgc-dark-green-tone, #233C26) !important;
    border-color: var(--plgc-dark-green-tone, #233C26) !important;
}


/* ============================================================
   17. CONSENT FIELD
   ============================================================ */

.gform_wrapper .gfield--type-consent .gfield_consent_label {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75rem;
    color: var(--plgc-black, #000000);
    padding-left: 2rem;
    position: relative;
    display: block;
    cursor: pointer;
    min-height: 2.75rem;
}

.gform_wrapper .gfield--type-consent .gfield_consent_label a {
    color: var(--plgc-dark-green, #567915);
    text-decoration: underline;
}

/* ============================================================
   18. PRODUCT / PRICING FIELDS
   ============================================================ */

.gform_wrapper .gfield--type-product label,
.gform_wrapper .gfield--type-quantity label,
.gform_wrapper .gfield--type-total label {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--plgc-black, #000000);
}

.gform_wrapper .gfield--type-total .ginput_total,
.gform_wrapper .gfield_total {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--plgc-dark-green, #567915);
}

/* ============================================================
   19. SUBMIT BUTTON — yellow pill, matches site primary button
   SC 2.5.5: 47px height ✅  SC 1.4.3: #000 on #FFAE40 = 11.38:1 ✅
   ============================================================ */

.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper .gform_page_footer button[type="submit"],
.gform_wrapper input.gform_button,
.gform_wrapper button.gform_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--plgc-yellow, #FFAE40) !important;
    color: var(--plgc-black, #000000) !important;
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    height: 2.9375rem;
    min-height: 2.75rem;
    min-width: 6rem;
    padding: 0.9375rem 1.5rem !important;
    border: 2px solid transparent !important;
    border-radius: 6.25rem !important;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--plgc-transition-fast, 150ms ease-in-out) !important;
    -webkit-appearance: none;
    appearance: none;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer button[type="submit"]:hover,
.gform_wrapper input.gform_button:hover,
.gform_wrapper button.gform_button:hover {
    background: var(--plgc-light-yellow, #FDBC69) !important;
    text-decoration: underline !important;
}

.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper .gform_footer button[type="submit"]:focus-visible,
.gform_wrapper .gform_page_footer input[type="submit"]:focus-visible,
.gform_wrapper .gform_page_footer button[type="submit"]:focus-visible,
.gform_wrapper input.gform_button:focus-visible,
.gform_wrapper button.gform_button:focus-visible {
    background: var(--plgc-light-yellow, #FDBC69) !important;
    outline: 0.125rem solid var(--plgc-focus-color, #567915) !important;
    outline-offset: 0.125rem !important;
}

/* Active state — SC 2.5.3 / best practice: provide visual feedback on press.
   Darker yellow (#E89A2A) on #000 = 9.74:1 ✅ SC 1.4.3 */
.gform_wrapper .gform_footer input[type="submit"]:active,
.gform_wrapper .gform_footer button[type="submit"]:active,
.gform_wrapper .gform_page_footer input[type="submit"]:active,
.gform_wrapper .gform_page_footer button[type="submit"]:active,
.gform_wrapper input.gform_button:active,
.gform_wrapper button.gform_button:active {
    background: #E89A2A !important;
    text-decoration: underline !important;
    transform: translateY(1px);       /* subtle press-down feedback */
}

/* Prev/Next on multi-step forms.
   GF5 adds .gform-theme-button.button to these elements and styles them
   via #gform_wrapper_N[data-form-index].gform-theme .gform-theme-button
   which has very high specificity. We chain .gform-theme-button to match
   and use !important to guarantee brand styles.

   Next button: yellow pill (matches Submit — primary CTA)
   Previous button: outlined pill (secondary action) */

/* --- NEXT BUTTON — yellow pill (primary CTA) --- */
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_next_button.gform-theme-button,
.gform_wrapper .gform_next_button.gform-theme-button.button,
.gform_wrapper .gform_page_footer .gform_next_button,
.gform-theme .gform_next_button.gform-theme-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.9375rem !important;
    min-height: 2.75rem !important;
    min-width: 6rem !important;
    padding: 0.9375rem 1.5rem !important;
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: var(--plgc-black, #000000) !important;
    background: var(--plgc-yellow, #FFAE40) !important;
    border: 2px solid transparent !important;
    border-radius: 6.25rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background var(--plgc-transition-fast, 150ms ease-in-out) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}

.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_next_button.gform-theme-button:hover,
.gform-theme .gform_next_button.gform-theme-button:hover {
    background: var(--plgc-light-yellow, #FDBC69) !important;
    text-decoration: underline !important;
}

.gform_wrapper .gform_next_button:focus-visible,
.gform_wrapper .gform_next_button.gform-theme-button:focus-visible,
.gform-theme .gform_next_button.gform-theme-button:focus-visible {
    background: var(--plgc-light-yellow, #FDBC69) !important;
    outline: 0.125rem solid var(--plgc-focus-color, #567915) !important;
    outline-offset: 0.125rem !important;
}

.gform_wrapper .gform_next_button:active,
.gform_wrapper .gform_next_button.gform-theme-button:active {
    background: #E89A2A !important;
    text-decoration: underline !important;
    transform: translateY(1px);
}

/* --- PREVIOUS BUTTON — outlined pill (secondary action) --- */
.gform_wrapper .gform_previous_button,
.gform_wrapper .gform_previous_button.gform-theme-button,
.gform_wrapper .gform_previous_button.gform-theme-button.button,
.gform_wrapper .gform_page_footer .gform_previous_button,
.gform-theme .gform_previous_button.gform-theme-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.9375rem !important;
    min-height: 2.75rem !important;
    padding: 0.9375rem 1.5rem !important;
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--plgc-black, #000000) !important;
    background: transparent !important;
    border: 2px solid var(--plgc-dark-green, #567915) !important;
    border-radius: 6.25rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background var(--plgc-transition-fast, 150ms ease-in-out) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}

.gform_wrapper .gform_previous_button:hover,
.gform_wrapper .gform_previous_button.gform-theme-button:hover,
.gform-theme .gform_previous_button.gform-theme-button:hover {
    background: var(--plgc-very-light-green, #E5F0D0) !important;
}

.gform_wrapper .gform_previous_button:focus-visible,
.gform_wrapper .gform_previous_button.gform-theme-button:focus-visible,
.gform-theme .gform_previous_button.gform-theme-button:focus-visible {
    outline: 0.125rem solid var(--plgc-focus-color, #567915) !important;
    outline-offset: 0.125rem !important;
}

/* --- Page footer container --- */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
    margin-top: 1.5rem;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ============================================================
   20. VALIDATION ERRORS
   SC 1.4.1 — error not indicated by colour alone: border-left + text ✅
   SC 1.4.3 — #000 on #FFF3F3 = 18.7:1 ✅
   ============================================================ */

.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_error {
    background: #FFF3F3;
    border: 1px solid #CC0000;
    border-left: 4px solid #CC0000;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--plgc-black, #000000);
}

.gform_wrapper .gform_validation_errors h2,
.gform_wrapper .validation_error h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--plgc-black, #000000);
}

.gform_wrapper .gfield--error input,
.gform_wrapper .gfield--error textarea,
.gform_wrapper .gfield--error select,
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
    border-color: #CC0000 !important;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--plgc-black, #000000);
    background: #FFF3F3;
    border-left: 3px solid #CC0000;
    padding: 0.375rem 0.75rem;
    margin-top: 0.375rem;
    display: block;
}

.gform_wrapper .gfield--error .gfield_label,
.gform_wrapper .gfield_error .gfield_label {
    color: var(--plgc-black, #000000); /* keep black — red alone fails SC 1.4.3 */
}

/* ============================================================
   21. CONFIRMATION / SUCCESS
   SC 1.4.3: #000 on #E5F0D0 = 12.6:1 ✅
   ============================================================ */

.gform_confirmation_wrapper,
.gform_wrapper .gform_confirmation_message {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 1.0625rem;
    line-height: 1.75rem;
    color: var(--plgc-black, #000000);
    background: var(--plgc-very-light-green, #E5F0D0);
    border-left: 4px solid var(--plgc-dark-green, #567915);
    padding: 1.25rem 1.5rem;
    border-radius: 0 4px 4px 0;
}

/* ============================================================
   22. PROGRESS BAR (multi-step)
   GF5 adds .gf_progressbar_blue/.percentbar_blue (or _green, etc.)
   with built-in colors. We chain those classes to match specificity
   and use !important on background to guarantee brand colors.
   ============================================================ */

.gform_wrapper .gf_progressbar_wrapper {
    margin-bottom: 1.5rem;
}

/* "Step X of Y" title — GF5 renders as <p class="gf_progressbar_title"> */
.gform_wrapper .gf_progressbar_title {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: var(--plgc-black, #000000) !important;
    margin: 0 0 0.5rem !important;
    padding: 0 !important;
}

/* Progress bar track — override all GF5 color variants */
.gform_wrapper .gf_progressbar,
.gform_wrapper .gf_progressbar.gf_progressbar_blue,
.gform_wrapper .gf_progressbar.gf_progressbar_green,
.gform_wrapper .gf_progressbar.gf_progressbar_orange,
.gform_wrapper .gf_progressbar.gf_progressbar_red,
.gform_wrapper .gf_progressbar.gf_progressbar_custom {
    background: var(--plgc-medium-grey, #E7E4E4) !important;
    border-radius: 4px !important;
    height: 0.75rem !important;
    overflow: hidden !important;
    border: none !important;
}

/* Filled portion — override all GF5 percentbar color variants */
.gform_wrapper .gf_progressbar_percentage,
.gform_wrapper .gf_progressbar_percentage.percentbar_blue,
.gform_wrapper .gf_progressbar_percentage.percentbar_green,
.gform_wrapper .gf_progressbar_percentage.percentbar_orange,
.gform_wrapper .gf_progressbar_percentage.percentbar_red,
.gform_wrapper .gf_progressbar .gf_progressbar_percentage {
    background: var(--plgc-dark-green, #567915) !important;
    height: 100% !important;
    border-radius: 4px !important;
    transition: width var(--plgc-transition-default, 250ms ease-in-out);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Percentage text ("50%") inside the filled bar — hide visually.
   The bar itself communicates progress; the Step X of Y title
   provides the text alternative. aria-hidden is on the bar div. */
.gform_wrapper .gf_progressbar_percentage span {
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
}

/* Step indicators (alternative to progress bar) */
.gform_wrapper .gf_step {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    font-size: 0.9375rem;
    color: var(--plgc-black, #000000);
    opacity: 0.5;
}

.gform_wrapper .gf_step_active {
    opacity: 1;
    font-weight: 600;
    color: var(--plgc-dark-green, #567915);
}

.gform_wrapper .gf_step_completed { opacity: 0.75; }

/* ============================================================
   23. AJAX SPINNER
   ============================================================ */

.gform_wrapper .gform_ajax_spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid var(--plgc-light-grey, #F2F2F2);
    border-top-color: var(--plgc-dark-green, #567915);
    border-radius: 50%;
    animation: plgc-gf-spin 0.7s linear infinite;
    margin-left: 0.75rem;
    vertical-align: middle;
}

@keyframes plgc-gf-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   23a. CHARACTER COUNTER
   Shown below textarea fields with maxlength — e.g. "0 of 600 max characters"
   ============================================================ */

.gform_wrapper .ginput_counter,
.gform_wrapper .charleft,
.gform_wrapper .ginput_counter_tinymce {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #555555 !important;             /* 7.5:1 on white — SC 1.4.3 ✅ */
    margin-top: 0.375rem !important;
    padding: 0 !important;
}

/* Warning state — near limit (GF adds .warningTextareaInfo at ~75%) */
.gform_wrapper .ginput_counter.warningTextareaInfo {
    color: #8B6914 !important;             /* dark gold — 4.7:1 on white ✅ */
}

/* Over limit (GF adds .ginput_counter_error) */
.gform_wrapper .ginput_counter.ginput_counter_error {
    color: #CC0000 !important;
    font-weight: 600 !important;
}

/* ============================================================
   23b. SAVE AND CONTINUE LINK
   GF multi-page forms can show a "Save and Continue Later" link.
   ============================================================ */

.gform_wrapper .gform_save_link {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--plgc-dark-green, #567915) !important;
    text-decoration: underline !important;
    cursor: pointer;
    min-height: 2.75rem;                   /* 44px — SC 2.5.5 ✅ */
    display: inline-flex;
    align-items: center;
}

.gform_wrapper .gform_save_link:hover,
.gform_wrapper .gform_save_link:focus-visible {
    color: var(--plgc-dark-green-tone, #233C26) !important;
}

.gform_wrapper .gform_save_link:focus-visible {
    outline: 0.125rem solid var(--plgc-focus-color, #567915);
    outline-offset: 0.125rem;
}

/* ============================================================
   23c. MULTI-PAGE FORM WRAPPER
   The .gform_page wrapper and page fields need clean spacing.
   ============================================================ */

.gform_wrapper .gform_page {
    margin: 0;
    padding: 0;
}

/* ============================================================
   23d. GF5 THEME FRAMEWORK — CSS VARIABLE OVERRIDES
   GF5's Orbital theme applies styles via CSS custom properties on
   .gform-theme--framework. Override the button and control variables
   at the wrapper level so our brand styles take priority even when
   GF5 uses high-specificity selectors like
   #gform_wrapper_N[data-form-index].gform-theme .gform-theme-button
   ============================================================ */

.gform_wrapper.gform-theme--framework,
.gform_wrapper.gform-theme--orbital,
.gform-theme--framework,
.gform-theme--orbital {
    /* Button primary — matches our yellow pill */
    --gf-ctrl-btn-bg-color-primary: var(--plgc-yellow, #FFAE40) !important;
    --gf-ctrl-btn-bg-color-primary-hover: var(--plgc-light-yellow, #FDBC69) !important;
    --gf-ctrl-btn-color-primary: var(--plgc-black, #000000) !important;
    --gf-ctrl-btn-border-color-primary: transparent !important;
    --gf-ctrl-btn-radius: 6.25rem !important;
    --gf-ctrl-btn-font-size: 0.9375rem !important;
    --gf-ctrl-btn-font-weight: 600 !important;

    /* Button secondary — matches our outlined pill */
    --gf-ctrl-btn-bg-color-secondary: transparent !important;
    --gf-ctrl-btn-bg-color-secondary-hover: var(--plgc-very-light-green, #E5F0D0) !important;
    --gf-ctrl-btn-color-secondary: var(--plgc-black, #000000) !important;
    --gf-ctrl-btn-border-color-secondary: var(--plgc-dark-green, #567915) !important;

    /* Focus ring */
    --gf-ctrl-focus-shadow: 0 0 0 0.125rem var(--plgc-focus-color, #567915) !important;

    /* Suppress GF5 box shadows on buttons */
    --gform-theme-box-shadow: none !important;
    --gform-theme-box-shadow-sm: none !important;
}

/* ============================================================
   23e. PLACEHOLDER TEXT
   ============================================================ */

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
    color: #767676 !important;             /* 4.6:1 on white — SC 1.4.3 ✅ */
    opacity: 1;
    font-style: italic;
}

/* ============================================================
   23f. DATE PICKER (calendar popup)
   GF5 uses the native browser date input by default, but if the
   jQuery UI datepicker is enabled, these styles apply.
   ============================================================ */

.gform_wrapper .ui-datepicker {
    font-family: var(--plgc-font-body, 'Open Sans', sans-serif);
    background: var(--plgc-white, #FFFFFF);
    border: 1px solid var(--plgc-medium-green-tone, #2D5032);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
    z-index: 9999 !important;
}

.gform_wrapper .ui-datepicker .ui-datepicker-header {
    background: var(--plgc-dark-green, #567915);
    color: var(--plgc-white, #FFFFFF);
    border: none;
    border-radius: 4px 4px 0 0;
    padding: 0.5rem;
    font-weight: 600;
}

.gform_wrapper .ui-datepicker .ui-datepicker-prev,
.gform_wrapper .ui-datepicker .ui-datepicker-next {
    cursor: pointer;
    min-width: 2.75rem;
    min-height: 2.75rem;
}

.gform_wrapper .ui-datepicker td a,
.gform_wrapper .ui-datepicker td span {
    padding: 0.375rem;
    text-align: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gform_wrapper .ui-datepicker td a:hover {
    background: var(--plgc-very-light-green, #E5F0D0);
    border-radius: 4px;
}

.gform_wrapper .ui-datepicker .ui-state-active {
    background: var(--plgc-dark-green, #567915) !important;
    color: var(--plgc-white, #FFFFFF) !important;
    border-radius: 4px;
}

/* ============================================================
   24. RESPONSIVE — MOBILE  (< 768px)
   ============================================================ */

@media (max-width: 767px) {

    .gform_wrapper .gsection_title { font-size: 1.25rem; }
    .gform_wrapper .gfield_label   { font-size: 1.125rem !important; }

    /* Prevent iOS auto-zoom on input focus (needs ≥16px) */
    .gform_wrapper input[type="text"],
    .gform_wrapper input[type="email"],
    .gform_wrapper input[type="tel"],
    .gform_wrapper input[type="number"],
    .gform_wrapper input[type="url"],
    .gform_wrapper input[type="password"],
    .gform_wrapper select {
        font-size: 1rem;
    }

    /* Multi-page buttons stack on narrow screens */
    .gform_wrapper .gform_page_footer {
        flex-direction: column;
        align-items: stretch;
    }

    .gform_wrapper .gform_next_button,
    .gform_wrapper .gform_next_button.gform-theme-button,
    .gform_wrapper .gform_previous_button,
    .gform_wrapper .gform_previous_button.gform-theme-button {
        width: 100% !important;
        text-align: center !important;
    }

    /* Save and Continue gets full width too */
    .gform_wrapper .gform_save_link {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   25. REDUCED MOTION — SC 2.3.3
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .gform_wrapper input,
    .gform_wrapper textarea,
    .gform_wrapper select,
    .gform_wrapper label,
    .gform_wrapper label::before,
    .gform_wrapper label::after,
    .gform_wrapper .gform_button,
    .gform_wrapper input[type="submit"],
    .gform_wrapper .gf_progressbar_percentage,
    .gform_wrapper .gform_previous_button,
    .gform_wrapper .gform_next_button {
        transition: none !important;
        animation: none !important;
    }

    .gform_wrapper .gform_ajax_spinner {
        animation: none !important;
        border-color: var(--plgc-dark-green, #567915);
    }
}

/* ============================================================
   26. LEGACY SELECTORS (GF v2/v3 class names)
   ============================================================ */

.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container input[type="url"],
.gform_wrapper .ginput_container input[type="password"] {
    width: 100%;
}

.gform_wrapper li.gfield_error input,
.gform_wrapper li.gfield_error textarea,
.gform_wrapper li.gfield_error select {
    border-color: #CC0000 !important;
}