/* -------------------- GLOBAL -------------------- */
body {
  margin:0;
  padding:0;
  background:#FFF6F1;
  font-family:"Comic Sans MS","Patrick Hand",cursive;
  overflow-x:hidden;
  color:#3a2e2e;
}
* { transition:0.3s ease; }

/* -------------------- HERO -------------------- */
.top-image {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:auto;
  z-index:1000;
  overflow:hidden;
}
.top-image img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero {
  min-height:100vh;
  width:100%;
  position:relative;
  text-align:center;
  overflow:hidden;
  z-index:5;
  margin-top:0;
}
.logo {
  font-size:5rem;
  color:#FF7A6E;
  font-weight:bold;
  letter-spacing:2px;
  z-index:10;
  position:relative;
  text-align:center;
  margin-top:1px;
  transform-origin:bottom center;
}
.floating-items {
  position:fixed;
  left:0;
  width:100vw;
  pointer-events:none;
  z-index:1;
}
.float {
  position:absolute;
  width:90px;
  opacity:0.85;
}
.down-hint {
  position:absolute;
  bottom:40px;
  width:100%;
  font-size:2rem;
  color:#8F6E66;
  opacity:0.6;
  z-index:5;
}

/* -------------------- SECOND WINDOW -------------------- */
.second-window {
  padding-top:100px;
  min-height:100vh;
  position:relative;
}

.food-cards-horizontal {
  display:flex;
  justify-content:center;
  gap:20px;
  padding:0 20px;
  margin-bottom:20px;
}
.food-card {
  flex:none;
  background:#FF7A6E;
  color:white;
  font-size:2rem;
  font-weight:bold;
  padding:20px 30px;
  border-radius:15px;
  opacity:0;
  cursor:pointer;
  user-select:none;
}
.food-card.show {
  opacity:1;
  transition:opacity 0.6s ease;
}

.search-box {
  display:flex;
  justify-content:flex-end;
  gap:15px;
  background:white;
  padding:15px 20px;
  border-radius:20px;
  box-shadow:0px 5px 20px rgba(0,0,0,0.06);
  max-width:500px;
  height:50px;
  margin:0 auto 30px auto;
}
.search-box input {
  border:none;
  outline:none;
  font-size:1.2rem;
  width:200px;
  background:none;
}
.search-box button {
  background:#FF7A6E;
  color:white;
  border:none;
  padding:12px 18px;
  border-radius:15px;
  cursor:pointer;
  font-size:1rem;
  font-weight:bold;
}
.search-box button:hover {
  background:#ff5d54;
}

.illustration-flashcard {
  width:90%;
  height:1000px;
  margin:0 auto 50px auto;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 25px rgba(0,0,0,0.1);
}
.illustration-flashcard img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition: opacity 1s ease;
}

/* -------------------- RECIPE SECTION -------------------- */
/* ================= RECIPE SECTION ================= */

.recipe-section {
  padding-top: 380px;               /* clears hero image */
  padding-bottom: 120px;
  background: #FFF6F3;
  min-height: 100vh;
  z-index: 30;

}

/* BIGGER recipe card */
.recipe-card {
  background: #FFFFFF;

  width: 90%;                     /* takes most of screen width */
  max-width: 1200px;              /* ⬅ bigger than before */
  min-width: 600px;               /* ensures it doesn't shrink too much */
  height: 70%;                   /* allow content to determine height */
  min-height: 70vh;               /* still at least 80% of viewport height */
  
  margin: 20px auto;
  padding: 40px;                  /* more padding for spacious feel */
  border-radius: 28px;
  box-shadow: 0px 10px 30px rgba(0,0,0,0.1);

  display: flex;
  flex-direction: column;
  animation: fadeInUp 0.8s ease forwards;

  font-size: 30px;                /* larger font for recipe text */
  line-height: 1.7;
}

/* Scroll happens INSIDE recipe */
#recipeSteps {
  margin-top: 20px;
  padding-left: 22px;
  font-size: 1.8rem;
  line-height: 1.6rem;
  overflow-y: auto;                 /* ✅ INTERNAL SCROLL */
  flex: 1;                          /* fills remaining space */
}

/* Individual steps */
#recipeSteps li {
  margin: 14px 0;
  color: #574745;
}

/* Hide section when not used */
.hidden {
  display: none;
}

/* Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.back-btn {
  background: #FF7A6E;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 1.2rem;
  cursor: pointer;
  margin-bottom: 20px;
}
.back-btn:hover {
  background: #ff5d54;
}


/* -------------------- PLANNER SECTION (ADDED ONLY) -------------------- */
.planner-section {
  height:200vh;
  padding:120px 60px;
  background:#FFF6F1;
}

.planner-title {
  text-align:center;
  font-size:4.5em;
  color:#FF7A6E;
  margin-bottom:60px;
}

.planner-grid {
  display:flex;
  gap:30px;
}

.planner-column {
  flex:1;
  background:#FFFFFF;
  border-radius:25px;
  padding:25px;
  box-shadow:0px 8px 25px rgba(0,0,0,0.08);
}

.planner-column h3 {
  font-size:2.5rem;
  color:#8F6E66;
  margin-bottom:10px;
  text-align: center;
}

.add-btn {
  background:#FF7A6E;
  color:white;
  border:none;
  padding:12px 20px 12px 20px;;
  border-radius:15px;
  font-size:2rem;
  font-weight:bold;
  cursor:pointer;
  margin: 0 auto 15px auto; /* centers horizontally */
  width: 250px;
  display: block; /* necessary for margin auto to work */
}
.add-btn:hover {
  background:#ff5d54;
}

.planner-list {
  list-style:none;
  padding:0;

}

.planner-list li {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#FFF6F3;
  padding:10px 14px;
  border-radius:15px;
  margin-bottom:10px;
}

.planner-list input {
  border:none;
  background:none;
  outline:none;
  width:100%;
  font-size:2rem;
  font-family:inherit;
}

.delete-btn {
  cursor:pointer;
  color:#FF7A6E;
  font-weight:bold;
  padding-left:10px;
}

.project-footer {
  margin-top:80px;
  text-align:center;
  font-size:0.9rem;
  color:#8F6E66;
  opacity:0.7;
}