/*
 * Frequently asked questions.
 *
 * The markup is a plain <section> of <details> elements, server rendered, so it
 * works with scripting off and the answers are in the page for anything that
 * reads the text. Unstyled it is five disclosure triangles stacked with nothing
 * between them, which reads as a list of links rather than as answers, so it
 * gets a card per question and a divider that opens up when the answer does.
 *
 * Colours come from the existing --sk-* tokens, so this follows dark mode and
 * the accent picker instead of carrying its own scheme. The fallbacks cover a
 * page where color-scheme.css has not loaded.
 *
 * Scoped to .sk-faq, which only the generated sections carry. The alphabetical
 * order tool has hand-written <details> in its post content that are styled
 * elsewhere and must not be caught by this.
 */

/*
 * The tokens this file uses are not defined globally.
 *
 * color-scheme.css declares --sk-ink, --sk-muted, --sk-line and --sk-soft only
 * for .sk-home-page, .sk-services-page and body.home .entry-content. A tool
 * page is none of those, so on a tool page every var() below fell through to the
 * light-mode fallback in dark mode as well, which put a near-white card with
 * near-black text on a dark page.
 *
 * Declared here, scoped to this component, so the values apply without changing
 * what any other rule on the page resolves. They are the same values
 * color-scheme.css uses, and duplicating them here is a known debt: the right
 * fix is to hoist this set to html[data-sk-scheme="dark"] once, but that widens
 * the blast radius to every rule that reads these names, which is a separate
 * change with its own regression pass.
 */
html[data-sk-scheme="dark"] .sk-faq {
    --sk-ink: #e6e2ee;
    --sk-muted: #a79fba;
    --sk-line: #38314a;
    --sk-soft: #221d2e;
}

.sk-faq {
    margin: 2.4rem 0 0;
}

.sk-faq > h2 {
    margin: 0 0 1rem;
}

/*
 * A card, not a bare disclosure. The border is what makes the group read as one
 * block of questions instead of five loose lines, and it gives the open state
 * somewhere to change.
 */
.sk-faq-item {
    margin: 0 0 0.6rem;
    border: 1px solid var(--sk-line, #e3e1e8);
    border-radius: 10px;
    background: var(--sk-soft, #fbfafc);
    overflow: hidden;
}

.sk-faq-item > summary {
    padding: 0.85rem 1rem;
    font-weight: 600;
    color: var(--sk-ink, #1f2937);
    cursor: pointer;
    list-style: none;
    /* Leaves room for the marker drawn below. */
    padding-right: 2.4rem;
    position: relative;
    transition: background-color 120ms ease;
}

.sk-faq-item > summary:hover {
    background: var(--sk-pick-soft, rgba(104, 67, 139, 0.06));
}

.sk-faq-item > summary:focus-visible {
    outline: 2px solid var(--sk-accent, #7c3f91);
    outline-offset: -2px;
    border-radius: 10px;
}

/* The native marker is suppressed above, so one is drawn here to keep the
   control obviously expandable. A chevron rather than the platform triangle,
   because it can be rotated on the open state. */
.sk-faq-item > summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.35rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
    transition: transform 140ms ease;
}

.sk-faq-item[open] > summary::after {
    /* Pointing up once the answer is showing. */
    transform: rotate(-135deg);
    margin-top: -0.15rem;
}

/* The open card is the one that needs to be findable in a long page. */
.sk-faq-item[open] {
    border-color: var(--sk-pick-line, rgba(104, 67, 139, 0.34));
}

.sk-faq-item > p {
    margin: 0;
    padding: 0 1rem 1rem;
    color: var(--sk-ink, #1f2937);
}

/* The answer is the useful part, so it is not held to a narrow measure. */
@media (prefers-reduced-motion: reduce) {
    .sk-faq-item > summary,
    .sk-faq-item > summary::after {
        transition: none;
    }
}