/* =====================================================================
   PAK AID WELFARE TRUST — SITE-WIDE MOBILE RESPONSIVE FIX
   Loaded once in includes/header.php, so it applies to every page.
   Only touches tablet (≤1024px) and mobile (≤767px) — desktop is untouched.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) THE MAIN BUG: hero sections use a -150px "pull up" margin so the
      video/hero art sits nicely behind the header on large screens.
      On phones the header still takes real space, so that same -150px
      pulls the hero heading text UP underneath the header and hides it
      (this is exactly what you saw on the Education & Digital page).
      This "program page" hero uses element ID 01f8144.

      NOTE: the homepage hero (element ID 55b895c) is INTENTIONALLY
      excluded from this rule. It uses a transparent, absolutely
      positioned header that overlays the video, so its own page CSS
      already ships a larger, correctly-tuned top padding (270px
      desktop / 290px mobile) to push "TOGETHER WE CAN MAKE A
      DIFFERENCE" + the Donate button down below the logo/menu. Forcing
      it down to 28px here made the logo, Donate button, and heading
      overlap on phones — so it's handled separately below instead.
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-element-01f8144 {
    margin-top: 0 !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-01f8144 {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
  }
  /* keep the background video/overlay filling the now-repositioned section */
  .elementor-element-01f8144 .elementor-background-video-container {
    top: 0 !important;
  }
  /* hero heading/paragraph text: shrink gracefully instead of overflowing */
  .elementor-element-01f8144 .elementor-widget-text-editor p span[style*="font-size"] {
    font-size: clamp(20px, 6.5vw, 30px) !important;
    line-height: 1.35 !important;
  }
}

/* ---------------------------------------------------------------------
   1b) Homepage hero (element ID 55b895c): keep its own generous top
       padding so the heading + Donate button always clear the
       transparent logo/menu bar that sits on top of the video.
       This section's own CSS already had a well-tuned 290px top
       padding for mobile — an earlier pass here mistakenly shrank
       that to 220px "to tidy things up," which wasn't enough room
       and let the header sit on top of the heading again. Fixed by
       giving it *more* clearance instead, over the full phone range.
--------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-element-55b895c {
    padding-top: 300px !important;
    padding-bottom: 60px !important;
  }
  .elementor-element-55b895c .elementor-heading-title {
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.3 !important;
  }
}

/* ---------------------------------------------------------------------
   2) Never allow horizontal scrolling / clipped content on small screens
--------------------------------------------------------------------- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap {
  max-width: 100%;
}

/* ---------------------------------------------------------------------
   3) Images / video / iframes always scale down inside their box
--------------------------------------------------------------------- */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
.elementor-widget-image img {
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------
   4) Don't let a fixed pixel/viewport min-height trap content or create
      big empty gaps on phones
--------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-section.elementor-section-height-default,
  .elementor-section.elementor-section-height-min-height {
    min-height: auto !important;
  }
}

/* ---------------------------------------------------------------------
   5) Buttons (Donate Now, etc.) never overflow their column on narrow phones
--------------------------------------------------------------------- */
@media (max-width: 480px) {
  .elementor-button,
  a.elementor-button,
  .elementor-widget-button .elementor-button {
    max-width: 100%;
    white-space: normal;
    padding: 10px 18px;
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------
   6) Header row: logo + hamburger + Donate button stay on one tidy line
      instead of colliding with the hero heading beneath them
--------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-11800 .elementor-element.elementor-element-8151066 > .elementor-container {
    flex-wrap: nowrap;
    align-items: center;
  }
  .elementor-11800 .elementor-element.elementor-element-a859d88 {
    top: 0 !important;
  }
}

/* ---------------------------------------------------------------------
   7) Any data table becomes horizontally scrollable instead of breaking
      the page layout
--------------------------------------------------------------------- */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------
   8) Icon-list / checklist rows (used throughout the program pages)
      wrap cleanly instead of the text running off screen
--------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-icon-list-items {
    width: 100%;
  }
  .elementor-icon-list-item {
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------------------
   9) Stat / counter rows ("Our Impact" numbers) wrap into a neat 2-column
      grid on phones instead of squeezing 4-5 numbers into one row
--------------------------------------------------------------------- */
@media (max-width: 767px) {
  .elementor-widget-be-counter {
    text-align: center;
  }
}

/* ---------------------------------------------------------------------
   10) General comfortable side padding so text never touches the
       screen edge on small phones
--------------------------------------------------------------------- */
@media (max-width: 480px) {
  .elementor-section > .elementor-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}