/* Emerald City Marathon – Custom styles */

/* Countdown boxes */
.countdown-box {
  @apply flex flex-col items-center justify-center min-w-[70px] sm:min-w-[90px] px-3 py-4 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20;
}

.countdown-num {
  @apply text-2xl sm:text-4xl font-display font-bold tracking-tight text-white;
}

.countdown-label {
  @apply text-xs sm:text-sm uppercase tracking-wider text-white/70 mt-1;
}

/* Navbar text color when scrolled */
#navbar.scrolled .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

#navbar.scrolled a.font-display span:first-child {
  color: white;
}

/* Race card hover lift */
.race-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.race-card:hover {
  transform: translateY(-6px);
}

/* Gallery hover overlay feel */
.gallery-item {
  position: relative;
  overflow: hidden;
}
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 78, 59, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item:hover::after {
  opacity: 1;
}

/* FAQ icon rotation */
.faq-btn i {
  transition: transform 0.25s ease;
}
.faq-btn i.rotate-180 {
  transform: rotate(180deg);
}

/* Smooth focus rings */
input:focus, select:focus, button:focus {
  outline: none;
}

/* Selection color */
::selection {
  background-color: #10b981;
  color: white;
}

/* Better mobile spacing for hero stats */
@media (max-width: 640px) {
  .countdown-box {
    min-width: 64px;
    padding: 0.75rem 0.5rem;
  }
  .countdown-num {
    font-size: 1.5rem;
  }
}