/* ==========================================================================
   Mobile navigation — menu button, slide-out panel and header trimming.

   The desktop header is unchanged: every rule in this file sits inside a
   max-width query, so nothing here applies above 1080px. Below that width the
   inline links no longer fit and the site used to simply drop them, which left
   a phone with no way to reach swarm removal, school visits, contact or the
   sponsorship categories. The menu button and panel put every destination back.

   Loaded after each page's own styles (shop.css or the inline block), because
   it deliberately overrides a few of their small-screen header rules.

   Written against the brand custom properties declared in each page's :root,
   with literal fallbacks, in the same manner as cart.css.
   ========================================================================== */

/* ---- Menu button --------------------------------------------------------
   Created by js/nav.js, so it only ever exists when the panel it opens
   exists. Hidden above the breakpoint; the desktop nav needs no button.
   ----------------------------------------------------------------------- */
.nav-toggle { display: none; }

@media (max-width: 1080px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(224, 179, 88, 0.45);
    border-radius: 12px;
    background: rgba(224, 179, 88, 0.08);
    color: var(--offwhite, #f3eee2);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.2s, border-color 0.2s;
  }
  .nav-toggle:hover,
  .nav-toggle:focus-visible {
    background: rgba(224, 179, 88, 0.18);
    border-color: var(--honey-300, #e0b358);
  }
  .nav-toggle:focus-visible {
    outline: 2px solid var(--honey-300, #e0b358);
    outline-offset: 2px;
  }
  .nav-toggle-bars {
    display: block;
    width: 20px;
    height: 14px;
    position: relative;
  }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after,
  .nav-toggle-bars span {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }
  .nav-toggle-bars::before { top: 0; }
  .nav-toggle-bars span { top: 6px; }
  .nav-toggle-bars::after { bottom: 0; }

  /* ---- Header on a small screen ---------------------------------------
     One row, always: brand, the pill call to action, menu button. The plain
     text links move into the panel rather than being dropped.
     ------------------------------------------------------------------- */
  .header-inner {
    gap: 0.75rem;
    flex-wrap: nowrap;
  }
  .site-nav {
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.6rem;
  }
  .site-nav a:not(.nav-cta) { display: none; }
}

@media (max-width: 620px) {
  /* A shorter sticky header leaves more of a phone screen for the page. */
  .header-inner { min-height: 62px; }
  .brand { gap: 0.6rem; }
  .brand-mark { width: 40px; height: 40px; }
  /* The brand is the one part of the row allowed to give way, so a long name
     on a 320px screen trims itself instead of shoving the button off-screen. */
  .brand-name {
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-nav { flex: none; }
  .site-nav a { font-size: 0.84rem; }
  .nav-cta { padding: 0.4em 0.8em; }

  /* Section pills are tap targets here, so give them a finger-sized height. */
  .section-nav-inner { min-height: 52px; }
  .section-nav-list a { padding: 0.58em 0.95em; }

  /* Matches the trimmed header, so an anchor lands just under it. */
  html { scroll-padding-top: 124px; }
}

@media (max-width: 560px) {
  /* A brand, two pills and a button is one thing too many. The outlined pill
     goes; it is the first thing in the panel, and on the queen page the
     reserve bar along the bottom of the screen already carries it. */
  .site-nav .nav-cta:not(.nav-cta-solid) { display: none; }
  .nav-toggle { width: 44px; height: 44px; }
}

/* ---- Backdrop + panel ---------------------------------------------------
   Slides in from the right like the basket drawer, but wears the dark header
   palette so the two never read as the same surface. Sits above the sticky
   header and below the basket drawer, which is the one thing that should be
   able to cover it.
   ----------------------------------------------------------------------- */
.mnav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 930;
  background: rgba(12, 20, 14, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.mnav-backdrop.is-open { opacity: 1; pointer-events: auto; }

.mnav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 935;
  width: min(380px, 88vw);
  display: flex;
  flex-direction: column;
  background: var(--forest-900, #14241a);
  color: var(--offwhite, #f3eee2);
  font-family: var(--sans, system-ui, sans-serif);
  border-left: 1px solid rgba(224, 179, 88, 0.28);
  box-shadow: -24px 0 60px -30px rgba(0, 0, 0, 0.8);
  transform: translateX(100%);
  /* Hidden rather than merely off-screen, so a closed panel is out of the tab
     order — but the hiding waits for the slide to finish. Opening flips it
     visible with no delay at all, because the script moves focus into the
     panel the moment the class lands and nothing invisible can take focus. */
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s linear 0.32s;
}
.mnav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0s;
}

.mnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  padding: 0.9rem 1.1rem 0.9rem 1.3rem;
  border-bottom: 1px solid rgba(224, 179, 88, 0.2);
}
.mnav-title {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--honey-300, #e0b358);
}
.mnav-close {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(243, 238, 226, 0.22);
  border-radius: 10px;
  background: none;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.2s, border-color 0.2s;
}
.mnav-close:hover,
.mnav-close:focus-visible {
  background: rgba(243, 238, 226, 0.1);
  border-color: rgba(243, 238, 226, 0.5);
}
.mnav-close:focus-visible {
  outline: 2px solid var(--honey-300, #e0b358);
  outline-offset: 2px;
}

.mnav-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1.1rem 1.3rem calc(1.6rem + env(safe-area-inset-bottom));
}

/* ---- Actions at the top of the panel ---- */
.mnav-actions {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}
.mnav-btn {
  display: block;
  padding: 0.85em 1.1em;
  border: 1px solid rgba(224, 179, 88, 0.55);
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  color: var(--offwhite, #f3eee2);
  font-size: 0.97rem;
  font-weight: 700;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.mnav-btn:hover,
.mnav-btn:focus-visible {
  background: rgba(224, 179, 88, 0.16);
  border-color: var(--honey-300, #e0b358);
}
.mnav-btn-solid {
  background: var(--honey, #c0871f);
  border-color: var(--honey, #c0871f);
  color: #1f1606;
  box-shadow: 0 10px 24px -16px rgba(120, 80, 10, 0.9);
}
.mnav-btn-solid:hover,
.mnav-btn-solid:focus-visible {
  background: var(--honey-300, #e0b358);
  border-color: var(--honey-300, #e0b358);
  color: #1f1606;
}

/* ---- Grouped destinations ---- */
.mnav-group { margin-bottom: 1.5rem; }
.mnav-group:last-child { margin-bottom: 0; }
.mnav-group h2 {
  margin: 0 0 0.5rem;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(243, 238, 226, 0.5);
}
.mnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mnav-list li + li { border-top: 1px solid rgba(243, 238, 226, 0.09); }
.mnav-list a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 48px;
  padding: 0.7rem 0.2rem;
  text-decoration: none;
  color: rgba(243, 238, 226, 0.88);
  font-size: 1rem;
  font-weight: 600;
  transition: color 0.2s, padding-left 0.2s;
}
.mnav-list a:hover,
.mnav-list a:focus-visible {
  color: var(--honey-300, #e0b358);
  padding-left: 0.45rem;
}
.mnav-list a[aria-current] {
  color: var(--honey-300, #e0b358);
}
.mnav-list a[aria-current]::before {
  content: "";
  width: 3px;
  align-self: stretch;
  margin: 0.55rem 0;
  border-radius: 2px;
  background: var(--honey-300, #e0b358);
}
.mnav-label { flex: 1 1 auto; }
.mnav-count {
  flex: none;
  min-width: 1.6em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: rgba(243, 238, 226, 0.1);
  color: rgba(243, 238, 226, 0.66);
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
}

/* ---- Tap to call or write ---- */
.mnav-reach {
  display: grid;
  gap: 0.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(224, 179, 88, 0.2);
}
.mnav-reach a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.35rem 0;
  text-decoration: none;
  color: var(--offwhite, #f3eee2);
  font-size: 0.98rem;
  font-weight: 600;
}
.mnav-reach a:hover,
.mnav-reach a:focus-visible { color: var(--honey-300, #e0b358); }
.mnav-reach span {
  flex: none;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(243, 238, 226, 0.45);
}

/* The panel is a phone and tablet affordance; a desktop window that is
   resized wide gets the inline nav back, so make sure the panel cannot be
   left hanging open across the breakpoint. */
@media (min-width: 1081px) {
  .mnav,
  .mnav-backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mnav,
  .mnav.is-open,
  .mnav-backdrop,
  .mnav-list a { transition: none; }
}

@media print {
  .nav-toggle,
  .mnav,
  .mnav-backdrop { display: none !important; }
}