/* === assets/style.css (Tighter Layout + Comments) === */

/* Base styles for page layout */
body, html {
  margin: 0; /* Removes default margin */
  padding: 0; /* Removes default padding */
  font-family: 'Quicksand', sans-serif;

  background-color: #e5f5e0; /* Soft green background */
  overflow-x: hidden; /* Prevents horizontal scroll */
  scroll-behavior: smooth; /* Enables smooth scrolling */
  position: relative; /* Needed for leaf decoration positioning */
}

/* Main container to center content vertically */
main {
  display: flex; /* Flexbox layout */
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically */
  min-height: 100vh; /* Full screen height */
  gap: 20x; /* Tighter vertical spacing */
  text-align: center; /* Center text */
  padding: 20px 20px; /* Reduced spacing inside */
}

/* Wrapper for the envelope to control height */
.envlope-wrapper {
  height: 200; /* Smaller fixed height */
  margin: 0 auto; /* Center horizontally */
}

/* Envelope body container */
#envelope {
  position: relative; /* For absolute children */
  width: 260px; /* Reduced width */
  height: 160px; /* Reduced height */
  border-bottom-left-radius: 6px; /* Rounded corner */
  border-bottom-right-radius: 6px; /* Rounded corner */
  background-color: #a3cfb5; /* Envelope base color */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Soft shadow */
  cursor: pointer; /* Clickable */
  margin: 0 auto; /* Centered */
}

/* Invisible base for flap/pocket positioning */
.front {
  position: absolute; /* Positioned within envelope */
  width: 0; /* Triangle setup */
  height: 0; /* Triangle setup */
  z-index: 3; /* Above letter */
}

/* Triangle flap style */
.flap {
  border-left: 130px solid transparent; /* Left triangle */
  border-right: 130px solid transparent; /* Right triangle */
  border-bottom: 72px solid transparent; /* Bottom invisible */
  border-top: 88px solid #4b8b60; /* Top visible flap */
  transform-origin: top; /* Rotation point */
  pointer-events: none; /* Not clickable */
}

/* Triangle pocket style */
.pocket {
  border-left: 130px solid #81b38b; /* Left part */
  border-right: 130px solid #81b38b; /* Right part */
  border-bottom: 80px solid #6ca376; /* Bottom visible */
  border-top: 80px solid transparent; /* Top invisible */
  border-bottom-left-radius: 6px; /* Rounded corners */
  border-bottom-right-radius: 6px; /* Rounded corners */
}

/* Letter inside the envelope */
.letter {
  position: relative; /* Inside envelope */
  background-color: #cce9d9; /* Light green paper */
  width: 90%; /* Width within envelope */
  margin: 0 auto; /* Centered */
  height: 160%; /* Slightly taller than envelope */
  top: 3%; /* Shift down */
  border-radius: 6px; /* Rounded edges */
  box-shadow: 0 2px 26px rgba(0, 0, 0, 0.12); /* Paper shadow */
  transition: transform 0.4s ease; /* Slide animation */
}

/* Content inside the letter */
.letter-content {
  overflow-y: auto; /* Scroll if too long */
  max-height: 200px; /* Max view height */
  overflow-wrap: break-word; /* Wrap long words */
  padding: 20px; /* Space inside */
  font-size: 16px; /* Text size */
  visibility: hidden; /* Hidden when closed */
}

/* Flap flips open */
.open .flap {
  transform: rotateX(180deg); /* Flip animation */
  transition: transform 0.4s ease, z-index 0.6s; /* Smooth */
  z-index: 1; /* Behind letter */
}

/* Flap flips closed */
.close .flap {
  transform: rotateX(0deg); /* Flat position */
  transition: transform 0.4s 0.6s ease, z-index 1s; /* Delay for realism */
  z-index: 5; /* In front */
}

/* Slide letter out */
.open .letter {
  transform: translateY(-180px); /* Pull up */
  z-index: 2; /* Above flap */
}

/* Keep letter inside */
.close .letter {
  transform: translateY(0px); /* Stay in place */
  z-index: 1; /* Default */
}

/* Show content when open */
.open .letter-content {
  visibility: visible; /* Make visible */
}

/* Utility classes for logic */
.open {
  overflow: visible; /* Allow pull */
}

.close {
  overflow: hidden; /* Clip letter */
}

/* Heart container (not used) */
.hearts {
  position: absolute; /* Inside envelope */
  top: 90px;
  left: 0;
  right: 0;
  z-index: 2;
}

/* Hides heart visuals */
.heart {
  display: none;
}

/* Navigation container */
.nav-section {
  background: transparent; /* Match page */
  padding: 10px; /* Inner spacing */
  text-align: center; /* Center heading */
  margin-top: 0; /* No extra gap */
}

/* Navigation heading style */
.nav-section h2 {
  font-size: 1.8rem; /* Slightly smaller text */
  margin-bottom: 30px; /* Tighter spacing */
}

/* Navigation button container */
.nav-buttons {
  list-style: none; /* No bullets */
  padding: 0; /* No extra spacing */
  display: flex; /* Flex layout */
  flex-wrap: wrap; /* Wrap on small screens */
  gap: 14px; /* Slightly less spacing */
  justify-content: center; /* Centered row */
}

/* Button styles */
.nav-buttons li a {
  display: inline-block; /* Button box */
  padding: 15px 25px; /* Smaller padding */
  border-radius: 12px; /* Rounded corners */
  background: #006d2c; /* Button green */
  color: white; /* White text */
  text-decoration: none; /* No underline */
  font-size: 0.95rem; /* Slightly smaller */
  transition: background 0.3s ease; /* Smooth hover */
}

/* Button hover style */
.nav-buttons li a:hover {
  background: #005022; /* Darker on hover */
}

/* Mobile styles */
@media (max-width: 600px) {
  .letter-content {
    font-size: 14px; /* Smaller text */
  }

  .nav-buttons li a {
    padding: 10px 16px; /* Smaller padding */
    font-size: 0.90rem; /* Smaller text */
  }
}

/* Hides scroll hint text */
.scroll-hint {
  display: none;
}

/* Hides reset buttons */
.reset {
  display: none;
}

/* Decorative leaf images */
body::before, body::after {
  content: ""; /* Required for pseudo elements */
  position: absolute; /* Float on page */
  background-image: url('../assets/leaf.png'); /* Leaf image */
  background-size: contain; /* Scale image */
  background-repeat: no-repeat; /* No tiling */
  opacity: 0.15; /* Subtle look */
  width: 180px; /* Slightly smaller */
  height: 180px; /* Slightly smaller */
  z-index: 0; /* Behind all */
}

/* Top left leaf */
body::before {
  top: 10px;
  left: 10px;
}

/* Bottom right leaf */
body::after {
  bottom: 10px;
  right: 10px;
}