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

html {
  font-size: 18px;
}

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

/* ========== Base & Typography ========== */
body {
  font-family: "Nunito", sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--cast-iron);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 .5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playwrite US Trad", cursive;
  font-weight: 400;
  color: var(--cacao);
}

h1 {
  font-size: 1.8rem;
}

h2,
h3,
h4,
h5,
h6 {
  font-size: 1.25rem;
}

b,
strong {
  font-weight: 700;
}

.visually-hidden {
  display: none;
}

header hr{
  border: none;
  border-top: 2px solid var(--oak);
  margin: .25rem 0;
}

/* ========== Links ========== */
a,
a:link,
a:visited {
  color: var(--oak);
  text-decoration: none;
}

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

/* ========== Header/Main ========== */
header,
main {
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
}

header {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

header .brand {
  font-family: "Playwrite US Trad", cursive;
  font-weight: 400;
  font-size: 1.25rem;
  flex: 1 1 50%;
  align-self: baseline;
}

header .user {
  flex: 1 1 50%;
  text-align: right;
  align-self: baseline;
}

header nav {
  flex: 0 0 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid var(--oak);
  padding-top: .25rem;
}

header nav ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
}

header nav form {
  display: flex;
  gap: .25rem;
  justify-content: flex-end;
}

header nav input[type="search"],
header nav button {
  padding: .25rem;
}

main {
  background: var(--paper);
  border: 1px solid var(--ash);
  border-bottom: none;
  border-radius: 35px;
  padding: 1rem;
}

main>section:first-of-type {
  margin-bottom: 2rem;
}

/* ========== Readability ========== */
.recipe-description,
.recipe-ingredients,
.recipe-steps {
  line-height: 1.25;
}

.recipe-description {
  margin-bottom: 2rem;
}

/* ========== Login ========== */
form[action="/login/"] {
  font-size: 125%;
}

form[action="/login/"] input,
form[action="/login/"] button {
  font: inherit;
}

form[action="/login/"]>p {
  display: grid;
  grid-template-columns: 20% 80%;
  column-gap: 1rem;
  align-items: baseline;
}

form[action="/login/"] input[type="text"],
form[action="/login/"] input[type="password"] {
  width: 100%;
  justify-self: end;
  padding: .25rem;
}

form[action="/login/"] button {
  grid-column: 1 / -1;
  justify-self: center;
  width: clamp(200px, 50%, 50%);
  margin-top: 1rem 
}

/* ========== Buttons ========== */
a.btn,
a.btn:link,
a.btn:visited {
  display: inline-block;
  background: var(--oak);
  color: var(--white);
  padding: .5em 1em;
  border-radius: 9999px;
}

a.btn:hover,
a.btn:focus-visible {
  background: var(--cacao);
  color: var(--white);
}

main p:has(> a.btn) {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

/* ========== Tags ========== */
.tags {
  display: flex;
  flex-wrap: wrap;
  column-gap: .5rem;
  row-gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-indent: 0;
}

.tags a {
  text-wrap: nowrap;
  white-space: nowrap;
}

.tags a.tag::before{
  content:"#";
  color:#888;
}
.tags a.tag{ white-space:nowrap; }
.tags a.tag:hover{ color:var(--cacao); }
.tags a.tag:hover::before{ color:#888; } 

/* ========== Recipe Page ========== */
.recipe-sidebar img {
  max-width: 100%;
  height: auto;
  margin: 0 0 .5rem 0;
  transform: rotate(2deg);
  border: 5px solid var(--white);
  border-radius: 3px;
}

.recipe-sidebar dl {
  display: flex;
  flex-wrap: wrap;
  column-gap: .5rem;
  row-gap: .25rem;
  align-items: baseline;
  margin-bottom: 3rem;
}

.recipe-sidebar dt,
.recipe-sidebar dd {
  margin: 0;
  min-width: 0;
}

.recipe-sidebar dt {
  flex: 0 0 calc(25% - .25rem);
  font-weight: 600;
}

.recipe-sidebar dd {
  flex: 0 0 calc(75% - .25rem);
}

.recipe-ingredients ul {
  list-style: none;
  padding-left: 1rem;
  text-indent: -1rem;
}

.recipe-ingredients h2 {
  margin-bottom: .5rem;
}

.recipe-steps ol {
  list-style: decimal;
  padding-left: 1em;
}

.recipe-steps h2 {
  margin-bottom: .5rem;
}

.byline2 {
  grid-column: 1 / 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  margin-bottom: 2rem;
}

/* ========== Cards ========== */
.recipe-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  margin-block: 1rem;
  margin-inline: 0;
  list-style: none;
  padding: 0;
}

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

.recipe-list>li>.recipe-card {
  flex: 1 1 auto;
  width: 100%;
  padding: .5rem;
  background: var(--white);
  border-radius: 5px;
  box-shadow: 0 2px 6px var(--cast-iron);
}

.recipe-list .recipe-card img {
  max-width: 100%;
  height: auto;
  display: block;
}

.recipe-list .recipe-card h3 {
  margin: .5rem 0 .25rem;
}

/* ========== Profile Header ========== */
.profile-header {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  row-gap: .5rem;
  margin-bottom: 1rem;
  align-items: start;
}

.profile-header>h1 {
  grid-column: 1 / 2;
  grid-row: 1;
  margin: 0;
}

.byline {
  grid-column: 1 / 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 0;
}

.byline p {
  margin: 0;
}

.profile-header>img {
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  justify-self: end;
  width: 5rem;
  height: 5rem;
  object-fit: cover;
}

.profile-bio {
  margin-bottom: 3rem;
}

/* ========== Recipe Pairs ========== */
.pair {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.pair.pair--top>.recipe-sidebar {
  flex: 1 1 33%;
  min-width: 0;
}

.pair.pair--top>.recipe-description {
  flex: 2 1 67%;
  min-width: 0;
}

.pair.pair--bottom>.recipe-ingredients {
  flex: 1 1 33%;
  min-width: 0;
}

.pair.pair--bottom>.recipe-steps {
  flex: 2 1 67%;
  min-width: 0;
}

/* ========== Search ========== */
form[action="/s"] input[type="search"] {
  width: 100%;
  padding: .25rem;
}

/* ========== Responsive ========== */
@media (max-width:700px) {
  form[action="/login/"]>p {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  form[action="/login/"] label[for="password"] {
    margin-top: 1rem;
  }

  form[action="/login/"] input[type="text"],
  form[action="/login/"] input[type="password"] {
    width: 100%;
    justify-self: stretch;
  }
}

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

@media (max-width:500px) {
  body {
    padding: 0;
  }

  header {
    padding: 0 .5rem;
  }

  header hr{
    margin-left: calc(-.5rem);
    margin-right: calc(-.5rem);
  }

  main {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  header nav {
    margin-left: calc(-.5rem);
    margin-right: calc(-.5rem);
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .pair {
    display: block;
  }

  .recipe-sidebar,
  .recipe-description,
  .recipe-ingredients,
  .recipe-steps {
    margin-bottom: 2rem;
  }

  .recipe-steps {
    margin-bottom: 0;
  }
}

@media (max-width:400px) {
  .recipe-list>li {
    flex: 0 0 100%;
  }
}

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

.recipe-title-input{
  flex:1 1 auto;
  font-family:"Playwrite US Trad", cursive;
  color: var(--cacao);
  font-size: 2.2rem;
  padding: .25rem .5rem;
}

.page-title button{ 
  margin-left:1rem;
}

.recipe-sidebar dd {
  display: flex;
  align-items: baseline;
  gap: .25rem;
}

.recipe-sidebar dd input[type="number"] {
  width: 9ch;
  padding: .3rem .3rem;

}

.block-textarea{
  width:100%;
  resize: vertical;
}

.step-textarea {
  display: inline-block;
  vertical-align: top;
}

.recipe-steps ol{ list-style-position: outside; }
.recipe-steps ol > li.step{ margin-bottom: 1rem; }

.step-ingredients{
  list-style-type: circle;  
  list-style-position: outside;  
  margin-left: 1rem;
}

.step-ingredient{
  padding: .25rem 0;
  display: flex;
  align-items: baseline;
}

.step-ingredient{
  display: list-item;
}

.step-ingredient input[name$="_amount"] {
  width: 8ch;
}

.step-ingredient input[name$="_unit"] {
  width: 12ch;
}

.step-ingredient input[name$="_name"] {
  width: 31ch;
}

.step-ingredient input[type="number"],
.step-ingredient input[type="text"]{
  padding: .3rem .3rem;
  border: 1px solid var(--ash);
  border-radius: 2px;
  box-sizing: border-box;
}

@media (max-width: 500px){
  .step-ingredient input[name$="_name"]{ width: 100%; }
  .step-ingredient input[name$="_unit"]{ width: 40%; }
  .step-ingredient input[name$="_amount"]{ width: 35%; }
}

.form-errors { color:#b00020; margin:1rem 0; display:block; }

.form-errors ul { padding-left:1.25rem; }