/*
 * Global styles
 *
 * The CSS variables defined in :root provide a consistent colour palette
 * throughout the site. Adjust these values to fine‑tune the theme without
 * hunting through the file. Box sizing is set globally to simplify
 * layout calculations.
 */

:root {
  --primary-color: #b80d21; /* deep red reminiscent of Japanese lacquer */
  --primary-hover: #990a17; /* slightly darker red for hover effects */
  --secondary-color: #0a0a0a; /* almost black for headers and footers */
  --light-bg: #f5f5f5; /* light neutral background for alternating sections */
  --text-color: #333; /* default text colour for maximum contrast */
}

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

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  /*
   * Apply the Osaka Castle image as the page background. The fixed
   * attachment creates a parallax effect where the image stays in
   * place while the content scrolls over it. The centre positioning
   * and cover sizing ensure the image fills the viewport on most
   * screens.
   */
  background-image: url('castle-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

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

a:hover {
  text-decoration: underline;
}

/*
 * Container class
 *
 * Restricts the width of the content to improve readability on large
 * displays while providing responsive gutter on smaller screens. The
 * header and footer reuse this container for consistent alignment.
 */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/*
 * Header
 *
 * Uses flexbox to align the logo and navigation horizontally. On
 * small screens the container switches to column layout (see
 * responsive section). The dark background makes the header stand
 * out from the rest of the page.
 */
header {
  background-color: var(--secondary-color);
  color: #ffffff;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.logo h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: bold;
}

.logo .subtitle {
  font-size: 0.75rem;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  color: #cccccc;
}

nav .nav-list {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

nav .nav-list li a {
  color: #ffffff;
  font-weight: bold;
  transition: color 0.3s ease;
}

nav .nav-list li a:hover {
  color: var(--primary-color);
}

/*
 * Hero section
 *
 * Sets the abstract swirl image as a full‑width background. An overlay
 * darkens the image and centralises the welcome message. Larger font
 * sizes emphasise the restaurant name and slogan.
 */
/*
 * Hero section
 *
 * Keeps a minimum height to introduce the site with a welcome
 * message. The hero no longer defines its own background image; it
 * inherits the page’s castle background. The relative positioning
 * allows the overlay to sit on top of the section.
 */
.hero {
  height: 70vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
}

.hero-overlay h2 {
  font-size: 2.5rem;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.hero-overlay p {
  font-size: 1.25rem;
  color: #e0e0e0;
}

/*
 * Sections
 *
 * Provide ample vertical spacing between sections. Alternating light
 * backgrounds differentiate content blocks. Headings are larger and bold
 * to create hierarchy. Paragraphs are constrained in width for easy
 * reading.
 */
/*
 * Sections now sit on top of the page’s background. Padding creates
 * breathing room around each content block while leaving the
 * underlying castle image visible at the edges.
 */
.section {
  padding: 4rem 0;
  background-color: transparent;
}

/* The alternate section style is no longer used but kept here for
   future reference. */
.alt-section {
  background-color: transparent;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--secondary-color);
}

.section p {
  max-width: 700px;
  margin: 0.5rem auto;
  line-height: 1.7;
  font-size: 1rem;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem auto;
  max-width: 700px;
}

.info-list li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

/*
 * Buttons
 *
 * Styled as calls to action with padding and rounded corners. The hover
 * state darkens the background colour slightly.
 */
.button {
  display: inline-block;
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  margin-top: 1rem;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: var(--primary-hover);
}

/*
 * Footer
 *
 * Mirrors the header by using the same dark background. Text is centered
 * and kept small to avoid drawing too much attention.
 */
footer {
  background-color: var(--secondary-color);
  color: #ffffff;
  text-align: center;
  padding: 1rem 0;
}

/*
 * Footer container
 *
 * Aligns the copyright notice and social icons horizontally on wider
 * screens. The social icons stack beneath the copyright on narrow
 * screens via the responsive rule below.
 */
.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/*
 * Social icons
 *
 * The svg inherits its fill from the CSS to allow colour changes on
 * hover. Adjust the width and height to control the icon size.
 */
.social a svg {
  width: 24px;
  height: 24px;
  fill: #ffffff;
  transition: fill 0.3s ease;
}

.social a:hover svg {
  fill: var(--primary-color);
}

.social {
  display: flex;
  align-items: center;
}

/*
 * Content box
 *
 * Wraps section content in a lightly coloured card that contrasts with
 * the dark background image. The semi‑transparent background allows
 * some of the underlying photo to peek through, while the border
 * radius and shadow give the card a subtle floating effect.
 */
.content-box {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/*
 * Responsive adjustments
 *
 * When the viewport width is 768px or less the navigation switches to
 * a vertical stack, and the hero text scales down slightly to fit
 * smaller screens. The header container also stacks its children.
 */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  nav .nav-list {
    flex-direction: column;
    gap: 0.5rem;
  }
  .hero {
    height: 50vh;
  }
  .hero-overlay h2 {
    font-size: 2rem;
  }
  .hero-overlay p {
    font-size: 1rem;
  }
}