/**
 * Critical hamburger display fix
 * This file ensures the hamburger menu is always visible on mobile screens
 * It uses !important tags to override any conflicting styles
 */

/* Make hamburger visible on mobile regardless of other styles */
@media screen and (max-width: 992px) {
  /* Absolute positioning to ensure visibility */
  .hamburger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 30px !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background-color: rgba(
      0,
      0,
      0,
      0.1
    ) !important; /* Slight background for visibility */
    border-radius: 5px !important;
    padding: 6px !important;
    z-index: 10000 !important; /* Extremely high z-index */
    cursor: pointer !important;
    border: 2px solid #000 !important; /* Strong border to ensure visibility */
  }

  /* Make hamburger lines visible */
  .hamburger .line1,
  .hamburger .line2,
  .hamburger .line3 {
    width: 100% !important;
    height: 4px !important; /* Thicker for better visibility */
    background-color: #000 !important; /* Black for maximum contrast */
    margin: 2px 0 !important;
    display: block !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
  }

  /* Active state animation */
  .hamburger.active .line1 {
    transform: translateY(11px) rotate(45deg) !important;
  }

  .hamburger.active .line2 {
    opacity: 0 !important;
  }

  .hamburger.active .line3 {
    transform: translateY(-11px) rotate(-45deg) !important;
  }

  /* Ensure header container has proper positioning */
  header .container {
    position: relative !important;
  }

  /* Fix navigation menu appearance */
  .nav-links.active {
    right: 0 !important;
    display: flex !important;
  }
}