/* =====================================================
   GPPC ZOOM & EDGE CASE FIXES
   Prevents layout issues at extreme zoom levels
   Ensures professional appearance in all scenarios
   ===================================================== */

/* ==================== NAVIGATION AT HIGH ZOOM ==================== */

/* Ensure navigation doesn't grow too large and cover content */
.nav,
.navbar {
    max-height: 25vh; /* Never take up more than 25% of viewport height */
    overflow: visible; /* Allow mobile dropdown menu to extend below */
}

/* At high zoom, make navigation more compact */
@media (max-width: 900px) {
    .nav-wrapper,
    .nav-container {
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }

    .logo-image {
        height: 32px !important;
        max-height: 32px !important;
    }

    .nav-menu {
        gap: var(--space-2); /* Tighter spacing */
        font-size: 0.95rem; /* Slightly smaller text */
    }
}

/* ==================== HERO SECTION CLEARANCE ==================== */

/* Add extra top padding to hero to prevent badge from being covered */
.hero {
    padding-top: calc(80px + var(--space-16)) !important; /* Navigation height + buffer */
}

@media (min-width: 768px) {
    .hero {
        padding-top: calc(90px + var(--space-20)) !important; /* More space on desktop */
    }
}

/* At high zoom, add even more space */
@media (max-width: 900px) {
    .hero {
        padding-top: calc(100px + var(--space-12)) !important; /* Generous clearance */
    }
}

/* ==================== HERO BADGE PROTECTION ==================== */

/* Ensure hero badge never gets covered by fixed navigation */
.hero-badge {
    margin-top: var(--space-8); /* Extra top margin */
    position: relative;
    z-index: 1; /* Above background, below nav */
}

/* At high zoom, make badge more compact but still visible */
@media (max-width: 900px) {
    .hero-badge {
        font-size: 0.85rem; /* Smaller text */
        padding: var(--space-1) var(--space-3); /* Tighter padding */
        margin-bottom: var(--space-4); /* Less bottom margin */
        white-space: nowrap; /* Prevent wrapping */
    }

    /* If viewport is VERY narrow (extreme zoom), hide badge gracefully */
    @media (max-width: 600px) {
        .hero-badge {
            font-size: 0.75rem;
            padding: 0.35rem 0.75rem;
        }
    }
}

/* ==================== HERO TITLE SIZING AT ZOOM ==================== */

/* Prevent hero title from being too large at high zoom */
.hero-title {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 900px) {
    .hero-title {
        font-size: clamp(2rem, 8vw, 4rem) !important; /* Fluid scaling */
        line-height: 1.3; /* Slightly taller for readability */
    }
}

@media (max-width: 600px) {
    .hero-title {
        font-size: clamp(1.4rem, 6.5vw, 2.5rem) !important;
    }
}

/* ==================== HERO SUBTITLE AT ZOOM ==================== */

.hero-subtitle {
    max-width: 90ch; /* Limit line length for readability */
}

@media (max-width: 900px) {
    .hero-subtitle {
        font-size: clamp(1rem, 4vw, 1.5rem) !important;
        line-height: 1.7;
    }
}

/* ==================== BUTTONS AT ZOOM ==================== */

/* Ensure CTAs remain usable and don't overflow */
.hero-cta {
    flex-wrap: wrap;
    max-width: 100%;
}

@media (max-width: 900px) {
    .hero-cta {
        flex-direction: column; /* Stack buttons vertically */
        width: 100%;
        align-items: stretch;
    }

    .hero-cta .btn {
        width: 100%; /* Full-width buttons */
        justify-content: center;
    }
}

/* ==================== STATS SECTION AT ZOOM ==================== */

/* Stats bar should spread evenly at all zoom levels */
.stats-grid,
.hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-4) !important;
}

@media (min-width: 768px) {
    .stats-grid,
    .hero-stats {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 900px) {
    .stat-item {
        padding: var(--space-3);
    }
}

/* ==================== LOGO RESPONSIVENESS ==================== */

/* Ensure logo never gets too large or too small */
.logo-image,
.nav-logo img {
    max-width: 100%;
    height: 50px !important;
    max-height: 50px !important;
    width: auto !important;
}

/* ==================== NAVIGATION OVERFLOW PROTECTION ==================== */

/* Prevent navigation items from disappearing or overflowing */
.nav-menu {
    flex-wrap: wrap;
    max-width: 100%;
    overflow: visible;
}

@media (max-width: 1100px) {
    .nav-menu {
        justify-content: flex-end;
        gap: var(--space-3);
    }
}

@media (max-width: 900px) {
    .nav-menu {
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-2);
        font-size: 0.95rem;
    }
}

/* ==================== SECTION SPACING AT ZOOM ==================== */

/* Prevent sections from being too cramped at high zoom */
.section {
    padding-top: clamp(2rem, 8vh, 6rem);
    padding-bottom: clamp(2rem, 8vh, 6rem);
}

.section-lg {
    padding-top: clamp(3rem, 10vh, 8rem);
    padding-bottom: clamp(3rem, 10vh, 8rem);
}

/* ==================== GRID LAYOUTS AT ZOOM ==================== */

/* Services and insights grids should reflow gracefully */
.services-grid,
.insights-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

@media (max-width: 900px) {
    .services-grid,
    .insights-grid {
        grid-template-columns: 1fr; /* Single column at high zoom */
        gap: var(--space-6);
    }
}

/* ==================== FOOTER AT ZOOM ==================== */

/* Footer should remain organized at high zoom */
.footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Stack footer columns */
        gap: var(--space-8);
    }
}

/* ==================== TEXT VISIBILITY AT ZOOM ==================== */

/* Ensure all text remains visible and doesn't overflow */
h1, h2, h3, h4, h5, h6 {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: none;
    -webkit-hyphens: none;
}

/* ==================== CONTAINER WIDTH AT ZOOM ==================== */

/* Containers should never cause horizontal scroll */
.container {
    max-width: 100%;
    padding-left: clamp(1rem, 3vw, 3rem);
    padding-right: clamp(1rem, 3vw, 3rem);
}

@media (max-width: 900px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ==================== FIXED ELEMENTS AT ZOOM ==================== */

/* Ensure fixed navigation doesn't grow too large */
.nav.fixed,
.navbar.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
}

/* Keep navbar fixed on all screen sizes for correct menu positioning */

/* ==================== LANGUAGE TOGGLE AT ZOOM ==================== */

/* Language toggle should remain accessible */
.language-toggle {
    flex-shrink: 0; /* Don't shrink */
    min-width: fit-content;
}

@media (max-width: 900px) {
    .language-toggle {
        font-size: 0.9rem;
    }
}

/* ==================== IMAGE SCALING AT ZOOM ==================== */

/* All hero images should scale appropriately */
.hero-background,
.hero-image,
.hero-gradient {
    width: 100%;
    height: auto;
    max-height: 100vh; /* Never taller than viewport */
    object-fit: cover;
}

/* ==================== SPACING UTILITIES ==================== */

/* Ensure spacing scales reasonably at zoom */
@media (max-width: 900px) {
    :root {
        --space-8: 1.5rem;
        --space-10: 2rem;
        --space-12: 2.5rem;
        --space-16: 3rem;
        --space-20: 3.5rem;
    }
}

/* ==================== PRINT STYLES ==================== */

/* Optimize for printing at any zoom level */
@media print {
    .hero {
        padding-top: 2rem !important;
    }

    .logo-image {
        height: 40px !important;
    }

    .nav,
    .navbar {
        position: static !important;
    }
}