/* job.css - Styles for the Careers Page */
@import url('style_common.css'); /* Import common styles */

/* Basic body and content centering for job page */
body {
    font-family: 'Arial', sans-serif; /* Example font, ensure consistent with style_common.css */
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* Light background for the page */
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Header Styles (Assuming these are primarily in style_common.css) --- */
header {
    /* background-color: #333; */
    /* color: white; */
    /* padding: 15px 0; */
    /* text-align: center; */
}

header h1 {
    /* margin: 0; */
    /* font-size: 2.5em; */
}

.header-tagline {
    /* font-size: 1em; */
    /* color: #ccc; */
}

/* --- Main Navigation Styles (Assuming these are primarily in style_common.css) --- */
.main-nav {
    /* background-color: #444; */
    /* padding: 10px 0; */
    /* text-align: center; */
}

.main-nav a {
    /* color: white; */
    /* margin: 0 15px; */
    /* text-decoration: none; */
    /* font-weight: bold; */
    /* padding: 5px 10px; */
    /* border-radius: 4px; */
    /* transition: background-color 0.3s ease; */
}

.main-nav a:hover,
.main-nav a.active {
    /* background-color: #555; */
}

/* --- Main content area for the job page --- */
#job-content {
    max-width: 800px; /* Max width of the content */
    margin: 30px auto; /* Center the content with some margin */
    padding: 20px 40px; /* Added more horizontal padding */
    background-color: #ffffff; /* White background for the content area */
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    flex-grow: 1; /* Allows main content to expand */
}

.job-application-area {
    text-align: center; /* Center text within this section */
    padding: 20px 0;
}

.job-application-area h2 {
    font-size: 2.2em;
    color: #333; /* Darker color for heading */
    margin-bottom: 20px;
}

.job-application-area .intro-text,
.job-application-area .howto-apply-text {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #555;
}

.apply-button-container {
    margin: 40px 0; /* Increased space around the button */
}

.apply-now-button {
    display: inline-block;
    background-color: #d9534f; /* Red color (similar to .button-red from info.css) */
    color: white;
    padding: 25px 60px; /* Significantly increased padding to make it "huge" */
    font-size: 1.8em;   /* Increased font size for "huge" effect */
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px; /* Slightly larger border radius */
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 8px rgba(0,0,0,0.15); /* Adjusted shadow */
    transition: background-color 0.2s ease-in-out, transform 0.1s ease, box-shadow 0.2s ease;
    text-align: center;
    line-height: 1.3; /* Adjust line height if text wraps */
}

.apply-now-button:hover,
.apply-now-button:focus {
    background-color: #c9302c; /* Darker red on hover/focus */
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 7px 10px rgba(0,0,0,0.2); /* Enhanced shadow on hover */
    outline: none;
}

.equal-opportunity-text {
    font-size: 0.9em;
    color: #777;
    margin-top: 40px; /* Increased margin */
    line-height: 1.5;
}

/* --- Footer (optional, uncomment in HTML to use) --- */
/*
footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: #ccc;
    margin-top: auto;
}
*/

/* --- Responsive adjustments for job page --- */
@media (max-width: 768px) {
    #job-content {
        margin: 20px 15px; /* Adjust margin for smaller screens */
        padding: 15px 20px;
    }

    .job-application-area h2 {
        font-size: 1.8em;
    }

    .job-application-area .intro-text,
    .job-application-area .howto-apply-text {
        font-size: 1em;
    }

    .apply-now-button {
        padding: 20px 40px; /* Adjust padding for tablets */
        font-size: 1.5em;  /* Adjust font size for tablets */
    }
}

@media (max-width: 480px) {
    .main-nav a {
        /* margin: 0 8px; */
        /* font-size: 0.9em; */
    }
    .job-application-area h2 {
        font-size: 1.6em;
    }
    .apply-now-button {
        padding: 18px 30px; /* Further adjust padding for mobile */
        font-size: 1.3em;  /* Further adjust font size for mobile */
        width: 90%; /* Make button take more width on small screens */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }
}