/* ========================================
   FAQ — Page
   Layout based on design/faq-alt-accordion.html
======================================== */

.cs-faq-wrap {
    max-width: 1280px;
    margin: 0 auto;
}

@media (min-width: 1025px) {
    .cs-faq-content {
        width: 80%;
    }
}

/* ---------- Page title ---------- */

.cs-faq-title-section {
    padding: 40px 0 8px;
}

.cs-faq-title-section h1 {
    font-size: 34px;
    font-weight: 700;
    color: var(--cs-text);
    margin: 0 0 8px;
    line-height: 1.15;
}

.cs-faq-subtitle {
    font-size: 18px;
    color: var(--cs-muted);
    margin: 0;
    max-width: 560px;
}

@media (max-width: 767px) {
    .cs-faq-title-section h1 {
        font-size: 28px;
    }
}

/* ---------- Accordion + sidebar - based on
   design/faq-alt-sidebar.html: sticky category nav on the left lets you
   jump straight to a topic, accordion content (from
   design/faq-alt-accordion.html) fills the rest of the full-width row. ---------- */

.cs-faq-section {
    padding: 40px 0;
}

.cs-faq-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 56px;
}

.cs-faq-sidebar {
    position: sticky;
    top: 28px;
    align-self: start;
}

/* Sidebar is a <details> so mobile can collapse it (see the max-width:767px
   block below); desktop/tablet always shows it expanded with no visible
   toggle, matching the old always-visible nav look. */
@media (min-width: 768px) {
    .cs-faq-sidebar summary {
        display: none;
    }

    .cs-faq-sidebar .cs-faq-sidebar-body {
        display: block !important;
    }

    /* Chrome (and other browsers following the current HTML spec) renders a
       closed <details>'s non-summary content inside an internal
       ::details-content box that gets content-visibility: hidden - the rule
       above alone doesn't reach it, since that box wraps .cs-faq-sidebar-body
       rather than being it. Must be overridden directly or the sidebar stays
       invisible on desktop despite [open] never being set. */
    .cs-faq-sidebar::details-content {
        content-visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
    }
}

.cs-faq-sidebar-item {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cs-muted);
    text-decoration: none !important; /* Astra's .entry-content a underline (2 classes + element) otherwise outranks this 1-class selector */
    margin-bottom: 4px;
}

.cs-faq-sidebar-item:hover {
    background: #f8fafc;
    color: var(--cs-text);
}

.cs-faq-group {
    margin-bottom: 48px;
    scroll-margin-top: 28px;
}

.cs-faq-group:last-child {
    margin-bottom: 0;
}

.cs-faq-category {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--cs-blue);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 20px;
}

.cs-faq-item {
    border-bottom: 1px solid var(--cs-border-soft);
}

.cs-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--cs-text);
    cursor: pointer;
    list-style: none;
}

/* Question text can be wrapped in an <h4> inside the summary for correct
   heading hierarchy (h1 page title > h2 Trade/Client FAQs > h3 category >
   h4 question) - this resets it to look identical to plain text (no
   browser default heading margin/size) rather than changing how it
   looks. Doesn't affect the FAQPage JSON-LD schema either way, since
   that reads summary textContent regardless of nested tags. */
.cs-faq-item summary h4 {
    margin: 0;
    font: inherit;
    color: inherit;
}

.cs-faq-item summary::-webkit-details-marker {
    display: none;
}

.cs-faq-item summary i {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--cs-muted-light);
    transition: transform 0.15s ease;
}

.cs-faq-item[open] summary i {
    transform: rotate(180deg);
}

.cs-faq-item p {
    font-size: 16px;
    color: var(--cs-muted);
    line-height: 1.7;
    margin: 0 0 24px;
}

/* ---------- Closing ---------- */

.cs-faq-closing {
    padding: 8px 0 56px;
}

.cs-faq-closing p {
    font-size: 16px;
    color: var(--cs-muted);
    margin: 0 0 16px;
}

@media (max-width: 767px) {
    body.cs-faq-page #content.site-content,
    body.cs-faq-page .ast-container,
    body.cs-faq-page #primary,
    body.cs-faq-page .entry-content,
    body.cs-faq-page .elementor,
    body.cs-faq-page .e-con,
    body.cs-faq-page .e-con-inner,
    body.cs-faq-page .elementor-widget-shortcode,
    body.cs-faq-page .elementor-shortcode {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .cs-faq-wrap {
        padding: 0 28px;
    }

    .cs-faq-closing .btn-primary {
        width: 100%;
    }

    .cs-faq-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cs-faq-sidebar {
        position: static;
    }

    .cs-faq-sidebar summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        background: var(--cs-border-soft);
        border-radius: 12px;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 700;
        color: var(--cs-text);
        cursor: pointer;
        list-style: none;
    }

    .cs-faq-sidebar summary::-webkit-details-marker {
        display: none;
    }

    .cs-faq-sidebar summary i {
        flex-shrink: 0;
        font-size: 13px;
        color: var(--cs-muted-light);
        transition: transform 0.15s ease;
    }

    .cs-faq-sidebar[open] summary i {
        transform: rotate(180deg);
    }

    .cs-faq-sidebar .cs-faq-sidebar-body {
        padding: 16px 4px 4px;
    }

    .cs-faq-sidebar-item {
        padding: 10px 4px;
        border-bottom: 1px solid var(--cs-border-soft);
        margin-bottom: 0;
    }

    .cs-faq-sidebar-item:last-child {
        border-bottom: none;
    }
}