@layer components {
  /* Structure for the site-wide announcement bar above the header — a full-bleed row
     that centres its content with the dismiss control at the trailing edge. The neutral
     fill here is a sane default; a theme restyles the look (see sites/zohar). */
  .promo-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding-block: var(--block-space-half);
    padding-inline: var(--block-space);
    text-align: center;
    font-size: var(--text-small);
    background: var(--color-brand-soft);
    color: var(--color-text);
  }

  .promo-banner__inner {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--inline-space) var(--block-space);
  }

  .promo-banner__message { margin: 0; }

  /* The CTA reads as an actionable pill with a nudging arrow; colour rides currentColor so
     a theme's fill carries it. */
  .promo-banner__cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding-block: 0.2em;
    padding-inline: 0.85em;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  }
  .promo-banner__cta::after { content: "→"; transition: transform var(--transition); }
  .promo-banner__cta:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
  .promo-banner__cta:hover::after { transform: translateX(0.2em); }
  [dir="rtl"] .promo-banner__cta::after { content: "←"; }
  [dir="rtl"] .promo-banner__cta:hover::after { transform: translateX(-0.2em); }

  .promo-banner__dismiss {
    flex: none;
    display: inline-flex;
    padding: 0.25em;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition), background var(--transition);
  }
  .promo-banner__dismiss:hover {
    opacity: 1;
    background: color-mix(in oklab, currentColor 15%, transparent);
  }
  .promo-banner__dismiss svg { inline-size: 1.05rem; block-size: 1.05rem; }

  /* A "bold" banner sits as a strip *below* the header instead of above it — pure CSS: make
     the body a flex column (only when such a banner is present) and pull the header ahead of
     the banner, which stays first in the DOM. A theme without .site-header just no-ops. */
  body:has(.promo-banner--bold) { display: flex; flex-direction: column; min-block-size: 100dvh; }
  body:has(.promo-banner--bold) .site-header { order: -1; }

  /* Slide the bar in from the top edge on first paint. */
  @media (prefers-reduced-motion: no-preference) {
    .promo-banner { animation: promo-banner-in 0.5s ease both; }
    @keyframes promo-banner-in {
      from { opacity: 0; transform: translateY(-100%); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}