/* vorugreind-demo.css — public Vörugreind demo (sýnidæmi): banner + overview page.
   Detail review UI + card visuals come from vorugreind.css / styles.css (single source). */

/* ── Demo banner ──
   On the detail page it is the first flex child of .vorugreind-page
   (position:fixed flex column), so it just takes its own height and the
   review grid below fills the rest. On the overview page it spans the top. */
.vg-demo-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 24px;
    background: var(--blue-brand, #002C6C);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}
.vg-demo-banner strong { font-weight: 700; }

/* ── Overview (yfirlit) page ── */
.vg-demo-yfirlit {
    margin: 0;
    min-height: 100vh;
    background: var(--light-grey, #F3F4F6);
    color: var(--text-color, #1F2937);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
}

.vg-demo-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}
.vg-demo-head { margin-bottom: 24px; }
.vg-demo-head h1 {
    font-family: var(--font-display, inherit);
    color: var(--blue-brand, #002C6C);
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 8px;
}
.vg-demo-head p {
    color: var(--text-muted, #6B7280);
    font-size: 15px;
    max-width: 640px;
    margin: 0;
}