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

:root {
  --cream:#F7F1E8; --cast-iron:#2E261C; --cacao:#A8570C;
  --paper:#FFF9F1; --ash:#888; --oak:#8B5E34; --white:#FFF;
}

html { font-size: 18px; }

img { max-width:100%; height:auto; display:block; }

body {
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.25; color:var(--cast-iron);
  background-color:var(--cream);
}

h1,h2,h3,h4,h5,h6 {
  font-family:"Playwrite US Trad",cursive;
  font-weight:400; line-height:1.15; color:var(--oak);
  margin:0 0 .5rem 0;
}
h1 { font-size:1.8rem; }
h2,h3,h4,h5,h6 { font-size:1.25rem; }

dt { font-weight:600; }

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

header nav ul, main ul { list-style:none; margin:0; padding-left:0; }
main ol { margin:0 0 1rem 1.25rem; }

header { padding:.5rem 0; }  

.site-title a {
  font-family:"Playwrite US Trad",cursive;
  font-weight:400; font-size:1.8rem; line-height:1.15;
  color:var(--oak); text-decoration:none; display:inline-block;
  margin:0;
}

.button-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.button-row a {
  display: inline-block;
  padding: .5em 1em;
  border-radius: 9999px;
  background-color: var(--cacao);
  color: var(--paper);
  border: 1px solid var(--cacao);
  text-decoration: none;
}

.recipe-photo {
  transform:rotate(2deg);
  border:5px solid var(--white);
  border-radius:3px;
  margin-bottom:.5rem;
  max-width:100%; height:auto;
}

main form[action*="login"],
main form[action*="login"] * { font-size:1.25rem; }

footer {
  border-top:1px solid var(--ash);
  padding:.5rem 0;
  color:var(--ash);
  text-align:left;
}

body { display:flex; flex-direction:column; align-items:center; }
header, main, footer { width:100%; max-width:700px; padding-left:.5rem; padding-right:.5rem; }
main { margin-top:3rem; }
main > :first-child + * { margin-top:2rem; }
main > section + section { margin-top:2rem; }

header { display:flex; flex-wrap:wrap; align-items:baseline; }
header .site-title { margin: 0; }
header > p { margin: 0 0 0 auto; }
header > nav {
  flex-basis:100%;
  display:flex;
  align-items:center;
  margin-top:0;
  padding-top:.25rem;
  border-top:2px solid var(--oak);
}

header nav ul { display:flex; gap:1rem; }
header nav form { margin-left:auto; }
header nav input[type="search"],
header nav button { padding:.25rem; }

.recipe-meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 0;
  margin: 0 0 2rem 0;
}

.recipe-meta p { margin: 0; }
.recipe-meta p:last-child { flex-basis: 100%; margin-top: .25rem; }

.ingredients { padding-left:1rem; margin:0; }
.ingredients li { text-indent:-1rem; }
.steps { padding-left:1em; margin:0; }

.timing {
  display: grid;
  grid-template-columns: 1fr 3fr;
  column-gap: .5rem;
  row-gap: .25rem;
  margin: 0;
}

.timing dt, .timing dd { margin: 0; }

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1rem;
  padding-inline: 0;
  align-items: flex-start;
}

.card-list > li {
  flex: 0 0 calc((100% - 2rem) / 3);
  min-width: 0;
}

.card > a { display: block; color: inherit; text-decoration: none; }
.card h3 { margin-top: .5rem; margin-bottom: 0; }
.card img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border: 3px solid var(--white);
  border-radius: 4px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  column-gap: .5rem;
  row-gap: 0;
  margin: .25rem 0 0 0;
  padding: 0;
}

.tags a {
  color: var(--oak);
  text-decoration: none;
  white-space: nowrap;
}
.tags a::before {
  content: "#";
  color: var(--ash);
}

.profile-header { display:flex; gap:1rem; align-items:flex-start; }
.profile-avatar { width:5rem; height:5rem; margin-left:auto; object-fit:cover; }

.pair { display: flex; gap: 1rem; }
.pair-left  { flex: 1 1 33.333%; }
.pair-right { flex: 2 1 66.666%; }
.pair-left .recipe-photo { max-width: 100%; height: auto; }
.pair + .pair { margin-top: 2rem; }

@media (max-width: 500px) {
  .pair { flex-direction: column; gap: 2rem; }
  header, main, footer { padding-left: 0; padding-right: 0; }
  main { border-width: 2px 0; }
  header { padding-left: .5rem; padding-right: .5rem; }

  header > nav {
    margin-left: -.5rem;
    margin-right: -.5rem;
    padding-left: .5rem;
    padding-right: .5rem;
  }
}

main form[action*="login"] .form-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
}

main form[action*="login"] .form-row input {
  width: 80%;
  margin-left: auto;
  padding: .25rem;
}

main form[action*="login"] .login-btn {
  width: 50%;
  min-width: 200px;
  margin: 1rem auto 0;
  display: block;
}

@media (max-width: 700px) {
  main form[action*="login"] .form-row { flex-direction: column; gap: 0; }
  main form[action*="login"] .form-row + .form-row { margin-top: 1rem; }
  main form[action*="login"] .form-row input { width: 100%; margin-left: 0; }
}

@media (max-width: 600px) {
  .card-list > li { flex: 0 0 calc((100% - 1rem) / 2); }
}
@media (max-width: 400px) {
  .card-list > li { flex: 0 0 100%; }
}

@media (max-width: 600px) {
  .results-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .results-grid { grid-template-columns: 1fr; }

}


.profile-header p { 
  margin:.75rem 0 0 0;
  font-size:.9rem;
  color:var(--cast-iron);
}

.profile-header p .joined { margin-right: 1rem; }

main {
  background-color: var(--paper);
  padding: 1rem;
  border: 1px solid rgba(139, 94, 52, .35);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

.search-form {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .5rem 0 1.25rem;
}

.search-form input[type="search"] {
  flex: 1 1 auto;
  padding: .25rem .5rem;
  border: 1px solid var(--oak);
  border-radius: 4px;
}
.search-form button { padding: .35rem .6rem; }

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1rem;
  row-gap: 1rem;
  padding-block: 1rem;
  align-items: start;
}

.card {
  padding:.5rem;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--paper);
  border:1px solid rgba(139,94,52,.35);
  border-radius:9px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.visually-hidden { position: absolute; left: -9999px; }

.edit-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;  
  gap: 1rem;
}

.edit-title input#title {
  font-family: "Playwrite US Trad", cursive;
  font-size: 1.8rem;
  border: 1px solid rgba(139,94,52,.35);
  border-radius: 6px;
  padding: .25rem .5rem;
  flex: 1;
}

textarea { width: 100%; resize: vertical; }
.step-desc { vertical-align: top; }

.ingredients-edit { list-style: disc; padding-left: 1.5rem; margin-top: .5rem; }
.ingredients-edit li { padding: .25rem 0; }

.step-block { margin-bottom: 1rem; }

.timing dd {
  display: flex;
  align-items: center;
  gap: .25rem;         
}

.timing dd input {
  width: 4rem;         
}

.edit-title input#title {
  color: var(--cacao);  
}

output.errors { 
  color: #b00020; 
  margin: .5rem 0 1rem;
  display: block;
}
output.errors ul { margin-left: 1.25rem; }

.ingredients-edit li .ing-row {
  display: grid;
  grid-template-columns: 4.25rem 5.25rem 1fr; 
  column-gap: .25rem;                          
  align-items: center;
}

.ingredients-edit li .ing-row input {
  margin: 0;                
  padding: .2rem .4rem;     
  line-height: 1.1;
}

.ingredients-edit li .ing-row label.visually-hidden {
  position: absolute;
  left: -9999px;
}