/* ==========================================================
   VetEntrusted Academie
   Reader Theme & Layout System – v3
   Bestand: wwwroot/css/reader-theme-layout-system.css

   Bevat uitsluitend kleurthema's en documentvarianten.
   De structurele basis blijft in reader-design-system.css.
========================================================== */

/* ==========================================================
   1. Standaard VetEntrusted thema
========================================================== */

.reader-theme-vetentrusted-teal {
    --reader-primary: #0d9488;
    --reader-primary-dark: #0f766e;
    --reader-primary-deep: #163b65;
    --reader-accent: #14b8a6;
    --reader-soft: #f0fdfa;
    --reader-surface-subtle: #f7fbfb;
    --reader-border: #d7e7e5;
    --reader-border-strong: #bdd8d5;
}

/* ==========================================================
   2. Pastelthema's
========================================================== */

.reader-theme-pastel-mint {
    --reader-primary: #34d399;
    --reader-primary-dark: #047857;
    --reader-primary-deep: #14532d;
    --reader-accent: #6ee7b7;
    --reader-soft: #ecfdf5;
    --reader-surface-subtle: #f7fff9;
    --reader-border: #bbf7d0;
    --reader-border-strong: #86efac;
}

.reader-theme-pastel-blue {
    --reader-primary: #60a5fa;
    --reader-primary-dark: #1d4ed8;
    --reader-primary-deep: #163b65;
    --reader-accent: #93c5fd;
    --reader-soft: #eff6ff;
    --reader-surface-subtle: #f8fbff;
    --reader-border: #bfdbfe;
    --reader-border-strong: #93c5fd;
}

.reader-theme-pastel-lavender {
    --reader-primary: #a78bfa;
    --reader-primary-dark: #6d28d9;
    --reader-primary-deep: #4c1d95;
    --reader-accent: #c4b5fd;
    --reader-soft: #f5f3ff;
    --reader-surface-subtle: #fbfaff;
    --reader-border: #ddd6fe;
    --reader-border-strong: #c4b5fd;
}

.reader-theme-pastel-sand {
    --reader-primary: #f59e0b;
    --reader-primary-dark: #92400e;
    --reader-primary-deep: #78350f;
    --reader-accent: #fbbf24;
    --reader-soft: #fffbeb;
    --reader-surface-subtle: #fffaf0;
    --reader-border: #fde68a;
    --reader-border-strong: #fcd34d;
}

.reader-theme-pastel-rose {
    --reader-primary: #fb7185;
    --reader-primary-dark: #be123c;
    --reader-primary-deep: #881337;
    --reader-accent: #fda4af;
    --reader-soft: #fff1f2;
    --reader-surface-subtle: #fff7f8;
    --reader-border: #fecdd3;
    --reader-border-strong: #fda4af;
}

.reader-theme-slate {
    --reader-primary: #64748b;
    --reader-primary-dark: #334155;
    --reader-primary-deep: #0f172a;
    --reader-accent: #94a3b8;
    --reader-soft: #f1f5f9;
    --reader-surface-subtle: #f8fafc;
    --reader-border: #cbd5e1;
    --reader-border-strong: #94a3b8;
}

/* ==========================================================
   3. Compatibiliteit met oudere variabelen
========================================================== */

.reader-design-document {
    --reader-theme-primary: var(--reader-primary);
    --reader-theme-primary-dark: var(--reader-primary-dark);
    --reader-theme-accent: var(--reader-accent);
    --reader-theme-soft: var(--reader-soft);
    --reader-theme-page: var(--reader-page);
    --reader-theme-border: var(--reader-border);
    --reader-theme-hero-text: #ffffff;
}

/* ==========================================================
   4. Professioneel boek / A4-reader
========================================================== */

.reader-layout-professional-book {
    --reader-content-width: 1120px;
}

.reader-layout-professional-book .reader-section-card {
    background: #ffffff;
}

.reader-layout-professional-book .reader-section-card > h2 {
    color: var(--reader-primary-dark);
}

/* ==========================================================
   5. Atlas – vier kwadranten
========================================================== */

.reader-layout-atlas-four {
    --reader-content-width: 1180px;
}

.reader-layout-atlas-four .reader-atlas-grid,
.reader-layout-atlas-four .reader-atlas-grid-four {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(0.8rem, 2vw, 1.15rem);
}

.reader-layout-atlas-four .reader-atlas-card {
    min-width: 0;
    height: 100%;
}

.reader-layout-atlas-four .reader-section-card {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.72), #ffffff 5rem);
}

.reader-layout-atlas-four figure,
.reader-layout-atlas-four img,
.reader-layout-atlas-four video,
.reader-layout-atlas-four svg {
    max-width: 100%;
}

/* ==========================================================
   6. Procedure, protocol en checklist
========================================================== */

.reader-layout-procedure-checklist .reader-section-card,
.reader-layout-procedure-steps .reader-section-card,
.reader-layout-protocol-checklist .reader-section-card {
    position: relative;
}

.reader-layout-procedure-checklist .reader-section-card > h2,
.reader-layout-procedure-steps .reader-section-card > h2,
.reader-layout-protocol-checklist .reader-section-card > h2 {
    padding-left: 0.8rem;
    border-left: 7px solid var(--reader-primary);
    border-bottom-color: transparent;
}

.reader-layout-procedure-checklist .reader-checklist,
.reader-layout-procedure-steps .reader-checklist,
.reader-layout-protocol-checklist .reader-checklist {
    background: var(--reader-soft);
    border-color: var(--reader-border-strong);
}

/* ==========================================================
   7. Naslagwerk
========================================================== */

.reader-layout-reference-manual {
    --reader-content-width: 1180px;
    font-size: 0.98rem;
}

.reader-layout-reference-manual .reader-section-card {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.reader-layout-reference-manual table {
    font-size: 0.94rem;
}

/* ==========================================================
   8. Professioneel artikel
========================================================== */

.reader-layout-article {
    --reader-content-width: 920px;
    --reader-card-padding: clamp(1.2rem, 3vw, 2rem);
}

.reader-layout-article .reader-section-card {
    border-left: 4px solid var(--reader-border-strong);
}

.reader-layout-article .reader-section-card > h2 {
    max-width: 28ch;
}

/* ==========================================================
   9. Wetenschappelijke paper
========================================================== */

.reader-layout-scientific-paper {
    --reader-content-width: 980px;
    --reader-card-padding: clamp(1rem, 2.4vw, 1.6rem);
    font-family: Georgia, "Times New Roman", serif;
}

.reader-layout-scientific-paper .reader-design-cover,
.reader-layout-scientific-paper .reader-design-meta-grid,
.reader-layout-scientific-paper .reader-section-card {
    box-shadow: none;
}

.reader-layout-scientific-paper .reader-section-card {
    border-radius: 0.45rem;
}

.reader-layout-scientific-paper table,
.reader-layout-scientific-paper figcaption,
.reader-layout-scientific-paper .reader-design-meta-grid {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.reader-layout-scientific-paper table {
    font-size: 0.92rem;
}

/* ==========================================================
   10. Klinisch case report
========================================================== */

.reader-layout-case-report {
    --reader-content-width: 1000px;
}

.reader-layout-case-report .reader-section-card {
    border-top: 5px solid var(--reader-primary);
}

.reader-layout-case-report .reader-block-warning,
.reader-layout-case-report .reader-block-clinical-tip {
    break-inside: avoid;
}

/* ==========================================================
   11. Responsive layoutregels
========================================================== */

@media (max-width: 991.98px) {
    .reader-layout-atlas-four .reader-atlas-grid,
    .reader-layout-atlas-four .reader-atlas-grid-four {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .reader-layout-professional-book,
    .reader-layout-atlas-four,
    .reader-layout-procedure-checklist,
    .reader-layout-reference-manual,
    .reader-layout-article,
    .reader-layout-scientific-paper,
    .reader-layout-case-report {
        font-size: 1rem;
    }
}

/* ==========================================================
   12. Toegankelijkheid
========================================================== */

@media (prefers-reduced-motion: reduce) {
    .reader-design-document *,
    .reader-design-document *::before,
    .reader-design-document *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    .reader-design-document,
    .reader-section-card,
    .reader-atlas-card,
    .reader-checklist {
        border: 1px solid CanvasText;
    }
}

/* ==========================================================
   13. Print/PDF
========================================================== */

@media print {
    .reader-theme-vetentrusted-teal,
    .reader-theme-pastel-mint,
    .reader-theme-pastel-blue,
    .reader-theme-pastel-lavender,
    .reader-theme-pastel-sand,
    .reader-theme-pastel-rose,
    .reader-theme-slate {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .reader-layout-atlas-four .reader-atlas-grid,
    .reader-layout-atlas-four .reader-atlas-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reader-layout-atlas-four .reader-atlas-card,
    .reader-layout-case-report .reader-block-warning,
    .reader-layout-case-report .reader-block-clinical-tip {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}