/* 360 Girls Foundation : mobile and tablet polish
   Loaded after each page's inline styles, so it overrides them at equal
   specificity. Keep changes here small and targeted. */

/* No sideways scrolling from wide images, embeds or tables */
img, video, iframe, svg { max-width: 100%; }
img { height: auto; }
table { max-width: 100%; }
.leaflet-container img { max-width: none; } /* map tiles must not be resized */

/* Tablet and phone (touch): form fields 16px or larger, so iOS does not zoom on focus */
@media (max-width: 760px), (max-width: 1100px) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Touch targets: at least 44px tall on coarse pointers (fingers) */
@media (pointer: coarse) {
  button,
  .btn,
  .cta-main,
  .cta-ghost,
  .nav-btn,
  .hamburger,
  .mobile-menu a,
  .role-chip,
  .interest-pill,
  .amount-btn {
    min-height: 44px;
  }
  .hamburger {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Keep sticky or fixed UI inside the safe area on notched phones */
@supports (padding: max(0px)) {
  .nav-wrap {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* Large screens: keep line lengths readable instead of stretching edge to edge */
@media (min-width: 1600px) {
  .container, .wrap, main { max-width: 1320px; margin-inline: auto; }
}

/* Reduced motion is respected everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Touch: small text links and map controls get a finger-sized hit area */
@media (pointer: coarse) {
  .mission-band-link, .back-link, .leaflet-popup-close-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .leaflet-popup-close-button { min-width: 44px; justify-content: center; }
  .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
}

/* Grid/flex children must be allowed to shrink so horizontally scrolling tab rows don't widen the page */
.donate-form-side,.donate-info-side,.method-tabs{min-width:0;max-width:100%}