/* Site-wide notice bar, injected into the top of #nav by notice.js. */
.site-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.55rem 3rem;
  position: relative;
  background: #a53030;
  color: #fff;
  text-align: center;
}
.site-notice-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.site-notice-text strong { font-weight: 600; }
.site-notice-close {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.site-notice-close svg { width: 16px; height: 16px; }
.site-notice-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
.site-notice-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The nav is fixed, so push the page down by the bar's height. */
html.has-notice body { padding-top: var(--notice-h, 0px); }
html.has-notice .menu-jump { top: calc(80px + var(--notice-h, 0px)); }
html.has-notice [id] { scroll-margin-top: calc(90px + var(--notice-h, 0px)); }
html.has-notice .menu-sec { scroll-margin-top: calc(140px + var(--notice-h, 0px)); }

@media (max-width: 600px) {
  .site-notice { padding: 0.5rem 2.75rem 0.5rem 1rem; justify-content: flex-start; text-align: left; }
  .site-notice-text { font-size: 0.8125rem; line-height: 1.4; }
}