@tailwind base;
@tailwind components;
@tailwind utilities;

/* Force hidden/dark:hidden to override Font Awesome's display:inline-block on icon elements only.
   Counter-rule restores dark:inline icons (e.g. sun icon) when in dark mode. */
i.hidden {
  display: none !important;
}
.dark i.dark\:hidden {
  display: none !important;
}
.dark i.dark\:inline {
  display: inline !important;
}

@layer components {
  .transition-theme {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .logo-color-custom {
    color: var(--logo-color);
  }
  .dark .logo-color-custom {
    color: var(--logo-color-dark, #fff);
  }
}