/* faq-info.css — Frequently Asked Questions (/Faq), the reader's view.
   Only what this page introduces; .gp-split-*, .gp-card-*, .info-notice and .error-panel are global. */

.faq-info-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/* Left panel rows. THE FONT IS STATED TWICE ON PURPOSE: a <button> inherits neither the page's
   family nor its size, so `font: inherit` fixes the typeface and the explicit size stops it
   resolving to body's 1rem, a quarter larger than every other panel in the portal (UI/Layout.md).
   No transparent left border — .gp-split-left-row draws its accent with an inset box-shadow, which
   takes no layout space. */
.faq-info-row {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 0.781rem;
    padding: 0.438rem 0.875rem 0.438rem 1.625rem;
    border: none;
    border-bottom: 1px solid var(--line-soft);
    background: none;
    color: inherit;
    cursor: pointer;
}

.faq-info-row:last-child {
    border-bottom: none;
}

/* THE PANEL NEEDS ITS OWN [hidden] RULE. The attribute hides through the USER-AGENT stylesheet's
   [hidden] { display: none }, and any AUTHOR display declaration outranks it. This is the fourth
   time that trap has been hit in this project (.nav-notif-badge, .gp-notice-dismissible, the Team
   Info tabs) — the panel is display: block today and would still be safe, but stating the rule is
   what stops a later `display:` on this class silently un-hiding every topic at once. */
.faq-info-panel[hidden] {
    display: none;
}

/* One question-and-answer block. Separated by a rule rather than a card each — a topic is read
   top to bottom, and a card per question would break it into unrelated boxes. */
.faq-info-pair + .faq-info-pair {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-soft);
}

/* The question is tinted blue to separate it from its answer at a glance.
   var(--info) (#7aaeff) is the palette's LIGHT blue — the one the portal already uses for blue text
   (.gp-kv-label's label colour, .signups-col-pending). NOT var(--accent) (#2b5fc4): that is the
   saturated accent meant for borders, fills and glows, and as text on a dark card it is too dark to
   read. Referenced as the token rather than the hex, which .gp-kv-label hardcodes. */
.faq-info-question {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--info);
    margin: 0 0 0.5rem;
}

/* The answer's own formatting comes from rich-text.css, which styles the ql- classes
   DeltaRenderer emits. Nothing here restates it. */
/* NO font-size here — .gp-richtext owns it now (rich-text.css, the type standard). This carried
   0.813rem, which is why the FAQ answer read smaller than the same content on a blog post or a team
   document. Colour is still the page's to set. */
.faq-info-answer {
    color: var(--ink-2);
}