:root{
  --gl-primary:#284664;
  --gl-accent:#d85623;
  --gl-text:#111827;
  --gl-bg:#fff;
  --gl-surface:#f9fafb;
  --gl-border:#e5e7eb;
}

/* Top-level container baseline */
#_desktop_top_menu.menu { background: var(--gl-bg); border-bottom: 1px solid var(--gl-border); }

/* Horizontal layout remains from Classic; we focus on cosmetics */
#top-menu > li { position: relative; }

/* Underline effect on top-level links (uses existing .dropdown-item class) */
#top-menu > li > a.dropdown-item {
  position: relative;
  padding: .75rem 1rem;
  font-weight: 600;
  color: var(--gl-text);
}
#top-menu > li > a.dropdown-item::after {
  content: "";
  position: absolute;
  left: 1rem; right: 1rem; bottom: .45rem;
  height: 2px; background: transparent;
  transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease-out, background .18s ease-out;
}
#top-menu > li:hover > a.dropdown-item::after,
#top-menu > li.current > a.dropdown-item::after {
  background: var(--gl-accent);
  transform: scaleX(1);
}
#top-menu > li.current > a.dropdown-item { color: var(--gl-accent); }

/* Submenu container (Classic uses .popover.sub-menu.collapse) */
#top-menu > li > .sub-menu {
  /* desktop look; mobile keeps collapse behaviour */
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: .375rem;
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  min-width: 300px;
  padding: .5rem 0;
  z-index: 1000;
}

/* First level dropdown list */
#top-menu li ul.top-menu[data-depth="1"] { padding: 0; }

/* Submenu items look like Bootstrap dropdowns without importing extra CSS */
#top-menu li ul.top-menu[data-depth="1"] > li > a {
  display: block;
  padding: .5rem 1rem;
  color: var(--gl-text);
  white-space: nowrap;
}
#top-menu li ul.top-menu[data-depth="1"] > li > a:hover {
  background: var(--gl-surface);
  color: var(--gl-primary);
}

/* Flyout for deeper levels */
#top-menu li ul.top-menu[data-depth="2"] {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: 2px;
  min-width: 320px;
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: .375rem;
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  padding: .5rem 0;
}

/* Desktop: open on hover (override Bootstrap's .collapse default) */
@media (min-width: 992px) {
  /* Only show on hover/focus for top-level items with children */
  #top-menu > li.has-children > .sub-menu.collapse { display: none; }
  #top-menu > li.has-children:hover > .sub-menu.collapse,
  #top-menu > li.has-children:focus-within > .sub-menu.collapse {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
  }

  /* Second level: reveal flyout on hover */
  #top-menu li ul.top-menu[data-depth="1"] > li:hover > .collapse {
    display: block;
    position: absolute;
  }
}

/* Mobile/tablet: keep Classic's Bootstrap collapse behaviour */
@media (max-width: 991.98px) {
  #top-menu > li > a.dropdown-item { padding: .6rem .75rem; }
  /* On mobile the submenus are stacked; use the theme's collapse JS/CSS */
  #top-menu .sub-menu.collapse { box-shadow: none; border: 0; padding: .25rem 0; }
}