/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
  --pink: #ffb6d5;
  --coffee: #b79b84;
  --cream: #fff7eb;
  --white: #ffffff;
  --yellow: #fff4c2;
}

/* ------------------------------------------------------ */
/* ☕ BASE BODY + BACKGROUND (updated for café vibe) */
/* ------------------------------------------------------ */
body {
  background: url('/images/pastel-wallpaper.png') repeat fixed center, var(--cream);
  background-size: 250px;
  color: var(--coffee);
  font-family: "Comic Sans MS", "Verdana", sans-serif;
  text-align: center;
  margin: 0;
  cursor: url('/images/cursor-star.gif'), auto;
}

.container {
  max-width: 850px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid var(--pink);
  box-shadow: 0 0 20px rgba(255,182,193,0.6);
  border-radius: 20px;
  padding: 1rem;
  backdrop-filter: blur(3px);
}

/* ------------------------------------------------------ */
/* ✿ HEADER */
/* ------------------------------------------------------ */
header {
  background: linear-gradient(180deg, var(--pink), var(--yellow));
  border-radius: 15px;
  padding: 1rem;
  position: relative;
  text-shadow: 1px 1px 2px white;
}

header h1 {
  font-family: "Comic Neue", cursive;
  font-size: 2.2rem;
  color: #fff;
}

header .sparkle-left,
header .sparkle-right {
  width: 50px;
  position: absolute;
  top: 10px;
}

.sparkle-left { left: 10px; }
.sparkle-right { right: 10px; }

.ticker {
  font-size: 0.9rem;
  color: var(--coffee);
  background: rgba(255,255,255,0.6);
  border-radius: 10px;
  padding: 0.3rem;
  margin-top: 0.5rem;
}

/* ------------------------------------------------------ */
/* ☕ NAVIGATION BAR (chalkboard café menu style) */
/* ------------------------------------------------------ */
nav {
  background: url('/images/chalkboard-texture.jpg') center/cover;
  border: 3px solid #3e2f28;
  border-radius: 12px;
  padding: 0.8rem;
  width: 90%;
  margin: 1rem auto;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.4), 0 3px 6px rgba(0,0,0,0.2);
  font-family: "Courier New", monospace;
  color: #fffaf0;
}

nav a {
  color: #fff9d9;
  text-shadow: 1px 1px 3px #000;
  text-decoration: none;
  margin: 0 0.3rem;
  font-weight: bold;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

nav a:hover {
  color: #ffd6e0;
  text-shadow: 0 0 5px #ffd6e0, 0 0 10px #fff;
}

/* ------------------------------------------------------ */
/* 🪵 CAFE COUNTER DIVIDER */
/* ------------------------------------------------------ */
.counter-divider {
  width: 100%;
  height: 80px;
  background: url('/images/wood-texture.jpg') repeat center;
  background-size: cover;
  border-top: 3px solid #a37551;
  border-bottom: 3px solid #5c4033;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.3);
  margin: 0 auto 1.5rem auto;
  border-radius: 8px;
  position: relative;
}

/* decorative trim */
.counter-divider::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(to bottom, #fff4d9, #e6b894);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* ------------------------------------------------------ */
/* 💕 INTRO BOX */
/* ------------------------------------------------------ */
.intro-box {
  background: rgba(255,255,255,0.8);
  border: 2px dashed var(--pink);
  border-radius: 15px;
  margin: 1rem auto;
  padding: 1rem;
}

/* ------------------------------------------------------ */
/* 📜 CONTENT PANELS */
/* ------------------------------------------------------ */
.content-panels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.panel {
  width: 250px;
  background: url('/images/paper-fiber.png') repeat;
  background-color: #fffaf7;
  border: 2px solid #c59b7b;
  border-radius: 15px;
  box-shadow: 0 5px 10px rgba(197,155,123,0.2);
  padding: 1rem;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.panel:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(197,155,123,0.4);
}

.panel h3 {
  margin-top: 0;
  color: var(--pink);
  text-shadow: 1px 1px var(--yellow);
}

.old-btn {
  display: inline-block;
  background: linear-gradient(90deg, var(--pink), var(--yellow));
  color: var(--coffee);
  border: 2px outset var(--white);
  border-radius: 10px;
  text-decoration: none;
  padding: 0.3rem 1rem;
  margin-top: 0.5rem;
  font-weight: bold;
  box-shadow: inset 0 0 3px rgba(255,255,255,0.8);
}

.old-btn:hover {
  background: linear-gradient(90deg, var(--yellow), var(--pink));
}

/* ------------------------------------------------------ */
/* ✿ FOOTER */
/* ------------------------------------------------------ */
footer {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--coffee);
}

.divider {
  width: 80%;
  max-width: 500px;
  opacity: 0.6;
}

.footer-gif {
  width: 40px;
  margin-top: 0.5rem;
}

/* ------------------------------------------------------ */
/* 🌫️ OPTIONAL STEAM RISING EFFECT (keep or remove) */
/* ------------------------------------------------------ */
header::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 100px;
  height: 200px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.3) 10%, transparent 70%);
  animation: rise 6s ease-in-out infinite;
  transform: translateX(-50%);
  pointer-events: none;
}

@keyframes rise {
  0% { transform: translate(-50%, 20px) scaleY(1); opacity: 0.8; }
  50% { transform: translate(-50%, -10px) scaleY(1.2); opacity: 0.4; }
  100% { transform: translate(-50%, -40px) scaleY(1); opacity: 0; }
}