/* Custom overrides to prevent horizontal scrolling and ensure proper mobile spacing */
html, body, .main, .content {
  overflow-x: hidden;
}

/* Prevent decorative wave from exceeding viewport width on small screens */
@media (max-width: 767.98px) {
  .wave {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Add a bit of safe-area padding for notched devices */
  .container,
  .container-fluid,
  .navbar .container-fluid {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }
}

/* Guard against any element accidentally expanding width */
img, video, canvas, svg {
  max-width: 100%;
}

@media (max-width: 575.98px) {
  #navbar .container-fluid {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.5rem;
  }

  #navbar .navbar-toggler {
    margin-left: auto;
  }

  #navbar .navbar-collapse {
    flex-basis: 100%;
    width: 100%;
  }

  #navbar img.navbar-brand.d-md-none {
    width: min(160px, 60vw) !important;
    height: auto;
  }
}