body {
    font-family: 'Inter', sans-serif; /* Using a common sans-serif font, ensure it's linked if not a system font */
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('babyanimals2.png'); /* Ensure this path is correct */
  background-size: 90% auto; /* Default for mobile */
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.15; /* Default opacity */
  z-index: -1;
  pointer-events: none;
}

#mainContent video,
#mainContent img.gallery-media-item {
  max-height: 250px; /* Default for mobile, also consider aspect-ratio classes from Tailwind for consistency */
  object-fit: cover;
  width: 100%;
  border-radius: 0.5rem; /* Tailwind: rounded-lg */
  background-color: #e5e7eb; /* bg-gray-200 for placeholder before image loads */
  display: block; /* Prevents extra space below inline images */
}

/* Responsive adjustments for background image and media items */
@media (min-width: 640px) { /* sm breakpoint */
  body::before {
    background-size: 70% auto;
    opacity: 0.2;
  }
  #mainContent video,
  #mainContent img.gallery-media-item {
    max-height: 280px;
  }
}

@media (min-width: 768px) { /* md breakpoint */
  body::before {
    background-size: 55% auto; /* Original size */
    opacity: 0.25;
  }
  #mainContent video,
  #mainContent img.gallery-media-item {
    max-height: 300px; /* Original max-height */
  }
}

/* Lightbox customization for better mobile experience */
.lb-data .lb-caption {
  font-size: 0.9rem;
  line-height: 1.3;
  padding: 8px 10px;
}
.lb-data .lb-number {
  font-size: 0.8rem;
  padding-top: 0.5em;
}
.lb-nav a.lb-prev, .lb-nav a.lb-next {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.lb-nav a.lb-prev:hover, .lb-nav a.lb-next:hover {
  opacity: 1;
}
.lb-data .lb-close {
    display: block;
    float: right;
    width: 35px; /* Increased tap area */
    height: 35px; /* Increased tap area */
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXgiPjxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiPjwvbGluZT48bGluZSB4MT0iNiIgeTE9IjYiIHgyPSIxOCIgeTI9IjE4Ij48L2xpbmU+PC9zdmc+) center center no-repeat;
    background-size: 20px 20px; /* Adjust icon size within the new tap area */
    text-indent: -9999px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.lb-data .lb-close:hover {
    opacity: 1;
}

@media (max-width: 767px) {
  .lb-image {
    max-height: 80vh !important; /* Prevent lightbox image from being too tall */
    max-width: 90vw !important;
    border-radius: 4px; /* Optional: slight rounding for the lightbox image itself */
  }
  .lb-dataContainer {
    width: 90vw !important;
    margin-left: auto;
    margin-right: auto;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .lb-outerContainer {
    width: 90vw !important; /* Ensure outer container also scales */
  }
}

/* Additional styling for gallery nav buttons for active state */
.gallery-nav-button.active {
    font-weight: 700; /* bold */
    /* color: #4f46e5; /* text-indigo-600 */
    background-color: #e0e7ff; /* bg-indigo-100 or a light blue */
    /* border-bottom: 2px solid #4f46e5; */
}
.gallery-nav-button {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    /* text-decoration: none !important; */ /* Override underline if it comes from elsewhere */
}

/* Ensure min-height for gallery areas to prevent layout collapse when empty or loading */
#imagesGallery, #videosGallery {
    min-height: 300px; /* Adjust as needed */
}

/* Fallback thumbnail styling (optional) */
img.thumb-fallback {
    /* Example: a subtle border to indicate it's not the optimized thumbnail */
    /* border: 1px dotted #ccc; */
}