/* The Printer Doctor — mobile layout fixes (2026-10-23). Loaded after the theme CSS. */

/* Header (phones, where the theme's mobile menu is active): logo left, menu button right */
@media (max-width: 480px) {
  .header { padding-top: 10px !important; padding-bottom: 10px !important; }
  .header .container { position: relative; }
  .header .container > .row { align-items: center; }
  .header .logo_section { flex: 0 0 60%; max-width: 60%; }
  .header .logo_section + div { flex: 0 0 40%; max-width: 40%; min-width: 0; position: static; }
  .header .logo { text-align: left !important; padding-bottom: 0 !important; }
  .header .logo img { max-width: 120px; height: auto; }
  .header .menu-area, .header .limit-box { position: static; }
  .header .mean-container .mean-bar { background: #e31e24 !important; border-radius: 4px; min-height: 44px !important; width: 52px !important; float: right !important; position: static !important; padding: 0 !important; margin: 0 !important; }
  .header .mean-container a.meanmenu-reveal { position: relative !important; right: auto !important; top: auto !important; left: auto !important; display: block; width: 24px !important; height: 20px !important; padding: 12px 14px !important; margin: 0 !important; }
  .header .mean-container a.meanmenu-reveal span { display: block !important; background: #fff !important; height: 3px !important; width: 24px !important; margin: 0 0 5px !important; border-radius: 2px; }
  .header .mean-container a.meanmenu-reveal span:last-child { margin-bottom: 0 !important; }
  .header .mean-container a.meanmenu-reveal.meanclose { font-size: 20px !important; line-height: 20px !important; text-align: center; color: #fff !important; }
  .header .mean-container .mean-nav { position: absolute !important; left: 15px; right: 15px; top: 100%; width: auto !important; margin-top: 8px !important; z-index: 999; box-shadow: 0 8px 20px rgba(0,0,0,.15); border-radius: 4px; overflow: hidden; }
}

@media (max-width: 767.98px) {
  /* Hero: readable text and a real button */
  .banner-main .carousel-item img { height: 300px !important; object-fit: cover; width: 100%; }
  .banner-main .carousel-caption.relative { left: 0 !important; right: 0; padding: 0 20px; text-align: left; }
  .banner-main .carousel-caption h1 { font-size: 27px !important; line-height: 1.2 !important; }
  .banner-main .carousel-caption h1 span { font-size: 20px !important; line-height: 1.3 !important; display: block; }
  .banner-main .carousel-caption .buynow { width: auto !important; display: inline-block; padding: 12px 22px !important; font-size: 15px; margin-top: 10px; }

  /* Headings at a phone size */
  .about .about_box span, .about1 .about_box1 span { font-size: 28px !important; line-height: 1.2 !important; display: block; margin-bottom: 14px; }
  .about .about_box h3, .about1 .about_box1 h3 { font-size: 21px !important; line-height: 1.3 !important; }
  .about1 .about_box1 h2, #printer-monitoring h2 { font-size: 22px !important; line-height: 1.3 !important; }
  .titlepage h2 { font-size: 26px !important; }
  .about1, .about { padding-top: 30px !important; }
  .about1 .about_box1 p, .about .about_box p { font-size: 16px; line-height: 1.6; }

  /* Brands: two per row, compact */
  .brand .brand-bg .row > [class*="col-"].margin { flex: 0 0 50%; max-width: 50%; padding-left: 6px; padding-right: 6px; margin-bottom: 12px !important; }
  .brand .brand-bg .row > .col-md-12:not(.margin) { flex: 0 0 100%; max-width: 100%; }
  .brand .brand_box { padding: 16px 8px !important; min-height: 0 !important; height: 100%; }
  .brand .brand_box img { max-height: 46px; width: auto; max-width: 100%; margin: 0 auto 8px; display: block; }
  .brand .brand_box h3 { font-size: 16px !important; margin: 0 0 2px; }
  .brand .brand_box span { font-size: 13px !important; line-height: 1.3; display: block; }

  /* Footer: locations two by two */
  .footer .row.pdn-top-30 > .col-md-3 { flex: 0 0 50%; max-width: 50%; }
  .footer .headinga h3 { font-size: 18px !important; margin-bottom: 4px; padding-bottom: 4px; }
  .footer .headinga span, .footer .headinga p { font-size: 13px !important; line-height: 1.4; margin: 0; }
  .footer .footer-box { margin-bottom: 18px; }
  .footer .copyright { margin-top: 10px !important; }
  .footer .copyright p { font-size: 13px; line-height: 1.6; }

  /* Sticky call / request bar */
  body { padding-bottom: 64px; }
  .pd-mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 14px rgba(0,0,0,.12); }
  .pd-mobile-cta a { flex: 1; text-align: center; padding: 12px 6px; border-radius: 6px; font: 600 15px/1.2 Poppins, Arial, sans-serif; text-decoration: none; }
  .pd-mobile-cta .pd-call { background: #fff; color: #e31e24; border: 2px solid #e31e24; }
  .pd-mobile-cta .pd-req { background: #e31e24; color: #fff; border: 2px solid #e31e24; }
  .pd-cb { bottom: 76px !important; }
}

@media (min-width: 768px) { .pd-mobile-cta { display: none; } }

/* very narrow phones: keep both call-bar buttons on one line */
@media (max-width: 374.98px) {
  .pd-mobile-cta .pd-num { display: none; }
  .pd-mobile-cta a { font-size: 14px; }
}
/* French labels are longer: drop the number and keep one line up to 414px */
@media (max-width: 414px) {
  html[lang^="fr"] .pd-mobile-cta .pd-num { display: none; }
  html[lang^="fr"] .pd-mobile-cta a { white-space: nowrap; font-size: 14px; padding-left: 4px; padding-right: 4px; }
}
@media (max-width: 359.98px) {
  html[lang^="fr"] .pd-mobile-cta a { font-size: 13px; }
}