/* Kathrine Dykes 
   Version: 4/6/2026
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ----PAGE--- */
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #faf8f5;
    color: #222;
}

.page {
    max-width: 700px;
    margin: 0 auto;
    padding: 1rem;
}

h1, h2, h3 {
    color: rgb(140 156 132);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ----HEADER--- */
.header {
    margin-bottom: 2rem;
    border-bottom: .05rem #ebc7b3 solid;
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;

}

.shopping-list-container .ingredient-row {
    width: calc(80% - 1rem);
    display: flex;
    justify-content: space-between;
    flex: 1;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ----LINKS--- */
a {
    color: #d97b66;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#logo {
    font-size: 40px;
    font-weight: bold;
    color: rgb(140 156 132);
}

#logo:hover {
    text-decoration: none;
}

.login-link, .shopping-list-link {
    padding-left: .5rem;
}

#tagline,  #user-bio {
   font-weight: bold;
   color: #d97b66;
}

/* ----CARDS--- */
.recipes-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.card {
    background: white;
    border: 1px solid #ebc7b3;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    width: calc(50% - 1rem)
}

.page-intro, .recipe-intro, .search-block {
    width: 100%;
    margin-bottom: 3rem;
}

.recipe-intro {
    margin-bottom: .75rem;
}

/* ----BUTTONS--- */
button {
    background-color: #d97b66;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 999px;
    margin: .25rem .25rem;
}

button:hover {
    background-color: #a15a48;
    cursor: pointer;
}

button.small-btn {
    padding: 0.25rem .5rem;
    background-color: rgb(140 156 132);;
}

button.small-btn:hover {
    background-color: rgb(114, 128, 107);
}

/* ----INPUT---- */

input, textarea {
    border: 1px solid #ebc7b3;
    width: calc(80% - 1rem);
    padding: .25rem .5rem;
}

textarea {
    font-family: Arial, Helvetica, sans-serif;
}

::placeholder {
    color: rgb(114, 128, 107);
    opacity: .75;
}

#prep-time, #cook-time, #servings {
    width: calc(40% - 1rem);
}

.form-row {
    display: flex;
}

.form-row .form-group {
    flex: 1;
}

.step-row,  .ingredient-row {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.step-row {
    width: 90%;
}

.ingredient-amount, .ingredient-unit {
    width: 12%;
}

.ingredient-name {
    width: calc(55% - 1rem);
}

/* ----SEARCH--- */
.search-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

#username, #password {
    width: calc(50% - 1rem);
    padding: .25rem .5rem;
}

/* ----TAGS---- */
.recipe-tags {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    margin: 0;
}

.tag-pill {
    display: flex;
    background-color: #c5b841;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
}

.tag-link {
    display: block;
    background-color: #d97b66;
    color: white;
    padding: 0.25rem 0.75rem;
    text-decoration: none;
    border-radius: 999px;
}

.tag-link:hover {
    background-color: #a15a48;
    text-decoration: none;
}

.recipe-info .tag-pill {
    background-color: rgb(140 156 132);
    margin-bottom: 2rem;
}

/* ----RESPONSIVE--- */
@media (max-width: 600px) {
  .top {
    flex-direction: row;
    align-items: center;
  }

  .card {
    width: 100%
  }

  #big-search {
    width: calc(70% - 1rem);
  }

  .recipe-info .tag-pill {
    margin-bottom: .25rem;
  }
}