/* The Hearald menu bar, shared by forgehouse.app/hearald, the guides and the
 * bloggers page. Self-contained: its own colours, so it looks the same
 * whatever page it sits on. */
:root {
  --hbar-bg: #f6f5fb; --hbar-ink: #2b2a4c; --hbar-muted: #6b7280;
  --hbar-line: rgba(43, 42, 76, 0.10); --hbar-accent: #6d3ff2; --hbar-mark: #6d3ff2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hbar-bg: #0e0f18; --hbar-ink: #e8e7f2; --hbar-muted: #9b99b4;
    --hbar-line: rgba(160, 158, 190, 0.16); --hbar-accent: #b39dff; --hbar-mark: #a78bfa;
  }
}
.hbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--hbar-bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--hbar-line);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: left;
}
.hbar * { box-sizing: border-box; }
.hbar-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 20px; }
.hbar-brand { flex: none; display: inline-flex; align-items: center; gap: 9px; color: var(--hbar-ink); text-decoration: none; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.hbar-mark {
  display: inline-block; width: 28px; height: 28px; background: var(--hbar-mark);
  -webkit-mask: url(/hearald/guides/mark.svg) center / contain no-repeat; mask: url(/hearald/guides/mark.svg) center / contain no-repeat;
}
.hbar-nav { flex: 1; display: flex; gap: 2px; min-width: 0; }
.hbar-nav a { flex: none; color: var(--hbar-muted); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1; padding: 9px 11px; border-radius: 9px; }
.hbar-nav a:hover { color: var(--hbar-ink); background: rgba(124, 92, 255, .08); }
.hbar-nav a[aria-current] { color: var(--hbar-accent); background: rgba(124, 92, 255, .12); }
.hbar-cta {
  flex: none; display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, #7c5cff, #6d3ff2); border-radius: 10px; padding: 9px 14px;
  box-shadow: 0 5px 14px rgba(109, 63, 242, .24); transition: filter .15s ease;
}
.hbar-cta:hover { filter: brightness(1.07); }
/* Phones: the links get their own row under the logo, always visible. */
@media (max-width: 720px) {
  .hbar-in { flex-wrap: wrap; height: auto; padding: 10px 16px 0; gap: 8px 12px; }
  .hbar-brand { flex: 1; }
  .hbar-nav { order: 3; flex-basis: 100%; margin: 0 -8px; padding: 0 0 6px; overflow-x: auto; scrollbar-width: none; }
  .hbar-nav::-webkit-scrollbar { display: none; }
  .hbar-nav a { font-size: 13.5px; padding: 8px 10px; }
  .hbar-free { display: none; }
}