/* Shared navigation for the showcase, legacy demos and Feature Atlas. */
.site-header {
  --header-height: 76px;
  width: min(calc(100% - 40px), var(--max, 1180px));
  height: var(--header-height);
  margin: 14px auto 0;
  padding: 0 18px 0 22px;
  position: sticky;
  top: 14px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line-strong, #b6b9b0);
  border-radius: 6px;
  background: var(--site-header-background, rgba(241, 239, 233, .96));
  backdrop-filter: blur(18px);
  box-shadow: var(--site-header-shadow, 0 4px 14px rgba(24, 26, 29, .04));
  font-family: var(--site-header-font, "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  line-height: 1.5;
  transition: transform 400ms cubic-bezier(.2, .75, .25, 1), opacity 400ms ease, visibility 0s;
}
.site-header.workflow-hidden {
  transform: translateY(calc(-100% - 14px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 400ms cubic-bezier(.2, .75, .25, 1), opacity 400ms ease, visibility 0s 400ms;
}
.site-header a { color: inherit; text-decoration: none; }
.site-header .brand { display: inline-flex; align-items: center; }
.site-header .brand-logo { width: auto; display: block; object-fit: contain; }
.site-header .brand-logo-header { height: 54px; }
.site-header .desktop-nav { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--muted, #606962); }
.site-header .desktop-nav a, .site-header .text-link { transition: color .2s ease, opacity .2s ease; }
.site-header .desktop-nav a:hover, .site-header .text-link:hover { color: var(--site-header-hover, var(--ink, #181a1d)); }
.site-header .header-actions { display: flex; align-items: center; gap: 16px; }
.site-header .text-link { font-size: 16px; color: var(--muted, #606962); }
.site-header .button {
  min-height: 48px;
  padding: 0 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--accent, #c86b35);
  border-radius: 4px;
  background: var(--accent, #c86b35);
  color: var(--ink, #181a1d);
  font-weight: 600;
  font-size: 14px;
  box-shadow: none;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.site-header .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(24, 26, 29, .12);
  background: var(--site-header-button-hover, #d77b45);
}
.site-header .button-small { min-height: 40px; padding-inline: 16px; font-size: 16px; border-radius: 4px; }
.site-header .desktop-nav [aria-current="page"] {
  color: var(--text, #181a1d);
  text-decoration: underline;
  text-decoration-color: var(--site-header-current-line, var(--accent, #c86b35));
  text-underline-offset: 7px;
}
.site-header .desktop-nav .nav-mobile-only { display: none; }
.site-header .menu-button { display: none; width: 40px; height: 40px; border: 0; background: transparent; }
.site-header .menu-button span { display: block; width: 18px; height: 1px; margin: 5px auto; background: var(--ink, #181a1d); }
@media (max-width: 1000px) {
  .site-header .desktop-nav { display: none; }
  .site-header .header-actions .text-link, .site-header .header-actions .button { display: none; }
  .site-header .menu-button { display: block; }
  .site-header.mobile-open { height: auto; min-height: 76px; flex-wrap: wrap; padding-block: 18px; }
  .site-header.mobile-open .desktop-nav { order: 3; width: 100%; padding: 22px 0 5px; display: grid; gap: 18px; border-top: 1px solid var(--line, #d3d2c9); margin-top: 16px; }
  .site-header.mobile-open .desktop-nav .nav-mobile-only { display: inline-flex; justify-self: start; }
}
@media (max-width: 680px) {
  .site-header .brand-logo-header { height: 48px; }
  .site-header { width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header.workflow-hidden { transition: none; }
}