/**
 * Custom hamburger menu styling for Conway's Coffee
 * Colored bars with hover effect
 */

/* Custom color variables */
:root {
  --hamburger-color-red: #FF0015;
  --hamburger-color-orange: #FFA500;
  --hamburger-color-purple: #9932CC;   /* gac was  #2B0066,  really its Dark Orchid #9932CC */
}

/* Style the hamburger menu container */
.hamburger-menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  padding: 8px;
  flex: 0 0 auto;
}

/* Basic styling for all hamburger bars */
.hamburger-menu span {
  display: block;
  width: 30px !important;
  height: 5px; /*was 3px  Slightly thicker for better color visibility */
  margin: 3px 0;
  transition: all 0.3s ease; /* Smooth transition for color changes */
}

/* Individual color for each bar */
.hamburger-menu span:nth-child(1) {
  background-color: var(--hamburger-color-red);
}

.hamburger-menu span:nth-child(2) {
  background-color: var(--hamburger-color-orange);
}

.hamburger-menu span:nth-child(3) {
  background-color: var(--hamburger-color-purple);
}

/* Hover effect - colors shift position on hover */
.hamburger-menu:hover span:nth-child(1) {
  background-color: var(--hamburger-color-purple);
}

.hamburger-menu:hover span:nth-child(2) {
  background-color: var(--hamburger-color-red);
}

.hamburger-menu:hover span:nth-child(3) {
  background-color: var(--hamburger-color-orange);
}

/* Fix for hamburger menu lines - ensure all have same width */
.hamburger-menu span:nth-child(1),
.hamburger-menu span:nth-child(2),
.hamburger-menu span:nth-child(3) {
  width: 30px !important;
}