/* =====================================================================
   Home2First Foundation — responsive layer
   ---------------------------------------------------------------------
   WHY THIS FILE EXISTS:
   The site was hand-built with hardcoded pixel widths (w-[1200px],
   w-[1230px] nav, w-[980px] footer, ...), absolute-positioned hero
   offsets (ml-[393px]) and fixed heights (h-[1000px]) with NO responsive
   breakpoints. The viewport meta tag is present and correct, so phones
   rendered the full ~1230px desktop layout — i.e. a "shrunken desktop."

   This stylesheet adds a mobile-first responsive layer on top of the
   existing markup. It is loaded AFTER the Tailwind CDN in every page, so
   its !important overrides reliably win regardless of cascade order.
   Breakpoints: <=1024px (tablet), <=768px (phone/tablet), <=480px (small
   phones), matching the requested standard breakpoints.
   ===================================================================== */

/* ---------- Global guards (all viewports) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }   /* never allow horizontal scroll/zoom-out */
img, svg, video, canvas, iframe { max-width: 100%; }   /* media never forces overflow */

/* Mobile-nav elements (built by mobile-nav.js) are phone-only: hidden by
   default here, switched on inside the <=768px block below. */
.m-burger, .m-menu { display: none; }
/* freeze background scroll while the slide-down menu is open */
html.m-lock, html.m-lock body { overflow: hidden !important; }

/* ---------- Home Team / About bio cards (all viewports) ----------
   A CSS-grid bio card. DESKTOP keeps the original look (headshot on the
   left, name/role/bio stacked to its right). The grid areas let the phone
   override (below) move the bio to a full-width row under the photo + name. */
.bio-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  column-gap: 32px;
  align-items: start;
  grid-template-areas:
    "photo name"
    "photo role"
    "photo bio";
}
.bio-card .bio-photo { grid-area: photo; }
.bio-card .bio-name  { grid-area: name; }
.bio-card .bio-role  { grid-area: role; }
.bio-card .bio-text  { grid-area: bio; }

/* =====================================================================
   <= 1024px — tablets: let the wide centered page wrappers go fluid
   ===================================================================== */
@media (max-width: 1024px) {
  .mx-auto { max-width: 100% !important; }     /* every w-[1200px]/980px/... mx-auto wrapper */

  /* fluidize the wide fixed-width content blocks */
  .w-\[1250px\], .w-\[1230px\], .w-\[1200px\], .w-\[1120px\], .w-\[1100px\],
  .w-\[1080px\], .w-\[1040px\], .w-\[1000px\], .w-\[980px\],  .w-\[935px\],
  .w-\[900px\],  .w-\[860px\],  .w-\[820px\],  .w-\[780px\],  .w-\[760px\],
  .w-\[720px\] { width: 100% !important; max-width: 100% !important; }
}

/* =====================================================================
   <= 768px — phones & small tablets: stack, shrink, scale
   ===================================================================== */
@media (max-width: 768px) {

  /* Inset content from the screen edges. Section backgrounds stay
     full-bleed because padding is inside the (colored) box. Hero is
     excluded so its background image / gradient stay edge-to-edge. */
  body > header,
  body > section:not(.hero),
  body > footer { padding-left: 20px !important; padding-right: 20px !important; }

  /* Fluidize the remaining medium fixed-width blocks (cards, banners,
     the donation widget, overlay cards, etc.). */
  .w-\[640px\], .w-\[600px\], .w-\[560px\], .w-\[480px\], .w-\[460px\],
  .w-\[440px\], .w-\[430px\], .w-\[400px\], .w-\[388px\], .w-\[360px\],
  .w-\[340px\], .w-\[320px\], .w-\[300px\] { width: 100% !important; max-width: 100% !important; }

  .max-w-\[1000px\], .max-w-\[935px\], .max-w-\[820px\], .max-w-\[780px\],
  .max-w-\[760px\], .max-w-\[720px\], .max-w-\[640px\], .max-w-\[430px\],
  .max-w-\[340px\] { max-width: 100% !important; }

  /* Stack every multi-column grid into a single column ... */
  [class*="grid-cols-"] { grid-template-columns: 1fr !important; }
  /* ... but keep the donation-widget amount buttons in their row. */
  .grid-cols-3.gap-\[10px\] { grid-template-columns: repeat(3, 1fr) !important; }

  /* Side-by-side photo + text split rows stack vertically on mobile. */
  .stack-on-mobile { flex-direction: column !important; gap: 28px !important; }

  /* Collapse the big desktop left-margins (nav gaps, hero offset, etc.). */
  [class*="ml-["] { margin-left: 0 !important; }

  /* Tame oversized fixed heights. Map containers keep a (smaller) fixed
     height because their map fills an absolute inset-0 child — auto would
     collapse them to zero. Hero / mission card are handled by hooks below. */
  .h-\[626px\], .h-\[560px\] { height: 420px !important; }

  /* Scale down the large display headings so they fit a phone. */
  .text-\[60px\] { font-size: 34px !important; line-height: 1.15 !important; }
  .text-\[48px\] { font-size: 30px !important; line-height: 1.2  !important; }
  .text-\[46px\] { font-size: 29px !important; line-height: 1.2  !important; }
  .text-\[44px\] { font-size: 28px !important; line-height: 1.2  !important; }
  .text-\[42px\] { font-size: 27px !important; line-height: 1.2  !important; }
  .text-\[40px\] { font-size: 26px !important; line-height: 1.25 !important; }
  .text-\[36px\] { font-size: 24px !important; line-height: 1.25 !important; }
  .text-\[34px\] { font-size: 23px !important; line-height: 1.3  !important; }
  .text-\[32px\] { font-size: 22px !important; line-height: 1.3  !important; }
  .text-\[30px\] { font-size: 21px !important; line-height: 1.3  !important; }

  /* ---------- Shared NAV → compact bar + slide-down menu ----------
     Replace the desktop hover-nav with a single sticky bar (logo left,
     hamburger right) plus an overlay menu built by mobile-nav.js. The
     bar is sticky so the logo + menu button stay reachable while
     scrolling — donate is always one tap away. */
  header { position: sticky !important; top: 0 !important; z-index: 1950 !important;
    height: auto !important; padding: 10px 16px !important;
    box-shadow: 0 1px 0 rgba(15,40,70,.06) !important; }
  header > div { width: 100% !important; flex-direction: row !important;
    align-items: center !important; justify-content: space-between !important; gap: 0 !important; }
  header > div > div:first-child { flex-direction: row !important; align-items: center !important; gap: 0 !important; }
  header nav { display: none !important; }      /* desktop nav replaced by the menu */
  header .m-deskcta { display: none !important; }   /* hide desktop contact | donate (tagged by JS) */
  header img { height: 52px !important; }

  /* hamburger button — 44x44 tap target */
  .m-burger { display: inline-flex !important; flex-direction: column; justify-content: center;
    align-items: center; gap: 5px; width: 44px; height: 44px; padding: 10px; margin-right: -8px;
    background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .m-burger span { display: block; width: 24px; height: 2px; border-radius: 2px;
    background: #21303F; transition: transform .25s ease, opacity .2s ease; }
  .m-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .m-burger.open span:nth-child(2) { opacity: 0; }
  .m-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* dimmed overlay; the white panel slides down beneath the sticky bar */
  .m-menu { display: block !important; position: fixed !important; inset: 0; z-index: 1900;
    background: rgba(15,28,48,.5); opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease; }
  .m-menu.open { opacity: 1; visibility: visible; }
  /* the panel scrolls internally if the menu (e.g. an expanded section on a
     short phone) is taller than the screen, so nothing is ever cut off */
  .m-menu-inner { position: absolute; left: 0; right: 0; top: 0; background: #fff;
    padding: 80px 16px 22px;                       /* clears the sticky bar */
    max-height: 100vh; max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    border-radius: 0 0 22px 22px; box-shadow: 0 20px 44px rgba(15,40,70,.20);
    transform: translateY(-14px); opacity: 0;
    transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .22s ease; }
  .m-menu.open .m-menu-inner { transform: translateY(0); opacity: 1; }

  /* menu rows */
  .m-row { display: flex; align-items: center; justify-content: space-between; min-height: 52px;
    padding: 6px 8px; font-family: 'Mulish', sans-serif; font-size: 16px; font-weight: 700;
    color: #21303F; text-decoration: none; border-bottom: 1px solid #eef2f6; }
  .m-group { border-bottom: 1px solid #eef2f6; }
  /* accordion: the entire row is the toggle (a full-width button) */
  .m-accrow { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left;
    -webkit-tap-highlight-color: transparent; }
  .m-acclabel { font-size: 16px; font-weight: 700; }
  .m-chev { display: inline-flex; align-items: center; justify-content: center; width: 28px;
    flex: 0 0 28px; color: #5a6a7a; }
  .m-chev svg { transition: transform .25s ease; }
  .m-group.open .m-chev svg { transform: rotate(180deg); }
  .m-sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .m-group.open .m-sub { max-height: 400px; }
  .m-subrow { display: flex; align-items: center; min-height: 46px; padding: 4px 8px 4px 20px;
    font-size: 14.5px; font-weight: 600; color: #5a6a7a; text-decoration: none; }
  .m-subrow:last-child { padding-bottom: 12px; }

  /* active-page indicator: red text everywhere, plus a left accent bar on the
     exact current page (a top-level link or a sub-link, not the section parent) */
  .m-active { color: #E6001A !important; }
  .m-subrow.m-active { font-weight: 700; }
  .m-subrow.m-active, .m-row.m-active:not(.m-accrow) { box-shadow: inset 3px 0 0 #E6001A; }

  /* primary donate CTA pinned to the bottom of the menu (thumb zone) */
  .m-donate { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px;
    margin-top: 18px; border-radius: 12px; background: #E6001A; color: #fff; text-decoration: none;
    font-family: 'Mulish', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: .02em;
    box-shadow: 0 10px 24px rgba(230,0,26,.28); }

  /* ---------- index.html bespoke sections (hooked classes) ---------- */
  /* Hero: drop the 1000px fixed height. Keep a tall band of the background
     photo visible at the top (padding-top), lay a contrast scrim over the
     image so the white headline pops, and narrow the donation widget so the
     photo shows down both sides instead of being covered edge-to-edge. */
  .hero { height: auto !important; padding-top: 112px !important; padding-bottom: 44px !important; }
  .hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(14,30,54,.42) 0%, rgba(14,30,54,.04) 26%, rgba(14,30,54,.30) 64%, rgba(14,30,54,.74) 100%); }
  .hero-content { position: relative; z-index: 2; width: 100% !important; max-width: 430px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 18px !important; padding-right: 18px !important; }
  .hero-content > h1 { padding-top: 0 !important; text-shadow: 0 2px 16px rgba(8,22,42,.55); }
  .hero-content .bg-white.rounded-lg { max-width: 338px !important; margin-left: auto !important; margin-right: auto !important; box-shadow: 0 14px 40px rgba(8,22,42,.32) !important; }

  /* Mission photo card: on phones, stop the white text card from covering
     the photo. Let the image flow at its natural height, then drop the text
     card directly BELOW it so the full photo is visible. */
  .photo-card { height: auto !important; aspect-ratio: auto !important; margin-top: 24px !important; background: transparent !important; overflow: visible !important; }
  .photo-card > img { position: static !important; width: 100% !important; height: auto !important; border-radius: 12px !important; }
  .photo-card-overlay { position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; margin-top: 14px !important; padding: 18px !important; box-shadow: 0 6px 20px rgba(15,40,70,.12) !important; }

  /* Impact map: remove the desktop overlap (-mb-[406px] + pt-[572px]) so
     the following section just stacks normally. */
  #impact-map { margin-bottom: 28px !important; }
  .action-section { padding-top: 48px !important; padding-bottom: 56px !important; }

  /* Impact-map header: stack the brand + the 3 stat columns. */
  .map-head { height: auto !important; flex-direction: column !important; padding: 14px !important; gap: 12px !important; }
  .map-stats { flex-wrap: wrap !important; justify-content: center !important; }
  .map-stats > div { border-left: 0 !important; padding-left: 12px !important; padding-right: 12px !important; }

  /* ---------- Founder / Home Team bio cards: phone layout ---------- */
  /* Headshot with the name + role beside it on a top row, then the bio as a
     full-width paragraph below (uses the whole card width, easy to read). */
  .bio-card { grid-template-columns: 116px 1fr !important; column-gap: 18px !important; padding: 24px !important;
    grid-template-areas:
      "photo name"
      "photo role"
      "bio   bio" !important; }
  .bio-card .bio-photo { width: 116px !important; height: 140px !important; align-self: start !important; }
  .bio-card .bio-name { align-self: end !important; }
  .bio-card .bio-text { margin-top: 18px !important; }

  /* ---------- Photo galleries: tidy 2-up thumbnail grid on phones ------ */
  /* The blanket 1-column rule above would stretch every gallery photo to a
     full-width 260px-tall crop — a very long strip. Keep galleries as a
     2-column grid with shorter, proportional thumbnails instead. */
  .grid-cols-3.gap-5 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .grid-cols-3.gap-5 > img { height: 150px !important; }

  /* ---------- Map control overlays (both homepage maps) ---------- */
  /* On desktop a location pill sits top-left and the jump buttons top-right.
     On a phone there isn't room for both on one line, so they overlap. Pin
     the pill as a full-width bar at the top, hide its long hint, and drop the
     jump buttons onto their own wrapping row just below it. */
  .map-pill { left: 10px !important; right: 10px !important; top: 10px !important; height: 34px !important;
    padding: 0 12px !important; font-size: 11px !important; justify-content: flex-start !important; }
  .map-hint { display: none !important; }
  .map-ctrls { left: 10px !important; right: 10px !important; top: 52px !important; justify-content: flex-start !important;
    flex-wrap: wrap !important; gap: 8px !important; }
  .map-ctrls > button { height: 34px !important; padding: 0 12px !important; font-size: 11px !important; }

  /* Map pin popups/hover cards: never let a fixed 300px popup bleed off a
     narrow screen. Cap to the viewport so the text stays inside its box. */
  .h2f-hover-card { width: min(300px, 82vw) !important; }
  .h2f-iw { width: min(300px, 84vw) !important; }
  .maplibregl-popup { max-width: 88vw !important; }

  /* ---------- Footer: tidy 2-up link columns instead of one long stack ----
     The blanket grid-cols rule above collapses the 4-up footer to a single
     column (4 stacked sections = a very long footer). A 2x2 grid is tighter
     and scans better; the higher specificity beats the blanket rule. */
  footer .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 26px 18px !important; }
  footer ul a { display: inline-block; padding: 3px 0; }   /* comfier tap area on link rows */
}

/* =====================================================================
   <= 480px — small phones: tighter padding + smaller headings
   ===================================================================== */
@media (max-width: 480px) {
  body > header,
  body > section:not(.hero),
  body > footer { padding-left: 14px !important; padding-right: 14px !important; }

  .text-\[60px\] { font-size: 28px !important; }
  .text-\[48px\] { font-size: 26px !important; }
  .text-\[46px\] { font-size: 25px !important; }
  .text-\[44px\] { font-size: 25px !important; }
  .text-\[42px\] { font-size: 24px !important; }
  .text-\[40px\] { font-size: 23px !important; }
  .text-\[36px\] { font-size: 22px !important; }
  .text-\[34px\] { font-size: 21px !important; }
  .text-\[32px\] { font-size: 20px !important; }
  .text-\[30px\] { font-size: 19px !important; }

  header img { height: 46px !important; }   /* match the tighter small-phone bar */
  .hero-content > h1 { font-size: 23px !important; }

  /* Smaller gallery thumbnails so the 2-up grid stays proportional. */
  .grid-cols-3.gap-5 > img { height: 124px !important; }
}