/* ─────────────────────────────────────────────────────────────────────────
   PSC Connect — FAQ accordion.

   Built on native <details>/<summary> so it needs no JS at all (the legacy
   page relied on a Stimulus controller + its own Encore stylesheet).
   ───────────────────────────────────────────────────────────────────────── */

.faq-item { border-bottom: 1px solid var(--outline); }
.faq-item:last-child { border-bottom: none; }

.faq-item > summary {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 1.1rem 1.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--primary);
    transition: background 0.2s;
    list-style: none;
}
/* Hide the default disclosure marker in both engines */
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ''; }

.faq-item > summary:hover { background: var(--surface-low); }
.faq-item > summary:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: -2px;
}

.faq-caret {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--secondary);
    transition: transform 0.2s;
}
.faq-item[open] > summary .faq-caret { transform: rotate(90deg); }

.faq-answer {
    padding: 0 1.75rem 1.4rem 3.4rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--on-surface-variant);
}
.faq-answer > :last-child { margin-bottom: 0; }
.faq-answer a { color: var(--secondary); }

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