/* Custom overrides and accessibility improvements */

/* Connection status badge */
.status-wrapper {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2000;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid transparent;
  user-select: none;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.status-connecting {
  background: rgba(255, 193, 7, .15);
  color: #ffc107;
  border-color: rgba(255, 193, 7, .4);
}

.status-connected {
  background: rgba(40, 167, 69, .15);
  color: #28a745;
  border-color: rgba(40, 167, 69, .4);
}

.status-disconnected {
  background: rgba(220, 53, 69, .15);
  color: #dc3545;
  border-color: rgba(220, 53, 69, .4);
}

/* Typing effect cursor */
.input-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #ffffff;
  margin-left: 0;
  margin-right: 0;
  vertical-align: baseline;
  animation: cursor-blink 1s steps(1) infinite;
}

@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.typing-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

#sentence {
  white-space: nowrap;
}

.carousel-wrapper {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35em; /* space between "value with" and the carousel word */
}

#feature-text {
  display: inline-block;
  transition: color 400ms ease;
}

.ledger-info-text {
  transition: color 400ms ease;
}

/* Responsive title sizing (override) */
.title {
  font-size: clamp(2.25rem, 7vw, 4rem) !important;
}

@media (max-width: 576px) {
  .sub-title {
    padding: .5rem 1rem !important;
  }
  .ledger-legend {
    left: 10px !important;
    bottom: 10px !important;
  }
}

/* Prefers reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .stars, .stars2, .stars3,
  .validator-star, .ledger-star,
  .orbital-path, .orbital-container,
  .ledger-box, .transaction-dot {
    animation: none !important;
    transition: none !important;
  }
}