/* Global Layout Styles - Consistent Margins and Full Width */
/* This file ensures all pages have uniform left-right margins and use full width properly */

/* Reset and Base Styles */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: 'Arial', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* Page Container - Consistent Margins */
.page-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Content Wrapper - Consistent Left-Right Margins */
.content-wrapper {
    width: 100%;
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
    margin: 0 auto;
}

/* Responsive Margins */
@media (max-width: 768px) {
    .content-wrapper {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .content-wrapper {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1025px) {
    .content-wrapper {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Full Width Sections */
.full-width-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
}

/* Section Containers */
.section-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* Main Content Area */
.main-content {
    width: 100%;
    max-width: 100%;
    flex: 1;
}

/* Grid Layouts */
.grid-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* Card Layouts */
.card-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* Form Layouts */
.form-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* Utility Classes */
.w-full {
    width: 100%;
}

.max-w-full {
    max-width: 100%;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Container Override */
.container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* Ensure all sections use full width */
section, .section, .page-section {
    width: 100%;
    max-width: 100%;
}

/* Hero sections */
.hero-section, .hero, .page-hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Navigation sections */
.nav-section, .navigation, .menu-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Footer sections */
.footer-section, .footer-content {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Print styles */
@media print {
    .full-width-section {
        width: 100% !important;
        margin: 0 !important;
    }
    
    .content-wrapper {
        padding: 0 !important;
    }
}