/* General body styling */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #181818;
  color: #eee;
  display: flex;
  flex-direction: column;
  align-items: center; /* center the menu horizontally */
}


/* Header bar */
header {
  width: 100%;
  text-align: center;
  padding: 0.5rem 0;      
  font-size: 1.5rem;      
  font-weight: bold;
  background: #2c2c2c;
  color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}


/* Main container */
main#menu {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1200px; /* menu centered and not too wide */
  width: 100%;
  padding: 2rem;
}

/* Each drink section */
.drink {
  display: flex;
  background: #252525;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  border-radius: 8px;
}

/* Image box */
.imagebox {
  flex: 1; /* 1 part out of 4 */
  max-width: 25%;
  height: 450px;
  overflow: hidden;
  border-right: 1px solid #444;
}

.imagebox img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crops if needed */
  aspect-ratio: 5 / 9;
  display: block;
}

/* Info box */
.infobox {
  flex: 3; /* 3 parts out of 4 */
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;       /* stand out on dark background */
}

.infobox h2 {
  margin: 0 0 1rem 0;
  font-size: 1.8rem;
  color: #fff;
}

.infobox p {
  margin: 0;
  font-size: 1.1rem;
  color: #fff;
}
.infobox .description {
  margin-top: 0.5rem;
  font-style: italic;
  color: #aaa;
  font-size: 1rem;
  white-space: pre-line; /* respects \n as line breaks */
}


/* Mobile tweaks */
@media (max-width: 768px) {
  .drink {
    flex-direction: column;
    height: auto;
  }

  .imagebox {
    max-width: 100%;
    height: auto;
  }

  .imagebox img {
    aspect-ratio: auto;
    height: auto;
  }

  .infobox {
    flex: none;
    padding: 1rem;
  }
}