/* ============================================================
   FLAG-CODE-FAQ.CSS — Tattered Flag Foundation
   Page-specific styles for flag-code-faq.html.
   Link after flag-code-shared.css, before nav.css/footer.css.
   ============================================================ */

/* ===============================
   No-image layout
   This page has no images, so every section is a single column
   holding only the text. These rules load after the shared file
   and match its specificity, so they win at every screen width
   (including the <1024px stacked layout) without media queries.
   =============================== */
#second-section,
#third-section {
    grid-template-columns: 1fr;
    grid-template-areas: "text";
    row-gap: 0;
}

/* Readable line length — adjust 70ch to taste.
   Centered in the section; on narrow screens the cap has no effect. */
.second-text-container,
.third-text-container,
.eighth-text-title,
.eighth-quick-ref-list {
    max-width: 77ch;
    margin-inline: auto;
}

.myth-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.myth-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.myth-label {
    font-weight: 700;
    color: var(--clr-neutral-800);
    margin-bottom: 0.4rem;
}

.truth-label {
    line-height: 1.5;
}

.myth-item.disputed .myth-label {
    color: var(--clr-yellow-dark);
    font-style: italic;
}

.third-text a {
    color: var(--clr-blue-dark);
    font-weight: 900;
    text-decoration: underline;
}