/**
 * ============================================================
 * FT MOBILE RESPONSIVE CSS v1.0
 * Safe, conservative mobile hardening for Fish Translator.
 * Mirrors tsi-mobile-responsive.css patterns — additive only.
 * ============================================================
 *
 * Include AFTER site CSS:
 *   <link rel="stylesheet" href="/assets/css/ft-mobile-responsive.css">
 *
 * Design goals:
 *   - No horizontal scroll anywhere (body overflow-x: hidden)
 *   - Readable font-size (min 14px) on all text
 *   - 44x44 minimum touch targets for buttons/links-as-buttons
 *   - Images scale to container
 *   - Tables get horizontal scroll wrapper
 *   - Stack multi-col grids on < 768px
 * ============================================================
 */

:root {
  --ft-touch-min: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

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

body {
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  -webkit-overflow-scrolling: touch;
}

/* Images: constrain to container by default */
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Tables get horizontal scroll when wrapped */
.table-scroll,
.responsive-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Touch targets */
@media (max-width: 767.98px) {
  button,
  a.btn,
  .button,
  a.button,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: var(--ft-touch-min);
    min-width: var(--ft-touch-min);
    padding: 10px 14px;
  }

  /* Readable text minimum */
  body,
  p,
  li,
  td,
  th,
  label,
  input,
  textarea,
  select {
    font-size: clamp(14px, 3.4vw, 17px);
  }

  /* Headings scale down */
  h1 { font-size: clamp(24px, 6vw, 32px); line-height: 1.2; }
  h2 { font-size: clamp(20px, 5vw, 26px); line-height: 1.25; }
  h3 { font-size: clamp(18px, 4.5vw, 22px); line-height: 1.3; }

  /* Stack horizontal grids */
  .grid-2,
  .grid-3,
  .grid-4,
  [class*="cols-2"],
  [class*="cols-3"],
  [class*="cols-4"] {
    grid-template-columns: 1fr !important;
  }

  /* Fixed-width containers become fluid */
  [style*="width:"][style*="px"]:not(img):not(video):not(canvas):not(svg) {
    max-width: 100%;
  }

  /* Modals cap at 100dvh */
  .modal,
  .modal-content,
  [role="dialog"] {
    max-height: 100dvh;
    max-width: 100vw;
    overflow-y: auto;
  }

  /* Nav/headers that overflow */
  nav,
  .nav,
  header .menu,
  .header-nav {
    flex-wrap: wrap;
  }
}

/* Focus visibility — always on */
:focus-visible {
  outline: 3px solid #00d9ff;
  outline-offset: 2px;
}

/* 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;
  }
}