/*
  Stylesheet for the Patto Café landing page

  The design aims to remain faithful to the provided reference. Colour values
  were sampled from the original landing to preserve the brand identity. The
  layout uses modern CSS features such as flexbox and CSS variables to allow
  easy theming and responsiveness.
*/

/* Root colour definitions based on the sampled palette from the screenshot */
:root {
  --primary-color: #0e592f; /* dark green for header, buttons and accents */
  --secondary-color: #f5f1e3; /* warm beige background */
  --accent-color: #c8a86e; /* golden accent used sparingly */
  --light-color: #ffffff;
  --text-color: #042813; /* deep forest green for text */
  --tagline-color: #fdf0e0; /* pale cream for overlay text */
}

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

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--secondary-color);
  color: var(--text-color);
  line-height: 1.5;
}

/* Navigation styling */
header {
  background-color: var(--primary-color);
  color: var(--light-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.menu-icon {
  font-size: 1.5rem;
  cursor: pointer;
}

.logo {
  height: 40px;
  width: auto;
}

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

.nav-right li {
  font-size: 1.25rem;
  cursor: pointer;
}

/* Hero section */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 4rem 2rem;
  background-color: var(--secondary-color);
}

.hero-text {
  flex: 1 1 300px;
  max-width: 500px;
}

.hero-text h1 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.hero-text p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
}

.hero-buttons .btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin-right: 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.btn.primary {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.btn.primary:hover {
  background-color: #064322;
}

.hero-video {
  flex: 1 1 300px;
  max-width: 500px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sections */
.section {
  padding: 4rem 2rem;
  background-color: var(--secondary-color);
}

.section h2 {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--primary-color);
}

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

.card {
  background-color: var(--light-color);
  border: 1px solid var(--primary-color);
  border-radius: 8px;
  width: 260px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card img {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 1rem;
  width: 100%;
}

.card-content h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.card-content .price {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  padding: 0.5rem;
  margin-bottom: 0.25rem;
  font-weight: bold;
  border-radius: 4px;
}

.card-content .weight {
  font-size: 0.85rem;
  color: var(--primary-color);
}

/* Espresso machine / tagline section */
.espresso-section {
  position: relative;
  background-image: url('../images/coffee_machine.png');
  background-size: cover;
  background-position: center;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.espresso-overlay {
  background: rgba(0, 0, 0, 0.35);
  padding: 2rem;
  border-radius: 8px;
}

.espresso-overlay h2 {
  font-family: 'Playfair Display', serif;
  color: var(--tagline-color);
  font-size: 2.5rem;
  line-height: 1.3;
  text-align: center;
}

/* Icons CTA section */
.icons-cta {
  background-color: var(--secondary-color);
  text-align: center;
  padding: 2rem;
}

.icons-cta .icons-image {
  max-width: 100%;
  height: auto;
}

/* Footer styling */
footer {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }
  .hero-text, .hero-video {
    max-width: none;
    width: 100%;
  }
  .nav-right li {
    font-size: 1rem;
  }
}