/* KRC Responsive Overrides (mobile-first)
   Loaded AFTER theme.min.css
*/

/* 1) Global safety nets */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* Avoid long words/URLs blowing out layouts */
body { overflow-wrap: anywhere; }

/* 2) Header / Nav */
#navbar--wrapper { padding-left: 16px; padding-right: 16px; }
#navbar--wrapper .custom-logo-link img { width: auto; max-height: 56px; height: auto; }
.right-nav-menu { display: flex; align-items: center; gap: 12px; }

/* Bootstrap toggler icon sometimes invisible without explicit background */
.navbar-toggler { border: 0; }
.navbar-toggler:focus { box-shadow: none; }

/* 3) Home page fixed-width block */
.how_we_work--style { width: 100% !important; max-width: 1000px; margin-left: auto; margin-right: auto; }

/* 4) Cards / grids that tend to overflow */
.list-items-group-wrapper,
.work-overview-articles--group,
.work-overview-articles--group.layout-content-width,
.services-articles--group,
.project-articles--group {
  width: 100%;
}

/* 5) Forms */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container textarea,
.wpforms-container select {
  max-width: 100%;
}

/* =============== Breakpoints =============== */

/* Small phones */
@media (max-width: 575.98px) {

  /* Reduce horizontal padding in common wrappers used across templates */
  .layout-content-width,
  .center-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Make the nav content stack nicely */
  #navbar--wrapper { flex-wrap: wrap; }
  #main-nav.navbar { align-items: center; }
  #main-nav .custom-logo-link { margin-right: 8px; }
  .right-nav-menu { margin-left: auto; }

  /* Pop-over menu header spacing */
  .full-menu .top-menu-section { padding-left: 16px; padding-right: 16px; }

  /* Force multi-column “bucket” grids to a single column */
  .list-items-group-wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .list-items-group-wrapper .list-item-buckets,
  .list-items-group-wrapper .list-item-sector,
  .list-items-group-wrapper .list-item-project,
  .list-items-group-wrapper .can-show.list-item-buckets {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Prevent “thumbnail + text” combos from becoming cramped */
  .item-thumbnail { width: 100% !important; }

  /* Headings can run too large on mobile */
  h1 { font-size: clamp(1.8rem, 6vw, 2.5rem); }
  h2 { font-size: clamp(1.4rem, 5vw, 2.0rem); }
  h3 { font-size: clamp(1.2rem, 4.5vw, 1.6rem); }

  /* Tables: allow sideways scroll instead of breaking layout */
  table { display: block; overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }

  /* Videos */
  video { width: 100% !important; height: auto !important; }
}

/* Tablets */
@media (min-width: 576px) and (max-width: 991.98px) {
  .list-items-group-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
  .list-items-group-wrapper .list-item-buckets,
  .list-items-group-wrapper .list-item-sector,
  .list-items-group-wrapper .list-item-project,
  .list-items-group-wrapper .can-show.list-item-buckets {
    max-width: 100% !important;
  }
}

/* Desktop guardrails: avoid images/videos stretching beyond container */
@media (min-width: 992px) {
  .layout-content-width { max-width: 1200px; margin-left: auto; margin-right: auto; }
}
/* MOBILE: prevent video blocks from showing a black background */
@media (max-width: 768px) {
  video {
    background: transparent !important;
    display: block;
  }

  /* If the video sits in a rounded/cropped wrapper, force it to fill */
  .hero-slider-frame {
    background: transparent !important;
    overflow: hidden;              /* keeps the crop */
  }
}