/* Mobile-First Responsive Design for Bird Watching Pages */

/* Base Mobile Styles */
@media screen and (max-width: 768px) {
    /* Article Hero Section */
    .article-hero {
        padding: 80px 0 60px;
        text-align: center;
    }
    
    .article-hero h1 {
        font-size: 2.2rem;
        margin-bottom: 1rem;
        line-height: 1.2;
        padding: 0 20px;
    }
    
    .article-hero p {
        font-size: 1rem;
        padding: 0 20px;
        margin: 0 auto;
    }
    
    /* Article Content */
    .article-content {
        padding: 40px 15px;
        max-width: 100%;
    }
    
    .content-section {
        margin-bottom: 40px;
    }
    
    .content-section h2 {
        font-size: 1.6rem;
        margin-bottom: 15px;
        padding-bottom: 8px;
    }
    
    .content-section h3 {
        font-size: 1.3rem;
        margin: 20px 0 12px;
    }
    
    .content-section p {
        font-size: 0.95rem;
        line-height: 1.7;
        margin-bottom: 16px;
    }
    
    /* Bird Images */
    .bird-image {
        width: 100%;
        height: 200px;
        margin: 20px auto;
        border-radius: 12px;
    }
    
    /* Grid Layouts */
    .beginner-grid,
    .journal-grid,
    .ethics-grid,
    .song-grid,
    .behavior-grid,
    .technique-grid,
    .location-grid,
    .season-grid,
    .equipment-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 30px 0;
    }
    
    /* Cards */
    .beginner-card,
    .journal-card,
    .ethics-card,
    .song-card,
    .behavior-card,
    .technique-card,
    .location-card,
    .season-card,
    .equipment-card {
        padding: 20px;
        margin-bottom: 15px;
    }
    
    .beginner-card h4,
    .journal-card h4,
    .ethics-card h4,
    .song-card h4,
    .behavior-card h4,
    .technique-card h4,
    .location-card h4,
    .season-card h4,
    .equipment-card h4 {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }
    
    .beginner-card p,
    .journal-card p,
    .ethics-card p,
    .song-card p,
    .behavior-card p,
    .technique-card p,
    .location-card p,
    .season-card p,
    .equipment-card p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    /* Icons */
    .beginner-icon,
    .journal-icon,
    .ethics-icon,
    .song-icon,
    .behavior-icon,
    .technique-icon,
    .season-icon {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
    
    /* Special Sections */
    .encouragement-box,
    .conservation-highlight,
    .learning-technique,
    .species-spotlight,
    .pro-tip,
    .insight-box,
    .template-section {
        padding: 20px;
        margin: 20px 0;
        border-radius: 12px;
    }
    
    .encouragement-box h4,
    .conservation-highlight h4,
    .learning-technique h4,
    .species-spotlight h4,
    .pro-tip h4,
    .insight-box h4,
    .template-section h4 {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    /* Step by Step Sections */
    .step-by-step,
    .observation-guide,
    .activity-timeline {
        padding: 20px;
        margin: 20px 0;
    }
    
    .step-item,
    .behavior-sequence,
    .timeline-item {
        flex-direction: column;
        text-align: center;
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .step-number,
    .sequence-step {
        margin-right: 0;
        margin-bottom: 10px;
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .step-content h5,
    .sequence-content h5,
    .timeline-content h5 {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    
    .step-content p,
    .sequence-content p,
    .timeline-content p {
        font-size: 0.9rem;
    }
    
    /* Tables */
    .comparison-table,
    .settings-table table {
        font-size: 0.8rem;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
    }
    
    .comparison-table th,
    .comparison-table td,
    .settings-table th,
    .settings-table td {
        padding: 8px;
        font-size: 0.8rem;
    }
    
    /* Two Column Layouts */
    .do-dont-grid,
    .digital-analog-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .do-card,
    .dont-card,
    .digital-card,
    .analog-card {
        padding: 18px;
    }
    
    .do-card h4,
    .dont-card h4,
    .digital-card h4,
    .analog-card h4 {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }
    
    /* Common Birds Grid */
    .common-birds {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .bird-species-card {
        padding: 15px;
        text-align: left;
    }
    
    .bird-species-card h5 {
        font-size: 1rem;
    }
    
    .bird-species-card .habitat {
        font-size: 0.8rem;
    }
    
    .bird-species-card p {
        font-size: 0.85rem;
    }
    
    /* Mnemonic Grid */
    .mnemonic-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .mnemonic-card {
        padding: 15px;
    }
    
    .mnemonic-card h5 {
        font-size: 1rem;
    }
    
    .mnemonic-card .mnemonic {
        font-size: 0.9rem;
    }
    
    .mnemonic-card p {
        font-size: 0.85rem;
    }
    
    /* Frequency Charts */
    .frequency-chart {
        padding: 20px;
    }
    
    .frequency-bar {
        flex-direction: column;
        align-items: flex-start;
        margin: 10px 0;
    }
    
    .frequency-label {
        min-width: auto;
        margin-bottom: 5px;
        font-size: 0.9rem;
    }
    
    .frequency-visual {
        width: 100%;
        margin: 5px 0;
    }
    
    .frequency-value {
        font-size: 0.8rem;
        margin-top: 5px;
    }
    
    /* Threat Assessment */
    .threat-assessment {
        padding: 20px;
    }
    
    .threat-item {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
    
    .threat-severity {
        margin-right: 0;
        margin-bottom: 10px;
        min-width: auto;
    }
    
    .threat-content h5 {
        font-size: 1rem;
    }
    
    .threat-content p {
        font-size: 0.85rem;
    }
    
    /* Sample Entry */
    .sample-entry {
        padding: 20px;
        font-size: 0.8rem;
    }
    
    .sample-entry h4 {
        font-size: 1.1rem;
    }
    
    .entry-field {
        margin-bottom: 8px;
        display: block;
    }
    
    .entry-label {
        display: block;
        min-width: auto;
        margin-bottom: 3px;
        font-weight: bold;
    }
    
    .entry-value {
        display: block;
        margin-left: 0;
    }
    
    /* Tips and Checklists */
    .tips-list,
    .tips-box,
    .quick-tips,
    .mistake-warning,
    .checklist {
        padding: 15px;
        margin: 15px 0;
    }
    
    .tips-list h4,
    .tips-box h4,
    .quick-tips h4,
    .mistake-warning h4,
    .checklist h5 {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }
    
    .tips-list ul,
    .tips-box ul,
    .quick-tips ul,
    .mistake-warning ul,
    .checklist ul {
        padding-left: 18px;
    }
    
    .tips-list li,
    .tips-box li,
    .quick-tips li,
    .mistake-warning li,
    .checklist li {
        font-size: 0.9rem;
        margin-bottom: 8px;
        line-height: 1.5;
    }
    
    /* Equipment Comparison */
    .equipment-comparison {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .equipment-card {
        padding: 15px;
    }
    
    .equipment-card h5 {
        font-size: 1rem;
    }
    
    .equipment-card .pros,
    .equipment-card .cons {
        font-size: 0.85rem;
    }
    
    /* Navigation Improvements */
    .navbar {
        padding: 10px 0;
    }
    
    .nav-container {
        padding: 0 15px;
    }
    
    .nav-logo h2 {
        font-size: 1.3rem;
    }
    
    .language-switcher .lang-btn {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    
    .lang-text {
        display: none;
    }
    
    /* Footer Adjustments */
    .footer {
        padding: 30px 0 20px;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 25px;
    }
    
    .footer-section h3,
    .footer-section h4 {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }
    
    .footer-section p,
    .footer-section li {
        font-size: 0.9rem;
    }
    
    .footer-bottom {
        margin-top: 20px;
        padding-top: 15px;
    }
    
    .footer-bottom p {
        font-size: 0.8rem;
        text-align: center;
    }
}

/* Extra Small Mobile Devices */
@media screen and (max-width: 480px) {
    .article-hero h1 {
        font-size: 1.8rem;
        padding: 0 15px;
    }
    
    .article-hero p {
        font-size: 0.9rem;
        padding: 0 15px;
    }
    
    .article-content {
        padding: 30px 10px;
    }
    
    .content-section h2 {
        font-size: 1.4rem;
    }
    
    .content-section h3 {
        font-size: 1.2rem;
    }
    
    .bird-image {
        height: 180px;
        margin: 15px auto;
    }
    
    .beginner-card,
    .journal-card,
    .ethics-card,
    .song-card,
    .behavior-card,
    .technique-card,
    .location-card,
    .season-card,
    .equipment-card {
        padding: 15px;
    }
    
    .encouragement-box,
    .conservation-highlight,
    .learning-technique,
    .species-spotlight,
    .pro-tip,
    .insight-box,
    .template-section {
        padding: 15px;
        margin: 15px 0;
    }
    
    .step-by-step,
    .observation-guide,
    .activity-timeline {
        padding: 15px;
    }
    
    .step-item,
    .behavior-sequence,
    .timeline-item {
        padding: 12px;
    }
}

/* Touch-Friendly Improvements */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .beginner-card,
    .journal-card,
    .ethics-card,
    .song-card,
    .behavior-card,
    .technique-card,
    .location-card,
    .season-card,
    .equipment-card {
        min-height: 44px;
        cursor: pointer;
    }
    
    /* Remove hover effects on touch devices */
    .beginner-card:hover,
    .journal-card:hover,
    .ethics-card:hover,
    .song-card:hover,
    .behavior-card:hover,
    .technique-card:hover,
    .location-card:hover,
    .season-card:hover,
    .equipment-card:hover {
        transform: none;
    }
    
    .bird-image:hover {
        transform: none;
    }
    
    /* Better button styling for touch */
    .lang-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .nav-toggle {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Landscape Mobile Orientation */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .article-hero {
        padding: 60px 0 40px;
    }
    
    .article-hero h1 {
        font-size: 2rem;
    }
    
    .bird-image {
        height: 160px;
    }
    
    .beginner-grid,
    .journal-grid,
    .ethics-grid,
    .song-grid,
    .behavior-grid,
    .technique-grid,
    .location-grid,
    .season-grid,
    .equipment-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .bird-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Dark Mode Support for Mobile */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .article-hero {
        background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
    }
    
    .beginner-card,
    .journal-card,
    .ethics-card,
    .song-card,
    .behavior-card,
    .technique-card,
    .location-card,
    .season-card,
    .equipment-card {
        background: #2d3748;
        color: #e2e8f0;
    }
    
    .content-section h2,
    .content-section h3 {
        color: #e2e8f0;
    }
    
    .content-section p {
        color: #cbd5e0;
    }
}