/* ============================================================
   faq-redesign.css
   Premium restyle of the "Got Questions?" accordion so it matches
   the Kinetic Web Builders design language:
     - brand primary  #ff600b  (orange)
     - soft white cards, ~16px radius, lift-on-hover
     - orange-glow shadow for emphasis
   Targets the EXISTING Bootstrap accordion markup only — no HTML
   or JS changes. Loaded last so it overrides the theme defaults.
   When an item is expanded the WHOLE card (number + question +
   answer) turns brand-orange with white text via :has(); per-element
   rules give a graceful fallback on browsers without :has() support.
   ============================================================ */

.faqs .accordion {
    --kwb-orange: #ff600b;
    --kwb-orange-2: #ff7f3a;
}

/* Section heading — keep on-brand, just tighten the tracking */
.faqs h2,
.faqs h2.mainHeadingMobile {
    letter-spacing: -0.02em;
}

/* ---------------- Card ---------------- */
.faqs .accordion-item {
    border: 1px solid #efe7e2 !important;
    border-radius: 16px !important;
    background-color: #fff !important;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(17, 17, 17, 0.05);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1),
        box-shadow .35s ease,
        background-color .35s ease,
        border-color .35s ease;
}

/* Lift on hover (closed cards) */
.faqs .accordion-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(17, 17, 17, 0.10);
    border-color: #ffd9c2 !important;
}

/* Neutralise the theme's header offset so the number lines up */
.faqs .accordion-header {
    margin-top: 0 !important;
}

/* ---------------- Branded number ---------------- */
.faqs .accordion-item .number {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-width: 92px;
    padding: 20px 6px 0 24px;
    font-family: inherit;
    font-size: clamp(32px, 3.4vw, 46px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--kwb-orange-2), var(--kwb-orange));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: -webkit-text-fill-color .35s ease, color .35s ease;
}

/* ---------------- Question (button) ---------------- */
.faqs .accordion-button {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 0 16px 16px 0 !important;
    background: transparent !important;
    font-family: inherit;
    font-size: clamp(16px, 1.25vw, 20px) !important;
    font-weight: 600 !important;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: #16110e !important;
    text-align: left;
    padding: 22px 22px 22px 10px;
    transition: color .3s ease;
}

.faqs .accordion-button span {
    display: block;
    border: 0;
}

.faqs .accordion-button:focus,
.faqs .accordion-button:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Toggle icon (+/-): recolour rather than swap assets, animate it */
.faqs .accordion-button:after {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0;
    align-self: center;
    transition: filter .3s ease, transform .3s ease;
}

/* ---------------- Answer ---------------- */
.faqs .accordion-body {
    text-align: left;
    font-family: inherit;
    font-size: 16px !important;
    line-height: 1.7;
    color: #5a534f;
    padding: 0 22px 22px 10px;
    transition: color .35s ease;
}

/* ============================================================
   EXPANDED STATE — entire card brand-orange, white text
   ============================================================ */
.faqs .accordion-item:has(.accordion-button:not(.collapsed)) {
    background: linear-gradient(135deg, #ff7f3a, #ff600b) !important;
    border-color: transparent !important;
    box-shadow: 0 18px 38px rgba(255, 96, 11, 0.34) !important;
    transform: translateY(-2px);
}

.faqs .accordion-item:has(.accordion-button:not(.collapsed)) .number {
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
}

.faqs .accordion-item:has(.accordion-button:not(.collapsed)) .accordion-button,
.faqs .accordion-item:has(.accordion-button:not(.collapsed)) .accordion-body {
    color: #fff !important;
}

.faqs .accordion-item:has(.accordion-button:not(.collapsed)) .accordion-button:after {
    filter: brightness(0) invert(1);
}

/* ---- Fallback for browsers without :has() ---- */
.faqs .accordion-button:not(.collapsed) {
    color: #ff600b !important;
}

.faqs .accordion-button:not(.collapsed):after {
    filter: brightness(0) invert(1);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 991.98px) {
    .faqs .accordion-item .number {
        min-width: 74px;
        padding: 18px 4px 0 18px;
        font-size: 34px;
    }
}

@media (max-width: 767.98px) {
    .faqs .accordion-item {
        border-radius: 14px !important;
    }

    .faqs .accordion-item .number {
        min-width: 56px;
        padding: 16px 2px 0 14px;
        font-size: 26px;
    }

    .faqs .accordion-button {
        padding: 16px 14px 16px 6px;
        font-size: 15.5px !important;
    }

    .faqs .accordion-button:after {
        width: 24px !important;
        height: 24px !important;
    }

    .faqs .accordion-body {
        font-size: 14.5px !important;
        padding: 0 14px 16px 6px;
    }
}