/* ============================================================
   mobile-fixes.css  — global responsive safety net (added 2026-08-19)
   Conservative & additive: fixes the common causes of a broken mobile
   view (media overflow, horizontal scroll, oversized desktop-only spacing)
   without altering the intentional desktop layout. Loaded LAST in
   inc/head.php so these rules win where needed.
   ============================================================ */

/* 1. Media must never overflow its container — the #1 cause of the
      "page is wider than the screen / tiny zoomed-out" look on phones. */
img,
svg,
video,
canvas {
   max-width: 100%;
}

img,
video,
canvas {
   height: auto;
}

iframe,
embed,
object {
   max-width: 100%;
}

/* 2. Kill horizontal page scrolling site-wide. */
html,
body {
   overflow-x: hidden;
   max-width: 100%;
}

/* 3. Long words / URLs / emails wrap instead of forcing the page wider. */
h1, h2, h3, h4, h5, h6,
p, li, td, th, span, a {
   overflow-wrap: break-word;
   word-wrap: break-word;
}

/* 4. Phone-only guards (<= 767.98px). Desktop is left untouched. */
@media (max-width: 767.98px) {

   /* Plain (unstyled) content tables scroll horizontally instead of
      stretching the whole page. Bootstrap-classed tables are left alone. */
   table:not([class]) {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }

   /* Google Maps / video embeds go full width on phones. */
   iframe {
      width: 100% !important;
   }

   /* Scrolling admission marquee shouldn't push the layout wider. */
   marquee {
      max-width: 100%;
   }

   /* Very large desktop-only flex gaps that overflow on phones. */
   .your_future {
      gap: 1.5rem !important;
      flex-wrap: wrap;
   }

   /* Homepage "foundation" stat numbers are 52px with a 32px line-height —
      they crowd/overlap on a phone. Scale down with a sane line-height. */
   .foundationspap ul li strong,
   .foundationspap ul li span {
      font-size: 34px !important;
      line-height: 1.15 !important;
   }

   /* --- Homepage "Enquire Here" form card (#register) --- */
   /* Roomier form card on phones so the fields and captcha aren't cramped/cut off. */
   #register .card-body.p-4 {
      padding: 1rem !important;
   }
}

/* ------------------------------------------------------------
   Google reCAPTCHA is a FIXED 304px-wide iframe. Visually scaling
   it is not enough — its layout box stays 304px and still pushes
   out of the card ("goes out of the box"). So we also CLIP the
   wrapper (overflow:hidden) so the box can't force the form wider
   than the screen. The wrapper is tagged .recaptcha-fit on the
   homepage form; :has() covers the other forms' wrappers too.
   ------------------------------------------------------------ */
/* Homepage form wrapper (always applied). */
.recaptcha-fit {
   overflow: hidden;
   max-width: 100%;
}

/* Other forms' wrappers, via :has() — kept as a SEPARATE rule so that
   browsers without :has() support simply ignore this one line rather
   than dropping the .recaptcha-fit rule above. */
:has(> .g-recaptcha) {
   overflow: hidden;
   max-width: 100%;
}

@media (max-width: 480px) {
   .g-recaptcha {
      transform: scale(0.85);
      transform-origin: left top;
   }
}

@media (max-width: 360px) {
   .g-recaptcha {
      transform: scale(0.75);
      transform-origin: left top;
   }
}

@media (max-width: 320px) {
   .g-recaptcha {
      transform: scale(0.66);
      transform-origin: left top;
   }
}