/* Announcement bar above the header (template/blocks/announcement/default.twig).
   Colours come from .et-scheme-<code> on the bar (compiled by the preset model); tokens only. */
.et-announcement {
  background: var(--et-bg);
  color: var(--et-text);
  font-size: var(--et-text-sm);
  line-height: var(--et-body-leading, 1.4);
}
.et-announcement[hidden] { display: none; }
.et-announcement__inner {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  max-width: var(--et-container);
  margin: 0 auto;
  padding: var(--space-xs) var(--et-gutter);
}
.et-announcement__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.et-announcement__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
}
.et-announcement__item { margin: 0; text-align: center; }
.et-announcement__item[hidden] { display: none; }
.et-announcement__link { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.et-announcement__link:hover { color: var(--et-accent-text); }

/* static: several messages in a row, separated by a dot */
.et-announcement--static .et-announcement__item + .et-announcement__item::before {
  content: "\00B7";
  margin-inline-end: var(--space-md);
  color: var(--et-text-muted);
}

/* buttons: prev / next (rotate), close */
.et-announcement__nav,
.et-announcement__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--et-radius-xs);
  background: transparent;
  color: inherit;
  font-size: var(--et-text-xs);
  cursor: pointer;
}
.et-announcement__nav:hover,
.et-announcement__close:hover { background: var(--et-surface); }
.et-announcement__nav:focus-visible,
.et-announcement__close:focus-visible,
.et-announcement__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* marquee: two copies of the messages scroll as one band (CSS only); reduced motion → static row */
.et-announcement--marquee .et-announcement__track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  column-gap: 0;
  width: max-content;
}
.et-announcement--marquee .et-announcement__item { white-space: nowrap; padding-inline-end: calc(var(--space-md) * 3); }
@media (prefers-reduced-motion: no-preference) {
  .et-announcement--marquee .et-announcement__track { animation: et-announcement-marquee 30s linear infinite; }
  .et-announcement--marquee:hover .et-announcement__track,
  .et-announcement--marquee:focus-within .et-announcement__track { animation-play-state: paused; }
}
@keyframes et-announcement-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .et-announcement--marquee .et-announcement__track { flex-wrap: wrap; justify-content: center; width: auto; column-gap: var(--space-md); }
  .et-announcement--marquee .et-announcement__item { white-space: normal; padding-inline-end: 0; }
  .et-announcement--marquee .et-announcement__item[aria-hidden="true"] { display: none; }
  /* static row: dot between messages, as in static mode (same for the simple view below) */
  .et-announcement--marquee .et-announcement__item:not([aria-hidden]) + .et-announcement__item:not([aria-hidden])::before { content: "\00B7"; margin-inline-end: var(--space-md); color: var(--et-text-muted); }
}
:root[data-ease="on"] .et-announcement--marquee .et-announcement__item:not([aria-hidden]) + .et-announcement__item:not([aria-hidden])::before { content: "\00B7"; margin-inline-end: var(--space-md); color: var(--et-text-muted); }