/* Site-wide webinar bar, added at build time by tools/webinar-banner.mjs. It sits
   before the header, so the sticky header still sticks once the bar scrolls away.
   Tokens come from brand-system.css, which every page already loads. */
.webinar-banner { position: relative; background: var(--sand-light); border-bottom: 1px solid var(--orange-line); }
.webinar-banner-shell { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 52px; }
.webinar-banner-link { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 16px; color: var(--pine-dark); font: 400 14px/1.4 var(--body); text-decoration: none; }
/* Stretches the link over the whole bar. The close button sits above it. */
.webinar-banner-link::after { content: ""; position: absolute; inset: 0; }
.webinar-banner-link strong { font: 700 14px/1.4 var(--heading); letter-spacing: -.01em; }
.webinar-banner-action { color: var(--orange-dark); font: 700 12px/1.4 var(--heading); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.webinar-banner:hover .webinar-banner-action { text-decoration: underline; text-underline-offset: 3px; }
.webinar-banner-close { position: absolute; top: 50%; right: 8px; z-index: 1; width: 36px; height: 36px; display: grid; place-content: center; padding: 0; transform: translateY(-50%); border: 0; border-radius: 8px; background: transparent; color: var(--pine-dark); font: 400 22px/1 var(--body); cursor: pointer; }
.webinar-banner-close[hidden] { display: none; }
.webinar-banner-close:hover { background: var(--orange-line); }

@media (max-width: 620px) {
  .webinar-banner-shell { justify-content: flex-start; padding: 8px 48px 8px 16px; }
  .webinar-banner-link { justify-content: flex-start; gap: 0 12px; font-size: 12px; }
  .webinar-banner-link strong { flex-basis: 100%; font-size: 13px; }
  .webinar-banner-action { font-size: 11px; letter-spacing: .06em; }
  .webinar-banner-close { right: 6px; }
}