/*
CSS file for Dishbook website
Written by Danny Provo for hw2 due 9/12/25
*/

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

/* I googled how to use variables so I could keep track of all hex values in one place */
:root {
    --cream-color: #f7f1e8;
    --cast-iron-color: #2e261c;
    --cacao-color: #a8570c;
    --paper-color: #fff9f1;
    --ash-color: #888;
    --oak-color: #8b5e34;
    --pure-white-color: #fff; 
}

html {
     font-family: Nunito, sans-serif;
     font-size: 18px;
     background-color: var(--cream-color);

     display: flex;
     flex-direction: column;
     align-content: flex-start;
     align-items: center;
     min-width: 0;
}


body > * { /*Applies rule to all descendants of body*/
     min-width: 0;
}

body {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     padding: 0rem 0.5rem;
     max-width: 700px;
     width: 100%;
     flex-shrink: 1;
}

main {
     background-color: var(--paper-color);
     border: 1px solid var(--ash-color);
     border-radius: 30px 30px 0px 0px;
     border-bottom: none;

     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: 1rem;
     max-width: 700px;
     flex-shrink: 1;
     gap: 2rem;
}

img {
     max-width: 100%;
}

main section {
     display: flex;
     flex-direction: column;
     align-items: stretch;
}

p {
     margin-top: 0.1em;
     margin-bottom: 0.1em;
}

ul {
     list-style: none;
}

h1, h2, h3, h4, h5, h6, #recipe-title-input {
     font-family: Playwrite US Trad, cursive;
     font-size: 125%;
     color: var(--oak-color);
}

h1, #recipe-title-input {
     font-size: 180%;
}

p {
     color: var(--cast-iron-color);
}

dt {
     font-weight:600;
}

a {
     color: var(--oak-color);
     text-decoration: none;
}

a:hover {
     color: var(--cacao-color);
     text-decoration: underline;
}

textarea {
     width: 100%;
     resize: vertical;
}

output {
     color: red;
}

/* Class styles */

.page-header {
     padding: 0rem 0rem 3rem;
     display: flex;
     justify-content: space-between;
     align-items: stretch;
     flex-direction: column;
     max-width: 700px;
     flex-shrink: 1;
     min-width: 0;
}

.page-header-top {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: flex-end;
     border-bottom: 2px solid var(--oak-color);
     max-width: 700px;
}

.page-header-bottom {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     max-width: 700px;
     gap: 0.25rem;

}

.page-header-link {
     display: flex;
     gap: 1rem;
}

.search-bar {
     display: flex;
     gap: 0.25rem;
     padding-top: 0.25rem;
}

.search-bar button, input {
     padding: 0.25rem;
}

.visually-hidden {
     display: none;
}

.hashtag-list li::before {
     content: "#";
     color: var(--ash-color);
}

.hashtag-list li:hover {
     text-decoration: underline;
}

.recipe-image {
     transform: rotate(2deg);
     border: 5px solid var(--pure-white-color);
     border-radius: 3px;
}

.recipe-info {
     line-height: 1.25;
}

.fake-button {
     color: var(--cream-color);
     background-color: var(--oak-color);
     padding: .5em 1em;
     border-radius: 1em;
     display: inline-block;
}

.fake-button:hover {
     color: var(--paper-color);
     background-color: var(--cacao-color);
     text-decoration: none;
}

.card {
     background-color: var(--pure-white-color);
     border: none;
     border-radius: 5px;
     box-shadow: -1px 2px 5px rgba(0,0,0,0.3); /*Had to Google how to do this to match the example*/
     width: calc((100% - 2rem) / 3);
     padding: 0.5rem;
}

.card-parent {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem; /*instructions don't match picture?- Added vertical padding to match picture*/
     padding: 0 1rem; 
     align-items: flex-start;
     width: 100%;
}

.recipe-side-by-side {
     display: flex;
     flex-direction: row;
     gap: 1rem;
     width: 100%;
}

.recipe-left-side {
     width: calc((100% - 1rem) / 3);
}

.recipe-right-side {
     width: calc(((100% - 1rem) / 3) * 2);
}

.login {
     font-size: 125%;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     width: 100%;
}

.input-label-and-textbox {
     display: flex;
     flex-direction: row;
     gap: 1rem;
     align-items: baseline;
     width: 100%;
     
}

.login-textbox {
     width: 80%;
     padding: 0.25rem;
     align-self: center;
}

.hashtag-list {
     display: flex;
     flex-direction: row;
     gap: 0 0.5rem; /*row gap, column gap*/
     padding-left: 0;
     flex-wrap: wrap;
     text-wrap: nowrap;
}

.step-ingredient-list {
     list-style: circle outside;
     padding-left: 1rem;
}

.step-ingredient-list li {
     padding-top: 0.25rem;
}

.step-ingredient-list li span {
     display: flex;
     justify-content: end;
     width: 98%;
     gap: 0.25rem;
}

.quarter-percent-input {
     width: 25%;
}

.fifty-percent-input {
     width: 50%;
}

.step-description {
     vertical-align: top;
}

.step-list-item {
     padding-bottom: 1rem;
}

.save-edit-div {
     display: flex;
     justify-content: end;
     gap: 0.25rem;
     align-items: flex-start;
}

.recipe-title-row {
     display: flex;
     width: 100%;
     justify-content: space-between;
}

.recipe-title-row input {
     width: 90%;
}

/* ID styles */

#login-button {
     width: 50%;
     min-width: 200px;
     align-self: center;
}

#recipe-header {
     display: flex;
     flex-direction: column;
     width: 100%;
}

#profile-header {
     display: flex;
     flex-direction: row;
     gap: 1rem;
     justify-content: space-between;
     width: 100%;
}

#profile-metadata {
     display: flex;
     flex-direction: row;
     gap: 1rem;
}

#profile-photo {
     width: 5rem;
     height: 5rem;
}

#recipe-metadata {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 0 1.5rem;
     align-items: baseline;
}

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

#recipe-steps-list {
     padding-left: 1rem;
}

#recipe-image {
     padding-bottom: 0.5rem;
}

#photo-upload-div {
     padding-bottom: 1rem;
}

#recipe-info-list {
     display: flex;
     flex-direction: row;
     gap: 0.25rem 1rem; /*I increased the gap to make shrinking look better*/
     flex-wrap: wrap;
}

#recipe-info-list dt {
     width: calc((100% - 1rem) / 4);
}

#recipe-info-list dd {
     width: calc(((100% - 1rem) / 4) * 3);
}

#recipe-info-list dd input {
     width: 35%;
}

#fake-button-div {
     display: flex;
     padding-top: 1rem;
     justify-content: center;
     flex-grow: 1;
     gap: 1rem;
}

#search-main {
     gap: 0rem;
}

#search-page-input-parent {
     width: 100%;
     padding-bottom: 2rem;
     display: flex;
     justify-content: center;
     gap: 0.5rem;
}

#search-page-input {
     width: 90%;
     padding: 0.25rem;
}


@media (max-width: 500px) {

     body {
          padding: 0rem;
     }

     main {
          padding: 0rem;
          border: 0rem;
     }

     .page-header-top {
          padding: 0.5rem 0.5rem 0rem;
     }

     .page-header-bottom {
          padding: 0rem 0.5rem;
     }

}

@media (max-width: 700px) {

     .input-label-and-textbox {
          display: flex;
          flex-direction: column;
          gap: 0rem;
     }

     .login-textbox {
          width: 100%;
     }
}

@media (max-width: 600px) {

     .card {
          width: calc((100% - 1rem) / 2);
     }
}

@media (max-width: 400px) {

     .card {
          width: 100%;
     }
}