/*
    Author: TedSite
    Date: 22-09-2025
    Description: Succeed Offices FAQ Stylesheet
*/
.container-1a
{
    width: 90%;
}

.container-1a ul
{
    color: #333;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

/* SEARCH */
.faq-search {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin: 1.25rem 0 2rem 0;
}

    .faq-search input[type="search"] {
        flex: 1;
        padding: .75rem 1rem;
        border: 2px solid var(--orange-color);
        border-radius: .5rem;
        background: #fff;
        font: inherit;
        font-size: 1.5rem;
        outline: none;
        box-shadow: 0 2px 0 rgba(0,0,0,.05) inset;
    }

        .faq-search input[type="search"]::placeholder {
            opacity: .7
        }

    .faq-search button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border: 2px solid var(--orange-color);
        color: var(--orange-color);
        background: #fff;
        border-radius: .5rem;
        cursor: pointer;
        transition: transform .15s ease, box-shadow .15s ease;
    }

        .faq-search button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(0,0,0,.08)
        }

/* LIST + CARDS */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.faq-item {
    background: #fff;
    border: 2px solid var(--orange-color);
    border-radius: .6rem;
    box-shadow: 0 6px 0 rgba(0,0,0,.08);
    overflow: hidden;
}

/* QUESTION BUTTON */
.faq-question {
    width: 100%;
    font-family: Poppins;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1rem 1rem 1.1rem;
    font-weight: 700;
    font-size: 2rem;
    color: #d3542d; /* iets donkerder ‘oranje’ tekst */
}

.faq-q-number {
    color: #f08e73; /* lichte oranje tint */
    margin-right: .25rem;
}

.faq-q-icon {
    transition: transform .25s ease
}

/* ANSWER AREA (collapsible) */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.1rem;
    transition: max-height .35s ease, padding .25s ease;
    color: #333;
}

.faq-item.open .faq-answer {
    padding: 0 .95rem 1rem 1.1rem;
}

.faq-item.open .faq-question .faq-q-icon {
    transform: rotate(180deg);
}

/* Search hit highlight (optional) */
.faq-item[data-hit="true"] .faq-question {
    background: rgba(236,106,66,.06)
}

/* ===============================
   MEDIA QUERIES — FAQ
================================= */

/* ≥1460px — ruime desktop */
@media (min-width: 1460px) {
    .container-1a {
        width: 75%;
    }

    .faq-question {
        font-size: 2.25rem;
        padding: 1.25rem 1.25rem 1.25rem 1.35rem;
    }

    .faq-answer {
        font-size: 1.05rem;
        line-height: 1.7;
    }
}

/* 1024–1459px — standaard desktop */
@media (min-width: 1024px) and (max-width: 1459px) {
    .container-1a {
        width: 80%;
    }

    .faq-search {
        gap: .75rem;
    }

        .faq-search input[type="search"] {
            font-size: 1.35rem;
        }

        .faq-search button {
            width: 2.5rem;
            height: 2.5rem;
        }

    .faq-question {
        font-size: 2rem;
        padding: 1.1rem 1.1rem 1.1rem 1.25rem;
        gap: .7rem;
    }

    .faq-answer {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* 768–1023px — tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .container-1a {
        width: 90%;
    }

    /* search naast elkaar met vaste actieknop */
    .faq-search {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: .75rem;
    }

        .faq-search input[type="search"] {
            font-size: 1.2rem;
        }

        .faq-search button {
            width: 2.75rem;
            height: 2.75rem;
        }

    .faq-question {
        font-size: 1.6rem;
        padding: 1rem 1rem 1rem 1.1rem;
        gap: .6rem;
    }

    .faq-answer {
        font-size: .975rem;
        line-height: 1.65;
    }
}

/* ≤767px — mobiel */
@media (max-width: 767px) {
    .container-1a {
        width: 90%;
    }

    /* search onder elkaar */
    .faq-search {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
        margin: 1rem 0 1.5rem 0;
    }

        .faq-search input[type="search"] {
            font-size: 1.1rem;
            padding: .7rem .9rem;
        }

        .faq-search button {
            width: 44px; /* voldoende tap-target */
            height: 44px;
        }

    .faq-list {
        gap: .85rem;
    }

    .faq-item {
        border-radius: .7rem;
        box-shadow: 0 5px 0 rgba(0,0,0,.07);
    }

    .faq-question {
        font-size: 1.35rem;
        padding: .9rem .9rem .9rem 1rem;
        grid-template-columns: auto 1fr auto;
        gap: .55rem;
    }

    .faq-q-number {
        margin-right: .2rem;
    }

    .faq-answer {
        font-size: 1rem;
        line-height: 1.6;
        padding: 0 1rem; /* ingeklapt: 0 top/bottom blijft via transition */
    }

    .faq-item.open .faq-answer {
        padding: 0 .9rem .9rem 1rem;
    }
}

/* Optioneel: bewegingsreductie respecteren */
@media (prefers-reduced-motion: reduce) {
    .faq-search button,
    .faq-question .faq-q-icon,
    .faq-answer {
        transition: none !important;
    }
}