/* Motorcycle-themed styles for Motor Rodeo */
:root{
  --rodeo-dark:#0f1720; /* asphalt */
  --rodeo-acc:#ff6b35; /* orange accent */
  --rodeo-metal:#bfc9ca; /* chrome */
  --rodeo-leather:#3b2f2f; /* leather brown */
  --rodeo-text: #e9eef0;
  --rodeo-muted: rgba(233,238,240,0.68);
  --rodeo-link: #ffb38a;
}

body{
  background: linear-gradient(180deg, #0b0f12 0%, #0f1720 100%);
  color: var(--rodeo-text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.rodeo-navbar{
  background: linear-gradient(90deg, rgba(15,23,32,1) 0%, rgba(20,28,36,1) 50%, rgba(12,14,16,1) 100%);
  box-shadow: 0 3px 8px rgba(2,6,23,0.6);
}

/* Ensure nav links are readable */
.rodeo-navbar .nav-link,
.rodeo-navbar .navbar-brand {
  color: var(--rodeo-text) !important;
}
.rodeo-navbar .nav-link:hover { color: #ffffff !important; }

.brand-emoji{ font-size:1.25rem; margin-right:0.35rem }

.hero{
  background: linear-gradient(120deg, rgba(255,107,53,0.12), rgba(0,0,0,0.35));
  padding: 3rem;
  border: 1px solid rgba(255,255,255,0.04);
}

.btn-primary{
  background: linear-gradient(90deg,var(--rodeo-acc),#ff8a50);
  border: none;
  box-shadow: 0 6px 14px rgba(255,107,53,0.16);
}

.btn-outline-secondary{
  color: var(--rodeo-metal);
  border-color: rgba(191,201,202,0.15);
}

.card.rodeo-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 20px rgba(2,6,23,0.6);
  color: #f1f5f9;
}

/* Muted text: darker on light backgrounds by default, lighter on our dark components */
.text-muted {
  color: rgba(0,0,0,0.66) !important;
}

/* Keep readable muted text inside dark-themed components */
.rodeo-card .text-muted {
  /* Use a darker muted color to avoid white-on-white in light card variants */
  color: rgba(0,0,0,0.66) !important;
}

.rodeo-navbar .text-muted,
.hero .text-muted {
  color: var(--rodeo-muted) !important;
}

/* Alerts should have readable text on colored backgrounds */
.alert {
  color: #ffffff !important;
  opacity: 0.98;
}

/* Dropdowns / menus */
.dropdown-menu, .dropdown-item {
  color: var(--rodeo-text) !important;
  background-color: var(--rodeo-dark) !important;
}

.footer-muted{ color: rgba(255,255,255,0.65); }

/* Make plain form controls readable on dark card backgrounds */
.rodeo-card .form-control-plaintext,
.rodeo-card .form-control-plaintext a {
  color: #ffffff;
}

.footer-muted{
  color: rgba(255,255,255,0.5);
}

.alert{ opacity: 0.98 }

/* Responsive tweaks */
@media (max-width: 768px){
  .hero{ padding: 2rem }
  .brand-emoji{ display:inline-block }
}