/* ============================================================
   Site-wide announcement / promo bar (fragments/promo-bar.html)
   ------------------------------------------------------------
   Fixed at the very top of the viewport above every header
   (public .public-nav, student nav.nav-glass, course player
   .jm-hdr--player). promo-bar.js keeps --ann-bar-h equal to the
   bar's live height (ResizeObserver) and toggles body.has-ann-bar,
   which pushes those headers / sidebars / body content down.

   Look: a quiet tonal strip in the site theme (theme.css tokens,
   light + dark). Each variant only sets three custom properties;
   PROMO adds a warm brand gradient and one slow shimmer.
   ============================================================ */

.ann-bar {
    --ann-ink: var(--cyan);
    --ann-line: var(--cyan-border);
    --ann-mix: 9%;
    /* Text-size accents (links, countdown) are nudged toward --text so they clear WCAG AA on the tint */
    --ann-ink-text: color-mix(in srgb, var(--ann-ink) 80%, var(--text));
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    color: var(--text);
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--ann-ink) var(--ann-mix), var(--bg2)),
            color-mix(in srgb, var(--ann-ink) calc(var(--ann-mix) / 2), var(--bg2)) 50%,
            color-mix(in srgb, var(--ann-ink) var(--ann-mix), var(--bg2)));
    border-bottom: 1px solid var(--ann-line);
    font-size: .875rem;
    line-height: 1.45;
    transition: height .26s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}
.ann-info    { --ann-ink: var(--cyan);    --ann-line: var(--cyan-border); }
.ann-success { --ann-ink: var(--success); --ann-line: var(--success-border); }
.ann-warning { --ann-ink: var(--warn);    --ann-line: var(--warn-border); --ann-mix: 11%; }
.ann-promo   { --ann-ink: var(--accent-ink); --ann-line: var(--border2); }

/* PROMO: warm brand highlight — gold wash over the page surface (navy in dark), gold hairline */
.ann-bar.ann-promo {
    background:
        linear-gradient(100deg,
            color-mix(in srgb, var(--accent) 18%, var(--bg2)) 0%,
            color-mix(in srgb, var(--accent2) 7%, var(--bg2)) 55%,
            color-mix(in srgb, var(--accent) 14%, var(--bg2)) 100%);
}
.ann-bar.ann-promo::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--accent2) 22%, transparent), transparent);
    transform: translateX(-120%);
    animation: ann-shimmer 7s ease-in-out 1.2s infinite;
}
@keyframes ann-shimmer {
    0%, 70% { transform: translateX(-120%); }
    100%    { transform: translateX(360%); }
}

/* ---------- layout ---------- */
.ann-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    max-width: var(--maxw, 1140px);
    min-height: 44px;
    margin-inline: auto;
    padding-inline: 12px 2px;
}
.ann-main {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    padding-block: 6px;
}

.ann-icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--ann-ink);
    background: color-mix(in srgb, var(--ann-ink) 14%, transparent);
    box-shadow: inset 0 0 0 1px var(--ann-line);
}
.ann-icon svg { width: 15px; height: 15px; }

.ann-content {
    min-width: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}
.ann-content strong, .ann-content b { font-weight: 700; color: var(--text); }
.ann-content em { font-style: italic; }

/* Links become a compact pill CTA with a direction-aware arrow */
.ann-bar .ann-content a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline: 4px;
    padding: 1px 10px;
    vertical-align: 1px;
    border: 1px solid var(--ann-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg2) 70%, transparent);
    color: var(--ann-ink-text);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s, border-color .18s;
}
.ann-bar .ann-content a::after {
    content: "\2192";
    display: inline-block;
    transition: transform .18s;
}
/* :dir() follows the nearest dir attribute, so the dashboard preview can be RTL inside an LTR page and vice versa */
.ann-bar .ann-content a:dir(rtl)::after { transform: scaleX(-1); }
.ann-bar .ann-content a:hover { border-color: var(--ann-ink); background: var(--bg2); color: var(--ann-ink-text); }
.ann-bar .ann-content a:hover::after { transform: translateX(2px); }
.ann-bar .ann-content a:dir(rtl):hover::after { transform: scaleX(-1) translateX(2px); }
.ann-bar .ann-content a:empty { display: none; }
.ann-bar.ann-promo .ann-content a { border-color: transparent; background: var(--grad); color: var(--btn-text); }
.ann-bar.ann-promo .ann-content a:hover { color: var(--btn-text); filter: brightness(1.05); }

/* Countdown chip */
.ann-cd {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding-inline: 8px 10px;
    border: 1px solid var(--ann-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg2) 65%, transparent);
    color: var(--ann-ink-text);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ann-cd[hidden] { display: none; }
.ann-cd svg { width: 13px; height: 13px; flex: none; }
.ann-cd__time { display: inline-flex; gap: .3em; }
.ann-cd__minor:empty { display: none; }

/* Icon buttons: expand (phones) and close */
.ann-btn {
    display: inline-grid;
    flex: none;
    place-items: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color .18s, background .18s;
}
.ann-btn[hidden] { display: none; }
.ann-btn svg { width: 18px; height: 18px; }
.ann-btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
/* body-prefixed to outrank site.css's body.jm-site :focus-visible (light amber ring is too faint on the tint) */
body .ann-bar .ann-btn:focus-visible,
body .ann-bar .ann-content a:focus-visible {
    outline: 2px solid var(--accent-ink);
    outline-offset: -2px;
}
body .ann-bar .ann-btn:focus-visible { border-radius: 12px; }
body .ann-bar .ann-content a:focus-visible { outline-offset: 2px; border-radius: 999px; }
.ann-expand svg { transition: transform .2s; }
.ann-bar.is-expanded .ann-expand svg { transform: rotate(180deg); }

/* Phones: one line with an ellipsis until expanded */
@media (max-width: 767.98px) {
    .ann-inner { padding-inline-start: 10px; gap: 2px; }
    .ann-main { gap: 8px; }
    .ann-icon { width: 24px; height: 24px; }
    .ann-icon svg { width: 14px; height: 14px; }
    .ann-content { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
    .ann-bar.is-expanded .ann-inner { align-items: flex-start; }
    .ann-bar.is-expanded .ann-main { align-items: flex-start; flex-wrap: wrap; padding-block: 10px; }
    .ann-bar.is-expanded .ann-content { flex: 1 1 calc(100% - 32px); overflow: visible; white-space: normal; cursor: auto; }
    .ann-bar.is-expanded .ann-cd { margin-inline-start: 32px; }   /* under the text, past the icon */
    .ann-cd__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .ann-cd__minor { display: none; }
}
/* Desktop: centred content, close pinned to the end */
@media (min-width: 768px) {
    .ann-inner { min-height: 42px; padding-inline: 16px 4px; }
    .ann-main { justify-content: center; text-align: center; }
    .ann-bar[data-dismissible="true"] .ann-main { padding-inline-start: 40px; }   /* balances the close button */
    .ann-btn, body .ann-bar .ann-btn:focus-visible { width: 40px; height: 40px; border-radius: 10px; }
    .ann-expand { display: none; }
}

/* Dismiss: promo-bar.js animates height to 0 before removing the bar */
.ann-bar.is-leaving { opacity: 0; border-bottom-color: transparent; }

@media (prefers-reduced-motion: reduce) {
    .ann-bar, .ann-btn, .ann-expand svg, .ann-bar .ann-content a, .ann-bar .ann-content a::after { transition: none; }
    .ann-bar.ann-promo::before { animation: none; display: none; }
}
html.no-animations .ann-bar,
html.no-animations .ann-expand svg,
html.no-animations .ann-bar .ann-content a::after { transition: none; }
html.no-animations .ann-bar.ann-promo::before { animation: none; display: none; }

/* ---------- offsets for the fixed bar ----------
   !important overrides Tailwind utilities (top-0, top-16) baked into the existing markup. */
body.has-ann-bar { padding-top: var(--ann-bar-h, 44px); }
body.has-ann-bar .public-nav,
body.has-ann-bar nav.nav-glass,
body.has-ann-bar .jm-hdr--player {
    top: var(--ann-bar-h, 44px) !important;
}
body.has-ann-bar .sidebar {
    top: calc(4rem + var(--ann-bar-h, 44px)) !important;
    height: calc(100vh - 4rem - var(--ann-bar-h, 44px)) !important;
}
/* Community app shell fills the viewport under the 70px header */
body.has-ann-bar .comm-app-shell { height: calc(100dvh - 70px - var(--ann-bar-h, 0px)); }
@media (max-width: 767px) {
    body.has-ann-bar .comm-sidebar { padding-top: calc(70px + var(--ann-bar-h, 0px)); }
}

/* ---------- dashboard settings (templates/dashboard/settings/announcement.html) ---------- */
#ann-editor:empty:before,
.ann-editor:empty:before {
    content: attr(data-placeholder);
    color: var(--faint);
    pointer-events: none;
}
/* Links typed into the editors stay recognisable while editing */
.ann-editor a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
/* Per-language editors: invalid state (client check or server field error) */
.ann-editor[aria-invalid="true"],
#ann-variant[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px var(--danger-soft);
}
/* The live preview is in-flow: no fixed positioning, and it always shows the desktop layout */
#ann-preview.ann-bar { position: static; z-index: auto; }
#ann-preview .ann-content { overflow: visible; white-space: normal; cursor: auto; }
#ann-preview .ann-main { justify-content: center; text-align: center; }
/* The preview carries every variant icon; show the one matching its class */
#ann-preview .ann-icon > svg { display: none; }
#ann-preview.ann-info .ann-icon__info,
#ann-preview.ann-success .ann-icon__success,
#ann-preview.ann-warning .ann-icon__warning,
#ann-preview.ann-promo .ann-icon__promo { display: block; }