/* Gravity Forms Accordion — frontend
 *
 * Specificity note: Gravity Forms' theme-framework reset uses a long
 * :where() chain on all descendants of .gform-theme--framework. To win
 * cleanly without !important, every selector here is prefixed with
 * .gform_wrapper, which raises specificity above the reset.
 */

.gform_wrapper .gfa-accordion-wrap {
    list-style: none;
    margin: 0 !important; /* override GF/GWD .gfield margin-bottom rules */
    padding: 0;
    /* Make accordions span full width when parent is grid (Orbital). */
    grid-column: 1 / -1;
}

/* Adjacent accordions: pull the next one up by the grid row-gap so they
   visually stack with shared borders. Uses negative margin large enough to
   absorb any reasonable row-gap (GF Orbital default ~40px, themed up to 64px). */
.gform_wrapper .gfa-accordion-wrap + .gfa-accordion-wrap {
    margin-top: calc(-1 * var(--gf-form-gap-y, 40px) - 1px) !important;
}

/* ---- Card shell ---- */
.gform_wrapper .gfa-accordion-wrap > details {
    background: var(--gf-ctrl-bg-color-primary, #ffffff);
    border: 1px solid var(--gf-ctrl-border-color-primary, #e3e6ec);
    border-radius: 0;
    overflow: hidden;
    transition: background 0.15s ease;
}

/* Round only the outer corners of the stack. */
.gform_wrapper .gfa-accordion-wrap:first-child > details,
.gform_wrapper .gfa-accordion-wrap:not(.gfa-accordion-wrap + .gfa-accordion-wrap) > details {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.gform_wrapper .gfa-accordion-wrap:last-child > details,
.gform_wrapper .gfa-accordion-wrap:not(:has(+ .gfa-accordion-wrap)) > details {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Active accordion pops slightly via z-index + shadow. */
.gform_wrapper .gfa-accordion-wrap:has(> details[open]) {
    position: relative;
    z-index: 1;
}

.gform_wrapper .gfa-accordion-wrap > details[open] {
    border-color: var(--gf-ctrl-border-color-primary, #cbd5e1);
}

/* ---- Summary (the clickable header) ----
 *
 * Accordion title acts as the form section anchor — it must read stronger
 * than h3 (sub-description) and any in-section field label. We anchor to
 * 34px / 800 (same as h2 in the GWD type scale: body 20 → label 24 → h3 28
 * → section 34) so the title visually owns the section.
 */
.gform_wrapper .gfa-accordion-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin: 0;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.2;
    color: var(--gf-ctrl-label-color-primary, #0f172a);
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

@media (max-width: 1168px) {
    .gform_wrapper .gfa-accordion-summary { font-size: 30px; }
}
@media (max-width: 992px) {
    .gform_wrapper .gfa-accordion-summary { font-size: 28px; padding: 1rem 1.25rem; }
}
@media (max-width: 768px) {
    .gform_wrapper .gfa-accordion-summary { font-size: 24px; }
}

.gform_wrapper .gfa-accordion-summary::-webkit-details-marker { display: none; }
.gform_wrapper .gfa-accordion-summary::marker               { content: ''; }

.gform_wrapper .gfa-accordion-summary:hover {
    background: var(--gf-ctrl-bg-color-tertiary, #f8fafc);
}

.gform_wrapper .gfa-accordion-summary:focus-visible {
    outline: 2px solid var(--gf-color-primary, #2563eb);
    outline-offset: -2px;
    background: var(--gf-ctrl-bg-color-tertiary, #f8fafc);
}

/* ---- Chevron (SVG via mask so it inherits color) ---- */
.gform_wrapper .gfa-accordion-chevron {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
    opacity: 0.7;
}

.gform_wrapper .gfa-accordion-wrap > details[open] > .gfa-accordion-summary .gfa-accordion-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

.gform_wrapper .gfa-accordion-summary:hover .gfa-accordion-chevron {
    opacity: 1;
}

/* ---- Title text ---- */
.gform_wrapper .gfa-accordion-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    color: inherit;
}

/* ---- Error badge ---- */
.gform_wrapper .gfa-accordion-error-badge {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    letter-spacing: 0.01em;
}

.gform_wrapper .gfa-accordion-wrap--has-error > details > .gfa-accordion-summary {
    color: #991b1b;
}

.gform_wrapper .gfa-accordion-wrap--has-error > details {
    border-color: #fecaca;
}

/* ---- Flash animation on failed submit/next ----
 *
 * Triggered by JS adding .gfa-accordion-wrap--flash after a failed validation
 * (server-side errors via gform_post_render, OR HTML5 native required
 * validation that fires `invalid` on a field inside a closed accordion).
 *
 * Pulses a red ring on the accordion `<details>` so the user notices that
 * something inside the still-rendered accordion needs attention — even
 * after they have opened/closed it again. Self-clears via animationend.
 *
 * Respects prefers-reduced-motion: replaces the pulse with a static highlight
 * (the JS still adds/removes the class, so the static state lasts ~2s).
 */
@keyframes gfa-accordion-error-flash {
    0%   { box-shadow: 0 0 0 0   rgba(220, 38, 38, 0.55); }
    40%  { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0.18); }
    100% { box-shadow: 0 0 0 0   rgba(220, 38, 38, 0);    }
}

.gform_wrapper .gfa-accordion-wrap--flash > details {
    animation: gfa-accordion-error-flash 1.6s ease-out 0s 2;
    border-color: #dc2626;
}

@media (prefers-reduced-motion: reduce) {
    .gform_wrapper .gfa-accordion-wrap--flash > details {
        animation: none;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35);
    }
}

/* ---- Inner field container ---- */
.gform_wrapper .gfa-accordion-fields {
    list-style: none;
    margin: 0;
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-top: 1px solid var(--gf-ctrl-border-color-primary, #f1f5f9);
}

.gform_wrapper .gfa-accordion-fields > .gfield {
    margin: 0;
    grid-column: 1 / -1;
}

/* ---- Field-label visibility inside accordions ----
 *
 * Three modes set by admin via "Field labels inside this accordion" select.
 * The mode is emitted by render.php as a wrapper class:
 *   .gfa-accordion-wrap--labels-hide_first  → hide only the FIRST field's label (default)
 *   .gfa-accordion-wrap--labels-hide_all    → hide every field's label
 *   .gfa-accordion-wrap--labels-show_all    → no hiding (CSS no-op)
 *
 * Why "hide first" is the sensible default: the most common pattern is an
 * accordion title that names a single concept ("1.1A Co-operative name"),
 * with the first field's label repeating that string. Hiding only the first
 * label removes the redundancy without erasing labels of follow-up fields
 * inside the same accordion.
 *
 * Accessibility: the sr-only technique below keeps $field->label readable by
 * screen readers (announced on input focus), preserves GF entry exports and
 * notifications, and leaves GWD merge-tag mapping untouched.
 *
 * HTML / section fields carry section headings rather than input labels;
 * they're always exempt (carve-out at the end of this block).
 */

/* Shared visually-hidden declaration applied by both hide_first + hide_all. */
.gform_wrapper .gfa-accordion-wrap--labels-hide_first .gfa-accordion-fields > .gfield:first-child > .gfield_label,
.gform_wrapper .gfa-accordion-wrap--labels-hide_all .gfa-accordion-fields .gfield > .gfield_label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Carve-out: HTML / section field "labels" are headings — never hide them. */
.gform_wrapper .gfa-accordion-wrap--labels-hide_first .gfa-accordion-fields > .gfield--type-html:first-child > .gfield_label,
.gform_wrapper .gfa-accordion-wrap--labels-hide_first .gfa-accordion-fields > .gfield--type-section:first-child > .gfield_label,
.gform_wrapper .gfa-accordion-wrap--labels-hide_all .gfa-accordion-fields .gfield--type-html > .gfield_label,
.gform_wrapper .gfa-accordion-wrap--labels-hide_all .gfa-accordion-fields .gfield--type-section > .gfield_label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: revert !important;
    padding: revert !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ---- Smooth open animation (progressive enhancement) ---- */
@supports (interpolate-size: allow-keywords) {
    .gform_wrapper .gfa-accordion-wrap > details {
        interpolate-size: allow-keywords;
    }
    .gform_wrapper .gfa-accordion-wrap > details::details-content {
        block-size: 0;
        opacity: 0;
        overflow: clip;
        transition:
            block-size 0.28s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.2s ease-out,
            content-visibility 0.28s allow-discrete;
    }
    .gform_wrapper .gfa-accordion-wrap > details[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .gform_wrapper .gfa-accordion-wrap > details,
    .gform_wrapper .gfa-accordion-wrap > details::details-content,
    .gform_wrapper .gfa-accordion-chevron {
        transition: none !important;
    }
}

/* Print stylesheet — expand all accordions so closed content reaches paper.
 * Without this, any field inside a closed <details> is hidden by the UA
 * stylesheet and won't render when the user prints the form, confirmation
 * page, or saves it as PDF. Marker chevron is also hidden because it has
 * no meaning on paper. */
@media print {
    .gform_wrapper .gfa-accordion-wrap > details {
        /* Force open regardless of [open] attribute state. */
    }
    .gform_wrapper .gfa-accordion-wrap > details > *:not(summary) {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
    .gform_wrapper .gfa-accordion-wrap > details > summary {
        list-style: none;
        cursor: default;
        page-break-after: avoid;
    }
    .gform_wrapper .gfa-accordion-wrap > details > summary::-webkit-details-marker {
        display: none;
    }
    .gform_wrapper .gfa-accordion-chevron {
        display: none !important;
    }
}

/* ----- Required marker (frontend <summary>) -----
 *
 * Visible "(Required)" label shown next to accordion title when:
 *   - per-section `gfaShowRequiredMarker` is enabled (default ON), AND
 *   - the section contains at least one isRequired field.
 *
 * Matches GF's own required colour convention. Single span — visible
 * colour cue for sighted users AND literal text for screen readers, so
 * no separate screen-reader-text companion needed.
 */
.gfa-accordion-summary .gfa-accordion-required {
    color: var(--gform-theme-color-secondary, #cc1029);
    font-weight: 500;
    margin-left: 0.25em;
    font-size: 0.7em;
    line-height: 1;
}