/* ========================================
   Architecture Portfolio - Custom Styles
   Based on Tailwind CSS + Satoshi Font
   ======================================== */

/* Font Configuration */
.font-satoshi {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Color Palette */
.bg-cream { background-color: #F5F3EF; }
.bg-charcoal { background-color: #1a1917; }
.text-cream { color: #F5F3EF; }
.text-charcoal { color: #1a1917; }

/* Border Colors */
.border-cream\/20 { border-color: rgba(245, 243, 239, 0.2); }
.border-charcoal\/10 { border-color: rgba(26, 25, 23, 0.1); }
.border-charcoal\/20 { border-color: rgba(26, 25, 23, 0.2); }

/* Hover States for Charcoal on Cream */
.hover\:text-charcoal:hover { color: #1a1917; }
.hover\:bg-charcoal:hover { background-color: #1a1917; }
.hover\:bg-charcoal\/90:hover { background-color: rgba(26, 25, 23, 0.9); }
.hover\:border-charcoal:hover { border-color: #1a1917; }

/* Opacity for Charcoal */
.text-charcoal\/70 { color: rgba(26, 25, 23, 0.7); }
.text-charcoal\/60 { color: rgba(26, 25, 23, 0.6); }
.text-charcoal\/50 { color: rgba(26, 25, 23, 0.5); }
.text-charcoal\/80 { color: rgba(26, 25, 23, 0.8); }

/* Cream opacity variants */
.text-cream\/50 { color: rgba(245, 243, 239, 0.5); }
.text-cream\/80 { color: rgba(245, 243, 239, 0.8); }
.bg-cream\/95 { background-color: rgba(245, 243, 239, 0.95); }

/* ========================================
   Navigation Styles
   ======================================== */

nav a {
  position: relative;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #1a1917;
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
}

/* ========================================
   Filter Button Styles
   ======================================== */

.filter-btn {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid rgba(26, 25, 23, 0.2);
  background-color: transparent;
  color: #1a1917;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  border-color: #1a1917;
  background-color: #1a1917;
  color: #F5F3EF;
}

.filter-btn.active {
  background-color: #1a1917;
  color: #F5F3EF;
  border-color: #1a1917;
}

/* ========================================
   Project Card Styles
   ======================================== */

.project-card {
  overflow: hidden;
  cursor: pointer;
}

.project-card img {
  transition: transform 0.6s ease;
}

.project-card:hover img {
  transform: scale(1.05);
}

.project-card .project-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-card:hover .project-overlay {
  opacity: 1;
}

/* ========================================
   Form Input Styles
   ======================================== */

input:focus,
select:focus,
textarea:focus {
  border-color: #1a1917 !important;
}

/* Select arrow styling */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%231a1917' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* ========================================
   Smooth Scroll
   ======================================== */

html {
  scroll-behavior: smooth;
}

/* ========================================
   Selection Style
   ======================================== */

::selection {
  background-color: #1a1917;
  color: #F5F3EF;
}

/* ========================================
   Scrollbar Styling
   ======================================== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #F5F3EF;
}

::-webkit-scrollbar-thumb {
  background: #1a1917;
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 25, 23, 0.8);
}

/* ========================================
   Animation Keyframes
   ======================================== */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease forwards;
}

.project-card {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.project-card:nth-child(1) { animation-delay: 0.1s; }
.project-card:nth-child(2) { animation-delay: 0.2s; }
.project-card:nth-child(3) { animation-delay: 0.3s; }
.project-card:nth-child(4) { animation-delay: 0.4s; }
.project-card:nth-child(5) { animation-delay: 0.5s; }
.project-card:nth-child(6) { animation-delay: 0.6s; }
.project-card:nth-child(7) { animation-delay: 0.7s; }
.project-card:nth-child(8) { animation-delay: 0.8s; }
.project-card:nth-child(9) { animation-delay: 0.9s; }

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 1024px) {
  .hero-heading {
    font-size: 3rem;
  }
}

@media (max-width: 640px) {
  .filter-btn {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
  }
}