/* responsive.css - Mobile-First Design */

/* Small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .container {
        padding: 0 15px;
    }

    h1 { font-size: 2.5em; }
    h2 { font-size: 1.8em; }
    h3 { font-size: 1.4em; }

    .hero {
        padding: 60px 0;
    }

    .hero h1 {
        font-size: 2.8em;
    }

    .hero p {
        font-size: 1.2em;
    }

    nav .container {
        flex-direction: column;
        align-items: flex-start;
    }

    nav ul {
        flex-direction: column;
        width: 100%;
        margin-top: 15px;
        display: none; /* Hidden by default for mobile menu toggle */
    }

    nav ul.active {
        display: flex;
    }

    nav ul li {
        margin: 10px 0;
        width: 100%;
        text-align: center;
    }

    .menu-toggle {
        display: block; /* Show hamburger icon */
        color: white;
        font-size: 2em;
        cursor: pointer;
        position: absolute;
        right: 15px;
        top: 15px;
    }

    .card {
        padding: 20px;
    }

    .car-listing .car-details {
        flex-direction: column;
    }

    .car-listing .car-image {
        width: 100%;
        margin-bottom: 15px;
    }

    .car-listing .car-info {
        width: 100%;
    }
}

/* Medium devices (tablets, 601px to 992px) */
@media only screen and (min-width: 601px) and (max-width: 992px) {
    h1 { font-size: 3em; }
    h2 { font-size: 2.2em; }

    nav ul li {
        margin-left: 20px;
    }

    .hero h1 {
        font-size: 3.5em;
    }

    .car-listing .car-details {
        flex-direction: column;
    }

    .car-listing .car-image {
        width: 100%;
        margin-bottom: 15px;
    }

    .car-listing .car-info {
        width: 100%;
    }
}

/* Large devices (desktops, 993px and up) */
@media only screen and (min-width: 993px) {
    /* Default styles are generally for large devices */
    .menu-toggle {
        display: none; /* Hide hamburger icon on desktop */
    }
}

/* Dark Mode Styles */
body.dark-mode {
    --text-color: #f4f4f4;
    --light-text-color: #333;
    --background-color: #1a1a1a;
    --card-background: #2a2a2a;
    --border-color: #444;
    --shadow-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode nav {
    background-color: #2a2a2a;
}

body.dark-mode nav ul li a {
    color: #f4f4f4;
}

body.dark-mode footer {
    background-color: #2a2a2a;
}

body.dark-mode .card {
    box-shadow: var(--shadow-color) 0px 4px 12px;
}

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
    background-color: #3a3a3a;
    color: var(--text-color);
    border-color: #555;
}