/**
 * Mobile Navigation Overrides for index.html
 * Adds hamburger menu functionality while preserving original navigation structure
 */

/* Show hamburger button on mobile/tablet */
@media (max-width: 768px) {
  .mobile-menu-button {
    display: flex !important;
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1001;
    background: #333333;
    padding: 10px;
    border: 2px solid #DECE8D;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
  }

  .mobile-menu-button span {
    background-color: #DECE8D !important;
    width: 24px;
    height: 3px;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  .mobile-menu-button:hover {
    background: #DECE8D;
    border-color: #333333;
  }

  .mobile-menu-button:hover span {
    background-color: #333333 !important;
  }

  .mobile-menu-button:active {
    background: #C4A855;
    border-color: #333333;
  }

  /* Hide original navigation on mobile */
  .navigation_bar #div1,
  .navigation_bar #div7 {
    display: none !important;
  }

  /* Hide the h1 text on mobile */
  .navigation_bar #div136 {
    display: none !important;
  }
}

/* Desktop: Hide hamburger, show original nav */
@media (min-width: 769px) {
  .mobile-menu-button {
    display: none !important;
  }

  /* Ensure original navigation is visible on desktop */
  .navigation_bar #div1,
  .navigation_bar #div7 {
    display: block !important;
  }
}