/* ============================================================
   Responsive hardening layer.
   Only adds adaptive behaviour — no design/visual redesign.
   Loaded last so it can safely override edge cases.
   ============================================================ */

/* --- 1. Never allow horizontal overflow --------------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  min-width: 0;
}

/* --- 2. Fluid media ----------------------------------------- */
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Keep explicitly sized decorative images from distorting */
img[width][height] {
  object-fit: contain;
}

/* --- 3. Long words / URLs never break the layout ------------- */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
label,
span,
a {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* --- 4. Safe areas (notch / home indicator) ------------------ */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .btn-fixed,
  .fixed-button,
  .footer-fixed,
  .page-footer,
  [class*="sticky-bottom"] {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* --- 5. Touch ergonomics ------------------------------------ */
@media (pointer: coarse) {
  button,
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"],
  [role="button"] {
    min-height: 44px;
    touch-action: manipulation;
  }

  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }
}

/* --- 6. Forms fill their container on small screens ---------- */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* --- 7. Very small phones (<=360px) ------------------------- */
@media (max-width: 360px) {
  body {
    font-size: 15px;
  }
}

@media (max-width: 320px) {
  body {
    font-size: 14px;
  }
}

/* --- 8. Wide / ultrawide screens ---------------------------- */
/* The funnel is a mobile-first single column. Keep it centered
   and comfortably readable instead of stretched or tiny. */
@media (min-width: 1280px) {
  .content,
  .container,
  .wrapper,
  main {
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- 9. Tables never break the page ------------------------- */
table {
  max-width: 100%;
}

@media (max-width: 768px) {
  .table-wrapper,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- 10. Landscape phones: reduce vertical padding ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  body {
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* --- 11. Respect reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}