/* ==========================================================================
   src/styles/responsive.css
   Mobile & Tablet Responsive Adaptations + Task 3 Prevention of Auto-Zoom
   on Mobile Form Inputs (@media (max-width: 767px)) without disabling Pinch-Zoom
   ========================================================================== */

/* Task 3: Prevent iOS Safari & Mobile Browsers from Auto-Zooming on Input Focus
   Applies strictly on mobile screens (max-width: 767px) by ensuring computed
   font-size is at least 16px (1rem), while preserving outer heights and desktop styles. */
@media (max-width: 767px) {
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
    line-height: 1.35;
  }
}

@media (max-width: 639px) {
  .reader-toolbar-row {
    flex-wrap: wrap;
  }
  .reader-filter-group {
    width: 100%;
    justify-content: space-between;
  }
  #reader-select-book {
    flex: 1 1 55%;
    min-width: 0;
  }
  #reader-select-chapter {
    flex: 1 1 40%;
    min-width: 0;
  }
  .reader-actions-group {
    width: 100%;
    justify-content: space-between;
  }
  .reader-actions-group .reader-uniform-control {
    flex: 1 1 auto;
  }
}