/* =========================================
   METEOCAVA.IT - NUOVO SITO
   ========================================= */


/* GENERALE */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #eef4f8;
    color: #123456;
}


/* =========================================
   TESTATA
   ========================================= */

.testata {
    background: linear-gradient(135deg, #073e70, #0865a7);
    color: white;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.20);
}

.testata-contenuto {
    max-width: 1280px;
    min-height: 100px;
    margin: auto;
    padding: 15px 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* LOGO */

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icona {
    font-size: 55px;
}

.logo-titolo {
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
}

.logo-titolo span {
    color: #65c8ff;
}

.logo-sottotitolo {
    margin-top: 7px;
    font-size: 15px;
}


/* MOTTO */

.motto {
    font-size: 20px;
    font-style: italic;
    opacity: 0.9;
}


/* =========================================
   MENU
   ========================================= */

.menu {
    min-height: 52px;
    background: #064778;

    display: flex;
    justify-content: center;
    align-items: stretch;
}

.menu a {
    color: white;
    text-decoration: none;

    padding: 17px 18px;

    font-size: 13px;
    font-weight: bold;

    border-right: 1px solid rgba(255,255,255,0.12);

    transition: background 0.2s;
}

.menu a:hover {
    background: #0878c9;
}


/* MENU SMARTPHONE */

.menu-mobile {
    display: none;

    border: 0;
    background: transparent;
    color: white;

    font-size: 32px;
    cursor: pointer;
}


/* =========================================
   BANNER
   ========================================= */

.banner-cava {
    max-width: 1280px;
    margin: 14px auto 0;
    padding: 0 15px;
}

.banner-cava img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}


/* =========================================
   CONTENITORE
   ========================================= */

.contenitore {
    max-width: 1280px;

    margin: 18px auto 40px;

    padding: 0 15px;
}


/* =========================================
   PANNELLO SITUAZIONE ATTUALE
   ========================================= */

.pannello-meteo {
    background: white;

    border: 1px solid #cbdce8;
    border-radius: 9px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}


/* TITOLO */

.titolo-pannello {
    min-height: 48px;

    padding: 11px 16px;

    background: linear-gradient(
        to bottom,
        #ffffff,
        #edf5fb
    );

    border-bottom: 1px solid #cbdce8;

    color: #07538c;

    font-size: 20px;
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nome-stazione {
    margin-left: 7px;

    font-size: 15px;
    font-weight: normal;

    color: #45677f;
}

.ultimo-aggiornamento {
    font-size: 13px;
    font-weight: normal;

    color: #587184;
}


/* =========================================
   CONTENUTO SITUAZIONE
   ========================================= */

.situazione-contenuto {
    display: grid;

    grid-template-columns: 330px 1fr;

    gap: 18px;

    padding: 18px;
}


/* =========================================
   TEMPERATURA PRINCIPALE
   ========================================= */

.meteo-principale {
    text-align: center;

    padding: 10px 15px;

    border-right: 1px solid #dbe6ee;
}

.icona-meteo {
    font-size: 70px;

    line-height: 1;

    margin-bottom: 6px;
}

.temperatura {
    color: #083f74;

    font-size: 66px;
    font-weight: bold;

    line-height: 1;
}

.temperatura span {
    font-size: 34px;
}

.descrizione-meteo {
    margin-top: 13px;

    font-size: 17px;
    font-weight: bold;

    color: #0b3f6c;
}

.percepita {
    margin-top: 7px;

    font-size: 13px;

    color: #71818d;
}


/* =========================================
   RIQUADRI DATI CORRENTI
   ========================================= */

.dati-meteo {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

    align-items: stretch;
}

.dato {
    min-height: 170px;

    padding: 18px 8px;

    text-align: center;

    background: #f3f8fc;

    border: 1px solid #e0ebf2;
    border-radius: 8px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dato-icona {
    font-size: 35px;

    margin-bottom: 8px;
}

.dato-titolo {
    font-size: 14px;

    color: #365c77;
}

.dato-valore {
    margin-top: 8px;

    color: #083f74;

    font-size: 25px;
    font-weight: bold;
}

.dato-valore span {
    font-size: 15px;
}

.dato-info {
    margin-top: 7px;

    color: #71818d;

    font-size: 12px;
}


/* =========================================
   ESTREMI DI OGGI
   ========================================= */

.pannello-estremi {
    margin-top: 18px;

    background: white;

    border: 1px solid #cbdce8;
    border-radius: 9px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}


.titolo-estremi {
    min-height: 48px;

    padding: 12px 16px;

    background: linear-gradient(
        to bottom,
        #ffffff,
        #edf5fb
    );

    border-bottom: 1px solid #cbdce8;

    color: #07538c;

    font-size: 20px;
    font-weight: bold;
}


.estremi-griglia {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 12px;

    padding: 18px;
}


.estremo {
    min-height: 155px;

    padding: 16px 8px;

    text-align: center;

    background: #f3f8fc;

    border: 1px solid #e0ebf2;
    border-radius: 8px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.estremo-icona {
    font-size: 32px;

    margin-bottom: 8px;
}


.estremo-titolo {
    color: #365c77;

    font-size: 14px;
}


.estremo-valore {
    margin-top: 8px;

    color: #083f74;

    font-size: 27px;
    font-weight: bold;
}


.estremo-valore span {
    font-size: 15px;
}


.estremo-info {
    margin-top: 7px;

    color: #71818d;

    font-size: 12px;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1000px) {

    .situazione-contenuto {
        grid-template-columns: 280px 1fr;
    }

    .dati-meteo {
        grid-template-columns: repeat(2, 1fr);
    }

    .estremi-griglia {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================
   SMARTPHONE
   ========================================= */

@media (max-width: 800px) {


    /* TESTATA */

    .testata-contenuto {
        min-height: 75px;

        padding: 10px 15px;
    }

    .logo-icona {
        font-size: 38px;
    }

    .logo-titolo {
        font-size: 25px;
    }

    .logo-sottotitolo {
        font-size: 11px;
    }

    .motto {
        display: none;
    }


    /* MENU */

    .menu-mobile {
        display: block;
    }

    .menu {
        display: none;

        flex-direction: column;
        align-items: stretch;
    }

    .menu.aperto {
        display: flex;
    }

    .menu a {
        padding: 15px 20px;

        border-right: 0;

        border-top: 1px solid rgba(255,255,255,0.12);
    }


    /* BANNER */

    .banner-cava {
        margin-top: 8px;

        padding: 0;

        overflow: hidden;
    }

    .banner-cava img {
        width: 100%;

        min-height: 105px;

        object-fit: cover;
        object-position: center;

        border-radius: 0;
    }


    /* CONTENITORE */

    .contenitore {
        margin-top: 10px;

        padding: 0 8px;
    }


    /* TITOLO PANNELLO */

    .titolo-pannello {
        display: block;

        font-size: 17px;
    }

    .nome-stazione {
        display: block;

        margin: 4px 0 0;

        font-size: 13px;
    }

    .ultimo-aggiornamento {
        margin-top: 6px;

        font-size: 11px;
    }


    /* SITUAZIONE */

    .situazione-contenuto {
        display: block;

        padding: 12px;
    }

    .meteo-principale {
        border-right: 0;

        border-bottom: 1px solid #dbe6ee;

        padding-bottom: 18px;
        margin-bottom: 12px;
    }

    .icona-meteo {
        font-size: 55px;
    }

    .temperatura {
        font-size: 55px;
    }

    .temperatura span {
        font-size: 28px;
    }

    .descrizione-meteo {
        font-size: 15px;
    }


    /* DATI CORRENTI */

    .dati-meteo {
        grid-template-columns: repeat(2, 1fr);

        gap: 7px;
    }

    .dato {
        min-height: 130px;

        padding: 12px 5px;
    }

    .dato-icona {
        font-size: 27px;
    }

    .dato-valore {
        font-size: 21px;
    }


    /* ESTREMI */

    .pannello-estremi {
        margin-top: 10px;
    }

    .titolo-estremi {
        min-height: 44px;

        padding: 11px 13px;

        font-size: 17px;
    }

    .estremi-griglia {
        grid-template-columns: repeat(2, 1fr);

        gap: 7px;

        padding: 12px;
    }

    .estremo {
        min-height: 130px;

        padding: 12px 5px;
    }

    .estremo-icona {
        font-size: 27px;
    }

    .estremo-valore {
        font-size: 22px;
    }

}