/* ==========================================================================
   Responsive Foundation
   Shared, additive rules loaded by every page shell. Two kinds of rules:
   1. Live fixes, scoped narrowly enough to be safe on every existing page.
   2. Opt-in utility classes, inert until added to a specific element on a
      given page — adding this file alone does not change those pages.
   ========================================================================== */

/* ---- Live fixes ---- */

/* Prevents iOS Safari's auto-zoom-on-focus - the actual root cause behind
   every user-scalable=no workaround found in the audit. Excludes readonly
   fields (e.g. copy-only URL boxes), hidden inputs, and checkboxes/radios,
   which don't trigger the zoom and are sometimes intentionally compact. */
@media (max-width: 768px) {
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([readonly]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* Standard media safety net so an oversized image/video is never the
   reason a page scrolls sideways. */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Stops the page itself from scrolling sideways. Does not affect any
   element's own overflow-x:auto (table-responsive wrappers keep scrolling
   exactly as before) - only clips content that would otherwise spill past
   the page boundary. */
html {
  overflow-x: hidden;
}

/* Better scroll physics on iOS for every existing .table-responsive
   wrapper already in use - no visual or layout change. */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* Language switcher (base.html / login_base.html): stays exactly as-is on
   desktop (a small fixed top-right widget), but a persistent floating
   button is a distraction on a small screen and can sit over the
   hamburger menu or page content. Below 768px it becomes a normal,
   non-floating part of the page flow instead. */
@media (max-width: 768px) {
  .language-switcher-container {
    position: static;
    display: flex;
    justify-content: flex-end;
    padding: 10px 12px 0;
  }
}

/* ---- Opt-in utilities (not applied to anything until a page uses them) ---- */

/* For a fixed/sticky element near the bottom of the screen, so it doesn't
   sit under the iOS home-indicator gesture bar. */
.rf-safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* For a fixed-position toast/back-button with no current width safeguard,
   so it can't run off a narrow (320-360px) screen. */
.rf-fixed-clamp {
  max-width: calc(100vw - 40px);
}

/* For a container using min-height:100vh/height:100vh where iOS Safari's
   collapsing address bar causes clipping or jitter. The vh line stays
   first as a fallback - unsupported browsers simply ignore the dvh line
   and keep applying vh. */
.rf-full-height {
  min-height: 100vh;
  min-height: 100dvh;
}

/* For a small icon-only action button that needs a larger tap target. */
.rf-min-touch {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px;
}

/* ---- Page-specific overrides (loaded after vendor CSS, so these win) ---- */

/* application_base.html's vendor auth-page container (main.css) uses a
   rigid height:100vh with 80px top/bottom padding that never shrinks -
   on a short iOS Safari viewport this can clip form content. Loaded after
   main.min.css, so this wins at equal specificity without editing the
   vendor file. Desktop width/layout is unchanged. */
.app-auth-container {
  height: 100vh;
  height: 100dvh;
}
@media (max-width: 480px) {
  .app-auth-container {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}