/* File: assets/css/style.css */
/* This is for the public-facing website (applicant side) */

/* --- General Body & Typography --- */
body {
    font-family: 'Sarabun', sans-serif; /* Example Thai font */
    background-color: #f4f7f6; /* Light, neutral background */
    color: #333;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600; /* Slightly bolder headings */
    color: #2c3e50; /* Dark blue-gray for headings */
}

a {
    color: #3498db; /* Primary link color */
    text-decoration: none;
}
a:hover {
    color: #2980b9;
    text-decoration: underline;
}

/* --- Navbar Styling --- */
.navbar {
    /* transition: background-color 0.3s ease-in-out; */
}
.navbar-brand img {
    max-height: 40px; /* Adjust logo height */
}
.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.65);
    font-weight: 500;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: rgba(0,0,0,.8);
}
.navbar-light .navbar-nav .nav-link.active {
    color: #0d6efd; /* Bootstrap primary color for active link */
    font-weight: 700;
}

/* --- Buttons --- */
.btn-primary {
    background-color: #3498db;
    border-color: #3498db;
}
.btn-primary:hover {
    background-color: #2980b9;
    border-color: #217dbb;
}
.btn-success {
    background-color: #2ecc71;
    border-color: #2ecc71;
}
.btn-success:hover {
    background-color: #27ae60;
    border-color: #209e54;
}
.btn-outline-secondary {
    border-color: #bdc3c7;
    color: #7f8c8d;
}
.btn-outline-secondary:hover {
    background-color: #ecf0f1;
    color: #34495e;
    border-color: #bdc3c7;
}


/* --- Forms Styling (e.g., registration, login) --- */
.card.shadow-lg {
    border: none; /* Remove default card border if using prominent shadow */
}
.card-header {
    /* Example: make card headers a bit more distinct */
    /* background-color: #e9ecef; */
    /* border-bottom: 1px solid #dee2e6; */
}
.form-label {
    font-weight: 500;
    margin-bottom: 0.3rem;
}
.form-control, .form-select {
    /* border-radius: 0.25rem; */ /* Default Bootstrap, can customize */
    /* box-shadow: inset 0 1px 2px rgba(0,0,0,.075); */
}
.form-control:focus, .form-select:focus {
    border-color: #86b7fe; /* Bootstrap focus color */
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Custom styling for specific form elements if needed */
#id_check_status .text-info,
#id_check_status .text-success,
#id_check_status .text-danger {
    font-size: 0.875em;
}
#age_status .text-success {
    font-size: 0.875em;
    font-weight: 500;
}

/* For Bootstrap validation feedback to always show (if a parent has .was-validated or field .is-invalid) */
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback {
    display: block;
}
.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-select:valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-feedback,
.form-select.is-valid ~ .valid-feedback {
    display: block;
}


/* --- Footer Styling --- */
.footer {
    font-size: 0.9em;
    background-color: #e9ecef; /* Slightly different from main bg for contrast */
}
.footer a.text-muted:hover {
    color: #333 !important;
}

/* --- Main Content Area --- */
.main-content-area {
    min-height: calc(100vh - 120px - 72px); /* Example: 100% viewport height - header height - footer height */
    /* Adjust 120px and 72px based on your actual header and footer heights */
}

/* --- Utility and Helper Classes --- */
.border-bottom {
    border-bottom: 1px solid #dee2e6 !important;
}
.pb-2 {
    padding-bottom: 0.5rem !important;
}

/* --- Specific Page Styling (Example: Home page featurettes) --- */
.featurette-divider {
    margin: 3rem 0; /* More space between featurettes */
}
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.05rem;
}

/* --- Alerts (Flash Messages) Styling --- */
.alert {
    /* Ensure alerts are noticeable */
    /* border-left-width: 5px; */
}
.alert-success { /* border-left-color: #198754; */ }
.alert-danger  { /* border-left-color: #dc3545; */ }
.alert-warning { /* border-left-color: #ffc107; */ }
.alert-info    { /* border-left-color: #0dcaf0; */ }

/* Responsive adjustments */
@media (max-width: 768px) {
    .featurette-heading {
        font-size: 2rem; /* Adjust heading size for smaller screens */
    }
}