/**
 * Responsive Polish & Touch-Friendly Enhancements
 * Tendr Website
 */

/* ==================== */
/* TOUCH TARGET SIZES */
/* Ensure all interactive elements are at least 44x44px */
/* ==================== */
@media (max-width: 768px) {
    button,
    a.btn,
    .nav-menu a,
    .mobile-menu-toggle,
    .social-icon,
    .carousel-arrow,
    .indicator {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ==================== */
/* MOBILE OPTIMIZATIONS */
/* ==================== */
@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }
    
    /* Adjust hero section for mobile */
    .hero-section {
        min-height: auto;
        padding-top: 100px;
        padding-bottom: var(--space-16);
    }
    
    /* Stack app badges vertically on small screens */
    .hero-cta,
    .final-cta-buttons {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .app-badge {
        width: 100%;
        max-width: 200px;
    }
    
    /* Improve card spacing on mobile */
    .problem-card,
    .feature-card,
    .testimonial-card,
    .pricing-card,
    .adhd-card {
        padding: var(--space-6);
    }
    
    /* Reduce emoji sizes on mobile */
    .card-emoji {
        font-size: 2.5rem;
    }
    
    /* Adjust timeline for mobile */
    .steps-timeline {
        gap: var(--space-8);
    }
    
    /* Make tables scroll horizontally */
    .comparison-table-wrapper {
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(-1 * var(--space-4));
        padding: 0 var(--space-4);
    }
    
    /* Adjust feature showcase spacing */
    .feature-showcase {
        padding: var(--space-12) 0;
    }
    
    /* Improve pricing card layout on mobile */
    .pricing-card {
        padding: var(--space-8) var(--space-6);
    }
    
    /* Adjust FAQ grid spacing */
    .pricing-faq {
        gap: var(--space-4);
    }
    
    /* Improve footer spacing */
    .footer-grid {
        gap: var(--space-8);
    }
}

/* ==================== */
/* SMALL MOBILE (< 480px) */
/* ==================== */
@media (max-width: 480px) {
    /* Further reduce typography */
    h1, .hero-headline {
        font-size: var(--text-4xl);
    }
    
    h2, .section-headline {
        font-size: var(--text-3xl);
    }
    
    h3, .card-title {
        font-size: var(--text-lg);
    }
    
    /* Reduce section padding */
    section {
        padding: 2.5rem 0;
    }
    
    /* Adjust trust badges */
    .trust-badges {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .badge {
        width: 100%;
        justify-content: center;
    }
    
    /* Simplify trust elements */
    .trust-elements {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    /* Adjust theme card size */
    .theme-card {
        flex: 0 0 240px;
        height: 400px;
    }
}

/* ==================== */
/* TABLET (768px - 1024px) */
/* ==================== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Adjust container max-width for tablets */
    .container {
        max-width: var(--container-lg);
    }
    
    /* Two-column grids for medium screens */
    .problem-grid,
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .features-grid .feature-card:last-child:nth-child(odd) {
        grid-column: span 2;
    }
    
    /* Adjust feature showcase */
    .feature-showcase {
        gap: var(--space-12);
    }
}

/* ==================== */
/* LANDSCAPE MOBILE */
/* ==================== */
@media (max-width: 1024px) and (orientation: landscape) {
    /* Reduce hero height in landscape */
    .hero-section {
        min-height: 80vh;
    }
    
    /* Adjust spacing for landscape */
    section {
        padding: 4rem 0;
    }
}

/* ==================== */
/* LARGE DESKTOP (> 1536px) */
/* ==================== */
@media (min-width: 1536px) {
    /* Increase font sizes for large screens */
    html {
        font-size: 18px;
    }
    
    /* Adjust hero visual size */
    .hero-visual {
        max-width: 600px;
    }
    
    /* Increase feature showcase spacing */
    .feature-showcase {
        gap: var(--space-24);
    }
}

/* ==================== */
/* PRINT STYLES */
/* ==================== */
@media print {
    /* Hide non-essential elements */
    .site-header,
    .mobile-menu-overlay,
    .sticky-download-bar,
    .scroll-progress,
    .carousel-arrow,
    .carousel-indicators {
        display: none !important;
    }
    
    /* Adjust colors for print */
    body {
        background: white;
        color: black;
    }
    
    /* Remove backgrounds */
    section {
        background: white !important;
    }
    
    /* Adjust links */
    a {
        text-decoration: underline;
    }
    
    /* Page breaks */
    h2, h3 {
        page-break-after: avoid;
    }
    
    .problem-card,
    .feature-card,
    .testimonial-card,
    .pricing-card {
        page-break-inside: avoid;
    }
}

/* ==================== */
/* HIGH CONTRAST MODE */
/* ==================== */
@media (prefers-contrast: high) {
    /* Increase contrast for accessibility */
    .hero-subheadline,
    .card-text,
    .feature-description {
        color: var(--deep-slate);
    }
    
    /* Strengthen borders */
    .card,
    .pricing-card,
    .theme-card {
        border: 2px solid var(--deep-slate);
    }
    
    /* Improve button contrast */
    .btn-primary {
        background: var(--mint-primary);
        color: var(--deep-slate);
    }
}

/* ==================== */
/* DARK MODE SUPPORT */
/* (Optional - can be enabled/disabled) */
/* ==================== */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable dark mode
    :root {
        --deep-slate: #E8F4F8;
        --medium-slate: #B8D8E8;
        --light-slate: #8D9DBB;
        --off-white: #1A1A1A;
        --white: #0D0D0D;
    }
    
    body {
        background: var(--white);
        color: var(--deep-slate);
    }
    
    .card,
    .problem-card,
    .feature-card,
    .testimonial-card,
    .pricing-card {
        background: #1A1A1A;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    */
}

/* ==================== */
/* TOUCH DEVICE SPECIFIC */
/* ==================== */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .card:hover,
    .problem-card:hover,
    .feature-card:hover,
    .testimonial-card:hover,
    .pricing-card:hover,
    .adhd-card:hover {
        transform: none;
    }
    
    /* Make interactive elements more obvious */
    .btn,
    .app-badge,
    .theme-card {
        box-shadow: var(--shadow-lg);
    }
    
    /* Increase tap target areas */
    .carousel-track {
        padding: var(--space-6);
    }
    
    /* Disable parallax on touch devices */
    .hero-visual {
        transform: none !important;
    }
}

/* ==================== */
/* SCROLLBAR STYLING */
/* (Modern browsers) */
/* ==================== */
@media (min-width: 1024px) {
    /* Custom scrollbar for desktop */
    ::-webkit-scrollbar {
        width: 12px;
    }
    
    ::-webkit-scrollbar-track {
        background: var(--off-white);
    }
    
    ::-webkit-scrollbar-thumb {
        background: var(--mint-primary);
        border-radius: 6px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: var(--coral-accent);
    }
    
    /* Firefox scrollbar styling */
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--mint-primary) var(--off-white);
    }
}

/* ==================== */
/* ACCESSIBILITY ENHANCEMENTS */
/* ==================== */

/* Visible focus for keyboard navigation */
*:focus-visible {
    outline: 3px solid var(--mint-primary);
    outline-offset: 3px;
}

/* Improve link visibility */
@media (max-width: 768px) {
    a:not(.btn):not(.app-badge) {
        text-decoration: underline;
        text-decoration-color: var(--mint-primary);
        text-decoration-thickness: 2px;
        text-underline-offset: 2px;
    }
}

/* Ensure text remains visible during webfont load */
@font-face {
    font-display: swap;
}

/* ==================== */
/* PERFORMANCE OPTIMIZATIONS */
/* ==================== */

/* Will-change for animated elements */
.theme-card {
    will-change: transform;
}

/* Contain layout for better performance */
.card,
.problem-card,
.feature-card,
.testimonial-card,
.pricing-card,
.adhd-card {
    contain: layout style paint;
}

/* ==================== */
/* SAFE AREA INSETS */
/* (For devices with notches) */
/* ==================== */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .site-header,
    .sticky-download-bar {
        padding-left: max(var(--space-4), env(safe-area-inset-left));
        padding-right: max(var(--space-4), env(safe-area-inset-right));
    }
}

/* ==================== */
/* REDUCED DATA MODE */
/* ==================== */
@media (prefers-reduced-data: reduce) {
    /* Disable background images */
    .hero-gradient,
    .theme-preview {
        background: var(--mint-primary);
    }
    
    /* Disable auto-play */
    video {
        autoplay: none;
    }
}