/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-nav.css
   Layer: Navigation System
   Version: 4.0
========================================================= */

/* #region 0) NAV TOKENS */
header.milo-header {
  /* Positioning */
  --milo-nav-gap: var(--milo-space-sm);
  --milo-nav-top: calc(var(--milo-header-h) + var(--milo-nav-gap));
  --milo-nav-top-mobile: calc(
    var(--milo-header-h-mobile) + var(--milo-nav-gap)
  );
  --milo-nav-top-scrolled-tablet: calc(
    var(--milo-header-h-scrolled-tablet, var(--milo-header-h-scrolled, 64px)) +
      var(--milo-nav-gap)
  );
  --milo-nav-top-scrolled-mobile: calc(
    var(--milo-header-h-scrolled-mobile, var(--milo-header-h-scrolled, 64px)) +
      var(--milo-nav-gap)
  );

  /* Panel shell */
  --milo-nav-panel-radius: var(--milo-radius-md);
  --milo-nav-panel-radius-mobile: 18px;
  --milo-nav-panel-blur: var(--milo-glass-blur);
  --milo-nav-panel-blur-mobile: var(--milo-glass-blur-strong);
  --milo-nav-panel-bg: var(--milo-glass-dark);
  --milo-nav-panel-bg-mobile: var(--milo-shadow-color-55);
  --milo-nav-panel-border: var(--milo-divider);
  --milo-nav-panel-max: 1100px;
  --milo-nav-panel-gutter: 28px;
  --milo-nav-panel-margin-top: 10px;
  --milo-nav-panel-pad-y: 16px;
  --milo-nav-panel-pad-x: 16px;
  --milo-nav-panel-pad-y-mobile: 14px;
  --milo-nav-panel-pad-x-mobile: 14px;
  --milo-nav-overlay-bg: var(--milo-overlay-45);

  /* Effects */
  --milo-nav-shadow-1: var(--milo-shadow-color-45);
  --milo-nav-shadow-inset: var(--milo-shadow-color-18);
  --milo-nav-panel-shadow:
    0 18px 55px var(--milo-nav-shadow-1),
    0 0 0 1px var(--milo-nav-shadow-inset) inset;
  --milo-nav-active-accent: var(--milo-pink-strong);

  /* Desktop menu geometry */
  --milo-nav-menu-gap: 28px;
  --milo-nav-link-opacity: 0.88;
  --milo-nav-link-opacity-active: 1;
  --milo-nav-link-letter-spacing: 0;
  --milo-nav-link-letter-spacing-active: 0.02em;
  --milo-nav-underline-h: 1px;
  --milo-nav-underline-offset: var(--milo-underline-offset-body, -5px);
  --milo-nav-underline-color: var(--milo-off-white);
  --milo-nav-underline-color-engaged: var(--milo-white);

  /* Mobile menu item */
  --milo-nav-item-gap-mobile: 6px;
  --milo-nav-item-pad-y: 12px;
  --milo-nav-item-pad-x: 14px;
  --milo-nav-item-radius: var(--milo-radius-sm);
  --milo-nav-item-color: var(--milo-text);
  --milo-nav-item-color-hover: var(--milo-white);
  --milo-nav-item-bg-hover: var(--milo-divider);
  --milo-nav-item-shift-hover: 2px;
  --milo-nav-item-active-shadow: inset 2px 0 0 var(--milo-nav-active-accent);

  /* Toggle button */
  --milo-nav-toggle-w: 48px;
  --milo-nav-toggle-btn: 38px;
  --milo-nav-toggle-btn-bg-hover: var(--milo-divider);
  --milo-nav-toggle-btn-color: var(--milo-white);
  --milo-nav-toggle-btn-shift: -2px;
  --milo-nav-toggle-btn-shift-scrolled: -1px;
  --milo-nav-toggle-outline: var(--milo-pink-strong);
  --milo-nav-toggle-outline-offset: 3px;

  /* Toggle halo */
  --milo-nav-toggle-halo-inset: -6px;
  --milo-nav-toggle-halo-inset-scrolled: -5px;
  --milo-nav-toggle-halo-opacity: 0;
  --milo-nav-toggle-halo-scale: 0.98;
  --milo-nav-toggle-halo-scale-active: 1;
  --milo-nav-toggle-halo-shadow:
    0 0 0 1px var(--milo-pink-medium), 0 0 0 4px var(--milo-pink-wash);

  /* Glyph */
  --milo-nav-glyph-w: 18px;
  --milo-nav-glyph-h: 12px;
  --milo-nav-glyph-stroke: 1.3px;
  --milo-nav-glyph-last-width: 88%;
  --milo-nav-glyph-open-stroke: 1.5px;
  --milo-nav-glyph-open-shift-y: 5.5px;

  /* Glyph compressed */
  --milo-nav-glyph-w-scrolled: 16px;
  --milo-nav-glyph-h-scrolled: 10px;
  --milo-nav-glyph-stroke-scrolled: 1.2px;
  --milo-nav-glyph-open-stroke-scrolled: 1.45px;
  --milo-nav-glyph-open-shift-y-scrolled: 4.8px;

  /* Desktop focus */
  --milo-nav-outline-w: var(--milo-outline-w);
  --milo-nav-outline-offset: var(--milo-outline-offset);
  --milo-nav-outline-color: var(--milo-off-white);
  --milo-nav-outline-radius: var(--milo-radius-2xs, 2px);

  /* Motion */
  --milo-nav-ease: var(--milo-ease);
  --milo-nav-fast: var(--milo-dur-180, var(--milo-fast));
  --milo-nav-med: var(--milo-dur-220, var(--milo-med));
  --milo-nav-slow: var(--milo-med, 240ms);
}
/* #endregion */

/* #region 1) DESKTOP NAV */
@media (min-width: 1025px) {
  header.milo-header .milo-nav.milo-nav--desktop {
    display: block !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }

  header.milo-header .milo-nav--desktop,
  header.milo-header .milo-nav--desktop .elementor-widget-nav-menu,
  header.milo-header .milo-nav--desktop .elementor-widget-container {
    padding-inline: 0 !important;
  }

  header.milo-header .milo-nav--desktop .elementor-nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: var(--milo-nav-menu-gap) !important;
  }

  header.milo-header .milo-nav--desktop .elementor-nav-menu li {
    display: inline-flex !important;
  }

  header.milo-header .milo-nav--desktop .elementor-nav-menu a {
    position: relative;
    display: inline-flex !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    opacity: var(--milo-nav-link-opacity);
    letter-spacing: var(--milo-nav-link-letter-spacing);
    transition:
      opacity var(--milo-nav-fast) ease,
      letter-spacing var(--milo-nav-med) ease;
  }

  header.milo-header .milo-nav--desktop .elementor-nav-menu a:hover,
  header.milo-header .milo-nav--desktop .elementor-nav-menu a:focus-visible,
  header.milo-header
    .milo-nav--desktop
    .elementor-nav-menu
    a.elementor-item-active {
    opacity: var(--milo-nav-link-opacity-active);
    letter-spacing: var(--milo-nav-link-letter-spacing-active);
  }

  header.milo-header .milo-nav--desktop .elementor-nav-menu a:focus-visible {
    outline: var(--milo-nav-outline-w) solid var(--milo-nav-outline-color);
    outline-offset: var(--milo-nav-outline-offset);
    border-radius: var(--milo-nav-outline-radius);
  }

  header.milo-header .milo-nav--desktop .elementor-nav-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: var(--milo-nav-underline-offset);
    width: 100%;
    height: var(--milo-nav-underline-h);
    background: var(--milo-nav-underline-color);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    transition:
      transform var(--milo-nav-slow) cubic-bezier(0.4, 0, 0.2, 1),
      opacity var(--milo-nav-fast) ease;
  }

  header.milo-header .milo-nav--desktop .elementor-nav-menu a:hover::after,
  header.milo-header
    .milo-nav--desktop
    .elementor-nav-menu
    a:focus-visible::after,
  header.milo-header
    .milo-nav--desktop
    .elementor-nav-menu
    a.elementor-item-active::after {
    transform: scaleX(1);
    opacity: 1;
  }

  header.milo-header.milo-scrolled
    .milo-nav--desktop
    .elementor-nav-menu
    a::after,
  html.milo-nav-open
    header.milo-header
    .milo-nav--desktop
    .elementor-nav-menu
    a::after {
    background: var(--milo-nav-underline-color-engaged);
  }

  header.milo-header .milo-nav__toggle,
  header.milo-header .milo-nav__panel,
  header.milo-header .milo-nav__overlay {
    display: none !important;
  }
}
/* #endregion */

/* #region 2) NAV GLYPH */
header.milo-header .milo-nav__glyph {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--milo-nav-glyph-w);
  height: var(--milo-nav-glyph-h);
}

header.milo-header .milo-nav__glyph span {
  display: block;
  width: 100%;
  height: var(--milo-nav-glyph-stroke);
  background: currentColor;
  border-radius: var(--milo-radius-2xs, 2px);
  transition:
    transform 360ms var(--milo-nav-ease),
    opacity var(--milo-nav-med) ease,
    width var(--milo-nav-med) ease,
    height var(--milo-nav-med) ease;
}

header.milo-header .milo-nav__glyph span:last-child {
  width: var(--milo-nav-glyph-last-width);
}

html.milo-nav-open header.milo-header .milo-nav__glyph span {
  width: 100%;
  height: var(--milo-nav-glyph-open-stroke);
}

html.milo-nav-open header.milo-header .milo-nav__glyph span:first-child {
  transform: translateY(var(--milo-nav-glyph-open-shift-y)) rotate(45deg);
}

html.milo-nav-open header.milo-header .milo-nav__glyph span:last-child {
  transform: translateY(calc(var(--milo-nav-glyph-open-shift-y) * -1))
    rotate(-45deg);
}
/* #endregion */

/* #region 3) RESPONSIVE */
@media (max-width: 1024px) {
  /* #region 3A) DESKTOP NAV OFF + TOGGLE ON */
  header.milo-header .milo-nav--desktop {
    display: none !important;
  }

  header.milo-header .milo-nav__toggle {
    position: relative;
    z-index: var(--milo-z-panel);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    width: var(--milo-nav-toggle-w) !important;
    min-width: var(--milo-nav-toggle-w) !important;
  }

  header.milo-header .milo-nav__toggle-btn {
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--milo-nav-toggle-btn);
    height: var(--milo-nav-toggle-btn);
    padding: 0;
    margin: 0 !important;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--milo-nav-toggle-btn-color);
    line-height: 0;
    cursor: pointer;
    transform: translateY(var(--milo-nav-toggle-btn-shift));
    transition:
      background var(--milo-nav-fast) ease,
      transform var(--milo-nav-med) ease;
  }

  header.milo-header .milo-nav__toggle-btn:hover,
  header.milo-header .milo-nav__toggle-btn:focus-visible {
    background: var(--milo-nav-toggle-btn-bg-hover);
    outline: var(--milo-nav-outline-w) solid var(--milo-nav-toggle-outline);
    outline-offset: var(--milo-nav-toggle-outline-offset);
  }

  header.milo-header .milo-nav__toggle-btn::after {
    content: "";
    position: absolute;
    inset: var(--milo-nav-toggle-halo-inset);
    border-radius: 999px;
    pointer-events: none;
    opacity: var(--milo-nav-toggle-halo-opacity);
    transform: scale(var(--milo-nav-toggle-halo-scale));
    box-shadow: var(--milo-nav-toggle-halo-shadow);
    transition:
      opacity var(--milo-nav-fast) ease,
      transform var(--milo-nav-slow) var(--milo-nav-ease);
  }

  header.milo-header .milo-nav__toggle-btn:hover::after,
  header.milo-header .milo-nav__toggle-btn:focus-visible::after {
    opacity: 1;
    transform: scale(var(--milo-nav-toggle-halo-scale-active));
  }

  header.milo-header .elementor-menu-toggle {
    display: none !important;
  }

  header.milo-header::before,
  header.milo-header::after,
  header.milo-header .elementor-background-overlay {
    pointer-events: none !important;
  }
  /* #endregion */

  /* #region 3B) PANEL + OVERLAY SHELL */
  header.milo-header .milo-nav__panel {
    position: fixed;
    top: var(--milo-nav-top);
    left: 0;
    right: 0;
    z-index: var(--milo-z-panel) !important;
    pointer-events: none;
    transform: translateY(-10px);
    opacity: 0;
    transition:
      transform 360ms var(--milo-nav-ease),
      opacity var(--milo-nav-med) ease;
  }

  header.milo-header .milo-nav__panel-inner {
    position: relative;
    z-index: calc(var(--milo-z-panel) + 1) !important;
    width: min(
      var(--milo-nav-panel-max),
      calc(100% - var(--milo-nav-panel-gutter))
    );
    margin: var(--milo-nav-panel-margin-top) auto 0;
    padding: var(--milo-nav-panel-pad-y) var(--milo-nav-panel-pad-x)
      calc(var(--milo-nav-panel-pad-y) + 2px);
    overflow: hidden;
    transform: translateZ(0);
    background: var(--milo-nav-panel-bg);
    border: 1px solid var(--milo-nav-panel-border);
    border-radius: var(--milo-nav-panel-radius);
    -webkit-backdrop-filter: blur(var(--milo-nav-panel-blur));
    backdrop-filter: blur(var(--milo-nav-panel-blur));
    box-shadow: var(--milo-nav-panel-shadow);
  }

  header.milo-header .milo-nav__overlay {
    position: fixed;
    inset: 0 !important;
    z-index: var(--milo-z-overlay) !important;
    background: var(--milo-nav-overlay-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }

  html.milo-nav-open header.milo-header .milo-nav__panel {
    pointer-events: auto;
    transform: translateY(0);
    opacity: 1;
  }

  html.milo-nav-open header.milo-header .milo-nav__overlay {
    opacity: 1;
    pointer-events: auto;
  }
  /* #endregion */

  /* #region 3C) MOBILE MENU LIST */
  header.milo-header .milo-nav__panel .elementor-nav-menu {
    display: flex;
    flex-direction: column;
    gap: var(--milo-nav-item-gap-mobile);
    margin: 0;
    padding: 0;
  }

  header.milo-header .milo-nav__panel .elementor-nav-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  header.milo-header .milo-nav__panel .elementor-nav-menu a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--milo-nav-item-pad-y) var(--milo-nav-item-pad-x);
    border-radius: var(--milo-nav-item-radius);
    color: var(--milo-nav-item-color) !important;
    text-decoration: none !important;
    opacity: 1;
    transform: none;
    transition:
      background var(--milo-nav-fast) ease,
      color var(--milo-nav-fast) ease,
      transform var(--milo-nav-med) var(--milo-nav-ease);
  }

  header.milo-header .milo-nav__panel .elementor-nav-menu a:hover,
  header.milo-header .milo-nav__panel .elementor-nav-menu a:focus-visible {
    color: var(--milo-nav-item-color-hover) !important;
    background: var(--milo-nav-item-bg-hover);
    transform: translateX(var(--milo-nav-item-shift-hover));
    outline: none;
  }

  header.milo-header
    .milo-nav__panel
    .elementor-nav-menu
    a.elementor-item-active,
  header.milo-header
    .milo-nav__panel
    .elementor-nav-menu
    li.current-menu-item
    > a,
  header.milo-header
    .milo-nav__panel
    .elementor-nav-menu
    li.current-menu-ancestor
    > a,
  header.milo-header
    .milo-nav__panel
    .elementor-nav-menu
    li.current_page_item
    > a {
    color: var(--milo-nav-item-color-hover) !important;
    background: var(--milo-nav-item-bg-hover);
    transform: none !important;
    box-shadow: var(--milo-nav-item-active-shadow);
  }

  header.milo-header .milo-nav__panel .elementor-item {
    border-bottom: none !important;
  }

  header.milo-header .milo-nav__panel a::before,
  header.milo-header .milo-nav__panel a::after {
    content: none !important;
  }
  /* #endregion */

  /* #region 3D) ELEMENTOR DROPDOWN SAFETY */
  header.milo-header .milo-nav__panel,
  header.milo-header .milo-nav__panel-inner {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  header.milo-header .elementor-widget-nav-menu,
  header.milo-header .elementor-widget-nav-menu .elementor-widget-container,
  header.milo-header .elementor-nav-menu__container,
  header.milo-header
    .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  header.milo-header .elementor-nav-menu--dropdown .elementor-nav-menu {
    position: relative !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  header.milo-header
    .elementor-nav-menu--dropdown-tablet
    .elementor-nav-menu--main {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  /* #endregion */

  /* #region 3E) SCROLLED PANEL OFFSET */
  header.milo-header.milo-scrolled .milo-nav__panel {
    top: var(--milo-nav-top-scrolled-tablet);
  }
  /* #endregion */

  /* #region 3F) SCROLLED TOGGLE COMPRESSION */
  header.milo-header.milo-scrolled .milo-nav__toggle-btn {
    width: 34px;
    height: 34px;
    transform: translateY(var(--milo-nav-toggle-btn-shift-scrolled));
  }

  header.milo-header.milo-scrolled .milo-nav__toggle-btn::after {
    inset: var(--milo-nav-toggle-halo-inset-scrolled);
  }

  header.milo-header.milo-scrolled .milo-nav__glyph {
    width: var(--milo-nav-glyph-w-scrolled);
    height: var(--milo-nav-glyph-h-scrolled);
  }

  header.milo-header.milo-scrolled .milo-nav__glyph span {
    height: var(--milo-nav-glyph-stroke-scrolled);
  }

  html.milo-nav-open header.milo-header.milo-scrolled .milo-nav__glyph span {
    height: var(--milo-nav-glyph-open-stroke-scrolled);
  }

  html.milo-nav-open
    header.milo-header.milo-scrolled
    .milo-nav__glyph
    span:first-child {
    transform: translateY(var(--milo-nav-glyph-open-shift-y-scrolled))
      rotate(45deg);
  }

  html.milo-nav-open
    header.milo-header.milo-scrolled
    .milo-nav__glyph
    span:last-child {
    transform: translateY(
        calc(var(--milo-nav-glyph-open-shift-y-scrolled) * -1)
      )
      rotate(-45deg);
  }
  /* #endregion */
}

@media (max-width: 767.98px) {
  header.milo-header .milo-nav__panel {
    position: fixed !important;
    top: var(--milo-nav-top-mobile) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--milo-z-panel) !important;
  }

  header.milo-header .milo-nav__panel-inner {
    padding: var(--milo-nav-panel-pad-y-mobile)
      var(--milo-nav-panel-pad-x-mobile) !important;
    border-radius: var(--milo-nav-panel-radius-mobile) !important;
    background: var(--milo-nav-panel-bg-mobile) !important;
    -webkit-backdrop-filter: blur(var(--milo-nav-panel-blur-mobile)) !important;
    backdrop-filter: blur(var(--milo-nav-panel-blur-mobile)) !important;
  }

  header.milo-header.milo-scrolled .milo-nav__panel {
    top: var(--milo-nav-top-scrolled-mobile) !important;
  }
}
/* #endregion */

/* #region 5) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  header.milo-header .milo-nav__panel,
  header.milo-header .milo-nav__overlay,
  header.milo-header .milo-nav__panel *,
  header.milo-header .milo-nav__glyph span,
  header.milo-header .milo-nav__toggle-btn,
  header.milo-header .milo-nav__toggle-btn::after {
    transition: none !important;
    animation: none !important;
  }

  html.milo-nav-open header.milo-header .milo-nav__panel,
  header.milo-header .milo-nav__panel .elementor-nav-menu a:hover,
  header.milo-header .milo-nav__toggle-btn,
  html.milo-nav-open header.milo-header .milo-nav__glyph span:first-child,
  html.milo-nav-open header.milo-header .milo-nav__glyph span:last-child {
    transform: none !important;
  }

  header.milo-header .milo-nav__toggle-btn::after {
    opacity: 0 !important;
  }
}
/* #endregion */