@tailwind base;
@tailwind components;
@tailwind utilities;

/* Anchor Positioning (no Tailwind equivalent) */
#volunteer-popover,
#syle-popover,
#news-popover,
#peace-school-popover {
  top: anchor(bottom);
  left: anchor(left);
  margin-top: 8px;
}

#volunteer-anchor { anchor-name: --volunteer-anchor; }
#volunteer-popover { position-anchor: --volunteer-anchor; }

#syle-anchor { anchor-name: --syle-anchor; }
#syle-popover { position-anchor: --syle-anchor; }

#peace-school-anchor { anchor-name: --peaceschool-anchor; }
#peace-school-popover { position-anchor: --peaceschool-anchor; }

#news-anchor { anchor-name: --whatIsNew-anchor; }
#news-popover { position-anchor: --whatIsNew-anchor; }

/* Mobile Drawer Animation */
#mobile-drawer::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

#mobile-drawer {
  transform: translateX(-100%);
  transition: transform 0.3s ease-out, display 0.3s ease-out allow-discrete;
}

#mobile-drawer:popover-open {
  transform: translateX(0);
}

@starting-style {
  #mobile-drawer:popover-open {
    transform: translateX(-100%);
  }
}

/* Scrolled Navbar State */
.scrolled {
  background-color: rgba(0, 0, 0, 0.95) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

/* Misc */
details summary::-webkit-details-marker {
  display: none;
}

#mobile-drawer {
  display: block;
  transform: translateY(-100%);
  transition: transform 0.4s ease-in-out, overlay 0.4s allow-discrete, display 0.4s allow-discrete;
}

#mobile-drawer:popover-open {
  transform: translateY(0);
}

@starting-style {
  #mobile-drawer:popover-open {
    transform: translateY(-100%);
  }
}

@keyframes fadeOut {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

.animate-fade-out {
  animation: fadeOut 2s forwards;
}

/* ===================
   Ghost Blog Styles
   =================== */

@layer components {
  .kg-gallery-card {
    @apply my-8;
  }

  .kg-gallery-container {
    @apply flex flex-col gap-3;
  }

  .kg-gallery-row {
    @apply flex flex-col sm:flex-row gap-3;
  }

  .kg-gallery-image {
    @apply flex-1 overflow-hidden rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300;
  }

  .kg-gallery-image img {
    @apply w-full h-52 sm:h-64 object-cover hover:opacity-90 transition-opacity;
  }
}