/* ----- Collapsible side menu (mod_menu layout "sidemenu") ----- */
/* Loaded by the layout itself (web asset "tpl.sidemenu"), so only on pages that show the menu.
   It replaces the "Added 15-10-2026 sprint" block in custom.css, which was written for the
   core layout: remove that block.

   Light and dark mode: all colours are Bootstrap variables (--bs-body-color,
   --bs-link-color, --bs-link-hover-color) or currentColor. The template switches
   those variables with @media (prefers-color-scheme: dark), so no extra dark rules
   are needed here.

   The selectors start with ul.mod-menu.sidemenu to override the top-menu rules at the
   start of custom.css (dark blue background and border on hover, current and active
   items), which apply to every .mod-menu. custom.css is output after this file, so the
   "ul" is needed to win from its .mod-menu rules of equal class weight. */

.sidebar-left .manualmenu {
  margin: 2rem 0;
  border: 0;
}

ul.mod-menu.sidemenu {
  --sidemenu-toggle: 1.5rem;
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--bs-body-color);
}

/* Closed sub-menus; also wins from any display rule on ul */
ul.mod-menu.sidemenu [hidden] {
  display: none !important;
}

/* Sub-levels: indented, in link colour */
ul.mod-menu.sidemenu .mod-menu__sub {
  margin: 0;
  padding: .25rem 0 .75rem 1rem;
  list-style: none;
}

/* Parent row: chevron on the left, then the link or label */
.sidemenu__row {
  display: flex;
  align-items: center;
}

/* Links: no backgrounds or borders in either mode */
ul.mod-menu.sidemenu .nav-item .nav-link,
ul.mod-menu.sidemenu .nav-item .nav-link:hover {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: .3rem .5rem .3rem calc(var(--sidemenu-toggle) + .25rem);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--bs-body-color);
  font-weight: 400;
}

ul.mod-menu.sidemenu .sidemenu__row > .nav-link,
ul.mod-menu.sidemenu .sidemenu__row > .nav-link:hover {
  padding-left: .25rem;
}

ul.mod-menu.sidemenu .mod-menu__sub .nav-link,
ul.mod-menu.sidemenu .mod-menu__sub .nav-link:hover {
  padding-block: .25rem;
  color: var(--bs-link-color);
}

ul.mod-menu.sidemenu .nav-item .nav-link:hover {
  text-decoration: underline;
}

ul.mod-menu.sidemenu .mod-menu__sub .nav-link:hover {
  color: var(--bs-link-hover-color);
}

/* Toggle buttons: reset browser button styles */
.sidemenu__toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: var(--sidemenu-toggle);
  min-height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

/* A heading/separator parent: the whole row is the button */
.sidemenu__toggle--label {
  flex: 1 1 auto;
}

.sidemenu__toggle--label .nav-header {
  padding-left: .25rem;
}

.sidemenu__toggle--label:hover .nav-header {
  text-decoration: underline;
}

/* Chevron, drawn in currentColor: points right when closed, down when open */
.sidemenu__chevron {
  flex: 0 0 auto;
  width: .5rem;
  height: .5rem;
  margin: 0 .5rem;
  border: solid currentColor;
  border-width: 0 .1875rem .1875rem 0;
  transform: rotate(-45deg);
  transition: transform .2s;
}

[dir="rtl"] .sidemenu__chevron {
  transform: rotate(135deg);
}

.sidemenu__toggle[aria-expanded="true"] .sidemenu__chevron {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .sidemenu__chevron {
    transition: none;
  }
}

/* Open parents semi-bold, the current page bold */
ul.mod-menu.sidemenu .sidemenu__row:has(> [aria-expanded="true"]) :is(.nav-link, .nav-header) {
  font-weight: 600;
}

ul.mod-menu.sidemenu .nav-item.current > .nav-link,
ul.mod-menu.sidemenu .nav-item.current > .sidemenu__row > .nav-link {
  font-weight: 700;
}

ul.mod-menu.sidemenu :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: -3px;
}