/*==================================================================
Responsive Fixes
Consolidated, theme-wide responsiveness patches. Loaded last so it
wins the cascade over style.css / responsive.css on equal specificity.
==================================================================*/

/* ---- 1. Prevent any element from forcing horizontal scroll ---- */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ---- 2. Embedded media (YouTube/video iframes are hardcoded
   width="560" height="315" in several templates with nothing to
   constrain them below that width) ---- */
iframe,
embed,
object,
video {
  max-width: 100%;
}

/* Give hardcoded 560x315 YouTube iframes (course videos, "Life at
   NPTI" videos) a fluid 16:9 box instead of a fixed pixel size,
   without needing to touch every template. Excludes Magnific
   Popup's own .mfp-iframe-scaler iframes, which already get
   correctly scaled by magnific-popup.min.css. */
iframe[width="560"],
.content iframe[src*="youtube"],
.content iframe[src*="youtu.be"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

.mfp-iframe-scaler iframe {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
}

/* ---- 3. Tables shouldn't force the page wider than the viewport.
   (Wide data tables should still be wrapped in .table-responsive in
   markup for a scrollable UX; this is just a safety net so an
   un-wrapped table can't blow out the layout.) ---- */
table {
  max-width: 100%;
}

/* ---- 4. Extra-small phones (< 375px: iPhone SE, older Androids) ---- */
@media only screen and (max-width: 374px) {
  body {
    font-size: 82%;
  }

  .container-fluid.customPadding {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  h1, .h1 {
    font-size: 1.6rem;
  }

  h2, .h2 {
    font-size: 1.35rem;
  }
}

/* ---- 5. Foldables / small tablets in portrait (between the
   existing 767px and 991px rules can leave gaps for some
   components that only had 767/992 breakpoints) ---- */
@media only screen and (min-width: 375px) and (max-width: 575px) {
  .kp-navbarCllops nav {
    width: 100%;
  }
}

/* ---- 6. Large desktop / ultra-wide monitors: cap line-length and
   hero/background sections so content doesn't stretch edge to edge
   and become hard to read above ~1920px ---- */
@media only screen and (min-width: 1600px) {
  .container-fluid.customPadding {
    padding-left: 60px;
    padding-right: 60px;
  }
}

/* ---- 7. Buttons/inputs shouldn't overflow their parent on narrow
   screens (accessibility font-size toolbar, search bar, etc.) ---- */
input,
button,
select,
textarea {
  max-width: 100%;
}

/* ---- 8. Long unbroken strings (emails, URLs) in narrow columns
   shouldn't force horizontal scroll ---- */
.content,
.field,
p {
  overflow-wrap: break-word;
  word-wrap: break-word;
}