@import url('https://fonts.googleapis.com/css2?family=Allura&family=Roboto:wght@300;400&display=swap');

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Roboto', sans-serif; background: #faf9f7; color: #1d1515; margin: 0; }

/* Hamburger lines */
.ham-line { display: block; height: 1px; width: 24px; background: #1d1515; transition: transform 0.3s, opacity 0.3s; }
.menu-open .ham-top { transform: translateY(7px) rotate(45deg); }
.menu-open .ham-mid { opacity: 0; }
.menu-open .ham-bot { transform: translateY(-7px) rotate(-45deg); }

/* Fullscreen mobile overlay */
#mobile-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: #faf9f7;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#mobile-overlay.open { opacity: 1; pointer-events: all; transform: translateY(0); }

/* Close button */
#mobile-close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0;
}
#mobile-close span { display: block; width: 24px; height: 1px; background: #1d1515; }
#mobile-close span:first-child { transform: rotate(45deg) translateY(0.5px); }
#mobile-close span:last-child  { transform: rotate(-45deg) translateY(-0.5px); }

/* Overlay nav links */
#mobile-overlay nav { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; padding: 0 32px; }
.mob-nav-link {
  display: block; width: 100%; text-align: center; padding: 16px 0;
  font-family: 'Allura', cursive; font-size: 1.8rem; font-weight: 300;
  color: #1d1515; background: none; border: none;
  border-bottom: 1px solid rgba(29,21,21,0.08); cursor: pointer;
  transition: color 0.2s;
}
.mob-nav-link:last-of-type { border-bottom: none; }
.mob-nav-link:hover { color: #c82236; }
.mob-cta {
  margin-top: 24px; width: 100%;
  background: #c82236; color: white; border: none;
  padding: 14px 0; font-size: 0.7rem; font-weight: 300;
  letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer;
  transition: opacity 0.2s;
}
.mob-cta:hover { opacity: 0.9; }

/* Active nav */
.nav-btn { position: relative; }
.nav-btn .nav-underline { position: absolute; bottom: -4px; left: 0; height: 1px; width: 100%; background: #c82236; display: none; }
.nav-btn.active { color: #c82236; }
.nav-btn.active .nav-underline { display: block; }

/* Testimonial carousel */
.testimonial-item { display: none; }
.testimonial-item.active { display: block; }
.dot { height: 6px; border-radius: 9999px; background: rgba(29,21,21,0.2); width: 6px; cursor: pointer; transition: width 0.3s, background 0.3s; border: none; padding: 0; }
.dot.active { width: 32px; background: #c82236; }

/* Image effects */
.img-hover { transition: transform 0.7s; }
.img-hover:hover { transform: scale(1.05); }
.blog-img { transition: transform 0.5s; }
.blog-card:hover .blog-img { transform: scale(1.05); }
.blog-overlay { transition: opacity 0.3s; }
.blog-card:hover .blog-overlay { opacity: 0 !important; }

/* Blog category tabs */
.blog-cat-btn {
  border-bottom: 2px solid transparent;
  color: rgba(29,21,21,0.4);
  transition: color 0.2s;
}
.blog-cat-btn:hover { color: #1d1515; }
.blog-cat-btn.active {
  border-bottom-color: #c82236;
  color: #c82236;
}

/* Hide carousel scrollbar */
#blog-carousel::-webkit-scrollbar { display: none; }