/* Meridian · Navbar
   Modifiers: .dm-navbar--sticky (sticks to the top of its scroll container),
              .dm-navbar--scrolled (added by JS past 8px scroll: shadow + tighter padding),
              .dm-navbar--open (added by JS on mobile when the menu is expanded).
   Mobile (<768px): the hamburger morphs to an X and the menu slides down via the
   grid-template-rows trick (the sanctioned height-animation exception). */

.dm-navbar {
  background: var(--dm-color-surface);
  border-bottom: 1px solid var(--dm-color-outline-variant);
  transition: box-shadow var(--dm-duration-base) var(--dm-ease-standard),
    background-color var(--dm-duration-base) var(--dm-ease-standard);
}

.dm-navbar--sticky {
  position: sticky;
  top: 0;
  z-index: 10;
}

.dm-navbar--scrolled {
  box-shadow: var(--dm-shadow-md);
}

.dm-navbar__inner {
  display: flex;
  align-items: center;
  gap: var(--dm-space-lg);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--dm-space-md) var(--dm-space-lg);
  /* padding is the one layout property we ease here — it sells the "condense on
     scroll" moment and the bar is the only thing moving on screen */
  transition: padding var(--dm-duration-base) var(--dm-ease-standard);
}

.dm-navbar--scrolled .dm-navbar__inner {
  padding-top: var(--dm-space-sm);
  padding-bottom: var(--dm-space-sm);
}

/* ---- Brand --------------------------------------------------------------- */

.dm-navbar__brand {
  font: var(--dm-type-h3);
  letter-spacing: var(--dm-tracking-heading);
  color: var(--dm-color-on-surface);
  text-decoration: none;
  white-space: nowrap;
}

.dm-navbar__brand:hover {
  color: var(--dm-color-on-surface);
}

/* ---- Menu (links + actions) ---------------------------------------------- */

.dm-navbar__menu {
  display: flex;
  flex: 1;
  min-width: 0;
}

.dm-navbar__menu-inner {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--dm-space-lg);
}

.dm-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--dm-space-lg);
  margin-inline: auto; /* centers the links between brand and actions */
}

.dm-navbar__link {
  position: relative;
  padding: var(--dm-space-sm) 0;
  font: var(--dm-type-label-md);
  letter-spacing: var(--dm-tracking-label);
  color: var(--dm-color-on-surface-variant);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dm-duration-fast) var(--dm-ease-standard);
}

/* Hover underline grows from the left via scaleX — transform only, no layout */
.dm-navbar__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--dm-color-primary);
  border-radius: var(--dm-rounded-full);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dm-duration-base) var(--dm-ease-emphasized);
}

.dm-navbar__link:hover {
  color: var(--dm-color-on-surface);
}

.dm-navbar__link:hover::after,
.dm-navbar__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.dm-navbar__link[aria-current="page"] {
  color: var(--dm-color-on-surface);
}

.dm-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--dm-space-sm);
}

/* ---- Hamburger toggle (mobile only) --------------------------------------- */

.dm-navbar__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: var(--dm-control-height);
  height: var(--dm-control-height);
  margin-left: auto;
  background: transparent;
  border: none;
  border-radius: var(--dm-rounded-sm);
  cursor: pointer;
}

.dm-navbar__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--dm-color-on-surface);
  border-radius: var(--dm-rounded-full);
  transition: transform var(--dm-duration-base) var(--dm-ease-emphasized),
    opacity var(--dm-duration-fast) var(--dm-ease-standard);
}

/* Bars morph into an X: outer bars rotate into place, middle bar fades out */
.dm-navbar__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.dm-navbar__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.dm-navbar__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Mobile layout --------------------------------------------------------- */

@media (max-width: 767px) {
  .dm-navbar__inner {
    flex-wrap: wrap;
    gap: 0;
    padding: var(--dm-space-sm) var(--dm-space-md);
  }

  .dm-navbar__toggle {
    display: inline-flex;
  }

  /* Collapsed by default; --open animates 0fr → 1fr (height via grid rows) */
  .dm-navbar__menu {
    display: grid;
    flex-basis: 100%;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dm-duration-slow) var(--dm-ease-emphasized);
  }

  .dm-navbar__menu-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dm-duration-base) var(--dm-ease-standard),
      visibility 0s var(--dm-duration-slow);
  }

  .dm-navbar--open .dm-navbar__menu {
    grid-template-rows: 1fr;
  }

  .dm-navbar--open .dm-navbar__menu-inner {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--dm-duration-base) var(--dm-ease-standard);
  }

  .dm-navbar__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: var(--dm-space-sm) 0 0;
  }

  .dm-navbar__link {
    padding: var(--dm-space-sm) var(--dm-space-xs);
  }

  /* On mobile the underline marks only the active link, not hovers */
  .dm-navbar__link::after {
    right: auto;
    width: var(--dm-space-md);
  }

  .dm-navbar__actions {
    padding: var(--dm-space-md) var(--dm-space-xs);
  }

  .dm-navbar__actions > * {
    flex: 1;
  }
}