/**
* CHROME & SAFARI CRITICAL CSS FIXES
* Ensures website works in Chrome and Safari
*/

/* ====== CHROME SPECIFIC FIXES ====== */
/* Only apply to Chrome, not Firefox */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) and (not (display: -moz-box)) {
    /* Chrome-specific fixes */

    /* Force visibility */
    html, body {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }

    /* Fix pointer events */
    * {
        pointer-events: auto !important;
    }

    /* Fix cursor */
    a, button, [role="button"], [onclick], [href] {
        cursor: pointer !important;
    }

    /* Fix z-index */
    .navbar, .sidebar, .hero, main, section {
        position: relative;
        z-index: 1;
    }

    .navbar {
        z-index: 1000;
    }

    .sidebar {
        z-index: 2000;
    }

    /* Fix transforms */
    .project-card-animated,
    .blog-card-animated,
    [class*="animate"],
    [class*="hover"] {
        transform: translateZ(0);
        will-change: transform;
    }

    /* Fix flexbox */
    .nav-container,
    .nav-links,
    .hero-content,
    .about-container,
    .projects-container {
        display: flex;
    }
}

/* ====== SAFARI SPECIFIC FIXES ====== */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) and (not (display: -webkit-flex)) {
    /* Safari-specific fixes */

    /* Force visibility */
    html, body {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* Fix flexbox */
    .nav-container,
    .nav-links,
    .hero-content,
    .about-container,
    .projects-container {
        display: -webkit-flex !important;
        display: flex !important;
    }

    /* Fix pointer events */
    * {
        pointer-events: auto !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    /* Fix cursor */
    a, button, [role="button"], [onclick], [href] {
        cursor: pointer !important;
    }

    /* Fix smooth scrolling */
    html {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Fix position sticky */
    .navbar {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0;
        z-index: 1000;
    }

    /* Fix transforms */
    .sidebar {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    .sidebar.active {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    /* Fix backdrop filter */
    .overlay {
        background: rgba(0, 0, 0, 0.5);
    }

    @supports (-webkit-backdrop-filter: blur(2px)) {
        .overlay {
            -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
        }
    }

    /* Fix input zoom on iOS */
    @media screen and (max-width: 768px) {
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="password"],
        input[type="search"],
        textarea,
        select {
            font-size: 16px !important;
        }
    }

    /* Fix image rendering */
    img {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* ====== COMMON FIXES FOR CHROME & SAFARI ====== */
/* Remove any blocking elements */
.overlay.blocking,
.loading.blocking,
.spinner.blocking,
[class*="blocking"] {
    display: none !important;
    pointer-events: none !important;
}

/* Ensure main content is always visible */
html, body, main, .hero, .navbar, section {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix links */
a {
    pointer-events: auto !important;
    cursor: pointer !important;
    text-decoration: none;
}

a:hover {
    opacity: 0.8;
}

/* Fix buttons */
button, [role="button"], [onclick] {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Fix sidebar */
.sidebar {
    pointer-events: auto !important;
}

.sidebar.active {
    pointer-events: auto !important;
}

/* Fix navbar */
.navbar {
    pointer-events: auto !important;
}

.navbar a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Fix project cards */
.project-card-animated,
.blog-card-animated {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Fix forms */
form, input, textarea, select, button {
    pointer-events: auto !important;
}

/* Ensure no element blocks interaction */
* {
    -webkit-user-select: text;
    user-select: text;
}

a, button, [role="button"] {
    -webkit-user-select: none;
    user-select: none;
}


/* Focus styles for accessibility - Auto-added */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}