/* General Styles & Dark Mode Theme */

:root {

    --primary-bg-color: #1a1a1a; /* Dark background */
    --secondary-bg-color: #2c2c2c; /* Slightly lighter dark */
    --primary-text-color: #e0e0e0; /* Light grey text */
    --secondary-text-color: #b0b0b0; /* Medium grey text */
    --accent-color: #4a90e2; /* A blue accent */
    --link-color: #58a6ff;
    --border-color: #444;
    --input-bg-color: #333;
    --input-border-color: #555;
    --button-bg-color: #e53935; /* Red for submit */
    --button-text-color: #ffffff; /* White text for submit */
    --error-color: #f44336;
}
body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #121212; /* Dark background */
    margin: 0;
    padding: 0;
    color: #e0e0e0; /* Light text */
    line-height: 1.6;    
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


main {
    flex: 1; /* Allow main content to grow */
    padding: 20px;
    max-width: 960px; /* Max width for content */
    margin: 20px auto; /* Center the main content */
    width: 100%; /* Ensure it takes full width on smaller screens */
    border-radius: 8px;
    box-sizing: border-box; /* Include padding in width */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}



header {
    background-color: #1f1f1f; /* Slightly lighter dark for header/footer */
    color: #ffffff;
    padding: 10px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}


footer {
    background-color: #1f1f1f; /* Slightly lighter dark for header/footer */
    color: #ffffff;
    padding: 10px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    margin-top: 20px;
    font-size: 0.9em;
}

.footer-email-button {
    display: block;
    width: fit-content; /* Adjust width to content */
    margin: 10px auto 20px auto; /* Center button, add space above and below */
    padding: 12px 25px;
    background-color: var(--accent-color); /* Use the blue accent color */
    color: var(--button-text-color); /* White text */
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 25px; /* Rounded corners */
    transition: background-color 0.3s ease;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.footer-email-button:hover {
    background-color: #3a7bd5; /* Slightly darker blue on hover */
}

.footer-email-button:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}


/* Accessibility: Skip to Main Content Link (Hidden but accessible) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background-color: #007bff;
    color: white;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* A. Header Section - Main Page Title */
#main-title {
    font-family: "Comic Sans MS", cursive, sans-serif; /* Client-specified font */
    font-size: 3em;
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
    /* Rainbow Effect - using multiple text shadows */
    /* Adjust colors and offsets as needed for the desired effect */
    text-shadow:
        -1px -1px 0 #ff0000, /* Red */
         1px -1px 0 #ff7f00, /* Orange */
        -1px  1px 0 #ffff00, /* Yellow */
         1px  1px 0 #00ff00, /* Green */
        -2px  0   0 #0000ff, /* Blue */
         2px  0   0 #4b0082, /* Indigo */
         0   -2px 0 #9400d3, /* Violet */
         0    2px 0 #ff0000; /* Repeat Red for continuity if needed */
    /* Note: A more complex rainbow could involve linear gradients or individual spans for letters */
    /* Using spans with different colors is a more robust approach for letter-specific colors */
}

/* Alternative Rainbow using spans (requires modifying index.html slightly) */
/*
#main-title span {
    display: inline-block;
}
#main-title span:nth-child(1) { color: #ff0000; } // R
#main-title span:nth-child(2) { color: #ff7f00; } // A
#main-title span:nth-child(3) { color: #ffff00; } // I
#main-title span:nth-child(4) { color: #00ff00; } // N
#main-title span:nth-child(5) { color: #0000ff; } // B
#main-title span:nth-child(6) { color: #4b0082; } // O
#main-title span:nth-child(7) { color: #9400d3; } // W
*/


/* B. Introductory Video Section */
.video-section {
    margin: 20px 0;
    text-align: center; /* Center the video player */
}

.video-section video {
    max-width: 100%; /* Ensure video doesn't exceed container width */
    height: auto; /* Maintain aspect ratio */
    border: 1px solid #333; /* Subtle border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add some shadow */
}

/* C. Login/Registration Form Section */
.auth-section {
    background-color: #1f1f1f; /* Slightly lighter dark for form background */
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.auth-section h2 {
    text-align: center;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #b0b0b0; /* Slightly lighter label text */
}

.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"] {
    width: calc(100% - 22px); /* Adjust for padding and border */
    padding: 10px;
    border: 1px solid #555; /* Darker border */
    border-radius: 4px;
    background-color: #2b2b2b; /* Darker input background */
    color: #e0e0e0; /* Light input text */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.form-group input[type="email"]::placeholder,
.form-group input[type="password"]::placeholder,
.form-group input[type="text"]::placeholder {
    color: #888; /* Placeholder text color */
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
}

.checkbox-group label {
    margin-bottom: 0; /* Remove bottom margin for aligning with checkbox */
    font-weight: normal; /* Less bold for checkbox label */
}


#submitBtn {
    display: block;
    width: 100%; /* Full width button */
    padding: 12px 20px;
    background-color: #dc3545; /* Red color */
    color: #ffffff; /* White text */
    font-size: 1.2em;
    font-weight: bold;
    border: none;
    border-radius: 20px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

#submitBtn:hover {
    background-color: #c82333; /* Darker red on hover */
}

#submitBtn:focus {
    outline: 2px solid #dc3545; /* Outline for accessibility */
    outline-offset: 2px;
}

/* D. "Logged In" Indicator */
#loggedInIndicator {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #28a745; /* Green color */
    color: #ffffff; /* White text */
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 20px; /* Rounded corners */
    z-index: 1000; /* Ensure it's on top */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


/* E. Main Call-to-Action (CTA) Buttons */
.cta-buttons-section {
    text-align: center;
    margin: 30px 0;
}

.cta-button {
    display: block; /* Make buttons block level */
    width: 100%; /* Full width */
    max-width: 300px; /* Max width for larger screens */
    margin: 15px auto; /* Center block buttons and add space between */
    padding: 15px 25px;
    color: #ffffff; /* White text */
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none; /* Remove underline from links */
    border-radius: 25px; /* More rounded corners */
    transition: background-color 0.3s ease;
    text-align: center; /* Center text inside button */
    box-sizing: border-box; /* Include padding in width */
}

.seeker-cta {
    background-color: #28a745; /* Green color */
}

.employer-cta {
    background-color: #28a745; /* Green color */
}

.seeker-cta:hover,
.employer-cta:hover {
    background-color: #218838; /* Darker green on hover */
}

.cta-button:focus {
     outline: 2px solid #28a745; /* Outline for accessibility */
    outline-offset: 2px;
}


/* Responsive Design */
@media (max-width: 600px) {
    #main-title {
        font-size: 2.5em;
    }

    .auth-section,
    .cta-buttons-section {
        padding: 15px;
    }

    .form-group input[type="email"],
    .form-group input[type="password"],
    .form-group input[type="text"],
    #submitBtn,
    .cta-button {
         width: 100%; /* Full width on small screens */
         max-width: none; /* Remove max-width constraint */
    }

    .cta-button {
        margin: 10px 0; /* Adjust margin for full-width buttons */
    }



    }


h1, h2, h3, h4, h5, h6 {
    color: var(--primary-text-color);
    margin-bottom: 0.8em;
}

p {
    margin-bottom: 1em;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


header h1 {
    margin: 0;
    font-size: 2em;
}




#welcome-message h2, #registration-form h2 {
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5em;
    margin-bottom: 1em;
}

/* Form Styling */
form {
    display: flex;
    flex-direction: column;
}

fieldset {
    border: 1px solid var(--border-color);
    padding: 1.5em;
    margin-bottom: 1.5em;
    border-radius: 5px;
}

legend {
    font-weight: bold;
    color: var(--accent-color);
    padding: 0 0.5em;
    font-size: 1.2em;
}

label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: bold;
    color: var(--secondary-text-color);
    font-size: 1.5em; /* Increased by 50% */
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 0.8em;
    margin-bottom: 1em;
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    background-color: var(--input-bg-color);
    color: var(--primary-text-color);
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    font-size: 1.5em;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}

/* Readonly fields */
input[readonly] {
    background-color: #444; /* Slightly different background for readonly */
    cursor: not-allowed;
}

/* Checkboxes and Radio Buttons */
input[type="radio"],
input[type="checkbox"] {
    margin-right: 0.5em;
    vertical-align: middle; /* Align with label text */
}

label.inline-label {
    display: inline-block; /* Keep label next to checkbox/radio */
    margin-right: 1.5em; /* Space between options */
    margin-bottom: 0.8em; /* Space below each option line */
    font-weight: normal; /* Normal weight for options */
    color: var(--primary-text-color);
}

/* Adjust spacing for checkbox/radio groups */
fieldset div { /* Assuming checkboxes/radios are wrapped in divs or similar for grouping */
    margin-bottom: 1em;
}

small {
    display: block;
    margin-top: -0.8em;
    margin-bottom: 1em;
    font-size: 0.85em;
    color: var(--secondary-text-color);
}

/* Submit Button Styling */
.submit-button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    padding: 6.4em 12em;
    border: none;
    border-radius: 50px; /* Rounded corners */
    font-weight: bold;
    font-size: 8.8em;
    background-color: #e53935; /* Red background */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    align-self: flex-start; /* Align to the left */
    margin-top: 1em; /* Add some space above the button */
}

.submit-button:hover {
    background-color: #c62828; /* Darker red on hover */
}

.submit-button:active {
    transform: scale(0.98); /* Slight shrink effect on click */
}



/* Responsive Design */
@media (max-width: 768px) {
    main {
        padding: 1em;
        margin: 10px;
    }

    header {
        padding: 0.8em 1em;
    }

    header h1 {
        font-size: 1.5em;
    }

    label.inline-label {
        display: block; /* Stack options vertically on smaller screens */
        margin-right: 0;
        margin-bottom: 0.5em;
    }

    .submit-button {
        align-self: stretch; /* Make button full width on small screens */
        text-align: center;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px; /* Adjust base font size for very small screens */
    }

    header h1 {
        font-size: 1.3em;
    }

    input[type="text"],
    input[type="password"],
    input[type="date"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    select,
    textarea {
        padding: 0.7em;
    }
    .submit-button {
        padding: 0.7em 1.2em;
        font-size: 1em;
    }
}
/* Styling for input fields in the Employer Registration Form */
#employerRegistrationForm input[type="text"],
#employerRegistrationForm input[type="password"],
#employerRegistrationForm input[type="date"],
#employerRegistrationForm input[type="tel"],
#employerRegistrationForm input[type="email"],
#employerRegistrationForm input[type="number"],
#employerRegistrationForm select,
#employerRegistrationForm textarea {
    color: #000; /* Black text */
    background-color: #fff; /* White background */
}

.copyright-notice {
    font-size: 2em; /* Double the font size of the copyright notice */
}