#menu .sub-menu{
  background:transparent !important;
  box-shadow:none !important;
  padding-left:16px !important;
}
#menu .sub-menu li,
#menu .sub-menu li:first-of-type,
#menu .sub-menu li:last-of-type{
  border:0 !important;
  border-left:2px solid var(--c-gold) !important;
  float:none !important;
}
#menu .sub-menu li a{
  display:block !important;
  padding:7px 14px !important;
  font:400 16px/1.4 "Playfair Display", serif !important;
  color:#5f646a !important;
  text-transform:capitalize !important;
  background:transparent !important;
  transition:color .18s ease, padding-left .18s ease !important;
}
#menu .sub-menu li a:hover{
  background:transparent !important;
  color:var(--c-gold) !important;
  padding-left:20px !important;
  text-decoration:none !important;
}

/* Mobile/tablet submenu show-hide now lives entirely in EL/style.css, inside its
   @media (max-width: 991px) block, as:
     #menu li...:not(.submenu-open) .sub-menu { display: none }
     #menu li....submenu-open      .sub-menu { display: block }
   No !important and no specificity fight. overlay.js toggles .submenu-open.

   [EL 2026-07-09] The old override here was scoped to max-width:768px while the
   parent rule it fought sits in max-width:991px. Between 769px and 991px -- iPad
   portrait and most Android tablets -- the parent hid the submenu and this rule
   never applied, so tapping Services did nothing. overlay.js gates on
   (hover: none), not on width, so the class was being toggled the whole time. */

/* Make nav rows behave as tap targets, not selectable text. Breakpoint matches the
   parent's 991px so tablets are covered. */
@media (max-width: 991px){
  #menu .menu-item-has-children,
  #menu .menu-item-has-children > a{
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none;
    touch-action:manipulation;
    cursor:pointer;
  }
}