/**
 * @file
 * Overrides for basecore/css/components/menu.css.
 */

ul.menu li > a:before {
  top: 13px;
}

/* Sidebar menus and exposed-filter links */
.region-sidebar-first .bef-link {
  line-height: 150%;
  display: block;
}

.region-sidebar-first .bef-exposed-form ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.region-sidebar-first .bef-exposed-form ul li {
  position: relative;
  margin: 0;
  padding: 0;
}

.region-sidebar-first .bef-exposed-form ul li ul {
  margin-bottom: 5px;
}

.region-sidebar-first .bef-exposed-form ul li a.bef-link:before {
  content: "\f105";
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro';
  font-weight: 900;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--mt-color-primary);
  transition: all 0.2s ease;
}

.region-sidebar-first .bef-exposed-form ul li:has(ul) > a.bef-link:before {
  content: "\f107";
}

.region-sidebar-first .bef-exposed-form ul li a.bef-link {
  display: block;
  padding: 10px 15px 10px 25px;
  font-size: 15px;
  text-decoration: none;
  position: relative;
  transition: all 0.2s ease;
}

.region-sidebar-first .bef-exposed-form ul li ul li a.bef-link {
  padding-left: 40px;
}

.region-sidebar-first .bef-exposed-form ul li ul li a.bef-link:before {
  left: 20px;
}

.region-sidebar-first ul.menu li,
.region-sidebar-second ul.menu li,
.region-sidebar-first .bef-exposed-form ul li {
  border-bottom: 1px solid rgba(var(--mt-color-base-value), 0.1);
}

.region-sidebar-first ul.menu li a,
.region-sidebar-first ul.menu li > span {
  padding: 14px 15px;
  font-size: 16px;
  font-weight: 600;
  color: var(--mt-color-base-dark);
  transition: all 0.2s ease-in-out;
  position: relative;
}

.region-sidebar-first ul.menu li ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.region-sidebar-first ul.menu li ul li a {
  padding: 10px 20px 10px 35px;
  font-size: 15px;
  font-weight: 500;
  color: var(--mt-color-base);
  background-color: transparent;
}

.region-sidebar-first ul.menu li ul li.menu-item--active-trail > a,
.region-sidebar-first ul.menu li ul li a.is-active {
  padding-left: 31px;
}

.region-sidebar-first ul.menu li.menu-item--active-trail > a {
  font-weight: 600;
  color: var(--mt-color-primary);
}

/* Main menu */
.header-container ul.sf-menu > li > a,
.header-container ul.sf-menu > li > span {
  font-size: inherit;
  font-weight: inherit;
}

/* Mobile: the hamburger sits on its own row under the header top links */
@media (max-width: 991px) {
  .header-container .header-second .sf-accordion-toggle {
    margin-top: 0;
  }
}

/* Basecore turns the header top links into a horizontal scroll box on phones */
@media (max-width: 767px) {
  .header-container ul.menu:not(.sf-menu) {
    overflow: visible;
  }
}

/* Undo basecore superfish rules that DIT drops */
@media (min-width: 992px) {
  .header-container .sf-menu {
    display: block;
    align-items: normal;
  }
}
.header-container .sf-menu li.sfHover {
  z-index: 499;
}
.header-container ul.sf-menu > li.menuparent > a {
  padding-right: 10px;
}
.header-container .sf-menu > li > ul {
  right: auto !important;
  left: 0;
}
/* Keep the last top-level dropdown on screen: align it to the right
   edge of its parent instead of overflowing past the viewport. */
.header-container .sf-menu > li:last-child > ul {
  left: auto !important;
  right: 0 !important;
}
.header-container .sf-menu.menu ul ul {
  top: 100%;
  margin-left: 0;
  margin-right: 0;
}
.header-container ul.sf-menu .sf-sub-indicator {
  width: 1em;
  font-weight: inherit;
  top: 50%;
  margin-top: 0;
}
.header-container ul.sf-menu > li > a .sf-sub-indicator:after {
  content: "\25BC";
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  left: 0;
  top: 0;
  margin-left: 0;
  transition: none;
}
.header-container ul.sf-menu ul .sf-sub-indicator {
  right: -0.55em;
  top: 50%;
  width: 1em;
  height: 1em;
  font-size: 14px;
}
.header-container ul.sf-menu ul li .sf-sub-indicator:after {
  content: "\25BA";
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  right: auto;
  top: 0;
}

/* Superfish dropdowns */
.header-container .sf-menu.menu ul {
  display: none;
  padding: 10px 0;
  text-align: left;
  left: 0;
  top: 100%;
  margin-top: 0;
  background-color: var(--mt-color-accent);
  border: 1px solid var(--mt-border-color);
  min-width: 14em;
  border-radius: 4px;
}

.header-container .sf-menu ul li a,
.header-container .sf-menu ul li > span {
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 1.5em;
  display: block;
  font-weight: 500;
  color: var(--mt-color-base);
  text-decoration: none;
  transition: all 0.2s ease;
}

.header-container .sf-menu ul li {
  border-bottom: 1px solid rgba(var(--mt-color-base-value), 0.08);
}

.header-container .sf-menu ul li:last-child {
  border-bottom: none;
}

.header-container .sf-menu ul li a:hover,
.header-container .sf-menu ul li.sfHover > a {
  background-color: var(--mt-color-primary);
  color: var(--mt-color-primary-contrast) !important;
}

.header-container ul.sf-menu .sf-sub-indicator {
  font-size: 14px;
  color: var(--mt-color-base-light);
  right: -0.55em;
}

.header-container ul.sf-menu li.sfHover > a .sf-sub-indicator:after {
  color: var(--mt-color-primary);
}

.header-container .sf-shadow.sf-menu.menu ul {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Top-level items on desktop */
@media (min-width: 992px) {
  .header-container .sf-menu > li > a,
  .header-container .sf-menu > li > span {
    font-size: 18px;
    font-weight: 700;
    color: var(--mt-color-base-dark);
    letter-spacing: 0.5px;
    padding: 15px 20px;
    transition: color 0.3s ease;
    position: relative;
  }
  /* Beats the inherit reset above for ul.menu items */
  .header-container ul.menu.sf-menu > li > a,
  .header-container ul.menu.sf-menu > li > span {
    font-size: 18px;
    font-weight: 700;
  }

  .header-container .sf-menu > li > a:hover,
  .header-container .sf-menu > li.sfHover > a,
  .header-container .sf-menu > li.active > a {
    color: var(--mt-color-primary) !important;
  }

  .header-container .sf-menu > li > a:after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 20px;
    right: 20px;
    height: 3px;
    background-color: var(--mt-color-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .header-container .sf-menu > li:hover > a:after,
  .header-container .sf-menu > li.sfHover > a:after {
    transform: scaleX(1);
  }
}

/* Footer menu */
.footer__section ul.menu li a,
.footer__section ul.menu li > span {
  font-weight: 600;
  color: var(--mt-color-primary);
}

/* basecore hides the mobile menu toggle's label with display: none, which
   leaves the toggle link without an accessible name (WCAG 4.1.2). Hide it
   visually only; the icon stays the visible affordance. */
.header-container .sf-accordion-toggle.sf-style-none span {
  display: inline;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
