/* static/styles.css */

/* Import Google Fonts for a modern look */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
    /* Define color variables for easy maintenance */
    /* Arapahoe County official colors integrated */
    /* Primary blue inspired by county website header */
    --primary-blue: #003366;
    /* Accent red from official logo (Pantone 201 C, hex #b30838) */
    --accent-red: #b30838;
    /* Accent gold inspired by Colorado themes and county accents */
    --accent-gold: #f7b500;
    /* Text dark */
    --text-dark: #333333;
    /* Background white */
    --background-white: #FFFFFF;
    /* Shadow color */
    --shadow-color: rgba(0, 0, 0, 0.1);
    /* Border radius */
    --border-radius: 8px;
}

body {
    background-color: var(--background-white);
    color: var(--text-dark);
    font-family: 'Roboto', sans-serif; /* Modern sans-serif font */
    line-height: 1.6; /* Improved readability */
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 0 auto; /* Center container */
    padding: 2rem; /* More padding for mobile */
    background-color: var(--background-white);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px var(--shadow-color); /* Subtle shadow for depth */
}

h1 {
    color: var(--primary-blue);
    font-weight: 700; /* Bold for modern feel */
    margin-bottom: 1.5rem;
}

p {
    margin-bottom: 1rem;
}

.form-label {
    font-weight: 500;
    color: var(--text-dark);
}

.form-control {
    border-radius: var(--border-radius);
    border: 1px solid #ced4da; /* Bootstrap override for consistency */
    padding: 0.75rem; /* More padding */
    transition: border-color 0.3s ease; /* Smooth focus effect */
}

.form-control:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem rgba(0, 51, 102, 0.25); /* Blue focus ring */
}

.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    border-radius: var(--border-radius);
    padding: 0.75rem 1.5rem; /* Larger buttons */
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Hover effects */
}

.btn-primary:hover {
    background-color: var(--accent-gold); /* Gold on hover for county accent */
    border-color: var(--accent-gold);
    transform: translateY(-2px); /* Subtle lift on hover */
}

.alert {
    border-radius: var(--border-radius);
}

/* Unified question styling - all the same color, modern layout */
.question {
    margin-bottom: 2rem; /* More spacing */
    padding: 1rem;
    background-color: #f8f9fa; /* Light gray background for questions */
    border-radius: var(--border-radius);
    box-shadow: 0 2px 6px var(--shadow-color); /* Subtle card-like shadow */
}

.question p {
    color: var(--primary-blue); /* All questions in navy blue for uniformity */
    font-weight: 500; /* Semi-bold */
    margin-bottom: 0.75rem;
}

.form-check {
    margin-right: 1rem; /* Spacing between yes/no */
}

.form-check-input {
    cursor: pointer;
}

.form-check-label {
    cursor: pointer;
    color: var(--text-dark);
}

/* Add some red accents for balance, e.g., on hover or borders */
.question:hover {
    border: 1px solid var(--accent-red); /* Official red border on hover for interaction */
    transition: border 0.3s ease;
}

/* Ensure mobile responsiveness */
@media (max-width: 576px) {
    .container {
        padding: 1rem;
    }
    
    .btn-primary {
        width: 100%; /* Full-width buttons on mobile */
    }
}

.header-logo {
    display: block; /* Center with auto margins */
    margin: 0 auto 1.5rem auto; /* Top/bottom margin */
    max-width: 250px; /* Smaller size for less prominence */
    height: auto; /* Maintain aspect ratio */
    border-radius: var(--border-radius); /* Rounded corners if desired */
    box-shadow: 0 2px 4px var(--shadow-color); /* Subtle shadow for depth */
}

@media (max-width: 576px) {
    .header-logo {
        max-width: 60px; /* Even smaller on mobile */
    }
}