/* =========================================================
   TOFAHF — Mobile hardening
   Belt-and-suspenders rules so nothing overflows or crowds
   on real phone widths (320px–390px), on top of the
   breakpoints already in style.css.
   ========================================================= */

/* Never allow a stray wide element to create horizontal scroll */
html, body{ overflow-x: hidden; max-width: 100%; }
img, svg, video, canvas{ max-width: 100%; height: auto; }

/* Long unbroken tokens (emails, handles, URLs) must wrap instead of overflowing.
   Scoped to paragraphs/links/lists only — headings (names, titles) should wrap
   at natural word boundaries, never mid-word. */
a, p, span, li, .num, .donate-note, .form-note{
  overflow-wrap: anywhere;
  word-break: break-word;
}
h1, h2, h3, h4{
  overflow-wrap: break-word;
  word-break: normal;
}

/* Flex children need this to actually shrink/wrap their text —
   without it a flex item won't shrink below its content's natural width */
.contact-block > div,
.value-row > div,
.footer-col,
.initiative > div,
.donate-item .num,
.nav-wrap .brand,
.footer-brand{
  min-width: 0;
}

/* ---------- General small-screen tightening ---------- */
@media (max-width: 480px){
  section{ padding: 3.4rem 0; }
  .container, .container-narrow{ width: 90%; }

  h1{ font-size: clamp(1.8rem, 8vw, 2.3rem); }
  h2{ font-size: clamp(1.5rem, 6vw, 1.9rem); }

  .hero{ padding: 3rem 0 3.2rem; }
  .hero h1{ font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  .hero .lede{ font-size: 1rem; }
  .hero-motto{ font-size: 1.02rem; }

  /* Trim the header on very small phones so logo + nav never crowd the menu button */
  .brand-text{ font-size: .92rem; }
  .brand-text span{ display: none; }
  .brand-mark{ width: 36px; height: 36px; }
  .nav-wrap{ padding: .7rem 0; }

  .btn{ font-size: .9rem; padding: .8em 1.3em; }
  .btn-row{ gap: .7rem; }
  .btn-row .btn{ flex: 1 1 auto; justify-content: center; }

  .stat-strip{ gap: 1.1rem; }
  .stat-num{ font-size: 1.6rem; }

  /* Stack the initiative rows fully instead of a cramped 90px image column */
  .initiative{ grid-template-columns: 1fr; text-align: center; }
  .initiative-badge{ width: 96px; margin: 0 auto 1rem; }
  .initiative .meta{ justify-content: center; }

  .donate-panel{ padding: 1.6rem; }
  .role-list{ gap: .5rem; }

  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: .5rem; }

  .lightbox-close{ top: 12px; right: 14px; width: 38px; height: 38px; }
}

/* Slightly larger phones (most modern devices, ~480–600px) */
@media (min-width: 481px) and (max-width: 600px){
  .brand-text span{ display: none; }
  .initiative{ grid-template-columns: 90px 1fr; }
}

/* Landscape phones — short viewport height, avoid oversized hero padding */
@media (max-height: 480px) and (orientation: landscape){
  .hero{ padding: 2.2rem 0; }
  section{ padding: 2.6rem 0; }
}