/**
 * EAAS Theme - Layout Width Styles
 *
 * @package    EAAS
 * @version    2.5
 * @author     Rodolphe
 * @link       https://enaccordavecsoi.fr
 * @file       layout-width.css
 */

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

main.site-content,
.site-content {
    flex: 1 0 auto;
    width: 100%;
}

.site-footer {
    flex-shrink: 0;
    width: 100%;
}

/* Container Global */
.container,
.content-wrapper {
    width: var(--container-width, 90%) !important;
    max-width: var(--container-width, 90%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--container-padding, 20px);
    padding-right: var(--container-padding, 20px);
    padding-top: var(--section-padding, 60px) !important;
    padding-bottom: var(--section-padding, 60px) !important;
}

/* When Elementor controls the page, let it handle its own layout */
.elementor-page .content-wrapper,
.elementor-page .page-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Elementor Overrides — ancien système (sections) */
.elementor-section .elementor-container,
.elementor-container {
    width: var(--container-width, 90%) !important;
    max-width: var(--container-width, 90%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--container-padding, 30px) !important;
    padding-right: var(--container-padding, 30px) !important;
}

/* Elementor Overrides — nouveau système (Flexbox containers e-con) */
.e-con {
    --container-max-width: var(--container-width, 90%) !important;
    max-width: var(--container-width, 90%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.e-con.e-con-boxed > .e-con-inner {
    max-width: var(--container-width, 90%) !important;
    margin-left: auto;
    margin-right: auto;
}

/* Specific fix for homepage if using page.php */
.home .content-wrapper,
.home .page-wrapper,
.page:not(.elementor-page) .content-wrapper,
.page:not(.elementor-page) .page-wrapper {
    width: var(--container-width, 90%) !important;
    max-width: var(--container-width, 90%) !important;
}

/* Responsive Breakpoints */

/* Tablet Landscape (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .container,
    .content-wrapper {
        max-width: var(--container-width-tablet, 960px);
        padding-left: var(--container-padding-tablet-landscape, 20px);
        padding-right: var(--container-padding-tablet-landscape, 20px);
    }
}

/* Tablet Portrait (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .container,
    .content-wrapper {
        max-width: var(--container-width-tablet, 720px);
        padding-left: var(--container-padding-tablet, 15px);
        padding-right: var(--container-padding-tablet, 15px);
    }
    
    .content-wrapper.narrow,
    .entry-content {
        max-width: var(--content-width-tablet, 100%);
    }
}

/* Mobile (max 767px) */
@media (max-width: 767px) {
    .container,
    .content-wrapper {
        max-width: var(--container-width-mobile, 100%);
        padding-left: var(--container-padding-mobile, 15px);
        padding-right: var(--container-padding-mobile, 15px);
    }

    .content-wrapper.narrow,
    .entry-content {
        max-width: var(--content-width-mobile, 100%);
    }
    
    /* Ensure images don't overflow */
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }

    /* Prevent horizontal scroll */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
    .container,
    .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px;
        padding-right: 12px;
        padding-top: var(--section-padding-mobile-sm, 30px) !important;
        padding-bottom: var(--section-padding-mobile-sm, 30px) !important;
    }

    /* Elementor small screen override */
    .elementor-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Very Small Mobile (max 360px) */
@media (max-width: 360px) {
    .container,
    .content-wrapper {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .elementor-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ======================================================================
   EAAS — Desktop-wide adjustments for all EAAS page wrappers & hero grids
   Applied globally so individual page styles don't need manual edits.
   ====================================================================== */
@media (min-width: 1200px) {
    .eaas-home-wrapper,
    .eaas-entre-wrapper,
    .eaas-real-wrapper,
    .eaas-legal-wrapper,
    .eaas-contact-wrapper,
    .eaas-about-wrapper,
    .eaas-realisations-wrapper,
    .eaas-realisations-wrapper {
        max-width: 1200px !important;
    }

    /* Slightly widen hero main column to reduce narrow feeling on desktop */
    .eaas-home-hero,
    .eaas-entre-hero,
    .eaas-real-hero,
    .eaas-legal-hero,
    .eaas-about-hero {
        grid-template-columns: 1.3fr 1fr;
        gap: var(--spacing-3xl);
        align-items: center;
    }
}