/* BgammonHub FAQ – scoped to this page, using existing site palette */
.faq-page {
    --faq-wood: #583b2a;
    --faq-brass: #b98b49;
    --faq-cream: #fff8e9;
    --faq-ink: #3e3025;
    color: var(--faq-ink);
    max-width: 1200px;
}

.faq-intro {
    max-width: 780px;
    margin-bottom: 2rem;
}

.faq-eyebrow {
    color: #986b31;
    font-weight: 800;
    font-size: .76rem;
    letter-spacing: .15em;
    margin-bottom: .6rem;
}

    .faq-eyebrow i {
        margin-right: .4rem;
    }

.faq-intro h1 {
    font-size: clamp(1.8rem,3.4vw,3rem);
    font-weight: 800;
    color: var(--faq-wood);
    margin-bottom: .6rem;
}

.faq-intro p {
    color: #776450;
    margin-bottom: 1.5rem;
}

.faq-search-wrap {
    position: relative;
    max-width: 640px;
    margin: auto;
}

    .faq-search-wrap > i {
        position: absolute;
        left: 1.15rem;
        top: 50%;
        transform: translateY(-50%);
        color: #ab854b;
        pointer-events: none;
    }

    .faq-search-wrap .form-control {
        height: 54px;
        border: 1px solid #dbc7a6;
        background: #fffdf8;
        border-radius: 15px;
        padding: 0 3.2rem 0 3rem;
        box-shadow: 0 5px 20px rgba(73,43,19,.07);
        color: var(--faq-ink);
    }

        .faq-search-wrap .form-control:focus {
            border-color: var(--faq-brass);
            box-shadow: 0 0 0 .2rem rgba(185,139,73,.17);
        }

.faq-clear {
    position: absolute;
    right: .8rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #876f54;
    padding: .5rem;
}

.faq-results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .2rem 0 1rem;
}

    .faq-results-heading h2 {
        font-size: 1.3rem;
        font-weight: 800;
        color: var(--faq-wood);
        margin: 0;
    }

.faq-accordion {
    display: grid;
    gap: .7rem;
}

    .faq-accordion .accordion-item {
        border: 1px solid #e4d2b7;
        border-radius: 12px;
        overflow: hidden;
        background: #fffdf9;
        box-shadow: 0 3px 10px rgba(74,42,20,.04);
    }

    .faq-accordion .accordion-button {
        background: #fffdf9;
        color: #503a29;
        padding: 1.05rem 1.1rem;
        font-size: .96rem;
        font-weight: 700;
        box-shadow: none;
    }

        .faq-accordion .accordion-button:not(.collapsed) {
            background: #f8efdf;
            color: #69431f;
            box-shadow: none;
        }

        .faq-accordion .accordion-button:focus-visible {
            outline: 2px solid var(--faq-brass);
            outline-offset: -3px;
            box-shadow: none;
        }

        .faq-accordion .accordion-button::after {
            filter: sepia(.9) saturate(.75);
            flex-shrink: 0;
        }

    .faq-accordion .accordion-body {
        padding: .15rem 1.1rem 1.1rem;
        line-height: 1.75;
        color: #64513f;
    }

.faq-empty {
    text-align: center;
    padding: 3rem 1rem;
    border: 1px dashed #dcc39d;
    border-radius: 16px;
}

    .faq-empty > i {
        font-size: 2.1rem;
        color: #a78451;
    }

    .faq-empty h3 {
        font-size: 1.1rem;
        margin: 1rem 0 .4rem;
        font-weight: 800;
    }

    .faq-empty p {
        color: #806d59;
    }

.faq-contact {
    margin: 1.6rem .2rem 0;
    color: #75624f;
    font-size: .9rem;
}

    .faq-contact a {
        color: #875b2a;
        font-weight: 800;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

/* Sticky search and icon topic dropdown: both accessible while scrolling */
.faq-page {
    max-width: 1060px;
}

.faq-intro {
    margin-bottom: 1.1rem;
}

.faq-controls-sticky {
    position: sticky;
    top: 0;
    z-index: 1020;
    margin: 0 -12px 1.5rem;
    padding: .65rem 12px .8rem;
    background: rgba(255,250,240,.97);
    border-bottom: 1px solid #e7d4b6;
    box-shadow: 0 7px 16px rgba(73,43,19,.07);
}

.faq-controls-inner {
    display: flex;
    gap: .75rem;
    align-items: stretch;
}

    .faq-controls-inner .faq-search-wrap {
        max-width: none;
        margin: 0;
        flex: 1;
        min-width: 0;
    }

        .faq-controls-inner .faq-search-wrap .form-control {
            height: 48px;
        }

.faq-topic-dropdown {
    flex: 0 0 245px;
}

.faq-topic-toggle {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    height: 48px;
    padding: 0 .9rem;
    color: #5a3c29;
    background: #fffdf8;
    border: 1px solid #dbc7a6;
    border-radius: 13px;
    font-weight: 750;
    text-align: left;
}

    .faq-topic-toggle:focus-visible {
        outline: 2px solid var(--faq-brass);
        outline-offset: 2px;
    }

    .faq-topic-toggle > i:first-child {
        color: #a77938;
        width: 20px;
        text-align: center;
    }

    .faq-topic-toggle > span {
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.faq-topic-chevron {
    font-size: .75rem;
    color: #956d40;
}

.faq-topic-menu {
    width: 100%;
    max-height: min(60vh,400px);
    overflow-y: auto;
    border: 1px solid #dbc7a6;
    border-radius: 13px;
    padding: .45rem;
    background: #fff9ee;
    box-shadow: 0 12px 26px rgba(73,43,19,.17);
}

.faq-category {
    display: flex;
    gap: .7rem;
    align-items: center;
    padding: .7rem .75rem;
    color: #6b5239;
    font-weight: 650;
    border-radius: 9px;
}

    .faq-category > i {
        width: 20px;
        text-align: center;
        color: #aa8147;
    }

    .faq-category.active, .faq-category:active {
        color: #fff7e8;
        background: #5a3c29;
    }

    .faq-category:hover:not(.active) {
        background: #f3e6d0;
        color: #5a3c29;
    }

    .faq-category.active > i {
        color: #f4c883;
    }

@media (max-width:767.98px) {
    .faq-controls-inner {
        flex-direction: column;
        gap: .5rem;
    }

    .faq-topic-dropdown {
        flex: 0 0 auto;
        width: 100%;
    }

    .faq-controls-sticky {
        padding: .5rem 12px .65rem;
    }

    .faq-intro {
        margin-bottom: 1rem;
    }

    .faq-accordion .accordion-button {
        font-size: .91rem;
    }
}

@media (prefers-reduced-motion:reduce) {
    .faq-category {
        transition: none;
    }
}