body {
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
}

.menu {
  max-width: 1200px;
  margin: 0 auto;
}

table {
  font-size: 16px; /* Set a consistent font size */
  background: #f9f9f9;
}

td {
  border:1px solid black;
  padding-left: 1rem;
  padding-right: 1rem;
    
  font-size: inherit; /* Inherit from table */
  line-height: 1.4; /* Optional: controls spacing between lines */
  word-wrap: break-word; /* Ensures long words wrap */
  vertical-align: middle; /* Keeps text aligned at the top */
}

.overlay {
background-color: rgba(54,121,27,0.7);
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;   /* <-- cover full height */
  padding: 0 2px;
  text-align: left;
  visibility: hidden;
}

.card:hover .overlay{
    visibility: visible;
}

td p{
    margin-bottom: 0px;
    margin-top: 0px;
}

/* Link buttons */
.button-link{
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;    /* Centers vertically */
  opacity: 80%;
}
.button-link img{
  width: 95%;
  height: auto;
}
.button-link:hover{
    opacity: 100%;
}

/* Filter buttons */
.menu input[type="radio"] {
  display: none;
}

.menu label.filter {
  display: inline-block;
  margin: 5px 10px 20px 0;
  padding: 10px 15px;
  background: #ddd;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  opacity: 80%;
}

.menu label.filter:hover{
    opacity: 100%;
}

.menu input[type="radio"]:checked + label.filter {
  background: #4f860e;
  color: white;
}

/* Grid layout */
.menu .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

/* Card styles */
.menu .card {
  background: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  text-align: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 0;
  transform: scale(0.95);
  display: none;
}

.menu .card img {
  width: 100%;
  height: 245px;
  object-fit: cover;
}

.menu .card p {
  margin: 10px;
  font-weight: bold;
}

/* Show cards based on selected filter */
.menu #all:checked ~ .grid .card,
.menu #specials:checked ~ .grid .card.specials,
.menu #milk-teas:checked ~ .grid .card.milk-teas,
.menu #matcha:checked ~ .grid .card.matcha,
.menu #coffee:checked ~ .grid .card.coffee,
.menu #blended:checked ~ .grid .card.blended,
.menu #fruit-teas:checked ~ .grid .card.fruit-teas,
.menu #sparkling-ades:checked ~ .grid .card.sparkling-ades,
.menu #tea-lattes:checked ~ .grid .card.tea-lattes,
.menu #snacks:checked ~ .grid .card.snacks,
.menu #ramen:checked ~ .grid .card.ramen{
  display: block;
  opacity: 1;
  transform: scale(1);
}

/* Secret Menu */
.secret-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.image-container {
  position: relative;
  display: inline-block;
}

.image-container a {
  display: block;
  position: relative;
  pointer-events: none; /* disable link by default */
}

.image-container img.default {
  display: block;
  width: 100px;
  height: auto;
  transition: opacity 0.3s ease;
}

.image-container img.hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hover-text {
  position: absolute;
  top: 10px;
  left: -280px;
  font-size: 18px;
  font-style: italic;
  width: 280px;
  color: white;
  background: rgba(79, 134, 14, .8);
  padding: 5px 10px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Hover effects */
.image-container:hover img.default {
  opacity: 0;
}

.image-container:hover img.hover {
  opacity: 1;
}

.image-container:hover .hover-text {
  opacity: 1;
}

.image-container:hover a {
  pointer-events: auto; /* enable link only on hover */
}

/* 30/70 split columns */
.container {
  display: flex;
  justify-content: center; /* centers along the main axis */
}

.col-70 {
  width: 60%;
  background: #F0F0F0;
  padding-left: 1rem;
  padding-right: 1rem;
  border:1px solid black;
}

.wrapper {
  position: relative; /* establishes stacking context */
}

.bg-img {
  position: absolute;
  top: -100px;
  left: 75px;
  z-index: 1; /* behind the content */
  width: 200px;
}

.bg-img2 {
  position: absolute;
  top: 350px;
  left:-15px;
  z-index: 1; /* behind the content */
  width: 200px;
}

.bg-img3 {
  position: absolute;
  top: 250px;
  left: 470px;
  z-index: 1; /* behind the content */
  width: 200px;
}

.bg-img4 {
  position: absolute;
  top: 600px;
  left: 500px;
  z-index: 1; /* behind the content */
  width: 200px;
}

.bg-img5 {
  position: absolute;
  top: 100px;
  left: -75px;
  z-index: 1; /* behind the content */
  width: 200px;
}

.bg-img6 {
  position: absolute;
  top: 410px;
  left: 520px;
  z-index: 1; /* behind the content */
  width: 200px;
}

.bg-img7 {
  position: absolute;
  top: -20px;
  left: 475px;
  z-index: 1; /* behind the content */
  width: 200px;
}

.bg-img8 {
  position: absolute;
  top: 780px;
  left: 550px;
  z-index: 1; /* behind the content */
  width: 200px;
}

.bg-img9 {
  position: absolute;
  top: 580px;
  left: -75px;
  z-index: 1; /* behind the content */
  width: 200px;
}

.bg-img10 {
  position: absolute;
  top: 870px;
  left: -25px;
  z-index: 1; /* behind the content */
  width: 200px;
}

.bg-img11 {
  position: absolute;
  top: 755px;
  left: -20px;
  z-index: 1; /* behind the content */
  width: 200px;
}

.content {
  position: relative;
  z-index: 2; /* above the images */
  padding: 2rem;
}

/* Mobile styles */
@media (max-width: 700px){
    .bg-img {
      position: absolute;
      top: 50px;
      left: -25px;
      z-index: 1; /* behind the content */
      width: 200px;
    }

    .bg-img2 {
      position: absolute;
      top: 350px;
      left:-15px;
      z-index: 1; /* behind the content */
      width: 200px;
    }

    .bg-img3 {
      position: absolute;
      top: 250px;
      left: 350px;
      z-index: 1; /* behind the content */
      width: 200px;
    }

    .bg-img4 {
      position: absolute;
      top: 600px;
      left: 375px;
      z-index: 1; /* behind the content */
      width: 200px;
    }

    .bg-img5 {
      position: absolute;
      top: 700px;
      left: -55px;
      z-index: 1; /* behind the content */
      width: 200px;
    }

    .bg-img6 {
      position: absolute;
      top: 410px;
      left: 400px;
      z-index: 1; /* behind the content */
      width: 200px;
    }

    .bg-img7 {
      position: absolute;
      top: -20px;
      left: 375px;
      z-index: 1; /* behind the content */
      width: 200px;
    }

    .bg-img8 {
      position: absolute;
      top: 880px;
      left: 370px;
      z-index: 1; /* behind the content */
      width: 200px;
    }

    .bg-img9 {
      position: absolute;
      top: 530px;
      left: -25px;
      z-index: 1; /* behind the content */
      width: 200px;
    }

    .bg-img10 {
      position: absolute;
      top: 870px;
      left: -25px;
      z-index: 1; /* behind the content */
      width: 200px;
    }

    .bg-img11 {
      position: absolute;
      top: 845px;
      left: -20px;
      z-index: 1; /* behind the content */
      width: 200px;
    }
}