@tailwind base;
@tailwind components;
@tailwind utilities;
@import "https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css";
/* Legacy Trix CSS removed - now using Lexxy */

/* Custom styles for full-width header */
.full-width-header {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  margin-bottom: 0;
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.fade-out {
  animation: fadeOut 0.5s forwards;
}

.fade-in {
  animation: fadeIn 0.5s forwards;
}

/* Featured card styles */
.featured-card {
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.featured-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Drawer shadow - only show when drawer is visible (not translated) */
[id^="drawer-"]:not(.translate-x-full) {
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

/* Drawer responsive width using CSS custom properties */
@media (min-width: 640px) {
  [id^="drawer-"] {
    width: var(--drawer-width, 20rem);
  }
}

/* Tab component styles */
.tab-content.hidden { 
  display: none; 
}

.tab-button.active {
  background: linear-gradient(to right, #3CA55C, #B5AC49);
  color: white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* CRITICAL: Lexxy list styling - must come LAST to override Tailwind + Flowbite resets */
/* Using higher specificity to beat Flowbite */
div.lexxy-content ol,
div.lexxy-content ul,
.lexxy-content div ol,
.lexxy-content div ul,
lexxy-editor ol,
lexxy-editor ul {
  list-style-type: revert !important;
  list-style-position: outside !important;
  padding-inline-start: 40px !important;
  margin-block-start: 1em !important;
  margin-block-end: 1em !important;
}

div.lexxy-content li,
.lexxy-content div li,
lexxy-editor li {
  display: list-item !important;
}

/* Also target when inside prose */
.prose div.lexxy-content ol,
.prose div.lexxy-content ul {
  list-style-type: revert !important;
  padding-inline-start: 40px !important;
}

/* Scroll reveal animations */
@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes revealScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.reveal-item {
  opacity: 0;
  animation: none;
}

.reveal-item.reveal-visible {
  animation: revealUp 0.6s ease-out forwards;
}

.reveal-item.reveal-scale {
  animation: revealScale 0.6s ease-out forwards;
}

/* Stagger delays for sequential reveal */
.reveal-item:nth-child(1) { animation-delay: 0.05s; }
.reveal-item:nth-child(2) { animation-delay: 0.1s; }
.reveal-item:nth-child(3) { animation-delay: 0.15s; }
.reveal-item:nth-child(4) { animation-delay: 0.2s; }
.reveal-item:nth-child(5) { animation-delay: 0.25s; }
.reveal-item:nth-child(6) { animation-delay: 0.3s; }
.reveal-item:nth-child(7) { animation-delay: 0.35s; }
.reveal-item:nth-child(8) { animation-delay: 0.4s; }
.reveal-item:nth-child(9) { animation-delay: 0.45s; }

/* Pulse animation for status badges */
@keyframes pulse-soft {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-pulse-soft {
  animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}