/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


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

:root {
  /*-----YOUR SETTINGS BEGIN HERE-----*/

  /*General Layout styling */
  --mlh-header-height: 7rem; /*You can use var(--header-height) instead of 7rem if you have ACSS header height values set*/
  --mlh-content-space: var(--space-m); /*Used as the basis for various spacing calculations*/
  --mlh-gutter: var(--gutter); /*Left and right padding of the header section*/
  --mlh-nav-gap: calc(var(--content-gap) / 2); /*Space between items on the desktop nav menu*/
  --mlh-header-shadow: var(--mlh-shadow); /*Default: "var(--mlh-shadow)". Set to "none" to turn off*/
  
  --mlh-content-bg: var(--primary-light); /*Set the background color of your menu*/
  --mlh-content-border: var(--neutral-light) solid 1px; /*Border color*/

  /*Dropdown styling*/
  --mlh-dropdown-xy: translate(0, 8px); /*(desktop view) Adjust the position of the dropdown tray relative to the menu item*/
  --mlh-dropdown-width: 25rem; /*Adjust the width of the dropdown tray*/
  --mlh-dropdown-padding: 6px; /*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(--btn-pad-x); /*Horizontal padding*/
  --mlh-y-padding: var(--btn-pad-y); /*Vertical Padding*/

  /*Link styles*/
  --mlh-link: var(--text-dark); /*Link default color*/
  --mlh-link-hover: var(--primary); /*Link hover color*/
  --mlh-link-hover-bg: var(--primary-ultra-light);
  --mlh-link-radius: var(--radius);

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

  /*Font styles*/
  --mlh-font-size: var(--text-m);
  --mlh-font-weight: 400; /*Font weight also affects the thickness of the dropdown caret icon*/
  --mlh-text-transform: uppercase; 
  
  /*Mobile Menu toggle styles*/
  --mlh-toggle-color: var(--text-light);
  --mlh-toggle-bg: var(--primary);
  --mlh-toggle-stroke-width: 5px;
  --mlh-toggle-size: 3em;
  --mlh-toggle-stroke-linecap: butt; /*butt | round | square*/

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


  /*Animation speed*/
  --mlh-duration: 0.3s;
  --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);
}

/** Nav Nestable */

/*** 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 {
  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);
}

.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 .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;
}

/*** 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*****************/

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

.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);
}

/* 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;
}

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

/*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;
}

/* Make the hidden mobile multilevel items unfocusable for better accessibility UX */

  .mlh-offcanvas:not(.brx-open) .mlh-mobile-nav ul>.brxe-dropdown {
    visibility: hidden;
    display: none;
}

/*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 and padding from inactive dropdown tray content*/
.brx-dropdown-content:has(.brx-has-multilevel.open.active) {
  border: none;
  padding: 0px
}