.hellobar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-hellobar);
  background: var(--c-surface);
  color: var(--c-text-1);
  border-bottom: 1px solid var(--border-color-base);
  font-size: var(--fs-200);
  line-height: var(--lh-normal);
  transition: opacity var(--dur-fast) var(--ease-out-expo),
              transform var(--dur-fast) var(--ease-out-expo);
}

/* Push body content down so the fixed bar doesn't overlay the hero.
   The variable is published from hellobar.js and falls back to 0px when
   no bar is mounted (so this declaration is a no-op in that case). */
body { padding-top: var(--hellobar-h, 0px); }

.hellobar[data-closing="true"] {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.hellobar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--container-pad);
}

.hellobar__icon { flex-shrink: 0; display: inline-flex; }
.hellobar__icon svg { stroke: currentColor; }

.hellobar__body {
  flex: 1;
  min-width: 0;
}
.hellobar__body p {
  margin: 0;
  max-width: none;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hellobar__body p + p { margin-top: 4px; }
.hellobar__body a {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.hellobar__body a:focus-visible {
  color: var(--c-focus);
}
@media (hover: hover) and (pointer: fine) { .hellobar__body a:hover {
  color: var(--c-focus);
} }
.hellobar__body strong { color: var(--c-text); font-weight: 500; }

.hellobar__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--c-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out-expo),
              background-color var(--dur-fast) var(--ease-out-expo);
}
.hellobar__close:focus-visible {
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
@media (hover: hover) and (pointer: fine) { .hellobar__close:hover {
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
} }
.hellobar__close:focus-visible {
  border-color: var(--c-focus);
}

/* Variants colour the icon + bottom border via two CSS vars; hellobar.js
   sets the same vars inline when frontmatter `colors:` is set, overriding
   the variant. */
.hellobar             { border-bottom-color: var(--hellobar-border); }
.hellobar .hellobar__icon { color: var(--hellobar-icon); }

.hellobar--info {
  --hellobar-icon: var(--c-accent);
  --hellobar-border: var(--pm-purple-700);
}
.hellobar--notice {
  --hellobar-icon: var(--c-focus);
  --hellobar-border: rgba(229, 255, 58, 0.4);
}
.hellobar--warning {
  --hellobar-icon: #ff8593;
  --hellobar-border: rgba(255, 70, 90, 0.4);
}

@media (max-width: 480px) {
  .hellobar { font-size: var(--fs-100); }
  .hellobar__inner { gap: var(--sp-2); padding: var(--sp-2) 0; }
  .hellobar__close { width: 24px; height: 24px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hellobar { transition: none; }
}

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