/* Coominya Pub Website Stylesheet
   This stylesheet defines the visual presentation for the Coominya Pub landing
   page.  The design evokes a warm, rustic Australian pub while remaining
   modern, clean and mobile‑friendly.  Colours and typography were chosen to
   complement the country aesthetic and provide good contrast for readability.
*/

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--background-color);
}

:root {
  --primary-color: #8b4513; /* dark brown reminiscent of timber */
  --secondary-color: #c97c4e; /* warm terra cotta accent */
  --background-color: #f9f5f1; /* soft off‑white background */
  --text-color: #332319; /* deep brown text */
  --heading-color: #402812; /* slightly darker for headings */
  --button-color: #c97c4e;
  --button-hover-color: #b16a3d;
  --border-radius: 4px;
  --transition-speed: 0.2s;
}

h1, h2, h3 {
  color: var(--heading-color);
  font-weight: 700;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

p {
  margin-bottom: 1em;
}

header {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-bottom: 1px solid #e5d5c7;
}

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

header .logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  text-decoration: none;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}

nav a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding: 0.25rem 0;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: var(--secondary-color);
  transition: width var(--transition-speed) ease;
}

nav a:hover::after {
  width: 100%;
}

.button {
  display: inline-block;
  background-color: var(--button-color);
  color: #fff;
  padding: 0.65rem 1.25rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  font-weight: 600;
  transition: transform var(--transition-speed) ease,
    background-color var(--transition-speed) ease;
}

.button:hover {
  background-color: var(--button-hover-color);
  transform: scale(1.05);
}

/* Hero section */
/* Hero section has been redesigned without a full‑screen background photo.
   It now displays the tagline and call‑to‑actions alongside a collage of
   appetising food and drink images. The section is flexible and stacks
   vertically on smaller screens. */
.hero {
  /* The hero is now a simple stacked section without a large image.
     We use a column layout so the headline and copy are centered
     on mobile and desktop. Padding at the top offsets the fixed
     header to prevent overlap. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
  background-color: var(--background-color);
  color: var(--heading-color);
  padding: 6rem 2rem 4rem;
  /* The hero no longer forces a minimum height; it grows with content */
}

.hero-content {
  flex: 1 1 300px;
  max-width: 600px;
}

.hero h1 {
  font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
  margin-bottom: 0.5rem;
  color: var(--heading-color);
}

.hero p {
  font-size: 1.2rem;
  max-width: 600px;
  margin-bottom: 1.5rem;
  color: var(--text-color);
}

.hero-images {
  flex: 1 1 300px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
  max-width: 500px;
}

.hero-images img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition-speed);
}

.hero-images img:hover {
  transform: scale(1.05);
}

/* Single hero image used on larger screens */
.hero-img {
  flex: 1 1 300px;
  max-width: 500px;
}

.hero-img img {
  width: 100%;
  height: 100%;
  max-height: 350px;
  object-fit: cover;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


.hero .cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* Sections general */
section {
  padding: 4rem 1.5rem;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

/* About section */
.about-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .about-section {
    flex-direction: row;
  }
}

.about-section .about-text {
  flex: 1;
}

.about-section .about-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-section .about-image img {
  max-width: 100%;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Menu section */
.menu-category {
  margin-bottom: 1.5rem;
  border: 1px solid #e0d9d3;
  border-radius: var(--border-radius);
  background-color: #fff;
  overflow: hidden;
}

.menu-category summary {
  padding: 1rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  background-color: #f3e7de;
  position: relative;
}

.menu-category[open] summary {
  background-color: #e9d7cb;
}

.menu-category summary::marker {
  color: var(--secondary-color);
  font-size: 1.25rem;
}

.menu-category ul {
  list-style: none;
  padding: 1rem 1.5rem;
}

.menu-category li {
  /* Use a two‑column grid for each menu item. The first column grows to
     fill available space (1fr) while the second holds the price. This
     prevents long names from pushing the price off screen on small
     devices and keeps everything aligned. */
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  border-bottom: 1px dashed #e0d9d3;
}

.menu-category li:last-child {
  border-bottom: none;
}

.menu-category .item-name {
  font-weight: 500;
}

.menu-category .item-desc {
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.25rem;
  display: block;
}

.menu-category .item-price {
  font-weight: 600;
  white-space: nowrap;
  /* spacing handled by grid gap */
}

/* Wrapper for the left side of a menu item. Allows the name and description
   to stack but keeps the price aligned to the right. */
.menu-category .item-left {
  flex: 1;
  margin-right: 1rem;
}

/* Menu introduction paragraphs within a category. Provide context such as
   serving details and available sauces. */
.menu-category .menu-intro {
  padding: 0 1.5rem;
  font-size: 0.95rem;
  color: #555;
  margin-top: 0.5rem;
}

/* Smaller variation of menu intro for secondary lines (e.g. sauces). */
.menu-category .menu-intro.small {
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.25rem;
}

/* Subheading inside a menu category (e.g. "Toppers" or "Sides"). */
.menu-category .menu-subheading {
  padding: 0 1.5rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  /* Use the primary colour to distinguish these mini headings */
  color: var(--primary-color);
}

/* Drinks section */
.drinks-section {
  background-color: #f3e7de;
  border-top: 1px solid #e0d9d3;
  border-bottom: 1px solid #e0d9d3;
}

.drinks-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .drinks-grid {
    flex-direction: row;
  }
}

.drinks-grid .drinks-text {
  flex: 1;
}

.drinks-grid .drinks-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drinks-grid .drinks-image img {
  max-width: 100%;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Hours table */
.hours-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.hours-table th,
.hours-table td {
  padding: 0.75rem;
  border: 1px solid #e0d9d3;
  text-align: left;
}

.hours-table th {
  background-color: #f3e7de;
  color: var(--heading-color);
}

/* When using the simplified hours info layout, ensure headings and paragraphs
   are spaced consistently. The .hours-info container appears in the
   #hours section when there is no table. */
.hours-info h3 {
  margin-top: 1rem;
  margin-bottom: 0.25rem;
  color: var(--heading-color);
}

.hours-info p {
  margin-bottom: 0.5rem;
}

/* Events cards */
.events-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.event-card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-speed) ease;
}

.event-card:hover {
  transform: translateY(-4px);
}

/* Gallery */
.gallery-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.gallery-grid img {
  width: 100%;
  display: block;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-speed) ease;
}

.gallery-grid img:hover {
  transform: scale(1.03);
}

/* Reviews */
.reviews-section {
  background-color: #f3e7de;
  border-top: 1px solid #e0d9d3;
  border-bottom: 1px solid #e0d9d3;
}

/* Review slides for carousel */
.review-slide {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  display: none;
}

.review-slide.active {
  display: block;
}

.review-stars {
  color: #ffb400;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.review-text {
  font-style: italic;
  margin-bottom: 0.5rem;
}

/* Review carousel container and navigation */
.review-carousel {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.review-nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 0.75rem;
}

.review-nav button {
  background: none;
  border: none;
  color: var(--primary-color);
  font-size: 2rem;
  cursor: pointer;
  transition: transform var(--transition-speed);
}

.review-nav button:hover {
  transform: scale(1.2);
}

/* Contact */
.contact-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .contact-section {
    flex-direction: row;
  }
}

.contact-details {
  flex: 1;
}

.contact-actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-actions a {
  width: fit-content;
}

/* Map container image styling
   Replaced the Google Maps iframe with an illustrated map image. The styling
   ensures the image fills the container with appropriate height, rounded
   corners and a subtle shadow. */
.map-container img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border: none;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Footer */
footer {
  background-color: #3a2314;
  color: #f9f5f1;
  padding: 2rem 1.5rem;
}

/* Footer text overrides.  The global heading colour is dark, which
   conflicted with the dark footer background.  Override the
   colours for headings and body text inside the footer to ensure
   sufficient contrast. */
footer h3,
footer p,
footer li,
footer a {
  /* Lighter text colour for dark footer */
  color: #f1d9c2;
}

footer .footer-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

footer a {
  color: #f1d9c2;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

footer .copyright {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: #e8d8c8;
}

/* Utility classes */
.text-center {
  text-align: center;
}

.mb-1 {
  margin-bottom: 0.5rem;
}
.mb-2 {
  margin-bottom: 1rem;
}
.mb-3 {
  margin-bottom: 1.5rem;
}
.mb-4 {
  margin-bottom: 2rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  header .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  nav ul {
    flex-wrap: wrap;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
}