/* ==========================================
   Security Learning Path - Tailwind Extension
   Minimal CSS for animations and custom styles
   ========================================== */

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Modal animations */
#detail-overlay.active {
  opacity: 1;
  visibility: visible;
}
#detail-overlay.active .detail-modal {
  transform: scale(1);
}

#lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Toast animation */
#toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Card hover effects */
.path-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.path-card:hover {
  transform: translateY(-4px);
}

/* Course card */
.course-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.course-card:hover {
  transform: translateY(-2px);
}

/* Pill button active state */
.pill.active {
  background-color: #43302b !important;
  color: white !important;
}
.pill:not(.active):hover {
  background-color: #f2e8e5;
}

/* Difficulty button active state */
.diff-btn.active {
  background-color: #43302b !important;
  color: white !important;
}

/* View button active state */
.view-btn.active {
  background-color: white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* List view */
#paths-container.list-view {
  display: flex !important;
  flex-direction: column;
  gap: 1rem;
}
#paths-container.list-view .path-card {
  display: flex;
  flex-direction: row;
}
#paths-container.list-view .path-card .card-image {
  width: 200px;
  flex-shrink: 0;
}

/* Selection color */
::selection {
  background-color: #d2bab0;
  color: #43302b;
}

/* Markdown content styles */
#detail-objectives h1,
#detail-objectives h2,
#detail-objectives h3,
#detail-objectives h4 {
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: #43302b;
}
#detail-objectives h1 { font-size: 1.5rem; }
#detail-objectives h2 { font-size: 1.25rem; }
#detail-objectives h3 { font-size: 1.1rem; }
#detail-objectives ul,
#detail-objectives ol {
  margin-left: 1.5rem;
  margin-bottom: 0.75rem;
}
#detail-objectives ul { list-style-type: disc; }
#detail-objectives ol { list-style-type: decimal; }
#detail-objectives li {
  margin-bottom: 0.25rem;
}
#detail-objectives p {
  margin-bottom: 0.75rem;
}
#detail-objectives a {
  color: #977669;
  text-decoration: underline;
}
#detail-objectives a:hover {
  color: #43302b;
}
#detail-objectives code {
  background-color: #f2e8e5;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
}
#detail-objectives pre {
  background-color: #f2e8e5;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-bottom: 0.75rem;
}
#detail-objectives blockquote {
  border-left: 4px solid #d2bab0;
  padding-left: 1rem;
  margin-left: 0;
  margin-bottom: 0.75rem;
  color: #846358;
}

/* Print styles */
@media print {
  .sticky, header, #featured-courses, #toast, #lightbox-overlay {
    display: none !important;
  }
}