/* Components - Interactive Elements */

/* Code Blocks with Copy Button */
.code-block-wrapper {
    position: relative;
    margin: 2em 0;
}

.copy-btn {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 2;
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.copy-btn.copied {
    background: #10B981;
    border-color: #10B981;
}

/* Exercise Boxes */
.exercise {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-left: 4px solid var(--color-primary);
    padding: var(--space-lg);
    margin: 2em 0;
    border-radius: 8px;
}

.exercise-title {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.exercise.easy {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border-left-color: #10B981;
}

.exercise.medium {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border-left-color: #F59E0B;
}

.exercise.hard {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border-left-color: #EF4444;
}

/* Callout Boxes */
.callout {
    background: var(--color-bg-secondary);
    border-left: 4px solid var(--color-text-secondary);
    padding: var(--space-md) var(--space-lg);
    margin: 2em 0;
    border-radius: 6px;
}

.callout.info {
    background: #EFF6FF;
    border-left-color: #3B82F6;
}

.callout.warning {
    background: #FFFBEB;
    border-left-color: #F59E0B;
}

.callout.success {
    background: #F0FDF4;
    border-left-color: #10B981;
}

.callout.danger {
    background: #FEF2F2;
    border-left-color: #EF4444;
}

/* ===== Section Type Styling ===== */
.section-type {
    position: relative;
    padding-left: 1.25rem;
    margin-top: 3rem;
}

.section-type::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Quick Start - Green */
.section-quickstart {
    border-bottom-color: #10B981;
}

.section-quickstart::before {
    background: #10B981;
}

/* Core Concepts - Blue */
.section-concepts {
    border-bottom-color: #3B82F6;
}

.section-concepts::before {
    background: #3B82F6;
}

/* Deep Dive - Purple */
.section-deepdive {
    border-bottom-color: #8B5CF6;
}

.section-deepdive::before {
    background: #8B5CF6;
}

/* When Things Go Wrong - Amber */
.section-warning {
    border-bottom-color: #F59E0B;
}

.section-warning::before {
    background: #F59E0B;
}

/* Try This Now - Teal */
.section-exercise {
    border-bottom-color: #14B8A6;
}

.section-exercise::before {
    background: #14B8A6;
}

/* Chapter Checkpoint - Purple */
.section-checkpoint {
    border-bottom-color: #8B5CF6;
}

.section-checkpoint::before {
    background: #8B5CF6;
}

/* Practical Exercises - Orange */
.section-practical {
    border-bottom-color: #F97316;
}

.section-practical::before {
    background: #F97316;
}

/* Beyond Basics / Advanced */
.section-advanced {
    border-bottom-color: #EC4899;
}

.section-advanced::before {
    background: #EC4899;
}

/* Section type badge */
.section-type-badge {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    vertical-align: middle;
}

.badge-quickstart {
    background: #DCFCE7;
    color: #166534;
}

.badge-concepts {
    background: #DBEAFE;
    color: #1E40AF;
}

.badge-deepdive {
    background: #EDE9FE;
    color: #5B21B6;
}

.badge-warning {
    background: #FEF3C7;
    color: #92400E;
}

.badge-exercise {
    background: #CCFBF1;
    color: #115E59;
}

.badge-checkpoint {
    background: #EDE9FE;
    color: #5B21B6;
}

.badge-practical {
    background: #FFEDD5;
    color: #9A3412;
}

.badge-advanced {
    background: #FCE7F3;
    color: #9D174D;
}

/* Dark mode section badges */
[data-theme="dark"] .badge-quickstart { background: #14532D; color: #86EFAC; }
[data-theme="dark"] .badge-concepts { background: #1E3A5F; color: #93C5FD; }
[data-theme="dark"] .badge-deepdive { background: #2E1065; color: #C4B5FD; }
[data-theme="dark"] .badge-warning { background: #451A03; color: #FCD34D; }
[data-theme="dark"] .badge-exercise { background: #134E4A; color: #5EEAD4; }
[data-theme="dark"] .badge-checkpoint { background: #2E1065; color: #C4B5FD; }
[data-theme="dark"] .badge-practical { background: #431407; color: #FDBA74; }
[data-theme="dark"] .badge-advanced { background: #500724; color: #F9A8D4; }

/* Reading Progress Indicator */
.reading-progress {
    position: fixed;
    bottom: var(--space-lg);
    left: var(--space-lg);
    background: white;
    padding: var(--space-sm) var(--space-md);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--transition-base);
    z-index: 50;
}

.reading-progress.visible {
    opacity: 1;
    transform: translateY(0);
}

.reading-progress-text {
    color: var(--color-text-secondary);
}

.reading-progress-percent {
    font-weight: 700;
    color: var(--color-primary);
}

/* Image Captions */
figure {
    margin: 2em 0;
}

figcaption {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: var(--space-sm);
    font-style: italic;
}

/* Inline Code with Language Badge */
code[class*="language-"]::before {
    content: attr(data-language);
    position: absolute;
    top: var(--space-xs);
    left: var(--space-sm);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Smooth Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.fade-in {
    animation: fadeIn var(--transition-base);
}

.slide-in {
    animation: slideIn var(--transition-base);
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-secondary) 25%,
        var(--color-border) 50%,
        var(--color-bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: skeleton 1.5s infinite;
}

@keyframes skeleton {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Mobile-specific Components */
@media (max-width: 768px) {
    .reading-progress {
        bottom: var(--space-sm);
        left: var(--space-sm);
        right: var(--space-sm);
        text-align: center;
    }

    .exercise, .callout {
        padding: var(--space-md);
    }

    .section-type {
        padding-left: 1rem;
    }

    .section-type::before {
        width: 6px;
        height: 6px;
    }
}

/* Accessibility - Focus Indicators */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .nav-btn {
        border: 2px solid currentColor;
    }

    .book-page {
        border: 1px solid var(--color-border);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}