/* static/css/style.css */

/* 1. Define Color Palette from Style Guide */
:root {
    --navy: #0B2A4A;
    --navy-soft: #12385F;
    --orange: #FF7A1A;
    --orange-hover: #FF8F3D;
    --background: #F8FAFC;
    --card-white: #FFFFFF;
    --border-gray: #E5E7EB;
    --subtle-gray: #64748B;
    --text-navy: #0F172A;
}

/* 2. Apply Global Styles */
body {
    font-family: 'Inter', system-ui, sans-serif; /* Primary font for all UI */
    background-color: var(--background); /* Page background */
    color: var(--text-navy); /* Default body text color */
    font-weight: 400; /* font-normal */
}

h1, h2, h3, h4, h5 {
    color: var(--navy); /* Strong text color for headings */
    font-weight: 800; /* font-extrabold */
}

.text-muted {
    color: var(--subtle-gray) !important; /* Secondary text */
}

/* 3. Style Core Components */
.card {
    background-color: var(--card-white);
    border: 1px solid var(--border-gray);
}

.text-orange {
    color: var(--orange) !important; /* Use your brand's orange color */
}

/* Style for the button when it's NOT disabled */
.btn-primary:not(:disabled) {
    background-color: var(--orange);
    border-color: var(--orange);
    font-weight: 600;
}

/* Style for the button WHEN it is disabled */
.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--border-gray);
    border-color: var(--border-gray);
}

.btn-primary:hover {
    background-color: var(--orange-hover);
    border-color: var(--orange-hover);
}

.btn-secondary {
    background-color: var(--navy-soft);
    border-color: var(--navy-soft);
    color: white;
    font-weight: 600; /* font-semibold */
}

.btn-secondary:hover {
    background-color: var(--navy);
    border-color: var(--navy);
}

.bg-brand-navy {
    background-color: var(--navy);
}

.footer a {
    color: var(--card-white);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: var(--navy);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* Styles for the new landing page hero section */
.hero-section {
    padding: 6rem 0;
}

.hero-section .text-orange {
    color: var(--orange);
}

.schedule-graphic {
    background-color: var(--card-white);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 400px;
    margin: 2rem auto 0 auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.schedule-graphic p {
    font-weight: 600;
    color: var(--navy);
}

.schedule-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.schedule-slot {
    width: 12%;
    height: 24px;
    background-color: #eef2f6; /* A very light gray */
    border-radius: 6px;
}

.schedule-slot.active {
    background-color: var(--orange);
}