/* =================================================================== GF-AC section css =================================================================== */
/*
   Layout layer for the Agency Core 2027 + Distribution Partner Gravity Forms only.
   hmtheme_render_ac_form() wraps those forms in .gf-ac, so nothing here reaches the
   footer / sidebar / live-registration forms. Base look (inputs, labels, button,
   validation) stays in global/forms.css; this adds what those forms need on top:

   - GF column widths (field set side-by-side in the GF editor → gfield--width-half …)
   - Field CSS classes (GF field → Appearance → Custom CSS Class):
       gf-inline  radio / checkbox choices in one row
       gf-cols-2  radio / checkbox choices in two columns
       gf-chips   radio / checkbox choices as selectable chips
       gf-ask     big question box (styled in ac27-question.css)
   - Confirmation message layout (icon + title + text, HTML pasted into GF)

   Root selector .gf-ac .gform_wrapper.gform_wrapper (0,3,0) outranks forms.css
   (0,2,0) and Gravity Forms' 2.5 theme (.gform_wrapper.gravity-theme …).
*/

.gf-ac .gform_wrapper.gform_wrapper {
    /* 12-column grid so GF's width classes work */
    & .gform_fields {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--sp20) var(--sp15);
    }
    & .gfield { grid-column: 1 / -1; min-width: 0; border: 0; }
    & .gfield--width-half { grid-column: span 6; }
    & .gfield--width-third { grid-column: span 4; }
    & .gfield--width-quarter { grid-column: span 3; }

    /* float stops a <legend> sitting on the fieldset's top edge */
    & legend.gfield_label { float: left; width: 100%; }
    & legend.gfield_label + * { clear: both; }

    & .gfield_description { margin-top: var(--sp8); line-height: 1.5; }

    /* select: custom chevron (padding in forms.css is !important) */
    & select {
        padding-right: var(--sp50) !important;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236b7384' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--sp20) center;
        cursor: pointer;
    }

    /* GF prints rows="10" — fix the height so that doesn't decide it */
    & textarea { height: 160px; min-height: 120px; }

    & .gfield_radio,
    & .gfield_checkbox { gap: var(--sp10); }

    & .gf-inline :is(.gfield_radio, .gfield_checkbox) { display: flex; flex-wrap: wrap; gap: var(--sp10) var(--sp30); }
    & .gf-cols-2 :is(.gfield_radio, .gfield_checkbox) { display: grid; grid-template-columns: 1fr 1fr; }

    /* ---------- gf-chips: choices as pills, check mark on the selected one ---------- */
    & .gf-chips {
        & :is(.gfield_radio, .gfield_checkbox) { display: flex; flex-wrap: wrap; gap: var(--sp10); }
        & .gchoice { position: relative; display: block; flex: 0 0 auto; width: auto; max-width: 100%; margin: 0; padding: 0; }
        & .gchoice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
    }
    /* GF's 2.5 theme caps choice labels at calc(100% - 32px) to leave room for the
       radio dot — chips hide the dot, so that cap only squeezed the text into two
       lines and left empty space inside each chip. */
    & .gf-chips .gchoice label {
        display: inline-flex; align-items: center;
        gap: var(--sp8);
        width: auto;
        max-width: none;
        margin: 0;
        white-space: nowrap;
        min-height: 44px;
        padding: var(--sp8) var(--sp20);
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--r-full);
        font-size: var(--f14);
        font-weight: 600;
        color: var(--ink);
        transition: var(--transition);

        &::before {
            display: none;
            width: 14px; height: 14px;
            background: currentColor;
            content: "";
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
        }
    }
    & .gf-chips .gchoice:hover label { border-color: var(--primary); }
    & .gf-chips .gchoice input:focus-visible + label { box-shadow: 0 0 0 4px var(--blue-100); }
    & .gf-chips .gchoice input:checked + label {
        background: var(--blue-50);
        border-color: var(--primary);
        color: var(--primary-dark);

        &::before { display: block; }
    }
    & .gfield_error.gf-chips .gchoice label { border-color: var(--coral-500); }
}

/* ---------- confirmation (GF swaps the form for this after submit) ---------- */
.gf-ac .gform_confirmation_wrapper .gform_confirmation_message {
    display: grid; justify-items: center;
    gap: var(--sp15);
    padding: var(--sp30) var(--sp20);
    background: transparent;
    font-size: var(--f16);
    text-align: center;
    color: var(--body);

    & .gf-confirm__icon {
        display: grid; place-items: center;
        width: 64px; height: 64px;
        background: var(--blue-50);
        border-radius: var(--r-full);
        font-size: var(--f28);   /* the icon is a ✓ character — WP strips SVG from saved GF HTML */
        font-weight: 700;
        line-height: 1;
        color: var(--primary);
    }
    & .gf-confirm__title { margin: 0; font-size: var(--f28); color: var(--ink); }
    & p { margin: 0; }
}

/* editors-only placeholder when no shortcode is saved (hmtheme_render_ac_form) */
.gf-ac-setup {
    padding: var(--sp20);
    background: var(--blue-50);
    border: 1px dashed var(--primary);
    border-radius: var(--r-md);
    font-size: var(--f14);
    color: var(--ink);
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 767.98px) {
    .gf-ac .gform_wrapper.gform_wrapper {
        & :is(.gfield--width-half, .gfield--width-third, .gfield--width-quarter) { grid-column: 1 / -1; }
        & .gf-cols-2 :is(.gfield_radio, .gfield_checkbox) { grid-template-columns: 1fr; }
        & .gf-chips .gchoice label { max-width: 100%; white-space: normal; }
    }
}