/* ═══════════════════════════════════════════════════════════════════════════
   RuralBytesTamil — Site-wide Announcement Bar  (shared styles)
   ───────────────────────────────────────────────────────────────────────────
   Paired with announcements.js. Self-contained: the "Workshop Journal" palette
   is hard-coded here (not via CSS vars) so the bar looks identical on every
   page regardless of that page's own token names.

   The bar is injected with the host page's existing 36px ticker class
   (e.g. .wj-ticker on index, .ticker on workshop) PLUS .rb-announce, so the
   page's existing navbar/content offset rules apply unchanged. We keep the bar
   EXACTLY 36px tall at all widths so those offsets always line up — no layout
   shift, and when no campaign is active nothing renders at all.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Workshop Journal palette (mirrors --wj-* / --* tokens on the host pages) */
.rb-announce {
    --rb-paper: #f3e9d2;
    --rb-ink: #0a0a0a;
    --rb-oxblood: #6b1515;
    --rb-ochre-soft: #d4a84a;
    --rb-mono: 'JetBrains Mono', 'Courier New', monospace;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    height: 36px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--rb-ink);
    color: var(--rb-paper);
    font-family: var(--rb-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rb-ink);
    /* Defensively neutralise any inherited ticker layout (e.g. marquee). */
    animation: none;
    white-space: nowrap;
}

/* Badge — pulsing dot + deadline label */
.rb-announce-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: var(--rb-oxblood);
    color: var(--rb-paper);
    font-weight: 700;
    letter-spacing: 0.14em;
}
.rb-announce-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--rb-ochre-soft);
    box-shadow: 0 0 0 0 rgba(212, 168, 74, 0.6);
    animation: rb-announce-pulse 1.8s ease-out infinite;
}
@keyframes rb-announce-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 74, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(212, 168, 74, 0); }
}

/* Message — headline + optional subtext, centred, truncates before overflow */
.rb-announce-msg {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    overflow: hidden;
}
.rb-announce-headline {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rb-announce-sub {
    color: rgba(243, 233, 210, 0.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CTA — ochre underline link, keyboard focusable */
.rb-announce-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 6px;
    margin-right: 4px;
    padding: 5px 14px;
    border: 1px solid var(--rb-ochre-soft);
    border-radius: 4px;
    color: var(--rb-ink);
    background: var(--rb-ochre-soft);
    font-family: var(--rb-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.rb-announce-cta::after { content: '\2192'; }            /* → arrow */
.rb-announce-cta:hover {
    background: transparent;
    color: var(--rb-ochre-soft);
}
.rb-announce-cta:focus-visible {
    outline: 2px solid var(--rb-paper);
    outline-offset: 2px;
}

/* Close */
.rb-announce-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--rb-paper);
    font-family: var(--rb-mono);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s, background 0.2s;
}
.rb-announce-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }
.rb-announce-close:focus-visible {
    opacity: 1;
    outline: 2px solid var(--rb-ochre-soft);
    outline-offset: -2px;
}

/* ── Responsive: stay exactly 36px tall (offsets depend on it) ──
   On tablet, drop the supporting subtext. On phones, also drop the deadline
   badge text and tighten padding so headline + CTA never overflow. */
@media (max-width: 720px) {
    .rb-announce-sub { display: none; }
    .rb-announce-msg { justify-content: flex-start; gap: 0; padding: 0 12px; }
    .rb-announce-badge { padding: 0 12px; letter-spacing: 0.1em; }
}
@media (max-width: 480px) {
    .rb-announce { font-size: 10px; }
    .rb-announce-badge span:last-child { display: none; }   /* dot only */
    .rb-announce-badge { padding: 0 10px; }
    .rb-announce-cta { padding: 5px 10px; letter-spacing: 0.04em; }
}

/* Honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .rb-announce-dot { animation: none; }
}