body {
  font-family: 'Nunito', Arial, sans-serif;
  background-color: #F7F1E8;
  color: #2E261C;
  font-size: 18px;
  line-height: 1.25;
}


h1, h2, h3, h4, h5, h6 {
  font-family: 'Playwrite US Trad', cursive;
  color: #A8570C;
}

a {
    color: #8B5E34;
    text-decoration: none;
}
a:hover{
    color: #A8570C;
    text-decoration: underline;
}
h1 {
  font-size: 1.8em;
}

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

.recipe__meta dt{
    font-weight: bold;
    margin-top: 0.5em;
}
.recipe__meta .label {
  font-weight: 600;
}

.login-form, .login-form input, .login-form label, .login-form button {
  font-size: 1.25em; /* 25% larger than 18px */
}

.recipe__tags {
  list-style: none;
  padding: 0;
  margin: 0;
}
.recipe__tags .hash {
    color: #8B5E34;
    font-weight: bold;
}

ul {
    padding-left: 0;
    margin-left: 0;
    margin-left: 0;
}

:root { --content-max: 700px; }

.main {
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
  padding-inline: .5rem;
  box-sizing: border-box;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

.recipe__description{
    margin-bottom: 0rem;
}


.view-profile-link {
    font-weight: 500;
    color: #8B5E34;
    text-decoration: none;
}

.view-profile-link:hover {
    color: #A8570C;
    text-decoration: underline;
}

.nav-line {
    border-bottom: 2px solid #2E261C;
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
}

body {
  margin: 0;
  padding-inline: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.login-box,
.index-box,
.recipe-box,
.profile-box{
  border: 1px solid #A8570C;
  border-radius: 35px;
  padding: 1rem;
  background-color: #fefaf5;
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
  padding-inline: 1rem;
  box-sizing: border-box;
}

.searchpage-box {
  border: 1px solid #A8570C;
  border-radius: 35px;
  background-color: #fefaf5;
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
  padding-inline: 0.5rem;
  padding: 1rem;
}


.site-header {
  padding-top: 0.5rem;
}
.site-header__inner {
  width: 100%;
  max-width: 700px;
  margin-inline: auto;     /* center it */
  padding-inline: 0.5rem;  /* 0.5rem side gutters */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.recipe__photo img{
    transform: rotate(2deg);
    margin-bottom: 0.5rem;
    
}

.recipe__photo{
  margin-bottom: 0.5rem;
}
.site-nav__links {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-nav__search {display: flex; gap: 0.25rem;}
.site-nav__search input[type="search"],
.site-nav__search button { padding: .25rem; } 
.site-nav__search {margin-left: auto;}

.search-form__row input[type="search"]{
  width: 100%;
  font-size: 1.25rem;
  margin-bottom: 2rem;
  padding: 0.25rem;
}
.btn{
    display: inline-block;
    padding: 0.5em 1em;
    border-radius: 9999px;
    text-decoration: none;
    background-color: #8B5E34;
    color: #FFF;
    font-weight: bold;
    transition: all 0.2s ease;
}

.btn:hover{
    background-color: #4B2E2B;
    color:#FFF;
}

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

html { font-size: 18px; }

.page {
    display: flex;
    justify-content: center;
}

.page_inner {
    width: 100%;
    max-width: 700px;
    padding-inline: .5rem;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.recipe__header{
    margin-bottom: 2rem;
}

.header-top{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.brand {margin: 0; line-height: 1.1; }
.header-sep {
  margin: 0.25 rem;
  border: none;
  border-top: 3px solid #A8570C;
}
.header-sep + .site-nav {margin-top: .25rem;}

.site-nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header {
    margin-bottom: 3rem;
}
.recipe__meta-row{
  display:flex;
  flex-wrap:wrap;
  column-gap:1.5rem;
  row-gap:0;
  align-items:baseline;
}

.recipe__intro{
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom : 2rem;
}

.recipe__intro-left{
  flex: 0 0 300px;
}

.recipe__intro-right{
  flex: 1;
}

.recipe__tags-wrap{ display:flex; align-items:baseline; flex: 0 0 100%;}
.recipe__tags{ display:flex; flex-wrap:wrap; gap:0.5rem; margin:0; padding:0em; list-style:none; }
.tags-label{ font-weight:400; }

.recipe__ingredients ul{ margin:0; padding-left:0; }
.recipe__ingredients li{
  list-style:none;
  padding-left:1rem;
  text-indent:-1rem;
}

.recipe__steps ol{ padding-left:1em; margin:0; }

:root{ --sidebar-width:260px; }
.recipe__photo img{
  display:block;
  width:100%;
  max-width:var(--sidebar-width);
  height:auto;
  margin-bottom:.5rem;
}

.recipe__photo{
  margin: 0 0 0.5rem 0;
}

@media (min-width:800px){
  .recipe__body{ display:flex; gap:2rem; }
  .recipe__ingredients{ flex:1 1 0; }
  .recipe__steps{ flex:2 1 0; }
}

.recipe__ingredients h3 {
  margin-bottom: 0.5rem;
}
.recipe__ingredients ul{
  margin-bottom: 2rem;
}
.recipe__steps h3 {
  margin-bottom: 0.5rem; }

.recipe__meta{
  display:flex;
  flex-wrap:wrap;
  column-gap:.5rem;
  row-gap:.25rem;
  margin:0;
}
.recipe__meta dt, .recipe__meta dd{ margin:0; }
.recipe__meta dt{
  flex:0 0 calc(25% - .25rem);
  font-weight:600;
  white-space:nowrap;
}
.recipe__meta dd{
  flex:0 0 calc(75% - .25rem);
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  /*display: grid;*/
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: 1rem;
  padding-inline: 1rem;
  align-items: start;
}

.card-grid > li { margin: 0; }

.recipe-card {
  background: #fff;
  border-radius: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #C2B8AF;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.42);

} 

.card__link { display: block; text-decoration: none; color: inherit; }

.card__media { margin: 0 0 0.5rem 0; }
.card__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0rem;
}

.card__body { display: grid; gap: 0.5rem; }

.tags {
  list-style: none;
  margin: 0;
  margin-left: 0; display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 0rem;
}

.tags li { margin: 0; }
.tags a {
  white-space: nowrap;
  display: inline-block;
  background: #f3f0eb;
  font-size: 0.9rem;
}

.search__inner h1{
  margin-bottom: 1rem;
}
/* Login form styles */

.login-box form > div {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.login-box form input[type="email"],
.login-box form input[type="password"] {
  width: 80%;
  margin-left: auto;
  padding: 0.25rem;
  box-sizing: border-box;
}

.login-box form button[type="submit"] {
  display: block;
  width: 50%;
  min-width: 200px;
  margin: 1rem auto 0;
  padding: 0.25rem;
}

.login-box h2 {
    margin-bottom: 1.5rem;
  }

@media (max-width: 699px) {
  .login-box form > div {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
  }

  .login-box form > div:first-of-type {
    margin-bottom: 1rem;
  }

  .login-box form input[type="email"],
  .login-box form input[type="password"] {
    width: 100%;
    margin-left: 0;
  }

  .login-box form button[type="submit"] {
    width: 50%;
    min-width: 200px;
  }

  .login-box h2 {
    margin-bottom: 1.5rem;
  }

  .recipe__intro{
    flex-direction: column;

  }

  .recipe__intro-left,.recipe__intro-right{
    flex: 1 1 auto;
  }

 
}

 .hero h1{
    margin-bottom: 1rem;
  }

  .featured h2{
    margin-bottom: 0.5rem;
  }
  .featured p{
    margin-bottom: 1rem;
  }

  .hero p{
    margin-bottom: 1rem;
  }

  .hero .actions{
    margin-bottom: 2rem;
  }

  .recipe__header h1{
    margin-bottom: 1rem;
  }

  .recipe-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .profile-header{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
 
  .profile-text h1{
    margin-bottom: 0.5rem;
    margin-top: 0;
  }
  .profile-text p{
    margin: 0;
  }



  .profile-photo img{
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 50%;
  display: block;
  margin: 0;
}

.about{
  margin-bottom: 3rem;
}

.header-top h2{
  margin-bottom: 0.5rem;
}

.recipe-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.recipe-list > li,
.recipe-card {
  min-width: 0;
}

/* Make card content behave nicely */
.card__link { display: block; }
.card__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
} 

/* ≤600px: 2 cards per row, each no smaller than ~200px */
@media (max-width: 600px) {
  .recipe-list {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
  .card-grid {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
  }
}

/* ≤400px: 1 card per row */
@media (max-width: 400px) {
  .recipe-list {
    grid-template-columns: 1fr;
  }
  .card-grid {
    grid-template-columns: 1fr;
  }

  .site-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .site-nav__search {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 500px) {
    .login-box,
  .index-box,
  .recipe-box,
  .profile-box,
  .searchpage-box{
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding-inline: 0;
    box-shadow: none;
  }

  .recipe__intro {
    flex-direction: column;
    gap: 2rem;
  }

  .recipe__intro-left,
  .recipe__intro-right {
    flex: 1 1 auto;
  }

  .recipe__body {
    display: block;
  }

  .recipe__ingredients {
    margin-bottom: 2rem;
  }

  .recipe__steps {
    margin-bottom: 0;
  }

  .site-header__inner {
    padding-inline: 0.5rem;
  }

  .header-sep {
    margin-inline: -1rem;
    width: calc(100% + 2rem);
  }

  .login-box,
  .index-box,
  .recipe-box,
  .profile-box,
  .searchpage-box {
    width: calc(100%);
  }
}

/* Edit form styling */
.recipe__title input[type="text"] {
    font-family: 'Playwrite US Trad', cursive;
    font-size: 2.5rem;
    font-weight: bold;
    color: #A8570C;
    border: none;
    background: transparent;
    width: 100%;
}

.recipe__title {
    position: relative;
}

.recipe__title button {
    position: absolute;
    top: 0;
    right: 0;
    background: white;
    color: black;
    border: 1px solid black;
    padding: 0.5rem 0.5rem;
    cursor: pointer;
}

/* Number input sizing */
input[type="number"][size] {
    width: calc(attr(size number) * 1ch + 2rem);
}

/* Textarea styling */
textarea {
    width: 100%;
    resize: vertical;
    border: 1px solid #ccc;
    padding: 0.5rem;
    font-family: inherit;
    font-size: inherit;
}

/* Step styling */
.recipe__steps li {
    vertical-align: top;
    margin-bottom: 1rem;
}

/* Visually hidden labels */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Ingredient list styling */
.recipe__steps ul,
.recipe__ingredients ul {
    margin-left: 0.5rem;
    list-style-type: circle;
}

.recipe__ingredients ul {
    list-style: circle;
}

.recipe__steps ul li {
    margin-bottom: 0;
    padding: 1rem 0 0.25rem;
}

/* Custom input sizing */
input[type="number"][name*="ingredient_amount"] {
    width: 3rem;
    height: 1.5rem;
    padding: 0.25rem 0.5rem;
    margin-right: 0.25rem;
}

input[type="text"][name*="ingredient_unit"] {
    width: 7rem;
    min-width: 7rem;
    height: 1.5rem;
    margin-right: 0.25rem;
    padding: 0.25rem 0.5rem;
}

input[type="text"][name*="ingredient_name"] {
    width: 9rem; /* Fixed width for name */
    height: 1.5rem;
    padding: 0.25rem 0.5rem;
}

input[type="number"][name*="prep_time_minutes"] {
  width: 3rem;
  height: 1.5rem;
  padding: 0.25rem 0.5rem;
  margin-right: 0.25rem;
}

input[type="number"][name*="cook_time"] {
  width: 3rem;
  height: 1.5rem;
  padding: 0.25rem 0.5rem;
  margin-right: 0.25rem;
}

input[type="number"][name*="total_time"] {
  width: 3rem;
  height: 1.5rem;
  padding: 0.25rem 0.5rem;
  margin-right: 0.25rem;
}

input[type="number"][name*="servers"] {
  width: 3rem;
  height: 1.5rem;
  padding: 0.25rem 0.5rem;
  margin-right: 0.25rem;
}

input[type="text"][name*="title"] {
  width: 85%;
  padding: 0.25rem 0.5rem;
}

/* Error message styling */
.error-messages {
  background-color: #ffebee;
  border: 2px solid #f44336;
  border-radius: 4px;
  padding: 1rem;
  margin: 1rem 0;
  color: #c62828;
}

.error-messages ul {
  margin: 0;
  padding-left: 1.5rem;
  list-style-type: disc;
}

.error-messages li {
  margin-bottom: 0.5rem;
  font-weight: 500;
}