@import url('https://fonts.loli.net/css2?family=Playfair+Display:wght@400;700&family=Noto+Serif+SC:wght@400;700&display=swap');

:root {
  --ivory: #F8F4E6;
  --oat: #EAE6DA;
  --text-primary: #374151; /* Tailwind's gray-700 */
  --rose-gold: #B76E79;
  --font-serif: 'Playfair Display', 'Noto Serif SC', serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Overriding Tailwind's default to inject our theme */
body {
  background-color: var(--ivory);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom font for serif elements */
.font-serif {
  font-family: var(--font-serif);
}

/* Shared navigation link style with an underline animation */
.nav-link {
  position: relative;
  transition: color 0.3s ease-out;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: var(--rose-gold);
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.nav-link:hover,
.nav-link.active {
  color: var(--rose-gold);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Image gallery item hover effect */
.gallery-item img {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* Overlay for gallery items to show text on hover */
.gallery-item .overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  color: white;
  font-family: var(--font-serif);
}

.gallery-item:hover .overlay {
  opacity: 1;
}

/* Simple fade-in animation for page load */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s ease-in-out forwards;
}

/* Waterfall layout for inspiration page */
.waterfall-container {
  column-count: 3;
  column-gap: 1.5rem; /* Corresponds to Tailwind's gap-6 */
}

.waterfall-item {
  break-inside: avoid;
  margin-bottom: 1.5rem; /* Corresponds to Tailwind's mb-6 */
  display: inline-block;
  width: 100%;
}

/* Responsive adjustments for waterfall layout */
@media (max-width: 1024px) {
  .waterfall-container {
    column-count: 2;
  }
}

@media (max-width: 768px) {
  .waterfall-container {
    column-count: 1;
  }
}

/* Hide scrollbar for a cleaner look */
::-webkit-scrollbar {
    width: 0;
    height: 0;
}