/* Global branding layout and design scheme*/
body {
    background-color: #0b1120;  /* deep navy */
    color: #e5e7eb;             /* light gray */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hero-logo {
  margin-top: 6px;
  max-width: 280px;   /* slightly smaller = feels more intentional */
  width: 100%;
  height: auto;
  opacity: 0.98;
  display: block;     /* ensures no inline weirdness */
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}

/* Fine alignment: center hero logo with Prediction Markets card */
@media (min-width: 768px) {
  .hero-logo {
    transform: translateX(50px);
  }
}

.navbar {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.navbar-brand {
    font-weight: 600;
    letter-spacing: 0.5px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
}

.navbar .nav-link {
    color: #cbd5e1;             /* soft gray-blue */
    margin-right: 0.75rem;
    transition: color 0.2s ease, border-bottom 0.2s ease;
}

.navbar .nav-link:hover {
    color: #ffffff;
}

/* Active nav-link for current page */
.navbar .nav-link.active {
    color: #ffffff;
    border-bottom: 2px solid #7c3aed;
    padding-bottom: 2px;
    font-weight: 600;
}

/* Hover underline for non-active links */
.navbar .nav-link:hover:not(.active) {
    border-bottom: 2px solid #2563eb;
}

.section-title {
    color: #7c3aed;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.card {
    background-color: #111827;
    border: 1px solid #1f2937;
    color: #e5e7eb;
    text-align: left;
}

.card-title {
    color: #f9fafb;
    font-weight: 600;
}

footer {
    color: #94a3b8;
}

/* Make "muted" readable against dark backgrounds */
.text-muted,
.form-text {
    color: #94a3b8 !important;
}

.chart-container {
    position: relative;
    height: 400px;
    width: 100%;
    margin-bottom: 1.5rem;
}

#refreshChart:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-select, .form-control {
    background-color: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}

.form-select:focus, .form-control:focus {
    background-color: #1f2937;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25);
}

/* Make the primary button style match navbar color */
.btn-primary {
    background-color: #2563eb;
    border: none;
}

.btn-primary:hover {
    background-color: #1d4ed8;
}

#cta-message {
    max-width: 900px;
}

/* F1 Race Calendar Styles */
.race-card {
    background-color: #1a1f2e !important;
    border: 1px solid #2d3748 !important;
    transition: all 0.3s ease;
    color: #e5e7eb !important;
}

.race-card strong {
    color: #ffffff !important;
}

.race-card .text-muted {
    color: #94a3b8 !important;
}

.race-card:hover {
    background-color: #252d3d !important;
    border-color: #4a5568 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.race-card.active {
    background-color: #2d3748 !important;
    border-color: #7c3aed !important;
    border-width: 2px !important;
}

.selected-race-banner {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-left: 4px solid #7c3aed;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
}

.selected-race-banner h5 {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.selected-race-banner p {
    color: #cbd5e1;
    margin-bottom: 0;
}

/* F1 Educational Guide Boxes */
.f1-guide-box {
    background: linear-gradient(135deg, #1a1f2e 0%, #242938 100%);
    border: 1px solid #374151;
    border-left: 4px solid #2563eb;
    color: #e5e7eb;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.f1-guide-box h6 {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.f1-guide-box strong {
    color: #60a5fa;
}

.f1-guide-box p {
    color: #cbd5e1;
}

.f1-guide-box hr {
    border-color: #374151;
    opacity: 0.5;
}

/* Pole Position and Podium Styling */
#race-results-section .row {
    display: flex;
    align-items: stretch;
}

#race-results-section .col-md-4,
#race-results-section .col-md-8 {
    display: flex;
}

.pole-position-card {
    background: linear-gradient(135deg, #1a1f2e 0%, #242938 100%);
    border: 1px solid #374151;
    border-left: 4px solid #fbbf24 !important;
    color: #e5e7eb;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pole-position-card .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pole-position-card h6 {
    color: #fbbf24;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.pole-position-card .driver-name {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.1rem;
}

.pole-position-card .driver-details {
    color: #cbd5e1;
}

#race-results-section .col-md-8 > .card {
    width: 100%;
}

.podium-card {
    background: linear-gradient(135deg, #1a1f2e 0%, #242938 100%);
    border: 1px solid #374151;
    color: #e5e7eb;
    transition: all 0.3s ease;
    margin-bottom: 0.5rem;
}

.podium-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.podium-card.p1 {
    border-left: 4px solid #fbbf24 !important;
}

.podium-card.p1 .position-badge {
    color: #fbbf24;
}

.podium-card.p2 {
    border-left: 4px solid #94a3b8 !important;
}

.podium-card.p2 .position-badge {
    color: #94a3b8;
}

.podium-card.p3 {
    border-left: 4px solid #cd7f32 !important;
}

.podium-card.p3 .position-badge {
    color: #cd7f32;
}

.podium-card .position-badge {
    font-size: 1.5rem;
    font-weight: 700;
}

.podium-card .driver-name {
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
}

.podium-card .driver-details {
    color: #cbd5e1;
    font-size: 0.9rem;
}