/* ============================================================
   Nyckel shared site header — single source of truth.
   Self-contained (no Bootstrap / jQuery / SmartMenus).
   Consumed by BOTH the Jekyll marketing pages and the .NET
   server-rendered pretrained/solution pages via /assets.

   Values mirror _sass/navbar-redesign.scss and consume the
   shared tokens from design-tokens.css (--docs-* / --hdr-*),
   so token changes propagate here automatically. Fallbacks
   keep it correct if design-tokens.css isn't present.
   ============================================================ */

/* Sit flush to the viewport top — the marketing site resets this globally
   (navbar-redesign.scss); standalone SSR pages need it too. Antialiasing
   matches the marketing body so nav text renders at the same visual weight
   (without it, 500-weight text looks bolder). */
html body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.nyk-hd {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--docs-header-bg, #ffffff);
  border-bottom: 1px solid var(--docs-header-border, #e1e4e8);
  padding-top: 6px;
  font-family: var(--docs-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
}
.nyk-hd * { box-sizing: border-box; }
.nyk-hd-wrap {
  max-width: none;
  margin: 0 auto;
  /* Real header double-pads (nav.navbar padding-left + inner .container
     padding-left, each --hdr-pad-x), so the logo sits at 2x the token. */
  padding: 0 calc(var(--hdr-pad-x, 20px) * 2);
  /* Row height matches the real navbar: Bootstrap .navbar-brand's inherited
     1.25rem line-box makes the brand 56px tall. 6px header pad-top + 56 + 1px
     border = the 63px total measured on the live marketing header. */
  min-height: 56px;
  display: flex;
  align-items: center;
}

/* Logo: blue square N + blue wordmark */
.nyk-hd-brand { display: inline-flex; align-items: center; gap: var(--hdr-logo-gap, 6px);
  text-decoration: none; line-height: 1; margin-right: var(--hdr-nav-offset, 24px);
  position: relative; top: 1px; }
.nyk-hd-logo { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 5px; background: #1e5c97; color: #fff; font-size: 12px; font-weight: 800;
  letter-spacing: -0.02em; flex-shrink: 0; }
.nyk-hd-word { font-size: 14px; font-weight: 700; color: #1e5c97; letter-spacing: -0.01em; line-height: 1; }

/* Primary nav */
/* Real nav items butt against each other (0 gap) — spacing comes from each
   link's 11px side padding, not a flex gap. */
.nyk-hd-nav { display: flex; align-items: center; gap: 0; }
.nyk-hd-item { position: relative; }
.nyk-hd-link { display: inline-flex; align-items: center; gap: 3px;
  padding: var(--hdr-item-pad-y, 5px) var(--hdr-item-pad-x, 11px);
  font-size: 12.5px; font-weight: 500; color: var(--docs-text-muted, #57606a); letter-spacing: 0.01em;
  text-decoration: none; border-radius: 20px; cursor: pointer; background: none; border: 0;
  font-family: inherit; transition: color 0.12s, background 0.12s; }
.nyk-hd-link:hover { color: var(--docs-text, #1c1e21); background: var(--docs-bg-subtle, #f6f8fa); }
.nyk-hd-chevron { width: 12px; height: 12px; opacity: 0.55; margin-top: -1px; margin-left: 1px; transition: transform 0.18s; flex-shrink: 0; }
.nyk-hd-item:hover .nyk-hd-chevron, .nyk-hd-item.nyk-open .nyk-hd-chevron { transform: rotate(180deg); opacity: 0.8; }

/* Invisible hover bridge across the gap to the dropdown */
.nyk-hd-item::after { content: ""; position: absolute; bottom: -10px; left: 0; right: 0; height: 10px; background: transparent; }

/* Dropdown panel */
.nyk-hd-menu { position: absolute; top: 100%; left: 0; margin-top: 10px; min-width: 220px; padding: 4px 0;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.14s, transform 0.14s, visibility 0.14s; }
.nyk-hd-item:hover .nyk-hd-menu, .nyk-hd-item.nyk-open .nyk-hd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nyk-hd-menu-item { display: flex; align-items: flex-start; padding: 9px 14px; text-decoration: none; }
.nyk-hd-menu-item:hover { background: #f0f6ff; }
.nyk-hd-menu-item img { width: 24px; height: 24px; border-radius: 4px; object-fit: contain; margin-right: 12px; flex-shrink: 0; }
.nyk-hd-menu-title { display: block; font-size: 12.5px; font-weight: 600; color: #1a1a2e; line-height: 1.2; margin-bottom: 2px; }
.nyk-hd-menu-sub { display: block; font-size: 11.5px; color: #6b7280; line-height: 1.35; }
.nyk-hd-menu-item:hover .nyk-hd-menu-title, .nyk-hd-menu-item:hover .nyk-hd-menu-sub { color: #1e5c97; }

/* Right-side auth cluster (values from auth-aware-head.html — unchanged) */
/* Real button cluster (navbar-other) has margin-top: -5px, sitting ~3px above
   the logo/nav center. */
/* 16px between cluster items matches the real header's nav-item spacing. */
.nyk-hd-right { margin-left: auto; display: flex; align-items: center; gap: 16px; margin-top: -5px; }
.nyk-btn { display: inline-flex; align-items: center; font-family: var(--docs-font, Inter, sans-serif);
  font-size: 12.4px; line-height: 1.7; border: none; border-radius: 5px; text-decoration: none; white-space: nowrap;
  transition: color 0.12s, background 0.12s; cursor: pointer; }
.nyk-btn-login { padding: 4.5px 11px; font-weight: 500; color: var(--docs-text-muted, #57606a); background: transparent; }
.nyk-btn-login:hover { color: var(--docs-text, #1c1e21); background: #eef1f4; }
.nyk-btn-signup { padding: 4.5px 12px; font-weight: 600; color: #fff; background: #1e5c97; }
.nyk-btn-signup:hover { background: #155082; color: #fff; }

/* Avatar + account menu (values from auth-aware-head.html) */
.nyk-account { position: relative; }
.nyk-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  padding: 0; margin: 0; border: none; border-radius: 50%; background: #1e5c97; color: #fff;
  font-family: var(--docs-font, Inter, sans-serif); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; }
.nyk-avatar:hover { background: #155082; }
.nyk-avatar::before { content: var(--nyk-initial, ''); }
.nyk-menu-account { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1050; min-width: 190px;
  padding: 6px 0; background: #fff; border: 1px solid #d0d7de; border-radius: 8px; box-shadow: 0 8px 24px rgba(27,31,35,0.12); }
.nyk-menu-account[hidden] { display: none; }
.nyk-menu-account a { display: block; padding: 6px 14px; text-decoration: none; font-size: 12.8px; line-height: 1.7;
  font-weight: 400; color: var(--docs-text-muted, #57606a); }
.nyk-menu-account a:hover { background: #f6f8fa; color: var(--docs-text, #1c1e21); }

/* Auth visibility (single-state invariant) */
html.nyk-authed .nyk-hd [data-auth="anon"] { display: none !important; }
html:not(.nyk-authed) .nyk-hd [data-auth="user"] { display: none !important; }

/* Mobile: slide-down dark panel (mirrors navbar-redesign.scss) */
.nyk-hd-burger { display: none; margin-left: auto; width: 38px; height: 38px; border: 1px solid #e1e4e8;
  border-radius: 8px; background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.nyk-hd-burger svg { width: 20px; height: 20px; stroke: #1c1e21; }
@media (max-width: 991px) {
  .nyk-hd-nav, .nyk-hd-right { display: none; }
  .nyk-hd-burger { display: inline-flex; }
  .nyk-hd.nyk-hd-mobile-open .nyk-hd-nav {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0; background: #0a1423;
    padding: 8px 0 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); z-index: 9999; }
  .nyk-hd.nyk-hd-mobile-open .nyk-hd-link { color: rgba(255,255,255,0.88); padding: 13px 24px; border-radius: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nyk-hd.nyk-hd-mobile-open .nyk-hd-link:hover { color: #fff; background: rgba(255,255,255,0.05); }
  .nyk-hd.nyk-hd-mobile-open .nyk-hd-menu { position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none; margin: 0; padding: 0 0 0 12px; min-width: 0; }
  .nyk-hd.nyk-hd-mobile-open .nyk-hd-menu-title { color: rgba(255,255,255,0.82); }
  .nyk-hd.nyk-hd-mobile-open .nyk-hd-menu-sub { color: rgba(255,255,255,0.5); }
  .nyk-hd.nyk-hd-mobile-open .nyk-hd-chevron { display: none; }
}