/* ===== Voorbeeldrapport page ===== */
/* Standalone landing-aesthetic page for /voorbeeld.
   Hosts a real-rendered demo card with prominent CTAs back to home. */

body.is-voorbeeld {
    background: var(--vh-bg, #FAFAF7);
    color: var(--vh-text, #1c1917);
    font-family: var(--vh-font-body);
    overflow-x: hidden;
}

/* ── Eén stille regel boven het rapport — verder niets ───────
   Geen banner, geen border, geen icon. Alleen "Voorbeeld" + link. */
.voorbeeld-hint {
    max-width: 920px;
    margin: 14px auto 0;
    padding: 0 16px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: .78rem;
    color: var(--vh-text-tertiary, #6e6963);
    letter-spacing: .02em;
}
.voorbeeld-hint span {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    font-size: .68rem;
}
.voorbeeld-hint a {
    margin-left: auto;
    color: var(--vh-text-secondary, #6b6560);
    text-decoration: none;
    border-bottom: 1px solid var(--vh-border, #e7e5e0);
    padding-bottom: 1px;
    transition: color .15s ease, border-color .15s ease;
}
.voorbeeld-hint a:hover {
    color: var(--vh-text, #1c1917);
    border-color: var(--vh-text-muted, #6b6560);
    text-decoration: none;
}

/* ── Card section ───────────────────────────────────────────── */
.voorbeeld-card-section {
    padding: 0 1rem clamp(3rem, 6vw, 4.5rem);
}
.voorbeeld-card-inner {
    max-width: 920px;
    margin: 0 auto;
}

/* App shell unwrap on voorbeeld page — page scrolls naturally, no flex-1 lock */
body.is-voorbeeld,
body.is-voorbeeld html {
    overflow-y: auto !important;
    height: auto !important;
}
body.is-voorbeeld .app,
body.is-voorbeeld .app.voorbeeld-app {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    width: 100% !important;
}
body.is-voorbeeld .app .content,
body.is-voorbeeld .app.voorbeeld-app .content {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    flex: none !important;
}
body.is-voorbeeld .results-view {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}
body.is-voorbeeld .results-flow {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Hide card actions (save/share/print/copy/mail) on voorbeeld — read-only sample */
body.is-voorbeeld .card-actions-float { display: none !important; }
body.is-voorbeeld .card-save-heart    { display: none !important; }
body.is-voorbeeld .card-save-mobile   { display: none !important; }
body.is-voorbeeld .card-feedback-row  { display: none !important; }
body.is-voorbeeld .card-report-link   { display: none !important; }

/* Hide credit-banner / sidebar / app-shell artifacts that may bleed in */
body.is-voorbeeld .credit-banner,
body.is-voorbeeld .sidebar,
body.is-voorbeeld .sidebar-overlay,
body.is-voorbeeld .sb-open-btn,
body.is-voorbeeld #vhDemoBanner { display: none !important; }

/* Slight card lift to feel "premium" */
body.is-voorbeeld .result-card {
    box-shadow:
      0 1px 2px rgba(0,0,0,.04),
      0 8px 28px rgba(0,0,0,.06),
      0 24px 60px -20px rgba(var(--vh-primary-rgb, 242,201,76), .14);
}

/* Centreer card-titel + subtitle zodat ze met score-ring + badge in lijn liggen */
body.is-voorbeeld .result-card .card-title,
body.is-voorbeeld .result-card .card-subtitle {
    text-align: center;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .voorbeeld-hero { padding-top: 3rem; padding-bottom: 1.75rem; }
    .voorbeeld-hero h1 { margin-top: .85rem; }
    .voorbeeld-hero-actions { flex-direction: column; }
    .voorbeeld-hero-actions a { width: 100%; }
    .voorbeeld-card-section { padding: .5rem .75rem 3rem; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .voorbeeld-cta-primary,
    .voorbeeld-cta-secondary,
    .voorbeeld-cta-primary svg { transition: none !important; }
}