:root {
  --red: #EC3237;
  --blue: #00AFF0;
  --white: #FFFFFF;
  --black: #000000;
  --grey: #6D6C6A;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  color: var(--black);
  background-color: var(--white);
  line-height: 1.6;
}

.hero {
  background: url('assets/hero.jpg') center/cover no-repeat;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}

/* Logo floats directly over the hero image */
.hero .logo {
  width: 40vw;
  max-width: 400px;
  min-width: 200px;
  height: auto;
  z-index: 1;
}

/* Saga section: text and image side by side */
#saga {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#saga .saga-content {
  flex: 1;
}
#saga .saga-image {
  max-width: 40%;
  width: 200px;
  height: auto;
  margin-left: 1.5rem;
}
@media (max-width: 768px) {
  #saga {
    flex-direction: column;
    text-align: center;
  }
  #saga .saga-image {
    margin: 1.5rem auto 0;
    max-width: 60%;
  }
}

/* Logo size handled above */


section {
  max-width: 800px;
  margin: 3rem auto;
  padding: 2rem 1rem;
}

#saga h2,
#feast h2 {
  font-family: 'Uncial Antiqua', serif;
  font-size: 2rem;
  margin-bottom: 1rem;
}

#saga h2 {
  color: var(--red);
}

#feast h2 {
  color: var(--blue);
}

#saga p {
  color: var(--grey);
}

.menu-list {
  list-style: none;
}

.menu-list li {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid var(--grey);
  margin-bottom: 1rem;
}

.menu-list .item {
  font-weight: bold;
}

.menu-list .price {
  color: var(--grey);
  font-style: italic;
  font-weight: bold;
}
/* Menu container for pop-out effect */
.menu-container {
  background-color: #f1f1f1;
  border: 4px solid var(--black);
  padding: 2rem 1.5rem;
  border-radius: 0;
  margin: 2rem 0;
}

footer {
  background-color: var(--black);
  color: var(--white);
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 3rem;
}

footer a {
  color: var(--blue);
  text-decoration: none;
}

/* Spacer item between menu sections */
.menu-list li.spacer {
  border-bottom: none;
  margin-bottom: 2rem;
}