/* =========================================================
   Component — Announcement bar

   The usual version of this is a saturated gradient strip. Here it
   is the deepest surface in the system with a brass hairline under
   it: quieter than the page it sits above, which is what makes the
   one link in it readable as a link.
   ========================================================= */
.announce {
  position: relative;
  background: var(--color-canvas-deep);
  border-bottom: 1px solid var(--color-line-gold);
  font-size: var(--fs-xs);
}
.announce[hidden] { display: none; }

.announce__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  padding-block: var(--space-2);
}

.announce__pip {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-growth);
  box-shadow: 0 0 0 4px var(--color-growth-soft);
}

.announce__text {
  margin: 0;
  color: var(--color-text-secondary);
}

.announce__link {
  position: relative;
  flex: none;
  color: var(--color-gold-text);
  font-weight: var(--fw-bold);
  padding-inline-end: 1.1em;
}
.announce__link:hover { color: var(--color-gold); }

/* The arrow is drawn from two borders, not typed, so switching
   language flips a rotation instead of swapping a glyph. It always
   points along the reading direction: right in LTR, left in RTL. */
.announce__link::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.15em;
  top: 50%;
  width: 0.42em;
  height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  translate: 0 -50%;
  rotate: -45deg;
  transition: translate var(--dur-fast) var(--ease-out);
}
:root[dir="rtl"] .announce__link::after { rotate: 135deg; }
.announce__link:hover::after { translate: 0.2em -50%; }
:root[dir="rtl"] .announce__link:hover::after { translate: -0.2em -50%; }

.announce__close {
  margin-inline-start: auto;
  display: inline-flex;
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.announce__close:hover { color: var(--color-text); }
.announce__close svg { width: 14px; height: 14px; }

@media (max-width: 600px) {
  .announce__text { line-height: var(--lh-snug); }
  .announce__link { display: none; }
}

/* The dismiss target, not the glyph, is what a thumb has to hit. */
.announce__close {
  min-inline-size: 44px;
  min-block-size: 44px;
}