/* Shared mobile polish (safe defaults).
   Goal: improve tap targets, prevent iOS input zoom, and stop horizontal overflow.
   Keep rules conservative to avoid breaking existing page-specific layouts.
*/

:root {
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Make form controls match page typography by default */
button, input, select, textarea {
  font: inherit;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Help avoid accidental horizontal scroll due to wide elements */
body {
  overflow-x: hidden;
}

/* Smoother in-page scrolling on iOS */
@supports (-webkit-overflow-scrolling: touch) {
  body {
    -webkit-overflow-scrolling: touch;
  }
}

/* Better tap feel */
a, button, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.button,
a.btn {
  touch-action: manipulation;
}

@media (max-width: 768px) {
  /* Prevent iOS Safari zoom on focus */
  input, textarea, select {
    font-size: 16px !important;
  }

  /* Make interactive targets easier to hit */
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  .button,
  a[role="button"] {
    min-height: 44px;
  }

  /* If pages use full-width containers, avoid edge-to-edge discomfort */
  .container {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }

  /* Common pattern across pages: main wrappers without a .container class */
  main,
  .main,
  .content,
  .page,
  .page-container {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }

  /* Keep fixed elements away from the iOS home indicator */
  .fixed-bottom,
  [style*="position:fixed"][style*="bottom"] {
    padding-bottom: var(--safe-bottom);
  }
}
