/* mobile-fixes.css v4 - forceful overrides to counter existing !important rules on mobile */

/* Prevent horizontal overflow issues on mobile */
@media (max-width: 992px) {
  html, body { width: 100% !important; overflow-x: hidden !important; }

  /* Fix header: keep at top and visible */
  header.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 68px !important;
    z-index: 3000 !important;
    background: inherit !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  }
  body { padding-top: 68px !important; }

  .header-inner { position: relative !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; padding: 6px 12px !important; }

  /* Hamburger button: ensure visible and on top */
  .mobile-menu-btn {
    display: inline-flex !important;
    position: absolute !important;
    right: 10px !important;
    top: 12px !important;
    z-index: 3200 !important;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 22px !important;
    padding: 6px 8px !important;
  }
  .mobile-menu-btn .fas, .mobile-menu-btn .fa { font-size: 22px !important; }

  /* Force nav to display despite other rules */
  nav.navbar ul#navMenu,
  nav.navbar .nav-links,
  nav ul.nav-links,
  #navMenu {
    display: block !important;
    position: fixed !important;
    top: 68px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s ease !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: #ffffff !important;
    padding: 10px 12px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
    z-index: 2900 !important;
  }
  /* visible state */
  #navMenu.show {
    max-height: 900px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* menu link styles */
  #navMenu li { display: block !important; padding: 10px 6px !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; }
  #navMenu li a { display:block !important; padding: 8px 6px !important; width:100% !important; color:#222 !important; }

  /* adjust logo sizing */
  .logo img { max-width: 140px !important; max-height:52px !important; height:auto !important; display:block !important; }

  /* hero adjustments so it does not hide under header */
  .hero, .hero .hero-image, .hero-image {
    margin-top: 0 !important;
    padding-top: 12px !important;
    height: auto !important;
    min-height: calc(100vh - 68px) !important;
  }
  .hero .hero-image img, .hero-image img { max-width: 100% !important; height: auto !important; display:block !important; }

  /* ensure about images stack nicely */
  .about-images { gap: 12px !important; display: flex !important; flex-direction: column !important; align-items: center !important; }

  /* ensure floating elements (like contact bubble) not overlapping header */
  .chat-floating, .whatsapp-float, .floating-contact { bottom: 18px !important; right: 18px !important; z-index: 2600 !important; }

}

/* ensure very small screens */
@media (max-width: 480px) {
  header.site-header { height: 64px !important; }
  body { padding-top: 64px !important; }
  .logo img { max-width: 120px !important; }
  .mobile-menu-btn { top: 10px !important; right: 8px !important; }
  .about-images { gap: 10px !important; }
}