/* ==========================================================================
   FAQ panel — homepage, category pages and the game-filter pages
   --------------------------------------------------------------------------
   The visible FAQ used to be an inline-styled box: a 1.5rem cyan Orbitron
   heading, then <details> rows with a hairline under each. Same content,
   re-cut as the panel the server page already uses (.sd-faq): a kicker-sized
   heading in the panel head, "+"/"−" markers, and answers indented under
   their question. The H2 keeps the game name for search engines; it is
   small on purpose, the questions are the reading matter.
   ========================================================================== */

.faq {
    margin: 26px 0 0;
    background: rgba(10, 10, 15, 0.9);
    border: 1px solid rgba(0, 255, 255, 0.16);
    font-family: var(--font-family, 'Rajdhani', sans-serif);
}
.faq-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.12);
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7c8594;
}
.faq-h i { color: var(--primary-color, #00ffff); font-size: .74rem; opacity: .85; }
.faq-h b { color: #cfd3dc; font-weight: 700; }
.faq details { border-top: 1px solid rgba(0, 255, 255, 0.07); }
.faq .faq-h + details { border-top: 0; }
.faq summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: .98rem;
    line-height: 1.35;
    color: #e6e9ef;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
    content: "+";
    flex: none;
    width: 16px;
    text-align: center;
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    color: var(--primary-color, #00ffff);
}
.faq details[open] summary::before { content: "\2212"; }
.faq summary:hover { background: rgba(0, 255, 255, 0.03); }
.faq p { margin: 0; padding: 0 16px 14px 44px; color: #b8bcc8; font-size: .93rem; line-height: 1.6; }
.faq p a { color: var(--primary-color, #00ffff); }
.faq p a:hover { text-decoration: underline; }

/* Body used by the related-games variant: a lede and a row of chips */
.faq-b { padding: 14px 16px; }
.faq-lede { margin: 0 0 12px; padding: 0; color: #aab0bd; font-size: .92rem; line-height: 1.55; }
.faq--related .ph-chips a { text-transform: none; }

@media (max-width: 640px) {
    .faq-h { padding: 10px 12px; }
    .faq summary { padding: 10px 12px; font-size: .95rem; }
    .faq p { padding: 0 12px 12px 40px; }
}