/* FREE QR 360 — public announcement bar (homepage + guides).
   The bar is fixed above the fixed site headers; body.has-ab shifts everything down by --ab-h. */
:root { --ab-h: 40px; }
@media (max-width: 575.98px) { :root { --ab-h: 36px; } }

.ab {
  position: fixed; inset: 0 0 auto 0; z-index: 300;
  height: var(--ab-h); overflow: hidden; contain: paint;
  background: #EE4046; color: #fff;
  display: flex; align-items: center;
  font: 600 .8125rem/1 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .06em; white-space: nowrap;
}
.ab-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ab-track { display: flex; width: max-content; will-change: transform; animation: ab-scroll 70s linear infinite; }
.ab-set { display: flex; flex: 0 0 auto; margin: 0; padding: 0; list-style: none; }
.ab-item { display: flex; align-items: center; flex: 0 0 auto; }
.ab-item::after { /* subtle separator between repeats */
  content: ""; width: 5px; height: 5px; margin: 0 1.5rem; flex: 0 0 auto;
  background: rgba(255, 255, 255, .6); transform: rotate(45deg);
}
@keyframes ab-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

@media (hover: hover) { .ab:hover .ab-track { animation-play-state: paused; } }

/* Reduced motion: no movement; one centred, readable static message. */
@media (prefers-reduced-motion: reduce) {
  .ab { justify-content: center; padding: 0 1rem; }
  .ab-track { animation: none; width: 100%; }
  .ab-set { width: 100%; justify-content: center; }
  .ab-set:nth-child(2), .ab-item:not(:first-child), .ab-item::after { display: none; }
  .ab-item { flex: 0 1 auto; min-width: 0; }
  .ab-txt { white-space: normal; text-align: center; line-height: 1.2; }
}

/* Offset the page and the existing fixed/sticky public headers */
body.has-ab { padding-top: var(--ab-h); }
.has-ab .lph { top: var(--ab-h); }                       /* homepage header */
.has-ab .mn { top: calc(60px + var(--ab-h)); }           /* homepage mobile menu */
.has-ab nav.top { inset-block-start: var(--ab-h); }      /* guides header */
html:has(body.has-ab) { scroll-padding-top: calc(84px + var(--ab-h)); }
.has-ab .gpreview-col { top: calc(84px + var(--ab-h)); }
.has-ab .feat-copy, .has-ab .faq-grid .h2 { top: calc(110px + var(--ab-h)); }
.has-ab article { scroll-margin-top: calc(90px + var(--ab-h)); }

@media print { .ab { display: none !important; } body.has-ab { padding-top: 0; } }