/* Netlify ScrollSpy & Header Fixes */

/* Fix header overlay issue - prevent white pill from covering content */
.header {
  z-index: 1000 !important;
}

.header .container {
  pointer-events: auto !important;
  position: relative;
  z-index: 1001 !important;
}

.header .navbar {
  pointer-events: auto !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 1001 !important;
}

/* Force all header elements to be clickable */
.navbar-toggler {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 9999 !important;
  cursor: pointer !important;
  /* Ensure Bootstrap can attach events */
  touch-action: manipulation !important;
}

.header .logo {
  pointer-events: auto !important;
  z-index: 1002 !important;
}

.header .btn {
  pointer-events: auto !important;
  z-index: 1002 !important;
}

/* Ensure offcanvas works properly */
.offcanvas {
  z-index: 9999 !important;
}

.offcanvas-backdrop {
  z-index: 9998 !important;
}

/* Ensure sections scroll properly with fixed header */
section {
  scroll-margin-top: 120px;
}

/* Enhanced active state for ScrollSpy */
.nav-link.active,
.nav-link.active:hover {
  background-color: #ffffff !important;
  color: #1B1D1E !important;
  transition: all 0.3s ease;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* FIX SPACING: Add proper padding to banner so header doesn't cover text */
.banner-section {
  padding-top: 130px !important;
}

@media (min-width: 768px) {
  .banner-section {
    padding-top: 140px !important;
  }
}

@media (min-width: 992px) {
  .banner-section {
    padding-top: 150px !important;
  }
}

/* Ensure navbar items are clickable */
.navbar-nav {
  z-index: 1001;
}

/* Fix for mobile menu specifically */
@media (max-width: 1199px) {
  .navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}