/* =============================================================================
   PROMOTIONAL BAR
   Slim announcement strip above the site header.
   Teal background, white text — immediately visible, not intrusive.
   ============================================================================= */

.hx-promo-bar {
  background-color: var(--hx-teal);
  color: var(--hx-white);
  font-family: var(--hx-font-body);
  font-size: var(--hx-size-sm);
  font-weight: var(--hx-weight-medium);
  line-height: 1;
  position: relative;
  z-index: 100;
}

.hx-promo-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding-top: var(--hx-space-2);
  padding-bottom: var(--hx-space-2);
  text-align: center;
}

.hx-promo-bar__message {
  margin: 0;
  color: var(--hx-white);
  font-size: var(--hx-size-sm);
  letter-spacing: 0.01em;
}

/* Ticker — hidden messages for JS rotation */
.hx-promo-bar__ticker {
  position: relative;
  width: 100%;
}

.hx-promo-bar__message--hidden {
  display: none;
}

/* Simple CSS-only animation (no JS needed for single message) */
@media ( prefers-reduced-motion: no-preference ) {
  .hx-promo-bar__message--active {
    animation: hx-fade-in 0.4s ease;
  }
}

@keyframes hx-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media ( max-width: 480px ) {
  .hx-promo-bar__message {
    font-size: var(--hx-size-xs);
  }
}