/*
  Green Circle Contracting Company Website Stylesheet

  This CSS defines a modern dark‑green theme inspired by leading energy and construction contractors.  
  It provides responsive layouts, card components, buttons and typography designed to showcase  
  the company’s capabilities and projects. Replace placeholder images in the assets/images folders  
  to customise the look without editing the HTML.
*/

/* Root variables for consistent theming */
:root {
  --dark-bg: #0e1c19;
  --card-bg: #132724;
  --primary: #146b4d;
  --accent: #3bbf87;
  --light: #f5f7f6;
  --muted: #a2b4af;
  --border-radius: 8px;
  --spacing: 20px;
  --max-width: 1200px;
}

/* Base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--light);
  background-color: var(--dark-bg);
  line-height: 1.6;
}

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

a:hover {
  text-decoration: underline;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing) calc(var(--spacing) * 2);
  background-color: var(--dark-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 999;
}

header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--light);
  text-decoration: none;
}

header .logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

nav .nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
}

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

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

/* Hero section */
.hero {
  position: relative;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: url('../images/hero/hero.jpg') no-repeat center/cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  color: var(--light);
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: var(--muted);
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--border-radius);
  background-color: var(--accent);
  color: #052d1e;
  font-weight: 600;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #2c9969;
  color: #052d1e;
}

.btn-text {
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
  color: var(--accent);
}

.section {
  padding: 80px 20px;
  width: 100%;
}

.section.dark {
  background-color: var(--card-bg);
}

.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  font-weight: 600;
  color: var(--light);
}

.cards {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

/* When there are only a few cards (e.g. two projects), ensure they fill the row more evenly. */
.cards.two-col {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.card {
  background-color: var(--card-bg);
  padding: 30px 20px;
  border-radius: var(--border-radius);
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.card img {
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  object-fit: contain;
  filter: invert(52%) sepia(10%) saturate(434%) hue-rotate(114deg) brightness(90%) contrast(90%);
}

.card h3 {
  margin-bottom: 12px;
  font-size: 1.2rem;
  color: var(--accent);
}

.card p {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
}

.project-card img.project-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  margin-bottom: 15px;
}

.cta {
  text-align: center;
  background-color: var(--primary);
  color: var(--light);
  padding: 60px 20px;
}

.cta h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.cta p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  color: var(--light);
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #051513;
  color: var(--muted);
  padding: 40px 30px;
}

.footer-section {
  flex: 1 1 220px;
  margin-bottom: 20px;
}

.footer-section h3, .footer-section h4 {
  margin-bottom: 15px;
  color: var(--accent);
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section li {
  margin-bottom: 8px;
}

.footer-section a {
  color: var(--muted);
  transition: color 0.3s;
}

.footer-section a:hover {
  color: var(--accent);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }
  nav .nav-links {
    /* Hide the nav links on small screens; they will be toggled via JS */
    display: none;
    width: 100%;
    flex-direction: column;
    margin-top: 10px;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* Mobile menu toggle button */
.menu-toggle {
  display: none;
  width: 32px;
  height: 28px;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
}

.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--accent);
  transition: transform 0.3s ease;
}
.menu-toggle::before {
  top: 5px;
}
.menu-toggle span {
  top: 12px;
}
.menu-toggle::after {
  top: 19px;
}

/* Show menu toggle button on small screens */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  nav .nav-links.open {
    display: flex;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: var(--dark-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    z-index: 998;
  }
  nav .nav-links li {
    margin-bottom: 15px;
  }
}