/* ============================================================
   Global responsive layer (2025) — loaded LAST, site-wide.
   Everything here lives inside media queries, so the desktop
   layout is never affected. Goal: a clean phone/tablet experience
   across every page.
   ============================================================ */

/* ---- Never allow sideways scrolling on small screens ---- */
@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }
  /* Media never wider than the screen */
  img,
  video,
  iframe,
  .socialkit-feed {
    max-width: 100%;
  }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
  h1 {
    font-size: 38px;
  }
  .top-heading {
    font-size: 38px;
  }
}

/* ---- Phone: readable type scale + tighter rhythm ---- */
@media (max-width: 600px) {
  h1,
  .top-heading,
  .blog__title,
  .post__title {
    font-size: 30px !important;
    line-height: 1.22;
  }
  h2 {
    font-size: 23px;
  }
  h3 {
    font-size: 19px;
  }
  .company-name {
    font-size: 23px;
  }
  .socialkit-title,
  .contact-form-title,
  .stories-head h1,
  .section-team-head h1,
  .section-excited .excited-heading {
    font-size: 25px;
  }

  /* Consistent comfortable side padding for the new sections */
  .section-valueprops,
  .section-team,
  .section-supporters,
  .section-socialkit,
  .section-excited,
  .section-dyk,
  .section-stories,
  .section-contact-form {
    padding-left: 6%;
    padding-right: 6%;
  }

  /* New home blocks stack cleanly */
  .excited-points li,
  .overview-excited-points li {
    font-size: 15px;
  }

  /* Footer: stack + comfortable spacing already handled in footer.css;
     just make tap targets a touch larger */
  .footer-nav a,
  .footer-social-links a,
  .footer-legal a {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* ---- Small phones ---- */
@media (max-width: 400px) {
  h1,
  .top-heading,
  .blog__title,
  .post__title {
    font-size: 26px !important;
  }

  /* Testimonial overlay: a bit more compact so it fits the card */
  .member-quote-overlay {
    padding: 18px 18px;
  }
  .member-quote-overlay p {
    font-size: 14px;
  }
}