/*
 * ada-mobile.css — site-wide mobile/handheld baseline.
 *
 * Loaded on every front-end page by the ada-guide plugin. This is a
 * minimal, theme-friendly reset that fixes the three problems that
 * cause WordPress sites to look broken on phones:
 *
 *   1. Horizontal scroll from wide embeds / rogue elements.
 *   2. Images that overflow their container.
 *   3. iOS auto-zooming on form inputs when the font-size is < 16px.
 *
 * Scoped only to what we can touch without clobbering a theme's grid.
 */

/* Prevent the viewport from scrolling sideways at any width. Safe on phones,
   invisible on desktop. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Images, videos, and iframes inside post/page content never exceed the
   container they're placed in. This is scoped to the block-content wrappers
   WordPress uses (entry-content, wp-block-*) and to our plugin roots so we
   don't override theme sidebars or header logos. */
.entry-content img,
.entry-content video,
.entry-content iframe,
.post-content img,
.post-content video,
.post-content iframe,
.page-content img,
.page-content video,
.page-content iframe,
.wp-block-image img,
.wp-block-embed iframe,
.ada-guide-root img,
.ada-report-root img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Tables in post content scroll horizontally on narrow screens instead of
   forcing the whole page to scroll. */
.entry-content table,
.post-content table,
.page-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Long URLs / unbroken strings in post content wrap instead of blowing out
   column width. */
.entry-content,
.post-content,
.page-content,
.ada-guide-root,
.ada-report-root {
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-text-size-adjust: 100%;
}

/* iOS Safari auto-zooms when a form field's font-size is < 16px. Force a
   16px minimum on all inputs/textareas/selects inside our shortcodes
   (themes rarely touch form controls inside a plugin's scoped root, but
   we also apply it at the .entry-content level for comment forms, etc.). */
.entry-content input,
.entry-content textarea,
.entry-content select,
.ada-guide-root input,
.ada-guide-root textarea,
.ada-guide-root select,
.ada-report-root input,
.ada-report-root textarea,
.ada-report-root select {
  font-size: max(16px, 1em);
}

/* Minimum tap-target guideline (48x48 px per WCAG 2.1 AA target size):
   applied to buttons and links inside plugin shortcodes; intentionally
   NOT applied globally so theme navigation isn't disturbed. */
.ada-guide-root a.ada-product,
.ada-guide-root .ada-links a,
.ada-guide-root .ada-att .ada-actions a,
.ada-report-root .ada-report-btn {
  min-height: 48px;
}

/* Respect users who prefer reduced motion (slower transitions / no spring
   animation). Safe default — the plugin uses very few animations anyway. */
@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;
  }
}