/* ================================================================
   4SYZ Announcement Bar — announcement-bar.css
   Loaded on every front-end page.
   Colours are injected inline via foursyz_announcement_inline_css().
   ================================================================ */

:root { --ann-height: 0px; }

/* ── Bar shell — sticky (position:fixed, top:0) ─────────────────── */
#foursyz-ann {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;         /* above nav (z-index:1000) and everything else */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .3s ease, opacity .3s ease, height .3s ease;
  /* min-height is set inline via PHP based on chosen size */
}

/* ── Inner container ────────────────────────────────────────────── */
.ann-inner {
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: 6px 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* ── Alignment variants ─────────────────────────────────────────── */
.ann-align-left .ann-inner   { justify-content: flex-start; }
.ann-align-center .ann-inner { justify-content: center; }

.ann-align-split .ann-inner {
  justify-content: space-between;
}
.ann-left  { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.ann-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ── Icon / Emoji ───────────────────────────────────────────────── */
.ann-icon {
  font-size: 1.15em;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  /* colour set inline via .ann-accent */
}

/* ── Text ───────────────────────────────────────────────────────── */
.ann-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* font-size & color set inline via PHP */
}

/* ── CTA pill ───────────────────────────────────────────────────── */
.ann-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .88em;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 9999px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter .2s, transform .15s;
  /* bg & color set inline */
}
.ann-cta:hover { transform: translateY(-1px); }
.ann-cta:active { transform: translateY(0); }

/* ── Dismiss button ─────────────────────────────────────────────── */
.ann-close {
  background: none;
  border: none;
  color: inherit;
  opacity: .5;
  font-size: 1.3em;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 8px;
  transition: opacity .2s, transform .2s;
  flex-shrink: 0;
  font-family: system-ui, sans-serif;
}
.ann-close:hover  { opacity: 1; transform: scale(1.1); }
.ann-close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Scrolling ticker (mobile marquee mode) ─────────────────────── */
.ann-ticker-wrap {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.ann-ticker {
  display: flex;
  gap: 80px;
  width: max-content;
  animation: annTicker 22s linear infinite;
}
.ann-ticker span {
  white-space: nowrap;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: inherit;
}
@keyframes annTicker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
#foursyz-ann:hover .ann-ticker { animation-play-state: paused; }

/* ── Nav offset — sits immediately below the sticky announcement bar ── */
/* --ann-height is set by JS to the bar's offsetHeight in px          */
#mainNav {
  top: var(--ann-height, 0px);
  transition: top .3s ease;
}

/* ── Body padding so page content isn't hidden behind bar + nav ───── */
/* JS sets --total-offset = ann-height + nav-height on DOMContentLoaded */
body {
  padding-top: var(--total-offset, 64px);
}

/* ── Preset style: lime ─────────────────────────────────────────── */
#foursyz-ann.ann-style-lime {
  background: #9fe870;
  color: #0d253f;
}
#foursyz-ann.ann-style-lime .ann-cta {
  background: #0d253f;
  color: #9fe870;
}
#foursyz-ann.ann-style-lime .ann-accent { color: #054d28; }

/* ── Preset: gradient ───────────────────────────────────────────── */
#foursyz-ann.ann-style-gradient {
  background: linear-gradient(90deg, #0d253f 0%, #0EA5A4 100%);
}

/* ── Accessibility: prefer-reduced-motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ann-ticker { animation: none; }
  .ann-cta    { transition: none; }
  .ann-close  { transition: none; }
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ann-inner        { padding: 6px 40px 6px 14px; gap: 8px; }
  .ann-text         { font-size: .8em !important; white-space: normal; }
  .ann-scrolling .ann-text { white-space: nowrap; }
  .ann-cta          { font-size: .78em; padding: 3px 11px; }
  .ann-align-split .ann-inner { flex-wrap: wrap; gap: 6px; }
  .ann-align-split .ann-right { width: 100%; justify-content: flex-end; }
}

@media (max-width: 480px) {
  .ann-cta        { display: none; }   /* hide CTA on very small screens to save space */
  .ann-scrolling .ann-text { display: none; } /* ticker handles the text */
}