/* ==========================================================================
   C7 — announcement strip (change request §10, extended September 2026)
   --------------------------------------------------------------------------
   Above everything, in the normal flow, so it can never sit over the sticky
   header, the logo or the menu. Any number of announcements, each in its own
   colours, shown one after another or run together as a ticker.

   announcement.js drives the movement with the Web Animations API. Without
   it — or for a visitor who asks for reduced motion — the first announcement
   stands still, fully readable.

   The admin panel's live preview loads this same file.
   ========================================================================== */

.c7-announce {
  --c7-announce-bg: #eef2f6;
  --c7-announce-fg: #132b48;
  --c7-announce-accent: #1f7a6d;
  position: relative;
  background: var(--c7-announce-bg);
  color: var(--c7-announce-fg);
  font-size: var(--c7-text-sm, 0.875rem);
  line-height: 1.35;
  border-block-end: 1px solid rgb(0 0 0 / 0.06);
  transition: background-color 0.6s var(--c7-ease, ease), color 0.6s var(--c7-ease, ease);
}

.c7-announce[hidden] {
  display: none;
}

.c7-announce__inner {
  display: flex;
  align-items: center;
  gap: var(--c7-space-2, 0.5rem);
  min-height: 2.5rem;
}

.c7-announce__viewport {
  position: relative;
  display: grid;
  flex: 1;
  align-items: center;
  min-width: 0;
  min-height: 2.5rem;
  overflow: hidden;
  text-align: center;
}

/* Every announcement occupies the same grid cell, so the one leaving and the
   one arriving overlap during a change instead of pushing each other. */
.c7-announce__item {
  grid-area: 1 / 1;
  min-width: 0;
  padding-block: 0.55rem;
}

.c7-announce__item[hidden] {
  display: none;
}

.c7-announce__track {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  color: inherit;
  text-decoration: none;
}

a.c7-announce__track:hover .c7-announce__link,
a.c7-announce__track:focus-visible .c7-announce__link {
  text-decoration: underline;
}

.c7-announce__main {
  color: var(--c7-announce-fg);
  font-weight: var(--c7-weight-bold, 700);
}

.c7-announce__accent {
  color: var(--c7-announce-accent);
  font-weight: var(--c7-weight-regular, 400);
}

.c7-announce__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: 0.5rem;
  padding: 0.1rem 0.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: var(--c7-weight-semibold, 600);
  letter-spacing: 0.02em;
  vertical-align: 0.05em;
}

/* A scrolling announcement runs on one line, from outside one edge to
   outside the other; the edges fade so the text never cuts off hard. */
.c7-announce__item[data-animation="marquee"] {
  text-align: start;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.c7-announce__item[data-animation="marquee"] .c7-announce__track {
  max-width: none;
  white-space: nowrap;
  will-change: transform;
}

/* Buttons on the right: pause (several announcements) and close. */
.c7-announce__pause,
.c7-announce__close {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.c7-announce__pause:hover,
.c7-announce__pause:focus-visible,
.c7-announce__close:hover,
.c7-announce__close:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.c7-announce__pause svg,
.c7-announce__close svg {
  width: 0.95rem;
  height: 0.95rem;
}

.c7-announce__play-icon,
.c7-announce__pause[aria-pressed="true"] .c7-announce__pause-icon {
  display: none;
}

.c7-announce__pause[aria-pressed="true"] .c7-announce__play-icon {
  display: block;
}

/* --- Ticker: every announcement in one continuous line ------------------ */
/* Edge to edge: coloured bands that stopped at the content column looked
   cut off, with the first band's colour showing either side. */
.c7-announce--ticker .c7-announce__inner {
  max-width: none;
  padding-inline: 0 var(--c7-space-3, 0.75rem);
  gap: var(--c7-space-2, 0.5rem);
}

.c7-announce--ticker .c7-announce__viewport {
  mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
}

.c7-announce__ticker {
  overflow: hidden;
}

.c7-announce__ticker-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* Each announcement is its own coloured band in the line. */
.c7-announce__ticker .c7-announce__track {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.75rem;
  background: var(--c7-announce-bg);
  color: var(--c7-announce-fg);
  white-space: nowrap;
}

.c7-announce__ticker .c7-announce__track::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin-inline-end: 0.5rem;
  border-radius: 50%;
  background: var(--c7-announce-accent);
}

.c7-announce__ticker:hover .c7-announce__ticker-track,
.c7-announce__ticker:focus-within .c7-announce__ticker-track {
  animation-play-state: paused;
}

@keyframes c7-announce-ticker-left {
  to { transform: translateX(-50%); }
}

@keyframes c7-announce-ticker-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* --- Phones -------------------------------------------------------------- */
@media (max-width: 40rem) {
  .c7-announce {
    font-size: 0.8125rem;
  }

  .c7-announce__inner {
    padding-inline-end: 0.25rem;
  }

  /* No room for the pause button beside the close on a phone; the strip
     pauses while touched instead. */
  .c7-announce__pause {
    display: none;
  }
}

/* --- Reduced motion: still, readable, and on as many lines as it needs --- */
@media (prefers-reduced-motion: reduce) {
  .c7-announce,
  .c7-announce__track {
    transition: none;
  }

  .c7-announce__item[data-animation="marquee"] {
    text-align: center;
    mask-image: none;
  }

  .c7-announce__item[data-animation="marquee"] .c7-announce__track {
    white-space: normal;
  }

  .c7-announce__ticker-track {
    animation: none !important;
    flex-wrap: wrap;
    width: auto;
  }
}