/* Reset */
* {
  /* Remove default margin and padding from all elements */
  margin: 0;
  padding: 0;
  box-sizing: border-box;    /* Ensure padding and border are included in the element's total width and height */
}

body {
  /* Set the default font-family */
  font-family: 'Roboto', sans-serif;
  background: #f8f9fa;
  color: #333;
  line-height: 1.6;
}

/* Header Section Styling */
.main-header {
  /* Apply a gradient to the text, only showing the gradient where text is present */
  -webkit-background-clip: text;
  background: linear-gradient(to right, #166ce4, hsl(200, 33%, 34%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;     /* Make the text transparent so the background clip shows through */
  text-align: center;
  padding: 2rem 2rem;
  line-height: 1.6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.main-header h1 {
  /* Large font size for the main title */
  font-size: 3rem;
  /* Bold font weight */
  font-weight: 700;
}

/* Hero Section Styling */
.hero {
  /* Add padding to the hero section */
  padding: 3rem 1rem;
}

.hero-content h2 {
  /* Styles for the main heading text */
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.hero-content span {
  /* Apply a gradient to the highlighted text */
  -webkit-background-clip: text;
  background: linear-gradient(to right, #2867be, #3e5c6b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.5rem;   /* Maintain large font size and bold weight */
  line-height: 1.2;
  font-weight: 700;
  display: block;    /* Ensure span is treated as a block element */
  margin-bottom: 1rem;
  margin: 0;
}

.hero-content p {

  margin-bottom: 1.5rem;
  max-width: 500px;
  font-size: 1rem;
  color: #555;
}

.hero-content button {
  /* Button background gradient */
  background: linear-gradient(to right, #2f74d4, #3a6073);
  padding: 0.7rem 1.5rem;
  border-radius: 30px;
  font-size: 1rem;
}

.hero-content button a {
  /* Remove hyperlink underline and set color */
  text-decoration: none;
  color: #fff;
}

.hero-content button:hover {

 opacity: 0.9;
 transform: translateY(-2px);
 transition: all 0.3s ease;
}

/* Features Section Styling */
.features {
  /* Use flexbox to arrange feature cards */
  padding: 3rem 1rem;
  background: #fff;

}

.feature {
  margin: 1rem;
  padding: 1.5rem;
  background: #f1f1f1;
  border-radius: 15px;
  text-align: center;
  transition: transform 0.3s ease;
}

.feature:hover {
  /* Lift the card slightly on hover */
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: all 0.3s  ease-in-out;
}

.feature h3 {
  color: hsl(200, 33%, 34%);
  margin-bottom: 0.5rem;
}

/* Generator Input Section */
#generator {
  padding: 3rem 1rem;
  text-align: center;
}
#generator input {
  max-width: 80%;
}
#generator button {
background: linear-gradient(to right, #2f74d4, #3a6073);
color: #fff;
transition: 0.3s ease;
}
#generator button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
.ingredientInput,
.searchBtn {
  margin: 1rem 0;
}


/* Styling for the text input field */
.ingredientInput input {
  padding: 0.6rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  width: 250px;
  max-width: 80%;
  outline: none;
}

.ingredientInput input:focus {
  border-color: #2f74d4;
}

/*Pop up container*/
/* Ensures the popup container covers the screen and centers the content */
.recipe-popup {
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  z-index: 1000;
}

/*Styles the wrapper *inside* the flex container, which holds the recipe */
.popup-content {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative; /*Allows positioning the close button relative to this box */
}


.popup-content h2 {
  font-size: 2.5rem;
  font-weight: 700;
  -webkit-background-clip: text;
  background: linear-gradient(to right, #2867be, #3e5c6b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
}
/* Style for the close button, positioning it in the top-right corner of .popup-content */
.close-btn {
  position: absolute;
  top: 10px; right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #555;
  z-index: 10; /* Ensures the button is clickable over the content */
}

/* styling Ingredients ul list*/
.ingredients-list {
  padding-left: 15px;   /* Remove default left padding that pushes the list off-center */
  text-align: center;
  list-style-type: disc;
  margin: 0 auto 20px;
  width: fit-content;
  text-align: left;
}

.ingredients-list li {
  
  margin: 5px 0; /* Add a little vertical space between ingredients */
}

/* Styling instruction ol list*/
.instructions-list {
  
  list-style-type: decimal;   /* Ensure the list markers (1, 2, 3...) are clearly visible */
  padding-left: 20px;
  text-align: left;
  line-height: 1.5;
}

.instructions-list li {

  margin-bottom: 10px;
}

.close-btn:hover {
color: #2f74d4;
transform: scale(1.1);
transition: all 0.2s;
}

/* Responsive Design */
@media (max-width: 768px) {

  .hero .row {
    flex-direction: column-reverse;
    text-align: center;
  }

  /* Adjust Hero heading font sizes for medium screens */
  .hero-content h2 {
    font-size: 1.5rem;
  }

  .hero-content span {
    font-size: 2rem;
  }

  /* Stack features vertically on tablet/mobile */
  .features {
    flex-direction: column;
    align-items: center;
  }

  /* Make feature cards wider on smaller screens */
  .feature {
    width: 90%;
  }

  /* Adjust input field width */
  .ingredientInput input {
    width: 70%;
  }
}

@media (max-width: 480px) {
  /* Smaller font for the main header on small phones */
  .main-header h1 {
    font-size: 2rem;
  }

  .popup-content {
    width: 95%;
    padding: 1rem;
  }

  .popup-content h2 {
    font-size: 1.4rem;
  }
}