/* css file for our weather app */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--text-primary);
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    
}



body{
    background-color: var(--primary-color);

}

#user-info{
    text-align: center;
    display: flex;
    justify-content: center;
    font-size: medium;
    background-color: var(--secondary-color);
    padding: 1rem;
}

.header{
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}

.units{
    position: relative;
}

.unit-values{
    display: none;
    background-color: var(--tertiary-color);
    position: absolute;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
    right:0;
    z-index: 1;
}
.unit{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--text-secondary);
}
.unit-name{
    opacity: 0.5;

}
.unit-value{
    display:flex;
    cursor: pointer;
    padding: 0.5rem;
    justify-content: space-between;
    gap: 2rem;
}
.unit-value-selected{
    border-radius: 0.5rem;
    background-color: rgba(255, 255,255, 0.1);
}
.unit-toggle-btn{
    display: flex;
    cursor: pointer;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--tertiary-color);
    transition: all 300ms ease-in-out;

}
.unit-toggle-btn img{
    height: 1.25rem;
}
.unit-toggle-btn:hover {
    transform: translateY(-2px);
}

/* hero section styling */
.hero-section{
    margin: 1rem;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.hero-section h1{
    text-align: center;
}

#search-form{
    display:flex; 
    justify-content: center;
    gap: 1.5rem;
}
.search-input{
    position: relative;
}
.search-input input[type= text]{
    background-color: var(--tertiary-color);
    padding: 0.5rem 2.25rem;
    border: none;
    border-radius: 0.5rem;
    font-size: large;
    background-image: url("../../assets/images/search-outline-svgrepo-com.svg");
    background-position: 8px 8px;
    background-size: 20px;
    background-repeat: no-repeat;

}
.search-suggestion{
    display: none ;
    z-index: 1;
    width: 100%;
    padding: 0.5rem;
    margin-top: 1rem;
    position:absolute;
    border-radius: 0.5rem;
    background-color: var(--tertiary-color);
}

.suggestion-items{
    display:flex;
    gap: 0.5rem;
    flex-direction: column;

}
.suggestion-items>*{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.25rem;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    transition: all 100ms ease-in-out;
}
.suggestion-items>*:hover{
    background-color: var(--text-secondary);

}
.city-name{
    font-size: medium;
    text-transform:capitalize;
}
.country-name{
    font-size:small;
    text-transform: capitalize;
    opacity: 0.5;
}
/* .search-input:hover .search-suggestion{
    display:block;
} */

#search-form input[type=submit]{
    background-color: var(--secondary-color);
    font-size: large;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 300ms ease-in-out;
}
#search-form input[type=submit]:hover {
    transform: scale(1.1);
}


/* main weather forecast container styling starts here */

.container-main{
    display: grid;
    grid-template-columns: auto auto ; 
}

 .container-left{
    /* min-width: 300px; */
    padding: 2rem;
    display: grid;
    gap: 1rem;
 }

 .current-weather{
    display: flex;
    flex-wrap: wrap;
    border-radius: 0.75rem;
    padding: 2rem;
    background-image: linear-gradient(to right, rgba(70,87,217), rgba(70, 87, 217,0.6));
    min-height: 200px;
    justify-content: space-between;
    align-items: center;
 }

#current-place{
    text-transform: capitalize;
    font-weight: bold;
    font-size: x-large;
    padding-bottom:0.5rem;

}
#current-dd{
    text-transform: capitalize;
    font-size: medium;
    margin-bottom: 20px;
    opacity: 0.75;

}
#current-temp{
    font-size: 80px;
    font-weight: 500;
}

.weather-variables{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    /* width: 100%; */
}
.weather-variable{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: flex-end;
    gap:2rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--text-secondary);
    background-color: var(--tertiary-color);
}
.daily-forecast{
    margin-top: 3rem;
}
.forcasts{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
}
.forecast{
    margin-top: 1rem;
    display: flex;
    /* flex-grow: 1; */
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap:1.5rem;
    padding: 0.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--text-secondary);
    background-color: var(--tertiary-color);
}
.forecast .day{
    text-transform: capitalize;
    font-size: medium;
    font-weight: bold;
    text-align: center;
}
.forecast img{
    width: 48px;
}
.max-temp{
    font-size: large;
}
.min-temp{
    font-size: large;
}
.min-max-temp{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}



.container-right{
    min-width: 300px;
    padding: 2rem;
    display: grid;
    gap: 1rem;
}
.hourly-forecast{
    padding: 1rem;
    display: grid;
    grid-template-columns: auto;
    gap: 1rem;
    background-color: var(--tertiary-color);
    border-radius:0.75rem;
}
.hf-header{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: center;
}
#day-selector{
    position: relative;
}
#selected-day{
    text-transform: capitalize;
}
.day-toggle-btn{
    display: flex;
    cursor: pointer;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: var(--text-secondary);
    transition: all 300ms ease-in-out;

}
.day-toggle-btn img{
    height: 1.25rem;
}
.day-toggle-btn:hover {
    transform: translateY(-2px);
}
.days-menu{
    position: absolute;
    display: none;
    z-index: 1;
    right:0;
    margin-top: 0.5rem;
    background-color: var(--tertiary-color);
    padding: 1rem;
    border-radius: 0.5rem;
}
#days{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#days>*{
    padding: 0.5rem;
    min-width: 150px;
    cursor: pointer;
    transition: all 300ms ease-in-out;
}
#days>*:hover{
    transform: translateY(-2px);
}
.day-selected{
    border-radius: 0.5rem;
    background-color: rgba(255, 255,255, 0.1);   
}
#hourly{
    display: flex;
    gap: 0.75rem;
    flex-direction: column;
    justify-content: space-between;
}

.hour-forecast{
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background-color: var(--text-secondary);
    border-radius: 0.5rem;

}

.time{
    display: flex;
    align-items: center;
}
.time img{
    width: 48px;
}
:root{
    --primary-color: rgba(1, 1,42);
    --secondary-color: rgba(70, 87, 217);
    --tertiary-color: rgba(37, 37, 63);

    --text-primary: white;
    --text-secondary: rgba(108,106, 123);
    --text-black: black;
    
}

#error-geolocation{
    display: none;
    padding: 3rem;
    /* background-color: var(--text-secondary); */
    flex-direction: column;
    width: 100vw;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}
#error-geolocation img{
    width: 64px;
}
#error-geolocation p{
    text-transform: capitalize;
    font-size: medium;
    text-align: center;
}

/* media queries */

@media screen and (max-width:728px ) {
    .logo img{
        width: 100px;
    }
    #search-form{
        flex-direction: column;
    }

    .container-main{
        grid-template-columns: auto;
    }
    .weather-variables{
        flex-direction: column;
    }
    .forcasts{
        flex-direction: column;
    }
}