/* StickyMenuBarDefinitive - Simple and working solution */

/* Base styles */
.sticky-menu-definitive {
  position: relative;
  background: linear-gradient(90deg, 
    rgba(50, 50, 120, 0.95) 0%, 
    rgba(20, 20, 40, 0.98) 25%, 
    rgba(20, 20, 40, 0.98) 50%, 
    rgba(50, 50, 120, 0.95) 75%,
    rgba(20, 20, 40, 0.98) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
  padding: 12px 8px;
  width: 100%;
  transition: all 0.3s ease;
  z-index: 100;
}

/* When sticky */
.sticky-menu-definitive.is-sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  z-index: 999999 !important;
  margin: 0 !important;
  max-width: 100vw !important;
  animation: slideDown 0.3s ease-out;
}

/* Placeholder */
.sticky-menu-placeholder {
  visibility: hidden;
}

/* Animation */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Inner container */
.sticky-menu-inner {
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

/* Import base styles from original */
@import './StickyMenuBar.css';

/* Override conflicting styles */
.sticky-menu-definitive.is-sticky .sticky-menu-inner {
  padding: 0 20px;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .sticky-menu-definitive {
    padding: 8px 4px;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 1100;
    width: 100%;
    /* Remove borders and shadows on mobile */
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    /* Simplified background without gradient */
    background: rgba(20, 20, 40, 0.98) !important;
  }
  
  .sticky-menu-definitive.is-sticky {
    /* On mobile, use sticky positioning instead of fixed */
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    transform: none !important;
    animation: none !important;
    /* Ensure no borders when sticky */
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }
  
  .sticky-menu-definitive.is-sticky .sticky-menu-inner {
    padding: 0 10px;
  }
  
  /* Remove placeholder on mobile as sticky doesn't need it */
  .sticky-menu-placeholder {
    display: none;
  }
}

/* Force on top of everything */
.sticky-menu-definitive.is-sticky {
  transform: translateZ(9999px);
}

/* Make sure it works even with body overflow-x hidden */
html body .sticky-menu-definitive.is-sticky {
  position: fixed !important;
}