.announcement-bar-wrap { width: 100%; background-color: hsl(var(--white)); }
.announcement-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; padding: 0.75rem 0.75rem 0.75rem 1rem; }
.announcement-bar-emergency { background-color: hsl(354, 70%, 54%); /* Bootstrap Red */ color: hsl(var(--white)); }
.announcement-bar-special { background-color: hsla(45, 100%, 51%, 75%); /* Bootstrap Yellow */ color: hsl(var(--black)); }
.announcement-bar-special .announcement-bar-modal-btn,
.announcement-bar-special .announcement-bar-close-btn,
.announcement-bar-special .announcement-bar-modal-btn:hover,
.announcement-bar-special .announcement-bar-close-btn:hover { color: hsl(var(--black)); }
.announcement-bar-regular { background-color: hsl(var(--siteColor2)); color: hsl(var(--white)); }
.announcement-bar-content { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.announcement-bar-modal-btn { margin: 0; padding: 0.5rem 1rem; background-color: hsl(var(--white)); color: hsl(var(--bodyFontColor)); }
.announcement-bar-modal-btn:hover { color: hsl(var(--bodyFontColor)); box-shadow: 0 0 0 0.125rem hsla(var(--white), 0.25) !important; }
.announcement-bar-close-btn { opacity: 0.5; display: flex; padding: 0.25rem; color: hsl(var(--white)); }
.announcement-bar-close-btn:hover { opacity: 1; background-color: hsla(var(--white), 25%); color: hsl(var(--white)); box-shadow: 0 0 0 0.125rem hsla(var(--white), 0.25) !important; }
@media (min-width: 1025px) {
  .announcement-bar { justify-content: center; padding: 0.75rem; }
  .announcement-bar-content { margin: 0 2rem; align-items: center; justify-content: center; text-align: center; }
  .announcement-bar-close { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); }
}