/* 
* BC Game Videos - Responsive Stylesheet
* Ensures the website is fully responsive and mobile-friendly
*/

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;600&display=swap');

/* Tablet Devices (768px and up) */
@media screen and (max-width: 992px) {
    .hero .container {
        flex-direction: column;
        text-align: center;
    }

    .hero-content {
        margin-bottom: var(--spacing-lg);
        max-width: 100%;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .cta-buttons {
        justify-content: center;
    }

    .hero-image {
        max-width: 400px;
        margin: 0 auto;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-logo {
        text-align: center;
        margin-bottom: var(--spacing-xl);
    }

    .footer-links {
        width: 100%;
    }
}

/* Mobile Devices (576px and up) */
@media screen and (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }

    .mobile-menu-icon {
        display: flex;
    }

    .menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--primary-color);
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-md) 0;
        display: none;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }

    .menu.active {
        display: flex;
    }

    .menu li {
        margin: var(--spacing-xs) 0;
    }

    .features-grid, 
    .game-resources {
        grid-template-columns: 1fr;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input {
        border-radius: var(--border-radius);
        margin-bottom: var(--spacing-xs);
    }

    .newsletter-form button {
        border-radius: var(--border-radius);
        width: 100%;
    }

    .footer-links {
        flex-direction: column;
    }

    .footer-column {
        text-align: center;
        margin-bottom: var(--spacing-lg);
    }

    .social-icons {
        justify-content: center;
    }
}

/* Small Mobile Devices */
@media screen and (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .btn {
        width: 100%;
        margin-bottom: var(--spacing-xs);
    }

    .cta-buttons .btn {
        margin-right: 0;
    }
}

/* High-DPI Displays */
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
    /* Optimizations for high-resolution displays */
    .logo img,
    .footer-logo img {
        transform: translateZ(0);
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --light-color: #121212;
        --dark-color: #f5f5f5;
    }

    .feature-card,
    .resource-card {
        background-color: #1e1e1e;
        color: #e0e0e0;
    }

    .resource-links a {
        border-bottom-color: #333;
    }

    .newsletter-form input {
        background-color: #2d2d2d;
        color: white;
    }
}