/* ==========================================================================
   Virtual Era — Responsive Hardening (v13.22)
   Mobile-first safeguards layered on top of site.css / inner-pages.css.
   Loaded last so it can correct edge cases without duplicating base rules.
   ========================================================================== */

/* 1) Global overflow + box model safety (belt-and-braces) */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* 2) Media never exceeds its container, aspect ratio preserved */
img, svg, video, iframe, canvas, object { max-width: 100%; height: auto; }
iframe { width: 100%; }

/* 3) Long strings (URLs, emails, product codes) break instead of overflowing */
p, li, td, th, dd, dt, a, span, h1, h2, h3, h4, h5, h6, .spec-table td, .spec-table th {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* 4) Responsive tables — scroll container + visual affordance.
   Wrap .spec-table in a scroll shell; keep data intact (no info removed). */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin: 8px 0 4px;
}
.spec-table { min-width: 460px; } /* forces horizontal scroll rather than squashing columns */

/* On small phones, stack spec tables into readable cards (label + value) */
@media (max-width: 560px) {
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table td, .spec-table th { display: block; width: 100%; }
  .spec-table { min-width: 0; }
  .spec-table tr { border: 1px solid var(--line, #e5e7eb); border-radius: 8px; margin-bottom: 12px; padding: 4px 0; }
  .spec-table th { background: transparent; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--orange, #FF6A1A); padding-bottom: 2px; }
  .spec-table td { padding-top: 0; }
  .table-scroll { overflow-x: visible; }
}

/* 5) Touch targets — min 44x44 for interactive elements on touch devices */
@media (pointer: coarse) {
  a.btn, button, .btn, .nav a, .footer a, .mega-link, input[type="submit"], .hamburger, summary {
    min-height: 44px;
  }
  a.btn, button, .btn, input[type="submit"] { min-width: 44px; }
  /* space out closely-packed inline links */
  .footer-legal a { padding: 4px 0; }
}

/* 6) Forms — full width, no zoom-on-focus (>=16px), comfortable targets */
input, select, textarea {
  max-width: 100%;
  font-size: 16px; /* prevents iOS auto-zoom on focus */
}
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea, .form-row, .field { width: 100%; }
  input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
  .form-grid, .form-row { grid-template-columns: 1fr !important; display: block; }
  button[type="submit"], .form-submit { width: 100%; }
}

/* 7) Fluid typography — clamp headings so they never overflow small screens */
h1 { font-size: clamp(1.8rem, 6vw, 3.4rem); line-height: 1.1; }
h2 { font-size: clamp(1.45rem, 4.5vw, 2.4rem); line-height: 1.15; }
h3 { font-size: clamp(1.2rem, 3.5vw, 1.6rem); }
.hero h1, .pg-hero h1 { overflow-wrap: break-word; }

/* 8) Prevent pre/code blocks from blowing out the layout */
pre, code { white-space: pre-wrap; word-break: break-word; max-width: 100%; overflow-x: auto; }

/* 9) Accessibility — visible keyboard focus + reduced motion */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--orange, #FF6A1A);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* 10) Developed-by credit — responsive placement (right on desktop, centered stack on mobile) */
.dev-credit {
  font-family: var(--f-mono, monospace);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--silver, #A9ABAE); opacity: .8;
  text-align: right; padding: 10px 0 0;
}
.dev-credit a { color: var(--orange, #FF6A1A); font-weight: 700; text-decoration: none; }
.dev-credit a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .dev-credit { text-align: center; }
}

/* 11) Tables/cards that used fixed grids collapse cleanly on very small screens */
@media (max-width: 400px) {
  .card-grid { grid-template-columns: 1fr !important; }
}