/* ================================
   CRITICAL MOBILE FIXES
   Footer & Hero Video - November 17, 2025
   ================================ */

/* ========== GLOBAL: HIDE LEGAL LINKS ========== */
/* Hide Privacy Policy, Terms of Service, Sitemap on ALL screens */
.legal-links {
    display: none !important;
}

/* ========== DESKTOP: REMOVE PURPLE GRADIENT ========== */
/* Override the purple gradient from fixes-professional-updated.css */
/* Desktop should have minimal overlay to show the video clearly */

/* Default for all screens - very light overlay */
.video-overlay {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.08) 0%,
        rgba(0, 0, 0, 0.05) 60%,
        rgba(0, 0, 0, 0.03) 100%
    ) !important;
}

/* Desktop specific - ensure it stays light */
@media (min-width: 769px) {
    .video-overlay {
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.05) 60%,
            rgba(0, 0, 0, 0.03) 100%
        ) !important;
    }
}

/* ========== FOOTER MOBILE REFINEMENTS ========== */

@media (max-width: 768px) {
    /* Force footer to be responsive */
    .footer {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .footer .container {
        padding: 0.5rem 1rem 0 !important;
        max-width: 100% !important;
    }
    
    /* Override inline style: grid-template-columns: 1.5fr 2.5fr */
    .footer-main-grid {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Override inline style: grid-template-columns: repeat(4, 1fr) */
    .footer-columns-grid {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
    }
    
    /* Make all footer columns stack vertically */
    .footer-column {
        width: 100% !important;
        margin-bottom: 0.4rem !important;
        padding: 0 !important;
        text-align: center !important;
    }
    
    .footer-brand {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 0.4rem !important;
        text-align: center !important;
    }
    
    /* Center footer logo on mobile */
    .footer-logo {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 1rem !important;
    }
    
    .footer-logo-img {
        max-width: 100px !important;
        height: auto !important;
    }
    
    /* Center footer description */
    .footer-description {
        text-align: center !important;
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
        margin: 0 auto !important;
        max-width: 90% !important;
    }
    
    /* Center trust badge */
    .footer-trust {
        display: flex !important;
        justify-content: center !important;
        margin: 0.5rem 0 !important;
    }
    
    /* Center social links */
    .social-links {
        justify-content: center !important;
        gap: 0.75rem !important;
    }
    
    /* Footer column headings - CENTERED */
    .footer-column h4,
    .footer h4 {
        font-size: 0.95rem !important;
        margin-bottom: 0.3rem !important;
        padding-bottom: 0.15rem !important;
        text-align: center !important;
    }
    
    /* Footer links - CENTERED */
    .footer-column ul,
    .footer ul {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        text-align: center !important;
    }
    
    .footer-column li,
    .footer li {
        margin-bottom: 0.3rem !important;
        text-align: center !important;
    }
    
    .footer-column a,
    .footer a {
        font-size: 0.8rem !important;
        display: inline-block !important;
        padding: 0.15rem 0 !important;
        text-align: center !important;
    }
    
    /* Contact info in footer - CENTERED */
    .contact-info {
        gap: 0.3rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .contact-item {
        font-size: 0.8rem !important;
        gap: 0.3rem !important;
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* Footer bottom section */
    .footer-bottom {
        padding: 0.5rem 0 0.4rem !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    .footer-legal {
        flex-direction: column !important;
        gap: 0.3rem !important;
        text-align: center !important;
    }
    
    .footer-legal p {
        font-size: 0.65rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .footer .container {
        padding: 0.3rem 1rem 0.3rem !important;
    }
    
    .footer-logo-img {
        max-width: 80px !important;
    }

    .footer-description {
        font-size: 0.7rem !important;
    }

    .footer h4 {
        font-size: 0.85rem !important;
        margin-bottom: 0.25rem !important;
    }

    .footer a,
    .footer-column a {
        font-size: 0.75rem !important;
    }

    .social-link {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
    }

    .trust-badge {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.7rem !important;
    }
    
    .footer-column {
        margin-bottom: 0.3rem !important;
    }
    
    .footer-bottom {
        padding: 0.3rem 0 0.25rem !important;
    }
}/* ========== ROOT CAUSE #2: HERO VIDEO NOT FULL SCREEN ON MOBILE ========== */

/* The hero video needs proper positioning and sizing on mobile */
.hero-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: -1 !important;
}

/* Desktop: Very light overlay (almost transparent) - REMOVED, see top of file */

@media (max-width: 768px) {
    /* Ensure hero takes full viewport */
    .hero {
        min-height: 100vh !important;
        min-height: 100dvh !important; /* Dynamic viewport height for mobile */
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Push hero content below navbar on mobile only */
    .hero-content {
        padding-top: 100px !important; /* Navbar height (80px) + spacing */
        padding-bottom: 2rem !important;
    }
    
    .hero-text {
        margin-top: 0 !important;
    }
    
    /* Video must cover entire hero on mobile */
    .hero-video {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        min-width: 100% !important;
        min-height: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        z-index: 0 !important;
    }
    
    /* Ensure video covers portrait mode */
    @supports (aspect-ratio: 16 / 9) {
        .hero-video {
            width: 100vw !important;
            height: 100vh !important;
            object-fit: cover !important;
        }
    }
    
    /* Lighter overlay to preserve video vibrancy */
    .video-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.03) 50%,
            rgba(0, 0, 0, 0.02) 100%
        ) !important;
        z-index: 1 !important;
    }
    
    /* Hero content above video */
    .hero-content {
        position: relative !important;
        z-index: 3 !important;
        padding: 2rem 1rem !important;
        padding-top: 100px !important; /* Clear navbar */
    }
    
    /* Ensure stats are visible on mobile */
    .hero-stats {
        position: relative !important;
        z-index: 4 !important;
        color: white !important;
    }
    
    .hero-stats .stat {
        position: relative !important;
        z-index: 4 !important;
    }
    
    .hero-stats .stat-number {
        color: var(--accent-gold) !important;
        position: relative !important;
        z-index: 4 !important;
    }
    
    .hero-stats .stat-label {
        color: white !important;
        position: relative !important;
        z-index: 4 !important;
    }
    
    /* Hero background elements */
    .hero-background {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 0 !important;
    }
}

/* Portrait orientation specific fixes */
@media (max-width: 768px) and (orientation: portrait) {
    .hero-video {
        width: auto !important;
        height: 100% !important;
        min-width: 100vw !important;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 812px) and (orientation: landscape) {
    .hero {
        min-height: 100vh !important;
    }
    
    .hero-video {
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    .hero-content {
        padding: 2rem 1rem !important;
        padding-top: 90px !important; /* Less padding in landscape */
    }
}

/* Very small screens (iPhone SE, small Android) */
@media (max-width: 375px) {
    .footer .container {
        padding: 1.25rem 0.75rem 0.5rem !important;
    }

    .footer-column {
        margin-bottom: 1rem !important;
    }

    .footer-bottom {
        padding: 0.5rem 0 !important;
    }
    
    .footer-logo-img {
        max-width: 80px !important;
    }
    
    .footer h4 {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem !important;
    }
}/* ========== ADDITIONAL FIXES ========== */

/* Prevent horizontal scroll in footer */
@media (max-width: 768px) {
    .footer,
    .footer *,
    .footer-content,
    .footer-main-grid,
    .footer-columns-grid {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure no element causes overflow */
    .footer img,
    .footer-logo-img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Fix for iOS Safari video rendering */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        .hero-video {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            transform: none !important;
            width: 100vw !important;
            height: 100vh !important;
        }
        
        .hero {
            position: relative !important;
        }
        
        .hero-content {
            position: relative !important;
            z-index: 10 !important;
        }
    }
}

/* Fix video aspect ratio on tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-video {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Ensure hero has minimum content space */
@media (max-width: 768px) {
    .hero-text {
        padding: 2rem 0 !important;
        min-height: 60vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}

/* Footer safe area for iPhone X and newer */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .footer {
            padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
        }
        
        .footer .container {
            padding-left: max(1rem, env(safe-area-inset-left)) !important;
            padding-right: max(1rem, env(safe-area-inset-right)) !important;
        }
    }
}

/* Print styles - hide video */
@media print {
    .hero-video {
        display: none !important;
    }
    
    .video-overlay {
        display: none !important;
    }
    
    .hero {
        background: linear-gradient(135deg, #2C3E5F 0%, #6B1F3C 100%) !important;
        min-height: auto !important;
        page-break-inside: avoid !important;
    }
}

/* High contrast mode - ensure visibility */
@media (prefers-contrast: high) {
    @media (max-width: 768px) {
        .video-overlay {
            background: rgba(0, 0, 0, 0.05) !important;
        }

        .hero-content {
            /* Remove dark background */
            padding: 2rem !important;
        }
    }
}/* ========== HOMEPAGE SERVICE CARDS: REMOVE ARROWS ========== */
/* Remove arrow icons from "Enterprise ICT Solutions" service cards */
.services .service-card .card-link::after,
.services .card-link::after,
.card-link::after {
    content: '' !important;
    display: none !important;
}

/* Also hide any arrows from tech-button styling on card links */
.services .card-link::before,
.card-link::before {
    display: none !important;
}

/* ========== MEGA MENU: FIX TEXT VISIBILITY ========== */
/* Force background gradient to show (override white background) */
.dropdown .mega-menu .OLD-mega-menu-highlight-DISABLED,
.mega-menu .OLD-mega-menu-highlight-DISABLED,
.OLD-mega-menu-highlight-DISABLED {
    background: linear-gradient(135deg, #6B1F3C 0%, #2C3E5F 100%) !important;
    color: #FFFFFF !important;
}

/* Default state - white text on dark gradient background */
.dropdown .mega-menu .OLD-mega-menu-highlight-DISABLED h5,
.mega-menu .OLD-mega-menu-highlight-DISABLED h5,
.OLD-mega-menu-highlight-DISABLED h5 {
    color: #FFFFFF !important;
}

.dropdown .mega-menu .OLD-mega-menu-highlight-DISABLED p,
.mega-menu .OLD-mega-menu-highlight-DISABLED p,
.OLD-mega-menu-highlight-DISABLED p {
    color: rgba(255, 255, 255, 0.95) !important;
}

.dropdown .mega-menu .OLD-mega-menu-highlight-DISABLED h4,
.mega-menu .OLD-mega-menu-highlight-DISABLED h4,
.OLD-mega-menu-highlight-DISABLED h4 {
    color: #FFFFFF !important;
}

.dropdown .mega-menu .OLD-mega-menu-highlight-DISABLED i,
.mega-menu .OLD-mega-menu-highlight-DISABLED i,
.OLD-mega-menu-highlight-DISABLED i {
    color: #D4AF37 !important;
}

/* Hover state - black text on gold background */
.dropdown .mega-menu .OLD-mega-menu-highlight-DISABLED:hover,
.mega-menu .OLD-mega-menu-highlight-DISABLED:hover,
.OLD-mega-menu-highlight-DISABLED:hover {
    background: linear-gradient(135deg, #D4AF37 0%, #F0E68C 100%) !important;
}

.dropdown .mega-menu .OLD-mega-menu-highlight-DISABLED:hover h5,
.mega-menu .OLD-mega-menu-highlight-DISABLED:hover h5,
.OLD-mega-menu-highlight-DISABLED:hover h5,
.dropdown .mega-menu .OLD-mega-menu-highlight-DISABLED:hover p,
.mega-menu .OLD-mega-menu-highlight-DISABLED:hover p,
.OLD-mega-menu-highlight-DISABLED:hover p {
    color: #000000 !important;
}

.dropdown .mega-menu .OLD-mega-menu-highlight-DISABLED:hover h4,
.mega-menu .OLD-mega-menu-highlight-DISABLED:hover h4,
.OLD-mega-menu-highlight-DISABLED:hover h4 {
    color: #2C3E5F !important;
}

.dropdown .mega-menu .OLD-mega-menu-highlight-DISABLED:hover i,
.mega-menu .OLD-mega-menu-highlight-DISABLED:hover i,
.OLD-mega-menu-highlight-DISABLED:hover i {
    color: #6B1F3C !important;
}

/* ========== FAQ SECTION FIX - NO INTERNAL SCROLLING ========== */
/* Fixed at root in advanced-interactivity.css */

/* Showcase responsiveness now lives in responsive.css via .showcase-grid */

/* Final mobile/tablet hamburger fallback (last-loaded stylesheet) */
@media (max-width: 1024px) {
    .navbar .nav-menu {
        display: none !important;
    }

    .navbar .nav-actions {
        position: relative !important;
        z-index: 12100 !important;
    }

    .navbar .nav-actions .hamburger {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
        border: 1px solid rgba(44, 62, 95, 0.2) !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 12101 !important;
    }

    .navbar .nav-actions .hamburger span {
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        margin: 2px 0 !important;
        background: #2C3E5F !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}