/* styles.css - Combined stylesheet for Whole School Meals pages */

/* Custom Bootstrap button colors */
:root {
    /* Primary: Orange color specified by client */
    --bs-primary: #EF8227; /* Orange primary color */
    --bs-primary-rgb: 239, 130, 39; /* RGB value of the orange */
    --bs-primary-hover: #D6721F; /* Slightly darker orange for hover */
    /* Secondary: Complementary slate blue-gray */
    --bs-secondary: #5D6E7E; /* Slate blue-gray secondary color */
    --bs-secondary-rgb: 93, 110, 126; /* RGB value of the secondary color */
    --bs-secondary-hover: #4A5A68; /* Slightly darker for hover effect */
}

/* Override button styles */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--bs-primary-hover) !important;
        border-color: var(--bs-primary-hover) !important;
    }

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

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active {
        background-color: var(--bs-secondary-hover) !important;
        border-color: var(--bs-secondary-hover) !important;
    }


/* Layout structure */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

/* Logo styling */
.logo {
    max-width: 250px;
    margin-bottom: 2rem;
}

/* Form styling */
.form-container {
    width: 100%;
    max-width: 600px;
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 1rem;
}

.form-group {
    flex: 1;
}

.pupil-name-field {
    flex: 3;
}

.meal-count-field {
    flex: 1;
}

/* Page-specific styles */
h2 {
    margin-bottom: 1.5rem;
    color: #333;
}


/* Button container */
.btn-container {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

/* Footer */
footer {
    background-color: #f8f9fa;
    padding: 1rem;
    text-align: center;
    margin-top: auto;
}