/* Menu arrow styling using Line Awesome Free font.
   Uses the original Espire theme implementation with pseudo-element.
   Line Awesome fonts are loaded via CDN in index.html.
*/

.nav-submenu-arrow {
  position: absolute;
  right: 20px;
  transition: transform 0.2s ease;
  font-size: 12px;
  font-family: 'Line Awesome Free';
  font-weight: 900;
  font-style: normal;
  margin-top: -3px;
}

/* Larger hit-area for submenu toggles: full right-side square */
.nav-submenu-title {
  position: relative;
  padding-right: 44px;
}

.nav-submenu-title .nav-submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-submenu-title .nav-submenu-arrow {
  position: static;
  right: auto;
  margin-top: 0;
}

/* Nested submenu items align with sibling menu items under same parent */
.side-nav .nav-submenu > .nav-menu > .nav-submenu > .nav-submenu-title {
  padding-left: 3.3rem;
}

.nav-submenu-arrow:before {
  content: "\f107"; /* Line Awesome chevron-down icon */
}

/* Rotate when submenu is opened (JS toggles `.open`) - quarter turn animation */
.nav-submenu.open > .nav-submenu-title .nav-submenu-arrow,
.nav-submenu.is-opened > .nav-submenu-title .nav-submenu-arrow {
  /* Chevron-down rotated -90deg (quarter turn) -> points right */
  transform: rotateZ(-90deg);
}

/*
 * _side-nav.scss hides every .nav-submenu > .nav-menu by default. Without this,
 * nested groups (e.g. Band > Management) stay invisible unless an inline style
 * is present; .open alone must show the direct child panel.
 */
.side-nav.vertical-menu .nav-submenu.open > .nav-menu {
  display: block;
}