/**********************************************---***********************
    File name: weather.css
    Site: villasbysilvia

    Copyright 2025 Michael J. Miller, All rights reserved

    Purpose: weather widget formatting

    Revision History:
    Date        Version     Details
    --------    --------    --------------------------------------------
    12/1/25     3.3        Created.

************************************************************************/

@layer page {

    /************************************************************
                weather
    *************************************************************/
    .weather {
        max-width: 320px;
        border-radius: 8px;
        border: thin solid gray;
        /*    background-repeat: no-repeat;*/
        background-repeat: round;
        background-color: aliceblue;
        color: rgba(63, 63, 63, 1.00);
        padding: .5rem;
        display: none;
        flex-direction: column;
        margin: 1rem auto;
    }

    .weather h4 {
        font-size: 1.5rem;
        /*    letter-spacing: .1em;*/
        margin-bottom: 16px;
        text-align: center;
        background-color: white;
        padding: 4px;
        border: thin solid gray;
        margin-top: 8px;
        opacity: .7;
    }

    .weather-text-none {
        color: rgba(63, 63, 63, 1.0);
        /*background-color: aliceblue;*/
    }

    .weather-text-dark {
        color: white;
        background-color: rgba(63, 63, 63, 1.0);
        opacity: .7;
    }

    .weather-text-light {
        color: rgba(63, 63, 63, 1.0);
        background-color: white;
        opacity: .75;
    }

    .wx-main-temp {
        font-size: 3rem;
        /*    margin-top: 2rem;*/
        margin: 0 auto;
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .wx-main-temp span {
        border-radius: 8px;
    }
    .wx-main-temp select {
        font-size: .5em;
        width: 76px;
        display: inline;
        transform: translateY(-.55em);
        margin-left: 6px;
    }

    .weather img {
        margin-top: -1.8rem;
        margin-bottom: -1rem;
        border-radius: 8px;
    }

    .wx-description {
        font-size: small;
        text-transform: capitalize;
        border-radius: 8px 8px 0px 0px;
    }

    .wx-hilo {
        display: flex;
        justify-content: space-between;
        margin-top: 1em;
        padding: 6px;
        font-weight: bold;
        margin-bottom: 1em;
    }

    .wx-time {
        font-size: small;
        margin-top: 0;
        margin-bottom: 0;
    }

    .wx-promise {
        font-size: small;
        /*margin: 1rem auto 1rem;*/
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    #wx-main-temp select {
        font-size: 3rem;
        width: 70px;
        margin-left: .25em;
        transform: translateY(-.25em);
    }

    .wx-hilo {
        margin: 0;
    }

    .wx-bottom {
        border-radius: 0px 0px 8px 8px;
        display: inline-flex;
        /*padding-bottom: 6px;*/
        padding: 0 6px 6px 6px;
        justify-content: space-between;
    }
    .wx-sunrise {
        /*text-align: left;*/
        /*line-height: 1.25rem;*/
        /*margin-bottom: 0;*/
        /*margin-top: 0rem;*/
        /*padding-left: 5px;*/
    }

    .wx-sunset {
        /*margin-bottom: 6px;*/
        /*margin-right: 5px;*/
        /*text-align: right;*/
        /*line-height: 1.7;*/
        /*margin-top: -1.2rem;*/
    }

    /* default layout is for phones and switches to wide screen here */
    @media (min-width: 620px) {

        .weather {
            display: flex;
        }

        #weather {
            width: 96%;
            border: thin solid gray;
            border-radius: 6px;
        }

    }

}