/* ==========================================================================
   THEATRUM ANIMI — site navigation and drawer
   Ported verbatim from mockup/assets/css/components.css (site nav, nav toggle,
   the nav parts of the 64em rule, drawer); loaded with core/navigation.
   WordPress-only rules at the end map them onto core markup.
   ========================================================================== */

.site-nav { margin-left: auto; }
.site-nav__list { display: flex; align-items: center; gap: var(--space-lg); }
.site-nav__link {
  display: inline-block;
  padding-block: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: var(--border-rule) solid transparent;
}
.site-nav__link:hover { border-bottom-color: var(--color-border-default); }
.site-nav__link[aria-current="page"] { border-bottom-color: currentcolor; }

.nav-toggle { display: none; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

@media (max-width: 63.99em) {
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; }
}

/* --- mobile drawer -------------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--color-surface-inverse);
  color: var(--color-ink-inverse);
  padding: var(--space-md) var(--page-margin) var(--space-2xl);
  overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; }
.drawer__top img { height: 1.5rem; }
.drawer__list { margin-top: var(--space-lg); }
.drawer__list a {
  display: block;
  padding-block: var(--space-md);
  border-bottom: var(--border-hairline) solid var(--color-border-inverse);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
}
.drawer__actions { display: flex; gap: var(--space-sm); margin-top: var(--space-xl); }
.drawer__actions .btn { flex: 1; }

/* --- WordPress ---------------------------------------------------------------
   One core/navigation block in the header: overlayMenu "always" with the
   navigation-overlay part as the drawer (docs/wp-contract.md, 2a). Core
   repeats the block's classes on its list, so .site-nav matches both the nav
   and its ul. Core shows the list from 600px for menus that are not
   "always"; the mockup switches at 64em, so the same rules apply there. */

.site-header nav.wp-block-navigation.site-nav { margin-left: auto; gap: 0; }
/* Core's flex layout wraps; keep the navigation on one row with intact labels. */
.site-header ul.site-nav { margin-left: 0; flex-wrap: nowrap; align-items: center; gap: var(--space-lg); }
@media (min-width: 64em) and (max-width: 68.75em) {
  .site-header ul.site-nav { gap: var(--space-2xs); }
}
.site-header ul.site-nav .wp-block-navigation-item__content {
  display: inline-block;
  padding-block: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--border-rule) solid transparent;
}
.site-header ul.site-nav .wp-block-navigation-item__content:hover { border-bottom-color: var(--color-border-default); }
.site-header ul.site-nav .wp-block-navigation-item__content[aria-current] { border-bottom-color: currentcolor; }

@media (min-width: 64em) {
  .site-header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
    display: block;
    width: 100%;
    position: relative;
    z-index: auto;
    background-color: inherit;
  }
  .site-header .wp-block-navigation__responsive-container-open.always-shown { display: none; }
}

/* The menu button is the mockup's .nav-toggle with its drawn menu icon. */
.site-header .wp-block-navigation__responsive-container-open {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.site-header .wp-block-navigation__responsive-container-open svg,
.drawer .wp-block-navigation-overlay-close svg { display: none; }
.site-header .wp-block-navigation__responsive-container-open::before,
.drawer .wp-block-navigation-overlay-close::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentcolor;
  -webkit-mask: var(--ta-icon-menu) center / contain no-repeat;
          mask: var(--ta-icon-menu) center / contain no-repeat;
}
.drawer .wp-block-navigation-overlay-close::before {
  -webkit-mask-image: var(--ta-icon-close);
          mask-image: var(--ta-icon-close);
}

/* The drawer: the overlay part's group carries .drawer; core positions its
   dialog, which is open only below 64em. */
.drawer { text-align: left; }

/* The mockup stacks its drawer (z 60) under its cookie banner (z 70), so the
   banner hides the drawer's last links and their focus (WCAG 2.4.11). The
   drawer is drawn inside the header's stacking context, so while it is open
   the header rises above the banner. */
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) { z-index: calc(var(--z-banner) + 1); }
.drawer .wp-block-navigation-overlay-close {
  display: inline-flex;
  position: static;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}
.drawer .wp-block-navigation-overlay-close__text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.drawer .drawer__top .logo { height: 1.5rem; width: auto; }
.drawer div.drawer__list { display: block; width: 100%; }
.drawer ul.drawer__list { display: block; margin-top: 0; }
.drawer .drawer__list .wp-block-navigation-item { display: block; }
.drawer .drawer__list .wp-block-navigation-item__content {
  display: block;
  padding-block: var(--space-md);
  border-bottom: var(--border-hairline) solid var(--color-border-inverse);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
}
.drawer__actions > * { flex: 1; }
.drawer__actions .wp-block-button,
.drawer__actions .wp-block-button__link { width: 100%; }

/* Core navigation drops link underlines inside the block; the drawer's
   e-mail link keeps the mockup's default underline. */
.drawer .funding-note a { text-decoration: underline; }