/* Safari and iOS Specific Fixes for Your Site */

/* ===== Fix for WebP images in older Safari versions ===== */
/* Add this to handle WebP fallbacks if needed */
.webp-fallback {
    display: none;
}

/* Only show fallback images in browsers that don't support WebP */
.no-webp .webp-fallback {
    display: block;
}

.no-webp .webp-original {
    display: none;
}

/* ===== Fix for sticky navbar on iOS ===== */
.nav-featured {
    position: fixed;
    /* Add hardware acceleration to fix position:fixed issues on iOS */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Fix for status bar in iOS */
    padding-top: env(safe-area-inset-top, 0px);
}

/* ===== Fix for mobile menu scrolling on iOS ===== */
.mobile-nav-container {
    -webkit-overflow-scrolling: touch;
    /* Prevent content from going under the iOS status bar */
    padding-top: env(safe-area-inset-top, 0px);
    /* Avoid bottom bar on newer iPhones */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ===== Fix hero section height on iOS ===== */
.hero {
    /* Fix for Safari mobile vh issue */
    min-height: calc(100vh - var(--header-height));
    min-height: calc(var(--vh, 1vh) * 100 - var(--header-height));
    /* Fix padding for iOS status bar */
    padding-top: calc(var(--spacing-xl) + env(safe-area-inset-top, 0px));
}

/* ===== Fix contact form elements for iOS ===== */
.contact-form input,
.contact-form textarea,
.contact-form select {
    /* Prevent iOS styling */
    -webkit-appearance: none;
    appearance: none;
    /* Fix rounded corners issue in iOS */
    border-radius: var(--border-radius-md);
    /* Prevent zoom on focus in iOS */
    font-size: 16px;
}

/* Fix for select arrow positioning in iOS */
.select-wrapper {
    position: relative;
}

.select-arrow {
    pointer-events: none;
    /* Ensure arrow is visible on iOS */
    z-index: 1;
}

/* ===== Fix for gradient text in Safari ===== */
.gradient-text, .gradient-text1, .gradient-text-contact,
.hero-title span, .service-title, .stats-number, 
.cta-title, .cta-featured-heading, .nfmtesti-title,
.section-title-page, .portfolio-featured-heading,
.footer-title {
    /* Ensure Safari renders gradient text properly */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Fix potential rendering issues */
    display: inline-block;
    /* Add hardware acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ===== Fix animations and transitions for Safari ===== */
.floating, .service-card:hover, .timeline-img-page:hover,
.portfolio-featured-card:hover, .nfmtesti-card:hover,
.fade-up.visible, .timeline-item-page.visible {
    /* Add WebKit prefix for animations */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Improve animation performance */
    will-change: transform;
}

@-webkit-keyframes floating {
    0%, 100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* ===== Fix portfolio grid for Safari ===== */
.portfolio-featured-grid {
    /* Improve rendering and animation performance in Safari */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Fix for potential Safari flexbox issues */
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* ===== Fix for button hover states on iOS ===== */
@media (hover: none) {
    /* For touch devices */
    .touch-active {
        /* Apply hover state when touch-active class is added via JS */
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
    }
    
    .btn-glow.touch-active {
        transform: translateY(-2px);
    }
    
    .footer-link.touch-active::after {
        transform: scaleX(1);
        transform-origin: left;
    }
}

/* ===== Fix for clip-path in Safari ===== */
.hero {
    /* Add WebKit prefix for clip-path */
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%);
}

/* ===== Fix for padding and margins on Safari ===== */
@supports (-webkit-touch-callout: none) {
    /* iOS specific styles */
    
    /* Add bottom padding to avoid content being cut off by iPhone X+ bottom bar */
    body {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    
    /* Fix footer padding for iOS */
    .footer {
        padding-bottom: calc(var(--footer-padding-y) + env(safe-area-inset-bottom, 0px));
    }
}

/* ===== Fix for smooth scrolling on Safari ===== */
@supports (-webkit-overflow-scrolling: touch) {
    html {
        /* Disable CSS scroll behavior on iOS for better performance */
        scroll-behavior: auto;
    }
}

/* ===== Fix for image rendering on Safari ===== */
.img-fluid {
    /* Improve image rendering in Safari */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ===== Fix nav-featured-logo-img for Safari ===== */
.nav-featured-logo-img {
    /* Fix potential Safari image scaling issues */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ===== Fix animated elements for Safari ===== */
.animate__animated {
    /* Add hardware acceleration for animations in Safari */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ===== Fix testimonial slider for Safari ===== */
.nfmtesti-track {
    /* Fix slider animation in Safari */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* ===== Fix for iOS momentum scrolling in overflow elements ===== */
.mobile-nav-list,
.nfmtesti-track,
.timeline-content-page,
.contact-form,
.features-list {
    -webkit-overflow-scrolling: touch;
}

/* ===== Fix for specific iOS PWA issues ===== */
@media (display-mode: standalone) {
    /* Styles for when the site is added to home screen */
    body {
        /* Add extra padding for iOS PWA status bar */
        padding-top: env(safe-area-inset-top, 0px);
    }
    
    .nav-featured {
        /* Adjust fixed header for PWA mode */
        top: env(safe-area-inset-top, 0px);
    }
}

/* ===== Ensure shapes and gradients render correctly in Safari ===== */
.shape,
.nfmtesti-shape-1,
.nfmtesti-shape-2,
.nfmtesti-glow {
    /* Improve rendering of radial gradients in Safari */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity;
}

/* ===== Fix for iOS input zoom issue ===== */
@media screen and (max-width: 768px) {
    input, select, textarea {
        font-size: 16px; /* Prevent zoom on focus */
    }
}

/* ===== Fix for backdrop-filter in Safari ===== */
.navbar,
.mobile-menu,
.mobile-nav-overlay,
.service-card,
.contact-form,
.timeline-content-page,
.nfmtesti-card {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}