/*
 * FAQ: questions and answers as native disclosure (<details>/<summary>).
 *
 * The browser does the work: <summary> is the control, announced as a button
 * with its expanded state and operated with Enter or Space; name="faq" keeps
 * one answer open at a time, without script (older browsers simply allow
 * several). No ARIA is added - it would not track the state. This file only
 * sets the look: a list of rows divided by rules, the question in ink with a
 * chevron that turns when open, the answer as prose. Decision 19.
 */

.faq {
    border-block-start: 1px solid var(--shop-border);
}

.faq__item {
    border-block-end: 1px solid var(--shop-border);
}

/* The whole row is the target: at least 48px, the question left, the chevron
   right. list-style and the marker go, so the chevron is the only indicator
   and the text is not preceded by a triangle. */
.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--shop-space-4);
    min-height: 48px;
    padding: var(--shop-space-3) 0;
    color: var(--shop-ink);
    font-family: var(--shop-font);
    font-size: var(--shop-text-base);
    font-weight: var(--shop-weight-semibold);
    line-height: var(--shop-leading-snug);
    list-style: none;
    cursor: pointer;
}

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

.faq__question:hover {
    color: var(--shop-accent);
}

.faq__question:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--shop-accent);
    outline-offset: 2px;
}

.faq__chevron {
    flex: none;
    width: var(--shop-icon-xs);
    height: var(--shop-icon-xs);
    color: var(--shop-text-soft);
    transition: rotate var(--shop-duration) var(--shop-ease);
}

.faq__item[open] .faq__chevron {
    rotate: 180deg;
    color: var(--shop-accent);
}

.faq__answer {
    padding-block-end: var(--shop-space-4);
}

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

/* A printed page shows every answer, not only the open one. Current browsers
   hide a closed <details>'s content through ::details-content, so that is what
   has to be shown; it is a rule of its own, as a browser that does not know the
   pseudo-element would drop a whole selector list containing it. */
@media print {
    .faq__item::details-content {
        content-visibility: visible;
    }

    .faq__item:not([open]) > .faq__answer {
        display: block;
    }

    .faq__chevron {
        display: none;
    }
}