/* 
   Trailmakers Modding Site - Custom Overrides 
   Most styling is now handled by Tailwind CSS in header.php
*/

/* Trumbowyg Editor Dark Mode Overrides */
.trumbowyg-box {
   margin-top: 0 !important;
   border-radius: 0.5rem !important;
   overflow: hidden;
}

/* Steam BBCode Styles */
.bb_h1 {
   @apply text-2xl font-bold text-white mt-6 mb-4 border-b border-white/10 pb-2;
}

.bb_h2 {
   @apply text-xl font-bold text-white mt-5 mb-3;
}

.bb_h3 {
   @apply text-lg font-semibold text-white mt-4 mb-2;
}

.bb_ul {
   @apply list-disc list-inside space-y-1 ml-4 my-4;
}

.bb_ol {
   @apply list-decimal list-inside space-y-1 ml-4 my-4;
}

.bb_table {
   @apply w-full border-collapse my-4;
}

.bb_table tr td {
   @apply border border-white/10 p-2;
}

.bb_table tr th {
   @apply border border-white/10 p-2 font-bold bg-white/5;
}

.bb_strike {
   @apply line-through opacity-60;
}

.bb_spoiler {
   @apply bg-slate-800 text-transparent hover:text-gray-300 cursor-pointer transition-colors rounded px-1;
}

/* Custom Scrollbar for specific containers */
.custom-scrollbar::-webkit-scrollbar {
   width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.1);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.3);
}

/* Animation Utilities */
@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

@keyframes slideUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.animate-fade-in {
   animation: fadeIn 0.6s ease-out forwards;
}

.animate-slide-up {
   animation: slideUp 0.6s ease-out forwards;
}

.detail-content {
   line-height: 1.7;
   color: #333;
}

.detail-content h2 {
   font-size: 1.8rem;
   margin-top: 2rem;
   margin-bottom: 1rem;
   border-bottom: 1px solid #ddd;
   padding-bottom: 0.3rem;
}

.detail-content pre {
   background-color: #1e2228;
   color: #f8f8f2;
   padding: 1em;
   border-radius: 4px;
   overflow-x: auto;
}

.detail-content code {
   background-color: #f0f2f5;
   padding: 0.2em 0.4em;
   border-radius: 3px;
   font-family: monospace;
}

.detail-content pre code {
   background: none;
   padding: 0;
}

/* Responsive styles */
/* Responsive styles - Handled by Tailwind CSS classes in respective files */