/* ===== Shortcodes — Synaptik CMS ===== */
/* ── [toc] ─────────── */
.sc-toc { display: inline-block; min-width: 220px; max-width: 100%; background-color: var(--bg-darker, #161815); border: 1px solid #333; border-left: 3px solid var(--color-primary, #4fa75c); border-radius: var(--border-radius-sm, 4px); padding: 14px 18px; margin: var(--space-md, 20px) 0; }
.sc-toc::before { content: attr(data-label); display: block; font-family: var(--font-headings, 'Saira Extra Condensed', sans-serif); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary, #4fa75c); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #2a2d28; }
.sc-toc ul { list-style: none !important; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sc-toc li, .sc-toc li a { list-style: none !important; list-style-type: none !important; }
.sc-toc li a { font-size: 0.88rem; color: var(--text-main, #eee); text-decoration: none; opacity: 0.8; transition: color var(--transition-fast, 0.2s ease), opacity var(--transition-fast, 0.2s ease); }
.sc-toc li a:hover { color: var(--color-primary-light, #61ce70); opacity: 1; }
.sc-toc .sc-toc-sub { padding-left: 14px; position: relative; }
.sc-toc .sc-toc-sub::before { content: '\2013'; position: absolute; left: 4px; color: var(--color-primary, #4fa75c); opacity: 0.5; font-size: 0.75rem; line-height: 1.6; }
.sc-toc .sc-toc-sub a { font-size: 0.82rem; }
/* ── [callout] ─────── */
.sc-callout { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--border-radius-sm, 4px); border-left: 4px solid; margin: var(--space-md, 20px) 0; font-size: 0.95rem; line-height: 1.6; }
.sc-callout-icon { font-size: 1.15rem; flex-shrink: 0; line-height: 1.6; }
.sc-callout-body { flex: 1; min-width: 0; color: var(--text-main, #666); }
.sc-callout-body p:first-child { margin-top: 0; }
.sc-callout-body p:last-child { margin-bottom: 0; }
.sc-callout-info { background-color: rgba(79,138,167,.12); border-color: var(--color-secondary, #4f8aa7); }
.sc-callout-warning { background-color: rgba(192,86,86,.12); border-color: var(--color-warning, #c05656); }
.sc-callout-tip { background-color: rgba(79,167,92,.12); border-color: var(--color-primary, #4fa75c); }
.sc-callout-danger { background-color: rgba(192,86,86,.18); border-color: #9b2020; }
/* ── [quote] ───────── */
.sc-quote { border-left: 4px solid var(--color-primary, #4fa75c); margin: var(--space-lg, 30px) 0; padding: 20px; font-style: italic; font-size: 1.05rem; line-height: 1.7; color: var(--text-main, #777); background: #00000029; max-width: 700px; }
.sc-quote p:first-child { margin-top: 0; }
.sc-quote p:last-child { margin-bottom: 0; }
.sc-quote footer { margin-top: 10px; font-style: normal; font-size: var(--font-size-xs, 0.7em); color: var(--text-secondary, #666); font-family: var(--font-headings, 'Saira Extra Condensed', sans-serif); text-transform: uppercase; letter-spacing: 0.06em; }
/* ── [button] ──────── */
.sc-btn { display: inline-block; padding: var(--space-sm, 10px) var(--space-md, 20px); border-radius: var(--border-radius-sm, 4px); font-size: 1em; font-weight: bold; text-decoration: none; cursor: pointer; transition: background-color var(--transition-fast, 0.2s ease), color var(--transition-fast, 0.2s ease), transform .1s ease; margin: var(--space-xs, 5px) 0; }
.sc-btn:active { transform: scale(0.97); }
.sc-btn-primary { background-color: var(--color-primary, #4fa75c); color: var(--text-main, #eee); border: none; }
.sc-btn-primary:hover { background-color: var(--color-primary-light, #61ce70); color: #fff; }
.sc-btn-secondary { background-color: var(--color-secondary, #4f8aa7); color: var(--text-main, #eee); border: none; }
.sc-btn-secondary:hover { background-color: #3a7090; color: #fff; }
.sc-btn-outline { background-color: transparent; color: var(--color-primary, #4fa75c); border: 2px solid var(--color-primary, #4fa75c); }
.sc-btn-outline:hover { background-color: var(--color-primary, #4fa75c); color: var(--text-main, #eee); }
/* ── Grid wrappers ─── */
.sc-articles-grid, .sc-projects-grid { margin: var(--space-md, 20px) 0; }
.sc-callout-title { margin: 0 0 4px; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
/* ── Synaptik CMS attribution (render_footer_content) ──── */
.snk-credit { font-size: .72rem; opacity: .75; }
.snk-credit a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.snk-credit a:hover { color: currentColor; }
/* ── Responsive ────── */
@media (max-width: 768px) {
  .sc-toc { display: block; }
}
@media (max-width: 480px) {
  .sc-articles-grid { grid-template-columns: 1fr; }
}