/**
 * =============================================================================
 *  NB EDITOR - STILOVI SADRZAJA
 * =============================================================================
============================================================================
 */


/* =============================================================================
   2. TIPOGRAFIJA IZ DIZAJN SISTEMA   (opcija 15)
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-lead {
    font-size: 1.12rem;
}

:is(.nb-content, .nb-html-editor) .nb-small {
    font-size: .82rem;
}


/* =============================================================================
   3. TOKENI VELICINE FONTA   (opcija 17)
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-fs-xs  { font-size: .75rem; }
:is(.nb-content, .nb-html-editor) .nb-fs-sm  { font-size: .875rem; }
:is(.nb-content, .nb-html-editor) .nb-fs-md  { font-size: 1rem; }
:is(.nb-content, .nb-html-editor) .nb-fs-lg  { font-size: 1.125rem; }
:is(.nb-content, .nb-html-editor) .nb-fs-xl  { font-size: 1.25rem; }
:is(.nb-content, .nb-html-editor) .nb-fs-2xl { font-size: 1.5rem; }
:is(.nb-content, .nb-html-editor) .nb-fs-3xl { font-size: 1.875rem; }


/* =============================================================================
   4. BLOK I INLINE STILOVI   (opcija 14)
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-note {
    border-left: 3px solid #0ea5e9;
    padding-left: 12px;
    color: #0369a1;
    font-size: .92rem;
}

:is(.nb-content, .nb-html-editor) .nb-highlight {
    background: #fef08a;
    padding: 0 3px;
    border-radius: 2px;
}

:is(.nb-content, .nb-html-editor) .nb-muted {
    color: #94a3b8;
}

:is(.nb-content, .nb-html-editor) .nb-code-inline {
    font-family: var(--nb-editor-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: .9em;
}

:is(.nb-content, .nb-html-editor) .nb-badge {
    display: inline-block;
    background: #3b82f6;
    color: #fff;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 600;
}


/* --- Callout blokovi --------------------------------------------------- */

:is(.nb-content, .nb-html-editor) .nb-callout {
    padding: 14px 16px;
    border-radius: var(--nb-editor-radius-md, 6px);
}

:is(.nb-content, .nb-html-editor) .nb-callout__title {
    margin: 0 0 4px;
    font-weight: 700;
}

:is(.nb-content, .nb-html-editor) .nb-callout--info    { background: #e0f2fe; color: #075985; }
:is(.nb-content, .nb-html-editor) .nb-callout--warning { background: #fef3c7; color: #78350f; }
:is(.nb-content, .nb-html-editor) .nb-callout--danger  { background: #fee2e2; color: #991b1b; }
:is(.nb-content, .nb-html-editor) .nb-callout--success { background: #dcfce7; color: #14532d; }


/* --- Citat -------------------------------------------------------------- */

:is(.nb-content, .nb-html-editor) .nb-quote {
    margin: 0;
    padding: 12px 18px;
    border-left: 4px solid var(--nb-editor-border-strong, #cbd5e1);
    font-style: italic;
}

:is(.nb-content, .nb-html-editor) .nb-quote__author {
    margin-top: 8px;
    font-style: normal;
    font-size: .85rem;
    color: #64748b;
}


/* --- Poziv na akciju ---------------------------------------------------- */

:is(.nb-content, .nb-html-editor) .nb-cta {
    padding: 24px;
    background: #f1f5f9;
    border-radius: var(--nb-editor-radius-lg, 8px);
    text-align: center;
}


/* =============================================================================
   5. TOKENI BOJA   (opcije 18 / 19 / 20 / 21)
   --------------------------------------------------------------------------
   Ove klase postavlja paleta dizajn sistema. Color picker umesto klase
   upisuje inline style, i to je namerno iskljucivo - nikad oba istovremeno
   (vidi extensions/textColor.js), pa nema CSS trke.
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-text-primary   { color: var(--nb-text-color-primary); }
:is(.nb-content, .nb-html-editor) .nb-text-secondary { color: var(--nb-text-color-secondary); }
:is(.nb-content, .nb-html-editor) .nb-text-success   { color: var(--nb-color-success); }
:is(.nb-content, .nb-html-editor) .nb-text-warning   { color: var(--nb-color-warning); }
:is(.nb-content, .nb-html-editor) .nb-text-danger    { color: var(--nb-color-danger); }
:is(.nb-content, .nb-html-editor) .nb-text-info      { color: var(--nb-color-info); }
:is(.nb-content, .nb-html-editor) .nb-text-dark      { color: #000000; }
:is(.nb-content, .nb-html-editor) .nb-text-light     { color: #ffffff; }

:is(.nb-content, .nb-html-editor) .nb-bg-primary   { background-color: var(--nb-bg-primary); }
:is(.nb-content, .nb-html-editor) .nb-bg-secondary { background-color: var(--nb-bg-secondary); }
:is(.nb-content, .nb-html-editor) .nb-bg-success   { background-color: var(--nb-color-success); }
:is(.nb-content, .nb-html-editor) .nb-bg-warning   { background-color: var(--nb-color-warning); }
:is(.nb-content, .nb-html-editor) .nb-bg-danger    { background-color: var(--nb-color-danger); }
:is(.nb-content, .nb-html-editor) .nb-bg-info      { background-color: var(--nb-color-info); }
:is(.nb-content, .nb-html-editor) .nb-bg-dark      { background-color: #0f172a; color: #f8fafc; }
:is(.nb-content, .nb-html-editor) .nb-bg-white     { background-color: #ffffff; }


/* =============================================================================
   6. LISTE   (opcija 8)
   --------------------------------------------------------------------------
   Vrsta oznake (disc / decimal / lower-alpha / upper-roman ...) dolazi kao
   inline `list-style-type` iz ListStyle ekstenzije - namerno, jer je to
   cisto prezentaciona CSS osobina bez semantike.
   ========================================================================== */

:is(.nb-content, .nb-html-editor) ul,
:is(.nb-content, .nb-html-editor) ol {
    padding-left: 1.6em;
}

:is(.nb-content, .nb-html-editor) li > p {
    margin: 0;
}

:is(.nb-content, .nb-html-editor) li + li {
    margin-top: .25em;
}



/* =============================================================================
   8. SLIKE   (opcija 11)
   --------------------------------------------------------------------------
   Izlazni markup:
     <figure data-nb-image class="nb-img nb-img--rounded" style="text-align:center">
       <a href="..."><img src alt></a>
       <figcaption>Opis</figcaption>
     </figure>
   Poravnanje dolazi kao inline text-align iz NbImage node-a.
   ========================================================================== */


:is(.nb-content, .nb-html-editor) .nb-img figcaption {
    margin-top: 6px;
    font-size: .82rem;
    color: #64748b;
    text-align: center;
}

:is(.nb-content, .nb-html-editor) .nb-img--rounded img  { border-radius: var(--nb-border-radius-l, 8px); }
:is(.nb-content, .nb-html-editor) .nb-img--circle img   { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
:is(.nb-content, .nb-html-editor) .nb-img--bordered img { border: 1px solid var(--nb-editor-border-strong, #cbd5e1); padding: 4px; background: #fff; }
:is(.nb-content, .nb-html-editor) .nb-img--shadow img   { box-shadow: 0 8px 20px -6px rgba(15, 23, 42, .3); }
:is(.nb-content, .nb-html-editor) .nb-img--full img     { width: 100%; }


/* =============================================================================
   9. PRELOM STRANE   (opcija 12)
   --------------------------------------------------------------------------
   IZMENA U ODNOSU NA PRVU VERZIJU:
   isprekidana linija i oznaka "Prelom strane" su prebacene u
   content-editor.css. Bile su u deljenom fajlu, pa se ta oznaka
   prikazivala i posetiocima na public sajtu.
   Ovde ostaje samo ono sto je zaista deljeno: sam prelom u stampi.
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-page-break {
    height: 0;
    margin: 0;
    border: 0;
}

@media print {
    :is(.nb-content, .nb-html-editor) .nb-page-break {
        break-after: page;
        page-break-after: always;
    }
}


/* =============================================================================
   10. VIDEO   (opcija 25)
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-video {
    position: relative;
    margin: 1.2em 0;
    background: #000;
    border-radius: var(--nb-editor-radius-md, 6px);
    overflow: hidden;
}

:is(.nb-content, .nb-html-editor) .nb-video--16x9 { aspect-ratio: 16 / 9; }
:is(.nb-content, .nb-html-editor) .nb-video--4x3  { aspect-ratio: 4 / 3; }

:is(.nb-content, .nb-html-editor) .nb-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* =============================================================================
   11. EMBED   (opcija 26)
   --------------------------------------------------------------------------
   U sadrzaju je samo <div data-nb-embed="instagram" data-url="...">
   sa <a> fallback-om unutra. Pravi embed hidrira frontend - editor namerno
   ne izvrsava skripte trecih strana.
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-embed {
    margin: 1.2em 0;
}


/* =============================================================================
   12. STATICKI BLOKOVI - REFERENCA   (opcije 23 / 24)
   --------------------------------------------------------------------------
   PAZI: kada je blok ubacen kao referenca, u sacuvanom HTML-u je PRAZAN div:
       <div data-nb-static-block="hero-split" data-nb-category="html"></div>
   Backend/frontend mora da ga zameni markup-om iz config/static-blocks.js.
   Ako to nije implementirano, na public-u se nista ne prikaze.
   Blokovi ubaceni kao "sadrzaj" ne zavise od ovoga - oni su pravi HTML.
   ========================================================================== */

:is(.nb-content, .nb-html-editor) .nb-static-block:empty {
    display: none;
}


/* =============================================================================
   13. PRISTUPACNOST
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :is(.nb-content, .nb-html-editor) * {
        animation: none !important;
        transition: none !important;
    }
}