/* Live server-status badge shown in the announcement bar.
 * Markup is in docs/overrides/main.html; behavior in docs/assets/status.js.
 *
 * The badge is a full-width flex row so it stays centered inside
 * Material's .md-banner__inner without having to override that element. */

.server-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.server-status__dot {
  width: 0.62em;
  height: 0.62em;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #9ea7b3; /* neutral default until first poll resolves */
}

/* Online — green with a soft pulse so it reads as "live". */
.server-status--up .server-status__dot {
  background: #3fb950;
  animation: server-status-pulse 2s infinite;
}

/* Offline — solid red, no animation. */
.server-status--down .server-status__dot {
  background: #f85149;
}

/* Unknown / still loading — neutral grey. */
.server-status--unknown .server-status__dot,
.server-status--loading .server-status__dot {
  background: #9ea7b3;
}

@keyframes server-status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.6); }
  70%  { box-shadow: 0 0 0 0.5em rgba(63, 185, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .server-status--up .server-status__dot {
    animation: none;
  }
}


/* Banner row: status badge + Discord CTA side by side, centered.
 * Wraps on narrow screens so neither element is clipped. */
.lgnd-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em 1.4em;
  flex-wrap: wrap;
  padding: 0.15em 0;
}

/* "Join us on Discord" pill in the announcement bar. Discord blurple so it
 * reads instantly as THE Discord link; explicit colors because Material's
 * .md-banner sets its own link color. */
.md-banner .lgnd-banner__discord {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.28em 0.9em;
  border-radius: 1.2em;
  background: #5865f2;
  color: #ffffff;
  transition: background 0.15s ease;
}

.md-banner .lgnd-banner__discord:hover,
.md-banner .lgnd-banner__discord:focus {
  background: #4752c4;
  color: #ffffff;
}

.lgnd-banner__discord svg {
  width: 1.25em;
  height: auto;
  flex: 0 0 auto;
}

/* "FAQ" pill next to the Discord CTA. Translucent white so it reads as a
 * secondary action against the purple banner without competing with the
 * Discord blurple. */
.md-banner .lgnd-banner__faq,
.md-banner .lgnd-banner__guide {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.28em 0.9em;
  border-radius: 1.2em;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.38);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.md-banner .lgnd-banner__faq:hover,
.md-banner .lgnd-banner__faq:focus,
.md-banner .lgnd-banner__guide:hover,
.md-banner .lgnd-banner__guide:focus {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.62);
  color: #ffffff;
}

.lgnd-banner__faq svg,
.lgnd-banner__guide svg {
  width: 1.05em;
  height: auto;
  flex: 0 0 auto;
}