/*
  Theme stylesheet for L Hathaway Carpentry Ltd website

  This file contains the core styles used across the site. Colors and layout
  values are defined as CSS variables to allow easy tweaking. Responsive
  utilities and simple animations are included to provide a polished,
  professional feel without requiring external frameworks.
*/

:root {
  --brand-color: #143d2d;
  --brand-dark: #0a2b20;
  --accent-color: #b5764a;
  --light-bg: #f5f5f2;
  --text-color: #333;
  --muted-color: #707070;
  --max-width: 1100px;
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--light-bg);
  color: var(--text-color);
}

header {
  background: var(--brand-color);
  color: #fff;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  padding: 0.75rem 1rem;
  margin: 0 auto;
}

nav .brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
nav .brand img {
  width: 48px;
  height: auto;
}
nav .brand div {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
nav .brand strong {
  font-size: 1.25rem;
}
nav .brand .muted {
  font-size: 0.8rem;
  color: #d4e6de;
}

nav .links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
nav .links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
}
nav .links a:hover {
  opacity: 0.8;
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: var(--accent-color);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s ease;
}
.btn:hover {
  background: #9c6640;
}
.btn.outline {
  background: transparent;
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
}
.btn.outline:hover {
  background: var(--accent-color);
  color: #fff;
}

/* Utility wrappers */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem;
}

.panel {
  margin: 2rem 0;
}

h1, h2, h3 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin-top: 0;
  color: var(--brand-dark);
}
h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.5rem;
}

.muted {
  color: var(--muted-color);
  font-size: 0.9rem;
}

/* Hero slider */
.hero {
  position: relative;
  height: 65vh;
  min-height: 400px;
  overflow: hidden;
  color: #fff;
}
.hero .slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hero .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero .slide.active {
  opacity: 1;
}
.hero .shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}
.hero .content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
}
.hero h1 {
  color: #fff;
  margin-bottom: 0.5rem;
}
.hero p {
  max-width: 600px;
  margin: 0 auto 1rem;
  font-size: 1.1rem;
  color: #e6e6e6;
}

/* Section styling */
section {
  padding: 2rem 0;
}
section:nth-of-type(even) {
  background: #eef3ef;
}

/* Services sections */
section .panel p {
  max-width: 700px;
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.gallery img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}
.gallery img:hover {
  transform: scale(1.03);
}

/* Testimonials */
.testimonials {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.testimonials blockquote {
  flex: 1 1 300px;
  margin: 0;
  padding: 1rem 1.25rem;
  background: #fff;
  border-left: 4px solid var(--accent-color);
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-style: italic;
  position: relative;
}
.testimonials blockquote p {
  margin: 0;
  font-size: 1rem;
}
.testimonials blockquote footer {
  margin-top: 0.5rem;
  font-weight: 600;
  font-style: normal;
  color: var(--brand-dark);
}
@media (max-width: 768px) {
  .testimonials {
    flex-direction: column;
  }
}

/* Joinery slider */
.joinery-slider {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  margin-top: 1rem;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.joinery-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}
.joinery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.joinery-slide.active {
  opacity: 1;
}

/* Generic slider component for project sections */
.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  margin-top: 1rem;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}
.slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider .slide.active {
  opacity: 1;
}
/* Lightbox */
.lightbox-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
.lightbox-backdrop.active {
  display: flex;
}
.lightbox-backdrop img {
  max-width: 90%;
  max-height: 80vh;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}

/* Footer */
footer {
  background: var(--brand-dark);
  color: #fff;
  padding: 1.5rem 0;
}
footer .footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}
footer a {
  color: var(--accent-color);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  nav .links { display: none; }
}