/*
  Styling for the deli‑very Chicago grocery delivery landing page.
  The palette uses warm, family–friendly colours inspired by the jush.pl service,
  with pastel peach, cream and soft greens to create a welcoming feel.
*/

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

body {
  font-family: Inter, Arial, sans-serif;
  line-height: 1.5;
  /* Switch the default background from warm off‑white to a crisp white to
     mirror the clean aesthetic of the jush.pl site. */
  background-color: #ffffff;
  color: #1f2937;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Container wrapper to center content and limit width */
.container {
  width: 90%;
  max-width: 1140px;
  margin: 0 auto;
}

/* Navigation bar */
/* Navigation bar uses a white background with a subtle grey border to blend
   seamlessly into the page, while still remaining fixed at the top. */
.navbar {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 100;
}

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

/* Logo inherits a deep green accent to evoke freshness and nature. */
.logo {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1b7a4d;
}

/* Image version of the logo used in the navbar. Constrain its height so it fits
   nicely within the navigation bar while allowing the width to scale
   proportionally. */
.logo-image {
  height: 50px;
  width: auto;
  display: block;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* Navigation links adopt the green accent with a darker shade on hover. */
.nav-links li a {
  font-size: 0.95rem;
  color: #1b7a4d;
  transition: color 0.2s ease;
}

/* Darken the green on hover for visual feedback. */
.nav-links li a:hover {
  color: #145c33;
}

/* Language toggle button */
/* Language toggle button now uses soft greens to harmonise with the new palette. */
.lang-toggle {
  background-color: #e5f9e8;
  color: #1b7a4d;
  border: 1px solid #cfeace;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-toggle:hover {
  background-color: #d4f2d9;
  color: #145c33;
}

/* Hero section is simplified with a pale green gradient, emphasising freshness. */
.hero {
  background: linear-gradient(135deg, #e5f9e8 0%, #ffffff 70%, #eafbf0 100%);
  padding: 4rem 0 5rem 0;
  text-align: center;
  color: #1f2937;
}

.hero h1 {
  font-size: 2.4rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.hero p {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 1.5rem;
}

/* Primary call‑to‑action uses a bold green reminiscent of fresh produce. */
.cta-button {
  display: inline-block;
  background-color: #1ba863;
  color: #ffffff;
  padding: 0.8rem 1.6rem;
  border-radius: 5px;
  font-weight: 600;
  margin-bottom: 1rem;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #16864f;
}

/* Pricing banner uses complementary pastel green tones. */
.price-banner {
  display: inline-block;
  margin-top: 1rem;
  background-color: #f0fbf4;
  border: 1px solid #cfeace;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  font-size: 1rem;
  color: #1b7a4d;
  font-weight: 500;
}

/* Steps section now uses a very pale green background instead of peach. */
.steps-section {
  background-color: #f6fdf8;
  padding: 3rem 0;
}

.steps-section h2 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  color: #1f2937;
  text-align: center;
}

.steps-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
}

/* Individual step cards use neutral white backgrounds and soft green borders. */
.step {
  flex: 1 1 230px;
  background-color: #ffffff;
  border: 1px solid #d7e9db;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  text-align: center;
}

/* Circular number indicators adopt a fresh green fill. */
.step-number {
  width: 42px;
  height: 42px;
  line-height: 42px;
  margin: 0 auto 0.8rem;
  border-radius: 50%;
  background-color: #69c27f;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.3rem;
}

/* Headings within step cards use the main green accent. */
.step h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #1b7a4d;
}

.step p {
  font-size: 0.95rem;
  color: #374151;
}

/* Delivery area section */
.area-section {
  background-color: #fef7f1;
  padding: 3rem 0;
}

.area-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  text-align: center;
  color: #1f2937;
}

.area-intro {
  font-size: 1rem;
  max-width: 700px;
  margin: 0 auto 2rem;
  text-align: center;
  color: #374151;
}

.area-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.area-map {
  flex: 1 1 280px;
  background-color: #e5e7eb;
  border: 1px dashed #9ca3af;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  color: #6b7280;
}

.neighbourhoods {
  flex: 1 1 280px;
  list-style: none;
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.neighbourhoods li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  color: #374151;
}

/* Change bullet colour in area list to the green accent. */
.neighbourhoods li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: #1ba863;
  font-size: 1rem;
}

/* Why choose us section */
/* Why section gets the same pale green backdrop as the steps section. */
.why-section {
  background-color: #f6fdf8;
  padding: 3rem 0;
}

.why-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #1f2937;
}

.why-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

/* Cards in the why section feature a delicate green border. */
.why-card {
  background-color: #ffffff;
  border: 1px solid #d7e9db;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Card headings also use the main green accent. */
.why-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #1b7a4d;
}

/* Body text remains dark grey for readability; no changes needed here. */

/* For whom section */
/* For whom section also adopts the pale green background. */
.forwhom-section {
  background-color: #f6fdf8;
  padding: 3rem 0;
}

.forwhom-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #1f2937;
}

.groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

/* Group boxes use matching green borders. */
.group-box {
  background-color: #ffffff;
  border: 1px solid #d7e9db;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Subheadings in group boxes now use the green accent. */
.group-box h4 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
  color: #1b7a4d;
}

.group-box p {
  font-size: 0.95rem;
  color: #374151;
}

/* Footer */
/* Footer transitions to a soft greenish‑white with a matching border. */
.footer {
  background-color: #f0fdf4;
  border-top: 1px solid #d7e9db;
  padding: 2rem 0;
  color: #6b7280;
  font-size: 0.9rem;
}

/* Footer links align with the green palette. */
.footer a {
  color: #1b7a4d;
  text-decoration: underline;
}

.footer-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}