/* FAQ hub, search and single-question pages. Builds on site.css and components.css. */

.faq-search { display: grid; gap: 0.5rem; width: min(100%, 40rem); margin-block: 1.5rem 1.25rem; }
.faq-search[hidden] { display: none; }
.faq-search__label { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.faq-search__input {
    width: 100%; padding: 1.05rem 1.3rem; font: inherit; font-size: 1.1rem; color: var(--ink);
    background: var(--card); border: 2px solid var(--line); border-radius: 999px;
    box-shadow: var(--shadow); transition: border-color 0.2s;
}
.faq-search__input::placeholder { color: var(--faint); }
.faq-search__input:hover { border-color: var(--faint); }
.faq-search__input:focus { border-color: var(--clay); outline: none; }
.faq-search__input:focus-visible { outline: 3px solid var(--clay-deep); outline-offset: 3px; }

.faq-results[hidden], #faqBrowse[hidden], .faq-results__empty[hidden] { display: none; }
.faq-results__list { display: grid; gap: 0.75rem; max-width: 50rem; margin-top: 1.25rem; }
.faq-results__item a {
    display: block; padding: 1.1rem 1.3rem; text-decoration: none; background: var(--card);
    border: 2px solid var(--line); border-radius: var(--radius-sm); transition: border-color 0.2s, transform 0.2s var(--ease);
}
.faq-results__item a:hover, .faq-results__item a:focus-visible { border-color: var(--clay); transform: translateY(-2px); }
.faq-results__title { display: block; font-weight: 700; }
.faq-results__meta { display: block; margin-top: 0.15rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay-deep); }
.faq-results__excerpt { display: block; margin-top: 0.4rem; color: var(--muted); font-size: 0.97rem; }
.faq-results__item mark { background: var(--clay-wash); color: inherit; border-radius: 3px; padding-inline: 0.1em; }
.faq-results__empty { max-width: 50rem; margin-top: 1.25rem; padding: 1.1rem 1.3rem; background: var(--clay-wash); border-radius: var(--radius-sm); }
.faq-results__empty a { color: var(--clay-deep); font-weight: 700; }

.faq-readmore { color: var(--clay-deep); font-weight: 700; }

.faq-all { max-width: 50rem; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius-sm); }
.faq-all[open] { border-color: var(--clay); }
.faq-all > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; font-weight: 700; cursor: pointer; list-style: none; }
.faq-all > summary::-webkit-details-marker { display: none; }
.faq-all > summary::after { content: ''; flex: 0 0 auto; width: 0.55rem; height: 0.55rem; margin-top: -0.25rem; border-right: 2.5px solid var(--clay-deep); border-bottom: 2.5px solid var(--clay-deep); transform: rotate(45deg); transition: transform 0.25s var(--ease), margin 0.25s var(--ease); }
.faq-all[open] > summary::after { margin-top: 0.25rem; transform: rotate(-135deg); }
.faq-links { display: grid; padding: 0 1.3rem 0.7rem; }
.faq-links li { border-top: 1px solid var(--line); }
.faq-links a { display: block; padding: 0.8rem 0; text-decoration: none; color: var(--ink-soft); }
.faq-links a:hover, .faq-links a:focus-visible { color: var(--clay-deep); text-decoration: underline; }

.qa__inner { max-width: 46rem; display: grid; gap: 1.1rem; }
.qa__inner p { color: var(--muted); }
.qa__inner .qa__note { padding: 0.8rem 1rem; font-size: 0.9rem; color: var(--muted); background: var(--paper-deep); border-radius: var(--radius-sm); }
.qa__crumbs { font-size: 0.9rem; font-weight: 600; color: var(--faint); }
.qa__crumbs a { color: var(--clay-deep); }
.qa__cta { display: grid; gap: 0.9rem; justify-items: start; margin-top: 0.8rem; padding: 1.5rem; background: var(--clay-wash); border-radius: var(--radius); }
.qa__cta p { color: var(--ink); }
.qa__back a { color: var(--clay-deep); font-weight: 700; }
.qa__related { width: min(100% - 2 * var(--gutter), 46rem); margin: 3rem auto 0; display: grid; gap: 0.75rem; }
.qa__related .faq-links { padding-inline: 0; }

@media (prefers-reduced-motion: reduce) {
    .faq-results__item a { transition: none; }
    .faq-results__item a:hover { transform: none; }
}