/*
 * nav-dropdown.css - makes the header dropdowns (Products, About, Resources)
 * open on hover / keyboard focus.
 *
 * On the original WordPress site, Bricks' JavaScript opened these menus. That
 * script is gone from the static pages, so this stylesheet does the job with
 * CSS alone. Colours, fonts and padding still come from the site's own CSS
 * (green background, white text); this file only controls show/hide and
 * placement.
 *
 * To add a menu item, add an <li> to the page's menu; nothing here changes.
 */
#brx-header .bricks-nav-menu > li.menu-item-has-children { position: relative; }

#brx-header .bricks-nav-menu > li > .sub-menu {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 1000;
  background-color: var(--primary-color, #59824B);
  /* hidden until hover/focus */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

#brx-header .bricks-nav-menu > li:hover > .sub-menu,
#brx-header .bricks-nav-menu > li:focus-within > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}

#brx-header .bricks-nav-menu .sub-menu li { display: block; list-style: none; }
#brx-header .bricks-nav-menu .sub-menu a {
  display: block;
  color: var(--snow-color, #fff);
  white-space: nowrap;
}
#brx-header .bricks-nav-menu .sub-menu a:hover { color: var(--snow-color, #fff); }