/* =============================================================
   NONA — Custom styles (Tailwind handles most layout/color)
   Only things Tailwind can't do live here.
   ============================================================= */

/* Decorative rainbow border at very top of every page */
.page-top-border {
  height: 4px;
  background: linear-gradient(to right, #7D1F1F, #D97529, #C4971A, #D97529, #7D1F1F);
}

/* Section divider — subtle gold line */
.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #C4971A, transparent);
  margin: 2.5rem 0;
}

/* ---- Mobile nav ---- */
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* ---- Card hover lift ---- */
.event-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ---- Photo thumbnails ---- */
.photo-thumb img {
  transition: transform 0.2s ease;
  cursor: pointer;
}
.photo-thumb:hover img {
  transform: scale(1.04);
}

/* ---- Lightbox ---- */
#lightbox {
  animation: fadeIn 0.15s ease;
}
#lightbox-img {
  max-height: 85vh;
  max-width: 90vw;
  object-fit: contain;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Scroll fade-in ---- */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Print: hide nav, show content cleanly ---- */
@media print {
  header, footer, #lightbox { display: none !important; }
  main { padding: 0 !important; }
}