/**
 * MFHS Coming Soon Vanilla Load More Button Styles
 * 
 * This standalone CSS file handles styling for the Coming Soon jobs section
 * and its vanilla JavaScript load more functionality.
 *
 * Organization follows these principles:
 * 1. Logical grouping by component
 * 2. Consistent naming conventions
 * 3. Specific selectors to avoid conflicts
 * 4. Proper cascade and inheritance
 */

/* --------------------------------------------------------------------------
   Section Layout & Structure
   -------------------------------------------------------------------------- */

/* Main section containers */
.jobs-section {
    margin-bottom: 40px;
}

.coming-soon-jobs-section {
    margin-top: 60px;
}

/* --------------------------------------------------------------------------
   Section Headers
   -------------------------------------------------------------------------- */

/* Header container */
.coming-soon-jobs-section .jobs-section-header {
    margin-bottom: 30px;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

/* Section title */
.coming-soon-jobs-section .jobs-section-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 600;
}

/* Section description */
.coming-soon-jobs-section .jobs-section-description {
    margin-bottom: 0;
    color: #666;
}

/* --------------------------------------------------------------------------
   Load More Pagination
   -------------------------------------------------------------------------- */

/* Pagination container */
.coming-soon-jobs-section .mfhs-vanilla-pagination {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

/* Load more button - base styles */
.coming-soon-jobs-section .mfhs-vanilla-load-more {
    /* Layout */
    display: inline-block;
    min-width: 150px;
    padding: 25px 40px;
    margin: 0;
    
    /* Typography */
    text-align: center;
    font-family: inherit;
    font-size: 19px;
    color: #2E368F;
    font-weight: 600;
    text-decoration: none;
    
    /* Visual */
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
    
    /* Interactive */
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}

/* Button states */
.coming-soon-jobs-section .mfhs-vanilla-load-more:hover,
.coming-soon-jobs-section .mfhs-vanilla-load-more:focus {
    box-shadow: 0 3px 15px -5px rgba(0, 0, 0, 0.2);
    color: #B14FC5;
}

.coming-soon-jobs-section .mfhs-vanilla-load-more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Responsive Adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .coming-soon-jobs-section .mfhs-vanilla-load-more {
        padding: 15px 30px;
    }
}