/* ============================================================
   NFB PAGE.CSS
   Description: Core styling for all public-facing pages
   Scope: /platform/site/pages/*
   Author: NoFakeBiz
   ============================================================
   Sections:
   0. Global Reset
   1. Page Layout
   2. Page Titles & Subtitles
   3. Text Styling (paragraphs, lists, links)
   4. Block Elements (quote, callout, info, note, verse, refs, dropcap)
   5. Responsive Adjustments
   ============================================================ */

   /* =========================================================
   🌍 GLOBAL BASE (moved from global.css to page.css)
   ========================================================= */

/* 0) Global Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base html & body */
html {
  font-size: 16px; /* REM base: 1rem = 16px */
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color: #21272a;
  background-color: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Paragraphs and text */
p {
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* Links (excluding buttons) */
a:not(.btn):not(.btn-glossy) {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}
a:not(.btn):not(.btn-glossy):hover {
  color: #ff6600;
}

/* Media */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Lists */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Forms */
input, textarea, select, button {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

/* Code blocks */
code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size: 0.95em;
}
pre {
  padding: 12px;
  background: #f7f7f8;
  border-radius: 8px;
  overflow: auto;
}

/* Selection + focus */
::selection {
  background: #ffe4cc;
  color: #21272a;
}
:focus-visible {
  outline: 2px solid #ff6600;
  outline-offset: 2px;
}

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

/* 1) Page layout */
.page-section {
  border: 1px solid #cae0e7;
  border-radius: 5px;
  margin: 40px auto;
  padding: 20px;
  box-shadow: 0 0 7px rgba(62, 131, 158, 0.3);
  background: #fff;
  text-align: justify;
  max-width: 1000px;
}

.page-content {
  line-height: 1.7;
  color: #1f2937;
  font-size: 16px;
}

/* Inner marketing/editor shell card (Advertise, About, Digital You, …) */
.page-section .page-content > .page-section {
  margin: 1.25rem auto 1.5rem;
  padding: 1.75rem 1.5rem 2rem;
  max-width: 100%;
  border: 1px solid #d8e4ec;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(62, 131, 158, 0.12);
  background: #fff;
  text-align: left;
}

.page-section .page-content > .page-section .nfb-shell-lead {
  text-align: center;
  color: #64748b;
  font-size: 1.05rem;
  max-width: 42rem;
  margin: 0 auto 1.5rem;
  line-height: 1.65;
}

/* Match Advertise-style title accent: short red bar under inner page title */
.page-section .page-content > .page-section .page-title.auto-title::after {
  width: 48px;
  height: 2px;
  margin: 0.65rem auto 1.25rem;
  background: #d23c3c;
  opacity: 1;
  border-radius: 1px;
}

/* Indent body text right under content H1 headings (not page titles) */
.page-section .page-content h1:not(.page-title) + p {
  margin-left: 1.25rem;
}



/* ==========================================================
   ✒️ DROP CAP SYSTEM — FINAL VERSION (NFB EDITOR STANDARD)
   ========================================================== */

/* 📜 Paragraph container */
.dropcap-paragraph {
  text-align: justify;
  text-indent: 0;
  line-height: 1.8;
  font-size: 1.05rem;
  font-family: "Segoe UI", Arial, sans-serif;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  color: #222;
}

/* 🅰️ Dropcap letter */
.dropcap-paragraph .dropcap {
  float: left;
  font-size: 3.6rem; /* 🔹 blago smanjeno radi balansa */
  line-height: 0.85; /* 🔹 malo “ušuškano” u tekst */
  margin-right: 0.4rem;
  margin-top: 0.2rem; /* 🔹 lagano spušteno za elegantan poravnaj */
  color: #ff2600; /* brand orange */
  font-family: Georgia, serif;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
  opacity: 0; /* 🔹 inicijalno skriveno radi animacije */
  transform: translateY(-2px);
  animation: dropcapFade 0.4s ease forwards; /* 🔹 suptilan fade-in */
}

/* 💡 Dropcap fade-in animacija */
@keyframes dropcapFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 🔠 First word style */
.dropcap-paragraph strong {
  text-transform: uppercase;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.5px;
}

/* 🩶 Short-start correction (1–3 slova) */
.dropcap-paragraph.short-start .dropcap {
  font-size: 3.3rem;
  margin-right: 0.25rem;
}


/* ============================================
   🧭 START & END SUMMARY (Elegant Label Style)
   ============================================ */

/* Shared Base */
.section-start-summary,
.section-end-summary {
  border-radius: 8px;
  padding: 1.25rem 1.5rem 1.4rem;
  margin: 2rem auto;
  max-width: 720px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  font-style: italic;
  color: #1e293b;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* 🌅 START SUMMARY */
.section-start-summary {
  background: #f4faff;
  border-left: 4px solid #007acc;
}

.section-start-summary:hover {
  background: #f8fbfe;
  box-shadow: 0 2px 8px rgba(0, 102, 153, 0.15);
}

/* 🌇 END SUMMARY */
.section-end-summary {
  background: #fff5f5;
  border-left: 4px solid #d23c3c;
}

.section-end-summary:hover {
  background: #fff8f8;
  box-shadow: 0 2px 8px rgba(210, 60, 60, 0.15);
}

/* 🏷️ Summary Label Title */
.section-start-summary .summary-label,
.section-end-summary .summary-label {
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: #004d80;
}

.section-end-summary .summary-label {
  color: #a72222;
}

/* ✳️ Small arrow accent */
.summary-label::after {
  content: " ↩";
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0.8;
}

.section-start-summary ul,
.section-end-summary ul {
  padding-left: 1.4rem;
  margin: 0.5rem 0;
}

.section-start-summary ul li,
.section-end-summary ul li {
  margin-bottom: 0.5rem;
  list-style-type: disc;
}

/* Blagi razmak između naslova i teksta */
.summary-label {
  margin-bottom: 0.55rem;
}

/* Lagano uvlačenje svega osim labela */
.section-start-summary > *:not(.summary-label),
.section-end-summary > *:not(.summary-label) {
  display: block;
  margin-left: 0.8rem;
}


/* 💡 Responsive */
@media (max-width: 768px) {
  .section-start-summary,
  .section-end-summary {
    font-size: 1rem;
    padding: 1rem 1.25rem;
  }
}



/* 🔹 KEY POINT NODE */
.keypoint-node {
  background: #f4faff;
  border-left: 4px solid #007acc;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 2rem auto;
  max-width: 720px;
  font-family: "Segoe UI", Arial, sans-serif;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.keypoint-node:hover {
  background: #f8fbfe;
  box-shadow: 0 2px 8px rgba(0, 102, 153, 0.12);
}

.keypoint-node .keypoint-title {
  font-weight: 700;
  text-transform: uppercase;
  color: #004d80;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
  letter-spacing: 0.5px;
}

.keypoint-node ul {
  margin: 0.4rem 0;
  padding-left: 1.4rem;
  list-style-type: "▸ ";
  color: #1e293b;
  line-height: 1.7;
}

.keypoint-node ul li {
  margin-bottom: 0.4rem;
}

/* 🧠 EXPLAINER NODE */
.explainer-node {
  background: #f9fafb;
  border-left: 4px solid #7b7b7b;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 2rem auto;
  max-width: 720px;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #1e293b;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.explainer-node:hover {
  background: #fcfdfd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.explainer-node .explainer-title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: #444;
  margin-bottom: 0.6rem;
  letter-spacing: 0.4px;
}

.explainer-node p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
  font-style: italic;
  color: #333;
}

/* ============================================
   💬 INLINE EXPLAINER / KEYPOINT (Mini Bubble)
   ============================================ */
/* ============================================
   💬 INLINE EXPLAINER (Definitive Version)
   ============================================ */
/* ============================================
   💬 INLINE EXPLAINER (Fluid Text Version)
   ============================================ */
.explainer-inline {
  display: inline;                     /* 👈 umjesto inline-block */
  background: #f4faff;
  border-left: 3px solid #007acc;
  border-radius: 4px;
  padding: 0.15rem 0.5rem;             /* manji padding da se stapa sa tekstom */
  margin: 0 0.25rem;
  font-style: italic;
  color: #1e293b;
  font-size: 0.95rem;
  line-height: 1.6;
  box-shadow: inset 0 0 0 9999px rgba(240, 249, 255, 0.8); /* vizualni efekat pozadine bez “bloka” */
  transition: all 0.25s ease;
  white-space: normal;                 /* dozvoljava prelamanje */
}

.explainer-inline:hover {
  background: #f9fcff;
  border-left-color: #0094ff;
}




/* ============================================
   ✒️ QUOTE CLASSIC — Text-Based Version (Final)
   ============================================ */

.quote-classic {
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.8;
  color: #222;
  max-width: 720px;
  margin: 2.5rem auto;
  padding: 0;
  background: none;
  border: none;
  position: relative;
}

/* Sam tekst */
.quote-classic p {
  quotes: none;
  margin: 0;
}

/* 👤 Autor */
.quote-classic cite {
  display: block;
  margin-top: 0.6rem;
  text-align: right;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 400;
  color: #555;
  letter-spacing: 0.3px;
}

/* mala crtica ispred autora */
.quote-classic cite::before {
  content: "— ";
  color: #999;
}

/* ============================================
   📰 PULLQUOTES — SIMPLE / MODERN / HIGHLIGHT
   ============================================ */

/* 🩶 BASE */
.pullquote {
  font-family: Georgia, serif;
  font-style: italic;
  line-height: 1.7;
  font-size: 1.15rem;
  color: #333;
  margin: 2rem auto;
  max-width: 720px;
}

.pullquote cite {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  font-style: normal;
  color: #666;
  text-align: right;
}

/* 🩶 SIMPLE — poboljšana (magazinska) verzija */
.pullquote-simple {
  font-style: italic;
  text-align: center;
  color: #444;
}

/* 🩵 MODERN — centralni blok */
.pullquote-modern {
  position: relative;
  text-align: center;
  color: #006d77;
  font-size: 1.25rem;
  font-weight: 500;
  padding: 1rem 1.5rem;
  margin: 2.5rem auto;
}

.pullquote-modern::before,
.pullquote-modern::after {
  content: "";
  display: block;
  height: 2px;
  width: 60%;
  margin: 0.8rem auto;
  background: linear-gradient(to right, transparent, #b71c1c, transparent);
}

/* 🩷 HIGHLIGHT — featured / emotional tone */
.pullquote-highlight {
  font-size: 1.3rem;
  font-style: italic;
  color: #004b4f;
  text-align: center;
  background: linear-gradient(to bottom right, #f9ffff, #f1f8fa);
  border-left: 5px solid #00a6a6;
  border-right: 5px solid #00a6a6;
  padding: 1.3rem 2rem;
  border-radius: 10px;
  margin: 2.5rem auto;
  box-shadow: 0 3px 10px rgba(0, 90, 90, 0.08);
}

/* 🪶 FLOAT VERSIONS (inline feature) */
.pullquote-left {
  float: left;
  width: 38%;
  margin: 1rem 1.5rem 1rem 0;
  color: #b71c1c;
  font-weight: 600;
  text-align: left;
  padding-left: 0.8rem;
  border-left: 3px solid #b71c1c;
  font-style: italic;
}

.pullquote-right {
  float: right;
  width: 38%;
  margin: 1rem 0 1rem 1.5rem;
  color: #b71c1c;
  font-weight: 600;
  text-align: right;
  padding-right: 0.8rem;
  border-right: 3px solid #b71c1c;
  font-style: italic;
}

/* Auto clear fix */
.pullquote-left::after,
.pullquote-right::after {
  content: "";
  display: block;
  clear: both;
}

/* 📚 VERSE (poezija / stihovi) */
/* 🎵 VERSE (Simple version) */
.verse.simple {
  max-width: 640px;
  margin: 2rem auto;
  text-align: center;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #444;
  padding: 0.5rem 1rem;
}

/* Naslov (ako se koristi) */
.verse.simple .verse-title {
  font-size: 1.1rem;
  font-weight: 600;
  font-style: normal;
  color: #333;
  margin-bottom: 0.5rem;
}

/* Stihovi */
.verse.simple p {
  margin: 0.4rem 0;
}

/* Autor (opcionalno) */
.verse.simple cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-style: normal;
  color: #666;
  text-align: right;
}

/* Verse Decorated */
.verse.decorated {
  max-width: 650px;
  margin: 2.5rem auto;
  text-align: center;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
  position: relative;
  padding: 1.5rem 0;
}

/* Linije iznad i ispod */
.verse.decorated::before,
.verse.decorated::after {
  content: "";
  display: block;
  height: 1px;
  width: 80%;
  margin: 1rem auto;
  background: linear-gradient(
    to right,
    transparent,
    rgba(183, 28, 28, 0.6),
    transparent
  );
}

.verse.decorated::before {
  margin-bottom: 1.5rem;
}

.verse.decorated::after {
  margin-top: 1.5rem;
}

/* 🩶 Naslov */
.verse-title {
  font-size: 1.2rem;
  font-weight: bold;
  font-style: normal;
  margin-bottom: 1rem;
  color: #444;
  text-align: center;
}

/* 📜 Redovi stihova */
.verse p {
  margin: 0.5rem 0;
}

/* ✍️ Autor */
.verse cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.9rem;
  font-style: normal;
  text-align: right;
  color: #a33;
  letter-spacing: 0.3px;
}

/* 📚 CALLOUTS & INFO BLOCKS */

/* ==========================================
   💬 INLINE CALLOUTS (unutar paragrafa)
   ========================================== */

/* 🧱 Osnova */
.callout-inline {
  display: inline-block;
  padding: 0.15rem 0.55rem 0.2rem;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0.25rem;
  vertical-align: baseline;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.callout-inline:hover {
  transform: scale(1.03);
}

/* 💡 Tip */
.callout-inline.callout-tip {
  background: #e8f7ef;
  color: #14532d;
}

/* ℹ️ Info */
.callout-inline.callout-info {
  background: #e7f3ff;
  color: #0c4a6e;
}

/* ⚠️ Warning */
.callout-inline.callout-warning {
  background: #fff7e6;
  color: #7a4c00;
}

/* ❗ Important */
.callout-inline.callout-important {
  background: #fef2f2;
  color: #7f1d1d;
}

/* ✳️ Highlight */
.callout-inline.callout-highlight {
  background: #fffbe6;
  color: #92400e;
}

/* 💡 Dodatni hover efekat za highlight */
.callout-inline.callout-highlight:hover {
  background: #fff3c4;
}



/* ======================================================
   🧱 CALLOUT & INFO BLOCKS — v2.0 (Complete Collection)
   ====================================================== */

/* 🧩 BASE STYLE */
/* 🎯 Compact & balanced callout height */
.callout {
  border-left: 4px solid #ccc;
  padding: 0.7rem 1rem; /* ⬅️ manji padding */
  margin: 1.25rem 0; /* ⬅️ manji vertikalni razmak između blokova */
  border-radius: 6px;
  background: #f9f9f9;
  max-width: 760px;
  font-size: 1.02rem;
  line-height: 1.55;
  font-family: "Segoe UI", Arial, sans-serif;
  transition: all 0.25s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* 🏷️ Title */
.callout h4 {
  margin: 0 0 0.3rem 0; /* ⬅️ smanjen razmak između title i paragraph */
  font-size: 0.93rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Tekst */
.callout p {
  margin: 0;
}

/* ✨ Hover effect zadržan ali nježniji */
.callout:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}


/* 💡 Tip */
.callout-tip {
  border-color: #38a169;
  background: #e7f9ee;
  color: #1b3d29;
}
.callout-tip h4 { color: #256d3b; }

/* ⚠️ Warning */
.callout-warning {
  border-color: #f6ad55;
  background: #fff8e1;
  color: #5b3e00;
}
.callout-warning h4 { color: #7a5200; }

/* ℹ️ Info */
.callout-info {
  border-color: #3b82f6;
  background: #eaf3fc;
  color: #0f3c70;
}
.callout-info h4 { color: #004f9e; }

/* ❗ Important */
.callout-important {
  border-color: #e53e3e;
  background: #fdeaea;
  color: #5b1212;
}
.callout-important h4 { color: #8b0000; }

/* ✳️ Highlight */
.callout-highlight {
  border-color: #facc15;
  background: #fffde7;
  color: #5d4700;
}
.callout-highlight h4 { color: #b88600; }

/* 🔄 Update */
.callout-update {
  border-color: #0ea5e9;
  background: #e7f4ff;
  color: #063f5c;
}
.callout-update h4 { color: #005e8a; }

/* 🧩 Example */
.callout-example {
  border-color: #7c3aed;
  background: #f5f0ff;
  color: #2b136e;
}
.callout-example h4 { color: #4c1d95; }

/* 📊 Data */
.callout-data {
  border-color: #0ea5e9;
  background: #e6f9ff;
  color: #064663;
}
.callout-data h4 { color: #026b9a; }

/* 🧭 Insight / Quote */
.callout-insight {
  border-color: #2563eb;
  background: #eef4ff;
  color: #1e293b;
  font-style: italic;
}
.callout-insight h4 { color: #1d4ed8; }

/* 🎯 Goal / Objective */
.callout-goal {
  border-color: #059669;
  background: #e6f7f2;
  color: #0b3d2e;
}
.callout-goal h4 { color: #047857; }

/* 🧱 Step / Instruction */
.callout-step {
  border-color: #8b5cf6;
  background: #f4f2ff;
  color: #32295a;
}
.callout-step h4 { color: #5b21b6; }

/* 🧪 Experiment / Beta */
.callout-experiment {
  border-color: #f97316;
  background: #fff4ec;
  color: #4a2900;
}
.callout-experiment h4 { color: #b45309; }

/* 🕊️ Reflection / Philosophy */
.callout-reflection {
  border-color: #7c2d12;
  background: #fcf2ee;
  color: #402414;
  font-style: italic;
}
.callout-reflection h4 { color: #9a3412; }

/* 💬 Comment / Note by Author */
.callout-comment {
  border-color: #64748b;
  background: #f1f5f9;
  color: #1e293b;
  font-style: italic;
}
.callout-comment h4 { color: #334155; }

/* 🧾 Reference / Source */
.callout-reference {
  border-color: #475569;
  background: #f8fafc;
  color: #0f172a;
  font-size: 0.95rem;
}
.callout-reference h4 { color: #1e293b; }

/* ✨ Hover effect */
.callout:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* ==========================================
   🖼️ FIGURE (images with captions)
   ========================================== */

/* 🧱 Base Figure Styling */
figure {
  margin: 1.5rem auto;
  max-width: 720px;
  text-align: center;
  font-family: "Inter", sans-serif;
}

figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

figure img:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 🖋️ Caption */
figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: #555;
  font-style: italic;
  line-height: 1.5;
}

/* 🧩 Layout Variants */

/* 🌄 WIDE / HERO FIGURE */
.figure-wide {
  width: 100%;
  max-width: none;
  margin: 3rem 0;
  text-align: center;
  position: relative;
}

.figure-wide img {
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.figure-wide figcaption {
  margin-top: 0.8rem;
  font-size: 1rem;
  color: #555;
  font-style: italic;
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* 🌅 Overlay Caption Style */
.figure-overlay {
  position: relative;
  overflow: hidden;
}

.figure-overlay img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(85%);
  transition: filter 0.4s ease, transform 0.4s ease;
}

.figure-overlay:hover img {
  filter: brightness(95%);
  transform: scale(1.01);
}

/* 📄 Caption positioned over image */
.figure-overlay figcaption {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  font-style: italic;
  max-width: 85%;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(3px);
}

.figure-overlay figcaption strong {
  font-weight: 600;
  color: #ffd700; /* zlatna za naglasavanje */
}

/* Left-aligned (image floats left with text wrap) */
.figure-left {
  float: left;
  width: 45%;
  margin: 0.5rem 1.5rem 1rem 0;
  text-align: left;
}

/* Centered (default, clean presentation) */
.figure-center {
  display: block;
  margin: 2rem auto;
  text-align: center;
  clear: both;
}

/* Right-aligned (image floats right with text wrap) */
.figure-right {
  float: right;
  width: 45%;
  margin: 0.5rem 0 1rem 1.5rem;
  text-align: right;
}

/* Responsive reset for small screens */
@media (max-width: 768px) {
  .figure-left,
  .figure-right {
    float: none;
    width: 100%;
    margin: 1.5rem auto;
    text-align: center;
  }
}

/* =========================================
   🗞️ SIDEBAR BOXES (Editorial / Minimal Modern)
   ========================================= */

.sidebar-box {
  background: linear-gradient(to bottom right, #f9fafb, #f4f7f9);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  color: #1e293b;
  line-height: 1.7;
  margin: 1.5rem 0;
  transition: all 0.3s ease;
}

.sidebar-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Headings with icon */
.sidebar-box h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #004d80;
  margin-bottom: 0.55rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sidebar-box .icon {
  font-size: 1.2rem;
  display: inline-block;
  transform: translateY(-1px);
  opacity: 0.9;
}

/* 🌿 Variants */
.sidebar-left {
  float: left;
  width: 29%;
  margin-right: 1.5rem;
}

.sidebar-right {
  float: right;
  width: 29%;
  margin-left: 1.5rem;
}

/* 📝 Neutral Sidebar */
.sidebar-note {
  background: #f8f8f8;
  border-left: 4px solid #b0b0b0;
  box-shadow: none;
}

.sidebar-note h4 {
  color: #555;
}

/* Responsive Layout */
@media (max-width: 768px) {
  .sidebar-left,
  .sidebar-right {
    float: none;
    width: 100%;
    margin: 1.5rem 0;
  }
}

/* =========================================
   🧭 INFO BOX SERIES (Elegant Editorial)
   ========================================= */

.infobox {
  background: #f9fafb;
  border: 1px solid #d6e3ec;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 1.25rem 1.5rem;
  margin: 2rem auto;
  max-width: 760px;
  color: #1e293b;
  line-height: 1.7;
  font-size: 1rem;
  font-family: "Segoe UI", Arial, sans-serif;
  transition: all 0.3s ease;
}

.infobox:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

/* 🏷️ Title */
.infobox h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #004d80;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  letter-spacing: 0.4px;
}

.infobox .icon {
  font-size: 1.2rem;
  opacity: 0.9;
  transform: translateY(-1px);
}

/* 🔹 List support */
.infobox ul {
  padding-left: 1.2rem;
  margin: 0.5rem 0;
}

.infobox ul li {
  margin-bottom: 0.4rem;
  list-style-type: disc;
}

/* 🌿 Color Variants */
.infobox-green {
  background: #eaf7f0;
  border-color: #c7e7d2;
}

.infobox-green h4 {
  color: #165c2a;
}

.infobox-yellow {
  background: #fffbea;
  border-color: #ffe79f;
}

.infobox-yellow h4 {
  color: #8a6b00;
}

.infobox-blue {
  background: #eef7ff;
  border-color: #c6e3ff;
}

.infobox-blue h4 {
  color: #004d80;
}

/* 🖼️ Image InfoBox */
.infobox-image {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.5rem;
  background: #f8fafc;
  border: 1px solid #dbe8f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.infobox-image img {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
}

.infobox-image .infobox-content {
  flex: 1;
}

.infobox-image h4 {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: #004d80;
}

.infobox-image p {
  margin: 0;
  color: #333;
  line-height: 1.7;
}

/* 🧭 Left / Right Floating Variants */
.infobox-left {
  float: left;
  width: 42%;
  margin: 0.5rem 1.5rem 1rem 0;
}

.infobox-right {
  float: right;
  width: 42%;
  margin: 0.5rem 0 1rem 1.5rem;
}

/* Auto clearfix */
.infobox-left::after,
.infobox-right::after {
  content: "";
  display: block;
  clear: both;
}

/* 💡 Responsive reset */
@media (max-width: 768px) {
  .infobox,
  .infobox-image {
    padding: 1rem 1.2rem;
    font-size: 0.95rem;
  }

  .infobox-image {
    flex-direction: column;
    text-align: center;
  }

  .infobox-image img {
    width: 100%;
    max-width: 280px;
    height: auto;
  }

  .infobox-left,
  .infobox-right {
    float: none;
    width: 100%;
    margin: 1rem 0;
  }
}

/* =========================================
   📊 TABLES (Elegant Aqua + Borderless)
   ========================================= */

/* 🩵 Aqua Table */
.table-aqua {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem auto;
  max-width: 800px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.98rem;
  line-height: 1.6;
  background: #f9fcfe;
  border: 1px solid #d6eaf5;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.table-aqua thead {
  background: linear-gradient(to bottom, #eaf6fb, #d8eff8);
  color: #003e66;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.table-aqua th,
.table-aqua td {
  padding: 0.9rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid #e3eef3;
}

.table-aqua th {
  font-weight: 700;
  font-size: 0.9rem;
}

.table-aqua tbody tr:nth-child(even) {
  background-color: #f3f9fb;
}

.table-aqua tbody tr:hover {
  background-color: #e9f5fa;
  transition: background-color 0.25s ease;
}

/* ✅ Borderless Table */
.table-borderless {
  width: 100%;
  border-collapse: collapse;
  max-width: 600px;
  margin: 2rem auto;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  color: #1e293b;
}

.table-borderless td {
  padding: 0.6rem 0.8rem;
  border: none;
  vertical-align: top;
}

.table-borderless tr + tr td {
  border-top: 1px dashed #e2e8f0;
}

.table-borderless strong {
  color: #004d80;
}

/* 🌈 Hover effect */
.table-borderless tr:hover td {
  background: #f8fafc;
  transition: background-color 0.25s ease;
}

/* 💡 Responsive */
@media (max-width: 768px) {
  .table-aqua,
  .table-borderless {
    font-size: 0.95rem;
  }

  .table-aqua th,
  .table-aqua td {
    padding: 0.7rem 0.9rem;
  }

  .table-borderless td {
    padding: 0.5rem;
  }
}

/* =========================================
   🌍 TABLE - AQUA VISUAL (with images/icons)
   ========================================= */

.table-aqua-visual {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem auto;
  max-width: 820px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.97rem;
  line-height: 1.6;
  color: #1e293b;
  background: #f9fcfe;
  border: 1px solid #d6eaf5;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.table-aqua-visual thead {
  background: linear-gradient(to bottom, #eaf6fb, #d8eff8);
  color: #003e66;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.table-aqua-visual th,
.table-aqua-visual td {
  padding: 0.9rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid #e3eef3;
  vertical-align: middle;
}

.table-aqua-visual th {
  font-weight: 700;
  font-size: 0.9rem;
}

.table-aqua-visual tbody tr:nth-child(even) {
  background-color: #f3f9fb;
}

.table-aqua-visual tbody tr:hover {
  background-color: #e9f5fa;
  transition: background-color 0.25s ease;
}

/* 🖼️ Flag or Avatar Image */
.table-aqua-visual td img {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
  margin-right: 0.6rem;
  vertical-align: middle;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}

/* 📈 Growth styling */
.table-aqua-visual td:last-child {
  font-weight: 600;
}

.table-aqua-visual td:last-child::before {
  content: "📊 ";
  opacity: 0.7;
}

/* ✅ Optional: "Verified" highlight */
.table-aqua-visual td:nth-child(3) {
  color: #165c2a;
  font-weight: 600;
}

/* 💡 Responsive */
@media (max-width: 768px) {
  .table-aqua-visual {
    font-size: 0.9rem;
  }

  .table-aqua-visual th,
  .table-aqua-visual td {
    padding: 0.7rem 0.9rem;
  }

  .table-aqua-visual td img {
    width: 22px;
    height: 16px;
  }
}

/* =========================================
   📏 TABLE - COMPACT (Sidebar/Data Summary)
   ========================================= */

.table-compact {
  width: 100%;
  border-collapse: collapse;
  max-width: 480px;
  margin: 1.5rem auto;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  background: #f9fcfe;
  border: 1px solid #dceaf2;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

/* Header */
.table-compact thead {
  background: linear-gradient(to bottom, #ecf8fd, #dff3fa);
  color: #004d80;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.table-compact th,
.table-compact td {
  padding: 0.55rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid #e5f0f5;
  white-space: nowrap;
}

/* Font weights */
.table-compact th {
  font-size: 0.85rem;
  font-weight: 700;
}
.table-compact td {
  font-size: 0.9rem;
  font-weight: 500;
  color: #1e293b;
}

/* Alternating rows */
.table-compact tbody tr:nth-child(even) {
  background-color: #f2f9fb;
}

/* Hover */
.table-compact tbody tr:hover {
  background-color: #e9f5fa;
  transition: background-color 0.25s ease;
}

/* Small visual tag (optional for emphasis) */
.table-compact td span.badge {
  display: inline-block;
  background: #0ea5e9;
  color: white;
  border-radius: 3px;
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* 💡 Responsive */
@media (max-width: 600px) {
  .table-compact {
    font-size: 0.85rem;
  }

  .table-compact th,
  .table-compact td {
    padding: 0.45rem 0.7rem;
  }
}

/* =========================================
   🏆 PREMIUM TABLE STYLES (Gold & Rose)
   ========================================= */

/* ✨ GOLD TABLE - Prestige & Awards */
.table-gold {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem auto;
  max-width: 820px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.97rem;
  line-height: 1.6;
  background: #fffdf7;
  border: 1px solid #f5e6b8;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(175, 144, 46, 0.08);
  overflow: hidden;
}

.table-gold thead {
  background: linear-gradient(to bottom, #fff8d9, #f8edb5);
  color: #5e4900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.table-gold th,
.table-gold td {
  padding: 0.9rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid #f1e3a6;
}

.table-gold th {
  font-weight: 700;
  font-size: 0.9rem;
}

.table-gold tbody tr:nth-child(even) {
  background-color: #fffbee;
}

.table-gold tbody tr:hover {
  background-color: #fff8d8;
  transition: background-color 0.25s ease;
}

/* 🌸 ROSE TABLE - Community / Contributors */
.table-rose {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem auto;
  max-width: 820px;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.97rem;
  line-height: 1.6;
  background: #fff9fa;
  border: 1px solid #f3c2cb;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(228, 72, 94, 0.06);
  overflow: hidden;
}

.table-rose thead {
  background: linear-gradient(to bottom, #ffe8ec, #ffdfe6);
  color: #7a1b2d;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.table-rose th,
.table-rose td {
  padding: 0.9rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid #f3ccd2;
}

.table-rose th {
  font-weight: 700;
  font-size: 0.9rem;
}

.table-rose tbody tr:nth-child(even) {
  background-color: #fff2f4;
}

.table-rose tbody tr:hover {
  background-color: #ffe7ec;
  transition: background-color 0.25s ease;
}

/* 💡 Shared responsive adjustments */
@media (max-width: 768px) {
  .table-gold,
  .table-rose {
    font-size: 0.9rem;
  }

  .table-gold th,
  .table-rose th,
  .table-gold td,
  .table-rose td {
    padding: 0.7rem 0.9rem;
  }
}

/* =========================================
   🎯 BUTTON NODE - Elegant System
   ========================================= */

button,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-soft {
  display: inline-block;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.3px;
  margin: 0.4rem;
}

/* 🩵 Primary (brand tone) */
.btn-primary {
  background: linear-gradient(to right, #0091d5, #0078b9);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 121, 185, 0.25);
}
.btn-primary:hover {
  background: linear-gradient(to right, #00a8f1, #0086c8);
  box-shadow: 0 3px 8px rgba(0, 121, 185, 0.35);
}

/* 🤍 Secondary (neutral soft gray) */
.btn-secondary {
  background: #f5f7fa;
  color: #1e293b;
  border: 1px solid #d1d9e0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.btn-secondary:hover {
  background: #eef2f5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* 🩶 Outline (simple frame, transparent background) */
.btn-outline {
  background: transparent;
  border: 1.5px solid #0078b9;
  color: #0078b9;
}
.btn-outline:hover {
  background: rgba(0, 136, 204, 0.05);
  color: #005a8f;
  border-color: #005a8f;
}

/* 💛 Soft Highlight (pastel, subtle) */
.btn-soft {
  background: #fff8e6;
  color: #7a5200;
  border: 1px solid #f1e3b0;
  box-shadow: 0 1px 4px rgba(155, 130, 0, 0.05);
}
.btn-soft:hover {
  background: #fff3cc;
  color: #604200;
  border-color: #ecd98f;
}

/* ✨ Small & Large Variants */
.btn-sm {
  font-size: 0.85rem;
  padding: 0.45rem 1.1rem;
  border-radius: 6px;
}
.btn-lg {
  font-size: 1.05rem;
  padding: 0.75rem 1.8rem;
  border-radius: 10px;
}

/* 🧩 Centering container (optional for preview/demo) */
.button-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 2rem auto;
}


/* 📚 BUTTONS */
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 2rem 0;
}

.btn-glossy {
  all: unset;
  display: inline-block;
  text-align: center;
  font-family: Arial, sans-serif;
  padding: 12px 32px; /* malo više vertikalnog prostora */
  margin: 15px;
  font-size: 17px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  border-radius: 50px;
  line-height: 1.3; /* malo veći razmak za tekst */
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6),
    0 4px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}

.btn-glossy span {
  display: block;
  font-size: 13px; /* mrvicu veće */
  font-style: italic;
  font-weight: normal;
  margin-top: 4px; /* više prostora između glavnog teksta i podnaslova */
  text-shadow: none;
}

/* Hover effect (scale) */
.btn-glossy:hover {
  transform: scale(1.03);
}

/* Green — see lib/nfb_join_button.css (loaded from page_head.php) */

/* Blue */
.btn-blue {
  background: linear-gradient(#4fc3f7, #0288d1);
  color: #04314f;
  border: 1px solid #0277bd;
}
.btn-blue:hover {
  background: linear-gradient(#6fd4fa, #039be5);
}

/* Silver / Gray */
.btn-gray {
  background: linear-gradient(#f5f5f5, #bdbdbd);
  color: #333;
  border: 1px solid #999;
}
.btn-gray:hover {
  background: linear-gradient(#ffffff, #cfcfcf);
}

/* ORANGE */
.btn-orange {
  background: linear-gradient(#ff9800, #e65100);
  color: #3b1c00;
  border: 1px solid #cc6d00;
}
.btn-orange:hover {
  background: linear-gradient(#ffb74d, #f57c00);
}

/* RED */
.btn-red {
  background: linear-gradient(#f44336, #b71c1c);
  color: #fff5f5;
  border: 1px solid #8b0000;
}
.btn-red:hover {
  background: linear-gradient(#ef5350, #c62828);
}

/* PURPLE */
.btn-purple {
  background: linear-gradient(#9c27b0, #4a148c);
  color: #f3e5f5;
  border: 1px solid #6a1b9a;
}
.btn-purple:hover {
  background: linear-gradient(#ba68c8, #7b1fa2);
}

/* YELLOW / GOLD */
.btn-yellow {
  background: linear-gradient(#ffeb3b, #fbc02d);
  color: #4a3f00;
  border: 1px solid #f57f17;
}
.btn-yellow:hover {
  background: linear-gradient(#fff176, #fdd835);
}

/* BLACK */
.btn-black {
  background: linear-gradient(#424242, #000);
  color: #fff;
  border: 1px solid #111;
}
.btn-black:hover {
  background: linear-gradient(#616161, #212121);
}

/* =========================================
   🎯 BADGE NODE — Elegant Modern Style
   ========================================= */

.badge {
  display: inline-block;
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 0.4rem;
  margin: 0.2rem;
  user-select: none;
  white-space: nowrap;
  transition: all 0.25s ease;
  vertical-align: middle;
}

/* 🟢 Success */
.badge-success {
  background: #e8f6ee;
  color: #166534;
  border: 1px solid #b8e0c3;
}

/* 🔵 Info */
.badge-info {
  background: #e8f3fc;
  color: #1e40af;
  border: 1px solid #bcd4f7;
}

/* 🟡 Warning */
.badge-warning {
  background: #fff8e1;
  color: #92400e;
  border: 1px solid #f4dd94;
}

/* 🔴 Error */
.badge-error {
  background: #fcebea;
  color: #9f1239;
  border: 1px solid #f5b2b5;
}

/* 🩷 New / Highlight */
.badge-new {
  background: #fdf2f8;
  color: #9d174d;
  border: 1px solid #f9c2d4;
}

/* ⚫ Dark / Neutral */
.badge-dark {
  background: #e5e7eb;
  color: #1f2937;
  border: 1px solid #cbd5e1;
}

/* ✨ Hover */
.badge:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* 📏 Sizes */
.badge-sm {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
}

.badge-lg {
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
}

/* 📚 For preview/demo */
.badge-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 2rem auto;
}

/* =========================================
   📚 REFERENCES & FOOTNOTES (Final Edition)
   ========================================= */

/* 🔹 Inline reference numbers */
.ref {
  font-size: 0.75rem;
  color: #0f4c81; /* soft blue */
  font-weight: 600;
  position: relative;
  top: -0.3em;
}

/* 🎯 Reference link */
.ref a {
  color: #0f4c81;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.ref a:hover {
  color: #0077b6;
  text-decoration: underline;
}

/* 📘 Footnotes container */
.footnotes {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: #f9fbfd;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #334155;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.footnotes h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: #0f4c81;
}

.footnotes ol {
  margin-left: 1.5rem;
  padding-left: 0;
}
.footnotes li {
  margin-bottom: 0.5rem;
  padding-left: 0.2rem;
}

/* 🔁 Back reference arrow */
.back-ref {
  font-size: 0.8rem;
  color: #0f4c81;
  text-decoration: none;
  margin-left: 0.25rem;
  opacity: 0.8;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.back-ref:hover {
  opacity: 1;
  color: #0077b6;
  text-decoration: underline;
}

/* 📗 References list (for reports / articles) */
.references {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: #f7fafc;
  border-left: 4px solid #94c6e0;
  border-radius: 6px;
  color: #334155;
  font-size: 0.96rem;
}

.references h4 {
  font-size: 1rem;
  color: #004c6d;
  font-weight: 700;
  margin-bottom: 1rem;
}

.references ul {
  list-style-type: square;
  margin-left: 1.2rem;
  padding-left: 0;
}

.references li {
  margin-bottom: 0.6rem;
}

/* =========================================
   📘 DEFINITION LIST / GLOSSARY
   ========================================= */
.definition-list {
  margin: 2.5rem auto;
  max-width: 720px;
  background: #fdfdfd;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.definition-list h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f4c81;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e0e7ee;
  padding-bottom: 0.4rem;
}

/* 🔸 Terms (dt) */
.definition-list dt {
  font-weight: 700;
  color: #004c6d;
  margin-top: 1rem;
  font-size: 1rem;
  letter-spacing: 0.3px;
}

/* 🔹 Descriptions (dd) */
.definition-list dd {
  margin-left: 1rem;
  margin-bottom: 0.75rem;
  color: #334155;
  line-height: 1.7;
  font-size: 0.97rem;
}

/* 🩵 Decorative Accent */
.definition-list dt::before {
  content: "▹ ";
  color: #0093c4;
  font-weight: 600;
}

/* 🧭 Responsive */
@media (max-width: 768px) {
  .definition-list {
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
  }
}



/* 🧱 NFB Code Block Styles */
.code-preview {
  max-width: 800px;
  margin: 2rem auto;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 1.5rem;
}

/* ✏️ Inline code */
.inline-code {
  background: #f3f3f3;
  color: #c7254e;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.95em;
  border-radius: 4px;
  padding: 2px 5px;
  border: 1px solid #e0e0e0;
}

/* =============================
   💡 LIGHT THEME CODE BLOCK
   ============================= */
.code-block.light {
  background: #fdfdfd;
  color: #1a1a1a;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  margin: 1.5rem 0;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.code-block.light .code-header {
  background: #f2f2f2;
  color: #555;
}

.code-block.light .lang-label {
  color: #0077cc;
}

.code-block.light .copy-btn {
  color: #0077cc;
}
.code-block.light .copy-btn:hover {
  color: #000;
}

.code-block.light pre {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
  line-height: 1.55;
}

/* Light syntax tint */
.language-js .token.keyword { color: #005cc5; }
.language-js .token.string { color: #22863a; }
.language-js .token.function { color: #6f42c1; }

.language-css .token.property { color: #005cc5; }
.language-css .token.selector { color: #d73a49; }

/* =============================
   🌑 DARK THEME CODE BLOCK (NFB FIXED CONTRAST FINAL)
   ============================= */
.code-block.dark {
  background: #1e1e1e;
  color: #e6e6e6;
  border: 1px solid #2d2d2d;
  border-radius: 8px;
  margin: 1.5rem 0;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* 🔹 Header bar */
.code-block.dark .code-header {
  background: #2a2a2a;
  color: #d0d0d0;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85em;
  border-bottom: 1px solid #3a3a3a;
}

/* 🏷️ Language label */
.code-block.dark .lang-label {
  color: #79c0ff;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* 📋 Copy button */
.code-block.dark .copy-btn {
  color: #9ad1ff;
  font-weight: 500;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.9em;
  transition: color 0.2s ease, transform 0.15s ease;
}
.code-block.dark .copy-btn:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

/* 💻 Code area */
.code-block.dark pre {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
  line-height: 1.6;
  background: #1e1e1e;
}

.code-block.dark pre code {
  color: #f2f2f2 !important; /* ✅ Fiksirano — glavni tekst je jasno vidljiv */
}

/* 🎨 Syntax highlight */
.code-block.dark .language-js .token.keyword { color: #c792ea; }
.code-block.dark .language-js .token.string { color: #ecc48d; }
.code-block.dark .language-js .token.function { color: #82aaff; }

.code-block.dark .language-css .token.property { color: #ffc66d; }
.code-block.dark .language-css .token.selector { color: #89ddff; }
.code-block.dark .language-css .token.punctuation { color: #cccccc; }

/* 🧭 Scrollbar styling */
.code-block.dark pre::-webkit-scrollbar {
  height: 8px;
}
.code-block.dark pre::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 4px;
}
.code-block.dark pre::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* 📱 Responsive */
@media (max-width: 600px) {
  .code-block.dark pre {
    font-size: 0.85em;
  }
}


/* ============================================================
   🌈 NFB MULTI-COLOR TIMELINE (FINAL)
   ------------------------------------------------------------
   • Warm vibrant colors matching NFB buttons
   • Alternating left/right layout
   • Clean shadows, hover glow
   ============================================================ */

.timeline-classic {
  position: relative;
  max-width: 900px;
  margin: 3rem auto;
  padding: 2rem 0;
  font-family: "Segoe UI", system-ui, sans-serif;
}

/* 📍 Central line */
.timeline-classic::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom,
    #6abf40,   /* green */
    #2ba0d9,   /* blue */
    #ff9800,   /* orange */
    #e53935,   /* red */
    #8e24aa,   /* purple */
    #fbc02d    /* yellow */
  );
  border-radius: 2px;
}

/* 🔹 Base item */
.timeline-item {
  position: relative;
  width: 50%;
  padding: 1rem 2rem;
  box-sizing: border-box;
}

/* 📦 Content boxes */
.timeline-content {
  background: #ffffff;
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: all 0.25s ease;
}
.timeline-content:hover {
  transform: translateY(-3px);
}

/* ✏️ Text */
.timeline-content h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.timeline-content p {
  margin: 0.5rem 0 0;
  color: #333;
  font-size: 0.95rem;
  line-height: 1.6;
}
.timeline-date {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: #888;
}

/* 📍 Positioning */
.timeline-item.left { left: 0; text-align: right; }
.timeline-item.right { left: 50%; }
.timeline-item.left .timeline-dot { right: -8px; }
.timeline-item.right .timeline-dot { left: -8px; }

/* 🔺 Arrows */
.timeline-item.left .timeline-content::after,
.timeline-item.right .timeline-content::after {
  content: "";
  position: absolute;
  top: 28px;
  width: 0;
  height: 0;
  border: 7px solid transparent;
}
.timeline-item.left .timeline-content::after {
  border-right-color: #ffffff;
  right: -14px;
}
.timeline-item.right .timeline-content::after {
  border-left-color: #ffffff;
  left: -14px;
}

/* 🟢🟠🟣🔵🟡 Timeline dots — one color per step */
.timeline-item:nth-child(1) .timeline-dot { background: #6abf40; }  /* green */
.timeline-item:nth-child(1) .timeline-content h3 { color: #6abf40; }

.timeline-item:nth-child(2) .timeline-dot { background: #2ba0d9; }  /* blue */
.timeline-item:nth-child(2) .timeline-content h3 { color: #2ba0d9; }

.timeline-item:nth-child(3) .timeline-dot { background: #ff9800; }  /* orange */
.timeline-item:nth-child(3) .timeline-content h3 { color: #ff9800; }

.timeline-item:nth-child(4) .timeline-dot { background: #e53935; }  /* red */
.timeline-item:nth-child(4) .timeline-content h3 { color: #e53935; }

.timeline-item:nth-child(5) .timeline-dot { background: #8e24aa; }  /* purple */
.timeline-item:nth-child(5) .timeline-content h3 { color: #8e24aa; }

.timeline-item:nth-child(6) .timeline-dot { background: #fbc02d; }  /* yellow */
.timeline-item:nth-child(6) .timeline-content h3 { color: #fbc02d; }

/* 🪶 Hover glow */
.timeline-item:hover .timeline-dot {
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
  filter: brightness(1.15);
}

/* 📍 Dots */
.timeline-dot {
  position: absolute;
  top: 22px;
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  z-index: 2;
  transition: all 0.25s ease;
}

/* 📱 Responsive layout */
@media (max-width: 768px) {
  .timeline-classic::before {
    left: 10px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 2.5rem;
    padding-right: 1rem;
  }

  .timeline-item.left,
  .timeline-item.right {
    text-align: left;
    left: 0;
  }

  .timeline-item.left .timeline-dot,
  .timeline-item.right .timeline-dot {
    left: 0;
  }

  .timeline-item.left .timeline-content::after,
  .timeline-item.right .timeline-content::after {
    left: 14px;
    border-left-color: #fff;
    border-right-color: transparent;
  }
}

/* ============================================================
   🌈 NFB MODERN HORIZONTAL TIMELINE
   ------------------------------------------------------------
   • Flat horizontal layout with color-coded steps
   • Elegant cards and animated progress line
   ============================================================ */

.timeline-modern {
  text-align: center;
  padding: 3rem 1rem;
  font-family: "Segoe UI", system-ui, sans-serif;
  max-width: 1000px;
  margin: 3rem auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.timeline-modern .timeline-title {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: #222;
}

/* 🧭 Horizontal wrapper */
.timeline-horizontal {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* 🩵 Connecting line */
.timeline-horizontal::before {
  content: "";
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 4px;
  background: linear-gradient(to right,
    #6abf40,
    #2ba0d9,
    #ff9800,
    #e53935,
    #8e24aa,
    #fbc02d
  );
  border-radius: 2px;
  z-index: 1;
}

/* 🧩 Step item */
.timeline-step {
  position: relative;
  background: #fff;
  flex: 1;
  min-width: 130px;
  text-align: center;
  z-index: 2;
}

.timeline-step .circle {
  width: 42px;
  height: 42px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  color: #fff;
  font-weight: 600;
  line-height: 42px;
  font-size: 1rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  transition: all 0.25s ease;
}

.timeline-step h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.timeline-step p {
  font-size: 0.9rem;
  color: #555;
  max-width: 160px;
  margin: 0 auto;
  line-height: 1.4;
}

/* 🔹 Hover animation */
.timeline-step:hover .circle {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 🌈 Color themes */
.timeline-step.green .circle { background: #6abf40; }
.timeline-step.blue .circle { background: #2ba0d9; }
.timeline-step.orange .circle { background: #ff9800; }
.timeline-step.red .circle { background: #e53935; }
.timeline-step.purple .circle { background: #8e24aa; }
.timeline-step.yellow .circle { background: #fbc02d; }

/* 📱 Responsive layout */
@media (max-width: 850px) {
  .timeline-horizontal {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .timeline-horizontal::before {
    content: none;
  }

  .timeline-step {
    width: 80%;
    border-left: 5px solid #ddd;
    padding-left: 1rem;
    text-align: left;
  }

  .timeline-step .circle {
    position: absolute;
    left: -27px;
    top: 0;
  }

  .timeline-step h3 {
    margin-top: 0.2rem;
  }
}

/* ============================================================
   ➖ NFB DIVIDER NODE
   ------------------------------------------------------------
   • Simple, elegant horizontal separator
   • Optional label support (.divider-label)
   ============================================================ */

.section-divider {
  border: none;
  height: 2px;
  width: 100%;
  max-width: 900px;
  margin: 2.5rem auto;
  background: linear-gradient(to right, transparent, #e0e0e0, transparent);
  border-radius: 2px;
}

/* 💡 Optional labeled divider (for mid-section labels) */
.divider-label {
  position: relative;
  text-align: center;
  margin: 2.5rem auto;
}

.divider-label::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(to right, transparent, #e0e0e0, transparent);
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

.divider-label span {
  background: #fff;
  padding: 0 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #666;
  position: relative;
  z-index: 1;
}

/* 📱 Responsive margin */
@media (max-width: 768px) {
  .section-divider,
  .divider-label {
    margin: 1.8rem auto;
  }
}

/* ============================================================
   🧩 NFB TWO-COLUMN LAYOUT
   ------------------------------------------------------------
   • Flexible, responsive layout (50/50 split)
   • Supports text, images, or nested blocks
   ============================================================ */

.two-column {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1000px;
  margin: 3rem auto;
  padding: 1rem 0;
  font-family: "Segoe UI", system-ui, sans-serif;
}

/* 🎨 Columns */
.two-column .col {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.two-column .col:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 🖋️ Typography inside columns */
.two-column h3 {
  margin-top: 0;
  font-size: 1.1rem;
  color: #2b2b2b;
}
.two-column p {
  color: #444;
  line-height: 1.6;
  margin: 0.5rem 0 0;
}

/* 🧭 Responsive */
@media (max-width: 900px) {
  .two-column {
    flex-direction: column;
    gap: 1.5rem;
  }
  .two-column .col {
    width: 100%;
  }
}

/* ============================================================
   🧩 NFB THREE-COLUMN LAYOUT
   ------------------------------------------------------------
   • Triple-column flexible layout
   • Responsive: auto-stacks on smaller screens
   ============================================================ */

.three-column {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1100px;
  margin: 3rem auto;
  padding: 1rem 0;
  font-family: "Segoe UI", system-ui, sans-serif;
}

/* 🎨 Column styling */
.three-column .col {
  flex: 1;
  background: #ffffff;
  border-radius: 10px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

.three-column .col:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* 🖋️ Typography */
.three-column h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: #2b2b2b;
  font-weight: 600;
}
.three-column p {
  margin: 0;
  color: #444;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* 🌈 Optional color accents */
.three-column .col:nth-child(1) h3 { color: #2ba0d9; }  /* Blue */
.three-column .col:nth-child(2) h3 { color: #ff9800; }  /* Orange */
.three-column .col:nth-child(3) h3 { color: #8e24aa; }  /* Purple */

/* 📱 Responsive layout */
@media (max-width: 950px) {
  .three-column {
    flex-wrap: wrap;
  }
  .three-column .col {
    flex: 1 1 calc(50% - 1rem);
  }
}

@media (max-width: 650px) {
  .three-column {
    flex-direction: column;
  }
  .three-column .col {
    width: 100%;
  }
}

/* ============================================================
   🎬 NFB EMBED NODE
   ------------------------------------------------------------
   • Clean responsive frame for YouTube, Maps, or custom embeds
   • Optional caption for source description
   ============================================================ */

.embed-block {
  max-width: 900px;
  margin: 2.5rem auto;
  text-align: center;
  font-family: "Segoe UI", system-ui, sans-serif;
}

/* 🎥 Wrapper to keep 16:9 ratio */
.embed-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  background: #000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.embed-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.15);
}

/* 🪟 Actual iframe */
.embed-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
}

/* 📝 Caption text */
.embed-caption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

/* 🧭 Optional themes */
.embed-block.light .embed-wrapper {
  background: #f5f5f5;
}
.embed-block.dark .embed-wrapper {
  background: #111;
}

/* 📱 Responsive fix */
@media (max-width: 600px) {
  .embed-block {
    padding: 0 1rem;
  }
  .embed-caption {
    font-size: 0.85rem;
  }
}

/* ============================================================
   📊 NFB STAT BLOCK
   ------------------------------------------------------------
   • Minimal metric display (numbers + labels)
   • Uses NFB color palette for accents
   ============================================================ */

.stat-block {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  max-width: 1000px;
  margin: 3rem auto;
  font-family: "Segoe UI", system-ui, sans-serif;
  text-align: center;
  flex-wrap: wrap;
}

.stat-item {
  flex: 1 1 250px;
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5rem 1rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* ✴️ Numbers */
.stat-item h3 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: #2ba0d9;
  letter-spacing: 0.5px;
}

/* 🏷️ Labels */
.stat-item p {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  color: #555;
  font-weight: 500;
  line-height: 1.4;
}

/* 🌈 Color accents (NFB palette) */
.stat-item:nth-child(1) h3 { color: #2ba0d9; }  /* Blue */
.stat-item:nth-child(2) h3 { color: #ff9800; }  /* Orange */
.stat-item:nth-child(3) h3 { color: #8e24aa; }  /* Purple */
.stat-item:nth-child(4) h3 { color: #43a047; }  /* Green */
.stat-item:nth-child(5) h3 { color: #e53935; }  /* Red */

/* 📱 Responsive */
@media (max-width: 768px) {
  .stat-block {
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem;
  }
}

/* ============================================================
   🌟 NFB FANCY HEADLINE
   ------------------------------------------------------------
   • Hero/section title block with accent underline
   • Used at the top of major pages or sections
   ============================================================ */

.fancy-headline {
  text-align: center;
  max-width: 850px;
  margin: 4rem auto 3rem;
  padding: 0 1rem;
  font-family: "Segoe UI", system-ui, sans-serif;
}

/* 🧱 Title */
.fancy-headline .headline-title {
  font-size: 2rem;
  font-weight: 700;
  color: #2b2b2b;
  margin-bottom: 0.8rem;
  letter-spacing: 0.5px;
}

/* 🪶 Subtitle */
.fancy-headline .headline-subtitle {
  font-size: 1.05rem;
  color: #555;
  line-height: 1.6;
  margin: 0 auto 1rem;
  max-width: 700px;
}

/* 🎨 Accent line */
.fancy-headline .headline-accent {
  width: 80px;
  height: 4px;
  margin: 0.5rem auto 0;
  border-radius: 2px;
  background: linear-gradient(to right, #2ba0d9, #8e24aa);
}

/* ✨ Variants (NFB palette) */
.fancy-headline.blue .headline-accent {
  background: linear-gradient(to right, #2ba0d9, #64b5f6);
}
.fancy-headline.orange .headline-accent {
  background: linear-gradient(to right, #ff9800, #ffb74d);
}
.fancy-headline.purple .headline-accent {
  background: linear-gradient(to right, #8e24aa, #ba68c8);
}
.fancy-headline.green .headline-accent {
  background: linear-gradient(to right, #43a047, #81c784);
}
.fancy-headline.red .headline-accent {
  background: linear-gradient(to right, #e53935, #ef5350);
}

/* 📱 Responsive */
@media (max-width: 600px) {
  .fancy-headline .headline-title {
    font-size: 1.6rem;
  }
  .fancy-headline .headline-subtitle {
    font-size: 0.95rem;
  }
}

/* ============================================================
   🧩 NFB DEV NOTE NODE
   ------------------------------------------------------------
   • Internal editor notes (hidden on live site)
   • Color-coded for clarity
   ============================================================ */

.dev-note {
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 0.95rem;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 1rem auto;
  max-width: 900px;
  border-left: 4px solid #2ba0d9;
  background: #f4faff;
  color: #2b2b2b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.dev-note strong {
  font-weight: 600;
}

/* 🌈 Variants */
.dev-note.info {
  border-left-color: #2ba0d9;
  background: #f4faff;
}
.dev-note.warning {
  border-left-color: #ff9800;
  background: #fff7e0;
}
.dev-note.error {
  border-left-color: #e53935;
  background: #fff2f2;
}
.dev-note.success {
  border-left-color: #43a047;
  background: #f2fff5;
}

/* 👻 Hide on public/live site */
body.live-view .dev-note {
  display: none !important;
}

/* 📱 Responsive */
@media (max-width: 600px) {
  .dev-note {
    font-size: 0.9rem;
    padding: 0.8rem 1rem;
  }
}