/*
 * Page-specific styles for the FAQ page (page-faq.php).
 * Shared classes (.eyebrow, .faq-section/.faq-item/.faq-question/.faq-answer
 * equivalents, .wave-divider, .hero-nav-offset) already live in global.css.
 * This page reuses the same .faq-item/.faq-question/.faq-answer markup and
 * CSS as the homepage/IMM/membership FAQ sections, just in a category
 * layout instead of a single flat list.
 */

.faq-page-hero { background-color: var(--light-green-bg); padding-right: 24px; padding-bottom: 120px; padding-left: 24px; text-align: center; }
.faq-page-hero-inner { max-width: 640px; margin: 0 auto; }
.faq-page-hero h1 { color: var(--text-primary); margin-bottom: var(--spacing-lg); }
.faq-page-hero-sub { font-size: 17px; color: var(--text-primary); line-height: 1.6; opacity: 0.8; }
@media (max-width: 899px) { .faq-page-hero { padding-right: 24px; padding-bottom: 100px; padding-left: 24px; } }
@media (max-width: 550px) { .faq-page-hero { padding-right: 20px; padding-bottom: 80px; padding-left: 20px; } .faq-page-hero-inner { padding-top: 40px; } .faq-page-hero h1 { font-size: 28px; } .faq-page-hero-sub { font-size: 15px; } }

.faq-page-body { background-color: var(--white); padding: 90px 0 140px; }
.faq-page-container { max-width: 720px; margin: 0 auto; padding: 0 24px; }

.faq-category { margin-bottom: 64px; }
.faq-category:last-child { margin-bottom: 0; }
.faq-category-heading { font-family: var(--font-heading); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--primary-green); margin-bottom: var(--spacing-lg); }

@media (max-width: 899px) { .faq-page-body { padding: 70px 0 110px; } .faq-category { margin-bottom: 52px; } }
@media (max-width: 550px) { .faq-page-body { padding: 56px 0 80px; } .faq-category { margin-bottom: 44px; } }