/* ===== RUSTIC BARBERSHOP THEME ===== */
:root {
  --brown-darkest: #1a0f0a;
  --brown-dark: #2c1810;
  --brown-mid: #3b2314;
  --brown-warm: #6b4226;
  --cream: #f5efe6;
  --cream-dark: #e8ddd0;
  --barn-red: #8b3a2e;
  --copper: #b87333;
  --copper-light: #d4956a;
  --leather: #5c3a1e;
}

/* ===== BASE ===== */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: var(--cream); color: var(--brown-mid); }

::selection { background: var(--barn-red); color: var(--cream); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--cream-dark); }
::-webkit-scrollbar-thumb { background: var(--brown-warm); border-radius: 4px; }

/* ===== SCROLL ANIMATIONS ===== */
.animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.animate-visible { opacity: 1; transform: translateY(0); }
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.1s; }
.stagger > *:nth-child(3) { transition-delay: 0.18s; }
.stagger > *:nth-child(4) { transition-delay: 0.24s; }
.stagger > *:nth-child(5) { transition-delay: 0.3s; }
.stagger > *:nth-child(6) { transition-delay: 0.36s; }
.stagger > *:nth-child(7) { transition-delay: 0.42s; }

/* ===== CARD HOVER ===== */
.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(44, 24, 16, 0.15); }

/* ===== IMAGE ZOOM ===== */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.5s ease; }
.img-zoom:hover img { transform: scale(1.05); }

/* ===== BUTTONS ===== */
.btn-primary {
  background: var(--barn-red);
  color: var(--cream);
  font-weight: 700;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.btn-primary:hover {
  background: #7a3227;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 58, 46, 0.3);
}

.btn-outline {
  border: 2px solid var(--brown-mid);
  color: var(--brown-mid);
  font-weight: 700;
  transition: all 0.3s ease;
}
.btn-outline:hover {
  background: var(--brown-mid);
  color: var(--cream);
}

/* ===== HERO ===== */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
}
.hero-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(26, 15, 10, 0.92) 0%, rgba(26, 15, 10, 0.7) 40%, rgba(26, 15, 10, 0.45) 100%);
  z-index: 1;
}
.hero-content { position: relative; z-index: 2; }

/* ===== DIVIDERS ===== */
.rustic-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
}
.rustic-divider::before,
.rustic-divider::after {
  content: '';
  height: 1px;
  width: 60px;
  background: var(--brown-warm);
  opacity: 0.4;
}
.rustic-divider-icon { color: var(--barn-red); font-size: 0.75rem; }

.accent-line {
  width: 50px;
  height: 2px;
  background: var(--barn-red);
}
.accent-line-center {
  width: 50px;
  height: 2px;
  background: var(--barn-red);
  margin: 0 auto;
}

/* ===== SERVICE CARDS ===== */
.service-card {
  background: white;
  border: 1px solid var(--cream-dark);
  border-radius: 8px;
  padding: 1.75rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(44, 24, 16, 0.1);
}
.service-price {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--barn-red);
}
.service-duration {
  font-size: 0.8rem;
  color: var(--brown-warm);
  opacity: 0.7;
}

/* ===== GALLERY ===== */
.gallery-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,15,10,0.6) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  z-index: 2;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.gallery-item:hover .gallery-caption { transform: translateY(0); }

/* ===== REVIEW CARDS ===== */
.review-card {
  background: white;
  border: 1px solid var(--cream-dark);
  border-radius: 8px;
  padding: 1.75rem;
  position: relative;
}
.review-card::before {
  content: '\201C';
  font-size: 3.5rem;
  color: var(--barn-red);
  opacity: 0.15;
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  line-height: 1;
  font-family: Georgia, serif;
}

/* ===== NAV ===== */
.nav-scrolled {
  background: rgba(245, 239, 230, 0.98) !important;
  box-shadow: 0 2px 15px rgba(44, 24, 16, 0.08);
  border-bottom-color: var(--cream-dark) !important;
}
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--barn-red);
  transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ===== STARS ===== */
.star-rating { color: var(--copper); }

/* ===== HOURS TABLE ===== */
.hours-table td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--cream-dark);
}
.hours-table tr:last-child td { border-bottom: none; }

/* ===== MAP ===== */
.map-container {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--cream-dark);
}

/* ===== SECTION BACKGROUNDS ===== */
.section-warm { background: white; }
.section-dark {
  background: var(--brown-darkest);
  color: var(--cream);
}

/* ===== LIGHTBOX ===== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(26, 15, 10, 0.95);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.active { opacity: 1; pointer-events: all; }
.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 6px;
}
.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: var(--cream);
  font-size: 2rem;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  transition: background 0.3s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* ===== FADE ANIMATIONS ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.7s ease forwards; }
.fade-in-up-delay-1 { animation-delay: 0.15s; opacity: 0; }
.fade-in-up-delay-2 { animation-delay: 0.3s; opacity: 0; }
.fade-in-up-delay-3 { animation-delay: 0.45s; opacity: 0; }

/* ===== MOBILE MENU ===== */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
#mobile-menu.open { max-height: 400px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .hero-section { min-height: 90vh; }
}

/* ===== WOOD GRAIN TEXTURE (subtle) ===== */
.wood-bg {
  background-color: var(--brown-darkest);
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q 25 8, 50 10 T 100 10' stroke='%232c1810' stroke-width='0.5' fill='none' opacity='0.3'/%3E%3C/svg%3E");
}

/* ===== HERO VIDEO BACKGROUND ===== */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}