/*
Franschhoek Valley Weather
Version 1.5
Divi-friendly layout stylesheet

Design intentionally minimal.
Use Divi Builder for colours,
backgrounds, borders and shadows.
*/


/* Main wrapper */

.fvw-weather {

    width: 100%;

}


/* -------------------------
   Current weather
-------------------------- */


.fvw-current-card {

    text-align: center;
    padding: 30px;

}



.fvw-title {

    margin-bottom: 20px;

}



.fvw-current-icon {

    width: 80px;
    height: 80px;

    display: block;

    margin: 0 auto 15px auto;

}



.fvw-current-temp {

    font-size: 3.5rem;

    line-height: 1;

    margin: 10px 0;

}



.fvw-current-condition {

    font-size: 1.3rem;

    margin-bottom: 25px;

}



/* Current details grid */


.fvw-current-details {

    display: grid;

    grid-template-columns:
    repeat(auto-fit, minmax(150px, 1fr));

    gap: 15px;

}



.fvw-detail {

    display:flex;

    flex-direction:column;

    gap:5px;

}



.fvw-label {

    font-weight:600;

}



.fvw-value {

    display:block;

}





/* -------------------------
   Forecast
-------------------------- */


.fvw-forecast-section {

    margin-top:40px;

}



.fvw-forecast-title {

    text-align:center;

    margin-bottom:25px;

}



.fvw-forecast {

    display:grid;

    grid-template-columns:
    repeat(auto-fit, minmax(220px,1fr));

    gap:25px;

}





/* Individual day cards */


.fvw-day-card {

    text-align:center;

    padding:25px;

}



.fvw-day-name {

    font-size:1.2rem;

    font-weight:700;

    margin-bottom:15px;

}



.fvw-day-icon {

    width:60px;

    height:60px;

    margin:10px auto;

    display:block;

}



.fvw-day-condition {

    margin-bottom:20px;

}



/* Forecast information rows */


.fvw-row {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:6px 0;

}



.fvw-row span {

    text-align:left;

}



.fvw-row strong {

    text-align:right;

}





/* Error message */


.fvw-error {

    padding:20px;

    text-align:center;

}





/* -------------------------
   Mobile adjustments
-------------------------- */


@media(max-width:767px) {


    .fvw-current-card {

        padding:20px;

    }



    .fvw-current-temp {

        font-size:2.8rem;

    }



    .fvw-current-details {

        grid-template-columns:
        1fr 1fr;

    }



    .fvw-forecast {

        grid-template-columns:1fr;

    }


}