/* ============================================================
   iOS SAFARI OPTIMIZATIONS
   Comprehensive Safari/WebKit fixes for mobile experience:
   - Safe area / notch / home indicator
   - Dynamic viewport height (100dvh)
   - Touch interaction (tap highlight, 300ms delay, callout)
   - Form controls (appearance, font-size zoom prevention)
   - Momentum scrolling, sticky positioning
   - Hover state management (prevent stuck hover on touch)
   - Font rendering, image display
   - Keyboard / input viewport handling
   - GPU compositing flicker prevention
   ============================================================ */

/* --- 1. Dynamic Viewport Height (fix iOS Safari URL bar resize) --- */
/* Use dvh as primary, svh fallback, vh as last resort */
.hero,
.hero-fullscreen,
.about-hero,
.sol-hero,
.con-hero,
.acc-hero {
    min-height: 100dvh;
    min-height: 100svh;
    min-height: -webkit-fill-available;
}
@supports not (min-height: 100dvh) {
    .hero,
    .hero-fullscreen,
    .about-hero,
    .sol-hero,
    .con-hero,
    .acc-hero {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}

/* Hero at 70vh also needs dynamic units */
.hero-fullscreen:not(.hero) {
    min-height: 70dvh;
    min-height: 70svh;
}
@supports not (min-height: 70dvh) {
    .hero-fullscreen:not(.hero) {
        min-height: 70vh;
    }
}

/* Mobile nav menu: full height with safe areas */
@media (max-width: 768px) {
    .nav-menu {
        height: 100dvh;
        height: 100svh;
        height: -webkit-fill-available;
        padding-top: env(safe-area-inset-top, 0px);
        padding-top: max(40px, env(safe-area-inset-top, 0px));
    }
    @supports not (height: 100dvh) {
        .nav-menu {
            height: 100vh;
            height: -webkit-fill-available;
        }
    }
}

/* --- 2. Safe Area Insets (notch, Dynamic Island, home indicator) --- */
/* Extend safe area coverage beyond mobile-fix.css */
@supports (padding: max(0px)) {
    .hero-content {
        padding-top: max(80px, env(safe-area-inset-top, 0px));
    }
    .navbar {
        padding-top: max(8px, env(safe-area-inset-top, 0px));
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    }
    .footer {
        padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
    }
    .search-overlay {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .search-overlay-content {
        padding-top: max(60px, env(safe-area-inset-top, 0px));
    }
    /* Floating/fixed elements at bottom */
    .hero-scroll {
        bottom: max(30px, env(safe-area-inset-bottom, 0px));
    }
    /* Mobile nav menu bottom padding */
    .nav-menu {
        padding-bottom: max(40px, env(safe-area-inset-bottom, 0px));
    }
}

/* --- 3. Touch Interaction Optimization --- */
/* Remove 300ms tap delay on ALL interactive elements */
a, button, [role="button"], input, select, textarea, label,
.btn, .nav-link, .nav-toggle, .lang-btn, .search-btn,
.search-close, .faq-question, .play-btn, .material-chip,
.lang-option, .footer-social a, .brand-logo,
.product-link, .scenario-card, .product-card, .tech-card,
.flow-step, .cloud-comp, .cloud-mode-card, .case-card,
.solution-box, .solution-feature, .gallery-item,
.pain-card, .opp-card, .safety-card, .occasion-card,
.acc-product-card, .ink-item, .blank-item {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* Allow text selection on content but not UI chrome */
p, h1, h2, h3, h4, h5, h6, li, span, div, blockquote, td, th {
    -webkit-user-select: text;
    user-select: text;
}

/* Prevent long-press image save/callout on all images */
img, picture, svg, video {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
}

/* --- 4. Form Controls: Remove iOS Native Styling --- */
/* CRITICAL: font-size >= 16px prevents iOS auto-zoom on focus */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
    font-family: var(--font-sans, 'Inter', sans-serif);
    -webkit-border-radius: 0;
    border-radius: var(--radius-sm, 10px);
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Search input: remove iOS cancel button and magnifier */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* Select: custom arrow instead of iOS default */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300CFFF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    padding-right: 40px;
}

/* Button: remove iOS default styling */
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    background: none;
    border: none;
    font-family: var(--font-sans, 'Inter', sans-serif);
    cursor: pointer;
}

/* Keep custom border-radius on .btn class */
.btn {
    -webkit-border-radius: var(--radius, 16px);
    border-radius: var(--radius, 16px);
}

/* Textarea: prevent iOS resize handle jitter */
textarea {
    resize: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Placeholder text color for iOS */
input::placeholder,
textarea::placeholder {
    color: var(--text-dim, #64748B);
    opacity: 1;
    -webkit-text-fill-color: var(--text-dim, #64748B);
}

/* Autofill: prevent iOS yellow background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-card, #0A1A3F) inset;
    -webkit-text-fill-color: var(--text-light, #E2E8F0);
    caret-color: var(--accent, #00CFFF);
    transition: background-color 5000s ease-in-out 0s;
}

/* --- 5. Focus State for iOS (visible but subtle) --- */
/* iOS Safari doesn't support :focus-visible, use :focus with outline */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    -webkit-box-shadow: 0 0 0 2px var(--accent, #00CFFF);
    box-shadow: 0 0 0 2px var(--accent, #00CFFF);
}

button:focus,
a:focus {
    outline: none;
}

/* --- 6. Momentum Scrolling --- */
/* Enable iOS rubber-band momentum scrolling on all scrollable containers */
.nav-menu,
.search-results,
.search-overlay-content,
.gallery-grid,
.brand-track,
.cloud-components,
.tech-capabilities,
.solution-flow,
.scenarios-grid,
.products-grid,
.case-videos,
.footer-top,
.faq-list,
.spec-table,
.download-grid,
.support-content,
.blog-grid,
.cloud-workflow,
.cloud-modes,
.accessories-grid,
.consumables-grid,
.acc-products-grid,
.ink-grid,
.blanks-grid,
.brochure-gallery,
.details-gallery {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Body: allow scroll chaining on iOS (changed from overscroll-behavior-y:none
   to allow wheel events to reach viewport when over .hero overflow:clip).
   touch-action:pan-y ensures iOS Safari allows vertical panning even when
   body has overflow-x:clip (previously hidden, which could trap scroll). */
body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
}

/* --- 7. Position Sticky with -webkit- prefix --- */
/* iOS Safari needs -webkit-sticky prefix */
.navbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Mobile: use fixed for navbar to avoid iOS sticky jump */
@media (max-width: 768px) {
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
    /* Add body padding-top to compensate for fixed navbar */
    body {
        padding-top: 64px;
    }
    /* Hero and full-screen sections: compensate */
    .hero,
    .hero-fullscreen,
    .about-hero,
    .sol-hero,
    .con-hero,
    .acc-hero {
        margin-top: -64px;
    }
}

/* --- 8. Hover State Management --- */
/* CRITICAL: iOS Safari keeps :hover active after tap.
   Guard all hover effects so they only apply on hover-capable devices */
@media (hover: none) {
    /* Reset all hover transforms on touch devices */
    .scenario-card:hover,
    .product-card:hover,
    .case-card:hover,
    .tech-card:hover,
    .cloud-comp:hover,
    .cloud-mode-card:hover,
    .solution-box-image:hover,
    .gallery-item:hover,
    .pain-card:hover,
    .opp-card:hover,
    .safety-card:hover,
    .occasion-card:hover,
    .acc-product-card:hover,
    .ink-item:hover,
    .blank-item:hover,
    .card-tilt:hover,
    .btn-magnetic:hover,
    .selling-image:hover,
    .img-hover-scale:hover,
    .material-chip:hover,
    .border-glow:hover,
    .footer-social a:hover,
    .brand-logo:hover {
        transform: none !important;
        box-shadow: none !important;
        border-color: var(--border, rgba(255,255,255,0.08)) !important;
        opacity: 0.6 !important;
    }

    /* Keep brand logo at normal opacity on touch */
    .brand-logo {
        opacity: 0.6;
        filter: grayscale(100%);
    }
    .brand-logo:active {
        opacity: 1;
        filter: grayscale(0%);
    }

    /* Image scale: reset on touch */
    .scenario-card:hover .scenario-image img,
    .product-card:hover .product-image img,
    .case-card:hover .case-video,
    .selling-item:hover .selling-image img,
    .img-hover-scale:hover {
        transform: none !important;
    }

    /* Button hover: use :active instead for touch feedback */
    .btn:hover {
        transform: none !important;
        box-shadow: 0 4px 20px rgba(0,207,255,0.15) !important;
    }

    .btn:active {
        transform: scale(0.97) !important;
        transition: transform 0.1s ease !important;
    }

    /* Links: active feedback for touch */
    .nav-link:active,
    .footer-col a:active,
    .product-link:active {
        color: var(--accent, #00CFFF);
        opacity: 0.8;
    }

    /* Dropdown hover: disable on touch (uses click/tap instead) */
    .lang-dropdown {
        position: absolute;
    }
}

/* Hover-capable devices: keep original hover effects */
@media (hover: hover) and (pointer: fine) {
    .scenario-card:hover {
        transform: translateY(-4px);
    }
    .product-card:hover {
        transform: translateY(-6px);
    }
}

/* --- 9. Active State for Touch Feedback --- */
/* Provide visual feedback when tapping on mobile */
@media (hover: none) and (pointer: coarse) {
    .btn:active,
    .nav-link:active,
    .nav-toggle:active,
    .lang-btn:active,
    .search-btn:active,
    .search-close:active,
    .play-btn:active,
    .faq-question:active,
    .material-chip:active {
        opacity: 0.7;
        transition: opacity 0.1s ease;
    }

    .scenario-card:active,
    .product-card:active,
    .case-card:active,
    .tech-card:active,
    .gallery-item:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* --- 10. GPU Compositing & Flicker Prevention --- */
/* Prevent iOS Safari flicker on 3D transforms and animations */
@supports (-webkit-touch-callout: none) {
    .hero-bg-img,
    .hero-video,
    .hero-content,
    .vision-bg,
    .brand-wall,
    .brand-track,
    .card-tilt,
    .product-card,
    .btn-magnetic,
    .reveal,
    [data-aos],
    .navbar.scrolled {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
    }

    /* Fix blank screen flash on iOS during scroll */
    .hero,
    .hero-fullscreen {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* Prevent z-index stacking issues on iOS */
    .navbar,
    .nav-menu,
    .search-overlay,
    .footer {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* --- 11. Font Rendering Optimization --- */
/* iOS Safari specific font rendering */
@supports (-webkit-touch-callout: none) {
    body {
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        -webkit-text-stroke: 0.5px transparent;
    }

    /* Fix font weight rendering on retina displays */
    h1, h2, h3, h4, h5, h6 {
        -webkit-font-smoothing: antialiased;
        font-weight: 700;
    }

    /* Gradient text: ensure proper rendering on iOS */
    .gradient-text {
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
    }
}

/* --- 12. Image Rendering on iOS --- */
@supports (-webkit-touch-callout: none) {
    img {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Prevent image flash during lazy load on iOS */
    img[loading="lazy"] {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    img[loading="lazy"].loaded,
    img[loading="lazy"]:not([src=""]) {
        opacity: 1;
    }

    /* Picture source: ensure proper rendering */
    picture {
        display: contents;
    }

    /* SVG: prevent iOS rendering issues */
    svg {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        shape-rendering: geometricPrecision;
    }
}

/* --- 13. Viewport Meta & Input Zoom Prevention --- */
/* Ensure all text inputs are >= 16px to prevent iOS auto-zoom */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Search input in overlay */
    .search-input {
        font-size: 16px !important;
    }

    /* Contact form inputs */
    .form-input,
    .form-textarea,
    .form-select {
        font-size: 16px !important;
    }
}

/* --- 14. Keyboard & Input Viewport Handling --- */
/* Prevent layout shift when iOS keyboard opens */
/* Use visualViewport API (handled in JS) + CSS fallback */
@supports (-webkit-touch-callout: none) {
    /* When input is focused, ensure it's visible above keyboard */
    input:focus,
    textarea:focus,
    select:focus {
        scroll-margin-bottom: 300px;
    }

    /* Fixed elements: adjust when keyboard is visible */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
}

/* --- 15. Scrollbar Styling for iOS --- */
/* iOS Safari doesn't support ::-webkit-scrollbar in the same way as Chrome,
   but we can hide scrollbars on touch devices for cleaner look */
@supports (-webkit-touch-callout: none) {
    /* Hide scrollbar on horizontal scroll containers (brand wall, galleries) */
    .brand-wall,
    .gallery-grid,
    .solution-flow,
    .cloud-components {
        scrollbar-width: none;
    }

    .brand-wall::-webkit-scrollbar,
    .gallery-grid::-webkit-scrollbar,
    .solution-flow::-webkit-scrollbar,
    .cloud-components::-webkit-scrollbar {
        display: none;
    }
}

/* --- 16. Aspect Ratio Fallback for Older iOS Safari --- */
/* iOS Safari < 15 doesn't support aspect-ratio. Use padding hack as fallback */
@supports not (aspect-ratio: 4 / 3) {
    .scenario-image,
    .product-image,
    .case-video-placeholder,
    .case-video-wrapper,
    .selling-image,
    .solution-box-image,
    .gallery-item,
    .ink-visual-img,
    .acc-product-image {
        position: relative;
        overflow: hidden;
    }

    .scenario-image::before,
    .case-video-placeholder::before,
    .case-video-wrapper::before,
    .selling-image::before,
    .solution-box-image::before {
        content: '';
        display: block;
        padding-top: 75%; /* 4:3 ratio */
    }

    .product-image::before,
    .gallery-item::before {
        content: '';
        display: block;
        padding-top: 100%; /* 1:1 ratio */
    }

    .scenario-image > img,
    .product-image > img,
    .case-video-placeholder > img,
    .case-video-wrapper > video,
    .selling-image > img,
    .solution-box-image > img,
    .gallery-item > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* --- 17. Dropdown / Overlay Behavior on iOS --- */
@media (max-width: 768px) {
    /* Language dropdown: full-width on mobile iOS */
    .lang-dropdown {
        position: fixed;
        top: auto;
        right: 16px;
        left: 16px;
        min-width: auto;
        width: auto;
        max-width: 300px;
    }

    /* Search overlay: full screen on iOS */
    .search-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
    }

    .search-overlay-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        max-height: 100dvh;
        max-height: 100svh;
        max-height: -webkit-fill-available;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Nav menu: ensure it slides over content properly on iOS */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        z-index: 1500;
        -webkit-overflow-scrolling: touch;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .nav-menu.active {
        right: 0;
        -webkit-box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    }
}

/* --- 18. Video Playback on iOS --- */
/* iOS Safari requires playsinline to prevent fullscreen video */
video {
    -webkit-playsinline: true;
    playsinline: true;
}

/* Prevent iOS from auto-playing videos with sound */
video[autoplay] {
    muted: true;
}

/* --- 19. CSS Gap Fallback for Older iOS Safari --- */
/* iOS Safari < 14.5 doesn't support gap in flexbox */
@supports not (gap: 16px) {
    .hero-actions,
    .hero-stats,
    .scenarios-grid,
    .products-grid,
    .tech-cards,
    .tech-capabilities,
    .case-videos,
    .solution-features,
    .footer-top,
    .footer-social,
    .solution-flow,
    .cloud-components,
    .cloud-workflow,
    .cloud-modes,
    .selling-item,
    .flow-step {
        gap: 0;
    }

    /* Use margins instead */
    .hero-actions > * + * { margin-left: 16px; }
    .hero-stats > * + * { margin-left: 60px; }
    .footer-social > * + * { margin-left: 12px; }
    .solution-flow > * + * { margin-left: 32px; }
    .cloud-components > * + * { margin-left: 12px; }

    @media (max-width: 768px) {
        .hero-actions > * + * { margin-left: 0; margin-top: 12px; }
        .hero-stats > * + * { margin-left: 0; margin-top: 16px; }
    }
}

/* --- 20. Text Selection Color for iOS --- */
::selection {
    background: rgba(0, 207, 255, 0.25);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
}

/* --- 21. Print Optimization for iOS Safari --- */
@media print {
    .navbar,
    .nav-toggle,
    .nav-menu,
    .search-overlay,
    .hero-scroll,
    .brand-wall,
    .case-videos,
    .footer-social,
    video,
    .btn,
    .section-tag,
    .hero-badge {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Disable safe area insets for print */
    .navbar,
    .footer,
    .hero-content,
    .nav-menu {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* --- 22. Reduced Motion for iOS Accessibility --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        -webkit-transition-duration: 0.01ms !important;
    }

    .hero-bg-img,
    .hero-content,
    .hero-video,
    .vision-bg,
    .brand-track {
        transform: none !important;
        animation: none !important;
    }

    .reveal,
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }

    img[loading="lazy"] {
        opacity: 1 !important;
        transition: none !important;
    }
}

/* --- 23. Large Text Accessibility (iOS Dynamic Type) --- */
@media (max-width: 768px) {
    /* Ensure text remains readable when iOS Dynamic Type is enabled */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Clamp font sizes to prevent overflow with large text */
    .section-title,
    .hero-title,
    .vision-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

/* --- 24. Input Mode & Enter Key (HTML attribute supplements) --- */
/* These are primarily set via HTML attributes, but CSS ensures proper rendering */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

/* --- 25. Smooth Scroll Fallback --- */
/* iOS Safari < 15.4 doesn't support CSS scroll-behavior: smooth.
   JS handles the polyfill, but ensure no conflict */
@supports (-webkit-touch-callout: none) {
    html {
        scroll-behavior: auto; /* Let JS handle smooth scroll on iOS */
    }

    /* Only enable CSS smooth scroll on iOS 15.4+ */
    @supports (scroll-behavior: smooth) {
        html {
            scroll-behavior: smooth;
        }
    }
}

/* === end safari-optimizations === */