/* ------------------------------------------------------------------------- */
/* Shared site navigation                                                     */
/* One streamlined menu used identically on every page: Library, Catalog,     */
/* Sources, Editor, Learn, Design. Styled from the design system tokens       */
/* (design/tokens.css) with hard-coded fallbacks so the bar renders the same  */
/* regardless of which base stylesheet loads or whether tokens.css is present. */
/* ------------------------------------------------------------------------- */

.sitenav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2, 0.5rem) var(--sp-4, 1rem);
  padding: var(--sp-3, 0.75rem) clamp(var(--gutter-min, 1rem), 4vw, var(--gutter-max, 2rem));
  margin: 0 0 var(--sp-5, 1.5rem);
  background: var(--c-cream-raised, #faf7ef);
  border-bottom: 1px solid var(--c-rule, #d9d2bf);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(0, 0, 0, 0.04));
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
}

/* Keep the bar pinned to the top while scrolling whenever it sits at the top of
   the page flow (catalog, sources, learn, tutorials, etc.). Pages that embed
   the nav inside other chrome (editor) are unaffected. */
body > .sitenav {
  position: sticky;
  top: 0;
  z-index: 50;
}

.sitenav__brand {
  /* Nav buttons lead on the left (matching the editor); the brand is pushed to
     the right end of the bar. */
  order: 3;
  margin-left: auto;
  color: var(--c-forest, #3c4a32);
  font-family: var(--font-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif);
  font-size: 1.05rem;
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color var(--motion-base, 0.15s) var(--ease-standard, ease);
}

.sitenav__brand:hover { color: var(--c-terracotta, #b5673f); }

.sitenav__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2, 0.5rem);
}

.sitenav__btn {
  padding: 0.42rem 0.95rem;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--c-rule, #d9d2bf);
  background: transparent;
  color: var(--c-forest, #3c4a32);
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  font-size: var(--fs-small, 0.85rem);
  line-height: var(--lh-ui, 1.35);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--motion-base, 0.15s) var(--ease-standard, ease),
    color var(--motion-base, 0.15s) var(--ease-standard, ease),
    border-color var(--motion-base, 0.15s) var(--ease-standard, ease),
    box-shadow var(--motion-base, 0.15s) var(--ease-standard, ease);
}

.sitenav__btn:hover {
  border-color: var(--c-terracotta, #b5673f);
  color: var(--c-terracotta, #b5673f);
  box-shadow: var(--shadow-hover, 0 10px 12px -8px rgba(44, 38, 32, 0.18));
}

.sitenav__btn:focus-visible {
  outline: none;
  border-color: var(--c-terracotta, #b5673f);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181, 103, 63, 0.28));
}

.sitenav__btn.is-current {
  border-color: var(--c-terracotta, #b5673f);
  background: var(--c-terracotta-soft, #e7d3c6);
  color: var(--c-terracotta, #b5673f);
  font-weight: var(--fw-semibold, 600);
}

/* Search field hosted in the bar (library). Sits on the left, just after the
   nav buttons; the brand stays pushed to the right. Treated as the primary
   tool on the page: accent border, surface fill, and a soft lift so it reads
   above the rest of the bar. */
.sitenav__search {
  order: 2;
  flex: 0 1 380px;
  min-width: 0;
}

.sitenav__search input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1rem 0 2.35rem;
  border-radius: var(--r-pill, 999px);
  border: 1.5px solid var(--c-terracotta, #b5673f);
  background: var(--c-cream-raised, #faf7ef)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b5673f' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E")
    no-repeat 0.85rem center;
  color: var(--c-ink, #2f3327);
  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  font-size: var(--fs-body, 1rem);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(0, 0, 0, 0.04));
  outline: none;
  transition:
    border-color var(--motion-base, 0.15s) var(--ease-standard, ease),
    box-shadow var(--motion-base, 0.15s) var(--ease-standard, ease);
}

.sitenav__search input::placeholder { color: var(--c-muted, #7c7864); }

.sitenav__search input:hover {
  box-shadow: var(--shadow-hover, 0 10px 12px -8px rgba(44, 38, 32, 0.18));
}

.sitenav__search input:focus {
  border-color: var(--c-terracotta, #b5673f);
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(181, 103, 63, 0.28));
}

.sitenav__search input:disabled {
  opacity: 0.55;
  cursor: wait;
}

@media print {
  .sitenav { display: none !important; }
}