/**
 * LTD MUSIC — Divi Vertical Navigation
 *
 * Based on the structural approach from Elegant Themes' Divi vertical menu tutorial:
 * - fixed 300px global header on desktop
 * - vertical flex menu
 * - submenus opening to the right
 * - #et-main-area offset to make room for the fixed header
 *
 * Usage in Divi Theme Builder:
 * 1. Global Header regular Section: ltd-vertical-header
 * 2. Menu Module: et-vert-menu ltd-vertical-menu
 *
 * The LTD visual layer below replaces the tutorial's light styling.
 */

:root {
  --ltd-vertical-nav-width: 300px;
}

/* --------------------------------------------------------------------------
   GLOBAL HEADER / VERTICAL RAIL
   Add ltd-vertical-header to the regular SECTION in the Divi Global Header.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .ltd-vertical-header.et_pb_section {
    position: fixed !important;
    top: 0;
    left: 0;
    width: var(--ltd-vertical-nav-width) !important;
    max-width: var(--ltd-vertical-nav-width) !important;
    height: 100vh !important;
    min-height: 100vh;
    padding: 4vh 0 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: 9999;
    background: var(--ltd-surface-lowest) !important;
    border-right: 1px solid var(--ltd-outline-variant);
    box-shadow: 12px 0 28px -24px rgba(0, 220, 230, .65);
  }

  /* Preserve the tutorial's 300px content offset, but make the width configurable. */
  body.ltd-site #et-main-area {
    width: calc(100% - var(--ltd-vertical-nav-width));
    margin-left: var(--ltd-vertical-nav-width);
  }

  /* When Theme Builder outputs a global footer inside #et-main-area, it follows naturally. */
  .ltd-vertical-header .et_pb_row {
    width: 80% !important;
    max-width: 80% !important;
    margin-inline: auto !important;
  }
}

/* WordPress admin bar: keep the rail below it for logged-in editors. */
@media (min-width: 981px) {
  body.admin-bar .ltd-vertical-header.et_pb_section {
    top: 32px;
    height: calc(100vh - 32px) !important;
    min-height: calc(100vh - 32px);
  }
}

/* --------------------------------------------------------------------------
   MENU ROW
   Optional class ltd-vertical-menu-row on the row containing the Menu Module.
   -------------------------------------------------------------------------- */
.ltd-vertical-menu-row.et_pb_row {
  padding-block: 3vh !important;
  border: 1px solid var(--ltd-outline-variant);
  background: var(--ltd-surface-container);
  box-shadow: inset 1px 1px 0 var(--ltd-ghost-border);
}

/* --------------------------------------------------------------------------
   DIVI MENU MODULE
   Keep et-vert-menu for compatibility with the tutorial and add
   ltd-vertical-menu for the LTD visual treatment.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .et-vert-menu .et_pb_menu__menu,
  .et-vert-menu .et_pb_menu__menu > nav {
    width: 100%;
  }

  .et-vert-menu .et_pb_menu__menu > nav > ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  .et-vert-menu .et_pb_menu__menu > nav > ul > li {
    display: block;
    width: 100%;
    margin: 4px 0 !important;
    padding: 0 !important;
  }

  .et-vert-menu .et_pb_menu__menu > nav > ul > li > a {
    width: 100%;
  }

  .et-vert-menu .et_pb_menu__menu > nav > ul > li > ul li {
    display: block !important;
    padding: 0 !important;
  }

  .et-vert-menu .et_pb_menu__menu > nav > ul ul {
    top: 0 !important;
    padding: 0 !important;
  }

  /* Tutorial behavior: first-level submenus fly out to the right of the rail. */
  .et-vert-menu .et_pb_menu__menu > nav > ul > li > ul,
  .et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important;
    top: 0 !important;
  }

  /* Divi icon font: change downward submenu indicator to a right-facing marker. */
  .et-vert-menu .et-menu .menu-item-has-children > a:first-child::after {
    content: "5" !important;
    right: 14px !important;
    top: 50%;
    transform: translateY(-50%);
  }

  .et-vert-menu .et_pb_menu__logo-wrap {
    width: 100%;
    margin: 0 0 20px !important;
    justify-content: flex-start;
  }

  .et-vert-menu .et_pb_menu__logo {
    margin: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   LTD VISUAL TREATMENT
   -------------------------------------------------------------------------- */
.ltd-vertical-menu.et_pb_menu {
  background: transparent !important;
}

.ltd-vertical-menu .et_pb_menu_inner_container,
.ltd-vertical-menu .et_pb_menu__wrap {
  width: 100%;
}

.ltd-vertical-menu .et-menu a {
  position: relative;
  display: flex !important;
  align-items: center;
  min-height: 44px;
  padding: .9rem 1rem !important;
  color: var(--ltd-on-surface-variant) !important;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0 !important;
  font-family: var(--ltd-font-display) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition:
    color var(--ltd-speed-fast) linear,
    background-color var(--ltd-speed-fast) linear,
    border-color var(--ltd-speed-fast) linear,
    transform var(--ltd-speed-fast) linear,
    box-shadow var(--ltd-speed-fast) linear;
}

.ltd-vertical-menu .et-menu > li > a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--ltd-primary-dim);
  box-shadow: 0 0 12px rgba(0,220,230,.85);
  transform: translateY(-50%);
  transition: height var(--ltd-speed) var(--ltd-ease);
}

.ltd-vertical-menu .et-menu > li > a:hover,
.ltd-vertical-menu .et-menu > li.current-menu-item > a,
.ltd-vertical-menu .et-menu > li.current_page_item > a,
.ltd-vertical-menu .et-menu > li.current-menu-ancestor > a,
.ltd-vertical-menu .et-menu > li.is-anchor-active > a,
.ltd-vertical-menu .et-menu > li > a.is-anchor-active {
  color: var(--ltd-primary) !important;
  background: var(--ltd-surface-high);
  border-color: var(--ltd-outline-variant);
  transform: translateX(3px);
  opacity: 1 !important;
  box-shadow: inset 0 0 18px rgba(0,220,230,.035);
}

.ltd-vertical-menu .et-menu > li > a:hover::before,
.ltd-vertical-menu .et-menu > li.current-menu-item > a::before,
.ltd-vertical-menu .et-menu > li.current_page_item > a::before,
.ltd-vertical-menu .et-menu > li.current-menu-ancestor > a::before,
.ltd-vertical-menu .et-menu > li.is-anchor-active > a::before,
.ltd-vertical-menu .et-menu > li > a.is-anchor-active::before {
  height: 60%;
}

/* Dropdown panels */
.ltd-vertical-menu .nav li ul,
.ltd-vertical-menu .et-menu-nav li ul {
  min-width: 230px;
  padding: 8px !important;
  background: rgba(14, 14, 14, .96) !important;
  border: 1px solid var(--ltd-outline-variant) !important;
  border-radius: 0 !important;
  box-shadow: var(--ltd-glow-primary);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.ltd-vertical-menu .nav li li,
.ltd-vertical-menu .et-menu li li {
  width: 100%;
  padding: 0 !important;
  margin: 2px 0 !important;
}

.ltd-vertical-menu .nav li li a,
.ltd-vertical-menu .et-menu li li a {
  width: 100% !important;
  padding: .8rem .9rem !important;
  font-size: 14px !important;
}

/* Logo */
.ltd-vertical-menu .et_pb_menu__logo img {
  max-height: 58px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(0,220,230,.10));
}

/* Cart/search icons when enabled on the Divi menu module. */
.ltd-vertical-menu .et_pb_menu__icon,
.ltd-vertical-menu .et_pb_menu__cart-button,
.ltd-vertical-menu .et_pb_menu__search-button {
  color: var(--ltd-primary-dim) !important;
}

/* --------------------------------------------------------------------------
   OPTIONAL HEADER MODULES
   -------------------------------------------------------------------------- */
.ltd-vertical-header .ltd-vertical-cta.et_pb_button {
  display: block !important;
  width: 100%;
  text-align: center;
}

.ltd-vertical-header .et_pb_social_media_follow {
  display: flex;
  justify-content: center;
  gap: .35rem;
  margin-top: 3vh;
}

.ltd-vertical-header .et_pb_social_media_follow li {
  margin: 0 !important;
}

.ltd-vertical-header .et_pb_social_media_follow li a.icon {
  background: transparent !important;
  border-radius: 0 !important;
}

.ltd-vertical-header .et_pb_social_media_follow li a.icon::before {
  color: var(--ltd-primary-dim) !important;
  transition: color var(--ltd-speed-fast) linear, text-shadow var(--ltd-speed-fast) linear;
}

.ltd-vertical-header .et_pb_social_media_follow li a.icon:hover::before {
  color: var(--ltd-primary) !important;
  text-shadow: 0 0 10px rgba(0,220,230,.65);
}

/* --------------------------------------------------------------------------
   TABLET / PHONE
   Tutorial behavior: section goes back to 100% width and auto height.
   The standard Divi hamburger remains available.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .ltd-vertical-header.et_pb_section {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: var(--ltd-surface-lowest) !important;
    border-right: 0;
    border-bottom: 1px solid var(--ltd-outline-variant);
    box-shadow: 0 8px 22px -20px rgba(0,220,230,.65);
    z-index: 9999;
  }

  body.ltd-site #et-main-area {
    width: 100%;
    margin-left: 0;
  }

  .ltd-vertical-header .et_pb_row,
  .ltd-vertical-menu-row.et_pb_row {
    width: 90% !important;
    max-width: var(--ltd-content-width) !important;
    padding-block: 0 !important;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .ltd-vertical-menu .et_pb_menu__wrap {
    justify-content: flex-end;
  }

  .ltd-vertical-menu .et_mobile_menu {
    background: rgba(14,14,14,.98) !important;
    border-top: 2px solid var(--ltd-primary-dim) !important;
    border-radius: 0 !important;
    box-shadow: var(--ltd-glow-primary);
  }

  .ltd-vertical-menu .et_mobile_menu li a {
    color: var(--ltd-on-surface-variant) !important;
    border-bottom-color: var(--ltd-outline-variant) !important;
    font-family: var(--ltd-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .ltd-vertical-menu .et_mobile_menu li.current-menu-item > a,
  .ltd-vertical-menu .et_mobile_menu li.is-anchor-active > a,
  .ltd-vertical-menu .et_mobile_menu li > a.is-anchor-active,
  .ltd-vertical-menu .et_mobile_menu li a:hover {
    color: var(--ltd-primary) !important;
    background: var(--ltd-surface-high) !important;
    opacity: 1;
  }

  .ltd-vertical-menu .mobile_menu_bar::before {
    color: var(--ltd-primary-dim) !important;
  }
}

@media (max-width: 782px) {
  body.admin-bar .ltd-vertical-header.et_pb_section {
    top: auto;
  }
}

/* --------------------------------------------------------------------------
   ONE-PAGE ANCHOR NAVIGATION
   Divi does not reliably assign current-menu-item to #anchor links.
   The active section can instead use .is-anchor-active on the menu <li>
   or directly on the <a>. This keeps hover and selected states identical.
   -------------------------------------------------------------------------- */
.ltd-vertical-menu .et-menu > li > a[href^="#"],
.ltd-vertical-menu .et-menu > li > a[href*="/#"] {
  cursor: pointer;
}

/* Prevent Divi's current-page class from making every one-page anchor look active. */
.ltd-vertical-menu .et-menu > li.current_page_item:not(.is-anchor-active) > a[href*="#"],
.ltd-vertical-menu .et-menu > li.current-menu-item:not(.is-anchor-active) > a[href*="#"] {
  color: var(--ltd-on-surface-variant) !important;
  background: transparent;
  border-color: transparent;
  transform: translateX(0);
  box-shadow: none;
}

.ltd-vertical-menu .et-menu > li.current_page_item:not(.is-anchor-active) > a[href*="#"]::before,
.ltd-vertical-menu .et-menu > li.current-menu-item:not(.is-anchor-active) > a[href*="#"]::before {
  height: 0;
}