/* Block: FAQs
   <details>/<summary>: open/close needs no script. Where the browser supports
   ::details-content, the answer also slides open. */

.faqs__list {
    border-top: 1px solid var(--color-violet-18);
}

.faq {
    border-bottom: 1px solid var(--color-violet-18);
    interpolate-size: allow-keywords;

    &::details-content {
        block-size: 0;
        overflow:   hidden;
        transition: block-size var(--transition-slow), content-visibility var(--transition-slow) allow-discrete;
    }

    &[open]::details-content {
        block-size: auto;
    }
}

.faq__question {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-md);
    padding:         22px 0;
    font:            var(--text-20ob);
    color:           var(--color-snow);
    cursor:          pointer;
    list-style:      none;
    transition:      color var(--transition-base);

    &::-webkit-details-marker {
        display: none;
    }

    &:hover,
    .faq[open] & {
        color: var(--color-cyan);
    }
}

/* A pixel plus that becomes a minus */
.faq__icon {
    position: relative;
    flex:     none;
    width:    16px;
    height:   16px;

    &::before,
    &::after {
        content:    '';
        position:   absolute;
        background: var(--color-violet);
        box-shadow: 0 0 8px var(--color-violet);
        transition: transform var(--transition-base), background var(--transition-base);
    }

    &::before {   /* horizontal */
        inset: 6px 0;
    }

    &::after {    /* vertical */
        inset: 0 6px;
    }

    .faq[open] &::after {
        transform: scaleY(0);
    }

    .faq[open] &::before {
        background: var(--color-cyan);
        box-shadow: 0 0 8px var(--color-cyan);
    }
}

.faq__answer {
    padding: 0 var(--space-xl) var(--space-lg) 0;
}

@media (prefers-reduced-motion: reduce) {
    .faq::details-content {
        transition: none;
    }
}