/* Background Constraints CSS - Apply to all public pages */
/* Constrains header, hero sections, and footer backgrounds to content width + 10px padding */

@media (min-width: 992px) {
    /* Header: Constrain background to content width + 10px */
    header.bg-primary {
        background: transparent !important;
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }
    
    header.bg-primary .container {
        position: relative;
        background: #0d6efd !important;
        max-width: calc(1140px + 20px); /* Bootstrap container + 10px each side */
        margin: 0 auto;
        padding: 1rem 1.5rem;
    }
    
    /* Hero sections: Constrain background to content width + 10px */
    .hero-section.bg-light {
        background: transparent !important;
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }
    
    .hero-section.bg-light .container {
        position: relative;
        background: #f8f9fa !important;
        max-width: calc(1140px + 20px);
        margin: 0 auto;
        padding: 3rem 1.5rem;
    }
    
    .job-details-header.bg-gradient-primary {
        background: transparent !important;
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }
    
    .job-details-header.bg-gradient-primary .container {
        position: relative;
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
        max-width: calc(1140px + 20px);
        margin: 0 auto;
        padding: 3rem 1.5rem;
    }
    
    /* Footer: Constrain background to content width + 10px */
    footer.bg-dark {
        background: transparent !important;
        display: flex;
        justify-content: center;
        padding: 0 !important;
        margin-top: 0 !important;
    }
    
    footer.bg-dark .container {
        position: relative;
        background: #212529 !important;
        max-width: calc(1140px + 20px);
        margin: 0 auto;
        padding: 3rem 1.5rem;
        margin-top: 3rem;
    }
    
    /* Breadcrumb: Constrain background to content width + 10px */
    nav[aria-label="breadcrumb"].bg-light {
        background: transparent !important;
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }
    
    nav[aria-label="breadcrumb"].bg-light .container {
        position: relative;
        background: #f8f9fa !important;
        max-width: calc(1140px + 20px);
        margin: 0 auto;
        padding: 0.5rem 1.5rem;
    }
    
    /* Additional hero section variants */
    section.bg-primary {
        background: transparent !important;
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }
    
    section.bg-primary .container {
        position: relative;
        background: #0d6efd !important;
        max-width: calc(1140px + 20px);
        margin: 0 auto;
        padding: 3rem 1.5rem;
    }
    
    section.bg-secondary {
        background: transparent !important;
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }
    
    section.bg-secondary .container {
        position: relative;
        background: #6c757d !important;
        max-width: calc(1140px + 20px);
        margin: 0 auto;
        padding: 3rem 1.5rem;
    }
    
    section.bg-info {
        background: transparent !important;
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }
    
    section.bg-info .container {
        position: relative;
        background: #0dcaf0 !important;
        max-width: calc(1140px + 20px);
        margin: 0 auto;
        padding: 3rem 1.5rem;
    }
    
    section.bg-success {
        background: transparent !important;
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }
    
    section.bg-success .container {
        position: relative;
        background: #198754 !important;
        max-width: calc(1140px + 20px);
        margin: 0 auto;
        padding: 3rem 1.5rem;
    }
    
    section.bg-warning {
        background: transparent !important;
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }
    
    section.bg-warning .container {
        position: relative;
        background: #ffc107 !important;
        max-width: calc(1140px + 20px);
        margin: 0 auto;
        padding: 3rem 1.5rem;
    }
    
    section.bg-danger {
        background: transparent !important;
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }
    
    section.bg-danger .container {
        position: relative;
        background: #dc3545 !important;
        max-width: calc(1140px + 20px);
        margin: 0 auto;
        padding: 3rem 1.5rem;
    }
    
    /* Custom page headers used in tool pages */
    .page-header {
        background: transparent !important;
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }
    
    .page-header .container {
        position: relative;
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
        max-width: calc(1140px + 20px);
        margin: 0 auto;
        padding: 2.5rem 1.5rem;
    }
}