/* ===================================
   GLOBAL ALIGNMENT AND CENTERING FIXES
   For AI Advisor Lab Website
   =================================== */

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

html {
    scroll-behavior: smooth;
    overflow-x: auto;  /* Changed from hidden to auto for force-desktop compatibility */
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: auto;  /* Changed from hidden to auto */
    width: 100%;
    min-width: 1200px;  /* Ensure minimum width for desktop view */
    position: relative;
}

/* Container System for Proper Centering */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Section Defaults */
section {
    width: 100%;
    min-width: 1200px;
    margin: 0 auto;
    overflow-x: visible;
    position: relative;
    display: block;
}

/* Main Content Area */
main,
.main-content {
    width: 100%;
    min-width: 1200px;
    margin: 0 auto;
}

/* Hero Sections */
.hero,
.hero-section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.hero-content {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* Content Sections */
.content,
.section-content,
.page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    width: 100%;
}

/* CTA Sections */
.cta,
.final-cta,
.cta-section {
    width: 100%;
    min-width: 1200px;
    text-align: center;
    padding: 60px 20px;
    margin: 0 auto;
    display: block;
    position: relative;
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Forms */
form,
.form-container {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
}

/* Cards and Grid Items */
.card,
.grid-item {
    width: 100%;
    margin: 0 auto;
}

/* Text Content */
.text-content,
article {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
nav,
.navigation,
.navbar,
.nav {
    width: 100%;
    min-width: 1200px;
    display: flex;
    justify-content: center;
}

.nav-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/* Footer */
footer,
.footer {
    width: 100%;
    min-width: 1200px;
    margin: 0 auto;
    display: block;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

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

.w-full {
    width: 100%;
}

/* Fix for Specific Sections */
.who-we-serve-cta,
.section-cta {
    max-width: 800px;
    margin: 40px auto;
    text-align: center;
    padding: 0 20px;
}

/* Responsive Design */
@media (max-width: 1440px) {
    .container,
    .nav-container,
    .footer-container {
        max-width: 1200px;
    }
}

@media (max-width: 1200px) {
    .container,
    .nav-container,
    .footer-container,
    .hero-content,
    .section-content {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .container,
    .nav-container,
    .footer-container,
    .hero-content,
    .section-content {
        max-width: 720px;
    }
}

@media (max-width: 768px) {
    .container,
    .nav-container,
    .footer-container,
    .hero-content,
    .section-content {
        padding: 0 15px;
    }
    
    .content,
    .section-content,
    .page-content {
        padding: 30px 15px;
    }
    
    .cta,
    .final-cta,
    .cta-section {
        padding: 40px 15px;
    }
}

@media (max-width: 576px) {
    .container,
    .nav-container,
    .footer-container,
    .hero-content,
    .section-content {
        padding: 0 10px;
    }
}

/* Prevent Horizontal Scroll */
@media screen and (max-width: 100vw) {
    body,
    html {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* Fix for elements that might break layout */
img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}

pre,
code {
    overflow-x: auto;
    max-width: 100%;
}

table {
    overflow-x: auto;
    display: block;
    max-width: 100%;
}