/* FABTRACK · Announcement bar. Colours and sizes come from the settings as CSS variables. */
.fabtrack-ann {
  --fa-bg: #0f172a; --fa-color: #fff; --fa-size: 14px; --fa-weight: 600; --fa-pad: 9px; --fa-sep: .5;
  position: relative; z-index: 9999; width: 100%; box-sizing: border-box; overflow: hidden;
  background: var(--fa-bg); color: var(--fa-color); font-size: var(--fa-size); font-weight: var(--fa-weight); line-height: 1.4;
}
.fabtrack-ann--sticky { position: sticky; top: 0; }
body.admin-bar .fabtrack-ann--sticky { top: 32px; }
@media (max-width: 782px) { body.admin-bar .fabtrack-ann--sticky { top: 46px; } }
html.fabtrack-ann-closed .fabtrack-ann { display: none; }

.fabtrack-ann__viewport { overflow: hidden; padding: var(--fa-pad) 0; }
.fabtrack-ann__track { display: flex; width: max-content; will-change: transform; }
.fabtrack-ann__half, .fabtrack-ann__group { display: flex; flex-shrink: 0; align-items: center; }
.fabtrack-ann__item { white-space: nowrap; padding: 0 1.2em; }
.fabtrack-ann__item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fabtrack-ann__item a:hover { text-decoration-thickness: 2px; }
.fabtrack-ann__sep { opacity: var(--fa-sep); }
.fabtrack-ann__close {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 28px; height: 28px;
  border: 0; border-radius: 50%; background: var(--fa-bg); color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .85;
  box-shadow: -10px 0 10px 4px var(--fa-bg);
}
.fabtrack-ann__close:hover { opacity: 1; }
.fabtrack-ann__close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

/* moving */
.fabtrack-ann.is-ready .fabtrack-ann__track { animation: fabtrack-ann-run var(--fa-dur, 30s) linear infinite; }
.fabtrack-ann.is-ready[data-dir="ltr"] .fabtrack-ann__track { animation-direction: reverse; }
.fabtrack-ann.is-ready[data-pause]:hover .fabtrack-ann__track { animation-play-state: paused; }
@keyframes fabtrack-ann-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* before the script runs, or when motion is reduced: a still, centred line */
.fabtrack-ann:not(.is-ready) .fabtrack-ann__track { width: 100%; justify-content: center; }
.fabtrack-ann:not(.is-ready) .fabtrack-ann__group { flex-wrap: wrap; justify-content: center; }
.fabtrack-ann:not(.is-ready) .fabtrack-ann__item { white-space: normal; text-align: center; }
.fabtrack-ann:not(.is-ready) .fabtrack-ann__sep { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fabtrack-ann.is-ready .fabtrack-ann__track { animation: none; width: 100%; justify-content: center; }
  .fabtrack-ann.is-ready .fabtrack-ann__half + .fabtrack-ann__half { display: none; }
}

/* devices */
@media (min-width: 769px) { .fabtrack-ann--mobile { display: none !important; } }
@media (max-width: 768px) { .fabtrack-ann--desktop { display: none !important; } }

/* preview inside the settings page */
.fabtrack-ann--preview { border-radius: 8px; position: relative; top: 0; }

/* placed with the shortcode: sits in the page, not stuck to the top */
.fabtrack-ann--inline { position: relative; border-radius: 6px; margin: 10px 0; }