/* ============================================================
   Harshh & Co. — Global Mobile Responsive Fixes
   Applied site-wide. Loaded on every page.
   ============================================================ */

/* Universal box-sizing & overflow safety */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }

/* Every image must respect its container */
img, video, iframe, picture, svg, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Tables stay scrollable instead of breaking the page */
table { max-width: 100%; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   MOBILE FIXES — applied at 768px and below
   ============================================================ */
@media (max-width: 768px) {
  /* Force every image to fit the viewport */
  img, video, iframe, picture, svg, canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Hide explicitly desktop-only images */
  .desktop-only-image,
  img.desktop-only,
  .desktop-only,
  .no-mobile {
    display: none !important;
  }

  /* Prevent any wide element from breaking layout */
  body, main, section, article, header, footer, div {
    max-width: 100vw;
  }

  /* Stop horizontal scroll caused by oversized children */
  body { overflow-x: hidden !important; }

  /* Background image sections stay contained */
  [style*="background-image"] {
    background-size: cover !important;
    background-position: center !important;
  }

  /* Reduce padding on common section wrappers */
  section, .section { padding-left: 18px !important; padding-right: 18px !important; }

  /* Prevent hero typography from overflowing */
  h1, h2, h3, .hero-headline, .hero-title { word-break: break-word; }

  /* Fixed-width elements collapse on mobile */
  [class*="w-"], [style*="width:"] {
    max-width: 100% !important;
  }
}

/* ============================================================
   ULTRA-SMALL — applied at 480px and below
   ============================================================ */
@media (max-width: 480px) {
  section, .section { padding-left: 16px !important; padding-right: 16px !important; }
  nav { padding-left: 16px !important; padding-right: 16px !important; }
  footer { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ============================================================
   ACCESSIBILITY — touch target size
   ============================================================ */
@media (max-width: 768px) {
  a, button {
    min-height: 44px;
  }
  /* Don't force inline links to wrap weirdly */
  p a, li a, span a {
    min-height: auto;
  }
}