/**
 * Mobile Hover Animation Fix
 * This CSS file provides subtle touch animations for mobile devices
 * while properly enabling hover animations for devices with true hover capability
 */

/* Base styles for subtle touch animations on mobile devices */
html body .software-logo,
html body .software-tools-card .software-logo,
html body .software-tools-container .software-logo,
html body div[class*="software-logo"],
html body .col-4 .software-logo,
html body .col-md-3 .software-logo,
html body .col-lg-2 .software-logo {
    transition: transform 0.2s ease !important;
    cursor: pointer !important;
}

html body .software-logo img,
html body .software-tools-card .software-logo img,
html body .software-tools-container .software-logo img {
    transition: transform 0.2s ease !important;
}

/* Subtle active-state animations for touch devices */
html body .software-logo:active,
html body .software-tools-card .software-logo:active,
html body .software-tools-container .software-logo:active {
    transform: translateY(1px) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
}

html body .software-logo:active img,
html body .software-tools-card .software-logo:active img,
html body .software-tools-container .software-logo:active img {
    transform: scale(1.05) !important;
}

html body .software-logo:active .software-name,
html body .software-tools-card .software-logo:active .software-name {
    opacity: 0.8 !important;
}

/* Fix for section spacing and overlapping elements in Course Features section */
@media (max-width: 768px) {
    /* Add more space after section subtitle to prevent overlapping */
    html body .features .section-header,
    html body section.features .section-header {
        margin-bottom: 15px !important;
        padding-bottom: 5px !important;
    }
    
    html body .features .section-subtitle,
    html body section.features .section-subtitle,
    html body .features .section-header .section-subtitle,
    html body section.features .section-header p.section-subtitle {
        margin-bottom: 15px !important;
        padding-bottom: 5px !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Ensure proper spacing for titles */
    html body .features .section-title,
    html body section.features .section-title {
        margin-bottom: 10px !important;
    }
    
    /* Reset any problematic CSS causing overlapping */
    html body section.features {
        overflow: visible !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    /* Disable parallax scrolling on mobile as it may cause layout issues */
    html body section.features,
    html body section.features * {
        background-attachment: scroll !important;
        transform: none !important;
    }
}

/* Fix for misaligned feature card in mobile view */
@media (max-width: 768px) {
    /* Force consistent positioning for all feature cards */
    html body .features-grid .feature-item,
    html body .features-grid .feature-item:first-child,
    html body .features-grid .feature-item:nth-child(1) {
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 20px !important;
        top: 0 !important;
        position: relative !important;
        height: auto !important;
        opacity: 1 !important;
    }
    
    /* Force equal box sizing */
    html body .features-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-top: 0 !important;
    }
    
    /* Ensure consistent sizing */
    html body .features-grid .feature-item {
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
        transition: none !important;
        animation: none !important;
    }
    
    /* Clear any transforms that might be applied by GSAP */
    html body section.features .feature-item {
        will-change: auto !important;
        transform: none !important; 
        opacity: 1 !important;
    }
}

/* Disable excessive hover animations on mobile */
@media (not (hover: hover)) {
    html body .software-logo:hover,
    html body .software-tools-card .software-logo:hover,
    html body .software-tools-container .software-logo:hover,
    html body div[class*="software-logo"]:hover,
    html body .col-4 .software-logo:hover,
    html body .col-md-3 .software-logo:hover,
    html body .col-lg-2 .software-logo:hover {
        transform: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
    }

    html body .software-logo:hover img,
    html body .software-tools-card .software-logo:hover img,
    html body .software-tools-container .software-logo:hover img {
        transform: none !important;
    }

    html body .software-tools-card .software-logo:hover::after,
    html body .software-logo:hover::after {
        background: transparent !important;
        transform: none !important;
    }

    html body .software-logo .software-name:hover,
    html body .software-tools-card .software-logo .software-name:hover {
        color: inherit !important;
    }
    
    /* Feature Items Hover Fix - Completely disable animations on touch devices */
    html body .feature-item,
    html body .feature-item:hover,
    html body .feature-item:active,
    html body section.features .feature-item,
    html body .features-grid .feature-item {
        transform: none !important;
        transition: none !important;
        box-shadow: inherit !important;
        animation: none !important;
        background-color: inherit !important;
        border-color: inherit !important;
    }
    
    html body .feature-item .feature-icon,
    html body .feature-item:hover .feature-icon,
    html body .feature-item:active .feature-icon,
    html body .feature-item .feature-icon i,
    html body .feature-item:hover .feature-icon i,
    html body .feature-item:active .feature-icon i {
        transform: none !important;
        scale: 1 !important;
        rotation: 0deg !important;
        background-color: inherit !important;
        color: inherit !important;
        transition: none !important;
        animation: none !important;
    }
    
    html body .feature-item h3,
    html body .feature-item p,
    html body .feature-item:hover h3,
    html body .feature-item:hover p {
        transform: none !important;
        color: inherit !important;
        transition: none !important;
    }
}

/* Only activate the full hover effects on devices that actually support hover properly */
@media (hover: hover) and (pointer: fine) {
    /* Reset the disabling of transitions for hover-capable devices */
    html body .software-logo,
    html body .software-tools-card .software-logo,
    html body .software-tools-container .software-logo,
    html body div[class*="software-logo"],
    html body .col-4 .software-logo,
    html body .col-md-3 .software-logo,
    html body .col-lg-2 .software-logo {
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    
    html body .software-logo img,
    html body .software-tools-card .software-logo img,
    html body .software-tools-container .software-logo img {
        transition: transform 0.3s ease !important;
    }
    
    /* Re-enable hover effects for desktop/hover capable devices */
    html body .software-logo:hover {
        background-color: white !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
        transform: translateY(-5px) !important;
    }
    
    html body .software-logo:hover img {
        transform: scale(1.15) !important;
    }
    
    html body .software-tools-card .software-logo:hover {
        transform: translateY(-8px) !important;
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1) !important;
    }
    
    html body .software-tools-card .software-logo:hover img {
        transform: scale(1.15) !important;
    }
    
    html body .software-tools-card .software-logo:hover::after {
        background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(248,249,250,0.9)) !important;
    }
    
    html body .software-tools-card .software-logo:hover .software-name {
        color: var(--primary) !important;
    }
    
    /* Re-enable transitions for other elements */
    html body .software-logo *,
    html body .software-tools-card .software-logo * {
        transition: all 0.3s ease !important;
    }
}