/* Promotion bar — structure and motion. Map the --promo-* variables to the design's tokens. */
/* promo-bar — the messages above the header (sections/promo-bar, public/theme/js/promo-bar.js).
   One block per message; the section picks the motion and the tone. The bar is always one line
   tall, so switching messages never moves the page. */
.promo-bar {
  --promo-bg: var(--promo-tone-primary, #24402f);
  --promo-fg: var(--promo-tone-on-dark, #f6f2e9);
  --promo-h: 38px;
  display: block;
  position: relative;
  z-index: calc(var(--promo-z-header, 60) + 1);
  height: var(--promo-h);
  overflow: hidden;
  background: var(--promo-bg);
  color: var(--promo-fg);
  font-family: var(--promo-font, inherit);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.promo-bar--dark      { --promo-bg: var(--promo-tone-dark, #1c2118);      --promo-fg: var(--promo-tone-on-dark, #f6f2e9); }
.promo-bar--accent { --promo-bg: var(--promo-tone-accent, #e8a33d); --promo-fg: var(--promo-tone-dark, #1c2118); }
.promo-bar--soft     { --promo-bg: var(--promo-tone-soft, #f6e7c8);     --promo-fg: var(--promo-tone-on-soft, #8a5a16); }
.promo-bar--muted     { --promo-bg: var(--promo-tone-muted, #efeae0);     --promo-fg: var(--promo-tone-dark, #1c2118); }
.promo-bar--text-sentence { font-size: 13px; letter-spacing: .01em; text-transform: none; font-weight: 500; }

.promo-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
a.promo-bar__item:hover .promo-bar__text,
a.promo-bar__item:focus-visible .promo-bar__text { text-decoration: underline; text-underline-offset: 3px; }
.promo-bar__icon { display: inline-flex; }
.promo-bar__icon svg { display: block; }
.promo-bar__cta { text-decoration: underline; text-underline-offset: 3px; opacity: .85; }

/* One at a time: static, slide, fade, vertical */
.promo-bar__viewport { position: relative; display: flex; align-items: center; height: 100%; padding-inline: var(--promo-gutter, 24px); }
.promo-bar__slides { position: relative; flex: 1 1 auto; height: 100%; min-width: 0; }
.promo-bar__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  visibility: hidden;
}
.promo-bar__slide.is-active { visibility: visible; }
.promo-bar__slide .promo-bar__item { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.promo-bar__arrow {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 50%;
  opacity: .75;
  cursor: pointer;
}
.promo-bar__arrow:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }

.promo-bar--fade .promo-bar__slide { opacity: 0; transition: opacity .6s ease, visibility 0s linear .6s; }
.promo-bar--fade .promo-bar__slide.is-active { opacity: 1; transition: opacity .6s ease .1s, visibility 0s; }

.promo-bar--slide .promo-bar__slide { transform: translateX(100%); transition: transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .6s; }
.promo-bar--slide .promo-bar__slide.is-leaving { transform: translateX(-100%); }
.promo-bar--slide .promo-bar__slide.is-active { transform: none; transition: transform .6s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
.promo-bar--slide.is-back .promo-bar__slide { transform: translateX(-100%); }
.promo-bar--slide.is-back .promo-bar__slide.is-leaving { transform: translateX(100%); }
.promo-bar--slide.is-back .promo-bar__slide.is-active { transform: none; }

.promo-bar--vertical .promo-bar__slide { transform: translateY(100%); opacity: 0; transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .5s ease, visibility 0s linear .5s; }
.promo-bar--vertical .promo-bar__slide.is-leaving { transform: translateY(-100%); }
.promo-bar--vertical .promo-bar__slide.is-active { transform: none; opacity: 1; transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .5s ease, visibility 0s; }
.promo-bar--vertical.is-back .promo-bar__slide { transform: translateY(-100%); }
.promo-bar--vertical.is-back .promo-bar__slide.is-leaving { transform: translateY(100%); }
.promo-bar--vertical.is-back .promo-bar__slide.is-active { transform: none; }

/* Continuous scroll: two identical groups, the track moves by one group's width. */
.promo-bar__marquee { height: 100%; display: flex; align-items: center; overflow: hidden; }
.promo-bar__track { display: flex; flex-shrink: 0; animation: promo-marquee var(--promo-duration, 30s) linear infinite; }
.promo-bar__group { display: flex; flex-shrink: 0; align-items: center; justify-content: space-around; gap: 28px; padding-right: 28px; min-width: 100vw; } /* at least a screen wide: short messages never leave a gap in the loop */
.promo-bar__sep { opacity: .6; }
.promo-bar--hover-pause:hover .promo-bar__track,
.promo-bar__marquee:focus-within .promo-bar__track { animation-play-state: paused; }
@keyframes promo-marquee { to { transform: translateX(-50%); } }

@media (max-width: 700px) {
  .promo-bar { --promo-h: 36px; font-size: 10px; letter-spacing: .14em; }
  .promo-bar--text-sentence { font-size: 12px; letter-spacing: 0; }
  .promo-bar__viewport { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-bar__slide { transition: none !important; }
  .promo-bar__track { animation: none; }
  .promo-bar__marquee { justify-content: center; }
  .promo-bar__group[aria-hidden="true"] { display: none; }
}