/* ========================================
   SITE BASE STYLES - GLOBAL CONSISTENCY
   Applied to ALL pages for uniform alignment
   ======================================== */

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #faf9f7;
    color: #1a1a1a;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    padding-top: 80px !important;
    min-height: 100vh;
    text-align: left;
    overflow-x: hidden;
}

/* ===========================================
   CONSISTENT PAGE LAYOUT - FORCE ALL PAGES
   =========================================== */

/* All direct body children should be full width and centered */
body > section,
body > main,
body > article,
body > div:not(.site-header):not(.site-footer):not(#site-header):not(#site-footer) {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Standard content container - targets common patterns */
section > div,
main > div,
article > div,
.hero > div,
.hero-section > div,
.page-hero > div,
.content-section > div {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Specific page containers */
.about-main,
.services-main,
.contact-main,
.projects-main,
.insights-main,
.resources-main,
.page-content,
.main-content,
.content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Fix calculator pages */
.calculator-container,
.calc-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
}

/* ===========================================
   HEADER SPACE - ENSURE CONTENT NOT HIDDEN
   =========================================== */
body > *:first-child:not(.site-header):not(#site-header) {
    margin-top: 0;
}

/* ===========================================
   CONSISTENT SECTION STYLING
   =========================================== */
section {
    width: 100%;
    padding: 3rem 0;
}

/* Hero sections */
.hero,
.hero-section,
.page-hero,
[class*="hero"] {
    width: 100%;
    text-align: left;
}

/* ===========================================
   IMAGES - PREVENT OVERFLOW
   =========================================== */
img {
    max-width: 100%;
    height: auto;
}

/* ===========================================
   LINKS
   =========================================== */
a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    opacity: 0.85;
}

/* ===========================================
   TYPOGRAPHY CONSISTENCY
   =========================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.2;
    margin-top: 0;
}

p {
    margin-top: 0;
}

/* ===========================================
   BUTTONS
   =========================================== */
.btn, 
button, 
[type="submit"],
.button {
    cursor: pointer;
    font-family: inherit;
    display: inline-block;
}

/* ===========================================
   FORMS
   =========================================== */
form {
    text-align: left;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* ===========================================
   GRIDS - COMMON PATTERNS
   =========================================== */
.grid,
[class*="-grid"],
[class*="grid-"] {
    display: grid;
    gap: 2rem;
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.mx-auto { margin-left: auto; margin-right: auto; }
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1024px) {
    section > div,
    main > div,
    .about-main,
    .services-main,
    .contact-main,
    .projects-main,
    .page-content,
    .main-content,
    .content-wrapper,
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: 70px !important;
    }
    
    section > div,
    main > div,
    .about-main,
    .services-main,
    .contact-main,
    .projects-main,
    .page-content,
    .main-content,
    .content-wrapper,
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    section {
        padding: 2rem 0;
    }
}