/*
 * FAQ-accordeon.
 *
 * Volgt de vormtaal van het Bouwbestel-thema: sectiekop zoals .cat-footer h3
 * (Roboto 900, uppercase, 26px, 18px op mobiel), bodytekst zoals .cat-footer p
 * (14px, weight 300), vierkante hoeken en het merkgeel #f4c341 als accent.
 *
 * De antwoorden staan altijd in de HTML; <details> regelt alleen het in- en
 * uitklappen, zodat crawlers de tekst zonder JS zien.
 */
.dh-faq {
    margin: 40px 0;
}

.dh-faq__title {
    color: #000;
    font-size: 26px;
    font-weight: 900;
    line-height: 40px;
    margin: 0 0 25px;
    text-transform: uppercase;
}

.dh-faq__item {
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
}

.dh-faq__item:first-of-type {
    border-top: 1px solid #ddd;
}

/* Geel accent aan de linkerkant zodra een vraag openstaat.
   Een absoluut gepositioneerd laagje en geen inset-schaduw: die werd bij het
   hoveren overgeschilderd door de achtergrond van de vraag, waardoor het
   balkje leek te knipperen. Zo verspringt de tekst ook niet. */
.dh-faq__item {
    position: relative;
}

.dh-faq__item[open]::before {
    background: #f4c341;
    bottom: -1px;
    content: "";
    left: -1px;
    position: absolute;
    top: -1px;
    width: 3px;
    z-index: 1;
}

.dh-faq__question {
    color: #000;
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    list-style: none;
    padding: 16px 52px 16px 18px;
    position: relative;
}

.dh-faq__question:hover {
    background: #fafafa;
}

.dh-faq__question::-webkit-details-marker {
    display: none;
}

/* Plus- en minteken uit twee balkjes in plaats van een icoonfont: geen
   afhankelijkheid van FontAwesome, en scherp op elk scherm. */
.dh-faq__question::before,
.dh-faq__question::after {
    background: #2a2a2a;
    content: "";
    position: absolute;
    top: 50%;
}

.dh-faq__question::before {
    height: 14px;
    margin-top: -7px;
    right: 24px;
    width: 2px;
}

.dh-faq__question::after {
    height: 2px;
    margin-top: -1px;
    right: 18px;
    width: 14px;
}

.dh-faq__item[open] > .dh-faq__question::before {
    display: none;
}

.dh-faq__answer {
    border-top: 1px solid #eee;
    color: #000;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    margin: 0 18px;
    padding: 16px 0;
}

.dh-faq__answer p,
.dh-faq__answer li {
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
}

.dh-faq__answer p {
    margin: 0 0 1em;
}

.dh-faq__answer ul,
.dh-faq__answer ol {
    margin: 0 0 1em;
    padding-left: 20px;
}

.dh-faq__answer > *:first-child {
    margin-top: 0;
}

.dh-faq__answer > *:last-child {
    margin-bottom: 0;
}

.dh-faq__answer a {
    text-decoration: underline;
}

.dh-faq__answer table {
    border-collapse: collapse;
    max-width: 100%;
}

.dh-faq__answer td,
.dh-faq__answer th {
    border: 1px solid #ddd;
    padding: 6px 10px;
}

@media (max-width: 767px) {
    .dh-faq {
        margin: 30px 0;
    }

    .dh-faq__title {
        font-size: 18px;
        line-height: 28px;
        margin: 0 0 18px;
    }

    .dh-faq__question {
        font-size: 14px;
        padding: 14px 44px 14px 14px;
    }

    .dh-faq__answer {
        margin: 0 14px;
        padding: 14px 0;
    }
}