/* ==========================================
   VSU-WAIS VERSION 6 - Responsive Production Layout
========================================== */

:root{
    --green:#146939;
    --dark:#17321A;
    --yellow:#FDC530;
    --bg:#F5F7F4;
    --card:#FFFFFF;
    --muted:#e6e5e5;
    --danger:#B42318;
    --orange:#F28C28;
    --shadow:0 6px 16px rgba(0,0,0,.12);
    --radius:clamp(16px,2vw,24px);
    --border:clamp(4px,.7vw,8px);
    --gap:clamp(12px,1.5vw,25px);
    --pad:clamp(14px,2vw,30px);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    width:100%;
    min-height:100%;
    font-size:16px;
}

body{
    width:100%;
    min-height:100vh;
    font-family:"Montserrat",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg);
    color:var(--dark);
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}

/* ==========================================
   MAIN DASHBOARD
========================================== */

.dashboard{
    width:min(100%,1080px);
    min-height:100vh;
    margin-inline:auto;
    background:var(--card);
    display:grid;
    grid-template-rows:auto auto auto auto 1fr auto;
    gap:var(--gap);
    padding:var(--pad);
}

/* ===========================================
    Header
============================================*/

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:clamp(12px,2vw,24px);
    padding:clamp(10px,1.4vw,18px) clamp(12px,2vw,22px);
    background:white;
    border-bottom:clamp(3px,.5vw,5px) solid #00954f;
}

.branding{
    display:flex;
    align-items:center;
    gap:clamp(10px,1.8vw,18px);
    min-width:0;
}

.logo{
    width:clamp(56px,8vw,96px);
    flex:0 0 auto;
}

.title{
    min-width:0;
}

.title h1{
    font-weight:700;
    font-size:clamp(1rem,2.6vw,1.75rem);
    line-height:1.15;
    color:var(--green);
}

.title h2{
    font-weight:400;
    font-size:clamp(.95rem,2.4vw,1.75rem);
    line-height:1.15;
    color:var(--dark);
    margin-top:2px;
}

.datetime{
    display:flex;
    flex-direction:column;
    gap:4px;
    align-items:flex-end;
    text-align:right;
    flex:0 0 auto;
}

.time-row,
.date-row{
    display:flex;
    align-items:center;
    gap:8px;
}

.time-row img,
.date-row img{
    width:20px;
    height:20px;
}

#clock{
    font-size:clamp(1.5rem,4vw,2.5rem);
    font-weight:600;
    color:var(--green);
    white-space:nowrap;
}

#date{
    font-size:clamp(.78rem,1.8vw,1.125rem);
    font-weight:400;
    color:var(--dark);
}

/* ===========================================
    UNIVERSAL CARD / SECTION STYLES
============================================*/

.top-section{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--gap);
}

.weather-card,
.heat-card,
.weather-advisory,
.hourly-section,
.forecast-section{
    background:var(--card);
    border-radius:var(--radius);
    border:var(--border) solid var(--green);
    box-shadow:var(--shadow);
}

.card-title,
.section-title{
    text-align:center;
    color:white;
    background:var(--green);
    font-weight:600;
}

.card-title{
    width:min(80%,260px);
    margin-inline:auto;
    margin-top:calc(var(--border) * -1 - 18px);
    padding:clamp(8px,1.2vw,12px);
    border-radius:0 0 20px 20px;
    font-size:clamp(1rem,2.4vw,1.625rem);
}

.section-title{
    width:max-content;
    max-width:100%;
    margin:calc(var(--border) * -1 - 18px) auto 12px;
    padding:clamp(8px,1.2vw,12px) clamp(18px,3vw,36px);
    border-radius:0 0 20px 20px;
    font-size:clamp(1.15rem,3vw,2.25rem);
}

/* ===========================================
    WEATHER CARD
============================================*/

.weather-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:clamp(16px,2vw,24px);
    min-height:clamp(360px,45vh,520px);
}

#weatherIcon{
    width:clamp(120px,20vw,220px);
    height:clamp(120px,20vw,220px);
    object-fit:contain;
    display:block;
    margin-top:clamp(8px,1.3vw,14px);
    animation:float 5s ease-in-out infinite;
}

#weatherText{
    font-size:clamp(2.3rem,6.3vw,4rem);
    font-weight:700;
    color:var(--green);
    text-align:center;
    line-height:1;
    overflow-wrap:anywhere;
}

.weather-details{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(10px,2vw,20px);
    align-items:start;
    margin-top:auto;
    padding-top:clamp(14px,2vw,24px);
}

.detail-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    min-width:0;
}

.detail-top{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
}

.temp-icon{
    width:clamp(28px,4.5vw,48px);
    height:clamp(36px,5.5vw,60px);
    object-fit:contain;
}

.rain-icon{
    width:clamp(36px,5.5vw,60px);
    height:clamp(36px,5.5vw,60px);
    object-fit:contain;
}

.detail-top h3,
.weather-details h3{
    font-size:clamp(1.8rem,5vw,3.5rem);
    color:var(--green);
    font-weight:700;
    text-align:center;
}

.detail-box span,
.weather-details span{
    display:block;
    font-size:clamp(.9rem,2.2vw,1.625rem);
    font-weight:600;
    text-align:center;
}

/* ===========================================
    HEAT CARD
============================================*/

.heat-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:clamp(16px,2vw,26px);
    min-height:clamp(360px,45vh,520px);
    overflow:hidden;
}

.heat-value{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

#heatValue{
    margin-top:clamp(10px,1.5vw,15px);
    font-size:clamp(4rem,11vw,7.5rem);
    line-height:.95;
    font-weight:700;
    color:var(--yellow);
    text-align:center;
}

.heat-level{
    margin-top:clamp(12px,2vw,20px);
    padding:clamp(10px,1.3vw,14px) clamp(20px,3.4vw,35px);
    border-radius:20px;
    background:var(--green);
    color:white;
    font-size:clamp(1rem,2.6vw,1.75rem);
    font-weight:600;
    text-align:center;
}

.heat-safe{ background:var(--green); }
.heat-caution{ background:var(--yellow); color:var(--dark); }
.heat-extreme-caution{ background:var(--orange); }
.heat-danger,
.heat-extreme-danger{ background:var(--danger); }
.heat-unavailable{ background:#6B7280; }

.heat-icon{
    width:clamp(80px,13vw,120px);
    margin-top:clamp(8px,1vw,14px);
    margin-bottom:0;
    object-fit:contain;
    animation:pulseHeat 2.5s infinite;
}

#heatAdvice{
    margin-top:clamp(8px,1.5vw,16px);
    width:min(92%,480px);
    text-align:center;
    font-size:clamp(1rem,2.4vw,1.5625rem);
    font-weight:600;
    line-height:1.2;
}

/* ===========================================
    WEATHER ADVISORY
============================================*/

.weather-advisory{
    display:flex;
    align-items:center;
    padding:clamp(18px,2.6vw,28px);
}

.advisory-content{
    width:100%;
}

#advisoryTitle{
    font-size:clamp(1.35rem,3.2vw,2.125rem);
    font-weight:700;
    color:var(--green);
    margin-bottom:clamp(6px,1vw,12px);
    text-transform:uppercase;
    letter-spacing:1px;
}

#advisoryText{
    font-size:clamp(1rem,2.4vw,1.625rem);
    line-height:1.45;
    font-weight:600;
    text-align:left;
    color:var(--dark);
    margin-top:10px;
}

/* ===========================================
     NEXT 5-HOURS
============================================*/

.hourly-section,
.forecast-section{
    padding:clamp(16px,2vw,24px);
}

#hourlyCards{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    gap:clamp(8px,1.4vw,15px);
}

.hour-card{
    background:var(--muted);
    border-radius:18px;
    padding:clamp(10px,1.4vw,14px) clamp(6px,1vw,8px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:0;
}

.hour-card h3{
    font-size:clamp(1rem,2.6vw,1.75rem);
    font-weight:600;
    color:var(--green);
    text-align:center;
}

.hour-card > img{
    width:clamp(34px,5vw,50px);
    height:clamp(34px,5vw,50px);
    object-fit:contain;
    display:block;
}

.hour-card p{
    font-size:clamp(.9rem,2.4vw,1.75rem);
    font-weight:600;
    text-align:center;
    line-height:1.1;
    overflow-wrap:anywhere;
}

.hour-card span{
    font-size:clamp(1.25rem,3.6vw,2.5rem);
    color:var(--green);
    font-weight:600;
}

.hour-rain{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.hour-rain img{
    width:clamp(18px,2.6vw,24px);
    height:clamp(18px,2.6vw,24px);
}

.hour-rain span{
    font-size:clamp(1rem,2.4vw,1.625rem);
    font-weight:600;
    color:var(--green);
}

/* ===========================================
    FORECAST
============================================*/

#forecastCards{
    display:flex;
    flex-direction:column;
    gap:clamp(10px,1.5vw,20px);
}

.forecast-row{
    display:grid;
    grid-template-columns:minmax(110px,1.4fr) minmax(120px,1.5fr) minmax(76px,1fr) minmax(70px,1fr);
    align-items:center;
    gap:clamp(8px,1.3vw,14px);
    padding:clamp(10px,1.2vw,12px) clamp(12px,1.8vw,18px);
    border-radius:18px;
    background:var(--muted);
}

.forecast-day{
    font-size:clamp(1rem,2.6vw,1.75rem);
    font-weight:600;
    overflow-wrap:anywhere;
}

.forecast-weather{
    display:flex;
    align-items:center;
    gap:clamp(8px,1.5vw,15px);
    font-size:clamp(1rem,2.7vw,1.875rem);
    font-weight:550;
    min-width:0;
    overflow-wrap:anywhere;
}

.forecast-weather img{
    width:clamp(28px,4vw,38px);
    flex:0 0 auto;
}

.forecast-temp,
.forecast-rain{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:nowrap;
}

.forecast-temp img{
    width:clamp(20px,3vw,28px);
    height:clamp(20px,3vw,28px);
    object-fit:scale-down;
}

.forecast-rain img{
    width:clamp(18px,2.6vw,22px);
    height:clamp(18px,2.6vw,22px);
}

.forecast-temp span,
.forecast-rain span{
    font-size:clamp(1rem,2.6vw,1.75rem);
    font-weight:600;
}

/* ===========================================
    FOOTER
============================================*/

footer{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:clamp(8px,1.2vw,12px);
    min-height:clamp(48px,7vh,70px);
    padding:10px 16px;
    background:var(--dark);
    color:white;
    border-radius:20px;
    font-size:clamp(.85rem,2.2vw,1.625rem);
    font-weight:500;
    position:relative;
    overflow:hidden;
    text-align:center;
    flex-wrap:wrap;
}

footer::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:url("assets/backgrounds/vsu-pattern.png");
    background-repeat:repeat;
    background-size:70px;
    opacity:1;
    z-index:0;
}

footer span{
    position:relative;
    z-index:1;
}

/* ===========================================
    ANIMATIONS
============================================*/

@keyframes float{
    0%,100%{ transform:translateY(-5px); }
    50%{ transform:translateY(-11px); }
}

@keyframes pulseHeat{
    0%,100%{ transform:scale(1); }
    50%{ transform:scale(1.05); }
}

/* ===========================================
    RESPONSIVE BREAKPOINTS
============================================*/

@media (min-width:1200px) and (min-height:900px){
    .dashboard{
        min-height:min(100vh,1920px);
    }
}

@media (max-width:820px){
    .dashboard{
        min-height:100svh;
    }

    header{
        align-items:flex-start;
    }

    .top-section{
        grid-template-columns:1fr;
    }

    .weather-card,
    .heat-card{
        min-height:auto;
    }

    #hourlyCards{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .forecast-row{
        grid-template-columns:1.2fr 1.4fr 1fr 1fr;
    }
}

@media (max-width:640px){
    .dashboard{
        padding:12px;
        gap:16px;
    }

    header{
        flex-direction:column;
        align-items:stretch;
        text-align:center;
    }

    .branding{
        flex-direction:column;
        justify-content:center;
        text-align:center;
    }

    .datetime{
        align-items:center;
        text-align:center;
    }

    .weather-details{
        grid-template-columns:1fr 1fr;
    }

    #hourlyCards{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .forecast-row{
        grid-template-columns:1fr 1fr;
    }

    .forecast-weather{
        justify-content:flex-end;
        text-align:right;
    }

    .forecast-temp,
    .forecast-rain{
        justify-content:flex-start;
    }
}

@media (max-width:420px){
    .card-title,
    .section-title{
        width:100%;
        border-radius:12px;
        margin-top:0;
    }

    .weather-card,
    .heat-card,
    .weather-advisory,
    .hourly-section,
    .forecast-section{
        border-width:3px;
    }

    #hourlyCards{
        grid-template-columns:1fr;
    }

    .forecast-row{
        grid-template-columns:1fr;
        text-align:center;
    }

    .forecast-weather,
    .forecast-temp,
    .forecast-rain{
        justify-content:center;
        text-align:center;
    }

    footer .divider{
        display:none;
    }
}

@media (max-height:760px) and (min-width:821px){
    .dashboard{
        min-height:100vh;
        gap:12px;
        padding:14px;
    }

    .weather-card,
    .heat-card{
        min-height:300px;
    }

    #weatherIcon{
        width:120px;
        height:120px;
    }

    #heatValue{
        font-size:4.5rem;
    }

    .heat-icon{
        width:72px;
    }
}