/* Ensure smooth scrolling when clicking on anchor links */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 18px; /* Adjust this value based on your header's height */
}

/* General Body Styling */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #f0f0f0;
  color: #333;
}

/* Site Container for Fixed Width */
.site-container {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Ensure main content takes up available space */
main {
  flex-grow: 1;
}

/* Header and Navigation Bar */
header {
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Navbar container */
.navbar {
  display: flex;
  justify-content: space-between; /* Pushes items (logo, nav-links-wrapper, social-links) to edges */
  align-items: center; /* Vertically centers all children */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 70px; /* Give the navbar a minimum height to contain elements */
  /* position: relative; Removed, as its not needed here */
}

/* Logo container */
.logo {
  /* No margin-right: auto needed here anymore, justify-content: space-between handles it */
  /* Ensure no stray absolute positioning from previous attempts */
  position: static;
  left: auto;
  top: auto;
  transform: none;
}

/* Wrapper for main navigation links to help centering */
.nav-links-wrapper {
  /* NEW CLASS */
  flex-grow: 1; /* Allows this wrapper to take up all available space between logo and social */
  display: flex; /* Make this wrapper a flex container */
  justify-content: center; /* CENTER the .nav-links inside this wrapper */
  align-items: center; /* Vertically center links inside this wrapper */
}

.social-links {
  /* No margin-left: auto needed here anymore, justify-content: space-between handles it */
  /* Ensure no stray absolute positioning from previous attempts */
  position: static;
  right: auto;
  top: auto;
  transform: none;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-links li {
  margin-left: 15px; /* Spacing between social icons */
}

.social-links a {
  text-decoration: none;
  color: #555;
  padding: 5px 0;
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: #a00;
}

/* Main navigation links */
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-links li {
  margin: 0 18px; /* Adjust spacing between main navigation items */
}

.nav-links a {
  text-decoration: none;
  color: #555;
  font-weight: 800;
  padding: 5px 0;
  transition: color 0.3s ease;
  font-size: 1.4em;
}

.nav-links a:hover {
  color: #a00;
}

/* Specific styling for the logo image within its link */
.header-logo {
  height: 88px;
  width: auto;
  vertical-align: middle;
  max-width: 100%;
}

/* Specific styling for the logo link container */
.logo a {
  font-size: 0; /* Keep this to hide any accidental text */
  display: flex;
  align-items: center;
  height: 100%;
}

/* Styling for social media icons specifically */
.social-links a .fab {
  font-size: 2rem;
  /* margin-right: 5px; - Only useful if you had text next to the icon */
}

/* Hero Section Styling */
.hero {
  background-image: url("image/hero-background.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 88vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow: hidden;
}

/* Optional: Add an overlay for better text readability on images */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-content {
  text-align: center;
  z-index: 2;
  max-width: 800px;
  padding: 0 20px;
}

.hero h1 {
  font-size: 3.5em;
  margin-bottom: 15px;
}

.hero p {
  font-size: 1.5em;
  line-height: 1.6;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .hero {
    height: 65vh;
  }

  .hero h1 {
    font-size: 2.5em;
  }

  .hero p {
    font-size: 1.2em;
  }
}

@media (max-width: 480px) {
  .hero {
    height: 50vh;
  }
  .hero h1 {
    font-size: 2em;
  }
  .hero p {
    font-size: 1em;
  }
}

/* Also adjust section padding so content isn't flush with edges */
/* Also adjust section padding so content isn't flush with edges */
.section {
  padding: 60px 20px;
  text-align: center; /* Default the section to center for the main heading */
}

/* Style for main headings within sections */
.section-heading {
  text-align: center; /* Explicitly center this specific heading */
  margin-bottom: 30px; /* Add some space below the heading */
  font-size: 2.5em; /* Adjust size if needed */
  color: #a00; /* Match logo color for importance */
}

/* Align paragraphs and subheadings within sections to the left */
.section p,
.section h3 {
  text-align: left; /* Align all paragraphs and h3s to the left for readability */
  max-width: 800px; /* Optional: Constrain width of paragraphs for better readability */
  margin-left: auto; /* Center the constrained paragraphs */
  margin-right: auto;
  margin-bottom: 20px; /* Space between paragraphs/subheadings */
  line-height: 1.6; /* Improve line spacing for readability */
}

/* Keep previous styling for alternate backgrounds */
.section:nth-of-type(even) {
  background-color: #f0f0f0;
}

/* --- Menu Section Styling --- */

/* Description below main heading */
.section-description {
  text-align: center;
  font-size: 1.1em;
  margin-top: -10px;
  margin-bottom: 50px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: #666;
}

/* Category containers */
.menu-category {
  margin-bottom: 48px; /* Space between categories */
  text-align: center; /* Center the category heading */
}

.menu-category h3 {
  font-size: 2em; /* Size for category headings */
  color: #a00; /* Match accent color */
  margin-bottom: 30px;
}

/* Container for the list of menu items */
.menu-list {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  gap: 10px; /* Space between each menu item */
  max-width: 800px; /* Constrain the width of the list for readability */
  margin: 0 auto; /* Center the list within the section */
  padding: 0 15px; /* Add some horizontal padding for smaller screens */
}

/* Individual menu item (the link wrapper) */
.menu-item {
  display: flex; /* Arrange image and details side-by-side */
  align-items: center; /* Vertically align items in the middle */
  text-decoration: none; /* Remove underline from link */
  color: #333;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* Lighter shadow for list items */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  background-color: #fff; /* White background for the item */
  padding: 15px; /* Internal padding for the item */
}

.menu-item:hover {
  transform: translateY(-3px); /* Subtle lift effect on hover */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

/* Menu item image */
.menu-item-image {
  width: 100px; /* Fixed width for the image */
  height: 100px; /* Fixed height for the image (makes it square) */
  object-fit: cover; /* Ensures image covers the area without distortion */
  border-radius: 4px; /* Slightly rounded corners for the image */
  margin-right: 20px; /* Space between image and text details */
  flex-shrink: 0; /* Prevent image from shrinking on smaller screens */
}

/* Individual menu item (the link wrapper) */
.menu-item {
  display: flex; /* Arrange image, name, and price side-by-side */
  align-items: center; /* Vertically align items in the middle */
  text-decoration: none; /* Remove underline from link */
  color: #333;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* Lighter shadow for list items */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  background-color: #fff; /* White background for the item */
  padding: 15px; /* Internal padding for the item */
}

.menu-item:hover {
  transform: translateY(-3px); /* Subtle lift effect on hover */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

/* Menu item image */
.menu-item-image {
  width: 100px; /* Fixed width for the image */
  height: 100px; /* Fixed height for the image (makes it square) */
  object-fit: cover; /* Ensures image covers the area without distortion */
  border-radius: 4px; /* Slightly rounded corners for the image */
  margin-right: 20px; /* Space between image and text details */
  flex-shrink: 0; /* Prevent image from shrinking on smaller screens */
}

/* Menu item name */
.menu-item-name {
  font-size: 1.3em; /* Larger font for item name */
  margin: 0; /* Remove default margins */
  color: #333;
  line-height: 1.3;
  flex-grow: 1; /* Allows name to take up available space before price */
  flex-shrink: 1; /* Allows name to shrink if needed */
  /* text-align: left; No need, flex default */
}

/* Menu item price */
.menu-item-price {
  font-size: 1.1em;
  font-weight: bold;
  color: #a00;
  margin-left: auto; /* Pushes the price to the far right */
  margin-top: 0; /* Ensure no default paragraph top margin */
  margin-bottom: 0; /* Ensure no default paragraph bottom margin */
  flex-shrink: 0; /* Prevent price from shrinking */
  text-align: right; /* Aligns the text itself to the right within its space */
}

/* Responsive adjustments for menu items (adjusting existing rules) */
@media (max-width: 480px) {
  .menu-list {
    gap: 15px;
  }
  .menu-item {
    padding: 10px;
  }
  .menu-item-image {
    width: 80px;
    height: 80px;
    margin-right: 15px;
  }
  .menu-item-name {
    font-size: 1.1em;
    margin-right: 10px; /* Add a small margin to separate name and price on smaller screens */
  }
  .menu-item-price {
    font-size: 1em;
  }
}

/* --- Location Section Styling --- */

.map-container {
  max-width: 900px; /* Adjust max-width to match your content width or desired map size */
  max-height: 300px;
  margin: 20px auto 0 auto; /* Center the map and add space above */
  border-radius: 8px; /* Slightly rounded corners for the map iframe */
  overflow: hidden; /* Ensures border-radius applies to iframe content */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow around the map */
}

.map-container iframe {
  display: block; /* Remove any extra space below the iframe */
}

/* Ensure sections align text correctly now that map is centered */
/* This is a general adjustment, ensuring that elements like section-description and the map container are correctly spaced. */
.section {
  padding: 60px 20px;
  text-align: center; /* Default the section to center for the main heading */
}

.section-description {
  text-align: center; /* Center the description text below the main menu heading */
  font-size: 1.1em;
  margin-top: -10px;
  margin-bottom: 50px; /* Increased margin to separate from map */
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: #666;
}

/* --- Contact Section Styling --- */

#contact {
  text-align: center;
}

.social-contact-links {
  margin-top: 30px;
  margin-bottom: 20px;
  text-align: center; /* Center the social icons */
}

.social-contact-links a {
  display: inline-block; /* Allows setting margin and padding */
  margin: 0 38px; /* Space between icons */
  font-size: 3em; /* Larger icon size */
  color: #a00; /* Default icon color (e.g., your accent color) */
  transition: color 0.3s ease, transform 0.2s ease;
  text-decoration: none; /* Remove underline for links */
}

.social-contact-links a:hover {
  color: #c00; /* Darker red on hover */
  transform: scale(1.1); /* Slightly enlarge on hover */
}

/* Style for the additional note below icons */

.contact-note p {
  text-align: center;
  font-size: 0.95em;
  color: #666;
  margin-top: 10px;
}

/* Footer Styling */
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px 0;
  margin-top: 50px;
}

.footer-content p {
  margin: 0;
  font-size: 14px;
}