/* ============================================
   Universal Responsive Headers for All Pages
   Zoom-Level Optimized Typography System
   ============================================ */

/* Universal Hero Section Responsive Improvements */
.services-hero-section,
.about-hero-section,
.contact-hero-section,
.blog-hero-section,
.blog-detail-hero-section {
    padding: clamp(60px, 8vh, 80px) clamp(15px, 5vw, 30px) clamp(40px, 6vh, 60px);
    box-sizing: border-box;
}

/* Universal Container Adjustments */
.services-hero-section .container,
.about-hero-section .container,
.contact-hero-section .container,
.blog-hero-section .container,
.blog-detail-hero-section .container {
    max-width: 100%;
    padding-left: clamp(15px, 5vw, 30px);
    padding-right: clamp(15px, 5vw, 30px);
}

/* Universal Row Adjustments */
.services-hero-section .row,
.about-hero-section .row,
.contact-hero-section .row,
.blog-hero-section .row,
.blog-detail-hero-section .row {
    margin-left: 0;
    margin-right: 0;
    align-items: center;
    min-height: auto;
}

/* Zoom-specific responsive breakpoints for ALL pages */
@media screen and (min-width: 1200px) and (max-width: 1400px) {
    .services-hero-title,
    .about-hero-title,
    .contact-hero-title,
    .blog-hero-title,
    .article-title {
        font-size: clamp(2.2rem, 4.8vw, 2.8rem); /* Reduced header size */
        line-height: 1.1;
    }
    
    .services-hero-description,
    .services-hero-subtitle,
    .about-hero-description,
    .about-hero-subtitle,
    .contact-hero-description,
    .blog-hero-description,
    .article-excerpt {
        font-size: clamp(1rem, 2.2vw, 1.1rem);
    }
}

@media screen and (min-width: 1400px) and (max-width: 1600px) {
    .services-hero-title,
    .about-hero-title,
    .contact-hero-title,
    .blog-hero-title,
    .article-title {
        font-size: clamp(2.4rem, 5.2vw, 3rem); /* Reduced header size */
    }
    
    .services-hero-description,
    .services-hero-subtitle,
    .about-hero-description,
    .about-hero-subtitle,
    .contact-hero-description,
    .blog-hero-description,
    .article-excerpt {
        font-size: clamp(1.05rem, 2.3vw, 1.15rem);
    }
}

/* High zoom levels (110%+) - Universal fixes */
@media screen and (max-width: 1200px) {
    .services-hero-title,
    .about-hero-title,
    .contact-hero-title,
    .blog-hero-title,
    .article-title {
        font-size: clamp(1.6rem, 4vw, 2.4rem); /* Reduced header size */
        line-height: 1.1;
        margin-bottom: 1rem;
    }
    
    .services-hero-description,
    .services-hero-subtitle,
    .about-hero-description,
    .about-hero-subtitle,
    .contact-hero-description,
    .blog-hero-description,
    .article-excerpt {
        font-size: clamp(0.9rem, 2.2vw, 1.1rem);
        margin-bottom: 1.5rem;
    }
    
    /* Button adjustments for zoom levels */
    .services-hero-buttons,
    .about-hero-buttons {
        gap: clamp(0.8rem, 2vw, 1.2rem);
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .services-primary-btn,
    .services-secondary-btn,
    .about-primary-btn,
    .about-secondary-btn {
        padding: clamp(10px, 2vw, 14px) clamp(20px, 4vw, 28px);
        font-size: clamp(0.85rem, 1.8vw, 1rem);
        min-width: clamp(140px, 25vw, 180px);
    }
}

/* Mobile responsive improvements */
@media (max-width: 768px) {
    .services-hero-section,
    .about-hero-section,
    .contact-hero-section,
    .blog-hero-section {
        padding: clamp(80px, 12vh, 100px) clamp(15px, 5vw, 25px) clamp(40px, 8vh, 60px);
        min-height: auto;
    }
    
    .services-hero-title,
    .about-hero-title,
    .contact-hero-title,
    .blog-hero-title {
        font-size: clamp(1.6rem, 5.5vw, 2.2rem); /* Reduced header size */
        text-align: center;
        margin-bottom: 1rem;
    }
    
    .services-hero-description,
    .services-hero-subtitle,
    .about-hero-description,
    .about-hero-subtitle,
    .contact-hero-description,
    .blog-hero-description {
        font-size: clamp(0.95rem, 3vw, 1.1rem);
        text-align: center;
        margin-bottom: 1.5rem;
    }
    
    .services-hero-buttons,
    .about-hero-buttons {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .services-primary-btn,
    .services-secondary-btn,
    .about-primary-btn,
    .about-secondary-btn {
        width: auto;
        min-width: clamp(200px, 60vw, 280px);
        max-width: 300px;
        text-align: center;
    }
}

/* Small mobile devices */
@media (max-width: 576px) {
    .services-hero-title,
    .about-hero-title,
    .contact-hero-title,
    .blog-hero-title {
        font-size: clamp(1.4rem, 6vw, 1.9rem); /* Reduced header size */
        line-height: 1.2;
    }
    
    .services-hero-description,
    .services-hero-subtitle,
    .about-hero-description,
    .about-hero-subtitle,
    .contact-hero-description,
    .blog-hero-description {
        font-size: clamp(0.9rem, 3.5vw, 1rem);
    }
    
    .services-badge-text,
    .about-badge-text,
    .contact-badge-text,
    .blog-badge-text {
        font-size: clamp(0.75rem, 2.5vw, 0.85rem);
        padding: clamp(6px, 2vw, 8px) clamp(12px, 3vw, 15px);
    }
}

/* Extra responsive improvements for very high zoom levels */
@media screen and (max-width: 992px) {
    .services-hero-content,
    .about-hero-content,
    .contact-hero-content,
    .blog-hero-content {
        padding: clamp(10px, 3vh, 15px) 0;
        max-width: 100%;
        overflow-wrap: break-word;
    }
    
    /* Ensure badges are responsive */
    .services-hero-badge,
    .about-hero-badge,
    .contact-hero-badge,
    .blog-hero-badge {
        margin-bottom: clamp(1rem, 3vh, 1.5rem);
    }
}

/* Performance optimizations */
.services-hero-title,
.about-hero-title,
.contact-hero-title,
.blog-hero-title,
.services-hero-description,
.services-hero-subtitle,
.about-hero-description,
.about-hero-subtitle,
.contact-hero-description,
.blog-hero-description {
    will-change: font-size;
    transition: font-size 0.2s ease;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .services-hero-title,
    .about-hero-title,
    .contact-hero-title,
    .blog-hero-title,
    .services-hero-description,
    .services-hero-subtitle,
    .about-hero-description,
    .about-hero-subtitle,
    .contact-hero-description,
    .blog-hero-description {
        transition: none;
    }
}