/* Dishbook Main Styles */

/* Assignment 2, Phase 1  */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    font-size: 18px; 
}

/* Assignment 2, Phase 3  */

/* Metadata (author, featured, tags) */
.recipe__metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;   
}
.author {
  color: var(--oak);
   margin-right: 1.5rem;
}

.featured {
  font-weight: 600;
  color: var(--cast-iron);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;       
  justify-content: center;
}

.tags li {
  white-space: nowrap; 
  margin: 0; 
}

.recipe__metadata > * {
 margin: 0; 
}

.recipe__tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.recipe__ingredients ul {
  padding-left: 1rem;
}

.recipe__ingredients li {
  text-indent: -1rem;
  padding-left: 1rem;
}

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


.recipe__sidebar {
  flex: 0 0 200px; 
}

.recipe__sidebar img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 5px solid var(--white);
  transform: rotate(2deg);
}

.search-form__row input[type="search"] {
  width: 100%;
  padding: 0.25rem;
  box-sizing: border-box; 
  font-size: 1rem;
}

.recipe__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem; 
}

.recipe__meta dt {
  flex: 1 1 calc(25% - 0.5rem); 
  font-weight: bold;
}

.recipe__meta dd {
  flex: 1 1 calc(75% - 0.5rem); 
  margin: 0;
}

.recipe-bottom {
  display: flex;
  gap: 2rem;            /* space between ingredients and steps */
  flex-wrap: wrap;       /* stack on small screens */
}

.recipe__ingredients,
.recipe__steps {
  flex: 1;               /* each takes equal space */
  min-width: 250px;      /* prevents getting too narrow on small screens */
}


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

/* Base font and color settings */
body {
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  font-size: 18px;
  color: var(--cast-iron);
  background-color: var(--cream);
  display: flex;
  justify-content: center; 
  padding: 0.5rem;
}

.page-content {
  display: flex;
  flex-direction: column;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;                
  padding: 0 0.5rem;             
  gap: 0;  
}


.header-left {
  display: flex;
  justify-content: space-between; 
  align-items: baseline;          
  gap: 0;
}


.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  margin-bottom: 2rem;
}

.main-nav ul {
  display: flex;
  gap: 1rem;                     
}

.main-nav form {
  display: flex;
  align-items: center;
  margin-top: 0.25rem;
}

.main-nav input,
.main-nav button {
  padding: 0.25rem;             
}

/* Main content area */
main {
  background-color: var(--paper);
  border: 2px solid var(--ash);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;  
}

.recipe__description {
  margin-bottom: 2rem;   
  flex: 1;
  margin-left: 0;        
}

/* Header styling */
header {
  border-bottom: 2px solid var(--oak);
  gap: 0;
  margin-bottom: 0rem;
}

.profile-header {
  display: flex;
  justify-content: space-between; /* text left, image right */
  align-items: center;
  gap: 1rem; /* space between text and image */
}

.user-logo {
  width: 5rem;
  height: 5rem;
  object-fit: cover; /* scales nicely */
}

/* Headings use cursive font */
h1, h2, h3, h4, h5, h6{
  font-family: "Playwrite US Trad", Georgia, serif;
  font-size: 22.5px; 
  color: var(--cacao);
  padding-left: 0;
  margin-left: 0;
}

/* Main title (recipe name, profile name) is 80% larger */
h1 {
  font-size: 22px; 
}

/* Links styling */
a {
  color: var(--oak);
  text-decoration: none;
}

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

/* Button styling for main page */
.button {
  background-color: var(--oak);
  color: var(--cream);
  padding: 0.5em 1em;
  border-radius: 50px; 
  border: none;
  text-decoration: none;
  display: inline-block;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem; /* gap from previous paragraph */
}

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

/* Recipe top section: image on right, metadata+description on left */
.recipe-top {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.recipe-body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: nowrap; 
}

/* Left side: metadata + description */
.recipe-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 2; 
  min-width: 200px;
}

/* Recipe photo styling */
.recipe-photo {
  transform: rotate(2deg);
  border: 5px solid var(--white);
  border-radius: 3px;
}

.recipes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; 
  justify-content: flex-start;
  align-items: flex-start;
}

.card-grid {
  display: flex;
  flex-wrap: wrap;        
  gap: 1rem;              
  margin: 0 -0.5rem;      
}

section.recipes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start;
  align-items: flex-start;
}



.recipe-main {
  flex: 0 0 auto;       
  max-width: 30%;       
  margin-bottom: 1rem;
  border-radius: 10px;
  background: #fff;
  padding: 0.5rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  height: auto;    
}

.recipe-main figure {
  margin: 0;  
  display: block; 
}

@media (max-width: 900px) {
  .recipe-main {
    flex: 1 1 calc(50% - 0.5rem); /* 2 per row */
    max-width: calc(50% - 0.5rem);
  }
}

@media (max-width: 600px) {
  .recipe-main {
    flex: 1 1 100%; /* 1 per row on mobile */
    max-width: 100%;
  }
}

.recipe-main:hover {
  transform: translateY(-3px);
}

.recipe-main h3 {
  margin-top: 0.5rem;
  color: #8B5E34;
  font-family: "Playwrite US Trad", cursive;
}

.recipe-main img {
  width: 100%;
  height: auto;         
  border-radius: 10px;
  display: block;
}

.recipe-main .content { 
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}


/* Hash signs in tags */
.tag::before {
  content: "#";
  color: var(--ash);
}

/* Bold appropriate text */
strong, b {
  font-weight: bold;
}

ul {
  list-style: none;   /* removes bullets */
  padding-left: 0;    /* removes default indentation */
  margin: 0;          /* optional: remove extra margin */
}

/* Semi-bold for prep time and similar labels */
.prep-time, .cook-time, .servings, .difficulty {
  font-weight: 600;
}

/* Line height for ingredients, steps, and description */
.ingredients, .steps, .description, .about-me p {
  line-height: 1.25;
}

/* Login page styling */
.login-form {
  background-color: var(--paper);
  border: 2px solid var(--ash);
}


/* Login form container */
.login-form-inline {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;          /* space between inputs and button */
  width: 90%;            /* almost full page width */
  max-width: 500px;      /* optional: prevent being too wide */
  margin: 0;     /* center the form */
}

/* Username and password inputs */
.login-form-inline input {
  width: 100%;           /* full width of the form */
  padding: .5rem;       /* taller inputs */
  font-size: 1.5rem;     /* bigger text */
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}



/* Sign-in button */
.login-form-inline button {
  width: 40%;             
  padding: 0.25rem;       
  font-size: 1.1rem;
  display: block;       /* make it a block element */
  margin-left: 100px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  align-self: center;     /* center the button */
}


/* Hide bullet points */
nav ul, .tags, .ingredients, .recipe-list {
  list-style: none;
  padding-left: 0;
}


/* Keep numbers for steps */
.steps {
  list-style: decimal;
}

/* Visually hidden elements */
.visually-hidden {
  display: none;
}

/* 2 cards per row below 600px */
@media (max-width: 600px) {
  .recipe-main {
    flex: 1 1 calc(50% - 1rem);
  }
}

/* 1 card per row below 400px */
@media (max-width: 400px) {
  .recipe-main {
    flex: 1 1 100%;
  }
}

/* Mobile: stack left and right */
@media (max-width: 500px) {
  .recipe__sidebar {
    display: none;
  }
  .recipe-top {
    flex-direction: column;
  }
  .recipe-left {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

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

  main {
    border: none;
    padding: 0.5rem; /* small inner padding */
  }

  header {
    padding: 0.5rem;
  }
}

/* Narrow screens: stack labels/inputs */
@media (max-width: 699px) {
  .login-form-inline {
    flex-direction: column;
    gap: 1rem;
  }
  .login-form-inline input {
    width: 100%;
  }
  .login-form-inline button {
    width: 50%;
    min-width: 200px;
    align-self: center;
  }
}