body {
    font-family: Arial, sans-serif;
    margin: 40px;
    background-color: #f0f4f8;
    color: #333;
}
.lookup-section {
    background-image: url("{% static 'images/generic_weather.jpg' %}");
    background-size: cover;
    background-position: center;
    padding: 40px;
    text-align: center;
    color: black;
}
h1 {
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
form {
    display: inline-block;
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    max-width: 300px;
}
button {
    background-color: #0078d7;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
button:hover {
    background-color: #005ea6;
}
.result {
    margin: 0;
    padding: 40px;
    min-height: 50vh;
    background-size: cover;
    background-position: center;
    transition: background 0.5s ease-in-out;
}
.result-content {
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    max-width: 300px;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* ── Calendar─*/
 
        .cal-header {
            margin: 2rem 0 0.5rem;
        }
 
        .cal-header h2 {
            margin: 0 0 0.25rem;
            font-size: 1.3rem;
        }
 
        .cal-header p.source {
            margin: 0;
            font-size: 0.8rem;
            opacity: 0.55;
        }
 
        /* Day-of-week header row */
        .cal-dow {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
            margin-bottom: 6px;
        }
 
        .cal-dow span {
            text-align: center;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            opacity: 0.5;
            padding: 4px 0;
        }
 
        /* One calendar week */
        .cal-week {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
            margin-bottom: 6px;
        }
 
        /* Individual day card */
        .cal-day {
            border: 1px solid rgba(128,128,128,0.2);
            border-radius: 10px;
            padding: 10px 8px;
            min-height: 130px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            background: rgba(255,255,255,0.03);
            transition: transform 0.15s, box-shadow 0.15s;
        }
 
        .cal-day:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(0,0,0,0.15);
        }
 
        /* Empty padding cell (before range starts / after range ends) */
        .cal-day.empty {
            border-color: transparent;
            background: transparent;
            pointer-events: none;
        }
 
        .cal-day .day-date {
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            opacity: 0.45;
        }
 
        .cal-day .day-emoji {
            font-size: 1.6rem;
            line-height: 1;
            margin: 2px 0;
        }
 
        .cal-day .day-condition {
            font-size: 0.65rem;
            opacity: 0.65;
            line-height: 1.2;
        }
 
        .cal-day .day-temps {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            font-size: 0.78rem;
            font-weight: 600;
        }
 
        .cal-day .day-temps .hi { color: #e8633a; }
        .cal-day .day-temps .lo { color: #5b9bd5; }
 
        .cal-day .day-extra {
            font-size: 0.62rem;
            opacity: 0.5;
            display: flex;
            justify-content: space-between;
        }
 
        /* Responsive: stack on very small screens */
        @media (max-width: 540px) {
            .cal-dow,
            .cal-week {
                grid-template-columns: repeat(7, 1fr);
                gap: 3px;
            }
            .cal-day {
                padding: 6px 4px;
                min-height: 100px;
            }
            .cal-day .day-emoji { font-size: 1.1rem; }
            .cal-day .day-condition { display: none; }
        }