:root {
  --site-content-max: 1440px;
  --site-gutter: clamp(20px, 6vw, 92px);
  --site-header-height: 65px;
  --nav-popover-gap: 12px;
  /* Keep navigation above page tools, without eclipsing global feedback. */
  --z-content: 0;
  --z-sticky-panel: 100;
  --z-global-header: 1000;
  --z-header-dropdown: 1100;
  --z-overlay: 2000;
  --z-modal: 2100;
  --z-toast: 3000;
}

/* The base template places the site header directly under body.  Giving that
   stacking context a global layer lets its popovers clear editor toolbars. */
body > header.site-header { z-index: var(--z-global-header); }

header.site-header {
  min-height: var(--site-header-height);
  padding-inline: max(var(--site-gutter), calc((100% - var(--site-content-max)) / 2));
}

main:not(.home-main) {
  width: min(100% - 2 * var(--site-gutter), var(--site-content-max));
  max-width: var(--site-content-max);
  padding-inline: 0;
}

.site-return { margin-top: 4px; }

.nav-menu__trigger {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  border: 0;
  padding: 4px 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.nav-menu__trigger::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  color: var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 240ms cubic-bezier(.22, 1, .36, 1);
}

.nav-menu.is-open .nav-menu__trigger::after { transform: translateY(2px) rotate(225deg); }
.nav-menu__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.nav-menu { position: relative; }
header.site-header > nav {
  flex-wrap: nowrap;
}
header.site-header > nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav-menu.is-open { z-index: var(--z-header-dropdown); }
.nav-popover[hidden] { display: none; }
.nav-popover {
  position: absolute;
  top: calc(100% + var(--nav-popover-gap));
  right: 0;
  z-index: var(--z-header-dropdown);
  width: max-content;
  min-width: 180px;
  max-width: min(320px, calc(100vw - 32px));
  margin-top: 0;
  padding: 8px;
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px) scaleY(.96);
  transition:
    opacity 240ms cubic-bezier(.22, 1, .36, 1),
    transform 240ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 240ms;
}

/* The bridge belongs to the popover, so its full width follows either the
   desktop right edge or the mobile management-menu left edge. */
.nav-popover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: var(--nav-popover-gap);
  pointer-events: none;
}

.nav-menu.is-open .nav-popover::before { pointer-events: auto; }

.nav-menu.is-open .nav-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scaleY(1);
  transition:
    opacity 240ms cubic-bezier(.22, 1, .36, 1),
    transform 240ms cubic-bezier(.22, 1, .36, 1),
    visibility 0s;
}

.nav-popover > * {
  opacity: 0;
  transform: translateY(-7px);
  transition: opacity 180ms cubic-bezier(.22, 1, .36, 1), transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.nav-menu.is-open .nav-popover > * {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--menu-item-index, 0) * 35ms);
}

.nav-popover a,
.nav-popover .nav-logout .link {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.nav-popover a:hover,
.nav-popover a:focus-visible,
.nav-popover .nav-logout:hover,
.nav-popover .nav-logout:focus-within {
  background: #f3ede2;
  color: var(--accent);
  outline: none;
}

.nav-popover .nav-logout { margin: 0; padding: 0; }
.nav-popover .nav-logout .link { border: 0; background: transparent; font: inherit; cursor: pointer; }

/* Management navigation stays visible beside long admin and member pages. */
.module-sidebar {
  position: sticky;
  top: calc(var(--site-header-height) + 16px);
  align-self: start;
  max-height: calc(100dvh - var(--site-header-height) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu__trigger::after,
  .nav-popover,
  .nav-popover > * { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}

@media (max-width: 760px) {
  header.site-header,
  .home-page > header.site-header {
    position: relative;
    padding-inline: 20px;
  }
  main:not(.home-main) { width: auto; margin-inline: 20px; }
  header.site-header > nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    gap: clamp(8px, 3vw, 16px);
    white-space: nowrap;
  }
  header.site-header > nav > a,
  header.site-header > nav > .nav-menu {
    flex: 0 0 auto;
    min-width: max-content;
  }
  .nav-popover {
    position: absolute;
    top: calc(100% + var(--nav-popover-gap));
    width: max-content;
    max-width: min(320px, calc(100vw - 32px));
    margin-top: 0;
  }
  .nav-menu[data-nav-menu="management"] .nav-popover { left: 0; right: auto; }
  .nav-menu[data-nav-menu="personal"] .nav-popover { left: auto; right: 0; }
  .module-sidebar { position: static; max-height: none; overflow: visible; }
}