/* =========================================================
   CUSTOM STYLES
   Enhances Tailwind CSS with custom scrollbars and animations
   ========================================================= */

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f3f4f6; /* gray-100 */
}
::-webkit-scrollbar-thumb {
    background: #c084fc; /* purple-400 */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9333ea; /* purple-600 */
}

/* 
 * Rich Text Styling for Pages (Terms & Privacy)
 * Since these pages pull raw HTML from config.json, we need to style the tags.
 */
.prose h1, .prose h2, .prose h3 {
    font-weight: 800;
    color: #111827; /* gray-900 */
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.prose h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
}
.prose p {
    margin-bottom: 1.25rem;
    line-height: 1.75;
    color: #4b5563; /* gray-600 */
}
.prose ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1.25rem;
    color: #4b5563;
}
.prose a {
    color: #9333ea; /* purple-600 */
    text-decoration: underline;
}

/* Video Description Scrollbar */
.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

/* Subtle Hover Animations for Cards */
.group img {
    will-change: transform;
}