.site-announcement {
  --announcement-color: #075680;
  --announcement-background: #edf6fc;
  clear: both;
  box-sizing: border-box;
  margin: 12px 0 22px;
  padding: 16px 20px;
  border: 1px solid #cbdce5;
  border-left: 5px solid var(--announcement-color);
  border-radius: 4px;
  background: var(--announcement-background);
  color: #172e3d;
  font: 14px/1.55 Arial, sans-serif;
  text-align: left;
  overflow-wrap: anywhere;
}
.site-announcement--warning { --announcement-color: #805000; --announcement-background: #fff6df; border-color: #e2cfa0; border-left-color: var(--announcement-color); }
.site-announcement--error { --announcement-color: #a12525; --announcement-background: #fff0ef; border-color: #e6bcba; border-left-color: var(--announcement-color); }
.site-announcement__header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; }
.site-announcement .site-announcement__level { background: var(--announcement-color); color: #fff; padding: 2px 8px; border-radius: 3px; font: bold 12px/1.5 Arial, sans-serif; }
.site-announcement .site-announcement__title { margin: 0; padding: 0; background: transparent; color: var(--announcement-color); font: bold 17px/1.4 Arial, sans-serif; }
.site-announcement__message { white-space: pre-line; }
.site-announcement a.site-announcement__link,
.site-announcement a.site-announcement__link:link,
.site-announcement a.site-announcement__link:visited { display: inline-block; margin-top: 9px; color: var(--announcement-color); font-weight: bold; text-decoration: underline; }
.site-announcement a.site-announcement__link[hidden] { display: none; }
.site-announcement a.site-announcement__link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.field-preview .readonly { flex: 1; min-width: 0; max-width: 850px; }
@media (max-width: 680px) {
  .site-announcement { padding: 12px 14px; }
}