/* Base styles for flyout menu — only active below 960px */
@media (max-width: 960px) {
  .nav-primary {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    padding-top: 8em;
	padding-left: 20px;
    background-color: var(--seashell);
	border-left: 5px solid var(--rust);
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.3s ease-in-out;
    z-index: 19999;
    overflow-y: auto;
  }

  .nav-primary.active {
    right: 0;
  }

  .menu-toggle {
    position: fixed;
    top: 1em;
    right: 1em;
    z-index: 110001;
    cursor: pointer;
	font-family: 'Cormorant-Garamond', serif;
	text-decoration: none!important;
	font-style: italic;
	letter-spacing: 0.1em;
	padding: 12px 22px!important;
  }

  .menu-toggle,
  .menu-toggle:focus,
  .menu-toggle:hover {
	background: var(--rust)!important;
	color: var(--seashell)!important;
	padding: 12px 22px!important;
  }
	
  .menu-toggle.activated {
	background: transparent!important;
	color: var(--rust)!important;
  }

  .genesis-nav-menu .menu-item {
    border-bottom: none;
  }

  .genesis-nav-menu .menu-item:last-of-type {
    border-bottom: 1px solid var(--licorice);
  }
	
  button.sub-menu-toggle {
	width: 100%;
	  padding: 6px;
	  text-align: right;
  }
	
  button.sub-menu-toggle:focus {
	outline: none;
  }

  /* Overlay backdrop */
  .flyout-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
  }

  .flyout-overlay.active {
    display: block;
  }

  /* Lock scroll when menu is open */
  body.flyout-open {
    overflow: hidden;
  }

  /* Staggered animation for menu items */
  .nav-primary .menu > li {
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .nav-primary.active .menu > li {
    transform: translateX(0);
  }

  .nav-primary.active .menu > li:nth-child(1) { transition-delay: 0.1s; }
  .nav-primary.active .menu > li:nth-child(2) { transition-delay: 0.2s; }
  .nav-primary.active .menu > li:nth-child(3) { transition-delay: 0.3s; }
  .nav-primary.active .menu > li:nth-child(4) { transition-delay: 0.4s; }
  /* Add more delays as needed */
}