/*
  FreshGo website stylesheet

  This file defines the visual appearance of the FreshGo site.  It uses
  custom CSS variables for colours so that the palette can be adjusted
  easily.  Flexbox layouts ensure the design remains responsive across
  different screen sizes.  Smooth transitions and subtle shadows
  contribute to a modern, polished feel.  Sections fade in as they
  enter the viewport; this effect is hooked up in script.js.
*/

:root {
  --primary: #2ecc71;      /* main brand colour (green) */
  --primary-dark: #27ae60; /* darker variant for hover states */
  --light-bg: #f9f9f9;     /* light section background */
  --dark-text: #333333;    /* default text colour */
  --light-text: #ffffff;   /* light text (for dark backgrounds) */
}

/* Reset box model and defaults */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  line-height: 1.6;
  color: var(--dark-text);
}

/* Navigation bar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar .logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

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

.nav-links a {
  color: var(--light-text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.navbar.scrolled .nav-links a {
  color: var(--dark-text);
}

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

/* Hero section */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("assets/hero-salad-large.jpg");
  background-size: cover;
  background-position: center;
  color: var(--light-text);
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 0 1rem;
  max-width: 700px;
}

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

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.btn {
  display: inline-block;
  background: var(--primary);
  color: var(--light-text);
  padding: 0.8rem 2rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btn:hover {
  background: var(--primary-dark);
}

/* Generic section styles */
.section {
  padding: 5rem 0;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;

  /* Provide a scroll margin so anchored links don't hide behind the fixed
     navigation bar.  The value roughly matches the nav height plus some
     breathing room. */
  scroll-margin-top: 100px;
}

/* Show sections when scrolled into view (handled by JS) */
.section.show {
  opacity: 1;
  transform: translateY(0);
}

.section:nth-of-type(even) {
  background: var(--light-bg);
}

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

.section h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: var(--primary);
  text-align: center;
}

.section p {
  font-size: 1rem;
  margin-bottom: 1.2rem;
  line-height: 1.7;
}

/* Cards (Products) */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.card {
  flex: 1 1 30%;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease;
}

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

.card-img {
  width: 100%;
  height: 160px;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.placeholder {
  background: #e5e5e5;
}

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

.card p {
  font-size: 0.95rem;
}

/* Contact styles */
.contact p {
  font-size: 1rem;
  margin-bottom: 0.8rem;
}

/* Footer */
.footer {
  background: #222222;
  color: #bbbbbb;
  padding: 2rem 0;
  text-align: center;
  font-size: 0.9rem;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  .cards {
    gap: 1.5rem;
  }
  .card {
    flex: 1 1 45%;
  }
}

@media (max-width: 600px) {
  .nav-links {
    display: none; /* hide navigation links on small screens */
  }
  .navbar {
    justify-content: center;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .card {
    flex: 1 1 100%;
  }
}