/* ===========================================================================
   announcement.css — the site-wide announcement bar.

   Loaded by index.html, login.html, register.html and profile.html. Relies on
   the design tokens each of those pages already defines (index.html inline,
   the account pages via account.css), so it adds no palette of its own.
   =========================================================================== */

.bc-announce {
  /* Sits above the sticky site header, which is z-index 100 on index.html. */
  position: relative;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--edge);
  font-size: 14px;
  line-height: 1.45;
  background: var(--surface-2);
  color: var(--ink);
}

/* Collapsed to nothing until there is something to say, so the page does not
   jump as the fetch lands. */
.bc-announce[hidden] { display: none; }

.bc-announce-icon {
  flex: none;
  font-size: 16px;
  line-height: 1;
}

.bc-announce-body {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.bc-announce-body b { font-weight: 700; }

.bc-announce-link {
  flex: none;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: inherit;
  transition: background-color .15s ease;
}

.bc-announce-link:hover { background: rgba(127, 127, 127, .18); }

.bc-announce-close {
  flex: none;
  background: none;
  border: none;
  color: inherit;
  opacity: .65;
  font-size: 17px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
}

.bc-announce-close:hover { opacity: 1; background: rgba(127, 127, 127, .18); }

/* ---------- Levels ---------- */

.bc-announce.info {
  background: var(--bronze-wash);
  border-bottom-color: var(--bronze-line);
  color: var(--ink);
}

.bc-announce.warn {
  background: var(--gold-wash);
  border-bottom-color: var(--bronze-line);
  color: var(--ink);
}

/* The loud one. Given the full accent treatment rather than a tint, because an
   alert that reads like the other two is not an alert. */
.bc-announce.alert {
  background: var(--red);
  border-bottom-color: var(--red);
  color: #fff;
}

.bc-announce.alert .bc-announce-link:hover,
.bc-announce.alert .bc-announce-close:hover {
  background: rgba(255, 255, 255, .22);
}

/* --red is a deep red in light mode but a *light* red in dark mode, where
   white text on it lands around 2.8:1 — well under the 4.5:1 needed to read
   comfortably. Flip the alert bar to dark ink there instead (~6.5:1). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bc-announce.alert { color: #2A0D0D; }
  :root:not([data-theme="light"]) .bc-announce.alert .bc-announce-link:hover,
  :root:not([data-theme="light"]) .bc-announce.alert .bc-announce-close:hover {
    background: rgba(0, 0, 0, .16);
  }
}

:root[data-theme="dark"] .bc-announce.alert { color: #2A0D0D; }
:root[data-theme="dark"] .bc-announce.alert .bc-announce-link:hover,
:root[data-theme="dark"] .bc-announce.alert .bc-announce-close:hover {
  background: rgba(0, 0, 0, .16);
}

@media (max-width: 620px) {
  .bc-announce {
    padding: 9px 14px;
    gap: 9px;
    font-size: 13.5px;
    flex-wrap: wrap;
  }
  /* Keep the message and the close button on one line, drop the link below. */
  .bc-announce-body { flex: 1 1 60%; }
  .bc-announce-link { order: 3; flex: 1 1 100%; text-align: center; }
}