/* --- Reset and body styles --- */
@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&family=Stack+Sans+Text:wght@200..700&display=swap');

body {
  margin: 0;
  background-color: #3d3b3b ;
  color: black;
  font-family: "Stack Sans Text";
  transition: background-color 0.6s ease-in-out;
}

/* --- Top nav --- */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: antiquewhite;
  backdrop-filter: blur(6px);
  /* border-bottom: 1px solid white;*/
  z-index: 51;
}

.nav-list {
  display: flex;
  align-items: baseline;
  padding: 0.64rem 2rem;
  list-style: none;
  margin: 0;
  width: 110%;
justify-content: space-evenly;
font-size: 10px;
box-sizing: border-box;

}



.nav-list li a {
  text-decoration: none;
  color: black;
}

.nav-list li a:hover {
  color: #d8b9bd;
}


.nav-list .logo,
.nav-list .year {
  color: #b59297;
  font-size: .6rem;
margin-top: 2px;
}

.nav-list .logo img {
position: fixed;
left: 10px;
margin-top: -16px;
width: 1.5rem;
}

.nav-list .name  {
margin-left: 124px;
}


/* --- Hero banner --- */
.hero-banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 45vh;
  margin-top: 2rem;
}

.banner-track {
  display: flex;
  animation: scrollBanner 30s linear infinite;
  /* width will now be set dynamically by JS */
}

@keyframes scrollBanner {
  100% { transform: translateX(-50%); } /* move by half the track */
}

.banner-track img {
  height: 100%; /* Let the image keep its natural height */
  max-height: 45vh; /* Constrain to container if needed */
  width: auto;
  margin-right: 2rem;
}

.hero-title {
  font-size: 8vw;
  font-weight: 700;
  line-height: 0.9;
  text-align: center;
  position: fixed;
  margin-top: -10vh; 
  right: 10px;


}

.hero-title img {
width: 40vw;
position: fixed;
right: 122px;
top: 22%;
content: url('1.png')
 

}





/* --- Sidebar --- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 16rem;
  height: 100%;
  background-color: #fff9ebb3;
  backdrop-filter: blur(6px);
  overflow-y: auto;
  padding: 1.5rem;
  box-sizing: border-box;
  z-index: 50;
 
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
margin-top: 15px;
}

.sidebar a {
  color: inherit;
  text-decoration: none;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-item h2, .menu-item h3 {
  font-size: .8rem;
  font-weight: normal;
}

.menu-item span {
  letter-spacing: 3px;
  opacity: 0.6;
  text-align: center;
  flex: 1;
}

.menu-item p {
  color: #888;
font-size: .5rem;
}
.menu-slider { 
  width: 100%; 
  min-height: 14rem; /* Increased even more */
  overflow-x: hidden; 
  overflow-y: hidden; 
  position: relative;
  margin: 0 -1.5rem;
  padding: 0 1.5rem;
margin-bottom: -4.5rem;
}

.menu-track {
  display: flex;
  align-items: center;
  gap: 0;
  transition: transform 0.4s ease-in-out;
  position: relative;
}

.menu-track .slide-link {
  flex-shrink: 0;
  width: 95%; /* Increased to 95% - much larger */
  display: block;
}

.menu-track img {
  width: 100%;
  height: auto;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
}

.nav-button {
  flex-shrink: 0;
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #333;
  display: flex; /* Changed back to flex */
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  margin: 0;
  padding: 0 0.25rem;
  opacity: 1; /* Use opacity instead of display */
  pointer-events: auto;
}

.nav-button:hover {
  color: #000;
}

.nav-button:active {
  color: #666;
}

/* Hide buttons by default */
.nav-button {
  opacity: 0;
  pointer-events: none;
}

/* Show buttons when visible */
.nav-button.visible {
  opacity: 1;
  pointer-events: auto;
}


.sidebar-footer {
  position: fixed;
  bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 0; 
}

.sidebar-footer h4 {
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove any padding */
  line-height: 1.5; /* Tight line height */
  font-size: 10px;
font-weight: 100;
}

.sidebar-footer a {
  text-decoration: none;
  color: black;
}

.sidebar-footer a:hover {
  color: #645759;
}

/* Sidebar hover highlight */
.sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 15px;
  position: relative;
  --highlight-top: 0px;
  --highlight-height: 0px;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* The sliding highlight box */
.sidebar-content::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  width: calc(100% + 3rem);
  top: var(--highlight-top);
  height: var(--highlight-height);
  background-color: var(--highlight-color);
  opacity: 0;
  transition: top 0.3s ease-in-out, height 0.3s ease-in-out, opacity 0.3s ease-in-out, background-color 0.6s ease-in-out;
  pointer-events: none;
  z-index: 1;
}

.sidebar-content.highlight-active::before {
  opacity: 0.5;
}

/* When NOT active, no transition - instant hide */
.sidebar-content:not(.highlight-active)::before {
  opacity: 0 !important;
}

/* Footer hover styles */
.sidebar-footer h4 {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-size: 10px;
  font-weight: 100;
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* --- Main container --- */
    .main-container {
      margin-left: 16rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
overflow: hidden;
    }

    main {
      flex-grow: 1;
      padding: 2rem;
      margin-top: 3rem;
    }

    /* Hero Section */
    .hero-section {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 4rem;
      position: relative;
      gap: 4vw;
      max-width: 1400px;
      margin: 0 auto 4rem;
      padding-inline: 6vw;
 
    }

   .hero-left {
  position: relative;
max-width: 520px;
}

    .hero-text {
      font-size: 5.5rem;
      font-weight: 700;
      line-height: 1.1;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: white;
     position: relative;
     z-index: 2;




    }

    .sparkle-inline {
      width: 3rem;
      height: 3rem;

    }

    .star-top-left {
      width: 15vw;
      margin-top: -10vw;
      margin-bottom: 1rem;
      z-index: -24;
      position: absolute;
      left: -26px;
      z-index: 1;
    }

    .hero-subtitle {
      color: #d8b9bd;
      font-size: 1.2rem;
      margin-top: 2em;
      line-height: 1.4;
      max-width: 200px;
padding-top: 100px;
    }

    .hero-right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      position: relative;




    }

    .star-top-right {
      width: 3rem;
      position: absolute;
      top: 0;
      right: 0;
    }

    .hero-image-container {
    position: absolute;
       width: 50vw;
  max-width: 900px;
  min-width: 360px;
  margin-top: 3rem;
margin-right: -200px;


    }

    .hero-image {
      width: 100%;
      height: auto;



    }

    .sparkle-under-hero {
      width: 3rem;
      position: absolute;
      bottom: -1rem;
      left: 0;
    }

    /* ID Card Section */
    .id-card-section {
      position: relative;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }

    .id-card {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      display: block;
      padding-top: 100px;
    }

.id-card-section p {
  font-size: 1rem;
  max-width: 500px;
  text-align: center;
  margin: 0 auto;
color: #d8b9bd;
margin-bottom: 142px;
}

    .star-right-id {
      width: 25%;
      position: absolute;
      right: -2rem;
      top: 57%;
     
    }

    /* Pink Container */
    .pink-container {
      background-color: #f5d4d8;
      padding: 4rem 3rem;
      margin: 4rem 0;
      position: relative;
      box-shadow:
  0 8px 12px rgba(0, 0, 0, 0.8),
  0 20px 40px rgba(0, 0, 0, 0.08),
  0 40px 80px rgba(0, 0, 0, 0.04);
      background-image: url("paper-texture.png");
      background-repeat: repeat;
      background-size: auto; /* or omit entirely */
      background-position: top left;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }

    .collage-3up {
      width: 100%;
      max-width: 900px;
      margin: 0 auto 4rem;
      display: block;
    }

    .list-section {
      margin: 4rem 0;
      width: 50%;
      margin-left: auto;
      margin-right: auto;
    }

    .list-title {
      font-weight: 400;
      margin-bottom: 1.5rem;
     font-size: clamp(1rem, 2vw, 1.25rem);
     letter-spacing: 0.08em;
    }

    .list-content {
      font-size: clamp(0.75rem, 1.5vw, 0.75rem);
      line-height: 1.6;
      color: #333;
      font-weight: 100;
    }

.list-content strong {
font-weight: 1000;
font-size: clamp(0.75rem, 1.5vw, 0.75rem); }

    .polaroid {
      width: 100%;
      max-width: 400px;
      margin: 3rem auto;
      display: block;
    }

   /* Bottom Section */
.bottom-section {
  text-align: center;
  margin-top: 5rem;
  position: relative;
  padding: 0;
  width: 100%;
}
.envelope-container {
  position: relative;
  width: 100%;
  bottom: 0;
  padding: 0;
  max-width: 600px;
  margin: 0 auto;
}

.envelope {
  width: 100%;
  max-width: 100%;
  display: block;
  pointer-events: none; /* ADD THIS - lets clicks pass through */
}

.email-icon {
  position: absolute;
  top: 18%;
  right: 17%;
  width: 4rem;
  cursor: pointer;
  transition: opacity 0.3s;
  pointer-events: auto; /* ADD THIS - ensures icon is clickable */
  z-index: 10; /* ADD THIS - puts it above envelope */
}

.email-icon:hover {
  opacity: 0.6;
}
    .social-icons {
      display: flex;
      justify-content: center;
      gap: 2.5rem;
      margin-top: 1rem;
    }

    .social-icon {
      width: 4rem;
      height: 4rem;
      cursor: pointer;
      transition: opacity 0.3s;
    }

    .social-icon:hover {
      opacity: 0.7;
    }

.footer-info {
  margin-top: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.footer-text {
  font-size: 11px;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  color: #f5e6e8;
}

.footer-link {
  color: #f5e6e8;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.footer-link:hover {
  opacity: 0.6;
}

/* --- Footer --- */
.footer {
  text-align: left;
  font-size: 0.5rem;
  color: #b5acac;
  padding: 1rem 1.5rem;
  bottom: 0;
  position: fixed;
  line-height: .1px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
.sidebar {
    width: 40%; /* wider for visibility */
    font-size: 0.8rem;
    position: fixed;

  }

  .sidebar-content {
margin-top: -9px;
line-height: 50px;
}

  .main-container {
        margin-left: 40%;
      }

      .hero-section {
        flex-direction: column;
      }

      .hero-text {
        font-size: 2rem;

      }

.hero-subtitle {
padding-top: 0.1px;
max-width: 260px;
    }

      .hero-right {
        width: 100%;
        margin-top: 2rem;
      }

      .pink-container {
        padding: 2rem 1.5rem;
      }

      .list-title {
        font-size: 1rem;
      }

      .list-content {
        font-size: 0.6rem;

      }
  .list-section {
width: 100%}


 
  .sidebar p, 
  .sidebar img,
  .menu-slider, .sidebar h3 {
    display: none;
  }


 

  main h1 {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  main p {
    font-size: 0.85rem;
  }

  .hero-banner {
    height: 100vh;
  }


  .footer {
    bottom: 0;
    padding-left: 1.25rem;
  }

  .menu-slider {
    height: 4rem;
  }
 .menu-slider { max-height: 0 !important;}

.nav-list .name {
margin-left: .1px;
}

  .banner-track {
 height: 100vh }

  .hero-title {
 z-index: 50;
margin-top: -581px;
padding-right: 3px;
}

.banner-track img {
  height: 100%; /* Let the image keep its natural height */
  max-height: 98vh; /* Constrain to container if needed */
  width: auto;
  margin-right: 2rem;
}

.hero-title img {
width: 49vw;
position: fixed;
right: 5.5%;
top: 60%;
content: url('7.png');

}

 .social-icon {
      width: 2.5rem;
      height: 2.5rem;
      padding-bottom: 61px;
    }

  .email-icon {
width: 2.5rem;}

  .social-icons {
       gap: 1rem;}

.footer-info {
  margin-top: -50px;
  margin-bottom: 30px;
  gap: 15px;
}

.footer-text {
  font-size: 7px;
} 

}

@media (max-width: 1024px) {
  .hero-section {
    flex-direction: column;
margin: 0;



  }

  .hero-right {
    width: 100%;
    padding-right: 0;
    margin-top: -3rem;
   z-index: -10;
  }

.hero-image-container {
    position: relative;      /* undo desktop absolute */
    width: 100%;              /* fill <main> */
    max-width: 100%;          /* no artificial cap */
    min-width: 0;             /* remove desktop min */
    margin: 0 auto;           /* center */
  }

  .hero-image {
    width: 100%;
    height: auto;
    display: block;
  }

 .id-card {
      padding-top: .1px;
    }


.footer-info {

  margin-bottom: 50px;
  gap: 15px;
}



}