/* === Global Mobile Responsiveness Overrides ===
   This stylesheet adds responsive behavior without altering existing CSS files.
   It is safe to include across the whole site.
*/
*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  overflow-x: hidden;
}

/* Containers */
.container, .wrapper, .content, .inner, .site-wrap {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: min(5vw, 24px);
  padding-right: min(5vw, 24px);
}

/* Typography scales a touch on smaller screens */
@media (max-width: 768px) {
  body { line-height: 1.6; }
  h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  h2 { font-size: clamp(1.4rem, 5vw, 1.8rem); }
  h3 { font-size: clamp(1.2rem, 4.5vw, 1.4rem); }
  p, li { font-size: clamp(0.98rem, 3.8vw, 1.06rem); }
}

/* Make typical multi-column layouts stack on mobile */
[class*="col-"], [class*="column"], [class*="columns"], [class*="span"], .column, .columns {
  min-width: 0;
}

.row, .grid, .columns, .cols, .flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 1024px) {
  .row > *, .grid > *, .columns > *, .cols > *, .flex-row > *,
  [class*="col-"], [class*="column"], [class*="columns"], [class*="span"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* Tables: allow horizontal scrolling on small screens */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive > table { width: 100%; border-collapse: collapse; }
table { max-width: 100%; }
@media (max-width: 768px) {
  table { display: block; width: 100%; overflow-x: auto; }
}

/* Forms & buttons */
input, select, textarea, button {
  max-width: 100%;
}
@media (max-width: 768px) {
  .form-row, .form-inline { display: block; }
  .form-row > *, .form-inline > * { width: 100% !important; }
  button, .button, .btn { width: auto; }
}

/* Media blocks and hero sections */
.hero, .banner, .masthead, .header-hero {
  background-size: cover;
  background-position: center;
}

/* Navigation: make lists wrap; basic hamburger opt-in if .menu-toggle exists */
nav ul, .nav ul, .menu, .navbar ul {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding-left: 0; list-style: none;
}

.menu-toggle { display: none; }
@media (max-width: 900px) {
  .menu-toggle { display: inline-block; }
  nav ul, .nav ul, .menu, .navbar ul { display: none; }
  nav.open ul, .nav.open ul, .menu.open, .navbar.open ul { display: flex; flex-direction: column; }
}

/* Utility classes for authors */
.hide-mobile { display: none !important; }
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
  .hide-mobile { display: revert !important; }
}

/* Images inside links shouldn't overflow */
a img { display: inline-block; }

/* Clamp overly large fixed widths on small screens */
@media (max-width: 768px) {
  [style*="width:"] { max-width: 100% !important; }
  [style*="min-width:"] { min-width: 0 !important; }
  [style*="max-width:"] { max-width: 100% !important; }
}

/* Footer spacing */
footer { padding: 1.5rem 0; }