/* Global Styles for the EatLupini website
   This stylesheet uses a clean, modern aesthetic that highlights the
   vibrant yellow hue of lupini beans while keeping the site easy
   to navigate. All typography uses web‑safe fonts and responsive
   layouts to ensure the content looks good on mobile and desktop.
*/

/* Import a Google Font for headings and body text */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Open+Sans:wght@300;400;600;700&display=swap');

:root {
  --primary-color: #f1c40f; /* golden yellow reminiscent of lupini beans */
  --secondary-color: #2c3e50; /* dark blue for contrast */
  --accent-color: #ecf0f1; /* light grey for backgrounds */
  --text-color: #333333;
  --max-width: 1200px;
  --transition-speed: 0.3s;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  color: var(--text-color);
  background-color: #ffffff;
  line-height: 1.6;
}

header {
  background-color: var(--accent-color);
  border-bottom: 4px solid var(--primary-color);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 15px;
}

/* Navigation */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.nav .logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--secondary-color);
  text-decoration: none;
}

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

.nav ul li a {
  text-decoration: none;
  color: var(--secondary-color);
  font-weight: 600;
  transition: color var(--transition-speed);
}

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

/* Language selector */
.lang-select {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.lang-select select {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--secondary-color);
  border-radius: 3px;
  background-color: #fff;
  color: var(--secondary-color);
  font-family: inherit;
  cursor: pointer;
}

/* Hero Section */
.hero {
  position: relative;
  width: 100%;
  height: 60vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(44, 62, 80, 0.4);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 90%;
}

.hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

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

.button {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 3px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--transition-speed);
  text-decoration: none;
  display: inline-block;
}

.button:hover {
  background-color: #d4ac0d;
}

/* Sections */
section {
  padding: 3rem 0;
}

.section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  color: var(--secondary-color);
  margin-bottom: 1rem;
  text-align: center;
}

.section-content {
  max-width: var(--max-width);
  margin: 0 auto;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.feature {
  background-color: var(--accent-color);
  border-radius: 8px;
  padding: 1.5rem;
  transition: transform var(--transition-speed);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

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

.feature h3 {
  margin-top: 0;
  color: var(--secondary-color);
}

.feature p {
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

th, td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

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

/* Footer */
footer {
  background-color: var(--secondary-color);
  color: #fff;
  padding: 1.5rem 0;
  text-align: center;
}

footer a {
  color: var(--primary-color);
  text-decoration: none;
}

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

/* Responsive typography */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
}