/*
Theme Name: Colony Worms
Theme URI: https://example.com/colony-worms
Author: Colony Worms Team
Author URI: https://example.com
Description: A clean, modern WordPress theme built for the Colony Worms movement. Share designs, plans and tutorials to help Hutterite colonies and other farmers turn food scraps into fertile soil with composting worms. Designed for readability and easy customization.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: colony-worms
*/

/* Import an accessible and highly legible font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

/* Basic resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* Use Open Sans and fall back to system fonts for improved readability */
  font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.7;
  color: #333333;
  background-color: #f9fafb;
}

a {
  color: #00664f;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Header styles */
.site-header {
  background-color: #ffffff;
  border-bottom: 1px solid #dddddd;
  padding: 1.25rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header-inner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #00664f;
  margin: 0;
}

.main-nav {
  flex-grow: 1;
  text-align: right;
}

.main-nav ul {
  list-style: none;
}

.main-nav li {
  display: inline-block;
  margin-left: 1.5rem;
}

.main-nav a {
  font-size: 1rem;
  color: #555;
  font-weight: 500;
}

.main-nav a:hover {
  color: #004c33;
}

/* Hero section */
.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  text-align: center;
  /* Increase vertical padding for a more spacious hero section */
  padding: 7rem 1rem;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* A slightly lighter overlay so the background image is visible but text remains readable */
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 840px;
  margin: 0 auto;
  padding: 0 1rem;
}

.hero h2 {
  font-size: 3rem;
  margin-bottom: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.hero p {
  font-size: 1.3rem;
  margin-bottom: 2.5rem;
  line-height: 1.5;
}

/* Button styles */
.btn {
  display: inline-block;
  background-color: #00664f;
  color: #ffffff;
  padding: 0.75rem 1.75rem;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn:hover {
  background-color: #004c33;
  transform: translateY(-2px);
}

/* Sections */
section {
  padding: 4rem 1rem;
}

.section-bg {
  background-size: cover;
  background-position: center;
  color: #333;
}

.section-inner {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

section h3 {
  font-size: 2.2rem;
  margin-bottom: 1.25rem;
  color: #00664f;
}

section p {
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
}

/* Footer */
footer {
  background-color: #2c5f2d;
  color: #ffffff;
  padding: 2rem 0;
  text-align: center;
}

footer p {
  margin: 0.5rem 0;
}