/* LS Multilevel Header v1.4.5 */
/* If you require support, send an email to oscar@lightspuncreative.com */

:root {

  /*-----YOUR SETTINGS BEGIN HERE-----*/

  /*Layout styling */
  --mlh-header-height: var(--header-height); /*ACSS ONLY*/
  --mlh-content-space: var(--space-s-m);
  --mlh-gutter: var(--space-s-m); /*left and right padding of the header section*/
  --mlh-nav-gap: 0rem; /*Space between items on the desktop nav menu*/
  --mlh-header-shadow: none; /*var(--mlh-shadow);*/ /*Default: "var(--mlh-shadow)". Set to "none" to turn off*/

  --mlh-content-bg: var(--page-bg); /*Set the background color of your menu*/
  --mlh-content-border: var(--ui-border) solid 1px;

  /*Dropdown styling*/
  --mlh-dropdown-xy: translate(0, 1.6rem); /*(desktop view) Adjust the position of the dropdown tray relative to the menu item*/
  --mlh-dropdown-width: 30rem; /*Adjust the width of the dropdown tray*/
  --mlh-dropdown-padding: 0; /*Add a padding around the dropdown menu items*/

  /*Caret icon styling*/
  --mlh-caret-size: 0.6em;

  /*Mobile menu and Dropdown link padding*/
  --mlh-x-padding: var(--space-regular); /*Horizontal padding*/
  --mlh-y-padding: var(--space-regular); /*Vertical Padding*/

  /*Link styles*/
  --mlh-link: var(--dark); /*Link default color*/
  --mlh-link-hover: var(--primary); /*Link hover color*/
  --mlh-dd-link-hover: var(--light);
  --mlh-link-hover-bg: var(--secondary);
  --mlh-link-radius: 0rem;

  /* Navlink background hover color */
  --mlh-nav-bg: var(--light); /*Change the value to "transparent" to turn off desktop nav background hover effect*/

  /*Font styles*/
  --mlh-font-size: var(--text-s);
  --mlh-font-weight: 600; /*Font weight also affects the thickness of the dropdown caret icon*/
  --mlh-text-transform: capitalize; /* uppercase | lowercase | capitalize */
  
  /*Mobile Menu toggle styles*/
  --mlh-toggle-color: var(--pearl);
  --mlh-toggle-bg: var(--primary);
  --mlh-toggle-stroke-width: 5px;
  --mlh-toggle-size: 4rem;
  --mlh-toggle-stroke-linecap: butt; /* butt | round | square */

  /*-----YOUR SETTINGS END HERE-----*/


  /*Animation speed*/
  --mlh-duration: 0.25s;
  --mlh-timing: ease;

  --mlh-shadow: 0px 0px 0px rgba(3, 7, 18, 0.1),
    0px 1px 1px rgba(3, 7, 18, 0.08), 0px 1px 1px rgba(3, 7, 18, 0.06),
    0px 3px 3px rgba(3, 7, 18, 0.04), 0px 4px 4px rgba(3, 7, 18, 0.02);
}

/* Header Section */
.mlh-header {
  padding-top: 0;
  padding-bottom: 0;
  background-color: var(--mlh-content-bg);
  position: relative;
  z-index: 1000;
  box-shadow: var(--mlh-header-shadow);
  padding-inline: var(--mlh-gutter);
  border-bottom: 1px solid var(--ui-border);
}

.mlh-header__inner {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /*min-height: var(--mlh-header-height);*/
}

/** Nav Nestable */

.mlh-desktop-nav > ul {
  gap: var(--mlh-nav-gap);
}

.mlh-desktop-nav a {
  color: var(--mlh-link);
}

.mlh-desktop-nav .brx-nav-nested-items > li > a,
.mlh-desktop-nav .brx-nav-nested-items > li > .brx-submenu-toggle {
  color: var(--mlh-link);
  font-weight: var(--mlh-font-weight);
  font-size: var(--mlh-font-size);
  text-transform: var(--mlh-text-transform);
  transition: background-color var(--mlh-duration) var(--mlh-timing),
    color var(--mlh-duration) var(--mlh-timing);
  padding-top: calc(var(--mlh-y-padding) * 0.4);
  padding-right: calc(var(--mlh-x-padding) * 0.4);
  padding-bottom: calc(var(--mlh-y-padding) * 0.4);
  padding-left: calc(var(--mlh-x-padding) * 0.4);
  border-radius: var(--mlh-link-radius);
  gap: 0.4em;
}

/*** Nav link Hover effects. Exclude dropdown content*/
.mlh-desktop-nav ul > li > *:not(.brx-dropdown-content),
.mlh-desktop-nav ul > li > .brx-submenu-toggle,
.mlh-mobile-nav ul > li > a:hover,
.mlh-mobile-nav ul > li > .brx-submenu-toggle:hover,
.mlh-mobile-nav .mlh-dropdown-back:hover {
  transition: background-color var(--mlh-duration) var(--mlh-timing),
    color var(--mlh-duration) var(--mlh-timing);
}

.mlh-desktop-nav ul > li:hover > *:not(.brx-dropdown-content) {
  background-color: var(--mlh-nav-bg);
  color: var(--mlh-link-hover);
  border: 1px solid var(--ui-border);
}

/*** Ensure that active dropdown item retains the hover styling */
.mlh-desktop-nav ul > li.brx-has-multilevel.open > .brx-submenu-toggle {
  background-color: var(--mlh-nav-bg);
}

.mlh-desktop-nav ul > li.brx-has-multilevel.open > .brx-submenu-toggle > *,
.mlh-desktop-nav ul > li.brxe-dropdown.open > .brx-submenu-toggle > * {
  color: var(--mlh-link-hover);
}

/**Dropdown tray */

/*** Position the dropdown tray */
.mlh-desktop-nav
  .brx-nav-nested-items
  > .brxe-dropdown
  > .brx-dropdown-content {
  transform: var(--mlh-dropdown-xy);
}

.mlh-desktop-nav ul > .brxe-dropdown > .brx-dropdown-content {
  padding: var(--mlh-dropdown-padding);
}

/*** Style the dropdown tray */
.mlh-desktop-nav ul.brx-dropdown-content {
  background-color: var(--mlh-content-bg);
  border: var(--mlh-content-border);
  border-radius: var(--mlh-link-radius);
  gap: 0;
  min-width: var(--mlh-dropdown-width);
  transition-duration: var(--mlh-duration);
  transition-timing-function: var(--mlh-timing);
}

/*** Style the dropdown link items */
.mlh-desktop-nav ul.brx-dropdown-content > li > * {
  padding: var(--mlh-y-padding) var(--mlh-x-padding);
  color: var(--mlh-link);
  font-weight: var(--mlh-font-weight);
  font-size: var(--mlh-font-size);
  width: 100%;
}

.mlh-desktop-nav .brxe-dropdown.brx-has-multilevel.open.active > ul > li,
.mlh-desktop-nav .brxe-dropdown.open > ul > li {
  align-items: stretch;
}

.mlh-desktop-nav ul.brx-dropdown-content > li:hover > a,
.mlh-desktop-nav ul.brx-dropdown-content > li:hover > .brx-submenu-toggle {
  background-color: var(--mlh-link-hover-bg);
  color: var(--mlh-dd-link-hover);
}

.mlh-desktop-nav .brx-submenu-toggle,
.mlh-desktop-nav a.brx-multilevel-back {
  justify-content: space-between;
}

.mlh-desktop-nav
  ul.brx-dropdown-content
  > li.brxe-dropdown
  > .brx-submenu-toggle
  button
  svg {
  rotate: -90deg;
}

/* Apply radius to items on the DD tray */
.mlh-desktop-nav ul.brx-dropdown-content > li > * {
  border-radius: calc(var(--mlh-link-radius) - var(--mlh-dropdown-padding));
}

/*** Set the caret width */
.mlh-desktop-nav .brx-submenu-toggle button > svg > path,
.mlh-mobile-nav .brx-submenu-toggle > button > svg > path {
  stroke: currentColor;
  stroke-width: calc(var(--mlh-font-weight) / 300);
}

.mlh-desktop-nav .brx-submenu-toggle > button > svg,
.mlh-mobile-nav .brx-submenu-toggle > button > svg {
  width: var(--mlh-caret-size);
  min-width: 0.4em;
}

/*****************OFF CANVAS*****************/

.mlh-offcanvas > .brx-offcanvas-inner {
  padding: calc(var(--mlh-header-height) + var(--space-s-m))
    var(--mlh-gutter) var(--mlh-content-space) var(--mlh-gutter);
  background: var(--mlh-content-bg);
  flex-wrap: nowrap;
}

.mlh-offcanvas > .brx-offcanvas-inner ul {
  padding-inline-start: 0;
  list-style-type: none;
}

/*******MOBILE MENU******/
.mlh-mobile-nav:has(.brxe-dropdown.open.active) {
  overflow: hidden;
}

.mlh-mobile-nav ul {
  gap: 0;
}

.mlh-mobile-nav ul > li > a,
.mlh-mobile-nav ul > li > .brx-submenu-toggle,
.mlh-mobile-nav .mlh-dropdown-back {
  padding: var(--mlh-y-padding) var(--mlh-x-padding);
  color: var(--mlh-link);
  width: 100%;
  transition-property: background-color, color;
  transition-duration: var(--mlh-duration);
  border-radius: var(--mlh-link-radius);
  justify-content: space-between;
  background-color: transparent;
  font-size: var(--mlh-font-size);
  font-weight: var(--mlh-font-weight);
  text-transform: var(--mlh-text-transform);
}

.mlh-mobile-nav ul > li > a:hover,
.mlh-mobile-nav ul > li > .brx-submenu-toggle:hover,
.mlh-mobile-nav .mlh-dropdown-back:hover {
  background-color: var(--mlh-link-hover-bg);
  color: var(--mlh-link-hover);
}

.mlh-mobile-nav ul > .brxe-dropdown {
  width: 100%;
}

.mlh-mobile-nav .brx-submenu-toggle > button > svg {
  rotate: -90deg;
}

.mlh-mobile-nav .brx-has-multilevel ul .active > .brx-submenu-toggle,
.mlh-mobile-nav .brx-has-multilevel ul li:not(.open) {
  display: flex;
}

.mlh-desktop-nav a.brx-multilevel-back > svg,
.mlh-mobile-nav .mlh-dropdown-back > svg,
.mlh-mobile-nav a.brx-multilevel-back > svg {
  width: var(--mlh-caret-size);
  min-width: 0.4em;
  stroke: currentColor;
  rotate: 90deg;
}

.mlh-mobile-nav .mlh-dropdown-back > svg > path,
.mlh-mobile-nav a.brx-multilevel-back > svg > path {
  stroke-width: calc(var(--mlh-font-weight) / 300);
}

/********SECONDARY OFFCANVAS MAGIC**********/
/* Mobile menu styles */
body:not([data-builder-mode])
  .mlh-mobile-nav
  .brxe-dropdown[data-static]
  .brx-dropdown-content {
  display: block;
  visibility: visible;
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--mlh-content-bg);
  width: 100%;
  height: fit-content;
  min-height: 100%;
  transform: translateX(100%);
  padding-top: calc(var(--mlh-header-height) + var(--mlh-content-space));
  padding-inline: var(--mlh-x-padding);
  transition: transform var(--mlh-duration) var(--mlh-timing);
  box-shadow: var(--mlh-shadow);
}

body:not([data-builder-mode])
  .mlh-mobile-nav
  .brxe-dropdown[data-static]
  .open
  > .brx-dropdown-content,
body:not([data-builder-mode])
  .mlh-mobile-nav
  .brxe-dropdown[data-static].open
  > .brx-dropdown-content {
  transform: translateX(0%);
}

/* Offcanvas animation */
.mlh-offcanvas > .brx-offcanvas-inner {
  transition: var(--mlh-duration) var(--mlh-timing);
}

/*Mobile Nav Styles*/
.mlh-mobile-nav > ul {
  padding-inline-start: 0;
  list-style-type: none;
}

/* Fix overscroll problem */

body:not([data-builder-mode])
  .mlh-mobile-nav
  .brxe-dropdown[data-static].brx-has-multilevel
  .brx-dropdown-content {
  height: 100%;
  overflow: hidden;
}

body:not([data-builder-mode])
  .mlh-mobile-nav
  .brxe-dropdown.open.active
  .brx-dropdown-content {
  max-height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

/************/

/*Toggle Icon styling*/
.mlh-desktop-nav .brxe-toggle svg > path {
  stroke: var(--mlh-toggle-color);
}

.mlh-desktop-nav .brxe-toggle svg {
  border-radius: var(--mlh-link-radius);
}

.mlh-desktop-nav .brxe-toggle {
  background-color: var(--mlh-toggle-bg);
  border-radius: var(--mlh-link-radius);
}

/*Animate dropdown caret when active*/

.mlh-desktop-nav .brx-submenu-toggle > button > svg {
  transition-property: rotate;
  transition-duration: var(--mlh-duration);
  transition-timing-function: var(--mlh-timing);
}

.mlh-desktop-nav .brxe-dropdown.open > .brx-submenu-toggle > button > svg {
  rotate: 180deg;
}

/*Fixes due to Bricks Bugs*/

/* Hide extra back buttons */
.brx-dropdown-content > li:not(:first-child):has(> a.brx-multilevel-back) {
  display: none;
}

/*remove border from inactive dropdown tray content*/
.brx-dropdown-content:has(.brx-has-multilevel.open.active) {
  border: none;
}