/* resets & small helpers for main layout */
.primary-menu { display:flex; gap:18px; list-style:none; padding:0; margin:0; justify-content:center }
.primary-menu li a { font-size:14px; color:var(--muted) }
.posts-navigation { margin-top:22px; text-align:center }
.widget { margin-bottom:20px }

/* ===== Drawer/backdrop animation styles ===== */

/* Backdrop -- invisible by default */
.site-drawer-backdrop {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  z-index: 99990;
}

/* When open: backdrop visible and clickable */
.site-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer base (ensure transform origin left for mobile slide) */
.site-drawer {
  will-change: transform, opacity;
  transition: transform 320ms cubic-bezier(.22,.9,.25,1), opacity 220ms linear;
  transform-origin: left center;
  opacity: 1;
}

/* CLOSED state: keep off-screen (mobile slide) */
.site-drawer:not(.is-open) {
  /* small offset + scale for subtle movement; actual left:-320px handles offscreen */
  transform: translateX(-8%) scale(0.992);
  opacity: 0.98;
}

/* OPEN state: fully onscreen */
.site-drawer.is-open {
  transform: translateX(0) scale(1);
  opacity: 1;
}

/* Desktop dropdown entrance tweak */
@media (min-width: 900px) {
  .site-drawer {
    transform-origin: top center;
    transition: transform 320ms cubic-bezier(.22,.9,.25,1), opacity 200ms linear;
    transform: translateY(-6px) scale(0.985);
    opacity: 0;
  }
  .site-drawer.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition-duration: 300ms;
  }
}

/* Staggered menu items: initial hidden state */
.site-drawer .primary-menu-drawer a {
  opacity: 0;
  transform: translateY(8px);
  transition: transform 280ms cubic-bezier(.22,.9,.25,1), opacity 220ms linear;
  display: block;
}

/* When drawer opens, stagger in menu items using a small delay pattern. */
.site-drawer.is-open .primary-menu-drawer a,
.site-drawer.menu-animate .primary-menu-drawer a {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays (adjust number of items if needed) */
.site-drawer.menu-animate .primary-menu-drawer li:nth-child(1) a { transition-delay: 0ms; }
.site-drawer.menu-animate .primary-menu-drawer li:nth-child(2) a { transition-delay: 40ms; }
.site-drawer.menu-animate .primary-menu-drawer li:nth-child(3) a { transition-delay: 80ms; }
.site-drawer.menu-animate .primary-menu-drawer li:nth-child(4) a { transition-delay: 120ms; }
.site-drawer.menu-animate .primary-menu-drawer li:nth-child(5) a { transition-delay: 160ms; }
.site-drawer.menu-animate .primary-menu-drawer li:nth-child(6) a { transition-delay: 200ms; }
.site-drawer.menu-animate .primary-menu-drawer li:nth-child(7) a { transition-delay: 240ms; }

/* small hover effect for links */
.site-drawer .primary-menu-drawer a:hover {
  background: rgba(0,0,0,0.03);
  text-decoration: none;
}

/* ensure the backdrop is behind the drawer but above other content */
.site-drawer { z-index: 99999; }

/* Accessibility focus styles for the toggles and links */
.site-toggle:focus, .primary-menu-drawer a:focus {
  outline: 3px solid rgba(6,147,227,0.12);
  outline-offset: 3px;
}