/**
 * Mobile Header Overlap Fix
 * Fixes the issue where fixed header overlaps content on mobile devices
 * Ensures all content is properly centered and spaced on mobile
 */

/* ============================================
   Mobile Header Height Calculation
   ============================================ */

/* Calculate header height on mobile - navbar has 20px top/bottom padding + content */
@media (max-width: 767px) {
    /* Ensure header has proper height calculation */
    .navbar-expand {
        min-height: 70px;
        box-sizing: border-box;
    }
    
    /* Add padding-top to body or main to account for fixed header */
    body {
        padding-top: 0 !important;
    }
    
    .main {
        padding-top: 0 !important;
    }
    
    /* Fix welcome-area - the first section after header */
    .welcome-area {
        padding-top: 100px !important;
        margin-top: 0 !important;
        min-height: calc(100vh - 100px) !important;
        display: flex !important;
        align-items: center !important; /* Keep center but with proper padding */
        padding-bottom: 40px !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    /* Override any inline styles that might interfere */
    .welcome-area[style*="padding-top"] {
        padding-top: 100px !important;
    }
    
    /* Ensure welcome-area content is properly aligned and doesn't overlap */
    .welcome-area .container {
        padding-top: 0 !important;
        width: 100% !important;
        margin-top: 0 !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    .welcome-area .row {
        margin-top: 0 !important;
        align-items: center !important;
    }
    
    /* Fix flexbox alignment for welcome intro */
    .welcome-intro {
        margin-top: 0 !important;
        text-align: center !important;
        padding-top: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* Ensure h1 in welcome area is visible */
    .welcome-intro h1 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Fix for all sections that come after header */
    section:first-of-type,
    .section:first-of-type {
        padding-top: 100px !important;
    }
    
    /* Ensure content is centered horizontally */
    .container {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Center text content */
    .welcome-intro,
    .welcome-intro h1,
    .welcome-intro p {
        text-align: center !important;
    }
    
    /* Center buttons */
    .button-group {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

/* Smaller mobile devices */
@media (max-width: 575px) {
    .navbar-expand {
        min-height: 65px;
    }
    
    .welcome-area {
        padding-top: 90px !important;
        min-height: calc(100vh - 90px) !important;
    }
    
    section:first-of-type,
    .section:first-of-type {
        padding-top: 90px !important;
    }
}

/* Extra small devices */
@media (max-width: 375px) {
    .navbar-expand {
        min-height: 60px;
        padding: 15px 20px !important;
    }
    
    .welcome-area {
        padding-top: 85px !important;
        min-height: calc(100vh - 85px) !important;
    }
    
    section:first-of-type,
    .section:first-of-type {
        padding-top: 85px !important;
    }
}

/* ============================================
   Content Centering on Mobile
   ============================================ */

@media (max-width: 767px) {
    /* Center all text content */
    h1, h2, h3, h4, h5, h6 {
        text-align: center !important;
    }
    
    /* Center section headings */
    .section-heading {
        text-align: center !important;
    }
    
    .section-heading h2,
    .section-heading h3 {
        text-align: center !important;
    }
    
    /* Center paragraphs in welcome area */
    .welcome-intro p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }
    
    /* Center container content */
    .container {
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .container > .row {
        justify-content: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Center cards and items */
    .single-service,
    .single-promo,
    .single-case-studies,
    .single-review {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Center columns only for welcome area and key sections */
    .welcome-area [class*="col-"],
    .section-heading [class*="col-"] {
        text-align: center !important;
    }
    
    /* Center images in welcome area */
    .welcome-area img {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
    
    /* Center buttons */
    .btn {
        margin-left: auto !important;
        margin-right: auto !important;
        display: inline-block !important;
    }
    
    .button-group {
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ============================================
   Fix for Other Pages (About, Services, etc.)
   ============================================ */

@media (max-width: 767px) {
    /* Breadcrumb area - if it exists */
    .breadcrumb-area {
        padding-top: 100px !important;
    }
    
    /* Inner pages welcome area */
    .inner .welcome-area {
        padding-top: 100px !important;
    }
    
    /* Any section that starts the page */
    body > .main > section:first-child,
    body > .main > .section:first-child {
        padding-top: 100px !important;
    }
}

/* ============================================
   Ensure No Content Overlap
   ============================================ */

@media (max-width: 767px) {
    /* Prevent any element from going under header */
    header,
    .navbar-expand {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
    }
    
    /* Ensure main content starts below header */
    .main {
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* First section must have padding */
    .main > section:first-child,
    .main > .section:first-child {
        padding-top: 100px !important;
    }
}

/* ============================================
   Landscape Orientation Fix
   ============================================ */

@media (max-width: 767px) and (orientation: landscape) {
    .welcome-area {
        padding-top: 80px !important;
        min-height: auto !important;
    }
    
    section:first-of-type,
    .section:first-of-type {
        padding-top: 80px !important;
    }
}