/* ==========================================================================
   tsiwp.com : FAQ
   Collapsible questions built on <details>, so the toggle is the browser's
   and the page still ships no JavaScript.
   ========================================================================== */

.faq-list {
    width: min(760px, 100%);
    display: flex;
    flex-direction: column;
    gap: clamp(0.7rem, 2vw, 1rem);
}

/* Each question is its own panel rather than a row inside one big panel. A
   stack of outlined boxes reads as a stack of things to open, which is what
   they are, and it echoes the button stack elsewhere on the site. */
.faq-item {
    border: var(--line) solid var(--ink-white);
    border-radius: calc(var(--radius) + 6px);
    background: var(--surface-dark);
    color: var(--ink-white);
    font-family: 'Comic Neue', system-ui, sans-serif;
    font-weight: 700;
}

/*
   list-style: none removes the disclosure triangle in every current browser;
   the -webkit- pseudo-element is the old Safari spelling and costs one line to
   keep. Without both, the browser's own marker sits next to ours.
*/
.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: clamp(0.9rem, 2.4vw, 1.3rem) clamp(1.1rem, 3vw, 1.7rem);
    /* Same ramp as .panel, so question, answer and intro are all one size. */
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }

/*
   The marker is drawn, not borrowed: a + that becomes the same x used by the
   close control, so opening and closing a question uses the site's own two
   symbols rather than a triangle from somewhere else. margin-left:auto pins it
   right regardless of how long the question runs.
*/
.faq-item summary::after {
    content: '+';
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 1.4em;
    line-height: 1;
}
.faq-item[open] summary::after { content: '\00D7'; }

.faq-item summary:hover,
.faq-item summary:focus-visible {
    outline: none;
    background: var(--accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/*
   scroll-margin so a fragment jump does not park the answer against the top of
   the viewport with its own question scrolled off above it. The id is on this
   element rather than on the summary because browsers expand the ancestor
   details of a fragment target, and a summary is never hidden, so targeting one
   would scroll without opening anything.
*/
.faq-item__body { scroll-margin-top: 6rem; }

.faq-item__body {
    padding: 0 clamp(1.1rem, 3vw, 1.7rem) clamp(1.1rem, 3vw, 1.6rem);
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    line-height: 1.5;
    text-align: left;
}
.faq-item__body p { margin: 0 0 1em; }
.faq-item__body p:last-child { margin-bottom: 0; }
.faq-item__body a { color: var(--ink-white); text-decoration: underline; }
/*
   Sub-headings inside an answer carry the brand gradient, the same treatment
   as .accent-text on the intro. Uppercased in CSS rather than in the markup,
   like .btn__label, so the heading text stays readable as sentence case in the
   source and in anything that reads the page without the stylesheet.
*/
.faq-item__body h3 {
    font-size: 1em;
    margin: 1.4em 0 0.4em;
    text-transform: uppercase;
    background: var(--accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.faq-item__body h3:first-child { margin-top: 0; }