/* announcement banner, redesigned: gold bar with a soft star pattern, a sheen that crosses once,
   the message, an optional end date and a Details button */
.announce {
  color: #072a22; font-size: .95rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23072a22' stroke-opacity='.035' stroke-width='1.2'%3E%3Cpath d='M44 6l11 27 27 11-27 11-11 27-11-27L6 44l27-11z'/%3E%3Ccircle cx='44' cy='44' r='9'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(100deg, #e9b462 0%, #f3cd8c 45%, #f0c27b 70%, #d9a252 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -1px 0 rgba(7,42,34,.18) inset, 0 8px 24px -14px rgba(7,42,34,.55);
  overflow: hidden;
}
.announce::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); opacity: 0; }
.announce.is-in::after { animation: announce-sheen 1.6s cubic-bezier(.3,.6,.2,1) .55s 1 both; }
@keyframes announce-sheen { 0% { left: -40%; opacity: 1; } 100% { left: 120%; opacity: 1; } }
.announce .container-xl { position: relative; z-index: 1; gap: .85rem; min-height: 52px; padding-top: .55rem; padding-bottom: .55rem; }
.announce-dot { display: none; }
.announce-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #072a22; color: #f0c27b;
  box-shadow: 0 0 0 4px rgba(7,42,34,.12); }
.announce-text { flex: 1; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; font-weight: 500; }
.announce-msg { font-weight: 700; letter-spacing: -.005em; }
.announce-until { font-size: .82rem; font-weight: 600; color: rgba(7,42,34,.7); white-space: nowrap; }
.announce-until::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-right: .55rem; vertical-align: middle; opacity: .6; }
.announce-link { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem .45rem 1rem; border-radius: 999px;
  background: #072a22; color: #f0c27b; font-weight: 700; font-size: .85rem; text-decoration: none; white-space: nowrap; transition: background .2s, transform .2s; }
.announce-link:hover, .announce-link:focus-visible { background: #0e3a2f; color: #f6dca8; }
.announce-link svg { transition: transform .2s; }
@media (hover: hover) { .announce-link:hover svg { transform: translateX(3px); } }
.announce-link:active { transform: scale(.97); }
.announce-close { width: 32px; height: 32px; background: transparent; color: #072a22; border: 1px solid rgba(7,42,34,.25); }
.announce-close:hover { background: rgba(7,42,34,.1); }
.announce-link:focus-visible, .announce-close:focus-visible { outline: 2px solid #072a22; outline-offset: 2px; }
@media (max-width: 575.98px) {
  .announce { font-size: .9rem; }
  .announce .container-xl { align-items: flex-start; gap: .65rem; padding-top: .7rem; padding-bottom: .7rem; }
  .announce-icon { width: 28px; height: 28px; margin-top: .05rem; }
  .announce-icon svg { width: 14px; height: 14px; }
  .announce-text { padding-top: .2rem; flex-direction: column; gap: .2rem; }
  .announce-until::before { display: none; }
  .announce-link { position: relative; top: .05rem; padding: .4rem .75rem; font-size: .8rem; }
  .announce-close { width: 28px; height: 28px; }
}
@media (max-width: 380px) { .announce-link { display: none; } .announce-text .announce-msg { text-decoration: none; } }
@media (prefers-reduced-motion: reduce) { .announce.is-in::after { animation: none; } }
