/* ==========================================================================
   Genre Guide + Licensing FAQ
   Editorial sections rendered by includes/genre-guide.php. Scoped to
   .genre-guide / .genre-faq so they cannot affect any other page.
   Follows the existing brand tokens (--primary-color, --secondary-color,
   --text-muted, --border-color) so the pages stay visually consistent.
   ========================================================================== */

.genre-guide,
.genre-faq {
    padding: 72px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.guide-subheading {
    font-family: 'Cambria', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 14px;
}

.guide-intro {
    font-size: 1.12rem;
    line-height: 1.75;
    color: #333;
    margin-bottom: 20px;
}

.genre-guide-body p {
    font-size: 1rem;
    line-height: 1.85;
    color: #444;
    margin-bottom: 18px;
    max-width: 72ch;
}

.guide-split {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 32px;
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}

.guide-notes .guide-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guide-notes .guide-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.98rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 11px;
}

.guide-notes .guide-list li i {
    color: var(--secondary-color);
    margin-top: 5px;
    flex-shrink: 0;
}

.guide-use p {
    font-size: 0.98rem;
    line-height: 1.75;
    color: #444;
}

.guide-count {
    color: var(--text-muted);
    font-size: 0.92rem;
}

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

.faq-item {
    padding: 22px 0;
    border-bottom: 1px solid var(--border-color);
}

.faq-item:first-of-type {
    border-top: 1px solid var(--border-color);
}

.faq-question {
    font-family: 'Cambria', Georgia, serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 10px;
}

.faq-answer {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
    margin: 0;
    max-width: 78ch;
}

.faq-more {
    margin-top: 26px;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.faq-more a {
    color: var(--primary-color);
    font-weight: 500;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 768px) {
    .genre-guide,
    .genre-faq {
        padding: 52px 18px;
    }

    .guide-split {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .guide-intro {
        font-size: 1.05rem;
    }
}