/**
 * ShutterDev Mobile Responsiveness Fixes
 * Addresses touch targets, tablet breakpoints, and ultra-small devices
 * Created: 2026-03-16
 */

/* ============================================
   Touch Target Improvements (44px minimum)
   Per Apple/Google accessibility guidelines
   ============================================ */

/* Buttons and interactive elements need 44px minimum height */
.btn,
button:not(.mobile-menu-btn),
.feature-tab,
.donation-btn,
.faq-question,
.nav-dropdown-item {
    min-height: 44px;
}

/* Form inputs need larger tap targets on mobile */
@media (max-width: 768px) {
    .form-input,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 0.875rem 1rem;
    }

    .form-label {
        font-size: 0.9375rem;
        margin-bottom: var(--space-sm);
    }

    /* Larger buttons on mobile */
    .btn {
        padding: 0.875rem 1.5rem;
        min-height: 48px;
    }

    .btn-lg {
        padding: 1rem 2rem;
        min-height: 52px;
    }

    /* Screenshot thumbnails - larger for touch */
    .screenshot-thumb {
        width: 100px;
        min-height: 60px;
    }

    /* Mobile menu links need better touch targets */
    .mobile-menu-link {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* ============================================
   Tablet Range (768px - 1024px) Improvements
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Dashboard grid - narrower sidebar on tablets */
    .dashboard-grid {
        grid-template-columns: 220px 1fr;
        gap: var(--space-lg);
    }

    /* Product hero - better spacing */
    .product-hero-inner {
        gap: var(--space-2xl);
    }

    /* Tutorial sidebar - narrower */
    .tutorial-layout {
        grid-template-columns: 200px 1fr;
    }

    /* Feature detail grids - tighter gaps */
    .feature-detail {
        gap: var(--space-2xl);
    }

    /* Requirements grid - stays 2 columns but tighter */
    .requirements-grid {
        gap: var(--space-md);
    }

    /* Showcase inner */
    .showcase-inner {
        min-height: 500px;
    }

    /* Hero stats - smaller font */
    .hero-stat-value {
        font-size: 2rem;
    }

    /* Feature tabs - ensure they wrap nicely */
    .feature-tabs {
        gap: var(--space-xs);
    }

    .feature-tab {
        padding: var(--space-sm) var(--space-lg);
        font-size: 0.875rem;
    }
}

/* ============================================
   Ultra-Small Devices (< 375px)
   ============================================ */
@media (max-width: 374px) {
    /* Tighter container padding */
    .container {
        padding: 0 var(--space-sm);
    }

    /* Smaller typography */
    h1, .hero-title {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.125rem;
    }

    /* Hero adjustments */
    .hero-badge {
        font-size: 0.6875rem;
        padding: var(--space-xs) var(--space-sm);
    }

    .hero-description {
        font-size: 0.875rem;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--space-md);
    }

    .hero-stat-value {
        font-size: 1.5rem;
    }

    /* Buttons - full width on tiny screens */
    .hero-actions .btn,
    .showcase-content .btn,
    .cta .btn {
        width: 100%;
        justify-content: center;
    }

    /* Cards - less padding */
    .card {
        padding: var(--space-md);
    }

    /* CTA section */
    .cta {
        padding: var(--space-xl) var(--space-md);
    }

    .cta h2 {
        font-size: 1.25rem;
    }

    /* Product meta stacks */
    .product-meta {
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
    }

    /* Section header */
    .section-header p {
        font-size: 0.9375rem;
    }

    /* Showcase */
    .showcase-content {
        padding: var(--space-lg);
    }

    .showcase-title {
        font-size: 1.5rem;
    }

    /* Footer */
    .footer-brand {
        max-width: 100%;
    }

    .footer-legal {
        flex-direction: column;
        gap: var(--space-sm);
    }
}

/* ============================================
   Additional Section Padding Fixes
   ============================================ */
@media (max-width: 768px) {
    /* Catch any remaining large inline paddings */
    section[style*="padding-top: 120px"],
    section[style*="padding-top:120px"] {
        padding-top: 80px !important;
    }

    /* Download item layout */
    .download-item {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }

    .download-item .btn {
        width: 100%;
    }

    /* Sidebar navigation collapse */
    .sidebar-link {
        padding: var(--space-md) var(--space-sm);
        min-height: 44px;
    }
}

/* ============================================
   Navigation Touch Improvements
   ============================================ */

/* Touch-friendly dropdown support (works with JS) */
.nav-dropdown.touch-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
}

/* Larger dropdown items for touch */
@media (max-width: 1024px) {
    .nav-dropdown-item {
        padding: var(--space-md) var(--space-lg);
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ============================================
   Copy Field Mobile Fix
   ============================================ */
@media (max-width: 400px) {
    .sd-copy-field {
        flex-direction: column;
    }

    .sd-copy-field input {
        border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
    }

    .sd-copy-btn {
        width: 100%;
        justify-content: center;
        border-radius: 0 0 var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem);
    }
}

/* ============================================
   Landscape Mode Improvements
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce section padding */
    .section {
        padding: var(--space-xl) 0;
    }

    .section-header {
        margin-bottom: var(--space-lg);
    }

    /* Hero compact */
    .hero-content {
        padding: var(--space-sm) 0;
    }

    .hero-badge {
        margin-bottom: var(--space-sm);
    }

    /* CTA compact */
    .cta {
        padding: var(--space-lg);
    }
}

/* ============================================
   iPad/Tablet Landscape (1024px width, short height)
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding-bottom: var(--space-2xl);
    }

    .hero-stats {
        margin-top: var(--space-2xl);
    }

    .showcase-inner {
        min-height: 450px;
    }
}

/* ============================================
   Print Styles (for when users print pages)
   ============================================ */
@media print {
    .navbar,
    .mobile-menu,
    .mobile-menu-btn,
    .footer,
    .cta {
        display: none !important;
    }

    .hero {
        min-height: auto;
        padding-top: 0;
    }

    body {
        background: white;
        color: black;
    }

    .card {
        border: 1px solid #ccc;
        box-shadow: none;
    }
}

/* ============================================
   Expanded Navigation Dropdown (Memora)
   ============================================ */

/* Wider dropdown for product sections */
.nav-dropdown-menu-wide {
    min-width: 220px;
}

/* Section label within dropdown */
.nav-dropdown-section {
    display: flex;
    flex-direction: column;
}

.nav-dropdown-label {
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-primary);
    padding: var(--space-sm) var(--space-lg) var(--space-xs);
    margin-bottom: var(--space-xs);
}

/* CTA item in dropdown — simple link, not a button */
.nav-dropdown-item-cta {
    background: none;
    color: var(--color-accent-light) !important;
    margin: 0;
    margin-top: var(--space-xs);
    border-radius: 0;
    text-align: left;
    font-weight: 500;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-sm);
}

.nav-dropdown-item-cta:hover {
    opacity: 1;
    background: var(--color-bg-tertiary);
    color: var(--color-accent) !important;
}

/* Mobile menu CTA link */
.mobile-menu-link-cta {
    background: var(--gradient-primary);
    color: white !important;
    margin: var(--space-sm) var(--space-md);
    margin-top: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 600;
    padding-left: var(--space-md) !important;
}

/* ============================================
   Feature Card Links (Internal Linking)
   ============================================ */

/* Clickable feature cards that link to feature pages */
.feature-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.feature-card-link:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 0 30px var(--color-accent-glow);
}

.feature-card-link:hover .card-title {
    color: var(--color-accent-light);
}

.feature-card-link:hover .feature-link-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* "Learn more" arrow text */
.feature-link-arrow {
    display: block;
    margin-top: var(--space-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-accent);
    opacity: 0.7;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* Focus styles for accessibility */
.feature-card-link:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

.feature-card-link:focus:not(:focus-visible) {
    outline: none;
}

.feature-card-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}