/* ==========================================================================
   TLC BUILDERS - Bartlett, NH
   Custom Companion Stylesheet for Tailwind CSS (Static - No Node)
   ========================================================================== */

/* Custom Smooth Transitions & Scrollbars */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0A0D11;
}
::-webkit-scrollbar-thumb {
  background: #C5A059;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #DFBF82;
}

/* Nav Link Hover Underline */
.nav-link {
  position: relative;
  padding-bottom: 4px;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #C5A059;
  transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: #C5A059 !important;
}

/* Mobile Hamburger Animation */
#mobileMenuBtn.active #bar1 {
  transform: translateY(8px) rotate(45deg);
}

#mobileMenuBtn.active #bar2 {
  opacity: 0;
}

#mobileMenuBtn.active #bar3 {
  transform: translateY(-8px) rotate(-45deg);
}

/* Lightbox Modal */
#lightboxModal.active {
  display: flex !important;
  animation: fadeIn 0.25s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Back to Top Active */
#backToTop.visible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Form Error States */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #EF4444 !important;
  background-color: rgba(239, 68, 68, 0.05);
}

.form-group.has-error .field-error {
  display: block !important;
}

/* Portfolio Filtering Animation */
.portfolio-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item.hidden {
  display: none !important;
}

/* Form Status Banner */
#formStatus.success {
  background-color: rgba(16, 185, 129, 0.15);
  border: 1px solid #10B981;
  color: #A7F3D0;
}

#formStatus.error {
  background-color: rgba(239, 68, 68, 0.15);
  border: 1px solid #EF4444;
  color: #FECACA;
}

/* Custom Backdrop blur helper for older browsers */
.backdrop-blur-xs {
  backdrop-filter: blur(2px);
}