/**
 * FAQ accordion.
 *
 * Every value a theme is likely to want to change is a --cms-faq-* custom
 * property, set on .cms-faq or any ancestor. The defaults are deliberately
 * plain: this ships with the site, so it must not fight a theme that has its
 * own opinions about colour and shape.
 *
 * Nothing here hides an answer except the <details> element's own closed
 * state. There is no rule that depends on the script having run, because there
 * is no state this stylesheet has to wait for: with faq.js missing, every
 * question still opens on click.
 */

.cms-faq {
    --cms-faq-max-width: 48rem;
    --cms-faq-gap: 0.25rem;

    --cms-faq-question-padding: 0.875rem 2rem 0.875rem 0;
    --cms-faq-question-size: 1rem;
    --cms-faq-question-weight: 600;

    --cms-faq-answer-padding: 0 0 1rem 0;

    --cms-faq-rule: 1px solid rgba(0, 0, 0, 0.12);
    --cms-faq-marker-size: 0.7em;

    --cms-faq-search-gap: 0.5rem;
    --cms-faq-search-padding: 0.6rem 0.75rem;
    --cms-faq-search-radius: 0.375rem;
    --cms-faq-search-border: 1px solid rgba(0, 0, 0, 0.2);

    max-width: var(--cms-faq-max-width);
}

/* ---------------------------------------------------------------- search */

.cms-faq__search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cms-faq-search-gap);
    margin-block-end: 1.5rem;
}

.cms-faq__search-label {
    flex-basis: 100%;
}

.cms-faq__search-input {
    flex: 1 1 12rem;
    padding: var(--cms-faq-search-padding);
    border: var(--cms-faq-search-border);
    border-radius: var(--cms-faq-search-radius);
    font: inherit;
}

.cms-faq__search-submit {
    padding: var(--cms-faq-search-padding);
    border-radius: var(--cms-faq-search-radius);
    font: inherit;
    cursor: pointer;
}

.cms-faq__result-count {
    margin-block-end: 1rem;
}

/* -------------------------------------------------------------- questions */

.cms-faq__category + .cms-faq__category {
    margin-block-start: 2.5rem;
}

.cms-faq__category-link {
    color: inherit;
    text-decoration: none;
}

.cms-faq__item {
    border-block-end: var(--cms-faq-rule);
}

.cms-faq__item + .cms-faq__item {
    margin-block-start: var(--cms-faq-gap);
}

.cms-faq__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--cms-faq-question-padding);
    cursor: pointer;

    /* The default triangle is replaced below with one that can be positioned
       and rotated; ::marker sizing is not reliable across browsers. */
    list-style: none;
}

.cms-faq__summary::-webkit-details-marker {
    display: none;
}

.cms-faq__summary::after {
    content: '';
    flex: none;
    width: var(--cms-faq-marker-size);
    height: var(--cms-faq-marker-size);
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg) translate(-0.15em, -0.15em);
    transition: transform 150ms ease;
}

.cms-faq__item[open] > .cms-faq__summary::after {
    transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

/* The heading carries the anchor, so it must be able to receive focus styling
   and scroll-margin without the theme having to know it is inside a summary. */
.cms-faq__question {
    margin: 0;
    font-size: var(--cms-faq-question-size);
    font-weight: var(--cms-faq-question-weight);
    scroll-margin-block-start: 5rem;
}

.cms-faq__answer {
    padding: var(--cms-faq-answer-padding);
}

.cms-faq__answer > :first-child {
    margin-block-start: 0;
}

.cms-faq__answer > :last-child {
    margin-block-end: 0;
}

.cms-faq__result-category {
    flex: none;
    font-size: 0.8em;
    opacity: 0.7;
}

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