/* Only the desktop dropdowns. Header, top-level links and mobile menu stay native. */
@media (min-width:981px) {
  #main-header #top-menu li > .sub-menu {
    box-sizing:border-box;
    width:min(320px,calc(100vw - 32px));
    padding:8px;
    border-radius:0 0 5px 5px;
    box-shadow:0 10px 28px rgba(0,0,0,.12);
    text-transform:none;
  }
  /* The legacy header floats its links, leaving the default absolute top at 0. */
  #main-header #top-menu > li > .sub-menu {top:100%;left:0}
  #main-header #top-menu .sub-menu .sub-menu {top:-3px;left:100%}
  #main-header #top-menu li.et-reverse-direction-nav > .sub-menu {left:auto;right:0}
  #main-header #top-menu .sub-menu li.et-reverse-direction-nav > .sub-menu {right:100%}
  #main-header #top-menu .sub-menu li {display:block;width:100%;padding:0;margin:0}
  #main-header #top-menu .sub-menu a {
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    min-height:48px;
    margin:0;
    padding:13px 16px;
    /* Override only the child theme's inherited !important float and font size. */
    float:none!important;
    font-size:14px!important;
    line-height:1.5;
    text-transform:none;
    white-space:normal;
    overflow-wrap:anywhere;
    border-radius:2px;
    transition:background-color .15s,color .15s;
  }
  #main-header #top-menu .sub-menu li:not(.menu-item-has-children) > a::after {
    content:'\2192';
    flex:none;
    font:18px/1 Arial,sans-serif;
    color:inherit;
  }
  #main-header #top-menu .sub-menu a:hover,
  #main-header #top-menu .sub-menu a:focus-visible {background:rgba(199,72,24,.07);opacity:1}
  #main-header #top-menu .sub-menu a:focus-visible {outline:2px solid currentColor;outline-offset:-2px}
  #main-header #top-menu li:focus-within > .sub-menu {visibility:visible;opacity:1;transform:none}
}