/**
 * G A Lesskis site  CSS
* Hamburger menu styling
 */
.navbar {
  display: grid;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 1rem;
  position: relative;
  float:right;
}

/* 1. Hide the checkbox hack element */
.menu-toggle {
  display: none;
}

/* 2. Style the Hamburger Icon Button */
.hamburger-label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  cursor: pointer;
  z-index: 10;
}

.hamburger-line {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--gal-body);
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}

/* 3. Mobile Navigation Menu defaults */
.nav-menu {
	position: absolute;
	top:2rem;
	right:1px;
    background: var(--gal-body);
  list-style: none;
  padding: 0;
  margin-left: auto;
  display: grid;  
  opacity: 0;
  max-height: 100%;
  width:300px;
  transition: all 0.4s ease-in-out;
  z-index:10;
  overflow-y:auto;
  overflow-x:hidden;
}


.nav-link0 {
	font-size: 0.9rem;
  display: block;
  margin-top: 1.0rem;
  color: black;
  text-decoration: none;
  border-top: 1px solid black;
}
.nav-link {
  display: block;
  color: black;
  text-decoration: none;
}
.nav-list {
	list-style: none;
	padding-left: 0.3rem;
}

/* 4. The Magic Trick: Toggle open state when checkbox is checked */
.menu-toggle:checked ~ .nav-menu {
  opacity: 1;
  max-height: 500px; /* Adjust based on menu height */
  display: grid;
}

/* 5. Optional: Animate hamburger lines into an 'X' close button */
.menu-toggle:checked ~ .hamburger-label .hamburger-line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.menu-toggle:checked ~ .hamburger-label .hamburger-line:nth-child(2) {
  opacity: 0;
}

.menu-toggle:checked ~ .hamburger-label .hamburger-line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}