/* Responsive fixes, loaded after the Webflow stylesheets on every page. */

/* Never let the page scroll sideways on small screens. */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}
@supports (overflow-x: clip) {
  /* clip doesn't create a scroll container, so sticky headers keep working */
  html,
  body {
    overflow-x: clip;
  }
}

/* Media never wider than its container. */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
}

/* Grid/flex children default to min-width:auto, so a wide video or image
   stretches the whole column past the screen. */
.w-layout-grid > *,
.brix---link-content,
.cf-services-left-contain,
.cf-services-right-contain {
  min-width: 0;
}

/* Footer Google Map has a fixed width="400" attribute. */
.waves-top-right-footer-2 iframe {
  width: 100%;
  max-width: 400px;
}

/* Homepage image carousel is fixed at 500px. */
.carousel-container {
  max-width: 100%;
}

@media screen and (max-width: 991px) {
  /* Footer columns: keep the 120px desktop gap from pushing content off-screen. */
  .waves-top-right-footer-2 {
    grid-column-gap: 40px;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 767px) {
  /* Homepage video box is fixed at 450x450 inline. */
  .cf-services-left-contain[style] {
    max-width: 100% !important;
  }
  .brix---image-wrapper-br-24px-shadow[style*="width: 450px"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }

  .waves-top-right-footer-2 {
    flex-direction: column;
    grid-row-gap: 24px;
    width: 100%;
  }

  /* "Investor Relations" eyebrow label: was 50% wide with a fixed 22px height,
     so it wrapped and overlapped the page title. */
  .section-title-div {
    width: auto;
    height: auto;
    white-space: nowrap;
    margin-bottom: 8px;
  }

  /* Mobile menu: long items wrapped and jumped to left alignment, and
     30px line spacing made the investor list very long. */
  .cf-navigation-4-link {
    justify-content: center;
    text-align: center;
    margin-bottom: 10px;
    line-height: 1.4;
  }
  .cf-link-text-navbar-4 {
    font-size: 20px;
    text-align: center;
  }

  /* Investor document cards: full width, less side padding. */
  .card-container {
    padding: 24px 16px;
    gap: 14px;
  }
  .card {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 16px;
  }
  .card-content {
    gap: 12px;
  }
  .card h6 {
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .download-icon {
    flex: none;
    padding: 8px;
    margin: -8px;
  }

  .cf-flex-section-2 > h2 {
    font-size: 24px;
    line-height: 1.3;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Tables (policy / governance pages) scroll inside themselves, not the page. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}