/* File: /assets/css/components/menu.css
   Owner: EC
   Purpose: Horizontal (desktop) and stacked (mobile) navigation
   Version: 1.0
   Updated: 2025-11-09
   Notes (ALCOA-C):
     - Uses tokens only; anchors inherit link policy from base.css
     - Mobile: stacked list; Desktop: inline
     - Current/active state is visible without inventing colors
*/

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Mobile: stacked */
.menu--stack {
  display: grid;
  gap: 0.25rem;
  padding-block: 0.5rem;
}
.menu--stack .menu__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-heading);
  text-decoration: none;
}
.menu--stack .menu__link:hover {
  background: var(--color-surface);
}

/* Desktop: inline */
@media (min-width: 48rem) {
  .menu--inline {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
  }
  .menu--inline .menu__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.5rem;
    border-radius: var(--radius-sm);
    color: var(--color-heading);
    text-decoration: none;
  }
  .menu--inline .menu__link:hover {
    background: var(--color-surface);
  }
}

/* Current page indicator */
.menu__link[aria-current="page"],
.menu__item.is-active > .menu__link {
  color: var(--color-accent);
  /* simple underline bar using border to avoid new colors */
  border-bottom: var(--border-width) solid var(--color-accent);
}

/* Icons beside labels */
.menu__icon {
  width: 1.05em;
  height: 1.05em;
  color: currentColor;
}

/* Submenus (disclosure pattern, optional) */
.menu__submenu {
  list-style: none;
  padding-left: 1rem;
  margin: 0.25rem 0 0;
  border-left: var(--border-width) solid var(--color-border);
}
.menu__item--parent > .menu__link {
  justify-content: space-between;
}
.menu__caret {
  width: 1em; height: 1em; color: currentColor; flex-shrink: 0;
}

/* Focus visibility */
.menu__link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--focus-radius);
}