/* 
 * Theme override stylesheet - load this AFTER all other stylesheets
 * This will override conflicting Tailwind classes
 */

/* Direct text-gray-700 override */
.text-gray-700 {
  color: var(--text-color) !important;
}

/* Reset Tailwind's text-opacity variable */
.text-gray-700 {
  --tw-text-opacity: 1 !important;
}

/* Specifically target text-gray-700 when it contains text-item children */
.text-gray-700 .text-item {
  color: var(--text-color) !important;
}

.text-gray-700 .text-item:hover {
  background-color: var(--navbar-hover-bg) !important;
  color: var(--navbar-hover-text) !important;
}

.text-gray-700 .text-item:focus {
  background-color: var(--navbar-hover-bg) !important;
  color: var(--navbar-hover-text) !important;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  .text-gray-700 .text-item {
    color: var(--text-color) !important;
  }
  
  .text-gray-700 .text-item:hover {
    color: var(--link-hover-color) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  .text-gray-700 .text-item:focus {
    color: var(--link-hover-color) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  .text-gray-700 .text-item[data-selected="true"] {
    color: var(--accent-color) !important;
  }
}

/* Add these to the HTML pages with issues */
.theme-colored-text {
  color: var(--text-color) !important;
}

.theme-colored-text:hover {
  color: var(--navbar-hover-text) !important;
}

.theme-colored-text:focus {
  color: var(--navbar-hover-text) !important;
}

/* Also specifically target about-us-list */
.about-us-list .text-item {
  color: var(--text-color) !important;
}

.about-us-list .text-item:hover {
  color: var(--navbar-hover-text) !important;
  background-color: var(--navbar-hover-bg) !important;
}

.about-us-list .text-item:focus {
  color: var(--navbar-hover-text) !important;
  background-color: var(--navbar-hover-bg) !important;
}

/* Target anything with dark:text-gray-300 for dark mode */
@media (prefers-color-scheme: dark) {
  .dark\:text-gray-300 {
    color: var(--text-color) !important;
  }
}