/* Global responsive safety net for SES.
   Source-level fixes live in the components — this file only carries
   cross-cutting concerns and a few legacy overrides that are awkward
   to express in Tailwind utility chains. */

html,
body {
  /* Prevent any rogue absolute child from causing a horizontal scrollbar.
     `clip` (vs `hidden`) does not create a scroll container, so descendant
     `position: sticky` keeps working. Older browsers fall back to hidden. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
video,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Long unbroken tokens (UPI IDs, URLs, emails) should not push their
   container wider than the viewport. */
.break-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Donate CTA banner: strip extra space above/below the image
   (baseline gap, padding). */
.donation-banner-wrap {
  display: block;
  line-height: 0;
}
.donation-banner-image {
  display: block;
}

/* Swap to the dedicated mobile artwork on small screens so text remains
   legible. */
@media (max-width: 640px) {
  .donation-banner-image {
    content: url("/Mobile%20banner.webp");
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .donation-banner-wrap {
    height: 320px;
  }
}

/* Hero section: when stacked on phones we want it to flow with the
   content rather than forcing 100vh. */
@media (max-width: 640px) {
  .hero-shell {
    min-height: auto;
    height: auto;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }
}

/* Tight focus rings without losing accessibility */
:focus-visible {
  outline-offset: 2px;
}