/* Keep the page from scrolling sideways on small screens only */
@media (max-width: 576px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Carousels: ensure slides never exceed viewport width */
  .carousel, .carousel-inner, .carousel-item {
    width: 100%;
    max-width: 100%;
  }
  .carousel-item img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* Brand/logo shouldn’t cause overflow on phones */
  .navbar-brand img {
    max-width: 42px;
    height: auto;
  }
  .navbar-brand h1 {
    font-size: 1.5rem;
    line-height: 1.1;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
  }

  /* Long headings shouldn’t force horizontal scroll */
  h1, h2, .display-1, .display-2, .display-3, .display-4, .display-5 {
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }

  /* Dropdowns & buttons shouldn’t create long unbroken lines */
  .dropdown-menu { max-width: 100vw; overflow-x: hidden; }
  .btn, .nav-link, .dropdown-item { white-space: normal; }

  /* “Back to top” button: keep it inside the viewport on xs */
  .back-to-top { right: 16px; }
}

/* IMPORTANT: removed the global .container-fluid .row margin reset */
/* (that was collapsing gutters on desktop) */


/* === Global Bootstrap primary switched to black === */
:root {
  --bs-primary: #000000;
  --bs-primary-rgb: 0, 0, 0;
}

/* Make sure common utilities pick up the new primary */
.text-primary       { color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity, 1)) !important; }
.bg-primary         { background-color: var(--bs-primary) !important; }
.border-primary     { border-color: var(--bs-primary) !important; }
.link-primary       { color: var(--bs-primary) !important; }

/* Buttons */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #111 !important;
  border-color: #111 !important;
}

/* (Optional) keep the top bar text white */
.topbar              { background: #000 !important; color: #fff !important; }
.topbar a, .topbar i { color: #fff !important; }
.topbar .text-primary { color: #fff !important; }