/* --- inline menu (wide screens) --- */
.menu-inline ul {
  list-style: none;
  display: flex;
  gap: 0.1rem;
  padding: 0; margin: 0;
}
.menu-inline a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.2vw, 1.05rem);
  color: var(--color-green-dark);
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
  transition: background var(--transition-medium);
}
.menu-inline a:hover,
.menu-inline a:focus-visible { background: var(--color-green-tint); }

/* --- hamburger + dropdown (narrow screens) --- */
.menu-dropdown { position: relative; display: none; }
.menu-dropdown .hamburger {
  background: transparent;
  border: none;
  color: var(--color-green-dark);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background var(--transition-medium);
}
.menu-dropdown .hamburger:hover,
.menu-dropdown .hamburger:focus-visible { background: var(--color-green-tint); }

.menu-dropdown .menu-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: max-content;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-strong);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  pointer-events: none;
  z-index: 5;
}
.menu-dropdown:hover .menu-panel,
.menu-dropdown:focus-within .menu-panel,
.menu-dropdown[aria-expanded="true"] .menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
  pointer-events: auto;
}
.menu-dropdown .menu-panel ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0; margin: 0;
}
.menu-dropdown .menu-panel a {
  display: block;
  padding: 0.7rem 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-green-dark);
  text-decoration: none;
  border-radius: var(--radius);
  transition: background var(--transition-medium);
}
.menu-dropdown .menu-panel a:hover,
.menu-dropdown .menu-panel a:focus-visible { background: var(--color-green-tint); }

/* Switch modes when the inline lockup runs out of room. */
@media (max-width: 38rem) {
  .menu-inline   { display: none; }
  .menu-dropdown { display: block; }

  header > .header-right {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
  }
}