/**
 * @file
 * Visual styles for menu.
 */

ul.menu {
  margin-inline-start: 1em;
  padding: 0;
  list-style: none outside;
  text-align: start;
}
.menu-item--expanded {
  list-style-type: circle;
  list-style-image: url(../../images/icons/menu-expanded.png);
}
.menu-item--collapsed {
  list-style-type: disc;
  list-style-image: url(../../images/icons/menu-collapsed.png); /* LTR */
}
[dir="rtl"] .menu-item--collapsed {
  list-style-image: url(../../images/icons/menu-collapsed-rtl.png);
}
.menu-item {
  margin: 0;
  padding-top: 0.2em;
}
ul.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.25rem;
}
ul.menu a.is-active {
  color: var(--nav-active-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  font-weight: 600;
}

/* =============================================================
   Dropdown submenu — CSS-only via :hover + :focus-within
   No JavaScript required. :focus-within on the parent <li>
   keeps the dropdown open while keyboard focus is within it,
   covering both the trigger link and all child links.
   ============================================================= */

/* Suppress the list-style-type/image that .menu-item--expanded sets (lines
   12-15 above) when inside the main navigation. Drupal unconditionally adds
   menu-item--expanded to every <li> that has children, so that general rule
   leaks into the nav bar. Scoping to .menu--main leaves it untouched for any
   sidebar/footer menu that uses the indicator deliberately. */
.menu--main .menu-item--expanded {
  list-style: none;
}

/* Positioning context for any list item that has children */
.menu-item--has-children {
  position: relative;
}

/* Chevron caret on the trigger link — pure CSS, no image dependency.
   In flex nav contexts the ::after is a flex child; in other contexts
   display: inline-block keeps it inline. Both work correctly. */
.menu-item--has-children > a::after {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 0.35em;
  height: 0.35em;
  margin-inline-start: 0.45em;
  border-inline-end: 0.12em solid currentColor;
  border-block-end: 0.12em solid currentColor;
  transform: rotate(45deg) translateY(-0.2em);
  vertical-align: middle;
  opacity: 0.85;
}

/* Dropdown list: hidden by default */
.menu-item--has-children > ul.menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 500;
  min-width: 12rem;
  margin: 0.25rem 0 0;
  margin-inline-start: 0;           /* reset the base ul.menu indent */
  padding: 0.35rem 0;
  list-style: none;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #d0d0d0);
  border-radius: var(--radius-2, 0.5rem);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* Hidden state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition:
    opacity var(--duration-2, 200ms) ease,
    visibility var(--duration-2, 200ms) ease,
    transform var(--duration-2, 200ms) ease;
}

/* Reveal on pointer hover OR keyboard focus anywhere inside the <li> */
.menu-item--has-children:hover > ul.menu,
.menu-item--has-children:focus-within > ul.menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown list items: reset base .menu-item top padding */
.menu-item--has-children > ul.menu > .menu-item {
  padding-top: 0;
  list-style: none;
}

/* Dropdown links */
.menu-item--has-children > ul.menu > .menu-item > a {
  display: flex;
  align-items: center;
  min-height: 44px;                  /* WCAG touch target */
  padding: 0.4rem 1rem;
  white-space: nowrap;
  color: var(--color-text, inherit);
  text-decoration: none;
}

.menu-item--has-children > ul.menu > .menu-item > a:hover,
.menu-item--has-children > ul.menu > .menu-item > a:focus-visible {
  background-color: rgba(0, 0, 0, 0.05);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.menu-item--has-children > ul.menu > .menu-item > a:focus-visible {
  outline: var(--focus-ring, 3px solid #0b57d0);
  outline-offset: -2px;             /* inset so outline stays within the item */
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .menu-item--has-children > ul.menu {
    transition: opacity var(--duration-1, 120ms) ease, visibility 0s;
    transform: none;
  }
}