/*** FAQ page (faq.html / en/faq.html): dedicated layout on top of fred.css ***/

/* Page title ("Foire Aux Questions" / its English equivalent) */
body.faq h3.faq-title {
    font-family: var(--font-content);
    font-size: 1.8rem;
    text-align: center;
    margin: 0 0 24px 0;
}

/* Second-level section heading ("Quelques repères...") */
body.faq h3:not(.faq-title) {
    font-family: var(--font-content);
    font-size: 1.2rem;
    color: var(--accent);
    margin-top: 8px;
}

/* Questions: bigger and set apart from their answers */
body.faq h4 {
    font-family: var(--font-content);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent);
    margin: 32px 0 8px 0;
    scroll-margin-top: 16px;
}

body.faq section.content p {
    line-height: 1.6;
}

/* Table of contents */
body.faq .faq-toc {
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 16px 24px;
    margin: 0 0 36px 0;
}

body.faq .faq-toc-heading {
    font-family: var(--font-content);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    margin: 16px 0 8px 0;
}

body.faq .faq-toc-heading:first-child {
    margin-top: 0;
}

body.faq .faq-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 32px;
}

body.faq .faq-toc li {
    margin-bottom: 6px;
    break-inside: avoid;
}

body.faq .faq-toc a {
    font-family: var(--font-content);
    font-size: 0.88rem;
    color: inherit;
    text-decoration: none;
}

body.faq .faq-toc a:hover {
    color: var(--accent);
    text-decoration: underline;
}

@media (max-width: 700px) {
    body.faq .faq-toc ul {
        columns: 1;
    }
}