/* Content Spacing CSS - Frontend Layout */
/* Add left and right gaps on all frontend pages */

/* Apply padding to all container elements (except hero sections, header, footer) */
section:not(.hero) .container,
section:not(.hero) .container-fluid,
section:not(.hero) > .container,
section:not(.hero) > .container-fluid,
.container:not(.hero .container):not(header .container):not(footer .container),
.container-fluid:not(.hero .container-fluid):not(header .container-fluid):not(footer .container-fluid) {
    padding-left: 60px !important;
    padding-right: 60px !important;
}

/* Apply padding to main content areas */
main .container,
main .container-fluid,
.content .container,
.content .container-fluid,
.page-content .container,
.page-content .container-fluid {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* Apply padding to sections directly (if they don't have container) */
section:not(.hero):not(header):not(footer) {
    padding-left: 30px;
    padding-right: 30px;
}

/* Ensure hero sections maintain full width - minimal padding */
section.hero,
.hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

section.hero .container,
section.hero .container-fluid,
.hero .container,
.hero .container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Ensure header and footer maintain full width */
header,
footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

header .container,
header .container-fluid,
footer .container,
footer .container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Responsive padding for tablets */
@media (max-width: 1200px) {
    section:not(.hero) .container,
    section:not(.hero) .container-fluid,
    section:not(.hero) > .container,
    section:not(.hero) > .container-fluid,
    .container:not(.hero .container):not(header .container):not(footer .container),
    .container-fluid:not(.hero .container-fluid):not(header .container-fluid):not(footer .container-fluid),
    main .container,
    main .container-fluid,
    .content .container,
    .content .container-fluid,
    .page-content .container,
    .page-content .container-fluid {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
    
    section:not(.hero):not(header):not(footer) {
        padding-left: 25px;
        padding-right: 25px;
    }
}

/* Responsive padding for mobile devices */
@media (max-width: 768px) {
    section:not(.hero) .container,
    section:not(.hero) .container-fluid,
    section:not(.hero) > .container,
    section:not(.hero) > .container-fluid,
    .container:not(.hero .container):not(header .container):not(footer .container),
    .container-fluid:not(.hero .container-fluid):not(header .container-fluid):not(footer .container-fluid),
    main .container,
    main .container-fluid,
    .content .container,
    .content .container-fluid,
    .page-content .container,
    .page-content .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    section:not(.hero):not(header):not(footer) {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    section.hero .container,
    section.hero .container-fluid,
    .hero .container,
    .hero .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 480px) {
    section:not(.hero) .container,
    section:not(.hero) .container-fluid,
    section:not(.hero) > .container,
    section:not(.hero) > .container-fluid,
    .container:not(.hero .container):not(header .container):not(footer .container),
    .container-fluid:not(.hero .container-fluid):not(header .container-fluid):not(footer .container-fluid),
    main .container,
    main .container-fluid,
    .content .container,
    .content .container-fluid,
    .page-content .container,
    .page-content .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    section:not(.hero):not(header):not(footer) {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    section.hero .container,
    section.hero .container-fluid,
    .hero .container,
    .hero .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}