/* ==========================================================================
   Theme Variables
   ========================================================================== */

/* Root variables for consistent theming across the application */
:root {
  /* ==========================================================================
     Colors
     ========================================================================== */
  /* Primary color palette */
  --mlh-dark: var(--at-n950, var(--at-black, #000));
  --mlh-light: var(--at-n50, var(--at-white, #fff));
  --mlh-primary: var(--at-transparent, #0000); /* Transparent fallback */
  --mlh-content-bg: var(--mlh-light); /* Default background for content areas */

  /* Link colors */
  --mlh-link: var(--mlh-dark); /* Default link color */
  --mlh-link-hover: var(--mlh-light); /* Link hover color */
  --mlh-link-hover-bg: var(--mlh-dark); /* Link hover background */
  --mlh-nav-bg: var(--mlh-dark); /* Navigation background */
  --mlh-toggle-color: var(--mlh-light); /* Toggle icon color */
  --mlh-toggle-bg: var(--mlh-dark); /* Toggle background */

  /* ==========================================================================
     Borders
     ========================================================================== */
  --mlh-border-color: var(--at-n500, rgba(0, 0, 0, 0.1)); /* Border color */
  --mlh-border-width: 1px; /* Border thickness */
  --mlh-border-style: solid; /* Border style */
  --mlh-border-radius: 0.4rem; /* Border radius for rounded corners */
  --mlh-content-border: var(--mlh-border-width) var(--mlh-border-style) var(--mlh-border-color); /* Composite border property */
  --mlh-link-radius: 4px; /* Border radius for links */

  /* ==========================================================================
     Dimensions
     ========================================================================== */
  --mlh-dropdown-width: calc(var(--min-viewport) * 1px); /* Dropdown menu width */
  --mlh-header-height: var(--at-header-height, 11rem); /* Header height */
  --mlh-header-topbar-height: 4rem; /* Top bar height */
  --mlh-caret-size: 1rem; /* Caret icon size */
  --mlh-toggle-size: 6rem; /* Toggle button size */

  /* ==========================================================================
     Spacing
     ========================================================================== */
  --mlh-content-space: var(--at-gutter, 1rem); /* Content spacing */
  --mlh-gutter: var(--at-gutter, 1rem); /* General gutter spacing */
  --mlh-nav-gap: 0.5rem; /* Gap between navigation items */
  --mlh-dropdown-padding: 0.6rem; /* Padding for dropdown content */
  --mlh-x-padding: var(--at-space--m, 1rem); /* Horizontal padding */
  --mlh-y-padding: var(--at-space--s, 0.5rem); /* Vertical padding */

  /* ==========================================================================
     Shadows
     ========================================================================== */
  --mlh-shadow: 0 0 0 rgba(3, 7, 18, 0.1),
                0 1px 1px rgba(3, 7, 18, 0.08),
                0 1px 1px rgba(3, 7, 18, 0.06),
                0 3px 3px rgba(3, 7, 18, 0.04),
                0 4px 4px rgba(3, 7, 18, 0.02); /* Multi-layer shadow */
  --mlh-header-shadow: var(--mlh-shadow); /* Header-specific shadow */

  /* ==========================================================================
     Typography
     ========================================================================== */
  --mlh-font-size: var(--at-text--s, 1rem); /* Default font size */
  --mlh-font-weight: 500; /* Default font weight */
  --mlh-text-transform: capitalize; /* Text transformation for nav items */

  /* ==========================================================================
     Transitions
     ========================================================================== */
  --mlh-duration: var(--global-transition-speed, 0.25s); /* Transition duration */
  --mlh-timing: ease; /* Transition timing function */
  --mlh-toggle-stroke-width: 5px; /* Toggle stroke width */
  --mlh-toggle-stroke-linecap: butt; /* Toggle stroke cap style */

  /* ==========================================================================
     Positioning
     ========================================================================== */
  --mlh-dropdown-xy: translate(0, var(--at-gutter, 8px)); /* Dropdown positioning */
}

/* ==========================================================================
   Header
   ========================================================================== */
.mlh-header {
  /* Main header container */
  position: relative;
  z-index: 1000; /* Ensure header stays above other content */
  background-color: var(--mlh-content-bg);
  padding: 0 var(--mlh-gutter); /* Horizontal padding only */
  border-bottom: var(--mlh-content-border);
}

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

/* ==========================================================================
   Desktop Navigation
   ========================================================================== */
.mlh-desktop-nav > ul {
  /* Top-level navigation list */
  display: flex;
  gap: var(--mlh-nav-gap);
}

.mlh-desktop-nav a {
  /* Default link styles */
  color: var(--mlh-link);
}

.mlh-desktop-nav .brx-nav-nested-items > li > a,
.mlh-desktop-nav .brx-nav-nested-items > li > .brx-submenu-toggle {
  /* Nested navigation items and submenu toggles */
  color: var(--mlh-link);
  font-weight: var(--mlh-font-weight);
  font-size: var(--mlh-font-size);
  text-transform: var(--mlh-text-transform);
  padding: calc(var(--mlh-y-padding) * 0.4) calc(var(--mlh-x-padding) * 0.4);
  border-radius: var(--mlh-link-radius);
  transition: background-color var(--mlh-duration) var(--mlh-timing),
              color var(--mlh-duration) var(--mlh-timing);
  gap: var(--at-space--xs);
}

.mlh-desktop-nav ul > li > *:not(.brx-dropdown-content),
.mlh-desktop-nav ul > li > .brx-submenu-toggle {
  /* Navigation item transitions */
  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) {
  /* Hover styles for navigation items */
  background-color: var(--mlh-nav-bg);
  color: var(--mlh-link-hover);
  border: 1px solid var(--mlh-dark);
  border-radius: var(--mlh-border-radius);
}

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

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

.mlh-desktop-nav ul > .brxe-dropdown > .brx-dropdown-content {
  /* Dropdown content styling */
  padding: var(--mlh-dropdown-padding);
  background-color: var(--mlh-content-bg);
  border: var(--mlh-content-border);
  border-radius: var(--mlh-link-radius);
  min-width: var(--mlh-dropdown-width);
  transition: all var(--mlh-duration) var(--mlh-timing);
}

.mlh-desktop-nav ul.brx-dropdown-content > li > * {
  /* Dropdown content items */
  display: flex;
  align-items: stretch;
  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%;
  border-radius: calc(var(--mlh-link-radius) - var(--mlh-dropdown-padding));
}

.mlh-desktop-nav ul.brx-dropdown-content > li:hover > a,
.mlh-desktop-nav ul.brx-dropdown-content > li:hover > .brx-submenu-toggle {
  /* Hover styles for dropdown items */
  background-color: var(--mlh-link-hover-bg);
}

.mlh-desktop-nav .brx-submenu-toggle,
.mlh-desktop-nav a.brx-multilevel-back {
  /* Submenu toggle and back button layout */
  display: flex;
  justify-content: space-between;
}

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

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

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

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

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

.mlh-desktop-nav .brxe-dropdown.open > .brx-submenu-toggle > button > svg {
  /* Open state toggle icon rotation */
  rotate: 180deg;
  transition: rotate var(--mlh-duration) var(--mlh-timing);
}

/* ==========================================================================
   Mobile Navigation
   ========================================================================== */
.mlh-offcanvas > .brx-offcanvas-inner {
  /* Offcanvas container */
  padding: calc(var(--mlh-header-height) + var(--mlh-header-topbar-height)) var(--mlh-gutter) var(--mlh-content-space) var(--mlh-gutter);
  background: var(--mlh-content-bg);
  flex-wrap: nowrap;
  transition: all var(--mlh-duration) var(--mlh-timing);
}

.mlh-offcanvas > .brx-offcanvas-inner ul,
.mlh-mobile-nav > ul {
  /* Remove default list styles */
  padding-inline-start: 0;
  list-style-type: none;
}

.mlh-mobile-nav ul {
  /* Mobile navigation list */
  display: flex;
  flex-direction: column;
  gap: 0;
}

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

.mlh-mobile-nav ul > li > a:hover,
.mlh-mobile-nav ul > li > .brx-submenu-toggle:hover,
.mlh-mobile-nav .mlh-dropdown-back:hover {
  /* Hover styles for mobile navigation items */
  background-color: var(--mlh-link-hover-bg);
  color: var(--mlh-link-hover);
}

.mlh-mobile-nav ul > .brxe-dropdown {
  /* Full-width dropdowns for mobile */
  width: 100%;
}

.mlh-mobile-nav .brx-submenu-toggle > button > svg {
  /* Mobile submenu toggle icon rotation */
  rotate: -90deg;
}

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

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

.mlh-mobile-nav .mlh-dropdown-back > svg,
.mlh-mobile-nav a.brx-multilevel-back > svg {
  /* Back button icon styling */
  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 {
  /* Back button icon stroke */
  stroke-width: calc(var(--mlh-font-weight) / 300);
}

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

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 {
  /* Open state for mobile dropdown */
  transform: translateX(0);
}

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

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

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

.brx-dropdown-content:has(.brx-has-multilevel.open.active) {
  /* Remove border for active multilevel dropdowns */
  border: 0;
}

.mlh-header .brx-has-megamenu.open .brx-dropdown-content {
  /* Remove border for open megamenu */
  border: unset;
}