* { margin: 0; padding: 0; box-sizing: border-box; }

/* i really like how the css is different between different browsers */

html {
    font-family: "Nunito", sans-serif;
    background-color: #F7F1E8;
    font-size: 18px;

}
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 0.5rem;
    gap: 3rem;
}
header {
    display: flex;
    flex-direction: column;
    max-width: 700px;
    width: 100%;
}
header div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    border-bottom: 2px solid #8B5E34;
}
header nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
header nav ul { display: flex; flex-direction: row; gap: 1rem; }
header nav form * { margin-top: .25rem; padding: .25rem;}
main {
    background-color: #FFF9F1;
    max-width: 700px;
    width: 100%;
    border: 2px solid lightgray;
    border-radius: 25px;
    padding: 1rem;
    gap: 1rem; 
    display: flex;
    flex-direction: column;
}
main .welcome div {
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1rem; margin: 1rem;
}

.metadata { display:flex; flex-direction: row; gap: 1.5rem;}
.recipe-tags { display: flex; column-gap:.5rem; flex-wrap: wrap;}


h1, h2, h3 {
    font-family: "Playwrite US Trad", cursive;
    color: #A8570C
}
h1 { font-size: 180%; }
h2, h3 { font-size: 125%; }

dl dt { font-weight: 600;}
ul { list-style: none; }

a {
    color: #8B5E34;
    text-decoration: none;
}
a:hover {
    color: #A8570C;
    text-decoration: underline;
}

.welcome {
    margin-bottom: 2rem;
}

.icon-link {
    font-family: "Playwrite US Trad", cursive;;
    font-size: 125%;
}

.recipe-img {
    transform: rotate(2deg);
    border: 5px solid #FFF;
    border-radius: 3px;
    max-width: 100%;
    padding-bottom: .5rem;
    
}
.btn {
    color: #FFF;
    padding: .5em 1em;
    background-color: #8B5E34;
    border-radius: 20px;
}

/* vs code marks red, changes styling in chrome does nothing in firefox (seems firefox size= for numbers works w/o this) */
input[type=number][size] { width: calc(attr(size type(<number>)) * 1ch + 2rem); }

.visually-hidden { display: none; }

.recipe-description-container, .recipe-production-container { display: flex; flex-direction: row; gap: 1rem; }
.recipe-description-container dl {display: flex;flex-direction: column; }
.recipe-description-container textarea {flex-grow: 1; resize:vertical; }

#ingredients, .recipe-description, #steps { line-height: 1.25; font-weight: 600; }

#ingredients { padding-left: 1rem; text-indent: -1rem; }

.recipe-glance, #ingredients { display: flex; flex-direction: column; max-width: 33%; flex-grow: 1; }
.recipe-glance dl div { display: flex; flex-direction: row; column-gap: .5rem; row-gap: .25rem; justify-content: start;}
.recipe-glance dl div dd { text-wrap:nowrap;  };
.recipe-glance dl div dd input { padding: .1rem; width: 0;};



.featured {display: flex; flex-direction: column;}
.featured-cards, .search-card-container, .profile-cards {display: flex; flex-direction: row; gap: 1rem; flex-wrap: wrap; align-items: start; justify-content: space-around;}
.featured-cards .tags, .search-card-container .tags, .profile-cards .tags { display: flex; flex-direction: row; column-gap: 0.5rem; flex-wrap: wrap; text-wrap: nowrap;}
.recipe-card { border: 2px solid #F7F1E8; border-radius: .5rem; background-color: #FFF; min-width: 26%; max-width: 30%; flex-grow: 1; } /* 30% allows for upto 3 cards per row + padding / whitespace*/
.recipe-card div { padding: .5rem; }
.recipe-card a img, .recipe-card img { width: 100%; }
.recipe-card a h3, .recipe-card h3 { font-size: 1rem; }
.search-card-container { margin-top: 3rem; }

#searchTagQuery { width: 100%; padding: .25rem;  }


.profile-header { display: flex; flex-direction: row; justify-content: space-between; margin-bottom: 1rem; }
.profile-header img { max-height: 5rem; }
.profile-description {margin-bottom: 2rem; }
.profile-header div div { display: flex; gap: 1rem; }

.login-form { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.login-form div { display: flex; flex-direction: row;  align-items: baseline; width: 100%; }
.login-form div input { width: 80%; padding: .25rem; }
.login-form button { width: 50%; min-width: 200px; padding: .25rem; }

.bulleted { list-style:circle; margin-left:1rem; }
.bulleted li { padding:.25rem 0;}
.bulleted li input { padding: .1rem; } /* whitespace within each input*/

#steps {max-width: 66%; padding-left: 1rem;  }
#steps ol { padding-left: 1rem;  }
/* I know it says 1 rem padding, .5 seens to match the reference closer*/
#steps > ol > li { padding: .5rem 0; } /* needs >'s otherwise id spec overrides class in bulleted*/
#steps ol li textarea { width: 100%; vertical-align: top; resize:vertical; }

.recipe-title-container {display: flex; justify-content: space-between;}
#recipe_title { font-family: "Playwrite US Trad", cursive; color: #A8570C; font-size: 2rem; max-width: 90%;}
.recipe-title-container button { align-self: start; padding:.25rem;  }

.error-list li { color: red; }

@media (max-width: 500px) {
    .recipe-description-container, .recipe-production-container { flex-direction: column; gap: 2rem;  }
    .recipe-glance, #ingredients, #steps { max-width: 100%; }
    main { padding: 0; border: 0px; }
    header { padding: 0.5rem; }
    
    header nav { flex-direction: column; gap: 1rem; } /* fixes overlap/overflow ~<450px */ 
    
}

@media (max-width: 700px) {
    .login-form div { flex-direction: column; }
    .login-form div input { width: 100%; padding: .25rem; }
}

@media (max-width: 600px) {
    .search-card-container .recipe-card { max-width: 45%; min-width: 34%; } /* only fit 2 cards, higher than 45% can cause some weird shifting at random %s*/ 
}

@media (max-width: 400px) {
    .search-card-container { flex-direction: column; }
    .search-card-container .recipe-card { width: 100%; }
}