/*

By: Drew Hengehold
Last Modified: 26 March 2025
CSS Document custom.css

*/

/* Header div */
div.heading{
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: auto auto;
    color:rgb(70, 70, 177);
    background-color: beige;
    position: relative;
    top: 0;
    width: 100%;
    margin-bottom: 1%;
}

/* Icon clicker */
footer .icon, div.heading .icon{
    display: flex;
    flex-direction: row;
    text-align: left;
    align-items: center;
    width: max-content;
    text-decoration: none;
    grid-column: 1/2;
    font-size: 1.3em;
    margin-left: 5%;
    color:rgb(70, 70, 177);
}
footer .icon:hover ,div.heading .icon:hover{
    color:rgb(30, 30, 76);
}
footer .icon img,div.heading .icon img{
    width: 2.9em;
}

/* welcome tag */
div.heading .welcome_tag{
    background-image: linear-gradient(to right, rgb(91, 61, 138) , rgb(51, 81, 189));
    color:transparent;
    background-clip:text;
    grid-column: 3/4;
    text-align: center;
}

/*coming soon*/
div.heading .coming_soon{
    grid-column: 4/6;
    text-align: right;
    margin-right: 5%;
}

/*navigation bar*/
div.heading .navbar{    
    display: flex;
    grid-column:1/6;
    grid-row: 2/3;
    border-top: 0.09em solid rgb(70, 70, 177);
}

div.heading .navbar h2{
    margin: 0;
    padding: 0.5em 1em; /* optional: for better spacing */
    display: flex;
    align-items: center;
    justify-content: center;
}

div.heading .navbar h2:hover{
    border:0.03em solid rgb(70, 70, 177);
}
div.heading .navbar h2 a{
    text-decoration: none;
}
/* END HEADER */

/* FOOTER */

footer{
    background-color: beige;
    position:static;
    bottom: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    color: rgb(70, 70, 177);
}
footer .icon{
    font-size: 80%;
}
footer .validator{
    text-align: center;
}
footer .create{
    text-align: right;
}
/* END FOOTER */

/* body */

/* tea quantity form */
form#tea_quantity{
    width: max-content;
    margin: auto auto;
    margin-top: 0;
}

form#tea_quantity fieldset{
    display: block;
    text-align: center;
    border-radius: 0.5em;
}
/* end tea quantity form */

/* tea quantity response*/
.result{
    margin: auto 35%;
    margin-top: 0;
}
/* end tea quantity response*/

/* tea order form */
form#tea_Order{
    margin: 0 auto;
    width: max-content;
}
form#tea_Order fieldset{
    border-radius: 0.5em;
    text-align: center;
}
form#tea_Order label{
    font-size: 1.5em;
}

form#tea_Order ul{
    display: grid;
    grid-template-columns: auto auto auto;
    border: 0.05em solid black;
    padding-left: 0;
}
form#tea_Order li{
    display:flex;
    flex-direction: column;
    align-items: center;
    list-style-type: none;
    padding: 1em;
}
form#tea_Order li .brand{
    font-size: 1.2em;
    margin: 0;
}
form#tea_Order li .name{
    font-size: 1.5em;
    margin: 0;
}
form#tea_Order li .type{
    font-size: 0.9em;
    margin: 0;
}

form#tea_Order li:nth-child(even){
    background-color: beige;
}

form#tea_Order div.order_information{
    display: grid;
    grid-template-columns: 45% 45%;
    text-align: right;
    gap: 5%

}
/* end tea order form*/

/* tea order response */

div.order_details{
    display: grid;
    margin: auto 20%;
    margin-top:0;
    grid-template-columns: auto auto;
}
div.order_details p{
    text-align: center;
    font-size: 1.3em;
    margin-bottom: 0;
}
div.order_details h2{
    grid-column: -1/1;
}
div.order_details table{
    grid-column: -1/1;
    border: 0.04em solid black;
    border-collapse: collapse;
}
div.order_details table th,
div.order_details table td{
    text-align: left;
    border: 0.04em solid black;
    padding: 0.5em;
}
form#execute {
    text-align: center;
    grid-column: -1/1;
}
/* END tea order response */

/* Tea image page */
div#list_tea ul{
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    border: 0.05em solid black;
    padding-left: 0;
}

div#list_tea li{
    display:block;
    justify-self: center;
    flex-direction: column;
    align-items: center;
    list-style-type: none;
    margin: 1em;
    border: 0.02em solid black;
    border-radius: 2em;
    padding: 2em;
    text-align: center;
    width: max-content;
}
div#list_tea li .brand{
    font-size: 1.2em;
    margin: 0;
}
div#list_tea li .name{
    font-size: 1.5em;
    margin: 0;
}
div#list_tea li .type{
    font-size: 0.9em;
    margin: 0;
}
div#list_tea li img{
    width: 8em;
    height: 8em;
    border: none;
    border-radius: 1em;
}

div#list_tea input[type = "submit"]{
    display: block;
    margin: auto;
}
/* Tea image page end */

/* Gen Form Photo */

div.selection{
    display: block;
    text-align: center;
    align-items: center;
}
div.selection img{
    width: 8em;
    height: 8em;
    border: none;
    border-radius: 1em;
}
form#tea_photo_select{
    margin: 0 5%;
}
form#tea_photo_select label{
    font-size: 1.4em;
    font-weight: bold;
}
form#tea_photo_select ul{
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
}
form#tea_photo_select li{
    list-style-type: none;
    width: min-content;
    height: 90%;
    position: relative;
    grid-column: auto;
}
form#tea_photo_select img{
    width: 12em;
    height: 12em;
    border: none;
    border-radius: 1em;
}
form#tea_photo_select input[type = "submit"]{
    display: block;
    margin: auto;
}

div#list_tea.final{
    align-self: center;
}

a.link {
    display: block;
    text-align: center;
    font-size: 1.5em;
}
/* Gen Form Photo End */

p.submission_message{
    font-size: 1.5em;
    text-align: center;
    height: 100%;
}

html, body{
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; 
}

input[type = "submit"]{
    padding: 0.5em;
    border: none;
    background-color: #008000;
    color: #f5f5dc;
    border-radius: 0.2em;
    margin-top: 0.2em;
    width: 40%;
}