/* ==========================================================================
   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,
  .custom-dropdown-search-input {
    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,
  .custom-dropdown--reader-book {
    flex: 1 1 55%;
    max-width: none;
    min-width: 0;
  }
  #reader-select-chapter,
  .custom-dropdown--reader-chapter {
    flex: 1 1 40%;
    max-width: none;
    min-width: 0;
  }
  .custom-dropdown--reader-book .custom-dropdown-menu {
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: min(310px, calc(100vw - 2rem));
  }
  .custom-dropdown--reader-chapter .custom-dropdown-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: min(220px, calc(100vw - 2rem));
  }
  .reader-actions-group {
    width: 100%;
    justify-content: space-between;
  }
  .reader-actions-group .reader-uniform-control {
    flex: 1 1 auto;
  }
}