/* Responsive Design Styles */

/* Mobile First Approach */
/* Base styles for mobile devices */

/* Small screens (phones) */
@media (max-width: 640px) {
    /* Header adjustments for mobile */
    header .max-w-7xl {
        @apply px-4;
    }

    /* Fix mobile scrolling - ensure content is scrollable */
    body {
        overflow-y: auto !important;
        overflow-x: hidden;
    }

    main {
        height: auto !important;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    #content-slider {
        flex: 1;
        overflow-y: auto !important;
        overflow-x: hidden;
        height: auto !important;
        position: relative;
    }

    #content-slider section {
        height: auto !important;
        min-height: calc(100vh - 180px); /* Account for header and bottom menu */
        padding-bottom: 100px !important; /* Space for bottom menu */
        overflow-y: visible !important;
    }

    /* Ensure service and forensics sections are scrollable */
    #services, #forensics {
        overflow-y: auto !important;
    }

    /* Make service cards stackable on mobile */
    .service-card {
        margin-bottom: 1rem;
    }

    /* Tool cards grid adjustment for mobile */
    .tool-card {
        width: 100%;
    }

    /* Hero section mobile optimization */
    .hero-title {
        @apply text-3xl leading-tight;
    }

    .hero-subtitle {
        @apply text-lg px-4;
    }

    /* Mobile menu full width */
    #mobile-menu {
        @apply mx-0 rounded-none;
    }

    /* Cookie banner mobile positioning */
    #cookie-banner {
        @apply left-2 right-2 bottom-16;
    }

    /* Mobile navigation icons smaller */
    .mobile-nav-item i {
        @apply text-lg;
    }

    .mobile-nav-item span {
        @apply text-xs;
    }

    /* Adjust dock for very small screens */
    #desktop-dock {
        @apply px-4 py-2;
    }

    .dock-icon {
        @apply p-2;
    }

    .dock-icon i {
        @apply text-lg;
    }
}

/* Medium screens (tablets) */
@media (min-width: 641px) and (max-width: 1024px) {
    /* Tablet specific styles */
    
    /* Fix tablet scrolling */
    body {
        overflow-y: auto !important;
        overflow-x: hidden;
    }

    main {
        height: auto !important;
        min-height: 100vh;
    }

    #content-slider {
        height: auto !important;
        overflow-y: auto !important;
    }

    #content-slider section {
        height: auto !important;
        min-height: calc(100vh - 180px);
        padding-bottom: 100px !important;
    }

    .hero-title {
        @apply text-5xl;
    }

    /* Cookie banner tablet positioning */
    #cookie-banner {
        @apply left-8 right-8 bottom-20;
    }

    /* Mobile menu button visible but desktop dock hidden */
    #mobile-menu-btn {
        @apply block;
    }

    /* Adjust mobile bottom menu for tablets */
    .mobile-nav-item {
        @apply px-4 py-2;
    }
}

/* Large screens (desktop) */
@media (min-width: 1025px) {
    /* Desktop specific styles */
    /* Hide mobile menu button */
    #mobile-menu-btn {
        @apply hidden;
    }

    /* Show desktop dock */
    #desktop-dock {
        @apply flex;
    }

    /* Hide mobile bottom menu */
    #mobile-menu-bottom {
        @apply hidden;
    }

    /* Hide mobile cookie banner */
    #cookie-banner {
        @apply hidden;
    }

    /* Enhanced hover effects for desktop */
    .dock-icon:hover {
        @apply bg-gray-50;
        transform: translateY(-4px) scale(1.1);
    }
}

/* Extra large screens */
@media (min-width: 1280px) {
    /* Larger hero text for big screens */
    .hero-title {
        @apply text-7xl;
    }

    /* Larger dock for big screens */
    #desktop-dock {
        @apply px-8 py-4 space-x-6;
    }

    .dock-icon {
        @apply p-4;
    }

    .dock-icon i {
        @apply text-2xl;
    }
}

/* Orientation specific styles */
@media (orientation: landscape) and (max-height: 500px) {
    /* Landscape mobile devices */
    /* Reduce hero section height */
    main {
        @apply items-start pt-20;
    }

    .hero-title {
        @apply text-2xl mb-4;
    }

    .hero-subtitle {
        @apply text-base mb-6;
    }

    /* Adjust mobile menu for landscape */
    #mobile-menu-bottom {
        @apply py-2;
    }

    .mobile-nav-item span {
        @apply hidden;
    }

    /* Cookie banner landscape positioning */
    #cookie-banner {
        @apply bottom-12;
    }
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Enhanced styling for retina displays */
    #desktop-dock {
        @apply shadow-xl;
    }

    .dock-icon {
        @apply transition-all duration-300;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    /* Disable animations for users who prefer reduced motion */
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #desktop-dock {
        transition: none !important;
    }

    .dock-icon {
        transition: none !important;
    }
}

/* Print styles */
@media print {
    /* Hide interactive elements when printing */
    #desktop-dock,
    #mobile-menu-bottom,
    #cookie-banner,
    #mobile-menu {
        display: none !important;
    }

    body {
        overflow: visible !important;
    }

    main {
        height: auto !important;
    }
}

/* Focus styles for accessibility */
.dock-icon:focus-visible {
    @apply ring-2 ring-blue-500 ring-offset-2 outline-none;
}

.mobile-nav-item:focus-visible {
    @apply ring-2 ring-blue-500 ring-offset-2 outline-none rounded-lg;
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets for mobile devices */
    .dock-icon {
        @apply min-w-[48px] min-h-[48px];
    }

    .mobile-nav-item {
        @apply min-w-[60px] min-h-[60px];
    }

    /* Remove hover effects on touch devices */
    .dock-icon:hover {
        transform: none;
        @apply scale-100;
    }

    .mobile-nav-item:hover {
        @apply scale-100;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles if needed in the future */
    /* Currently keeping white background as requested */
}

/* Container queries for advanced responsive design */
@container (max-width: 768px) {
    .hero-title {
        @apply text-4xl;
    }
}