/* ─────────────────────────────────────────────────────────────────────────────
   faq.css: as perguntas frequentes do site público, em acordeão
   ─────────────────────────────────────────────────────────────────────────────
   Um `<details>` por pergunta dentro de `.site-faq`: a pergunta no `<summary>`,
   com o «+» que roda para «×» quando abre, e a resposta num `<p>`. O texto está
   todo no HTML desde o início, aberto ou fechado, e o Google e as ferramentas de
   resposta leem-no inteiro.

   DE ONDE VEIO. Era o `.mob-faq` da Mobilidade (pages/mobility.css). Passou a
   componente a 2026-11-01, quando as páginas de modelo ganharam as suas
   perguntas: duas maneiras de desenhar a mesma coisa é um defeito. A grelha da
   secção (título à esquerda no ecrã largo) continua de cada página.

   Lê os tokens do site (`default/tokens.css`). Mobile first: não há media
   queries, a lista é a mesma em qualquer largura.
   ─────────────────────────────────────────────────────────────────────────── */
.site-faq details:first-child { border-top: 1px solid var(--site-ink); }
.site-faq details { border-bottom: 1px solid var(--site-line); }
.site-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; font-size: 17px; font-weight: 500; cursor: pointer; list-style: none; }
.site-faq summary::-webkit-details-marker { display: none; }
.site-faq summary::after { content: "+"; font-size: 22px; font-weight: 300; transition: transform .3s var(--site-ease); }
.site-faq details[open] summary::after { transform: rotate(45deg); }
.site-faq summary:focus-visible { outline: 2px solid var(--site-ink); outline-offset: 2px; }
.site-faq p { padding: 0 0 24px; font-size: 15px; line-height: 1.65; color: var(--site-ink-2); max-width: 68ch; }

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