/* PDF Export Styles
   Reusable CSS for the PDF download button and print-to-PDF output.
   Override CSS custom properties to theme for different presentations. */

/* ========== Progress Overlay (shown during one-click canvas export) ========== */
#pdf-progress-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 22, 40, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', -apple-system, sans-serif;
}
#pdf-progress-overlay.visible {
    display: flex;
}
#pdf-progress-overlay .pdf-progress-card {
    background: #fff;
    color: #0a1628;
    padding: 32px 40px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    min-width: 320px;
    max-width: 420px;
    text-align: center;
}
#pdf-progress-overlay .pdf-progress-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    border: 3px solid rgba(10, 22, 40, 0.15);
    border-top-color: #61F393;
    border-radius: 50%;
    animation: pdf-spin 0.8s linear infinite;
}
@keyframes pdf-spin {
    to { transform: rotate(360deg); }
}
#pdf-progress-overlay .pdf-progress-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 6px;
}
#pdf-progress-overlay .pdf-progress-detail {
    font-size: 0.85rem;
    color: rgba(10, 22, 40, 0.6);
    margin-bottom: 16px;
}
#pdf-progress-overlay .pdf-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(10, 22, 40, 0.1);
    border-radius: 3px;
    overflow: hidden;
}
#pdf-progress-overlay .pdf-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #61F393, #3ccf76);
    transition: width 0.3s ease;
}

/* ========== Download Button ========== */
#pdf-download-btn {
    background: var(--pdf-btn-bg, rgba(10, 22, 40, 0.85));
    color: var(--pdf-btn-text, white);
    border: 1px solid var(--pdf-btn-border, rgba(255, 255, 255, 0.15));
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
#pdf-download-btn:hover {
    background: var(--pdf-btn-bg-hover, rgba(97, 243, 147, 0.9));
    color: var(--pdf-btn-text-hover, #0a1628);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
#pdf-download-btn:active {
    transform: translateY(0);
}
#pdf-download-btn svg {
    width: 16px;
    height: 16px;
    fill: var(--narration-accent, #61F393);
}
#pdf-download-btn.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ========== Print / PDF Output ========== */
@media print {
    @page {
        size: landscape;
        margin: 0;
    }

    /* Force backgrounds and colors to print */
    * {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Disable scroll-snap and let content flow naturally */
    html, body {
        overflow: visible !important;
        height: auto !important;
        scroll-snap-type: none !important;
    }

    /* Each slide = one page */
    .slide {
        height: 100vh !important;
        break-after: page;
        overflow: hidden !important;
        break-inside: avoid;
    }
    .slide:last-of-type {
        break-after: auto;
    }

    /* Hide all UI chrome */
    #slide-indicator,
    #nav-hint,
    .version-badge,
    #bottom-toolbar,
    #nav-menu,
    #presentation-controls,
    #presentation-progress,
    #narration-panel,
    #subtitles,
    #autoplay-overlay,
    #narration-toggle,
    #start-presentation-btn,
    #pdf-download-btn,
    #pdf-progress-overlay,
    #subtitle-bar,
    audio {
        display: none !important;
    }

    /* Freeze all animations — instant final state */
    *, *::before, *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        animation-fill-mode: forwards !important;
        transition: none !important;
    }

    /* Universal safety net: force visibility on ALL elements inside slides.
       With animation-duration: 0s and animation-fill-mode: forwards above,
       most animations resolve to their final state. But elements whose
       keyframes start at opacity: 0 (like fade-in-up with a delay) may
       not resolve reliably across browsers. This universal rule catches
       everything without needing a hardcoded class list. */
    .slide *,
    .slide *::before,
    .slide *::after {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Preserve intentionally hidden elements */
    .slide [aria-hidden="true"] {
        opacity: 0 !important;
    }
}