/* Mobile menu fixes */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 2.75rem;
  height: 2.75rem;
  position: relative;
  z-index: 1100;
  padding: 0.6rem;
  margin-right: -0.4rem;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  transition: var(--transition);
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  width: auto;
}

.nav-toggle span::before { top: 0.85rem; }
.nav-toggle span::after { bottom: 0.85rem; }

/* Keep hamburger light on dark headers */
.site-header.is-scrolled .nav-toggle span,
.site-header.is-scrolled .nav-toggle span::before,
.site-header.is-scrolled .nav-toggle span::after,
.site-header--solid .nav-toggle span,
.site-header--solid .nav-toggle span::before,
.site-header--solid .nav-toggle span::after {
  background: var(--white) !important;
}

.nav-toggle.is-active span { background: transparent !important; }
.nav-toggle.is-active span::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.nav-toggle.is-active span::after {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

body.nav-open { overflow: hidden; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .main-nav {
    position: fixed !important;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: var(--ink);
    padding: 1.5rem 1.5rem 3rem;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1050;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-nav.is-open {
    transform: translateX(0) !important;
  }

  .main-nav ul {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  .main-nav > ul > li { width: 100%; }

  .main-nav a {
    display: block;
    padding: 1rem 0;
    font-size: 0.9rem;
    color: var(--stone) !important;
    border-bottom: 1px solid rgba(184, 148, 90, 0.12);
  }

  .dropdown {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border: none !important;
    padding: 0 0 0 1rem !important;
    display: none;
    min-width: 0;
  }

  .has-dropdown.is-open .dropdown { display: block; }

  .dropdown li a {
    border-bottom: none;
    padding: 0.65rem 0;
    font-size: 0.8rem;
  }
}