/**
 * site-nav.css — paired with site-nav.js. Replaces the FareHarbor theme's
 * jQuery-driven sub-menu reveal with pure CSS (desktop) + class-toggle
 * (mobile).
 *
 * SPECIFICITY NOTES: the theme stylesheet (theme-*.css) hides sub-menus
 * with rules like
 *
 *   .horizontal-menu .menu .menu-item--has-sub-menu .sub-menu {
 *     display:block; opacity:0; visibility:hidden;
 *     transform: scale(0.9) translateY(-20px);
 *   }
 *   .hamburger-menu .menu .sub-menu { display:none }
 *
 * which beat any 2-class selector we'd naively write. To win the cascade
 * cleanly (no !important) we match the theme's specificity exactly and
 * flip the right properties for each layout:
 *
 *   - Desktop (.horizontal-menu): theme sets display:block already and
 *     hides via opacity+visibility+transform — so we restore those on
 *     hover / focus-within. Animation is the theme's own transition.
 *   - Mobile (.hamburger-menu):   theme sets display:none — we toggle
 *     display:block via the .menu-item--focused class that site-nav.js
 *     adds on tap.
 */

/* ===== Desktop: reveal sub-menu on hover / keyboard focus ============= */
.horizontal-menu .menu .menu-item--has-sub-menu:hover > .sub-menu,
.horizontal-menu .menu .menu-item--has-sub-menu:focus-within > .sub-menu,
.horizontal-menu .menu .menu-item--has-sub-menu.menu-item--focused > .sub-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
}

/* Same trick for nested sub-sub-menus on desktop. */
.horizontal-menu .menu .sub-menu-item--has-sub-sub-menu:hover > .sub-sub-menu,
.horizontal-menu .menu .sub-menu-item--has-sub-sub-menu:focus-within > .sub-sub-menu,
.horizontal-menu .menu .sub-menu-item--has-sub-sub-menu.sub-menu-item--focused > .sub-sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* ===== Mobile: site-nav.js toggles .menu-item--focused on tap ========= */
/* The nav element keeps class="menu horizontal-menu" on ALL viewports.
   The theme CSS uses @media queries to show/hide the hamburger button.
   site-nav.js checks window.matchMedia("(min-width: 992px)") at click
   time — below 992px it prevents default and toggles the class.

   We use a @media query here (not .hamburger-menu) because the HTML
   class never changes — it's always horizontal-menu. */
@media (max-width: 991px) {
  /* Ensure the menu container doesn't clip expanded sub-menus.
     Theme CSS sets max-height + overflow-y:scroll on .menu, and the
     jQuery theme code dynamically sets max-height via inline style.
     We need overflow:visible so sub-menus aren't clipped. */
  .menu--focused .menu-list {
    overflow: visible !important;
    height: auto !important;
  }
  .site-header .menu.menu--focused {
    overflow-y: auto !important;
  }

  .menu-item--has-sub-menu.menu-item--focused > .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: static !important;
    box-shadow: none;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  .sub-menu-item--has-sub-sub-menu.sub-menu-item--focused > .sub-sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: static !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
}