/* ==========================================================================
   BGZ content — styling for HTML written in the HTML editor.
   Wrap every rendered HTML field in <div class="bgz-content">…</div>.
   The editor preview loads this exact file, so what you see while editing
   is what the site shows: one source, no per-page copies.

   Components authors can use (toolbar inserts them):
     .bgz-callout  > .bgz-callout__label + <p>…   — highlighted box ("▤ kader")
   ========================================================================== */

.bgz-content {
    color: var(--bgz-text);
    font-family: var(--bgz-font-body);
    font-size: var(--bgz-text-base);
    line-height: var(--bgz-leading);
    overflow-wrap: break-word;
}
.bgz-content > :first-child { margin-top: 0; }
.bgz-content > :last-child  { margin-bottom: 0; }

.bgz-content h1, .bgz-content h2, .bgz-content h3 {
    margin: var(--bgz-space-8) 0 var(--bgz-space-3);
    font-family: var(--bgz-font-display); font-weight: var(--bgz-weight-black); line-height: 1.15; color: var(--bgz-text);
}
.bgz-content h1 { font-size: var(--bgz-text-2xl); }
.bgz-content h2 { font-size: var(--bgz-text-xl); }
.bgz-content h3 { font-size: var(--bgz-text-lg); }

.bgz-content p { margin: 0 0 var(--bgz-space-4); }
.bgz-content strong, .bgz-content b { font-weight: var(--bgz-weight-bold); }
.bgz-content a { color: var(--bgz-primary); text-decoration: underline; text-underline-offset: 2px; }
.bgz-content a:hover { color: var(--bgz-primary-hover); }

.bgz-content ul, .bgz-content ol { margin: 0 0 var(--bgz-space-4); padding-left: var(--bgz-space-6); }
.bgz-content li { margin-bottom: var(--bgz-space-1); }

.bgz-content blockquote {
    margin: var(--bgz-space-6) 0; padding: var(--bgz-space-2) var(--bgz-space-4);
    border-left: 3px solid var(--bgz-primary);
    color: var(--bgz-text-muted); font-style: italic;
}
.bgz-content hr { margin: var(--bgz-space-8) 0; border: none; border-top: 1px solid var(--bgz-border); }
.bgz-content img { display: block; max-width: 100%; height: auto; margin: var(--bgz-space-4) auto; border-radius: var(--bgz-radius-md); }

.bgz-content table { width: 100%; margin: var(--bgz-space-4) 0; border-collapse: collapse; font-size: var(--bgz-text-sm); }
.bgz-content th, .bgz-content td { padding: var(--bgz-space-2) var(--bgz-space-3); border: 1px solid var(--bgz-border); text-align: left; vertical-align: top; }
.bgz-content th { background: var(--bgz-primary-soft); font-weight: var(--bgz-weight-bold); }

/* ── Callout box ── */
.bgz-content .bgz-callout {
    margin: var(--bgz-space-6) 0; padding: var(--bgz-space-4) var(--bgz-space-5);
    background: var(--bgz-primary-soft);
    border-left: 3px solid var(--bgz-primary); border-radius: 0 var(--bgz-radius-md) var(--bgz-radius-md) 0;
}
.bgz-content .bgz-callout p { margin-bottom: var(--bgz-space-2); }
.bgz-content .bgz-callout p:last-child { margin-bottom: 0; }
.bgz-content .bgz-callout .bgz-callout__label {
    font-size: var(--bgz-text-xs); font-weight: var(--bgz-weight-bold);
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--bgz-primary);
}

/* Wide tables scroll instead of breaking the phone layout */
@media (max-width: 640px) {
    .bgz-content table { display: block; overflow-x: auto; }
}

/* ── Editor preview iframe only (body.bgz-content.bgz-content--preview) ── */
.bgz-content--preview { margin: 0; padding: var(--bgz-space-5); background: var(--bgz-surface); }