/* ==========================================================================
   Mobile Navigation — Dorset Cereals
   ==========================================================================
   Contents:
     1. Burger toggle button
     2. Burger bar animation (hamburger ↔ cross)
     3. Off-canvas drawer
     4. Drawer overlay / backdrop
     5. Drawer menu items
     6. Desktop / mobile visibility breakpoints
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Burger toggle button
   --------------------------------------------------------------------------
   Three-bar icon; hidden on desktop, visible at the mobile breakpoint.
   Sits flush-right in the header alongside the logo.
   -------------------------------------------------------------------------- */

.mobile-nav-toggle {
  display: none; /* shown via media query */
  position: relative;
  z-index: 1020;
  width: 28px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


/* --------------------------------------------------------------------------
   2. Burger bar animation (hamburger ↔ cross)
   --------------------------------------------------------------------------
   Three <span> bars transition into an × when [aria-expanded="true"].
   Uses transform origin + rotate for a clean morph.
   -------------------------------------------------------------------------- */

.mobile-nav-toggle__bar {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--dc-text);
  border-radius: 2px;
  transition:
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 400ms ease;
}

.mobile-nav-toggle__bar:nth-child(1) { top: 0; }
.mobile-nav-toggle__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.mobile-nav-toggle__bar:nth-child(3) { bottom: 0; }

/* Open state — morph to cross */
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar:nth-child(2) {
  opacity: 0;
  transform: translateY(-50%) scaleX(0.3);
}

.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar:nth-child(3) {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}


/* --------------------------------------------------------------------------
   3. Off-canvas drawer
   --------------------------------------------------------------------------
   Slides in from the right. Semi-transparent dark background lets the
   brand texture bleed through subtly.
   -------------------------------------------------------------------------- */

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  width: min(320px, 85vw);
  height: 100%;
  background: rgba(0, 40, 42, 0.97);
  transform: translateX(100%);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
}

.mobile-nav-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-nav-drawer__inner {
  padding: 5rem 2rem 3rem;
}


/* --------------------------------------------------------------------------
   4. Drawer overlay / backdrop
   --------------------------------------------------------------------------
   Dark semi-transparent layer behind the drawer. Fades in/out.
   Clicking it closes the drawer.
   -------------------------------------------------------------------------- */

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 500ms ease,
    visibility 500ms ease;
  pointer-events: none;
}

.mobile-nav-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* --------------------------------------------------------------------------
   5. Drawer menu items
   --------------------------------------------------------------------------
   Vertical stack of links, styled to match the site's heading/nav
   typography. Staggered fade-in when drawer opens.
   -------------------------------------------------------------------------- */

.mobile-nav-drawer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-nav-drawer__menu li {
  margin: 0;
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 480ms ease,
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-nav-drawer.is-open .mobile-nav-drawer__menu li {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered entrance — each item delayed generously for a relaxed reveal */
.mobile-nav-drawer.is-open .mobile-nav-drawer__menu li:nth-child(1) { transition-delay: 160ms; }
.mobile-nav-drawer.is-open .mobile-nav-drawer__menu li:nth-child(2) { transition-delay: 260ms; }
.mobile-nav-drawer.is-open .mobile-nav-drawer__menu li:nth-child(3) { transition-delay: 360ms; }
.mobile-nav-drawer.is-open .mobile-nav-drawer__menu li:nth-child(4) { transition-delay: 460ms; }
.mobile-nav-drawer.is-open .mobile-nav-drawer__menu li:nth-child(5) { transition-delay: 560ms; }
.mobile-nav-drawer.is-open .mobile-nav-drawer__menu li:nth-child(6) { transition-delay: 660ms; }
.mobile-nav-drawer.is-open .mobile-nav-drawer__menu li:nth-child(7) { transition-delay: 760ms; }
.mobile-nav-drawer.is-open .mobile-nav-drawer__menu li:nth-child(8) { transition-delay: 860ms; }

.mobile-nav-drawer__menu a {
  display: block;
  padding: 0.85rem 0;
  color: var(--dc-text);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition:
    color 260ms ease,
    padding-left 260ms ease;
}

.mobile-nav-drawer__menu a:hover,
.mobile-nav-drawer__menu a:focus {
  color: var(--dc-accent);
  padding-left: 0.4rem;
  text-decoration: none;
}

.mobile-nav-drawer__menu li:last-child a {
  border-bottom: 0;
}


/* --------------------------------------------------------------------------
   6. Desktop / mobile visibility breakpoints
   --------------------------------------------------------------------------
   Below 900px: desktop nav hides, burger + drawer become available.
   Above 900px: desktop nav shown, burger + drawer hidden.
   -------------------------------------------------------------------------- */

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

  .site-header__nav--desktop {
    display: none;
  }
}

@media (min-width: 901px) {
  .mobile-nav-drawer,
  .mobile-nav-overlay {
    display: none !important;
  }
}

/* Prevent body scroll when drawer is open */
body.mobile-nav-open {
  overflow: hidden;
}

/* Lift the header above the drawer so the burger/cross stays visible */
body.mobile-nav-open .site-header {
  z-index: 1020;
}