/* Mobile Responsive CSS for Love Tarot Website */

/* Base Mobile Styles */
@media screen and (max-width: 768px) {
    
    /* Navigation Mobile Styles */
    .navbar {
        padding: 0.5rem 1rem;
    }
    
    .nav-container {
        flex-direction: column;
        padding: 1rem;
    }
    
    .nav-logo h1 {
        font-size: 1.5rem;
        text-align: center;
    }
    
    .nav-logo .tagline {
        display: block;
        font-size: 0.8rem;
        margin-top: 0.2rem;
    }
    
    .nav-links {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }
    
    .nav-dropdown {
        position: relative;
    }
    
    .dropdown-menu {
        position: static;
        display: none;
        background: white;
        border-radius: 8px;
        padding: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .nav-dropdown:hover .dropdown-menu {
        display: block;
    }
    
    /* Hero Section Mobile */
    .hero-section {
        padding: 2rem 1rem;
        min-height: 60vh;
    }
    
    .hero-title {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        margin: 1rem 0;
    }
    
    .hero-features {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .feature-tag {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    .love-energy-display {
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
    }
    
    .energy-item {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    /* Reading Options Mobile */
    .reading-options {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .reading-card {
        padding: 2rem 1.5rem;
    }
    
    .card-icon {
        font-size: 3rem;
    }
    
    .reading-card h3 {
        font-size: 1.5rem;
    }
    
    .reading-card p {
        font-size: 0.95rem;
    }
    
    .card-keywords {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .keyword {
        font-size: 0.75rem;
        padding: 0.3rem 0.8rem;
    }
    
    /* Spreads Grid Mobile */
    .spreads-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .spread-card {
        padding: 1.5rem;
    }
    
    .spread-preview {
        margin-bottom: 1rem;
    }
    
    .card-position {
        width: 35px;
        height: 50px;
        font-size: 0.8rem;
    }
    
    /* Daily Card Mobile */
    .card-day-container {
        padding: 1rem;
    }
    
    .daily-card {
        max-width: 250px;
        margin: 0 auto;
    }
    
    /* Form Elements Mobile */
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
    }
    
    .btn, .reading-btn, .spread-btn {
        padding: 1rem;
        font-size: 1rem;
        width: 100%;
        margin-top: 1rem;
    }
    
    /* Tarot Card Mobile */
    .tarot-card {
        width: 80px;
        height: 120px;
        margin: 0.5rem;
    }
    
    .tarot-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 1rem;
        padding: 1rem;
    }
    
    /* Reading Results Mobile */
    .result-container {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .result-header h2 {
        font-size: 1.5rem;
    }
    
    .interpretation-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .interpretation-card {
        padding: 1rem;
    }
    
    /* Celtic Cross Mobile Layout */
    .celtic-cross-layout {
        grid-template-columns: repeat(3, 80px);
        gap: 0.5rem;
    }
    
    .celtic-card {
        width: 70px;
        height: 100px;
        font-size: 1.5rem;
    }
    
    /* Three Card Spread Mobile */
    .three-card-spread {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    
    .three-card-spread .tarot-card {
        width: 120px;
        height: 180px;
        margin: 0 auto;
    }
    
    /* Compatibility Form Mobile */
    .compatibility-form {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .zodiac-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    .zodiac-sign {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
    
    /* Soulmate Spread Mobile */
    .soulmate-spread {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 1rem;
    }
    
    /* Future Love Mobile */
    .future-timeline {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .timeline-period {
        width: 100%;
        max-width: none;
    }
    
    /* Testimonials Mobile */
    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .testimonial {
        padding: 1rem;
    }
    
    /* Footer Mobile */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }
    
    .footer-section {
        margin-bottom: 1rem;
    }
    
    /* Utility Classes */
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-center {
        text-align: center !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
}

/* Tablet Styles */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    
    .nav-links {
        gap: 1.5rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .reading-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .spreads-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .celtic-cross-layout {
        grid-template-columns: repeat(4, 90px);
        grid-template-rows: repeat(5, 110px);
        gap: 1rem;
    }
    
    .celtic-card {
        width: 90px;
        height: 130px;
        font-size: 2rem;
    }
    
    .interpretation-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Large Mobile Devices */
@media screen and (max-width: 480px) {
    
    .container {
        padding: 0 0.5rem;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .reading-card {
        padding: 1.5rem 1rem;
    }
    
    .reading-card h3 {
        font-size: 1.3rem;
    }
    
    .card-icon {
        font-size: 2.5rem;
    }
    
    .celtic-cross-layout {
        grid-template-columns: repeat(3, 60px);
        grid-template-rows: repeat(6, 80px);
        gap: 0.3rem;
        padding: 0.5rem;
    }
    
    .celtic-card {
        width: 60px;
        height: 85px;
        font-size: 1.2rem;
    }
    
    .position-label {
        font-size: 0.6rem;
        bottom: -20px;
    }
    
    .tarot-card {
        width: 70px;
        height: 105px;
        margin: 0.3rem;
    }
    
    .zodiac-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .testimonial {
        padding: 0.8rem;
    }
    
    .testimonial p {
        font-size: 0.85rem;
    }
}

/* Landscape Mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
    
    .hero-section {
        min-height: 80vh;
        padding: 1rem;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .love-energy-display {
        flex-direction: row;
        gap: 1rem;
    }
    
    .nav-container {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .nav-links {
        flex-direction: row;
        gap: 1rem;
    }
}

/* High DPI / Retina Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    
    .card-back,
    .tarot-card,
    .celtic-card {
        backface-visibility: hidden;
        transform: translateZ(0);
    }
    
    .card-pattern,
    .starfield::before,
    .floating-hearts::before {
        will-change: transform;
    }
}

/* Accessibility Improvements for Mobile */
@media screen and (max-width: 768px) {
    
    /* Larger touch targets */
    .nav-link,
    .dropdown-item,
    .btn,
    .reading-btn,
    .spread-btn,
    .tarot-card {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better text contrast on small screens */
    .hero-subtitle,
    .section-description {
        color: #2c3e50;
        line-height: 1.5;
    }
    
    /* Improved button spacing */
    .btn + .btn,
    .reading-btn + .reading-btn {
        margin-top: 0.5rem;
    }
    
    /* Focus indicators for mobile navigation */
    .nav-link:focus,
    .dropdown-item:focus {
        outline: 2px solid #e74c3c;
        outline-offset: 2px;
    }
}

/* Print Styles */
@media print {
    
    .navbar,
    .footer,
    .btn,
    .reading-btn,
    .spread-btn,
    .hero-features,
    .love-energy-display {
        display: none !important;
    }
    
    .hero-title,
    .section-title {
        color: #000 !important;
        font-size: 18pt !important;
    }
    
    .tarot-card,
    .celtic-card {
        border: 1px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
    }
    
    .interpretation-text,
    .card-meaning {
        color: #000 !important;
        background: transparent !important;
    }
}