/* ============================================================
   responsive.css
   Mobile-first responsive overrides for all Bumasan pages
   Breakpoints follow Bootstrap 5:
     xs  < 576px
     sm  576–767px
     md  768–991px
     lg  992–1199px
     xl  ≥1200px
   ============================================================ */

/* ── Cross-browser base fixes ─────────────────────────────── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

.btn { -webkit-appearance: none; appearance: none; }

*:focus-visible {
  outline: 2px solid var(--primary-blue, #1A3FBF);
  outline-offset: 2px;
}

/* ── lg and below (≤ 991.98px) ───────────────────────────── */
@media (max-width: 991.98px) {

  /* Typography */
  .hero-heading  { font-size: 3.2rem; }
  .cta-heading   { font-size: 2.8rem; }

  /* Navbar collapse fixes */
  .navbar-nav {
    margin-top: 1rem;
    margin-bottom: 1rem !important;
    margin-left: 0 !important;
  }

  .navbar-collapse .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: .75rem;
    margin-top: .75rem;
    padding-bottom: 1rem;
  }

  .navbar-collapse .lang-switcher { align-self: flex-start; }
  .navbar-collapse .btn-signin,
  .navbar-collapse .btn-primary   { width: 100%; text-align: center; }

  /* Footer layout */
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .footer-bottom .d-flex { flex-wrap: wrap; justify-content: center; }

  /* Register pages */
  .reg-left { display: none; }
  .reg-right { padding: 2rem 1.25rem; }
  .reg-card  { padding: 1.75rem; max-width: 100%; }

  /* Pricing cards */
  .pricing-card { margin-bottom: 1.5rem; }
}

/* ── md and below (≤ 767.98px) ───────────────────────────── */
@media (max-width: 767.98px) {

  /* Section paddings */
  .hero-section          { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .two-cards-section     { padding: 4rem 0; }
  .features-section      { padding: 4rem 0; }
  .testimonial-section   { padding: 4rem 0; }
  .cta-section           { padding: 4rem 0; }
  .footer-section        { padding: 3.5rem 0 2rem; }
  .dark-stats-bar        { padding: 2rem 0; }

  /* Hero page */
  .hiw-hero, .about-hero, .contact-hero,
  .pricing-hero, .legal-hero            { padding: 3rem 0 2rem; }

  /* Typography scaling */
  .hero-heading     { font-size: 2.6rem; }
  .hero-subheading  { font-size: 1rem; max-width: 100%; }
  .testimonial-text { font-size: 1.5rem; }
  .cta-heading      { font-size: 2.2rem; }
  .serif-heading    { font-size: 2rem !important; }

  /* Hero buttons — stack vertically */
  .hero-section .d-flex.flex-wrap { flex-direction: column; }
  .hero-section .btn { width: 100%; }

  /* Hero stats strip */
  .hero-stats       { gap: 1rem; flex-wrap: wrap; }
  .hero-stat-divider { display: none; }

  /* Verified panel — full width below lg */
  .verified-panel { margin-top: 2.5rem; }

  /* CTA buttons */
  .cta-section .d-flex { flex-direction: column; align-items: center; }
  .cta-section .btn     { width: 100%; max-width: 360px; }

  /* Experience cards */
  .experience-card h4 { font-size: 1.3rem; }

  /* Footer link columns — use full cols on mobile */
  .footer-section .col-lg-2,
  .footer-section .col-lg-4 { margin-bottom: 2rem; }

  /* Register */
  .reg-right  { padding: 2rem 1rem; }
  .reg-card   { padding: 1.25rem; }

  /* Contact */
  .contact-card { margin-bottom: 1rem; }

  /* Pricing */
  .pricing-feature-row { font-size: .82rem; }
}

/* ── sm and below (≤ 575.98px) ───────────────────────────── */
@media (max-width: 575.98px) {

  /* Typography */
  .hero-heading   { font-size: 2.1rem; letter-spacing: -.5px; }
  .hero-subheading{ font-size: .95rem; }

  /* Stats in dark bar */
  .dark-stats-bar h3 { font-size: 1.5rem; }

  /* Dark stats bar — stack items */
  .dark-stats-bar .d-flex { flex-wrap: wrap; gap: 1.5rem; }

  /* Stat items */
  .stat-item        { margin-bottom: 1.5rem; }
  .hero-stat-value  { font-size: 1.35rem; }

  /* Navbar brand size */
  .navbar-brand { font-size: 1rem !important; }

  /* Footer trust tags — wrap */
  .footer-trust-tag { font-size: 9px; padding: 2px 7px; }

  /* Legal pages table of contents */
  .legal-toc { padding: 1rem; }

  /* Comparison table — scroll horizontally */
  .table-responsive { overflow-x: auto; }

  /* Pricing price big number */
  .pricing-price { font-size: 2.5rem; }
}