/* mobile-fix.css (NEW FILE; load after styles.css) */

/* 1) Eliminate sideways swipe */
html, body { max-width: 100%; overflow-x: hidden; }

/* 2) Ensure media can’t overflow viewport */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; }

/* 3) Wrap long words / emails / URLs */
h1, h2, h3, .title,
p, a, li, .badge, .brand-name, .logo-item span, .btn {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* 4) Keep mobile nav popover inside the screen */
.nav-open #nav-links {
  left: auto !important;
  right: 16px !important;
  max-width: calc(100vw - 32px);
}

/* 5) Guard-rails for small phones */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr !important; }
  .actions { gap: 8px; flex-wrap: wrap; }
  .btn { padding: 12px 14px; }
}

/* 6) Defensive default */
* { box-sizing: border-box; }
/* Opt-out example: add data-allow-overflow="true" on elements that should scroll horizontally */
[data-allow-overflow="true"] { overflow-x: auto; }