/**
 * menu.css — primary navigation (src/components/Menu.astro) and theme toggle
 * (src/components/ThemeToggle.astro).
 *
 * Loaded LAST (after shell.css). Colors, spacing, radii and shadows come from
 * tokens.css — never hardcode a color here.
 */

/* ---------- Header layout: logo left, menu + theme toggle right -------- */
.header-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* no space-between: the theme toggle pushes itself to the right edge
     with margin-left:auto, so the menu sits next to the logo */
  justify-content: flex-start;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.region--primary-menu {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* own row below the logo: menu on the left, theme toggle on the right */
  flex: 1 1 100%;
  min-width: 0;
}

/* ---------- Hamburger (mobile only) ------------------------------------ */
/* No box: plain icon + label on the header chrome, like a text link. */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  margin-left: calc(-1 * var(--space-2)); /* optically align with logo edge */
  background-color: transparent;
  color: var(--color-primary);
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.menu-toggle:hover {
  background-color: transparent;
  color: var(--color-primary-strong);
  text-decoration: none;
}

.menu-toggle__bars {
  position: relative;
  display: block;
  width: 20px;
  height: 3px;
  background-color: currentColor;
  border-radius: var(--radius-pill);
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 3px;
  background-color: currentColor;
  border-radius: var(--radius-pill);
}

.menu-toggle__bars::before {
  top: -6px;
}

.menu-toggle__bars::after {
  top: 6px;
}

/* ---------- Menu lists (shared) ----------------------------------------- */
.main-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu__item a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.main-menu__item a:hover {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  text-decoration: none;
}

/* Sub lists: always visible on mobile (indented accordion). */
.main-menu__list--sub {
  margin: 0 0 0 var(--space-3);
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-border);
}

.main-menu__list--sub .main-menu__item a {
  font-weight: var(--font-weight-regular);
  font-size: var(--text-sm);
}

/* ---------- Mobile panel: hidden until the hamburger opens it ----------- */
.main-menu {
  display: none;
}

.main-menu.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}

/* ---------- Desktop: horizontal bar with CSS-only dropdowns ------------- */
@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }

  .main-menu,
  .main-menu.is-open {
    display: block;
    position: static;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .main-menu__list--top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .main-menu__item {
    position: relative;
  }

  .main-menu__list--sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    display: none;
    min-width: 16em;
    margin: 0;
    padding: var(--space-1) 0;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
  }

  /* Dropdowns open on hover AND on keyboard focus (focus-within). */
  .main-menu__item--has-children:hover > .main-menu__list--sub,
  .main-menu__item--has-children:focus-within > .main-menu__list--sub {
    display: block;
  }

  .main-menu__list--sub .main-menu__item a {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }
}

/* ---------- Theme toggle ------------------------------------------------ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  margin-left: auto; /* push to the right edge of the header row */
  background-color: transparent;
  color: var(--color-text);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.theme-toggle:hover {
  background-color: transparent;
  color: var(--color-primary);
}

.theme-toggle__icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Show the moon in light mode, the sun in dark mode (explicit data-theme
   wins over the OS preference, mirroring tokens.css). */
.theme-toggle__icon--sun {
  display: none;
}

[data-theme="dark"] .theme-toggle__icon--sun {
  display: block;
}

[data-theme="dark"] .theme-toggle__icon--moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .theme-toggle__icon--sun {
    display: block;
  }

  html:not([data-theme="light"]) .theme-toggle__icon--moon {
    display: none;
  }
}