/* Title: menu_hamburger.css */
/* Date: 2024-12-30 */

/* Hamburger toggle button styling */
#hamburger-toggle {
    position: fixed;           /* Fixes the button in place */
    top: -4px;                 /* 10px from the top of the viewport */
    left: 15px;                /* right: 15px;  from the right of the viewport (change to left: for left-sided hamburger menu*/
    z-index: 1001;             /* Ensures button is above other elements */
    width: 30px;               /* Width of the button */
    height: 40px;              /* Height of the button */
    background: transparent;   /* Transparent background */
    border: none;              /* Removes default button border */
    cursor: pointer;           /* Changes cursor to pointer on hover */
    padding: 0;                /* Removes default padding */
}

/* "Menu" text styling */
#hamburger-toggle::before {
    content: "Menu";           /* Adds "Menu" text */
    position: absolute;        /* Positions text relative to button */
    top: 4px;                  /* Aligns to top of button (default: 0)*/
    left: 50%;                 /* Centers horizontally */
    transform: translateX(-50%);/* Adjusts for perfect centering */
    color: darkgreen;          /* Sets text color */
    font-weight: bold;         /* Makes text bold */
    font-size: 10px;           /* Sets font size */
}

/* "Menu" text styling when printing */
@media print {
  /* Hide "Menu" text before #hamburger-toggle when printing */
  #hamburger-toggle::before {
    content: none !important;    /* Remove the "Menu" text content */
    display: none !important;    /* Hide the pseudo-element completely */
  }
}

/* Hamburger icon bars styling */
.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
    display: block;            /* Makes bars block-level elements */
    width: 100%;               /* Full width of parent */
    height: 3px;               /* Height of each bar */
    background-color: darkgreen;/* Color of bars */
    position: absolute;        /* Allows precise positioning */
    transition: all 0.3s;      /* Smooth transition for animation */
}

.hamburger-icon {
    top: 25px;                 /* Positions middle bar */
}

.hamburger-icon::before {
    content: '';               /* Required for pseudo-element */
    top: -8px;                 /* Positions top bar */
}

.hamburger-icon::after {
    content: '';               /* Required for pseudo-element */
    bottom: -8px;              /* Positions bottom bar */
}

/* Styles for the "X" state when menu is open */
#hamburger-toggle[aria-expanded="true"] .hamburger-icon {
    background-color: transparent; /* Hides middle bar */
}

#hamburger-toggle[aria-expanded="true"] .hamburger-icon::before {
    top: 0;                    /* Moves top bar to center */
    transform: rotate(45deg);  /* Rotates to form half of X */
}

#hamburger-toggle[aria-expanded="true"] .hamburger-icon::after {
    bottom: 0;                 /* Moves bottom bar to center */
    transform: rotate(-45deg); /* Rotates to form other half of X */
}

/* positions the menu container which contains the Tigra menu relative to its nearest positioned ancestor (which should be the hamburger button) and initially hides it; adjusts the top and right values as needed to achieve the desired positioning relative to the hamburger icon */
#hamburger-menu-container {
        display: none; 				/* Ensure this is toggled in JS */
        position: fixed; 			/* Keep it fixed for scrolling */
        z-index: 1000; 				/* Ensure it's above other content */
        top: 0px; 					/* Position below hamburger button */
        left: 25px;  				/* Aligns to the left edge (left: 10px;) or Aligns to the right edge (right: 10px;) */
        max-width: 300px; 			/* Maximum width for mobile */
        padding: 100px; 			/* Padding for content (was: 20px) */
}

/* Removes focus outline for better aesthetics */
#hamburger-toggle:focus {
    outline: none;             /* Removes default focus outline */
}