/* This file contains styles specifically for mobile devices. */

/* Apply these styles only on screens 768px wide or smaller (like tablets and phones) */
@media (max-width: 768px) {

    /* --- Main Header Adjustments --- */
    .main-header {
        flex-direction: column; /* Stack header items vertically */
        padding: 10px;
        gap: 15px; /* Add space between stacked items */
    }

    .welcome-message h1 {
        font-size: 1.2em; /* Make the welcome text smaller */
    }

    .search-form-container {
        width: 100%; /* Make search bar take full width */
    }

    /* --- Grid Container Adjustments --- */
    #grid-container {
        display: flex; /* Use flexbox for easier control */
        flex-direction: column; /* Stack widgets in a single column */
        gap: 15px;
    }

    .grid-item {
        width: 100% !important; /* Force all widgets to be full-width */
        margin: 0 !important;
        height: auto !important; /* Let height adjust to content */
    }

    /* --- Widget-Specific Adjustments --- */

    /* Weather Widget */
    .weather-details {
        grid-template-columns: 1fr; /* Stack weather details in a single column */
    }

    /* Hourly Forecast */
    .hourly-forecast-container {
        justify-content: flex-start; /* Prevent horizontal centering on small screens */
    }

    /* Calendar Widget */
    .calendar-date {
        font-size: 0.8em;
        padding: 5px;
    }

    /* Quick Links Widget */
    .links-container {
        grid-template-columns: 1fr 1fr; /* Creates a 2-column grid for links */
    }

    /* To-Do List */
    #todo-input {
        width: 100%;
    }

    /* Modals (for adding links, etc.) */
    .modal-content {
        width: 95%;
        margin: auto;
    }

    /* News/Stocks/Crypto Widgets */
    .news-item h4, .financial-item .financial-symbol {
        font-size: 1em; /* Adjust font size for titles */
    }
    .news-item p, .financial-item .financial-price {
        font-size: 0.9em; /* Adjust font size for descriptions/prices */
    }

    /* Footer Buttons */
    .page-footer {
        flex-direction: column;
        gap: 10px;
    }

    /* Auth Forms */
    .auth-container {
        padding: 15px;
    }
    .auth-form {
        width: 100%;
        max-width: none;
    }
}