/* ==========================================================================
   Page: FAQ  (site/faq/index)
   --------------------------------------------------------------------------
   .faq          two columns: the questions · a sticky side (arch window + help)
   .faq__search  pill search box
   .faq-item     <details> card: ringed number, question, +/– toggle; the
                 open card gets its accent edge and the answer slides in
   ========================================================================== */

.faq { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-12); align-items: start; }
.faq__list { display: grid; gap: var(--space-3); }
.faq__empty { padding: var(--space-8); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--ink-soft); text-align: center; }

.faq__search {
    display: flex; align-items: center; gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: 0 var(--space-5);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--card);
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.faq__search:focus-within { border-color: var(--second-strong); box-shadow: 0 0 0 3px var(--second-tint-strong); }
.faq__search .icon { flex-shrink: 0; color: var(--ink-faint); }
.faq__search input { flex: 1; width: 100%; min-width: 0; min-height: 52px; border: 0; background: none; font-size: var(--fs-base); outline: none; }

.faq-item {
    border: 1px solid var(--line);
    border-inline-start: 4px solid transparent;
    border-radius: var(--r-lg);
    background: var(--card);
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.faq-item[open] { border-inline-start-color: var(--accent); box-shadow: 0 24px 50px -40px rgb(0 0 0 / 0.45); }
.faq-item__q {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    list-style: none;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__num {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--card), 0 0 0 5.5px color-mix(in srgb, var(--accent) 45%, transparent);
    font-size: var(--fs-sm); font-weight: 600;
}
.faq-item__text { flex: 1; font-size: var(--fs-lg); font-weight: 500; line-height: 1.6; }
.faq-item__toggle { position: relative; flex-shrink: 0; width: 18px; height: 18px; }
.faq-item__toggle::before, .faq-item__toggle::after {
    content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; background: var(--ink);
    transition: transform var(--dur) var(--ease-out);
}
.faq-item__toggle::after { transform: rotate(90deg); }
.faq-item[open] .faq-item__toggle::after { transform: rotate(0deg); }
.faq-item__a { padding: 0 var(--space-6) var(--space-6) calc(var(--space-6) + 42px + var(--space-4)); color: var(--ink-soft); line-height: 1.95; }
.faq-item[open] .faq-item__a { animation: faq-open 0.35s var(--ease-out); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }

.faq__side { position: sticky; top: calc(var(--header-h) + var(--space-6)); display: grid; gap: var(--space-6); }
.faq__side .window { width: min(100%, 280px); margin-inline: auto; }
.faq__help { padding: var(--space-6); border-radius: var(--r-lg); background: var(--panel); }
.faq__help-title { font-size: var(--fs-xl); }
.faq__help p { margin: var(--space-2) 0 var(--space-5); color: var(--ink-soft); }
.faq__help-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (max-width: 991.98px) {
    .faq { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
    .faq__side { position: static; grid-template-columns: 160px 1fr; align-items: center; }
    .faq__side .window { width: 100%; }
}
@media (max-width: 575.98px) {
    .faq-item__q { padding: var(--space-4); gap: var(--space-3); }
    .faq-item__num { width: 34px; height: 34px; }
    .faq-item__text { font-size: var(--fs-base); }
    .faq-item__a { padding: 0 var(--space-4) var(--space-5); }
    .faq__side { grid-template-columns: 1fr; }
    .faq__side .window { width: 200px; }
}
@media (prefers-reduced-motion: reduce) { .faq-item[open] .faq-item__a { animation: none; } }