.site-announcement-nav-link {
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-announcement-nav-link:focus-visible {
  border-radius: 0.25rem;
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.site-announcement-dialog {
  width: min(38rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  box-sizing: border-box;
  border: 0;
  border-radius: 0.8rem;
  padding: 0;
  overflow: auto;
  background: var(--eggshell);
  color: var(--brown);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.site-announcement-dialog::backdrop {
  background: rgba(15, 23, 42, 0.72);
}

.site-announcement-dialog__content {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 4vw, 2rem);
}

.site-announcement-dialog h2,
.site-announcement-dialog__message {
  margin: 0;
  overflow-wrap: anywhere;
}

.site-announcement-dialog__message {
  white-space: pre-wrap;
}

.site-announcement-dialog__cta,
.site-announcement-dialog__close {
  min-height: 2.75rem;
  box-sizing: border-box;
  border-radius: 0.45rem;
  padding: 0.65rem 1rem;
  font: inherit;
  font-weight: 700;
}

.site-announcement-dialog a.site-announcement-dialog__cta,
.site-announcement-dialog a.site-announcement-dialog__cta:visited {
  justify-self: start;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
}

.site-announcement-dialog a.site-announcement-dialog__cta:hover,
.site-announcement-dialog a.site-announcement-dialog__cta:focus-visible,
.site-announcement-dialog a.site-announcement-dialog__cta:active {
  background: var(--darker-orange);
  color: #fff;
}

.site-announcement-dialog__close {
  justify-self: end;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.site-announcement-dialog__cta:focus-visible,
.site-announcement-dialog__close:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

[data-theme="dark"] .site-announcement-dialog {
  background: #17212b;
  color: #f8fafc;
}

@media (max-width: 768px) {
  .site-announcement-nav-link {
    width: 100%;
    max-width: 100%;
    min-height: 2.75rem;
    box-sizing: border-box;
  }
}