/* Shared navigation and controls for the editorial site. Atlas never loads this file. */
:root {
  --wow-header-height: 5rem;
  --wow-gutter: clamp(1rem, 4vw, 4rem);
  --wow-ui-font: 'Josefin Sans', 'Avenir Next', sans-serif;
  --wow-ui-size: .75rem;
  --wow-ui-ink: #4d0826;
  --wow-ui-paper: #f4eddf;
  --wow-ui-line: #c9b898;
  --wow-ui-focus: #850035;
}
body > header.nav {
  --wow-ui-ink: #f5efe3;
  /* A translucent surface keeps the underlying WebGL canvas composited whole. */
  --wow-ui-paper: rgb(36 0 20 / 98%);
  --wow-ui-line: #795c49;
  --wow-ui-focus: #e8d5b7;
}
body.reference-page--library > header.nav {
  --wow-ui-ink: #4d0826;
  --wow-ui-paper: #f4eddf;
  --wow-ui-line: #c9b898;
  --wow-ui-focus: #850035;
}
body > header:is(.site-header, .top, .nav) {
  box-sizing: border-box;
  min-height: var(--wow-header-height);
  height: auto;
  padding: .65rem max(var(--wow-gutter), calc((100vw - 82rem) / 2));
  gap: 1.5rem;
  border-bottom: 1px solid var(--wow-ui-line);
  background: var(--wow-ui-paper);
  color: var(--wow-ui-ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body > header.nav .nav__inner { min-height: calc(var(--wow-header-height) - 1.3rem - 1px); max-width: none; padding: 0; gap: 1.5rem; }
body > header:is(.site-header, .top, .nav) :is(.brand, .site-brand, .nav__brand) { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; gap: .9rem; text-decoration: none; }
body > header:is(.site-header, .top, .nav) :is(.brand__logo, .site-brand img, .nav__brand img) { display: block; width: auto; min-height: 0; height: 2.5rem; }
body > header:is(.site-header, .top, .nav) :is(.brand__text, .site-brand span, .nav__brand-sub) {
  display: block; max-width: none; padding-left: .9rem; border-left: 1px solid var(--wow-ui-line);
  color: var(--wow-ui-ink); font: 500 .625rem/1.4 var(--wow-ui-font); letter-spacing: .15em; text-transform: uppercase;
}
body > header:is(.site-header, .top, .nav) :is(.primary-nav, .top-menu > nav, .nav__links) { gap: clamp(.6rem, 1.8vw, 2rem); }
body > header:is(.site-header, .top, .nav) :is(.primary-nav > a, .top-menu > nav > a, .nav__link) {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  margin: 0; padding: .5rem .2rem; border: 0; background: none;
  color: var(--wow-ui-ink); font: 500 var(--wow-ui-size)/1.4 var(--wow-ui-font); letter-spacing: .12em;
  text-decoration: none; text-transform: uppercase; cursor: pointer;
}
body > header:is(.site-header, .top, .nav) :is(.primary-nav > a, .top-menu > nav > a, .nav__link)::after { content: none; }
body > header:is(.site-header, .top, .nav) nav :is(a, button)[aria-current='page'],
body > header:is(.site-header, .top, .nav) nav :is(a, button):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .6em; }
body > header:is(.site-header, .top, .nav) :is(a, button, summary):focus-visible { outline: 2px solid var(--wow-ui-focus); outline-offset: 4px; }
body > header:is(.site-header, .top, .nav) :is(.menu-button, .nav__menu-toggle, .top-menu > summary) {
  min-width: 44px; min-height: 44px; gap: .65rem; padding: .4rem 0;
  color: var(--wow-ui-ink); font: 500 var(--wow-ui-size)/1.4 var(--wow-ui-font); letter-spacing: .12em;
}
body > header.site-header .menu-button__icon { display: none; }
body > header:is(.site-header, .top, .nav) :is(.menu-button, .nav__menu-toggle, .top-menu > summary)::after {
  content: ''; display: block; flex: 0 0 20px; width: 20px; height: 20px; margin: 0;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 6h16M2 14h16' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
body > header:is(.site-header, .top, .nav) :is(.menu-button, .nav__menu-toggle)[aria-expanded='true']::after,
body > header.top .top-menu[open] > summary::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 4 12 12M4 16 16 4' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
}
/* Shared control proportions; each surface retains its light or dark colour roles. */
:is(.button, .btn, .identity-save, .library-finder__scope) { min-height: 44px; border-radius: 0; font-weight: 500; font-size: var(--wow-ui-size); line-height: 1.5; letter-spacing: .1em; }
:is(.hero-answer__field, .library-finder__field):focus-within { outline: 2px solid #850035; outline-offset: 3px; }
:is(.hero-answer__field, .library-finder__field) input { min-height: 54px; font-size: 1.125rem; caret-color: #850035; }
:is(.hero-answer__field, .library-finder__field) input::placeholder { color: #765e4e; opacity: 1; }
:is(.hero-answer__status, .library-finder__status) { font-size: .8rem; line-height: 1.5; }
@media (max-width: 760px) {
  :root { --wow-header-height: 4.5rem; }
  body > header:is(.site-header, .top, .nav) { gap: 1rem; flex-wrap: nowrap; }
  body > header:is(.site-header, .top, .nav) :is(.brand__logo, .site-brand img, .nav__brand img) { height: 2.125rem; }
  body > header:is(.site-header, .top, .nav) :is(.brand__text, .site-brand span, .nav__brand-sub) { display: none; }
  body > header.top .top-menu { position: static; display: block; margin-left: auto; }
  body > header.top .top-menu > summary { display: inline-flex; align-items: center; list-style: none; }
  body > header:is(.site-header, .top, .nav) :is(.primary-nav, .top-menu > nav, .nav__links) {
    position: absolute; top: 100%; left: 0; right: 0; width: auto; min-width: 0; max-height: calc(100dvh - var(--wow-header-height)); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--wow-gutter) 1rem;
    background: var(--wow-ui-paper); border: 0; border-bottom: 1px solid var(--wow-ui-line); box-shadow: 0 12px 24px rgb(36 0 20 / 10%);
  }
  body > header.top .top-menu:not([open]) > nav { display: none; }
  body > header.top .top-menu[open] > nav { display: flex; }
  body > header:is(.site-header, .top, .nav) :is(.primary-nav > a, .top-menu > nav > a, .nav__link) {
    justify-content: flex-start; min-height: 48px; padding: .7rem .25rem; border-bottom: 1px solid var(--wow-ui-line);
  }
  body > header:is(.site-header, .top, .nav) nav > :last-child { border-bottom: 0; }
}
@media (min-width: 761px) {
  body > header.top .top-menu { display: contents; }
  body > header.top .top-menu > summary { display: none; }
  body > header.top .top-menu > nav { position: static; display: flex; flex-wrap: wrap; width: auto; padding: 0; border: 0; box-shadow: none; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  body > header:is(.site-header, .top, .nav) { flex-wrap: wrap; }
  body > header.nav .nav__inner { flex-wrap: wrap; }
  body > header:is(.site-header, .top, .nav) :is(.brand__text, .site-brand span, .nav__brand-sub) { display: none; }
}
@media (forced-colors: active) {
  body > header:is(.site-header, .top, .nav) { border-color: CanvasText; }
  body > header:is(.site-header, .top, .nav) :is(a, button, summary):focus-visible { outline-color: Highlight; }
}
/* Navigation stays available when enhancement scripts cannot run. */
@media (max-width: 760px) {
  html:not(.js) body > header:is(.site-header, .nav) { position: relative; flex-wrap: wrap; }
  html:not(.js) body > header.nav .nav__inner { flex-wrap: wrap; }
  html:not(.js) body > header:is(.site-header, .nav) :is(.primary-nav, .nav__links) { position: static; display: flex; flex: 1 0 100%; padding: .5rem 0 0; box-shadow: none; }
}