Improve article TOC, sticky header, and cross-language anchors

- Pin the site header on scroll (position: absolute -> fixed) so it no
  longer disappears when reading.
- Redesign the desktop table-of-contents sidebar: compact spacing and fix
  the first-item clipping at 100% zoom (drop fixed-height flex centering in
  the scroll container for a flex column with max-height).
- Add the article title above the desktop TOC so readers always know which
  article they are in.
- Make the article TOC a site-wide standard: main.js now auto-builds the
  sidebar + sticky mobile header from each page's own h1/h2 headings, so all
  languages (EN/SI/MK) get it with no per-page HTML. Existing hand-written
  EN labels are preserved.
- Update the URL hash to the active section while scrolling (replaceState,
  no history spam, no jump).
- Add transliteration for readable anchors in every language: Slovenian
  diacritics and Macedonian Cyrillic map to ASCII slugs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

css/layout/_header.css

@@ -15,7 +15,9 @@
 
 /* 1. Glavni kontejner za glavo */
 .dropdown-header-navigation {
-    position: absolute;
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 80px;
     background: #FFFFFF;

css/pages/_article.css

@@ -51,15 +51,36 @@
     width: 288px;
     flex-shrink: 0;
     position: sticky;
-    top: 120px;
-    height: calc(100vh - 240px); 
+    top: 112px;
+    /* max-height (not fixed height) so short lists size to content and never clip;
+       the list only scrolls when the viewport is genuinely too short. */
+    max-height: calc(100vh - 140px);
+    display: flex;
+    flex-direction: column;
+}
+
+/* Article title above the table of contents, so the reader always knows
+   which article they are reading. Injected by main.js from the page <h1>. */
+.article-sidebar-title {
+    flex-shrink: 0;
+    margin: 0 0 16px 0;
+    padding: 0 0 16px 20px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    color: #101828;
+    border-bottom: 1px solid #EAECF0;
 }
 
 .scrollspy-nav {
-    height: 100%;
+    /* Fill the remaining sidebar height and scroll internally when needed.
+       min-height:0 lets a flex child actually shrink so overflow works. */
+    flex: 1 1 auto;
+    min-height: 0;
     overflow-y: auto;
-    display: flex;
-    align-items: center;
+    /* No flex centering here: centering inside a scroll container pushed the first
+       item out of reach at 100% zoom / short viewports. Content now flows from the top. */
+    padding: 4px 0;
 }
 
 .scrollspy-nav ul {
@@ -68,15 +89,16 @@
     margin: 0;
     display: flex;
     flex-direction: column;
-    gap: 40px; 
+    gap: 8px;
     border-left: 2px solid #EAECF0;
 }
 
 .scrollspy-nav li a {
     display: block;
-    padding: 12px 24px;
+    padding: 8px 20px;
     text-decoration: none;
-    font-size: 16px;
+    font-size: 14px;
+    line-height: 20px;
     font-weight: 500;
     color: #667085;
     border-left: 2px solid transparent;