/* Mobile optimization overrides */
:root {
  --base-font: 16px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: var(--base-font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

.container, .wrapper, .content, .section, .inner, .page-content {
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
}

/* Scale headings fluidly for small screens */
h1 { font-size: clamp(1.8rem, 5.5vw, 2.5rem); line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 4.5vw, 2rem); line-height: 1.25; }
h3 { font-size: clamp(1.25rem, 3.8vw, 1.5rem); line-height: 1.3; }
h4, h5, h6 { font-size: clamp(1.1rem, 3.2vw, 1.25rem); line-height: 1.35; }

p, li, a, span, label, input, textarea, button {
  font-size: clamp(1rem, 3.2vw, 1.0625rem);
}

/* Make buttons and links easier to tap */
button, .btn, .button, a.button, input[type="submit"] {
  min-height: 44px;
  padding: 12px 16px !important;
}

/* Prevent tiny text from legacy px rules */
@media (max-width: 480px) {
  body { --base-font: 17px; }
  small, .small, .caption { font-size: 0.95rem !important; }
}

/* Fix tables on mobile */
table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

/* Avoid layout breaking from fixed widths */
[class*="col-"], [class*="grid"], .row, .columns {
  box-sizing: border-box;
  min-width: 0;
}

img[width], img[height] { height: auto !important; }

nav, .navbar, .site-header {
  position: relative;
  overflow: visible;
}

/* Optional: smooth out hero sections */
.hero, .banner, .masthead {
  padding-top: 40px;
  padding-bottom: 40px;
}