@layer theme, utils;

@import './typography.css';
@import './lists.css';
@import './notices.css';
/* @import './search-and-filter.css'; */

@media (width < 600px) {
  html {
    margin-top: 0 !important;
  }

  #wpadminbar {
    display: none !important;
  }
}

/* 1. Base styles */
.hover-bring-forward {
  position: relative; 
  z-index: 1;
  
  /* Smoothly return to original state when mouse leaves */
  transition: transform 0.4s ease, opacity 0.4s ease;
  
  /* IMPORTANT: Delay z-index return so it doesn't pop behind instantly on mouse-leave */
  transition-delay: 0s, 0s; 
}

/* 2. Hover State */
.hover-bring-forward:hover {
  z-index: 10; /* Instantly bring to front */
  
  /* Run the "Cross-Fade" simulation */
  animation: z-index-fade 0.4s ease forwards;
  
  /* Optional: A slight lift makes the fade feel more natural */
  transform: translate3d(0, -2px, 0) scale(1.02);
}

/* 3. The Animation */
@keyframes z-index-fade {
  0% {
    /* Start semi-transparent. 
       This lets the image BEHIND show through, creating a blend/cross-fade look. */
    opacity: 0.6; 
  }
  100% {
    /* Fade to solid */
    opacity: 1; 
  }
}