/**
 * WilMa Digital Print Theme for reveal.js
 * Optimized for PDF Export and Handouts
 *
 * By Andreas Mautz, WilMa Digital GmbH
 *
 * Usage: Add ?print-pdf to your presentation URL, then use browser Print > Save as PDF
 * Example: http://localhost:8000/slides/wilma/ki_sicher_starten.html?print-pdf
 */

/* ============================================
 * BASE PRINT STYLES
 * ============================================ */
@media print {

    /* Reset & Page Setup */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    @page {
        size: landscape;
        margin: 0;
    }

    /* Prevent page breaks in important elements */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    ul, ol, table, pre, blockquote {
        page-break-inside: avoid;
    }

    /* Each slide on a new page */
    .reveal .slides section {
        page-break-after: always;
        page-break-inside: avoid;
        position: relative;
        width: 100%;
        height: 100%;
    }

    .reveal .slides section:last-child {
        page-break-after: auto;
    }

    /* Remove reveal.js UI elements */
    .reveal .controls,
    .reveal .progress,
    .reveal .slide-number,
    .reveal .speaker-notes,
    .reveal aside.notes {
        display: none !important;
    }

    /* Optional: Show speaker notes in print
     * Uncomment the next block if you want notes visible in PDF */
    /*
    .reveal aside.notes {
      display: block !important;
      position: relative;
      margin-top: 2em;
      padding: 1em;
      background: #f3f4f6;
      border-left: 4px solid #2563eb;
      font-size: 0.7em;
      color: #374151;
      page-break-inside: avoid;
    }

    .reveal aside.notes::before {
      content: "📝 Notizen: ";
      font-weight: 700;
      color: #2563eb;
    }
    */
    /* ============================================
     * TYPOGRAPHY & COLORS
     * ============================================ */
    body {
        background: white !important;
    }

    .reveal {
        font-size: 11pt !important;
        line-height: 1.4;
        color: #111827 !important;
    }

    .reveal h1 {
        font-size: 24pt !important;
        margin-bottom: 0.5em;
        color: #2563eb !important;
        font-weight: 700;
    }

    .reveal h2 {
        font-size: 18pt !important;
        margin-bottom: 0.4em;
        color: #2563eb !important;
        font-weight: 700;
    }

    .reveal h3 {
        font-size: 14pt !important;
        margin-bottom: 0.3em;
        color: #2563eb !important;
        font-weight: 700;
    }

    .reveal h4 {
        font-size: 12pt !important;
        margin-bottom: 0.3em;
        color: #374151 !important;
        font-weight: 700;
    }

    .reveal p {
        margin: 0.5em 0;
        line-height: 1.5;
    }

    .reveal strong, .reveal b {
        color: #2563eb !important;
        font-weight: 700;
    }

    .reveal em {
        font-style: italic;
        color: #374151;
    }

    .reveal del {
        text-decoration: line-through;
        opacity: 0.6;
    }

    /* ============================================
     * LISTS
     * ============================================ */
    .reveal ul, .reveal ol {
        display: block;
        margin: 0.5em 0 0.5em 1.5em;
        text-align: left;
    }

    .reveal ul li, .reveal ol li {
        margin-bottom: 0.4em;
        line-height: 1.4;
    }

    .reveal ul ul, .reveal ol ol, .reveal ul ol, .reveal ol ul {
        margin-top: 0.3em;
        margin-bottom: 0.3em;
    }

    /* ============================================
     * LINKS
     * ============================================ */
    .reveal a {
        color: #2563eb !important;
        text-decoration: underline;
        word-break: break-word;
    }

    .reveal a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #6b7280;
        text-decoration: none;
    }

    /* Don't show URL for image links */
    .reveal a[href*=".jpg"]:after,
    .reveal a[href*=".jpeg"]:after,
    .reveal a[href*=".png"]:after,
    .reveal a[href*=".svg"]:after,
    .reveal a[href*=".gif"]:after {
        content: "";
    }

    /* ============================================
     * IMAGES & MEDIA
     * ============================================ */
    .reveal img {
        max-width: 90% !important;
        max-height: 12cm !important;
        height: auto !important;
        page-break-inside: avoid;
        border: none;
    }

    .reveal .wilma-logo {
        max-height: 3cm !important;
        height: auto !important;
        width: auto !important;
    }

    .reveal .presenter-image {
        max-height: 5cm !important;
        height: auto !important;
        border-radius: 4px;
        page-break-inside: avoid;
    }

    /* Hide background images by default (they use too much ink) */
    .reveal section[data-background-image],
    .reveal section[data-background],
    .reveal .slide-background {
        background: none !important;
        background-image: none !important;
    }

    /* Optional: Show backgrounds in print
     * Uncomment if you want background images in PDF */
    /*
    .reveal .slide-background {
      opacity: 0.1 !important;
    }
    */
    /* ============================================
     * CODE & PRE
     * ============================================ */
    .reveal code {
        background: #f3f4f6 !important;
        padding: 0.1em 0.3em;
        border-radius: 3px;
        font-size: 0.85em;
        color: #111827 !important;
        border: 1px solid #e5e7eb;
    }

    .reveal pre {
        width: 100%;
        margin: 1em 0;
        box-shadow: none;
        border: 1px solid #d1d5db;
        page-break-inside: avoid;
    }

    .reveal pre code {
        background: #f9fafb !important;
        padding: 1em;
        border-radius: 4px;
        border-left: 3px solid #2563eb;
        font-size: 8pt;
        line-height: 1.4;
        max-height: none;
        display: block;
        overflow: visible;
    }

    /* ============================================
     * TABLES
     * ============================================ */
    .reveal table {
        width: 100%;
        margin: 1em 0;
        border-collapse: collapse;
        page-break-inside: avoid;
    }

    .reveal table th {
        background: #2563eb !important;
        color: white !important;
        font-weight: 700;
        padding: 0.6em 0.8em;
        border: 1px solid #1e40af;
        text-align: left;
    }

    .reveal table td {
        padding: 0.6em 0.8em;
        border: 1px solid #d1d5db;
    }

    .reveal table tr:nth-child(even) td {
        background: #f9fafb !important;
    }

    /* ============================================
     * WILMA CUSTOM COMPONENTS
     * ============================================ */
    /* Highlight Box */
    .reveal .highlight-box {
        border-left: 4px solid #2563eb !important;
        padding: 0.8em 1em;
        background: #dbeafe !important;
        margin: 1em 0;
        border-radius: 4px;
        page-break-inside: avoid;
    }

    /* Stolperstein (Warning/Error Box) */
    .reveal .stolperstein {
        border-left: 4px solid #dc2626 !important;
        background: #fee2e2 !important;
        padding: 0.8em 1em;
        margin: 1em 0;
        border-radius: 4px;
        page-break-inside: avoid;
    }

    /* OK Box (Success Box) */
    .reveal .ok-box {
        border-left: 4px solid #16a34a !important;
        background: #dcfce7 !important;
        padding: 0.8em 1em;
        margin: 1em 0;
        border-radius: 4px;
        page-break-inside: avoid;
    }

    /* Pills/Tags */
    .reveal .pill {
        display: inline-block;
        padding: 0.2em 0.6em;
        border-radius: 999px;
        background: #dbeafe !important;
        color: #2563eb !important;
        font-size: 0.7em;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        border: 1px solid #2563eb;
    }

    /* KPI Highlighting */
    .reveal .kpi {
        font-weight: 700;
        color: #2563eb !important;
    }

    /* Two Columns Layout */
    .reveal .two-columns,
    .reveal .twocolumns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5em;
        align-items: flex-start;
        page-break-inside: avoid;
    }

    .reveal .two-columns > *,
    .reveal .twocolumns > * {
        page-break-inside: avoid;
    }

    /* Subtle Text */
    .reveal .subtle {
        color: #6b7280 !important;
        font-size: 0.85em;
    }

    /* Big Question */
    .reveal .big-question {
        font-size: 2em !important;
        font-weight: 700;
        color: #2563eb !important;
        text-align: center;
        margin: 1em 0;
    }

    /* Centered Content */
    .reveal .centered {
        text-align: center;
    }

    /* Lists with special styling */
    .reveal .agenda-list li,
    .reveal .checklist li {
        margin-bottom: 0.5em;
    }

    /* ============================================
     * FRAGMENTS (Show all in print)
     * ============================================ */
    .reveal .fragment {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ============================================
     * PAGE HEADER & FOOTER
     * ============================================ */
    /* Add WilMa logo to bottom right of each page */
    .reveal .slides section::after {
        content: "";
        position: absolute;
        bottom: 1cm;
        right: 1cm;
        width: 4cm;
        height: 1cm;
        background: url('../../images/wilma/wilma-logo.svg') no-repeat right center;
        background-size: contain;
        opacity: 0.5;
        z-index: 1000;
    }

    /* Add page numbers to bottom left */
    .reveal .slides section::before {
        counter-increment: page;
        content: "Seite " counter(page);
        position: absolute;
        bottom: 1cm;
        left: 1cm;
        font-size: 9pt;
        color: #9ca3af;
        z-index: 1000;
    }

    /* Initialize page counter */
    .reveal .slides {
        counter-reset: page;
    }

    /* Don't show page number on first (title) slide */
    .reveal .slides section:first-child::before {
        content: none;
    }

    /* ============================================
     * SPECIAL SLIDES
     * ============================================ */
    /* Title Slide */
    .reveal section.title-slide h1,
    .reveal .slides section:first-child h1 {
        font-size: 28pt !important;
        margin-bottom: 0.3em;
        line-height: 1.2;
    }

    .reveal section.title-slide h3,
    .reveal .slides section:first-child h3 {
        font-size: 16pt !important;
        color: #6b7280 !important;
        font-weight: 400;
    }

    /* ============================================
     * UTILITY CLASSES
     * ============================================ */
    /* Force page break before element */
    .page-break-before {
        page-break-before: always;
    }

    /* Force page break after element */
    .page-break-after {
        page-break-after: always;
    }

    /* Prevent page break inside element */
    .no-page-break {
        page-break-inside: avoid;
    }

    /* Hide in print */
    .no-print {
        display: none !important;
    }

    /* Show only in print */
    .print-only {
        display: block !important;
    }

    /* ============================================
     * RESPONSIVE ADJUSTMENTS
     * ============================================ */
    @page :first {
        margin-top: 1cm;
    }

    /* Optimize font sizes for better readability */
    .reveal .slides section {
        font-size: 11pt;
    }

    /* Ensure content doesn't overflow */
    .reveal .slides section > * {
        max-width: 100%;
    }

    /* ============================================
     * ACCESSIBILITY & READABILITY
     * ============================================ */
    /* Increase contrast for better readability */
    .reveal .slides {
        background: white !important;
    }

    /* Ensure sufficient spacing */
    .reveal h1, .reveal h2, .reveal h3 {
        margin-top: 0.8em;
        margin-bottom: 0.4em;
    }

    .reveal h1:first-child,
    .reveal h2:first-child,
    .reveal h3:first-child {
        margin-top: 0;
    }
}

/* ============================================
 * END OF PRINT STYLES
 * ============================================ */