/* MFE MOBILE FIX - sitewide responsive overrides */
@media (max-width: 991px) {
  /* Sticky bar - cleaner on mobile */
  #sticky-bar { font-size: .65rem !important; padding: 5px 0 !important; line-height: 1.3 !important; }
  #sticky-bar > div { gap: 8px !important; padding: 0 8px !important; }
  #sticky-bar span { font-size: .65rem !important; }
  #sticky-bar a { padding: 3px 10px !important; font-size: .65rem !important; }

  /* Navbar - taller, collapsed */
  nav.navbar.fixed-top, nav.mfe-std-nav { top: 28px !important; min-height: 60px !important; padding: .35rem 0 !important; }
  nav.navbar .navbar-brand img { height: 38px !important; }
  body { padding-top: 92px !important; }

  /* Collapsed mobile nav - stacked items */
  nav.navbar .navbar-collapse { background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.08); padding: 16px; border-radius: 10px; margin-top: 8px; }
  nav.navbar .navbar-nav { width: 100%; align-items: stretch !important; }
  nav.navbar .navbar-nav .nav-item { width: 100%; margin: 3px 0 !important; }
  nav.navbar .navbar-nav .nav-link { display: block !important; width: 100% !important; text-align: center !important; padding: 10px 14px !important; font-size: .9rem !important; border-radius: 8px !important; white-space: normal !important; }
  nav.navbar .dropdown-menu { position: static !important; box-shadow: none !important; border: none !important; background: rgba(0,0,0,.03) !important; padding: 6px !important; }
  nav.navbar .dropdown-item { padding: 8px 14px !important; }

  /* Hide gradient pills' inline styles - let mobile use default size */
  nav.navbar a[href='/clover-pos/'], nav.navbar a[href='/branding/'] { padding: 10px 14px !important; margin: 3px 0 !important; font-size: .85rem !important; }
  nav.navbar a[href='/free-audit/'], nav.navbar a[href='/apply/'], nav.navbar a[href='/current-application.html'] { padding: 12px 16px !important; font-size: .9rem !important; margin: 3px 0 !important; }
  nav.navbar a[href='tel:3053848391'] { padding: 10px 14px !important; font-size: 1rem !important; text-align: center !important; }
}

@media (max-width: 768px) {
  /* Hero typography - readable on small screens */
  h1, .hero h1 { font-size: 2rem !important; line-height: 1.15 !important; word-break: normal !important; overflow-wrap: break-word !important; }
  h2 { font-size: 1.5rem !important; line-height: 1.2 !important; }
  h3 { font-size: 1.2rem !important; }
  .hero { padding: 30px 0 40px !important; }
  .hero .lead, .hero p { font-size: .95rem !important; line-height: 1.55 !important; }

  /* Force columns to stack on mobile */
  .row > [class*='col-md-'], .row > [class*='col-lg-'] {
    width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important;
  }

  /* CTA buttons - full width on mobile */
  .cta-btn, .btn-primary-clover, .btn-primary-purple, .btn-cta {
    width: 100% !important; box-sizing: border-box !important; margin: 8px 0 !important; padding: 14px 20px !important; font-size: .95rem !important;
  }
  .btn-secondary-clover, .btn-secondary-dark, .btn-phone, .cta-btn-outline {
    width: 100% !important; box-sizing: border-box !important; margin: 8px 0 !important; padding: 14px 20px !important; font-size: .95rem !important;
  }

  /* Form fields - readable */
  input[type='text'], input[type='email'], input[type='tel'], input[type='number'], input[type='date'], textarea, select {
    font-size: 16px !important; padding: 12px !important;
  }
  form label { font-size: .85rem !important; }

  /* Container max-width on mobile */
  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Card grids - single column on mobile */
  .product-grid, .benefit-grid, .compliance-grid, .stat-grid {
    grid-template-columns: 1fr !important; gap: 12px !important;
  }

  /* Stats - 2 columns on mobile */
  .stat-card, .stat-box { padding: 18px 12px !important; }
  .stat-num, .stat-box .num { font-size: 1.5rem !important; }
  .stat-label, .stat-box .lbl { font-size: .7rem !important; }

  /* Reviews/testimonials full width */
  .testimonial { padding: 20px !important; }
  .testimonial blockquote { font-size: .9rem !important; }

  /* Partner section - lighter padding */
  .partner-section { padding: 40px 20px !important; border-radius: 16px !important; margin: 30px 0 !important; }
  .partner-logo { font-size: 1.8rem !important; padding: 10px 18px !important; }
  .partner-stats { gap: 16px !important; }
  .partner-stats .stat .num { font-size: 1.3rem !important; }

  /* Sections - tighter padding */
  .section, section { padding: 40px 0 !important; }
  .section.alt { padding: 40px 0 !important; }

  /* Footer */
  footer .row { row-gap: 20px !important; }
  footer .col-lg-4, footer .col-lg-2, footer .col-md-6, footer .col-md-4 { margin-bottom: 20px !important; }

  /* Hide horizontal overflow */
  body { overflow-x: hidden !important; }
}

@media (max-width: 480px) {
  /* Even tighter on tiny phones */
  h1, .hero h1 { font-size: 1.7rem !important; }
  h2 { font-size: 1.3rem !important; }
  .sticky-bar, #sticky-bar > div > span { font-size: .6rem !important; }
  #sticky-bar a { padding: 2px 8px !important; }
  body { padding-top: 96px !important; }
  nav.navbar .navbar-brand img { height: 32px !important; }
}

/* === STICKY BAR MOBILE FIX === */
@media (max-width: 768px) {
  #sticky-bar { 
    padding: 5px 0 !important; 
    font-size: .62rem !important; 
    line-height: 1.2 !important;
    min-height: 28px !important;
    max-height: 36px !important;
    overflow: hidden !important;
  }
  /* Hide long descriptive text on mobile, keep only critical CTAs */
  #sticky-bar > div > span:first-of-type { display: none !important; }
  #sticky-bar > div { gap: 12px !important; padding: 0 10px !important; }
  #sticky-bar a { padding: 3px 12px !important; font-size: .7rem !important; white-space: nowrap !important; }
  
  /* Ensure navbar clears sticky bar */
  nav.navbar.fixed-top, nav.mfe-std-nav { 
    top: 36px !important; 
    min-height: 56px !important;
  }
  body { padding-top: 96px !important; }
  html { scroll-padding-top: 110px !important; }
}

@media (max-width: 480px) {
  #sticky-bar { font-size: .58rem !important; padding: 4px 0 !important; }
  #sticky-bar a { padding: 2px 8px !important; font-size: .62rem !important; }
  nav.navbar.fixed-top { top: 32px !important; min-height: 52px !important; }
  body { padding-top: 88px !important; }
}