/* Mobile-specific styles - Automatically applied on mobile devices */

/* Mobile Detection and Optimizations */
@media only screen and (max-width: 768px) {
    
    /* Body adjustments */
    body {
        font-size: 16px;
        line-height: 1.6;
    }
    
    /* Container padding */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Keep header logos visible but make them smaller and stacked */
    header .flex-col.md\:flex-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    
    header .flex-col.md\:flex-row > div {
        display: flex !important;
        justify-content: center !important;
    }
    
    header img {
        max-width: 200px !important;
        height: auto !important;
        transform: scale(1) !important;
    }
    
    /* Hide logos in footer and other sections */
    footer img,
    section img[alt*="Impuls Security"] {
        display: none !important;
    }
    
    /* Hide floating scroll logos on mobile */
    #floatingLogoLeft,
    #floatingLogoRight {
        display: none !important;
    }
    
    /* Hide floating buttons on mobile */
    .fixed.bottom-8.right-8,
    .fixed.bottom-24.right-8,
    body > .fixed {
        display: none !important;
    }
    
    /* Mobile Navigation - Hamburger Menu */
    #mainNav {
        min-height: 70px !important;
    }
    
    #mainNav > .container > .flex {
        min-height: 70px !important;
        padding: 0.5rem 1rem !important;
    }
    
    #mobileMenuToggle {
        display: block !important;
        padding: 1rem !important;
        min-width: 60px !important;
        min-height: 60px !important;
        left: 0 !important;
        z-index: 60 !important;
    }
    
    #mobileMenuToggle svg {
        width: 32px !important;
        height: 32px !important;
    }
    
    #navLinks {
        display: none !important;
    }
    
    #mobileMenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }
    
    #mobileMenu.show {
        display: block !important;
        max-height: 500px;
        animation: slideDown 0.3s ease-in-out;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .mobile-nav-link {
        border-left: 3px solid transparent;
        transition: all 0.2s ease;
    }
    
    .mobile-nav-link:active {
        border-left-color: #DC2626;
        background-color: #374151 !important;
    }
    
    /* Hero Banner - Mobile optimized */
    .hero-banner-mobile {
        min-height: 60vh;
        padding: 2rem 1rem !important;
    }
    
    .hero-banner-mobile h1,
    .hero-banner-mobile p {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-banner-mobile .text-5xl,
    .hero-banner-mobile .text-6xl {
        font-size: 2rem !important;
    }
    
    .hero-banner-mobile .text-4xl {
        font-size: 1.75rem !important;
    }
    
    /* Video background - brighter on mobile */
    video {
        filter: blur(1px) brightness(1.3);
        opacity: 0.6 !important;
    }
    
    /* Make video overlay less dark on mobile */
    .hero-banner-mobile .bg-black.opacity-60 {
        opacity: 0.4 !important;
    }
    
    /* Section titles */
    h2.text-5xl {
        font-size: 1.5rem !important; /* 24px -> zmniejszone z 1.875rem (30px) */
        line-height: 1.3 !important;
        padding: 0 1rem;
    }
    
    h3.text-3xl {
        font-size: 1.25rem !important; /* 20px -> zmniejszone z 1.5rem (24px) */
    }
    
    h3.text-2xl {
        font-size: 1.125rem !important; /* 18px -> zmniejszone z 1.25rem (20px) */
    }
    
    h4.text-4xl {
        font-size: 1.5rem !important; /* 24px */
    }
    
    /* Paragraphs and text */
    p.text-xl,
    p.text-2xl {
        font-size: 0.95rem !important; /* ~15px -> zmniejszone z 1rem (16px) */
        line-height: 1.6 !important;
    }
    
    p.text-3xl {
        font-size: 1.125rem !important; /* 18px */
    }
    
    /* Navigation */
    nav a {
        font-size: 1rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    #mainNav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    #mainNav .flex {
        flex-wrap: nowrap;
        min-width: max-content;
    }
    
    /* Buttons */
    .btn-primary,
    .btn-secondary,
    .btn-submit {
        font-size: 1.125rem !important; /* 18px */
        padding: 0.875rem 1.5rem !important;
        width: 100%;
        margin-bottom: 0.75rem;
    }
    
    /* Logo adjustments */
    header img {
        max-height: 60px !important;
        height: auto !important;
    }
    
    header .flex-col {
        gap: 1rem !important;
    }
    
    /* Cards and sections */
    .bg-gray-800,
    .bg-gray-900 {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem;
    }
    
    /* Lists */
    ul li,
    ol li {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 0.75rem;
    }
    
    /* Tables */
    table {
        font-size: 0.875rem !important;
    }
    
    table th,
    table td {
        padding: 0.5rem !important;
    }
    
    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Chart container */
    canvas {
        max-height: 300px !important;
    }
    
    /* Info boxes */
    .info-box {
        padding: 1rem !important;
        margin: 1rem 0 !important;
    }
    
    .info-icon {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Forms */
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem !important;
    }
    
    /* Google Maps */
    iframe {
        height: 250px !important;
        width: 100% !important;
    }
    
    /* Floating buttons */
    .fixed.bottom-8.right-8 {
        bottom: 1rem !important;
        right: 1rem !important;
    }
    
    .fixed.bottom-8.right-8 a {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.25rem !important;
    }
    
    /* Social media icons */
    .social-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Grid layouts - force single column */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Flex layouts */
    .flex-row {
        flex-direction: column !important;
    }
    
    /* Price highlights */
    .price-highlight {
        font-size: 1.25rem !important;
    }
    
    /* Brand highlights */
    .brand-highlight {
        font-size: inherit !important;
    }
    
    /* Cost comparison cards */
    .cost-card {
        margin-bottom: 1.5rem !important;
    }
    
    /* Reduce spacing */
    .my-12 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
    
    .mb-12 {
        margin-bottom: 2rem !important;
    }
    
    .py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    /* Touch-friendly targets */
    a,
    button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Optimize text shadows for mobile */
    [style*="text-shadow"] {
        text-shadow: 0 0 10px rgba(239, 68, 68, 0.9), 0 2px 4px rgba(0, 0, 0, 1) !important;
    }
}

/* Extra small devices (portrait phones) */
@media only screen and (max-width: 480px) {
    
    h2.text-5xl {
        font-size: 1.5rem !important; /* 24px */
    }
    
    .hero-banner-mobile h1,
    .hero-banner-mobile p {
        font-size: 1.25rem !important;
    }
    
    .hero-banner-mobile .text-5xl,
    .hero-banner-mobile .text-6xl {
        font-size: 1.5rem !important;
    }
    
    nav a {
        font-size: 0.875rem !important;
        padding: 0.5rem !important;
    }
    
    .btn-primary,
    .btn-secondary {
        font-size: 1rem !important;
        padding: 0.75rem 1.25rem !important;
    }
}

/* Landscape orientation optimization */
@media only screen and (max-height: 600px) and (orientation: landscape) {
    
    .hero-banner-mobile {
        min-height: 100vh;
    }
    
    video {
        object-position: center;
    }
}

/* High DPI screens (Retina) */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
    
    /* Optimize images for retina */
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}