/* Critical Above-the-Fold CSS - Minimal */

/* Font loading optimization to reduce CLS */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Inter'), local('Arial');
    size-adjust: 100%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
    font-display: swap;
}

/* CSS Custom Properties for H1 consistency */
:root {
    --h1-font-size: 2.5rem;
    --h1-line-height: 1.2;
    --h1-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* IMMEDIATE H1 font-size fix - highest priority with fallbacks */
h1, h1[role], h1[data-font-size] {
    font-size: var(--h1-font-size) !important;
    font-size: 2.5rem !important;
    line-height: var(--h1-line-height) !important;
    line-height: 1.2 !important;
    font-family: var(--h1-font-family) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-size-adjust: 0.5 !important;
    font-variant-numeric: normal !important;
    font-weight: 700 !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #fff;
    font-display: swap;
    /* Reduce layout shift with size-adjust */
    font-size: 16px;
    font-weight: 400;
}

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

/* Header & Navigation - Critical */
.header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* Prevent layout shift */
    contain: layout style;
    height: 80px; /* Reserve fixed height */
}

.nav {
    padding: 1rem 0;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo {
    height: 40px;
    width: auto;
}

.brand-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
}

.nav-phone {
    font-size: 1.1rem;
    font-weight: 600;
}

.phone-link {
    color: #e67e22;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-menu a {
    text-decoration: none;
    color: #2c3e50;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-cta {
    background: #e67e22;
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-weight: 600;
}

/* Hero Section - Critical */
.hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    margin-top: 80px;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 62, 80, 0.7);
    z-index: -1;
}

.hero-content {
    position: relative;
    color: white;
    text-align: center;
    z-index: 1;
    padding: 4rem 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.hero h1 {
    color: white;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    text-align: center !important;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    /* Prevent layout shift */
    contain: layout style;
    font-display: swap;
    /* Reserve space for text */
    min-height: 1.2em;
}

/* Fix deprecated API warning - explicit font-sizes for critical headings in semantic elements */
/* ULTRA-AGGRESSIVE approach to ensure H1 font-sizes are specified everywhere */

/* Maximum specificity targeting - covers ALL possible scenarios */
html body h1,
html body section h1,
html body article h1, 
html body aside h1, 
html body nav h1,
html body main section h1,
html body main article h1,
html body main aside h1,
html body header section h1,
html body footer section h1,
html body div section h1,
html body div article h1,
html body div aside h1,
html body div nav h1,
html body .intro h1,
html body .services-overview h1,
html body .hero h1,
html body .hero-content h1,
html body section.intro h1,
html body section.services-overview h1,
html body section.hero h1,
html body main section.intro h1,
html body main section.services-overview h1,
html body main section.hero h1 {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Fallback class-based selectors */
.intro h1, 
.services-overview h1,
.hero h1,
.hero-content h1,
section.intro h1,
section.services-overview h1,
section.hero h1 {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Wildcard approach for any missed combinations */
section h1[class],
section h1:not([style*="font-size"]),
article h1[class],
article h1:not([style*="font-size"]),
aside h1[class], 
aside h1:not([style*="font-size"]),
nav h1[class],
nav h1:not([style*="font-size"]) {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

section h2, 
article h2, 
aside h2, 
nav h2,
main section h2,
main article h2,
main aside h2 {
    font-size: 2rem !important;
}

section h3, 
article h3, 
aside h3, 
nav h3,
main section h3,
main article h3,
main aside h3 {
    font-size: 1.5rem !important;
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #ecf0f1;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

/* Buttons - Critical */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: #e67e22;
    color: white;
    border-color: #e67e22;
}

.btn-secondary {
    background: transparent;
    color: #3498db;
    border-color: #3498db;
}

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

/* Mobile nav toggle - Critical */
.nav-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1rem;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1001;
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: #2c3e50;
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }
    
    .nav-phone {
        display: none;
    }
    
    .hero h1 {
        font-size: 2rem;
        text-align: center !important;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        text-align: center !important;
    }
    
    .hero-cta {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.8rem;
        text-align: center !important;
    }
}