/* ===========================================================================
   FAQ - pill cards
   Shared by every FAQ that opts in with .sts-faq-pills on its container, so
   the design lives in one place rather than being copied per page.

   Each row is its own card rather than a rule-separated list, and the open one
   carries the brand gradient. The theme's accordion JS only toggles .open, so
   everything here keys off that.
   =========================================================================== */
.sts-faq-pills .sts-widget-states-side-accordion {
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
}

/* the container's own --content-width would otherwise cap the accordion
   before this does */
.sts-faq-pills { --content-width: 1140px; }

.sts-faq-pills .states-side-accordion { --flex-direction: column; }

/* the theme draws a divider on each item; these are cards, so it goes */
.sts-faq-pills .states-side-accordion__item {
    border: 0;
    border-style: none;
    border-radius: 12px;
    background-color: #F3F3F3;
    padding: 20px 26px;
    transition: background-color .35s ease, color .35s ease;
}

.sts-faq-pills .states-side-accordion__item + .states-side-accordion__item {
    margin-top: 14px;
}

.sts-faq-pills .states-side-accordion__item.open {
    background-image: radial-gradient(180% 180% at 50% 0%, #F6730000 0%, #E2560A 45%, #C83C00 100%);
    background-color: #E2560A;
    box-shadow: 0 18px 40px -22px #C83C00A6;
}

/* Size and leading are left to the theme - .text-heading-2 on the title and
   .font-sm on the content are already in the markup - so only the colours are
   set here and every FAQ on the site stays on one type scale. */
.sts-faq-pills .states-side-accordion__title { color: #000000; }

.sts-faq-pills .states-side-accordion__content,
.sts-faq-pills .states-side-accordion__content p {
    color: #00000099;
}

.sts-faq-pills .states-side-accordion__content p { margin: 10px 0 0; }

.sts-faq-pills .states-side-accordion__item.open .states-side-accordion__title,
.sts-faq-pills .states-side-accordion__item.open .states-side-accordion__content,
.sts-faq-pills .states-side-accordion__item.open .states-side-accordion__content p {
    color: #ffffff;
}

/* the toggle is a + that becomes a - when the row opens */
.sts-faq-pills .states-side-accordion__toggle {
    position: relative;
    width: 22px;
    height: 22px;
    color: #000000;
}

.sts-faq-pills .states-side-accordion__item.open .states-side-accordion__toggle { color: #ffffff; }

.sts-faq-pills .states-side-accordion__toggle::before,
.sts-faq-pills .states-side-accordion__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 1.6px;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    transition: transform .3s ease, opacity .3s ease;
}

.sts-faq-pills .states-side-accordion__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }

/* only the vertical stroke goes, leaving the minus */
.sts-faq-pills .states-side-accordion__item.open .states-side-accordion__toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
}

@media (max-width: 767px) {
    .sts-faq-pills .states-side-accordion__item { padding: 16px 20px; }
}