/* ============================================
   PUBLIC-RESPONSIVE.CSS
   Mobile-first responsive overrides for public pages
   Loaded AFTER inline styles to take precedence
   ============================================ */

/* ── Fix navbar overflow on small screens ── */
@media (max-width: 767px) {
    .navbar { height: auto !important; min-height: 64px; padding: 0.5rem 0 !important; }
    .navbar .container { flex-wrap: wrap !important; gap: 0.5rem; }
    .navbar-actions { flex-wrap: wrap !important; justify-content: flex-end !important; gap: 6px !important; }
    .navbar-brand { font-size: 0.95rem !important; }
    .navbar-brand i { font-size: 1.1rem !important; }
    .navbar-brand span { font-size: 0.82rem !important; }
}

@media (max-width: 480px) {
    .navbar-actions { gap: 4px !important; }
    .navbar-brand span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block !important; }
    .nav-link-signin { padding: 8px 10px !important; font-size: 0.78rem !important; }
    .nav-link-enroll { padding: 8px 12px !important; font-size: 0.75rem !important; min-width: 0 !important; }
    .nav-link-signin span { display: none !important; }
}

@media (max-width: 380px) {
    .navbar-actions { gap: 3px !important; }
    .nav-link-signin { padding: 6px 8px !important; }
    .nav-link-enroll { padding: 6px 10px !important; font-size: 0.7rem !important; }
}

/* ── Hero / Brand Section ── */
@media (max-width: 767px) {
    .brand-hero { padding: 4rem 1rem 3rem !important; }
    .brand-hero .logo-frame { width: 160px !important; height: 160px !important; border-radius: 28px !important; }
    .brand-hero .logo-display { width: 130px !important; height: 130px !important; }
    .brand-hero h1 { font-size: 2rem !important; }
    .brand-hero .tagline { font-size: 0.9rem !important; }
    .brand-hero .badge-desc { font-size: 0.85rem !important; }
    .brand-hero .trust-row { flex-direction: column !important; gap: 0.5rem !important; }
    .brand-hero .trust-item { font-size: 0.82rem !important; }
    .brand-hero .divider-line { margin: 1.25rem auto !important; }
    .hero { padding-top: 3rem !important; }
    .hero h1.hero-title { font-size: 1.8rem !important; }
    .hero .hero-subtitle { font-size: 0.95rem !important; }
    .hero .cta-buttons { flex-direction: column !important; gap: 0.75rem !important; align-items: stretch !important; }
    .hero .cta-buttons a { text-align: center !important; justify-content: center !important; }
    .stats-counter { gap: 1.5rem !important; }
    .stat-number { font-size: 1.6rem !important; }
    .stat-label { font-size: 0.78rem !important; }
}

@media (max-width: 480px) {
    .brand-hero { padding: 3rem 0.75rem 2rem !important; }
    .brand-hero .logo-frame { width: 120px !important; height: 120px !important; border-radius: 20px !important; padding: 12px !important; }
    .brand-hero .logo-display { width: 96px !important; height: 96px !important; }
    .brand-hero h1 { font-size: 1.5rem !important; }
    .brand-hero .accent-badge { font-size: 0.7rem !important; padding: 4px 12px !important; }
    .brand-hero .tagline { font-size: 0.82rem !important; }
    .hero h1.hero-title { font-size: 1.4rem !important; }
    .hero .hero-subtitle { font-size: 0.85rem !important; }
    .stats-counter { gap: 1rem !important; flex-wrap: wrap !important; }
    .stat-number { font-size: 1.3rem !important; }
}

/* ── Features Grid ── */
@media (max-width: 1024px) {
    .features-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem !important; }
}
@media (max-width: 640px) {
    .features-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
    .feature-card { padding: 1.5rem 1.25rem !important; }
    .feature-card .card-icon { width: 48px !important; height: 48px !important; font-size: 1.15rem !important; }
    .feature-card h3 { font-size: 1.05rem !important; }
    .feature-card p { font-size: 0.84rem !important; }
    .section-title { font-size: 1.5rem !important; }
}

/* ── About Page - Values Grid ── */
@media (max-width: 1024px) {
    .values-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .values-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; padding: 0 1rem 2.5rem !important; }
    .value-card { padding: 1.5rem 1.25rem !important; }
    .value-card .value-icon { width: 52px !important; height: 52px !important; font-size: 1.3rem !important; }
    .value-card h3 { font-size: 1.15rem !important; }
    .value-card p { font-size: 0.85rem !important; }
}

/* ── FAQ Page - Accordion ── */
@media (max-width: 767px) {
    .faq-container { padding: 0 1rem 2.5rem !important; }
    .faq-category h2 { font-size: 1.2rem !important; }
    .faq-item { border-radius: 12px !important; }
    .faq-question { padding: 0.9rem 1.1rem !important; font-size: 0.85rem !important; gap: 0.75rem !important; }
    .faq-answer-inner { padding: 0 1.1rem 1rem !important; font-size: 0.83rem !important; }
    .faq-toggle { width: 24px !important; height: 24px !important; font-size: 0.7rem !important; min-width: 24px !important; }
}

@media (max-width: 480px) {
    .faq-question { padding: 0.75rem 0.9rem !important; font-size: 0.82rem !important; }
    .faq-answer-inner { padding: 0 0.9rem 0.85rem !important; font-size: 0.8rem !important; }
    .faq-category { margin-bottom: 1.5rem !important; }
}

/* Fix FAQ max-height clipping - use a large enough value */
.faq-item.active .faq-answer { max-height: 2000px !important; }

/* ── Contact Section ── */
@media (max-width: 1024px) {
    .contact-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .contact-grid { grid-template-columns: 1fr !important; gap: 1rem !important; padding: 2rem 1rem 0 !important; }
    .contact-card { padding: 1.25rem 1rem !important; }
    .contact-card h4 { font-size: 0.9rem !important; }
    .contact-card ul li { font-size: 0.82rem !important; margin-bottom: 0.5rem !important; }
}

/* ── Footer ── */
@media (max-width: 767px) {
    .footer-main { padding: 1.5rem 1rem !important; }
    .footer-brand-row { flex-direction: column !important; text-align: center !important; gap: 0.75rem !important; }
    .footer-brand-name { font-size: 1rem !important; justify-content: center !important; }
    .footer-links { gap: 0.75rem !important; }
    .footer-links a { font-size: 0.78rem !important; }
    .footer-copy { font-size: 0.72rem !important; }
    .footer-copy .disclaimer { font-size: 0.68rem !important; }
}

/* ── Page Headers ── */
@media (max-width: 767px) {
    .page-header { padding: 4rem 1rem 1.5rem !important; }
    .page-header h1 { font-size: 1.8rem !important; }
    .page-header p { font-size: 0.9rem !important; }
}
@media (max-width: 480px) {
    .page-header { padding: 3.5rem 0.75rem 1rem !important; }
    .page-header h1 { font-size: 1.4rem !important; }
    .page-header p { font-size: 0.82rem !important; }
}

/* ── General Mobile Fixes ── */
@media (max-width: 767px) {
    .section-badge { font-size: 0.72rem !important; padding: 4px 14px !important; }
    .features-bg-glow { width: 400px !important; height: 400px !important; }
    .text-center.mb-5 { margin-bottom: 1.5rem !important; }
    [style*="max-width: 580px"] { max-width: 100% !important; font-size: 0.9rem !important; }
    .divider-line { margin: 1.5rem auto !important; }
    .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}

@media (max-width: 480px) {
    .features-bg-glow { width: 250px !important; height: 250px !important; }
    .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
}

/* ── Ensure buttons and interactive elements have adequate touch targets ── */
@media (max-width: 767px) {
    .nav-link-signin, .nav-link-enroll, .faq-question, .chat-send { min-height: 44px !important; }
}

/* ── Smooth images on mobile ── */
@media (max-width: 767px) {
    img { max-width: 100%; height: auto; }
    body { background-attachment: scroll !important; }
}