/* =========================================================
   ZETWIJS FAQ COMPONENT
   Themeproof - standalone
========================================================= */

.faq-page{
    width:min(100%,900px);
    margin:0 auto;
}

.faq-header{
    margin-bottom:32px;
}

.faq-header h1{
    margin:0 0 12px;
    font-family:Orbitron,sans-serif;
    font-size:26px;
    font-weight:400;
    letter-spacing:var(--zw-orbitron-spacing);
    color:var(--text-orbitron);
}

.faq-header p{
    max-width:700px;
    margin:0;
    color:var(--jura-muted);
    font-family:Jura,sans-serif;
    font-size:15px;
    line-height:1.7;
}


/* categorieën */

.faq-category{
    margin-bottom:42px;
}

.faq-category-title{
    margin:0 0 14px;
    font-family:Orbitron,sans-serif;
    font-size:18px;
    font-weight:400;
    letter-spacing:var(--zw-orbitron-spacing);
    color:var(--text-orbitron);
}


.faq-list{
    border-top:1px solid var(--border-default);
}

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

.faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 4px;
    background:none;
    border:0;
    cursor:pointer;
    color:var(--jura-heading);
    font-family:Jura,sans-serif;
    font-size:16px;
    font-weight:500;
    text-align:left;
}

.faq-question:hover{
    color:var(--accent-brand);
}

.faq-chevron{
    width:22px;
    height:22px;
    flex:none;
    color:var(--accent-brand);
    transition:transform .25s ease,color .2s ease;
}

.faq-item.active .faq-chevron{
    transform:rotate(180deg);
}

.faq-answer{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .3s ease;
}

.faq-answer-inner{
    overflow:hidden;
}

.faq-answer-inner p{
    margin:0;
    padding:0 4px 22px 4px;
    color:var(--jura-muted);
    font-family:Jura,sans-serif;
    font-size:15px;
    line-height:1.75;
}

.faq-item.active .faq-answer{
    grid-template-rows:1fr;
}


/* FAQ categories */

.faq-category{
    margin-bottom:42px;
}

.faq-category-title{
    margin:0 0 14px;
    font-family:Orbitron,sans-serif;
    font-size:18px;
    font-weight:400;
    letter-spacing:var(--zw-orbitron-spacing);
    color:var(--text-orbitron);
}

@media(max-width:700px){
    .faq-question{
        padding:18px 2px;
        font-size:15px;
    }

    .faq-header h1{
        font-size:22px;
    }

    .faq-category-title{
        font-size:16px;
    }
}

/* Meerdere alinea's en contactlink in de FAQ. */
.faq-answer-inner p + p { margin-top:-8px; }
.faq-answer-inner a { color:var(--accent-brand); text-underline-offset:3px; }
.faq-question:focus-visible { outline:2px solid var(--accent-brand); outline-offset:3px; }