/**
 * FAQ accordion — expand/collapse styling for .wt-accordion blocks.
 * Paired with assets/js/faq-accordion.js (vanilla JS toggle).
 */

/* Header — clickable question bar */
.wt-accordion .wt-accordion-header {
    font-weight: 700;
    position: relative;
    margin-bottom: 0;
    padding: 16px 40px 16px 0;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
}

/* Chevron icon via ::after */
.wt-accordion .wt-accordion-header::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    right: 0;
    top: 50%;
    margin-top: -8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    transition: transform 0.3s linear;
}

/* Active state — rotated chevron */
.wt-accordion.active .wt-accordion-header::after {
    transform: rotate(180deg);
}

/* Content — animated slide via max-height */
.wt-accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.2s ease, padding 0.2s ease;
}
.wt-accordion.active .wt-accordion-content {
    max-height: 2000px;
    padding: 16px 0;
}