/* ===== BROWSER COMPATIBILITY & CROSS-DEVICE CSS =====
   Supports: Chrome, Firefox, Safari, Edge, Samsung Internet,
   Android WebView, iOS Safari, Opera, all major mobile browsers
   ================================================== */

/* ===== 1. CSS CUSTOM PROPERTIES FOR THEMING ===== */
:root {
    /* Enable automatic system theme detection */
    color-scheme: light dark;

    /* === Light Theme (default) === */
    --color-bg: #ffffff;
    --color-bg-alt: #f5f5f5;
    --color-bg-elevated: #ffffff;
    --color-text: #141414;
    --color-text-secondary: #555555;
    --color-text-muted: #9c9c9c;
    --color-accent: #f53607;
    --color-border: #e0e0e0;
    --color-link: #cfcfcf;
    --color-nav-bg: rgba(255, 255, 255, 0.85);
    --color-nav-text: #000000;
    --color-footer-bg: #0a0a0a;
    --color-footer-text: #ffffff;
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-card-bg: #ffffff;
    --color-card-border: #e8e8e8;
    --color-input-bg: #f8f8f8;
    --color-input-border: #d0d0d0;
    --color-input-text: #141414;
    --color-scrollbar-track: #f0f0f0;
    --color-scrollbar-thumb: #c0c0c0;
    --color-selection-bg: #f53607;
    --color-selection-text: #ffffff;
    --theme-image-filter: none;
    --theme-icon-filter: none;

    /* === Layout & Spacing === */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --vh: 1vh;

    /* === Animation === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* === Touch targets === */
    --min-tap-target: 44px;
}

/* ===== 2. DARK THEME (auto via system preference) ===== */
/* Dark theme for dark-design pages (home, work, clients, contact) */
body:not(.services):not(.about) {
    --color-bg: #0a0a0a;
    --color-bg-alt: #141414;
    --color-bg-elevated: #1a1a1a;
    --color-text: #ffffff;
    --color-text-secondary: #b0b0b0;
    --color-text-muted: #777777;
    --color-border: #2a2a2a;
    --color-link: #cfcfcf;
    --color-nav-bg: rgba(10, 10, 10, 0.85);
    --color-nav-text: #ffffff;
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-card-bg: #1a1a1a;
    --color-card-border: #2a2a2a;
    --color-input-bg: #1a1a1a;
    --color-input-border: #333333;
    --color-input-text: #ffffff;
    --color-scrollbar-track: #1a1a1a;
    --color-scrollbar-thumb: #444444;
    --color-selection-bg: #f53607;
    --color-selection-text: #ffffff;
}

/* System-level dark mode preference — applies to all pages */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0a0a0a;
        --color-bg-alt: #141414;
        --color-bg-elevated: #1a1a1a;
        --color-text: #ffffff;
        --color-text-secondary: #b0b0b0;
        --color-text-muted: #777777;
        --color-border: #2a2a2a;
        --color-link: #cfcfcf;
        --color-nav-bg: rgba(10, 10, 10, 0.85);
        --color-nav-text: #ffffff;
        --color-overlay: rgba(0, 0, 0, 0.7);
        --color-card-bg: #1a1a1a;
        --color-card-border: #2a2a2a;
        --color-input-bg: #1a1a1a;
        --color-input-border: #333333;
        --color-input-text: #ffffff;
        --color-scrollbar-track: #1a1a1a;
        --color-scrollbar-thumb: #444444;
    }

    /* Adjust images in dark mode for less eye strain */
    img:not([src*=".svg"]) {
        filter: brightness(0.95);
    }
}

/* ===== 4. FOUC PREVENTION ===== */
/* No longer needed — theme is handled by CSS prefers-color-scheme, no JS delay */

/* ===== 5. BACKDROP-FILTER FALLBACKS ===== */
/* For browsers that don't support backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .mobile-bottom-nav {
        background: rgba(20, 20, 20, 0.97) !important;
    }

    nav.nav-scrolled {
        background: rgba(0, 0, 0, 0.95) !important;
    }

    .volume-btn,
    .fullscreen-btn {
        background: rgba(0, 0, 0, 0.7) !important;
    }
}

/* ===== 6. OBJECT-FIT FALLBACK (IE11/older browsers) ===== */
/* object-fit is well-supported in all modern browsers.
   For legacy browsers, we provide a background-image fallback via JS */

/* ===== 7. FLEXBOX VENDOR PREFIXES (Samsung Internet / older Android) ===== */
/* Additional critical elements: */

/* Hide mobile-only elements on desktop */
@media (min-width: 1024px) {
    .mobile-bottom-nav {
        display: none !important;
    }
    .mobile-lets-talk-btn {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .mobile-bottom-nav {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .mobile-bottom-nav .mobile-nav-item {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

/* ===== 8. iOS SPECIFIC FIXES ===== */

/* Fix iOS Safari 100vh bug - use dynamic viewport units with fallback */
.page1,
.loader,
.menu.active,
.showreel-experience.active {
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
}

/* Prevent iOS Safari zoom on input focus */
input, select, textarea {
    font-size: 16px !important; /* prevents zoom on focus */
}

/* Prevent iOS momentum scrolling artifacts */
.main {
    -webkit-overflow-scrolling: touch;
}

/* Fix iOS Safari position:fixed inside transformed containers */
@supports (-webkit-touch-callout: none) {
    /* iOS only */
    .menu.active {
        position: fixed;
        -webkit-transform: none;
        transform: none;
    }

    nav {
        position: fixed;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* Keep natural page scrolling on iOS unless explicitly locked by overlay states */
    body:not(.loader-active):not(.modal-open) {
        position: relative !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: 100%;
    }

    body.loader-active,
    body.modal-open {
        position: fixed;
        width: 100%;
    }
}

/* ===== 9. ANDROID SPECIFIC FIXES ===== */

/* Samsung Internet flexbox gap fallback */
@supports not (gap: 1px) {
    .mobile-bottom-nav .mobile-nav-item {
        margin: 0 4px;
    }

    .nav-links a {
        margin: 0 8px;
    }
}

/* Optimize for mid-range Android devices */
@media (max-width: 768px) {
    /* Reduce animation complexity */
    .slide img,
    .page3 video {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* Reduce repaints */
    .cursor {
        display: none !important;
    }
}

/* ===== 10. SCROLLBAR THEMING ===== */

/* Webkit browsers (Chrome, Safari, Edge, Samsung Internet) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track, #1a1a1a);
}

::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb, #444444);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar-thumb, #555555);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar-thumb, #444444) var(--color-scrollbar-track, #1a1a1a);
}

/* ===== 11. SELECTION COLORS ===== */
::selection {
    background: var(--color-selection-bg, #f53607);
    color: var(--color-selection-text, #ffffff);
}

::-moz-selection {
    background: var(--color-selection-bg, #f53607);
    color: var(--color-selection-text, #ffffff);
}

/* ===== 12. HIGH DPI / RETINA OPTIMIZATION ===== */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
       (min-resolution: 2dppx) {
    /* Ensure crisp rendering */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

@media (-webkit-min-device-pixel-ratio: 3),
       (min-resolution: 288dpi),
       (min-resolution: 3dppx) {
    /* Ultra-high DPI devices (iPhone Pro, Pixel, etc.) */
    .footer-logo-pc,
    .footer-logo-mobile {
        image-rendering: auto; /* Let browser handle at highest quality */
    }
}

/* ===== 13. TOUCH DEVICE ENHANCEMENTS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Ensure all interactive elements meet 44px minimum tap target */
    a, button, input[type="submit"], input[type="button"],
    .nav-links a, .mobile-nav-item, .scroll-down,
    .showreel-trigger, .play-pause-btn, .volume-btn,
    .fullscreen-btn, .showreel-close {
        min-width: var(--min-tap-target, 44px);
        min-height: var(--min-tap-target, 44px);
    }

    /* Remove hover-dependent styles */
    .cursor {
        display: none !important;
    }

    /* Faster transitions for touch responsiveness */
    a, button {
        -webkit-transition-duration: 0.15s !important;
        -o-transition-duration: 0.15s !important;
        transition-duration: 0.15s !important;
    }
}

/* ===== 14. REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        -o-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .loader,
    .page-transition {
        display: none !important;
    }

    .page1-slide-wrapper {
        -webkit-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
        transform: translateY(0) !important;
    }
}

/* ===== 15. PRINT STYLES ===== */
@media print {
    nav, .menu, .cursor, .loader, .page-transition,
    .mobile-bottom-nav, .mobile-lets-talk-btn,
    .showreel-experience,
    .scroll-down, .page3 video, footer {
        display: none !important;
    }

    body, .main {
        background: #fff !important;
        color: #000 !important;
        overflow: visible !important;
        height: auto !important;
    }
}

/* ===== 16. LANDSCAPE MOBILE SAFE AREAS ===== */
@media (orientation: landscape) and (max-height: 500px) {
    .mobile-bottom-nav {
        padding-left: var(--safe-area-left);
        padding-right: var(--safe-area-right);
    }
}

/* ===== 17. SAMSUNG INTERNET SPECIFIC ===== */
/* Samsung Internet has quirks with certain CSS features */

/* Fix sticky position (Samsung Internet < v14) */
.nav-links {
    position: -webkit-sticky;
    position: sticky;
}

/* Fix Samsung Internet flexbox wrapping issues */
@supports (-webkit-appearance: none) {
    .page2-top,
    .page5-top,
    .page7-top {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

/* ===== 18. FORM ACCESSIBILITY ===== */
/* Ensure forms are usable across all devices */
input, textarea, select, button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0; /* Prevent iOS default styling */
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--color-accent, #f53607);
    outline-offset: 2px;
}

/* Remove outline for mouse/touch users */
:focus:not(:focus-visible) {
    outline: none;
}

/* ===== 19. SAFE AREA PADDING FOR NOTCHED DEVICES ===== */
@supports (padding: env(safe-area-inset-top)) {
    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }

    nav {
        padding-top: env(safe-area-inset-top);
    }

    .showreel-close {
        top: calc(16px + env(safe-area-inset-top));
        right: calc(16px + env(safe-area-inset-right));
    }
}

/* ===== 20. CONTRAST & ACCESSIBILITY ===== */
/* Ensure WCAG AA contrast ratios */
@media (forced-colors: active) {
    /* High contrast mode support */
    a, button {
        forced-color-adjust: none;
    }
}

/* ===== 21. GRID FALLBACK ===== */
/* For browsers not supporting CSS Grid, fall back to flexbox */
@supports not (display: grid) {
    .page2-top,
    .page5-top,
    .page7-top,
    .footer-top {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

/* ===== 22. LAZY LOADING PLACEHOLDER ===== */
img[loading="lazy"] {
    background: var(--color-bg-alt, #141414);
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
    background: transparent;
}

/* ===== 23. FONT LOADING OPTIMIZATION ===== */
/* Prevent FOUT flicker - handled via JS font loading API */
.fonts-loading body {
    visibility: hidden;
}

.fonts-loaded body,
.fonts-failed body {
    visibility: visible;
}

/* ===== 24. NOTHING PHONE GLYPH INTERFACE FIX ===== */
/* Nothing phones have a unique notification LED interface that can clip content */
@media (max-width: 430px) {
    nav {
        padding-top: max(env(safe-area-inset-top, 0px), 8px);
    }
}

/* ===== 25. XIAOMI/OPPO/VIVO BROWSER FIXES ===== */
/* These browsers sometimes add extra padding or toolbars */
@media (max-width: 768px) {
    .page1, .menu.active {
        /* Use dvh with vh fallback for devices where 100vh includes browser chrome */
        min-height: 100vh;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
    }
}

/* ===== 26. SAMSUNG / ANDROID BROWSER DARK MODE OVERRIDE ===== */
/* Prevent forced dark mode from breaking images and videos */
img, video {
    filter: none !important;
}