/* ------------------------------------------------------------
   Mobile menu button
   Loaded after styles.css, which it deliberately overrides.

   The site-wide `button, .btn` rule gives every <button> a gold
   ::before fill that slides in on hover, and lifts only ELEMENT
   children above it (`button > * { z-index: 1 }`). The menu button
   held a bare text node, so on hover the gold fill painted straight
   over the word "Menu" and the control became a solid yellow block —
   permanently so on touch, where :hover sticks after a tap.

   Fixed here by removing that fill from this one button and giving it
   a proper hamburger icon instead of a text label.
   ------------------------------------------------------------ */

.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 7px;
  margin-right: -7px;
  color: var(--gold);
  overflow: visible;
  cursor: pointer;
  transition: color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Kill the inherited sliding gold fill. */
.menu-btn::before,
.menu-btn::after {
  content: none !important;
  display: none !important;
}

.menu-btn .menu-icon {
  display: block;
  width: 26px;
  height: 26px;
}

.menu-btn .menu-icon line {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform 0.38s var(--ease), opacity 0.2s ease;
}

.menu-btn:hover,
.menu-btn[aria-expanded="true"] { color: var(--gold-bright); }

.menu-btn:focus { outline: none; }
.menu-btn:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 5px;
}

/* Open state: the three bars resolve into a close (X) mark. */
.menu-btn[aria-expanded="true"] .menu-icon .l1 { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon .l2 { opacity: 0; transform: scaleX(0.3); }
.menu-btn[aria-expanded="true"] .menu-icon .l3 { transform: translateY(-5px) rotate(-45deg); }

/* Only shown where styles.css collapses the horizontal nav. */
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-btn,
  .menu-btn .menu-icon line { transition: none; }
}