/**
 * Layout: FAQ - Archief
 * Slug: faq_archive
 */

.faq_archive-layout {
    position: relative;
    --pk-heading-color: #ffffff;
    padding-bottom: max(2rem, calc(8 * var(--su)));
    padding-top: max(calc(var(--pk-header-height) + 2rem), calc(9 * var(--su)));
    background-color: var(--fdhl-red);
    color: #ffffff;
}
/* .faq_archive-layout::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	width: 100%;
	height: 100px;
	background-color: var(--fdhl-red-dark);
} */

.faq_archive-layout .pk-grid-container {
    align-items: start;
    position: relative;
    z-index: 2;
}

.faq_archive-layout .text-col {
    margin-bottom: max(1.5rem, calc(3 * var(--su)));
    text-align: center;
}

/* ── Nav column ────────────────────────────────────── */
.faq_archive-layout .faq-nav-col {
    --pk-heading-font-family: "Inter";
    position: sticky;
    top: 100px;
    align-self: start;
    background-color: var(--fdhl-red-dark);
    padding: 2.5rem;
    border-radius: 0.75rem;
}

.faq_archive-layout .faq-nav-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq_archive-layout .faq-nav-btn {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: 0.75em 1em;
    background: var(--fdhl-red);
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    border: none;
    color: #ffffff;
    font-size: var(--desktop-body-md);
}
.faq_archive-layout .faq-nav-btn svg {
    width: 0;
    height: auto;
    transition: width 0.2s ease;
}

.faq_archive-layout .faq-nav-col:has(.faq-nav-btn:hover) .faq-nav-btn:not(:hover) {
    opacity: 0.75;
}

.faq_archive-layout .faq-nav-btn.active {
    gap: 0.5em;
}
.faq_archive-layout .faq-nav-btn.active svg {
    width: 1.25em;
    transition-delay: 1;
}

/* ── FAQ column ────────────────────────────────────── */
.faq_archive-layout .faq-col {
    --pk-heading-font-family: "Inter";
    display: flex;
    flex-direction: column;
    gap: max(2rem, calc(3.5 * var(--su)));
}

.faq_archive-layout .faq-category-title {
    margin-bottom: 1rem;
}

.faq_archive-layout .pk-accordion-item {
    background: #fff;
    color: var(--pk-text-color);
	transition: opacity 0.2s ease;
}
.faq_archive-layout .pk-accordion:has(.pk-accordion-item:hover) .pk-accordion-item:not(:hover) {
	opacity: 0.75;
}

/* ── Responsive ────────────────────────────────────── */
@media screen and (max-width: 992px) {
    .faq_archive-layout {
        padding-bottom: max(4rem, calc(8 * var(--su)));
    }
    .faq_archive-layout .faq-col {
        order: 2;
    }
    .faq_archive-layout .faq-nav-col {
        position: static;
        order: 1;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .faq_archive-layout .faq-nav-inner {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .faq_archive-layout .faq-nav-btn {
        width: 100%;
        flex-grow: 1;
    }
}