/* FAQ section (webinar-landing/faq.php). The accordion itself is styled by Accordion.css; this only sizes it for the landing page. */

.rd-wl-faq {
    /* Figma: 120 top and bottom */
    padding-block: calc(var(--rd-spacing-xxx-lg) + var(--rd-spacing-lg));
    background: var(--rd-gray-100);
}

/* Figma: 60 between title and list */
.rd-wl .rd-wl-faq h2 {
    margin: 0 0 calc(var(--rd-spacing-x-lg) + var(--rd-spacing-sm));
}

/* Figma: question row 4 · 38 · 12, rule, 32 to the next question */
.rd-wl-faq .rd-accordion details {
    border-bottom-color: var(--rd-gray-300);
}

.rd-wl-faq .rd-accordion details + details {
    margin-top: var(--rd-spacing-xxx-big);
}

.rd-wl-faq .rd-accordion summary {
    gap: var(--rd-spacing-sm);
    padding: var(--rd-spacing-xx-sm) var(--rd-spacing-xx-sm) var(--rd-spacing-sm);
    color: var(--rd-wl-dark);
    font-size: var(--rd-fontsize-8);
    line-height: 38px;
}

/* Figma's chevron fills its 25×16 box; the accordion's default SVG draws a 10×5 path in a
   20×20 viewBox, so it gets a tight one here. */
.rd-wl-main .rd-wl-faq .rd-accordion summary::before {
    width: 25px;
    height: 16px;
    mask-image: url("/src/img/2024/svg/icons/rd-icon-chevron-down-wide.svg");
    -webkit-mask-image: url("/src/img/2024/svg/icons/rd-icon-chevron-down-wide.svg");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    background-color: var(--rd-wl-accent);
}

.rd-wl-faq .rd-accordion .rd-details-content {
    padding-left: calc(var(--rd-spacing-xx-sm) + 25px + var(--rd-spacing-sm));
    font-size: var(--rd-fontsize-5);
    line-height: 1.8;
}

@media (max-width: 760px) {
    .rd-wl .rd-wl-faq h2 {
        font-size: var(--rd-fontsize-11);
    }

    .rd-wl .rd-wl-faq h2 {
        margin-bottom: var(--rd-spacing-x-lg);
    }

    .rd-wl-faq .rd-accordion summary {
        line-height: 1.4;
    }

    .rd-wl-faq .rd-accordion details + details {
        margin-top: var(--rd-spacing-big);
    }
}