/* 
 This CSS file is used to override the existing styles of the theme.
 You can change the article headings, fonts, colors, etc.
*/
.text-red {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-yellow {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-bold {
  font-weight: bold;
}

/* Dropdown menu z-index fixes */
header nav {
  position: relative;
  z-index: 100;
  /* Remove any additional top margin or padding that might be causing the gap */
  margin-top: 0;
  padding-top: 0;
}

header .relative.group ul {
  z-index: 101;
}

/* Fix for swiper container */
.swiper-container,
.swiper-wrapper,
.swiper-slide {
  z-index: 10 !important; /* Force lower z-index for slider */
}

/* Fix the overlay positioning */
#overlay {
  z-index: 90;
  position: absolute; /* Change from relative to absolute */
  top: 0;
  left: 0;
  width: 100%;
}

/* Ensure dropdowns remain visible when hovered */
.group:hover .group-hover\:block {
  display: block !important;
}

/* Improve visibility of dropdown items */
header .relative.group ul a {
  display: block;
  width: 100%;
}

/* Fix dropdown hover gap issue */
header .relative.group ul {
  z-index: 101;
  margin-top: -5px; /* Add negative margin to eliminate the gap */
  padding-top: 5px; /* Add padding to compensate for visual appearance */
}

/* Extend hover area to prevent flickering */
header .relative.group > a::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  z-index: 102;
}

/* Add some transition effects for smoother interaction */
.group-hover\:block {
  transition: all 0.2s ease;
}