/* Light theme background matching the main website palette */
body {
  background-color: #fdfaf4; /* Matches body background in pizzeria.css */
  margin: 0;
  padding: 0;
  font-family: 'Poppins', 'Segoe UI', Roboto, Arial, sans-serif; /* Matches pizzeria.css font stack */
  color: #1e293b; /* Warm dark slate text */
}

/* Page Wrapper */
.menuContainer {
  max-width: 1200px; /* Matches layout constraint max-width */
  width: 95%;
  margin: 40px auto;
}

/* 2-Column Grid for Left/Right layout */
.menuColumns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* Flex layout for stacking sections inside columns */
.column {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Styled bordered boxes for each category */
.menuSection {
  border: 2px solid #FBBF24; /* Primary warm yellow accent */
  padding: 25px;
  background-color: #ffffff; /* Clean white card backgrounds */
  border-radius: 8px; /* Smooth rounded corners */
  position: relative;
  margin-top: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Soft professional shadow style */
}

/* Category Headings mimicking the angled orange labels */
.categoryHeader {
  display: inline-block;
  background-color: #FBBF24; /* Bright header accent yellow */
  color: #1e293b; /* Dark text alignment */
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0;
  padding: 8px 30px;
  position: absolute;
  top: -20px;
  left: 20px;
  letter-spacing: 1px;
  clip-path: polygon(0 0, 92% 0, 100% 100%, 0% 100%); /* Slightly angled edge */
}

/* Single column list flow for items within a category box */
.menuList {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px; /* Leave space for the absolute positioned header */
}

/* Individual pizza row styling */
.item {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

/* Flex row containing Name ..... Price */
.itemHeaderRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

/* Pizza Name */
.itemName {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b; /* Dark slate text */
  white-space: nowrap; /* Keep name on a single line */
  padding-right: 5px;
}

/* Dotted connection line */
.dots {
  flex-grow: 1;
  border-bottom: 2px dotted #cbd5e1; /* Clean grey dot pattern replacing old dark border */
  height: 1px;
  margin: 0 5px 4px 5px; /* Aligns dots vertically with the base of the text */
}

/* Pizza Price */
.itemPrice {
  font-size: 1.1rem;
  font-weight: 700;
  color: #d97706; /* Secondary deep orange highlight for pricing */
  white-space: nowrap;
  padding-left: 5px;
}

/* Ingredients styling positioned underneath */
.ingredients {
  font-size: 0.9rem;
  color: #64748b; /* Desaturated text for secondary ingredient layout description */
  margin: 4px 0 0 0;
  line-height: 1.4;
}

/* Responsive view: Collapse to 1 column on tablets and mobile devices */
/* @media (max-width: 900px) {
  .menuColumns {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  
  .menuSection {
    margin-top: 25px;
  }
} */

/* Update this row to handle text wrapping alignment cleanly */
.itemHeaderRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: 8px; /* Adds a reliable minimum gap between text, dots, and price */
}

/* Modify this to allow the name to wrap on smaller screens */
.itemName {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b; 
  white-space: normal; /* Changed from nowrap to allow wrapping */
  padding-right: 5px;
}
/* 2-Column Grid for Left/Right layout */
.menuColumns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* Match the classes used in your HTML */
.leftcolumn, .rightcolumn {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

#cat-classiche {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 30px; /* 15px vertical spacing, 30px horizontal spacing */
}


/* Responsive view: Keep 2 columns on tablets, just reduce whitespace */
@media (max-width: 900px) {
  .menuColumns {
    grid-template-columns: 1fr 1fr; /* Force 2 columns to stay */
    gap: 20px; /* Tighten space so it fits nicely */
  }
}

/* Optional: Only drop to 1 column on actual mobile phones */