/* ===========================================
   Component: FAQ Accordion
   assets/css/components/faq.css
   =========================================== */

@media only screen and (min-width: 0px) {
    [id$="-faq"],
    [id="cs-faq"] {
        background: var(--white);
        padding: var(--sectionPadding);
        border-top: 0.5px solid rgba(0, 0, 0, 0.06);
    }

    [id$="-faq"] .cs-container,
    [id="cs-faq"] .cs-container {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    [id$="-faq"] .cs-header,
    [id="cs-faq"] .cs-header {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    [id$="-faq"] .cs-title,
    [id="cs-faq"] .cs-title {
        font-family: var(--headerFont);
        font-size: var(--headerFontSize);
        font-weight: 900;
        line-height: 1.2;
        color: var(--navy);
        margin: 0;
    }

    [id$="-faq"] .cs-desc,
    [id="cs-faq"] .cs-desc {
        font-family: var(--bodyFont);
        font-size: var(--bodyFontSize);
        line-height: 1.7;
        color: var(--silver);
        margin: 0;
        max-width: 30rem;
    }

    [id$="-faq"] .cs-faq-list,
    [id="cs-faq"] .cs-faq-list {
        list-style: none;
        padding: 0;
        margin: 0;
        border: 0.5px solid rgba(0, 0, 0, 0.08);
        border-radius: 0.75rem;
        overflow: hidden;
    }

    [id$="-faq"] .cs-faq-item,
    [id="cs-faq"] .cs-faq-item {
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.07);
    }

    [id$="-faq"] .cs-faq-item:last-child,
    [id="cs-faq"] .cs-faq-item:last-child {
        border-bottom: none;
    }

    [id$="-faq"] .cs-faq-q,
    [id="cs-faq"] .cs-faq-q {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.125rem 1.5rem;
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
        transition: background 0.2s ease;
    }

    [id$="-faq"] .cs-faq-q:hover,
    [id="cs-faq"] .cs-faq-q:hover {
        background: #f7f7f6;
    }

    [id$="-faq"] .cs-faq-q-text,
    [id="cs-faq"] .cs-faq-q-text {
        font-family: var(--headerFont);
        font-size: clamp(1.1rem, 1.8vw, 1.3rem);
        font-weight: 600;
        color: var(--navy);
        line-height: 1.4;
        transition: color 0.2s ease;
    }

    [id$="-faq"] .cs-faq-icon,
    [id="cs-faq"] .cs-faq-icon {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
        border: 0.5px solid rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background 0.2s ease, border-color 0.2s ease;
    }

    [id$="-faq"] .cs-faq-icon svg,
    [id="cs-faq"] .cs-faq-icon svg {
        color: var(--navy);
        transition: color 0.2s ease;
    }

    [id$="-faq"] .cs-faq-a,
    [id="cs-faq"] .cs-faq-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, padding 0.35s ease;
    }

    [id$="-faq"] .cs-faq-a p,
    [id="cs-faq"] .cs-faq-a p {
        font-family: var(--bodyFont);
        font-size: 0.875rem;
        line-height: 1.75;
        color: var(--charcoal);
        padding: 0 1.5rem 1.125rem;
        margin: 0;
        max-width: 42.5rem;
    }

    /* Active state */
    [id$="-faq"] .cs-faq-item.cs-active .cs-faq-q,
    [id="cs-faq"] .cs-faq-item.cs-active .cs-faq-q {
        background: #f7f7f6;
    }

    [id$="-faq"] .cs-faq-item.cs-active .cs-faq-icon,
    [id="cs-faq"] .cs-faq-item.cs-active .cs-faq-icon {
        background: var(--navy);
        border-color: var(--navy);
    }

    [id$="-faq"] .cs-faq-item.cs-active .cs-faq-icon svg,
    [id="cs-faq"] .cs-faq-item.cs-active .cs-faq-icon svg {
        color: var(--white);
    }

    [id$="-faq"] .cs-faq-item.cs-active .cs-faq-a,
    [id="cs-faq"] .cs-faq-item.cs-active .cs-faq-a {
        max-height: 25rem;
    }
}

@media only screen and (min-width: 48rem) {
    [id$="-faq"] .cs-header,
    [id="cs-faq"] .cs-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2.5rem;
    }

    [id$="-faq"] .cs-header-left,
    [id="cs-faq"] .cs-header-left {
        flex-shrink: 0;
    }

    [id$="-faq"] .cs-desc,
    [id="cs-faq"] .cs-desc {
        text-align: right;
        padding-bottom: 0.25rem;
    }
}

@media only screen and (min-width: 64rem) {
    [id$="-faq"],
    [id="cs-faq"] {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    [id$="-faq"] .cs-faq-q,
    [id="cs-faq"] .cs-faq-q {
        padding: 1.25rem 1.75rem;
    }

    [id$="-faq"] .cs-faq-a p,
    [id="cs-faq"] .cs-faq-a p {
        padding: 1.75rem 1.25rem;
    }
}