/* Site notices — the strip under the navigation bar. See js/site-notices.js. */

.site-notices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5% 10px;
  font-family: Rajdhani, 'Segoe UI', system-ui, -apple-system, sans-serif;
  animation: site-notice-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Outside a fixed header it sits in the page like any other block. */
body > .site-notices,
header + .site-notices {
  position: relative;
  z-index: 5;
  padding-top: 10px;
}

.site-notice {
  --tone: #00ffff;
  --tone-soft: rgba(0, 255, 255, 0.12);
  --tone-line: rgba(0, 255, 255, 0.4);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  border-radius: 12px;
  color: #eef3ff;
  background: linear-gradient(90deg, var(--tone-soft), rgba(10, 12, 24, 0.92) 65%);
  border: 1px solid var(--tone-line);
  box-shadow: inset 3px 0 0 var(--tone), 0 8px 30px -12px rgba(0, 0, 0, 0.7);
  text-align: left;
}

.site-notice--away {
  --tone: #ffb84d;
  --tone-soft: rgba(255, 184, 77, 0.16);
  --tone-line: rgba(255, 184, 77, 0.45);
}

.site-notice--important {
  --tone: #ff4f8b;
  --tone-soft: rgba(255, 79, 139, 0.18);
  --tone-line: rgba(255, 79, 139, 0.5);
}

.site-notice-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: 1px;
  border-radius: 9px;
  color: #05060d;
  background: var(--tone);
  box-shadow: 0 0 18px var(--tone-line);
}

.site-notice-icon svg {
  width: 18px;
  height: 18px;
}

.site-notice-body {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.4;
}

.site-notice-title {
  display: inline;
  margin-right: 10px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
}

.site-notice-dates {
  display: inline;
  font-weight: 700;
  color: var(--tone);
}

.site-notice-message {
  margin: 2px 0 0;
  color: #bcc6e2;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.site-notice-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: #8592b6;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}

.site-notice-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.site-notice-close:focus-visible {
  outline: 2px solid var(--tone);
  outline-offset: 2px;
}

.site-notice-close svg {
  width: 16px;
  height: 16px;
}

@keyframes site-notice-in {
  from { opacity: 0; transform: translateY(-6px); }
}

@media (max-width: 600px) {
  .site-notices {
    padding: 0 12px 8px;
  }

  .site-notice-title,
  .site-notice-dates {
    display: block;
    margin-right: 0;
  }

  .site-notice-body {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-notices {
    animation: none;
  }
}

/* site-notices.js tucks the pill away while scrolling down and brings it back
   on the way up. This lives here, not only in apple-theme.css, so pages that
   don't load the theme (CROSSFADE and the product sites) tuck it too, instead
   of leaving it floating over the text. visibility does the hiding, so it
   still works where the entrance animation holds the opacity. */
html body .site-notices { transition: opacity .3s ease, transform .35s ease, visibility 0s linear 0s; }
html body .site-notices.is-tucked { opacity: 0; transform: translateY(-10px); visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s; }
@media (prefers-reduced-motion: reduce) {
  html body .site-notices, html body .site-notices.is-tucked { transition: none !important; transform: none !important; }
}