/* ================================================================== */
/*  Resources pages — Help Center & Technical Documents               */
/*  Two patterns added on top of the about-page styling:              */
/*    .faq-list   — semantic <details> accordion (no JS required)     */
/*    .doc-list   — vertical document rows with PDF tag + request CTA */
/* ================================================================== */

/* ---------- FAQ accordion ---------- */

.faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}
.faq-list > li {
    border-bottom: 1px solid var(--border);
}

.faq-item {
    /* Reset native <details> styling */
    padding: 0;
}
.faq-item[open] .faq-item__q::after {
    transform: rotate(45deg);
}

.faq-item__q {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    margin: 0;
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--text);
    transition: color var(--dur-fast) var(--ease-out);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: var(--brand); }
.faq-item__q:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
    border-radius: var(--radius-xs);
}

/* Plus / × indicator (CSS-only, rotates on open) */
.faq-item__q::after {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background:
        linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
    color: var(--text-muted);
    transition: transform var(--dur-med) var(--ease-out);
}

.faq-item__a {
    padding: 0 0 22px;
    font-size: var(--fs-body);
    line-height: var(--lh-loose);
    color: var(--text-muted);
}
.faq-item__a a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.faq-item__a a:hover { text-decoration-thickness: 2px; }

/* Topic headings between the grouped FAQ lists (build.js helpFaqDict). */
.faq-group__title {
    margin: 48px 0 8px;
    font-size: 13px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
}
.faq-group__title:first-of-type { margin-top: 8px; }
.help-updated { margin-top: 12px; font-size: 14px; opacity: 0.8; }

/* ---------- Document list ---------- */

.doc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}

.doc-item {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 16px;
    /* Inline padding + negative margin: the row's hit/visual area extends
       slightly beyond its content on both sides, so hover/focus indicators
       have breathing room around the PDF box and the link button — but the
       row content stays aligned with the surrounding section headings. */
    padding: 18px 12px;
    margin-inline: -12px;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
/* Subtle row hover so the user sees the whole line is clickable. */
.doc-item:hover { background: var(--surface); }
/* When the (visually-hidden) inner link receives keyboard focus, outline the
   row instead — keeps Tab navigation accessible. */
.doc-item:focus-within {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}
@media (max-width: 600px) {
    .doc-item {
        grid-template-columns: 36px 1fr;
        gap: 12px;
    }
    .doc-item__link {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

.doc-item__type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--brand);
    border-radius: var(--radius-base);
    background: var(--bg-elevated);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--brand);
}
@media (max-width: 600px) {
    .doc-item__type { width: 36px; height: 36px; font-size: 9px; }
}

.doc-item__body { min-width: 0; }
.doc-item__title {
    margin: 0 0 4px;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--text);
}
/* Inline pilot-access tag next to a document title — small amber badge */
.doc-item__pilot {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    background: var(--accent-amber);
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    line-height: 1;
    border-radius: var(--radius-2xs);
    vertical-align: middle;
}
[dir="rtl"] .doc-item__pilot {
    margin-left: 0;
    margin-right: 8px;
}
.doc-item__meta {
    margin: 0;
    font-size: var(--fs-caption);
    color: var(--text-subtle);
    letter-spacing: var(--ls-tight);
}

/* Link is kept in the grid (so its ::before resolves to the row) but visually
   empty — the whole row acts as the affordance, with cursor:pointer + the
   row-hover background providing the visual cue. Screen readers still see
   the link text ("Download" / "Request"). */
.doc-item__link {
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
}
/* Block-link pattern — the link's ::before pseudo-element expands to cover
   the entire .doc-item row (the nearest positioned ancestor), so clicking
   anywhere on the row triggers the link. */
.doc-item__link::before {
    content: "";
    position: absolute;
    inset: 0;
}