/* Custom styles for the course website */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    font-size: 100%; /* Base font size, controlled by JavaScript */
}

/* All elements use relative units to respect font size changes */
* {
    font-size: 1rem;
}

/* Typography improvements */
.prose {
    line-height: 1.8;
}

.prose h1 {
    @apply text-4xl font-bold text-gray-900 mb-6;
    border-bottom: 3px solid #3b82f6;
    padding-bottom: 0.75rem;
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.prose h2 {
    @apply text-2xl font-bold text-gray-800 mb-4 mt-8;
    border-left: 4px solid #3b82f6;
    padding-left: 1rem;
    background: linear-gradient(to right, #f3f4f6, transparent);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
}

.prose h3 {
    @apply text-xl font-semibold text-gray-700 mb-3 mt-6;
    border-left: 3px solid #8b5cf6;
    padding-left: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
}

.prose h4 {
    @apply text-lg font-semibold text-gray-600 mb-2 mt-4;
    border-left: 2px solid #6b7280;
    padding-left: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.25rem;
}

.prose p {
    @apply text-gray-700 mb-4;
}

.prose ul {
    @apply list-disc pl-6 mb-4;
}

.prose ol {
    @apply list-decimal pl-6 mb-4;
}

.prose li {
    @apply text-gray-700 mb-2;
}

.prose strong {
    @apply font-bold text-gray-900;
}

.prose em {
    @apply italic text-gray-700;
}

.prose code {
    @apply bg-gray-100 px-2 py-1 rounded text-sm text-gray-800;
}

.prose pre {
    @apply bg-gray-900 text-white p-4 rounded-lg overflow-x-auto mb-4;
}

.prose blockquote {
    @apply border-l-4 border-blue-500 pl-4 italic text-gray-600 mb-4;
}

/* Module card styles */
#module-list > div {
    @apply bg-white rounded-2xl shadow-lg p-6 hover:shadow-2xl transition-all duration-300 cursor-pointer border border-gray-100;
    @apply transform hover:-translate-y-1;
}

#module-list > div:hover {
    @apply ring-2 ring-blue-500/20;
}

/* Module card completed border */
#module-list > div.border-l-4 {
    @apply border-l-4 border-green-500;
}

/* Module card number badge */
#module-list > div > div:first-child > span:first-child {
    @apply bg-gradient-to-br from-blue-500 to-purple-600 text-white rounded-full w-10 h-10 flex items-center justify-center text-lg font-bold shadow-md;
}

/* Module card title */
#module-list > div > h3 {
    @apply text-lg font-bold text-gray-900 mb-3;
}

/* Module card objective */
#module-list > div > p:nth-child(3) {
    @apply text-sm text-gray-700 mb-3 font-medium leading-relaxed;
}

/* Module card labels */
#module-list > div > p:nth-child(n+4):nth-child(-n+7) {
    @apply text-xs text-gray-600 mb-2 leading-relaxed;
}

#module-list > div > p:nth-child(n+4):nth-child(-n+7) strong {
    @apply text-blue-600 font-semibold;
}

/* Module card indicators */
#module-list > div > p:nth-child(n+8) {
    @apply text-xs font-medium mt-2;
}

/* Button styles */
button {
    @apply transition-all duration-200;
}

button:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Video container */
.video-container {
    @apply relative;
}

.video-container iframe {
    @apply w-full;
}

/* Progress bar animation */
#progress-bar {
    @apply transition-all duration-500 ease-out;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .prose h1 {
        @apply text-2xl;
    }
    
    .prose h2 {
        @apply text-xl;
    }
    
    .prose h3 {
        @apply text-lg;
    }
}

/* Print styles */
@media print {
    header,
    footer,
    #progress-bar,
    #back-btn,
    #prev-btn,
    #next-btn,
    #mark-complete-btn {
        @apply hidden;
    }
    
    #module-list {
        @apply hidden;
    }
    
    #module-detail {
        @apply block;
    }
}