/* 411FCC Page-Specific Styles */

/* === Shared Section Containers === */
.home-section, .state-info, .city-info { margin: 30px 0 10px; padding: 0 }
.home-section h2, .state-info h2, .city-info h2 { font-size: 22px; color: #035492; margin: 25px 0 10px; border-bottom: 1px solid #eee; padding-bottom: 8px }
.home-section h3, .state-info h3, .city-info h3 { font-size: 18px; color: #333; margin: 20px 0 8px }
.home-section p, .state-info p, .city-info p { margin: 0 0 15px; font-size: 15px; line-height: 1.6 }

/* === Stat Cards === */
.home-stats, .state-stats, .city-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 15px 0 }
.home-stats .stat, .state-stats .stat, .city-stats .stat { flex: 1 1 140px; background: #f8f9fa; border-radius: 6px; padding: 15px; text-align: center }
.home-stats .stat-value, .state-stats .stat-value, .city-stats .stat-value { font-size: 24px; font-weight: 700; color: #035492; display: block }
.home-stats .stat-label, .state-stats .stat-label, .city-stats .stat-label { font-size: 13px; color: #666; display: block; margin-top: 4px }

/* Demographics grid (state + city pages) */
.demo-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 15px 0 }
.demo-grid .stat { flex: 1 1 140px; background: #f8f9fa; border-radius: 6px; padding: 15px; text-align: center }
.demo-grid .stat-value { font-size: 22px; font-weight: 700; color: #035492; display: block }
.demo-grid .stat-label { font-size: 12px; color: #666; display: block; margin-top: 4px }

/* === Carrier List (state + city) === */
.carrier-list { list-style: none; padding: 0; margin: 10px 0 }
.carrier-list li { display: inline-block; padding: 6px 14px; margin: 4px; background: #f0f4f8; border-radius: 4px; font-size: 14px }

/* === FAQ Section === */
.faq-section { margin: 25px 0 10px }
.faq-section h2 { font-size: 22px; color: #035492; margin: 25px 0 10px; border-bottom: 1px solid #eee; padding-bottom: 8px }
.faq-section h3 { font-size: 17px; color: #035492; margin: 22px 0 6px }
.faq-section p { margin: 0 0 18px; font-size: 15px; line-height: 1.6 }

/* === Form Responsive === */
@media (min-width:769px) {
  .page-template-landing-php .form-wrapper { display: flex; align-items: center }
  .page-template-landing-php .form-wrapper input { float: none; width: auto; flex: 1 1 auto; min-width: 0; box-sizing: border-box; height: 48px }
  .page-template-landing-php .form-wrapper button { float: none; flex: 0 0 110px }
}

/* === Home Page === */
.how-it-works { display: flex; flex-wrap: wrap; gap: 20px; margin: 15px 0 }
.how-it-works .step { flex: 1 1 180px; text-align: center; padding: 20px 10px }
.how-it-works .step-num { display: inline-block; width: 36px; height: 36px; line-height: 36px; border-radius: 50%; background: #035492; color: #fff; font-weight: 700; font-size: 18px; margin-bottom: 10px }
.how-it-works .step h4 { font-size: 16px; margin: 8px 0 4px }
.how-it-works .step p { font-size: 14px; margin: 0; color: #555 }

/* === State Page === */
.ac-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; list-style: none; padding: 0 }
.ac-grid li { display: inline-block; background: #f0f4f8; border-radius: 4px; padding: 8px 14px; font-size: 14px }
.ac-grid li strong { color: #035492 }
.ac-grid li span { color: #666; font-size: 12px }
.growth-pos { color: #28a745 }
.growth-neg { color: #dc3545 }

/* === City Page === */
.nearby-list { list-style: none; padding: 0; margin: 10px 0 }
.nearby-list li { display: inline-block }
.nearby-list li a { display: inline-block; padding: 6px 12px; font-size: 14px }
.race-bar { display: flex; height: 20px; border-radius: 10px; overflow: hidden; margin: 10px 0 }
.race-bar div { height: 100% }
.race-legend { list-style: none; padding: 0; margin: 8px 0; font-size: 13px }
.race-legend li { display: inline-block; margin-right: 14px; padding: 0 }
.race-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle }

/* === About Page === */
.about-content h2 { font-size: 20px; margin: 30px 0 10px; color: #035492 }
.about-content p { margin-bottom: 15px }
.about-content ul { margin: 10px 0 10px 20px }
.about-content ul li { list-style-type: disc; margin-bottom: 8px }

/* === Responsive === */
@media (max-width:768px) {
  .home-stats .stat, .state-stats .stat, .city-stats .stat, .demo-grid .stat { flex: 1 1 calc(50% - 8px) }
  .how-it-works .step { flex: 1 1 100% }
}