/*
  Bishop Legacy Pro Styles
  This stylesheet defines a clean, professional design suitable for both desktop and
  mobile devices. It relies on CSS variables for easy theming and uses modern
  layout techniques (flexbox and grid) for responsive behavior without
  introducing any external images. When real images are added to the assets
  directory, they'll display seamlessly within the gallery section.
*/

/* Color palette */
:root {
  --primary: #1a4625;      /* deep green used for headings and hero */
  --secondary: #2c704b;    /* lighter green for buttons and accents */
  --accent: #b9d8c2;       /* pale green for subtle backgrounds */
  --light: #f5f9f5;        /* near‑white for section backgrounds */
  --dark-text: #0f1f12;    /* dark text for readability */
  --max-width: 1100px;
  --radius: 6px;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

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

html {
  scroll-behavior: smooth;
}

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

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

/* Utility classes */
.section {
  padding: 4rem 0;
}

.btn {
  display: inline-block;
  background-color: var(--secondary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out;
}

.btn:hover,
.btn:focus {
  background-color: var(--primary);
}

/* Header */
.site-header {
  position: relative;
  background-color: var(--primary);
  color: #fff;
}

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

.brand {
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
}

/* Nav toggle for mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-toggle .bar {
  width: 24px;
  height: 2px;
  background-color: #fff;
  display: block;
}

/* Screen-reader-only text helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-links {
  display: flex;
  gap: 2rem;
}
.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease-in-out;
}
.nav-links a:hover,
.nav-links a:focus {
  opacity: 0.8;
}

/* Location bar below nav */
.location-bar {
  background-color: var(--secondary);
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* Hero */
.hero {
  /* Layer a subtle color gradient over the hero image for readability */
  background: linear-gradient(135deg, rgba(26,70,37,0.8) 0%, rgba(44,112,75,0.8) 100%), url('assets/hero.png');
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 6rem 0 4rem;
  text-align: center;
}
.hero .hero-content {
  max-width: 800px;
  margin: 0 auto;
}
.hero h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.hero p {
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

/* Services */
.services {
  background-color: var(--light);
}
.services h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--primary);
}
.services-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.service {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.service h3 {
  margin-bottom: 1rem;
  color: var(--primary);
  font-size: 1.25rem;
}
.service ul {
  list-style-type: disc;
  padding-left: 1.25rem;
}
.service li {
  margin-bottom: 0.5rem;
}

/* Gallery */
.gallery {
  background-color: var(--accent);
}
.gallery h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--primary);
  font-size: 2rem;
}
.gallery-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.gallery-item {
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.gallery-item img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.gallery-item figcaption {
  padding: 0.75rem;
  font-size: 0.9rem;
  color: var(--dark-text);
}

/* About */
.about {
  background-color: var(--light);
}
.about h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  color: var(--primary);
}
.about p {
  max-width: 800px;
  margin: 0 auto 1.5rem;
  text-align: center;
}

/* Contact */
.contact {
  background-color: var(--accent);
}
.contact h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  color: var(--primary);
}
.contact p {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2rem;
}
.quote-form {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 2rem;
}
.quote-form .form-group {
  display: flex;
  flex-direction: column;
}
.quote-form label {
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--primary);
}
.quote-form input,
.quote-form textarea {
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  font: inherit;
  resize: vertical;
}
.quote-form textarea {
  min-height: 120px;
}
.quote-form .full {
  grid-column: 1 / -1;
}
.hidden {
  display: none;
}

.contact-info {
  text-align: center;
}
.contact-info h3 {
  margin-bottom: 0.75rem;
  color: var(--primary);
}
.contact-info ul {
  list-style: none;
  padding: 0;
}
.contact-info li {
  margin-bottom: 0.5rem;
}
.contact-info a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

/* Footer */
.site-footer {
  background-color: var(--primary);
  color: #fff;
  padding: 2rem 0 1rem;
}
.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
.footer-top h4 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
}
.footer-bottom {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 1rem;
  opacity: 0.85;
}

/* Responsive navigation */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--primary);
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.25s ease-in-out;
  }
  .nav-links.open {
    transform: scaleY(1);
  }
}