/* Parallax effect for the server opening background on larger screens */
@media (min-width: 1025px) {
    .server-opening-section {
        background-attachment: fixed;
    }
}

@media (max-width: 1024px) { 
    .navbar-left, .navbar-right {
        display: none;
    }

    .navbar {
        justify-content: center; 
        background-color: rgba(31, 41, 55, 0.8);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--border-color);
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 1000;
        transition: background-color 0.3s ease;
    }

    .navbar.menu-open {
        background-color: var(--surface-color);
        backdrop-filter: none;
    }

    .hamburger {
        display: block;
        cursor: pointer;
        z-index: 1002;
        position: absolute;
        right: 2rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .mobile-nav-menu {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: -100%;
        top: 0;
        height: 100%;
        width: 80%;
        max-width: 300px;
        background-color: var(--surface-color);
        padding-top: 80px;
        transition: left 0.3s ease-in-out;
        z-index: 1001;
        box-shadow: 5px 0 15px rgba(0,0,0,0.2);
    }
    
    .mobile-nav-menu.active {
        left: 0;
    }

    .mobile-nav-menu .nav-menu {
        display: flex;
        flex-direction: column;
        list-style: none;
        gap: 0;
        width: 100%;
        text-align: left;
        flex-grow: 1;
    }
    
    .mobile-nav-menu .nav-item {
        padding: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .mobile-nav-menu .nav-link {
        padding: 1rem 2rem;
        width: 100%;
    }
    
    .mobile-nav-menu .nav-link::after {
        display: none; 
    }

    .nav-discord-mobile {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        background-color: #5865F2;
        color: white;
        padding: 1rem 2rem;
        font-weight: 600;
        margin: 1rem;
        border-radius: 8px;
    }
    .nav-discord-mobile img {
        width: 24px;
        height: 24px;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .features-section {
        padding: 4rem 1rem;
    }

    .feature-card {
        flex-basis: 100%;
        max-width: 400px;
    }

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

    .hero-content p {
        font-size: 1rem;
    }

    .features-section h2, .community-section h2, .join-guide-section h2, .server-opening-section h2 {
        font-size: 2rem;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    /* Make hero section more mobile friendly */
    .hero {
        padding: 100px 1.5rem 4rem;
    }
    .hero-content {
        text-align: center;
        width: 100%;
        max-width: 100%;
    }
    .hero-content h1 {
        font-size: 2.2rem;
    }
    .ip-container {
        /* Make IP copy container stack on mobile */
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    .ip-container span {
        padding: 0;
    }
    .ip-container button {
        width: 100%;
    }

    /* Adjust section paddings for smaller screens */
    .server-opening-section, .features-section, .join-guide-section, .community-section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .status-section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .page-container {
        padding: 100px 1.5rem 3rem;
    }

    /* Adjust headings */
    .features-section h2, .community-section h2, .join-guide-section h2, .server-opening-section h2 {
        font-size: 1.8rem;
        margin-bottom: 3rem;
    }

    /* Countdown timer adjustments */
    .countdown-container {
        gap: 1rem;
    }
    .countdown-item {
        padding: 0.75rem;
        min-width: 85px;
    }
    .countdown-item span:first-child {
        font-size: 2.2rem;
    }
    .beta-notice {
        font-size: 1rem;
        padding: 0 0.5rem;
    }

    /* Status cards adjustments */
    .status-container {
        gap: 1rem;
    }
    .status-card {
        flex-basis: 45%;
        flex-grow: 1;
        min-width: 140px;
        padding: 1rem;
    }

    /* Join Guide tabs can wrap */
    .join-tabs {
        flex-wrap: wrap;
    }
    .join-content {
        padding: 1.5rem;
        gap: 1.5rem;
    }
    .join-instructions ol {
        padding-left: 20px;
        margin-left: 0;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 1.5rem;
    }
    .footer-left {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    /* Navbar adjustments for very small screens */
    .hamburger {
        right: 1rem;
    }
    .logo-img {
        height: 40px;
    }
    
    .hero {
        padding-top: 80px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .hero-content h1 {
        font-size: 2rem;
    }
    .hero-content p {
        font-size: 0.9rem;
    }

    /* Make countdown items wrap into two columns */
    .countdown-item {
        flex-basis: 40%;
        flex-grow: 1;
    }
    .countdown-item span:first-child {
        font-size: 2rem;
    }

    /* Status cards stack into a single column */
    .status-card {
        flex-basis: 100%;
    }

    /* Join tabs get smaller */
    .tab-btn {
        padding: 0.6rem 1.2rem;
        font-size: 1rem;
    }

    /* Adjust page container padding */
    .page-container {
        padding: 80px 1rem 2rem;
    }
    .page-container h1 {
        font-size: 1.8rem;
    }
}