/* Design Tokens */
:root {
  --bg-cream: #FAF3E0;
  --accent-terra: #E07A5F;
  --accent-sage: #81B29A;
  --accent-gold: #F2CC8F;
  --text-dark: #3C3C3C;
  --text-muted: #6B6B6B;
}

/* Global Styles */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-cream);
  color: var(--text-dark);
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  margin: 0 0 0.5em;
}

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

a:hover {
  opacity: 0.8;
}

/* Header */

/* Header container stacks vertically */
header {
  background: inherit;        /* match body background */
  padding: 1rem 2rem;
  border-bottom: 2px solid #eee;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  display: flex;
  flex-direction: column;     /* stack logo, nav, contact line */
  align-items: flex-start;    /* align to left edge */
}

body {
  padding-top: 140px;         /* adjust for taller header */
}

.header-top {
  margin-bottom: 0.5rem;
}

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

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

nav a:hover {
  color: #b8860b;
}

/* Contact line: button + phone side-by-side */
.header-contact {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: row;        /* force horizontal layout */
  gap: 1rem;
  flex-wrap: wrap;            /* allow wrapping on narrow screens */
}

.header-contact .btn-order {
  background: #b8860b;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.2s ease;
}

.header-contact .btn-order:hover {
  background: #daa520;
}

.header-contact .header-phone {
  font-weight: bold;
  color: #333;
  text-decoration: none;
  white-space: nowrap;        /* keep phone number on one line */
}

.header-contact .header-phone:hover {
  color: #b8860b;
}

/* Hero Section */
.hero {
  text-align: center;
  padding: 4rem 2rem;
}

.hero h1 {
  font-size: 3rem;
  color: var(--text-dark);
}

.hero p {
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.hero .buttons a {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  margin: 0 0.5rem;
  font-weight: bold;
}

.btn-terra {
  background: var(--accent-terra);
  color: #fff;
}

.btn-sage {
  background: var(--accent-sage);
  color: #fff;
}

.btn-gold {
  background: var(--accent-gold);
  color: var(--text-dark);
}

/* Hours & Location */
.hours-location {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  text-align: center;
  padding: 2rem;
}

.hours-location h2 {
  font-size: 2rem;
  color: var(--accent-terra);
}

.map-placeholder {
  background: #ddd;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: 8px;
}

/* Features */
.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
}

.features .card {
  flex: 0 1 220px;
  text-align: center;          /* centers text */
  background: #fafafa;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #eee;
  text-decoration: none;       /* removes underline from link */
  color: inherit;              /* keeps text color consistent */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.features .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.card {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Footer */
footer {
  background: inherit;   /* inherits body background */
  padding: 1rem;
  text-align: center;
  border-top: 2px solid #eee;
}

.footer-contact {
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;   /* vertically align */
  gap: 1rem;             /* space between button and phone */
  flex-wrap: wrap;       /* allow wrapping only if viewport is very narrow */
}

.footer-contact .btn-order {
  background: #b8860b;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.2s ease;
}

.footer-contact .btn-order:hover {
  background: #daa520;
}

.footer-contact .footer-phone {
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.footer-contact .footer-phone:hover {
  color: #b8860b;
}

footer .social {
  margin-top: 0.5rem;
}

footer .social a {
  margin: 0 0.5rem;
  text-decoration: none;
  color: #333;
}

footer .social a:hover {
  color: #b8860b;
}

/* Flex row for menu items */
.flex-row {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0;
  font-weight: bold;
}

.price {
  color: var(--accent-gold);
}

/* Description text */
.description {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Card headings */
.card h2 {
  font-size: 1.5rem;
  color: var(--accent-terra);
  margin-bottom: 1rem;
}

/* Quote styling */
.quote {
  text-align: center;
  margin: 2rem auto;
  max-width: 700px;
}

.quote blockquote {
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text-muted);
  border-left: 4px solid var(--accent-sage);
  padding-left: 1rem;
}

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

.gallery-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

.gallery-item figcaption {
  padding: 0.75rem;
  font-size: 0.95rem;
  color: #333;
}

/* Parallax Section */
.parallax {
  background-image: url('assets/images/artists_cafe_logo.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  text-align: center;
}

.parallax .overlay {
  background: rgba(0,0,0,0.4); /* dark overlay for readability */
  padding: 2rem;
  border-radius: 8px;
}

.parallax h2 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.parallax p {
  font-size: 1.2rem;
}

/* Parallax Hero */
.parallax {
  background-image: url('assets/images/artists_cafe_logo.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  text-align: center;
}

.parallax .overlay {
  background: rgba(0,0,0,0.4); /* dark overlay for readability */
  padding: 2rem;
  border-radius: 8px;
  color: #fff; /* force all overlay text to white */
}

.parallax .overlay h1,
.parallax .overlay h2,
.parallax .overlay p {
  color: #fff; /* ensure headings and paragraphs are white */
}



.parallax h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.parallax p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.parallax .buttons a {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  margin: 0 0.5rem;
  font-weight: bold;
}

/* Unified Parallax Overlay */
.parallax .overlay {
  background: rgba(0,0,0,0.4);   /* dark tint for readability */
  padding: 2rem;
  border-radius: 8px;
  color: #fff;                   /* force text to white */
  text-align: center;
}

.parallax .overlay h1,
.parallax .overlay h2,
.parallax .overlay h3,
.parallax .overlay p {
  color: #fff;                   /* unify headings and paragraphs */
  margin: 0.5rem 0;
}

/* Partner Products Section */
.products {
  padding: 2rem;
  text-align: center;
}

.products h2 {
  margin-bottom: 1.5rem;
}

.products-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
}

.product-card {
  flex: 0 1 220px;
  text-align: center;
  background: #fafafa;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #eee;
  text-decoration: none;       /* removes underline */
  color: inherit;              /* keeps text color consistent */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.partner-logo {
  max-width: 150px;
  height: auto;
  display: block;
  margin: 0 auto 0.75rem;
}

.product-card a {
  text-decoration: none;
  font-weight: bold;
  color: #333;
}

.product-card a:hover {
  color: #b8860b; /* gold accent */
}

/* Carousel Base */
.carousel {
  margin: 2rem auto;
  max-width: 1000px;
  padding: 1rem;
}

.carousel h2 {
  text-align: center;
  margin-bottom: 1rem;
}

.carousel-container {
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
}

.carousel-item {
  flex: 0 0 100%;   /* always show one item at a time */
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  background: transparent;
  box-shadow: none;
}

.carousel-item img {
  width: 90%;             /* cap width to 90% of container */
  height: 60vh;           /* limit height to 60% of viewport */
  object-fit: contain;    /* scale proportionally, no cropping */
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

.carousel-item figcaption {
  padding: 0.5rem;
  font-size: 0.9rem;
  color: #333;
}

/* Carousel Buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 2rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  border-radius: 4px;
  z-index: 10;
}

.carousel-btn.prev { left: 0.5rem; }
.carousel-btn.next { right: 0.5rem; }

.carousel-btn:hover {
  background: rgba(0,0,0,0.7);
}

/* Carousel Dots */
.carousel-dots {
  text-align: center;
  margin-top: 1rem;
}

.carousel-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.carousel-dot.active {
  background: #333;
}

/* Order Now Button */
.btn-order {
  background: #b8860b;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.2s ease;
}

.btn-order:hover {
  background: #daa520;
}

/* Sticky Header */
header {
  background: inherit;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #eee;
  position: fixed;       /* make header stick */
  top: 0;                /* stick to top */
  left: 0;
  right: 0;
  z-index: 1000;         /* ensure it stays above content */
}

/* Add spacing so content isn't hidden behind header */
body {
  padding-top: 80px;     /* adjust to header height */
}

/* Menu Images */
.menu-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
}

.menu-item {
  text-align: center;
}

.menu-item img {
  width: 90%;          /* cap width to 90% of container */
  object-fit: contain; /* scale proportionally, no cropping */
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

.menu-item figcaption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #333;
}

.map-container {
  width: 100%;
  max-width: 600px;   /* keeps map from stretching too wide */
  margin: 1rem auto;  /* centers map */
  border-radius: 8px;
  overflow: hidden;   /* rounds corners cleanly */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.logo {
  display: block;
  height: auto;
  width: auto;          /* default: natural size */
  max-width: 100%;      /* shrink only if viewport is smaller */
}