/*
=====================================
1. GLOBAL LAYOUT (Guaranteed 3-Column Desktop)
=====================================
*/
.job-container {
    /* --- Layout Fixes for 3 Columns --- */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* FORCES 3 EQUAL COLUMNS ON DESKTOP */
    gap: 20px;  
    
    /* --- Width Fixes (Matching Category Page Max Width) --- */
    max-width: 1200px !important; /* Max width of the content area */
    margin: 30px auto !important;  /* Center the container */
    padding: 0 20px !important;    /* Side padding */

    /* The rest is the Purple/Cyan design styling: */
    /* Removed margin-bottom, handled by gap */
}

body.home .job-container {
    /* Push the job container left by 30px to cancel the parent's padding */
    margin-left: -30px !important;  
    
    /* Push the job container right by 30px to cancel the parent's padding */
    margin-right: -30px !important; 
    
    /* Widen the container by 60px (30px left + 30px right) to fill the gap */
    width: calc(100% + 60px) !important;  
}

/*
=====================================
--- NEW: SEARCH BAR & UTILITIES ---
=====================================
*/
.job-search-wrapper {
    max-width: 1000px;
    margin: 30px auto;
    padding: 0 20px; /* Matches job-container padding for alignment */
}

.job-search-form {
    display: flex;
    border: 2px solid #5e35b1; /* Match the purple theme border */
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#job-search-input {
    flex-grow: 1;
    padding: 12px 15px;
    border: none;
    font-size: 16px;
    outline: none;
    /* Remove default search appearance on some browsers */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#job-search-input::placeholder {
    color: #999;
}

#job-search-button {
    background-color: #00bcd4; /* Match the Bright Cyan theme color */
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Important: Prevents the button from shrinking */
}

#job-search-button:hover {
    background-color: #008c9e; /* Match the Darker Cyan hover color */
}

/* --- Loading Indicator Styling (Simple Spinner) --- */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #5e35b1; /* Purple spinner color */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 10px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.no-results-message {
    grid-column: 1 / -1; /* Make the message span all columns */
    text-align: center;
    font-size: 1.2em;
    color: #888;
    padding: 40px;
}

/*
=====================================
2. JOB CARD STYLING (Purple/Cyan Design)
=====================================
*/
.job-card {
    background-color: #fff;
    border: 2px solid #5e35b1; /* Deep Purple */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.15);  
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.job-card:hover {
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
    border-color: #00bcd4;  
}


/*
=====================================
3. JOB TITLE (The Distinctive Header Bar)
=====================================
*/
.job-title {
    background-color: #5e35b1; /* Deep Purple */
    color: #fff;  
    padding: 12px;
    font-weight: bold;
    font-size: 20px;
    border-radius: 8px;
    word-wrap: break-word;
    white-space: normal;
    
    /* Negative margin to pull title to the card edges */
    margin: -20px -20px 15px -20px;  
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/*
=====================================
4. JOB DETAILS & BUTTONS
=====================================
*/
.job-details {
    flex-grow: 1;  
    margin-top: 0;  
    color: #333;  
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.apply-button {
    display: block;
    width: 100%;
    background-color: #00bcd4; /* Bright Cyan */
    color: white;
    text-align: center;
    padding: 12px;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 700;
    margin-top: 15px;
    transition: background-color 0.3s ease;
    text-decoration: none !important;
}

.apply-button:hover {
    background-color: #008c9e; /* Darker Cyan */
}

/* Load More Button Styling (Custom styling provided by user) - RESTORED BLUE COLOR */
#load-more-home-jobs {
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #0073e6; /* Restored Blue color */
    background-color: #fff;
    color: #0073e6 !important; /* FIX: Added !important to guarantee blue text visibility over white background */
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    /* FIX: Added for centering the button if the wrapper's text-align fails or is absent */
    display: block;
    margin: 0 auto;
}

#load-more-home-jobs:hover:not(:disabled) {
    background-color: #0073e6; /* Restored Blue color */
    color: #fff !important; /* FIX: Added !important to ensure white text is visible on blue hover background */
}

#load-more-home-jobs:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: #f0f0f0;
    color: #888;
}


/*
=====================================
5. RESPONSIVENESS (Media Queries)
=====================================
*/

/* Tablet (2 columns) - Activates when screen width is 1024px or less */
@media (max-width: 1024px) {
    .job-container {
        grid-template-columns: repeat(2, 1fr); /* Switch to 2 columns */
        padding: 0 15px !important;
    }
    
    .job-title {
        font-size: 18px;
    }

    /* Adjust search padding for tablets */
    .job-search-wrapper {
        padding: 0 15px;
    }
}

/* Mobile (1 column) - Activates when screen width is 650px or less */
@media (max-width: 650px) {
    .job-container {
        grid-template-columns: 1fr; /* Switch to 1 column */
        padding: 15px !important; 
        gap: 15px;
    }
    
    .job-card {
        padding: 15px;
    }
    
    .job-title {
        /* Adjust negative margin to match new card padding */
        margin: -15px -15px 15px -15px; 
        font-size: 17px;
        padding: 10px; /* Slight reduction in title padding */
    }
    
    .apply-button {
        padding: 10px;
        font-size: 16px;
    }

    /* Adjust search padding for mobile */
    .job-search-wrapper {
        padding: 0 15px;
        margin: 20px auto;
    }
}

/* Fix for VERY NARROW Mobile Screens (480px and below) - ensures button visibility */
@media (max-width: 480px) { 
    .job-search-wrapper {
        padding: 0 10px; /* Minimal side padding */
    }
    
    #job-search-input {
        padding: 10px 12px; /* Reduce input padding */
        font-size: 14px;
    }
    
    #job-search-button {
        padding: 8px 15px; /* Reduce button padding to ensure fit */
    }
}