/* Extra breathing room from the browser edge on desktop */

@media only screen and (min-width: 1200px) {
  .large-container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Extra breathing room from the browser edge on mobile */

@media only screen and (max-width: 767px) {
  .large-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .main-footer .footer-logo img {
    width: auto;
    height: clamp(32px, 6vw, 44px);
  }
}

/* Logo: unconstrained natively (2103x748px), so it renders oversized on
   desktop where no other rule caps it. Scale it fluidly instead of a
   single fixed size, scoped to desktop only. */

@media only screen and (min-width: 1200px) {
  .main-header .logo-box img,
  .sticky-header .logo-box img {
    width: auto;
    height: clamp(40px, 3vw, 58px);
  }

  .main-footer .footer-logo img {
    width: auto;
    height: clamp(36px, 2.6vw, 50px);
  }
}

/* ─────────────────────────────────────────────────────────
   Full-bleed hero support
   The .hero-slider uses margin-left/-right: -50vw technique
   to break out of container. We must ensure no ancestor clips it.
   ───────────────────────────────────────────────────────── */
.boxed_wrapper {
  overflow-x: hidden; /* prevent horizontal scroll from the 100vw hero trick */
}

/* The page-content area that wraps @yield('content') must not
   have overflow:hidden that would clip the full-bleed hero. */
.page-wrapper,
.page-content {
  overflow: visible;
}

/* Ensure .global-header doesn't create a stacking context that clips the hero */
.header--transparent + * .hero-slider,
.hero-slider {
  position: relative;
}