/* ellaride — phone fixes shared by the inner pages (faq, support, terms, privacy,
   join, carpooling, carsharing). Loaded last so it wins over page styles.
   The homepage has these rules built into css/site.css. */

/* iOS Safari zooms into any field under 16px when it gets focus. */
@media (max-width: 1023px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px !important; }
  .form-input { height: 46px !important; }
}

/* Notch / Dynamic Island (landscape) and the home indicator — pages use viewport-fit=cover. */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
footer, .site-footer { padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 16px)) !important; }
.lang-switcher-floating { top: max(12px, env(safe-area-inset-top)); bottom: auto !important; }

/* Fingers, not cursors: 44px targets (Apple HIG, WCAG 2.5.8). */
@media (pointer: coarse) {
  footer a:not(:has(img)), .site-footer a:not(:has(img)) {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer-social a, .wordmark { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .wordmark { justify-content: flex-start; }
  .lang-toggle button, .lang-btn { min-width: 44px; min-height: 44px; }
  .back, .back-btn { display: inline-flex; align-items: center; min-height: 44px; }
  .faq-chips a, .faq-chips button, .support-pill, .switch-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .form-submit-btn { min-height: 48px; }
  header a:not(.block), .logo-badge, footer a:has(img), a.inline-flex { min-height: 44px; display: inline-flex; align-items: center; }
  footer a[href^="mailto:"] { min-height: 44px; display: inline-flex; align-items: center; }
  .support-card li a { display: inline-block; padding: 12px 0; }
  /* page CSS sets these just under 44px */
  /* the join page draws these scaled (logo ~0.85, panel ~0.98), so ask for a bit more */
  .logo-badge { min-height: 52px !important; }
  .back-btn, .switch-btn { min-height: 46px !important; }
  a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Nothing smaller than 12px. */
.optional-tag, .guarantee-item, .lang-btn { font-size: max(12px, 0.75rem) !important; }

/* Narrow phones (320–359px): the carpooling page header (logo + Εγγραφή + menu)
   was 19px wider than the screen. Tighten its gaps and sizes so it fits. */
@media (max-width: 359px) {
  header > div.flex { padding-left: 14px; padding-right: 14px; }
  header > div.flex > a:first-child { gap: 6px; }
  header > div.flex > a:first-child img { width: 28px; height: 28px; }
  header > div.flex > a:first-child > span { font-size: 21px; }
  header > div.flex > div.flex { gap: 6px; }
  header > div.flex > div.flex > a.rounded-full { padding-left: 14px; padding-right: 14px; }
}