/* ============================================
   AQUARIUMKEUZE.NL - MOBILE OPTIMIZATIONS
   Complete Mobile-First Responsive Design
   ============================================ */

/* ============================================
   BASE MOBILE IMPROVEMENTS
   ============================================ */

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Better touch targets - minimum 44x44px */
a, button, input, select, textarea {
    min-height: 44px;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Better tap highlighting */
* {
    -webkit-tap-highlight-color: rgba(6, 182, 212, 0.2);
}

/* ============================================
   TABLET BREAKPOINT (768px - 1024px)
   ============================================ */
@media (max-width: 1024px) {
    /* Header adjustments */
    .header-container {
        padding: 0 1rem;
    }
    
    /* Reduce mega menu size */
    .mega-menu {
        min-width: 500px !important;
        padding: 1.5rem;
    }
    
    .mega-menu.wide {
        min-width: 600px !important;
    }
    
    /* Hero section */
    .hero h1 {
        font-size: 3.5rem;
    }
    
    .hero p {
        font-size: 1.25rem;
    }
    
    /* Grid adjustments */
    .category-grid,
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .aquarium-grid {
        grid-template-columns: 1fr;
    }
    
    /* Footer grid */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   MOBILE BREAKPOINT (max 768px)
   ============================================ */
@media (max-width: 768px) {
    /* Typography scaling */
    html {
        font-size: 15px;
    }
    
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.6rem !important; }
    h3 { font-size: 1.3rem !important; }
    h4 { font-size: 1.1rem !important; }
    p { font-size: 1rem !important; }
    
    /* Container padding */
    .container {
        padding: 0 1rem;
    }
    
    /* ============================================
       HEADER & NAVIGATION - MOBILE
       ============================================ */
    header {
        padding: 0.75rem 0;
    }
    
    header.scrolled {
        padding: 0.5rem 0;
    }
    
    .header-container {
        padding: 0 1rem;
    }
    
    /* Logo - smaller on mobile */
    .logo-img {
        height: 60px;
        width: auto;
        max-width: 200px;
    }
    
    header.scrolled .logo-img {
        height: 50px;
    }
    
    /* Hide desktop navigation */
    .desktop-nav,
    nav.desktop-nav {
        display: none !important;
    }
    
    /* Show mobile menu button */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, #06b6d4, #2563eb);
    }
    
    /* Mobile navigation - full width dropdown */
    nav.mobile-nav {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        margin: 0;
        border-radius: 0 0 1.5rem 1.5rem;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        padding: 1rem;
        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    }
    
    nav.mobile-nav a {
        padding: 1rem 1.25rem;
        font-size: 1rem;
        border-radius: 0.75rem;
        min-height: 50px;
        display: flex;
        align-items: center;
    }
    
    .mobile-submenu-header {
        padding: 1rem 1rem 0.5rem;
        margin-top: 0.75rem;
        font-size: 0.8rem;
    }
    
    /* Hide mega menus completely on mobile */
    .mega-menu {
        display: none !important;
    }
    
    /* ============================================
       HERO SECTION - MOBILE
       ============================================ */
    .hero {
        padding: 6rem 0 4rem;
        margin-top: -4rem;
        padding-top: 10rem;
    }
    
    .hero h1 {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    
    .hero h1 br {
        display: none;
    }
    
    .hero p {
        font-size: 1rem !important;
        padding: 0 0.5rem;
        margin-bottom: 2rem;
    }
    
    .hero-emoji {
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }
    
    .hero-emoji span {
        font-size: 2.5rem;
    }
    
    .hero-cta {
        padding: 1rem 2rem;
        font-size: 1rem;
        width: calc(100% - 2rem);
        max-width: 300px;
        justify-content: center;
    }
    
    .hero-bubbles {
        display: none;
    }
    
    /* ============================================
       INTRO SECTION - MOBILE
       ============================================ */
    .intro-section {
        padding: 2rem 0;
    }
    
    .intro-box {
        padding: 1.5rem;
        border-radius: 1rem;
        margin: 0 0.5rem;
    }
    
    .intro-box h2 {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }
    
    .intro-lead {
        font-size: 1rem !important;
        line-height: 1.7;
    }
    
    .intro-list {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin: 1.5rem 0;
    }
    
    .intro-list li {
        padding: 1rem;
        font-size: 0.95rem !important;
    }
    
    /* ============================================
       CATEGORY CARDS - MOBILE
       ============================================ */
    .category-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 0.5rem;
    }
    
    .category-card {
        padding: 1.5rem;
        border-radius: 1rem;
    }
    
    .category-card .emoji {
        font-size: 3rem;
    }
    
    /* Category boxes on homepage */
    [style*="border-left: 5px solid"] {
        padding: 1.25rem !important;
        margin: 0 0.5rem 1rem !important;
        border-radius: 1rem !important;
    }
    
    [style*="border-left: 5px solid"] > div {
        gap: 1rem !important;
    }
    
    [style*="font-size: 3rem"] {
        font-size: 2.5rem !important;
    }
    
    [style*="font-size: 1.5rem"] {
        font-size: 1.25rem !important;
    }
    
    /* ============================================
       AQUARIUM/PRODUCT CARDS - MOBILE
       ============================================ */
    .aquarium-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 0.5rem;
    }
    
    .aquarium-card {
        border-radius: 1rem;
    }
    
    .aquarium-image {
        padding: 2rem 1.5rem;
    }
    
    .aquarium-image .emoji {
        font-size: 3.5rem;
    }
    
    .aquarium-content {
        padding: 1.25rem;
    }
    
    .aquarium-content h3 {
        font-size: 1.4rem !important;
    }
    
    /* ============================================
       FEATURE CARDS - MOBILE
       ============================================ */
    .feature-section {
        padding: 3rem 0;
    }
    
    .feature-section h2 {
        font-size: 1.75rem !important;
        margin-bottom: 2rem;
        padding: 0 1rem;
    }
    
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0 0.5rem;
    }
    
    .feature-card {
        padding: 1.25rem 1rem;
        border-radius: 1rem;
    }
    
    .feature-card .emoji {
        font-size: 2.5rem;
    }
    
    .feature-card h3 {
        font-size: 1rem !important;
    }
    
    .feature-card p {
        font-size: 0.85rem !important;
    }
    
    /* ============================================
       SECTIONS GENERAL - MOBILE
       ============================================ */
    .section {
        padding: 2.5rem 0;
    }
    
    .section-header {
        margin-bottom: 2rem;
        padding: 0 0.5rem;
    }
    
    .section-header h2 {
        font-size: 1.75rem !important;
    }
    
    .section-header p {
        font-size: 1rem !important;
    }
    
    /* ============================================
       FAQ SECTION - MOBILE
       ============================================ */
    .faq-section h2 {
        font-size: 1.75rem !important;
    }
    
    .faq-list {
        gap: 1rem;
        padding: 0 0.5rem;
    }
    
    .faq-item {
        padding: 1.25rem;
        border-radius: 1rem;
        border-left-width: 5px;
    }
    
    .faq-item h3 {
        font-size: 1.1rem !important;
        gap: 0.5rem;
    }
    
    .faq-item h3 .emoji {
        font-size: 1.5rem !important;
    }
    
    .faq-item p {
        padding-left: 2rem;
        font-size: 0.95rem !important;
        line-height: 1.7;
    }
    
    /* ============================================
       CTA SECTION - MOBILE
       ============================================ */
    .cta-section {
        padding: 3rem 1rem;
    }
    
    .cta-section h2 {
        font-size: 1.75rem !important;
    }
    
    .cta-section p {
        font-size: 1rem !important;
    }
    
    .cta-button {
        padding: 1rem 2rem;
        font-size: 1rem;
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
    
    /* ============================================
       PRODUCT DETAIL - MOBILE
       ============================================ */
    .product-detail {
        padding: 1rem;
    }
    
    .back-button {
        font-size: 1rem;
    }
    
    .product-header {
        border-radius: 1rem;
    }
    
    .product-hero {
        padding: 2rem 1.5rem;
    }
    
    .product-hero .emoji {
        font-size: 4rem;
    }
    
    .product-hero h1 {
        font-size: 1.75rem !important;
    }
    
    .product-hero p {
        font-size: 1.1rem !important;
    }
    
    .product-hero .price {
        font-size: 1.5rem;
        padding: 0.75rem 1.5rem;
    }
    
    .product-cta {
        padding: 1.5rem;
    }
    
    /* ============================================
       CONTACT PAGE - MOBILE
       ============================================ */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .contact-card {
        padding: 1.5rem;
    }
    
    /* Contact form */
    form input,
    form textarea,
    form select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.875rem 1rem;
        border-radius: 0.75rem;
    }
    
    form button {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
    }
    
    /* ============================================
       FOOTER - MOBILE
       ============================================ */
    footer {
        padding: 2rem 0 1.5rem;
    }
    
    .footer-content {
        padding: 0 1rem;
    }
    
    /* Affiliate box in footer */
    footer [style*="padding: 25px 30px"] {
        padding: 1.25rem !important;
        margin-bottom: 2rem !important;
    }
    
    footer [style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
    }
    
    footer [style*="font-size: 1.1rem"] {
        font-size: 1rem !important;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .footer-column h3 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    
    .footer-column ul li {
        margin-bottom: 0.75rem;
    }
    
    .footer-column ul li a {
        font-size: 0.95rem;
        display: inline-block;
        padding: 0.25rem 0;
    }
    
    /* Affiliate partners */
    footer [style*="gap: 1.5rem 2.5rem"] {
        gap: 1rem 1.5rem !important;
        font-size: 0.85rem !important;
    }
    
    .footer-bottom {
        padding-top: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .footer-bottom p {
        font-size: 0.8rem !important;
    }
    
    /* ============================================
       COOKIE BANNER - MOBILE
       ============================================ */
    .cookie-banner {
        padding: 1rem;
    }
    
    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .cookie-text h3 {
        font-size: 1rem !important;
    }
    
    .cookie-text p {
        font-size: 0.85rem !important;
    }
    
    .cookie-buttons {
        width: 100%;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .cookie-btn {
        width: 100%;
        padding: 0.875rem 1.5rem;
    }
    
    /* ============================================
       404 PAGE - MOBILE
       ============================================ */
    .error-section {
        min-height: calc(100vh - 150px);
        padding: 2rem 1rem;
    }
    
    .error-icon {
        font-size: 4rem !important;
    }
    
    .error-code {
        font-size: 3.5rem !important;
    }
    
    .error-title {
        font-size: 1.4rem !important;
    }
    
    .error-message {
        font-size: 1rem !important;
    }
    
    .error-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .error-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    
    .suggestions {
        padding: 1.25rem;
        margin-top: 2rem;
    }
    
    .suggestions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
    
    .suggestion-link {
        padding: 0.75rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .suggestion-link span {
        font-size: 1.25rem;
    }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (max 480px)
   ============================================ */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    
    /* Even smaller logo */
    .logo-img {
        height: 70px;
    }
    
    /* Hero */
    .hero h1 {
        font-size: 1.75rem !important;
    }
    
    .hero-emoji span {
        font-size: 2rem;
    }
    
    /* Feature grid - single column */
    .feature-grid {
        grid-template-columns: 1fr;
    }
    
    /* Suggestions grid */
    .suggestions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* FAQ */
    .faq-item p {
        padding-left: 0;
    }
    
    /* Mobile nav even smaller */
    nav.mobile-nav {
        top: 60px;
    }
    
    nav.mobile-nav a {
        padding: 0.875rem 1rem;
        font-size: 0.95rem;
    }
}

/* ============================================
   VERY SMALL SCREENS (max 360px)
   ============================================ */
@media (max-width: 360px) {
    .logo-img {
        height: 60px;
    }
    
    .hero h1 {
        font-size: 1.5rem !important;
    }
    
    .intro-box h2 {
        font-size: 1.25rem !important;
    }
}

/* ============================================
   LANDSCAPE MODE ADJUSTMENTS
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding: 5rem 0 2rem;
        padding-top: 8rem;
    }
    
    .hero h1 {
        font-size: 2rem !important;
    }
    
    .hero-emoji {
        margin-bottom: 1rem;
    }
    
    .hero-emoji span {
        font-size: 2rem;
    }
    
    nav.mobile-nav {
        max-height: 60vh;
    }
}

/* ============================================
   TOUCH DEVICE IMPROVEMENTS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .category-card:hover,
    .aquarium-card:hover,
    .feature-card:hover {
        transform: none;
    }
    
    /* Add active state instead */
    .category-card:active,
    .aquarium-card:active,
    .feature-card:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
    
    /* Better tap feedback */
    a:active,
    button:active {
        opacity: 0.8;
    }
}

/* ============================================
   PRINT STYLES (bonus)
   ============================================ */
@media print {
    header,
    footer,
    .cookie-banner,
    .mobile-menu-btn,
    .hero-bubbles {
        display: none !important;
    }
    
    main {
        padding-top: 0;
    }
    
    .hero {
        background: white !important;
        color: black !important;
        padding: 2rem 0;
        margin-top: 0;
    }
    
    .hero h1,
    .hero p {
        color: black !important;
        text-shadow: none !important;
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* Focus visible for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #06b6d4;
    outline-offset: 2px;
}

/* ============================================
   DARK MODE SUPPORT (optional - future)
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* Future dark mode styles can go here */
}