/* =======================================================================================
 * File: /assets/css/hover-dropdown.css
 * Purpose: Rollover (hover) dropdown using your ORIGINAL menu styles
 * Behavior only: opens on hover/focus-within; JS can toggle .is-open for touch.
 * ======================================================================================= */

:root {
  --dd-open-dur: .32s;           /* match original timing feel */
  --dd-ease-in:  cubic-bezier(.2,.7,.2,1);
  --dd-ease-out: cubic-bezier(.2,0,0,1);
}

#site-primary-nav { position: relative; }

/* Allow theme hover-open (we rely on it now) — remove the old neutralizer */
@media (hover:hover){
  /* no overrides needed */
}

/* Base positioning: show below the parent item */
#site-primary-nav .menu-item-has-children { position: relative; }

/* --- ORIGINAL LOOK, adapted from sticky version --- */
#site-primary-nav .menu-item-has-children > .sub-menu{
  position: absolute;                 /* changed from fixed */
  top: 100%;                          /* sits below the parent */
  left: 0;                            /* default align-left under parent */
  min-width: 220px;                   /* same as original */
  max-width: 360px;                   /* same as original */
  background: #fff;                   /* same as original */
  border: 1px solid rgba(0,0,0,.08);  /* same as original */
  box-shadow: 0 10px 24px rgba(0,0,0,.12);  /* same as original */
  border-radius: 8px;                 /* same as original */
  z-index: 9999;

  /* Closed state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);         /* small slide for affordance */
  transition:
    opacity    var(--dd-open-dur) var(--dd-ease-out),
    transform  var(--dd-open-dur) var(--dd-ease-out),
    visibility 0s linear var(--dd-open-dur);
}

/* OPEN on hover/focus-within (desktop & keyboard) */
@media (hover:hover){
  #site-primary-nav .menu-item-has-children:hover > .sub-menu,
  #site-primary-nav .menu-item-has-children:focus-within > .sub-menu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity    var(--dd-open-dur) var(--dd-ease-in),
      transform  var(--dd-open-dur) var(--dd-ease-in),
      visibility 0s;
  }
}

/* OPEN via JS for touch: .is-open is applied to the LI */
#site-primary-nav .menu-item-has-children.is-open > .sub-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity    var(--dd-open-dur) var(--dd-ease-in),
    transform  var(--dd-open-dur) var(--dd-ease-in),
    visibility 0s;
}

/* --- ORIGINAL vertical list look (unchanged) --- */
#site-primary-nav .sub-menu,
#site-primary-nav .sub-menu li { margin: 0; padding: 0; list-style: none; }
#site-primary-nav .sub-menu a { display:block; padding:.6rem .9rem; text-decoration:none; line-height:1.3; }

/* Guard against legacy full-width rules (unchanged intent) */
#site-primary-nav .menu-item-has-children > .sub-menu {
  inset: auto; width: auto; margin: 0;
}

/* Optional: flip to right edge if JS adds .align-right when near viewport edge */
#site-primary-nav .menu-item-has-children.align-right > .sub-menu{
  left: auto; right: 0;
}

/* Nested flyouts (keep your original feel; only positioning) */
#site-primary-nav .sub-menu .menu-item-has-children{ position: relative; }
#site-primary-nav .sub-menu .menu-item-has-children > .sub-menu{
  top: 0; left: 100%;
}
#site-primary-nav .sub-menu .menu-item-has-children.align-right > .sub-menu{
  left: auto; right: 100%;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #site-primary-nav .menu-item-has-children > .sub-menu{
    transition: none;
    transform: none;
  }
}