/**
 * ========================================================================
 * SYSTEM 2: LEFT MENU (NAVIGATION ACCORDION)
 * ========================================================================
 *
 * Handles the collapsible accordion functionality in the left navigation.
 * This system manages expandable menu items like "Lists" that push other
 * items down when opened.
 *
 * Usage: Applied to ul.accordion-menu elements (e.g., #accordion_menu_90)
 * Scope: #sidebar navigation area
 * ========================================================================
 */

/* theme variables are provided by base.css; remove import */

/* left menu sizing tokens live on :root (base.css + critical inline) for lint compliance */

#sidebar .sidebar-nav {
  background: var(--surface-color, #fff);
  border-radius: var(--radius, 3px);
  box-shadow: var(--flyout-shadow-menu, 0 12px 26px rgb(24 39 75 / 8%));
  padding: 4px;
}

ul.accordion-menu {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--surface-color);
  margin: 0;
  padding: 0;
  overflow: hidden;
  line-height: normal;
  list-style: none !important; /* stylelint-disable-line declaration-no-important */
  font-size: var(--left-menu-font-size, 1rem); /* apply responsive font sizing */
  max-width: 100%;
  box-shadow: var(--flyout-shadow-menu, 0 12px 26px rgb(24 39 75 / 8%));
}

ul.accordion-menu-left {
  text-align: left;
}

ul.accordion-menu-right {
  text-align: right;
}

ul.accordion-menu li {
  border-top: 1px solid var(--divider-color);
}

/* Layout: icon and text left-aligned, responsive */
ul.accordion-menu .item-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius, 3px);
  gap: var(--left-menu-icon-gap, var(--icon-gap));
  justify-content: flex-start;
  transition:
    background-color var(--r-flyout-transition, 160ms cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--r-flyout-transition, 160ms cubic-bezier(0.4, 0, 0.2, 1)),
    color var(--r-flyout-transition, 160ms cubic-bezier(0.4, 0, 0.2, 1));
}

ul.accordion-menu .menu-button {
  flex: 0 0 var(--left-menu-icon-slot, var(--icon-slot));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  order: 2;
  padding-left: var(--menu-icon-pad-left, 6px);
}

ul.accordion-menu .menu-button:empty {
  display: none;
}

ul.accordion-menu .menu-link {
  flex: 1 1 auto;
  min-width: 0;
}

ul.accordion-menu .menu-link > a,
ul.accordion-menu .menu-link > p {
  display: flex;
  align-items: center;
  gap: var(--left-menu-icon-gap, var(--icon-gap)); /* reuse responsive spacing token inside link */
  white-space: nowrap; /* keep labels on one line until mobile nav hides sidebar */
  overflow-wrap: normal; /* avoid forced breaks that fight nowrap */
}

ul.accordion-menu > li.first,
ul.accordion-menu > li:first-child {
  border-top: 0;
}

ul.accordion-menu a,
ul.accordion-menu a:hover,
ul.accordion-menu a:visited,
ul.accordion-menu a:active,
ul.accordion-menu a:focus {
  font-family: var(--font-header);
  background: none;
}

/* Unified accordion link colors (accessible, themed) */
ul.accordion-menu a {
  color: var(--menu-text);
}

ul.accordion-menu li > .item-wrapper:hover a,
ul.accordion-menu li > .item-wrapper:focus-within a,
ul.accordion-menu li.current > .item-wrapper a,
ul.accordion-menu li.active > .item-wrapper a,
ul.accordion-menu li.opened > .item-wrapper a {
  color: var(--menu-state-text, var(--primary-color));
  text-decoration: none;
}

/* Keep left menu state visuals aligned with right flyout states */
ul.accordion-menu li.open > .item-wrapper,
ul.accordion-menu li.opened > .item-wrapper,
ul.accordion-menu li.current > .item-wrapper,
ul.accordion-menu li.active > .item-wrapper,
ul.accordion-menu li:hover > .item-wrapper,
ul.accordion-menu li:focus-within > .item-wrapper {
  background: var(--menu-state-bg, var(--white));
  border-color: var(--menu-state-border, var(--primary-color));
}

/* Match/override legacy inline selectors present in converted exercise pages. */
#sidebar ul.accordion-menu li.open > .item-wrapper,
#sidebar ul.accordion-menu li.opened > .item-wrapper,
#sidebar ul.accordion-menu li.current > .item-wrapper,
#sidebar ul.accordion-menu li.active > .item-wrapper,
#sidebar ul.accordion-menu li:hover > .item-wrapper,
#sidebar ul.accordion-menu li:focus-within > .item-wrapper {
  background: var(--menu-state-bg, var(--white));
  border-color: var(--menu-state-border, var(--primary-color));
}

#sidebar ul.accordion-menu li.open > .item-wrapper a,
#sidebar ul.accordion-menu li.opened > .item-wrapper a,
#sidebar ul.accordion-menu li.current > .item-wrapper a,
#sidebar ul.accordion-menu li.active > .item-wrapper a,
#sidebar ul.accordion-menu li:hover > .item-wrapper a,
#sidebar ul.accordion-menu li:focus-within > .item-wrapper a {
  color: var(--menu-state-text, var(--primary-color));
}

/* Preserve legacy open/hover class hooks */
ul.accordion-menu li.open,
ul.accordion-menu li:hover {
  background: none;
}

ul.accordion-menu.button-left li > .item-wrapper > .menu-button,
ul.accordion-menu.button-right li > .item-wrapper > .menu-button {
  padding: 12px 0;
  line-height: 10px;
  float: none;
}

ul.accordion-menu.button-left li > .item-wrapper > .menu-button > img {
  padding-left: 0;
}

ul.accordion-menu.button-right li > .item-wrapper > .menu-button > img {
  padding-right: 0;
}

ul.accordion-menu li > .item-wrapper > .menu-link {
  min-height: 35px;
  overflow: hidden;
}

ul.accordion-menu li > .item-wrapper > .menu-link > a,
ul.accordion-menu li > .item-wrapper > .menu-link > p {
  display: flex;
  align-items: center;
  gap: var(--left-menu-icon-gap, var(--icon-gap));
  text-decoration: none;
  background: none;
  width: auto;
  padding: 10px 10px 7px;
  vertical-align: middle;
}

ul.accordion-menu li > .item-wrapper > .menu-link > a > img,
ul.accordion-menu li > .item-wrapper > .menu-link > p > img {
  vertical-align: -0.125em;
  border: 0 none;
  height: var(--left-menu-icon-size, var(--icon-size));
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  max-width: 100%;
  padding: 0 5px 0 0;
}

ul.accordion-menu li > .item-wrapper > .menu-link > a > svg,
ul.accordion-menu li > .item-wrapper > .menu-link > p > svg {
  flex: 0 0 auto;
  height: var(--left-menu-icon-size, var(--icon-size));
  width: var(--left-menu-icon-size, var(--icon-size));
  max-width: 100%;
  padding: 0 5px 0 0;
}

@media (width <= 1000px) {
  ul.accordion-menu li > .item-wrapper > .menu-link > a > img,
  ul.accordion-menu li > .item-wrapper > .menu-link > p > img,
  ul.accordion-menu li > .item-wrapper > .menu-link > a > svg,
  ul.accordion-menu li > .item-wrapper > .menu-link > p > svg {
    display: none;
  }
}

/* Prevent CLS: reserve consistent space for menu icons */

/* Prefer width + aspect-ratio so SVGs scale correctly without distortion */
ul.accordion-menu .menu-button > img {
  height: var(--left-menu-icon-size, var(--icon-size));
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

ul.accordion-menu .menu-link img {
  height: var(--left-menu-icon-size, var(--icon-size));
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

ul.accordion-menu-left li > .item-wrapper > .menu-link > a,
ul.accordion-menu-left li > .item-wrapper > .menu-link > p,
ul.accordion-menu-right li > .item-wrapper > .menu-link > a,
ul.accordion-menu-right li > .item-wrapper > .menu-link > p {
  float: none;
}

ul.accordion-menu > li > .item-wrapper > .menu-link > a,
ul.accordion-menu > li > .item-wrapper > .menu-link > p {
  font-weight: var(--left-menu-font-weight, 500);
}

ul.accordion-menu li > .ul-wrapper {
  display: none;
}

/* When menu item is marked opened (by JS), reveal nested list */
ul.accordion-menu li.opened > .ul-wrapper {
  display: block;
}

ul.accordion-menu li ul {
  margin: 0;
  padding: 0;
}

ul.accordion-menu.text-left li li > .item-wrapper > .menu-link > a,
ul.accordion-menu.text-left li li > .item-wrapper > .menu-link > p {
  padding-left: 20px;
  max-width: 85%;
}

ul.accordion-menu.text-right li li > .item-wrapper > .menu-link > a,
ul.accordion-menu.text-right li li > .item-wrapper > .menu-link > p {
  padding-right: 20px;
}

ul.accordion-menu.text-left li li li > .item-wrapper > .menu-link > a,
ul.accordion-menu.text-left li li li > .item-wrapper > .menu-link > p {
  padding-left: 30px;
}

ul.accordion-menu.text-right li li li > .item-wrapper > .menu-link > a,
ul.accordion-menu.text-right li li li > .item-wrapper > .menu-link > p {
  padding-right: 30px;
}

ul.accordion-menu.text-left li li li li > .item-wrapper > .menu-link > a,
ul.accordion-menu.text-left li li li li > .item-wrapper > .menu-link > p {
  padding-left: 40px;
}

ul.accordion-menu.text-right li li li li > .item-wrapper > .menu-link > a,
ul.accordion-menu.text-right li li li li > .item-wrapper > .menu-link > p {
  padding-right: 40px;
}

ul.accordion-menu.text-left li li li li li > .item-wrapper > .menu-link > a,
ul.accordion-menu.text-left li li li li li > .item-wrapper > .menu-link > p {
  padding-left: 50px;
}

ul.accordion-menu.text-right li li li li li > .item-wrapper > .menu-link > a,
ul.accordion-menu.text-right li li li li li > .item-wrapper > .menu-link > p {
  padding-right: 50px;
}