/*------------------------------------*\

    Accordion

    One panel open at a time (see FxAccordion.js). Panels read as quiet
    cards rather than solid green bars: the green is reserved for the
    active item and the chevron badge, which keeps a long FAQ list calm.

\*------------------------------------*/

.fx-accordion {
    background: var(--fx-white);
    position: relative;
}

.fx-accordion__panels {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-inline: auto;
    max-width: 56rem;
}

.fx-accordion__panel {
    background: var(--fx-white);
    border: 0.0625rem solid var(--fx-border);
    border-radius: var(--fx-radius);
    overflow: hidden;
    position: relative;
    transition: border-color var(--fx-transition), box-shadow var(--fx-transition);
}

/* Green edge marks the open panel */
.fx-accordion__panel::before {
    background: var(--fx-green);
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity var(--fx-transition);
    width: 0.25rem;
    z-index: 1;
}

.fx-accordion__panel:hover {
    border-color: rgba(61, 111, 66, 0.4);
}

.fx-accordion__panel.is-expanded {
    border-color: rgba(61, 111, 66, 0.32);
    box-shadow: var(--fx-shadow-sm);
}

.fx-accordion__panel.is-expanded::before {
    opacity: 1;
}


/*------------------------------------*\
    Toggle
\*------------------------------------*/

.fx-accordion__panel__toggle {
    background: transparent;
    border: 0;
    color: var(--fx-dark-green);
    cursor: pointer;
    display: block;
    font-family: var(--fx-font-display);
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    font-weight: 400;
    line-height: 1.4;
    padding: 1.375rem 4.5rem 1.375rem 1.625rem;
    position: relative;
    text-align: left;
    transition: background-color var(--fx-transition), color var(--fx-transition);
    width: 100%;
}

.fx-accordion__panel__toggle:hover {
    background: var(--fx-cream);
    color: var(--fx-green);
}

.fx-accordion__panel.is-expanded .fx-accordion__panel__toggle {
    color: var(--fx-green);
}

/* Chevron badge */
.fx-accordion__panel__toggle::before {
    background: var(--fx-cream);
    border-radius: 50%;
    content: "";
    height: 2.25rem;
    position: absolute;
    right: 1.375rem;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color var(--fx-transition);
    width: 2.25rem;
}

.fx-accordion__panel__toggle::after {
    border-bottom: 0.125rem solid var(--fx-green);
    border-right: 0.125rem solid var(--fx-green);
    content: "";
    height: 0.5rem;
    position: absolute;
    /* Circle spans right:1.375rem to right:3.625rem (its 2.25rem width) —
       2.5rem is its horizontal centre. Paired with translate(50%, -50%)
       below, the arrow's own centre lands exactly there regardless of its
       size, rather than a hand-tuned offset that drifts if either
       element's dimensions change. */
    right: 2.5rem;
    top: 50%;
    transform: translate(50%, -50%) rotate(45deg);
    transition: transform var(--fx-transition), border-color var(--fx-transition);
    width: 0.5rem;
}

.fx-accordion__panel__toggle:hover::before {
    background: rgba(61, 111, 66, 0.14);
}

.fx-accordion__panel.is-expanded .fx-accordion__panel__toggle::before {
    background: var(--fx-green);
}

.fx-accordion__panel.is-expanded .fx-accordion__panel__toggle::after {
    border-color: var(--fx-white);
    transform: translate(50%, -50%) rotate(225deg);
}

.fx-accordion__panel__toggle:focus-visible {
    outline: 0.1875rem solid var(--fx-green);
    outline-offset: -0.1875rem;
}


/*------------------------------------*\
    Panel content

    .fx-accordion__panel__content is the element FxAccordion.js animates
    (its max-height, measured from -inner's scrollHeight). Padding lives
    on -inner instead of directly on the animated element: max-height
    can't compress padding on the same box (a box can't shrink narrower
    than its own padding), so a padded element never reaches a true
    zero-height closed state.
\*------------------------------------*/

.fx-accordion__panel__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--fx-ease);
}

.fx-accordion__panel.is-expanded .fx-accordion__panel__content {
    /* Rest state once JS clears its inline max-height post-transition, and
       the no-JS/first-paint fallback for the row rendered open server-side. */
    max-height: none;
}

.fx-accordion__panel__content-inner {
    color: var(--fx-text);
    padding: 0.25rem 1.625rem 1.625rem;
}

/* Hairline sits inside the padding so it stops short of the card edges */
.fx-accordion__panel__content-inner::before {
    background: var(--fx-border);
    content: "";
    display: block;
    height: 0.0625rem;
    margin-bottom: 1.25rem;
}

.fx-accordion__panel__content-inner > :first-child {
    margin-top: 0;
}

.fx-accordion__panel__content-inner > :last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .fx-accordion__panel__toggle {
        padding-inline: 2rem 5rem;
    }

    .fx-accordion__panel__content-inner {
        padding-inline: 2rem;
    }
}