/* mobile.css — defensive responsive layer (quality floor).
   Not a redesign: fixes common mobile breakages on top of the existing layout.
   Load LAST in <head>, after the main CSS. */

/* 1. Nothing creates horizontal scroll */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* 2. Media never overflows the screen */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* 3. Tables scroll horizontally instead of breaking the layout.
   Wrap the table in <div class="table-scroll">, or rely on the overflow fallback. */
table { max-width: 100%; }
.table-scroll, .table-wrap, figure.table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* 4. Long strings (URLs, codes, case numbers) wrap instead of stretching the container */
pre, code, kbd, samp { max-width: 100%; overflow-x: auto; }
p, li, h1, h2, h3, h4, td, th, a, dd, dt, blockquote { overflow-wrap: break-word; word-wrap: break-word; }

/* 5. Minimum tap-target size on phones (Google mobile-friendly) */
@media (max-width: 640px) {
  a, button, input[type="button"], input[type="submit"], .btn, [role="button"] {
    min-height: 44px;
  }
  nav a { padding-top: .5rem; padding-bottom: .5rem; }
}

/* 6. Forms stay within the screen and do not zoom on iOS (font-size>=16px disables auto-zoom) */
input, select, textarea, button {
  max-width: 100%;
  font-size: 16px;
}

/* 7. Soft fallback for grid/flex rows: single column on narrow screens.
   Applies only when the layout defines no breakpoint of its own (safe). */
@media (max-width: 560px) {
  .row, .cols, .grid-2, .grid-3, .cols-2, .cols-3, .two-col, .three-col {
    display: block !important;
  }
  .row > *, .cols > *, [class*="grid"] > * { width: 100% !important; }
}

/* 8. No fixed pixel width on containers on mobile */
@media (max-width: 640px) {
  .wrap, .container, .content, main, section, header, footer, article {
    width: auto !important;
    max-width: 100% !important;
  }
}

/* 9. Respect reduced-motion (a11y quality floor) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (max-width: 860px) {
  :root { --gap: 20px; }
  .wrap, .container, main { padding-left: 18px; padding-right: 18px; }
  h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.15; }
  h2 { font-size: clamp(1.35rem, 4.5vw, 1.8rem); }
}
@media (max-width: 720px) {
  /* multi-column sections -> single column */
  [style*="grid-template"], .grid, .columns, .two-col, .three-col,
  .practice-grid, .people-grid, .cards { grid-template-columns: 1fr !important; display: grid !important; }
  .split, .row, .flex-row { flex-direction: column !important; }
  /* navigation stacked, readable */
  header nav, .nav { flex-wrap: wrap; gap: .25rem .9rem; }
}
@media (max-width: 480px) {
  body { font-size: 16px; line-height: 1.6; }
  h1 { font-size: clamp(1.6rem, 8vw, 2.1rem); }
  .hero, section { padding-top: 2rem; padding-bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- contact form (contact-form.html) --- */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.contact-form { display: grid; gap: .85rem; max-width: 560px; }
.contact-form label { display: grid; gap: .3rem; font-size: .95rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: .6rem .7rem; border: 1px solid currentColor; border-radius: 4px; background: transparent; }
.contact-form .cf-consent { grid-template-columns: auto 1fr; align-items: start; gap: .5rem; font-size: .88rem; }
.contact-form .cf-consent input { width: auto; min-height: 0; margin-top: .2rem; }
.contact-form .btn { justify-self: start; cursor: pointer; padding: .65rem 1.4rem; }
.contact-form .cf-or { font-size: .85rem; opacity: .8; }
.contact-form .form-msg { font-size: .9rem; }

/* consent row (checkbox left, text right) — universal */
.cf-consent { display:flex !important; align-items:flex-start; gap:.55rem; margin:1rem 0; font-size:.9rem; line-height:1.5; }
.cf-consent input[type="checkbox"] { width:auto !important; min-height:0 !important; margin:.2rem 0 0 0 !important; flex:0 0 auto; }
.cf-consent span { flex:1; }