/* ============================================================
   A11Y-SCMS — design system

   V TEJ DATOTEKI NI NOBENE BARVE. Vse barve so žetoni, ki jih generira
   CMS v /theme.css (App\Core\Theme). Vsak žeton je ali nastavljiv v
   uredništvu ali izpeljan iz nastavljivih tako, da doseže zahtevano
   kontrastno razmerje — Videz → Barve pokaže oboje skupaj z razmerji.

   Enako velja za tipografijo, razmike in oblike: nastavlja jih Videz
   (App\Core\Style, prav tako prek /theme.css); tu so le rezervne
   vrednosti v var(--…, rezerva), če /theme.css ni dosegljiv.
   ============================================================ */

:root {
  --bg: #f9f9fc; --surface: #fdfdfe; --surface-alt: #efeff2; --surface-mute: #e7e7ea;
  --text: #2d3339; --text-muted: #64676c;
  --primary: #255dad; --primary-hover: #1d4a8a; --on-primary: #ffffff;
  --primary-soft: #e0e6f3; --primary-line: #255dad;
  --band: #112a4e; --on-band: #ffffff;
  --link: #255dad; --link-hover: #1e4c8e; --link-visited: #562fa3;
  --accent: #8a3ffc; --accent-text: #873ef7; --accent-soft: #e9dffc;
  --border: #87888a; --border-strong: #5f6266;
  --focus-outer: #255dad; --focus-inner: #ffffff;
  --info: #0b5e8a; --info-soft: #d8e3ec;
  --success: #157a3a; --success-soft: #d9e7e1;
  --warning: #a05e03; --warning-soft: #ede3d9;
  --danger: #b3232f; --danger-soft: #efdbdf;
  --shadow-color: #0d0d0f;
  --scrim: #07111f; --on-scrim: #ffffff;
  --shadow: 0 2px 10px rgb(13 13 15 / .10);
  --shadow-lg: 0 6px 24px rgb(13 13 15 / .16);
  --radius: 0.75rem;
  --font: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono-fallback: ui-monospace, Consolas, Monaco, "Courier New", monospace;
  --maxw: 72rem;
}

/* ---------------- Ponastavitev ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  font-family: var(--font-body, var(--font));
  font-size: var(--fs-base, 1.0625rem);
  line-height: var(--lh, 1.6);
  letter-spacing: var(--ls-body, normal);
  word-spacing: var(--ws-body, normal);
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
img, video { max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-heading, inherit);
  letter-spacing: var(--ls-heading, normal);
  line-height: var(--lh-heading, 1.25);
  margin: 0 0 .6em; text-wrap: balance;
}
h1 { font-size: var(--h1-size, clamp(1.8rem, 1.4rem + 2vw, 2.6rem)); font-weight: var(--heading-w, 800); }
h2 { font-size: var(--h2-size, clamp(1.4rem, 1.2rem + 1vw, 1.9rem)); font-weight: var(--heading-w2, 700); }
h3 { font-size: var(--h3-size, 1.25rem); font-weight: var(--heading-w2, 700); }
h4 { font-size: var(--h4-size, 1.1rem); font-weight: var(--heading-w2, 700); }
p { margin: 0 0 var(--p-space, 1em); }
a { color: var(--link); }
a:hover {
  color: var(--link-hover);
  text-decoration-thickness: var(--link-hover-width, 2px) !important;
  text-decoration-style: var(--link-hover-style, solid) !important;
  text-shadow: var(--link-hover-shadow, none);
}
hr { border: 0; border-top: var(--divider-w, 1px) solid var(--border-strong); margin: 1.5rem 0; }
button { font: inherit; }
.mono { font-family: var(--font-mono, var(--font-mono-fallback)); }

/* Poudarek naslovov H2 (Videz → Oblika): črta v glavni barvi pod naslovi razdelkov.
   Izrisana je kot podlaga, zato »kratka« različica ne potrebuje dodatnega elementa. */
h2.block-heading, .prose h2 {
  padding-bottom: var(--h2-accent-pad, 0px);
  background: linear-gradient(var(--heading-line, transparent), var(--heading-line, transparent))
    bottom left / var(--h2-accent-len, 0px) var(--h2-accent-w, 0px) no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------- Fokus (dvojni obroč po CGP) ----------------
   Zunanji obroč skrbi za podlage strani, notranji za navigacijsko vrstico:
   na vsaki podlagi je viden vsaj eden (žetona izbere Theme). */
:focus-visible {
  outline: var(--focus-w, 3px) solid var(--focus-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-inner);
  border-radius: 4px;
}

/* ---------------- Pripomočki ---------------- */
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }

.skip-link {
  position: absolute;
  inset-inline-start: -100vw;
  top: 0;
  z-index: 100;
  padding: .8rem 1.4rem;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus-visible { inset-inline-start: 0; }

/* ---------------- Gumbi ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px;
  padding: .55em 1.25em;
  border-radius: var(--btn-radius, calc(var(--radius) * .8));
  border: 2px solid transparent;
  font-family: var(--font-ui, inherit);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary, .btn--on-image { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover, .btn--on-image:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn--secondary { background: transparent; color: var(--link); border-color: var(--primary-line); }
.btn--secondary:hover { color: var(--link-hover); background: var(--primary-soft); }

/* ---------------- Obvestila ----------------
   Levi rob je oglat in poudarjen (5 px), obroba naokoli je v barvi obvestila;
   zaokrožena je samo desna stran. Enako obliko ima predloga glave »obvestilo«. */
.notice {
  padding: .8rem 1.1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
  border-inline-start-width: 5px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notice > :last-child, .notice .prose > :last-child { margin-bottom: 0; }
.notice--info { background: var(--info-soft); border-color: var(--info); }
.notice--ok { background: var(--success-soft); border-color: var(--success); }
.notice--warn { background: var(--warning-soft); border-color: var(--warning); }
.notice--error { background: var(--danger-soft); border-color: var(--danger); }

/* ================= GLAVA ================= */
/* Ogrodja glave (App\Core\Header, katalog: A11Y-SCMS-glave.md). Vse barve so
   žetoni: temna vrstica z znamko leži na --primary / --on-primary, pas menija
   in tanek zgornji pas na --band / --on-band, svetla vrstica na --surface.
   Vrstice se pri ožjih zaslonih prelomijo (flex-wrap) — meni ni nikoli skrit
   za »hamburgerjem«, razen pri ogrodju z gumbom Meni (predal). */
.site-header, .breadcrumbs, .site-footer { font-family: var(--font-ui, inherit); }

html:not(.dark) .ico-sun { display: none; }
html.dark .ico-moon { display: none; }

/* ---------------- Tanek zgornji pas (ogrodje top-strip) ---------------- */
.topstrip { background: var(--band); color: var(--on-band); font-size: .9rem; }
.topstrip__in { display: flex; justify-content: flex-end; align-items: center; gap: .25rem 1rem; flex-wrap: wrap; }
.topstrip__nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.topstrip a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .8em; color: var(--on-band); }
.topstrip .langswitch a { color: var(--on-band); }
.topstrip .langswitch a:hover { background: color-mix(in srgb, var(--on-band) 14%, transparent); }
.topstrip .langswitch a[aria-current] { background: var(--on-band); color: var(--band); }
.topstrip__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-width: 40px; min-height: 40px; padding: 0 .5em;
  background: none; border: 0; color: var(--on-band); cursor: pointer;
  border-radius: 4px; font: inherit;
}
.topstrip a:hover, .topstrip__btn:hover { background: color-mix(in srgb, var(--on-band) 14%, transparent); }

/* ---------------- Vrstica z znamko ---------------- */
.navbar { box-shadow: var(--shadow); }
.navbar--dark { background: var(--primary); color: var(--on-primary); }
.navbar--light { background: var(--surface); color: var(--text); box-shadow: none; border-bottom: var(--divider-w, 1px) solid var(--border); }
.navbar__in { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; padding-block: .6rem; }

.brand { display: inline-flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.brand__logo { height: 44px; width: auto; }
.brand__mono {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  font-weight: 800; font-size: 1rem;
  border-radius: calc(var(--radius) * .8);
}
.navbar--dark .brand__mono { background: var(--on-primary); color: var(--primary); }
.navbar--light .brand__mono { background: var(--primary); color: var(--on-primary); }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-weight: 800; font-size: 1.2rem; letter-spacing: .01em; }
.brand__tagline { font-size: .85rem; font-weight: 400; }
.brand:hover .brand__name { text-decoration: underline; }

/* Orodja ob znamki: zemljevid strani, poimenovane povezave, jeziki, iskalnik, tema. */
.navbar__tools { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-inline-start: auto; }
.navbar__toollink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6em; color: inherit; }
.navbar__links ul { display: flex; align-items: center; gap: .25rem .5em; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.navbar__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5em; color: inherit; }
.navbar--light .navbar__links a { color: var(--link); }
.navbar--light .navbar__links a:hover { color: var(--link-hover); }
.hdr-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-width: 44px; min-height: 44px; padding: 0 .4em;
  background: transparent; color: inherit; font: inherit; cursor: pointer;
  border: 2px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: calc(var(--radius) * .8);
}
.navbar--dark .hdr-tool:hover { background: var(--primary-hover); }
/* Na svetli podlagi obroba iz žetona s kontrastnim pravilom 3 : 1 (SC 1.4.11). */
.navbar--light .hdr-tool { color: var(--link); border-color: var(--primary-line); }
.navbar--light .hdr-tool:hover { background: var(--primary-soft); }

/* Preklopnik jezikov: seznam povezav (en klik, deluje brez JS), ne spustni meni. */
.langswitch ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.langswitch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: .1em .5em;
  color: var(--text); text-decoration: none;
  text-transform: uppercase; font-weight: 600; font-size: .85rem;
  border-radius: 6px;
}
.langswitch a:hover { background: var(--surface-mute); text-decoration: underline; }
.langswitch a[aria-current] { background: var(--primary); color: var(--on-primary); }
.navbar--dark .langswitch a { color: var(--on-primary); }
.navbar--dark .langswitch a:hover { background: var(--primary-hover); }
.navbar--dark .langswitch a[aria-current] { background: var(--on-primary); color: var(--primary); }

/* ---------------- Glavni meni (v vrstici ali v pasu) ---------------- */
.navbar .main-nav { flex: 1 1 20rem; }
.menuband { background: var(--band); color: var(--on-band); position: relative; }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul { display: flex; flex-wrap: wrap; gap: .1rem; }
.main-nav li { position: relative; }
.main-nav a {
  display: flex; align-items: center;
  min-height: 44px; padding: .5em .9em;
  color: inherit; text-decoration: none; font-weight: 600;
  border-radius: 8px;
}
.main-nav a:hover { text-decoration: underline; }
.main-nav a[aria-current], .main-nav .is-current-ancestor > a,
.main-nav .is-current-ancestor > .sub-toggle--label {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.main-nav a[aria-current] { font-weight: 800; }
.menuband .main-nav a, .menuband .sub-toggle { min-height: 48px; }
.has-sub { display: flex; flex-wrap: wrap; align-items: center; }
.sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: none; border: 0; color: inherit; cursor: pointer;
  border-radius: 8px;
}
/* Vrsti 2 in 3: gumb nosi vidno oznako in nadomesti povezavo prve ravni. */
.sub-toggle--label {
  gap: .4em; padding: .5em .9em;
  font: inherit; font-weight: 600;
}
.sub-toggle--label:hover { text-decoration: underline; }
.sub-toggle svg { transition: transform .2s; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Podmeni: prekrivno okence na ploskvi (na vseh širinah); brez JS je razgrnjen
   v toku, a obdrži podlago ploskve — barve povezav zato nikoli ne padejo. */
.submenu {
  position: absolute; top: 100%; inset-inline-start: 0; z-index: 30;
  min-width: 15rem; max-width: calc(100vw - 2rem);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .4rem;
}
html.js .submenu { display: none; }
html.js .sub-toggle[aria-expanded="true"] + .submenu { display: block; }
html:not(.js) .submenu { position: static; min-width: 0; box-shadow: none; }
.submenu a { color: var(--link); }
.submenu a:hover { color: var(--link-hover); background: var(--primary-soft); }
.submenu a[aria-current] { color: var(--link-hover); background: var(--primary-soft); }
/* Globlje ravni znotraj odprtega podmenija (vrsti 2 in 3) */
.main-nav .submenu-nested { padding-inline-start: 1rem; }

/* ---------------- Iskalnik: gumb z okencem ---------------- */
.site-search { position: relative; }
.search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: var(--primary-hover); color: var(--on-primary);
  /* Obroba je zbledelo besedilo gumba — brez trdo zapisane bele. */
  border: 2px solid color-mix(in srgb, var(--on-primary) 45%, transparent);
  border-radius: calc(var(--radius) * .8);
  font: inherit; cursor: pointer;
}
/* Brez JS: gumb ne more odpreti panela, zato je skrit, panel pa stalno viden. */
html:not(.js) .search-toggle { display: none; }
html.js .site-search__panel { display: none; }
html.js .search-toggle[aria-expanded="true"] + .site-search__panel { display: block; }
.site-search__panel {
  margin-top: .5rem; padding: .75rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
}
/* Z JS je panel prekrivno okence pod gumbom, poravnano na končni rob orodij. */
html.js .site-search__panel {
  position: absolute; top: calc(100% + .5rem); inset-inline-end: 0; z-index: 30;
  margin-top: 0;
  width: min(24rem, calc(100vw - 2rem));
  box-shadow: var(--shadow-lg);
}
.site-search__label { display: block; margin-bottom: .35rem; font-weight: 600; }
.site-search__row { display: flex; gap: .5rem; }
.site-search__field { position: relative; flex: 1; }
.site-search__field input {
  width: 100%; min-height: 44px; padding: .4em 2.6em .4em .8em;
  background: var(--surface); color: var(--text);
  border: 2px solid var(--border); border-radius: calc(var(--radius) * .8);
  font: inherit;
}
.site-search__clear {
  position: absolute; inset-inline-end: .3rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2em; height: 2em;
  background: transparent; color: var(--text);
  border: 0; border-radius: calc(var(--radius) * .6);
  cursor: pointer;
}
.site-search__clear:hover { background: var(--primary-soft); }
/* Brez JS gumb za čiščenje ne deluje. */
html:not(.js) .site-search__clear { display: none; }
.site-search__submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: .4em 1em;
  background: var(--primary-hover); color: var(--on-primary);
  border: 2px solid color-mix(in srgb, var(--on-primary) 45%, transparent);
  border-radius: calc(var(--radius) * .8);
  font: inherit; cursor: pointer;
}

/* ---------------- Iskalnik: stalno vidno polje (ogrodji tasks, top-strip) ---------------- */
.hdr-search { display: flex; gap: .5rem; flex: 1 1 15rem; max-width: 26rem; }
.hdr-search input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 .8em;
  background: var(--surface); color: var(--text);
  border: 2px solid var(--border); border-radius: calc(var(--radius) * .8);
  font: inherit;
}
.navbar--dark .hdr-search input { border-color: var(--surface); }
.hdr-search__submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1em; flex: none;
  background: var(--primary-hover); color: var(--on-primary);
  border: 2px solid color-mix(in srgb, var(--on-primary) 45%, transparent);
  border-radius: calc(var(--radius) * .8);
  font: inherit; font-weight: 700; cursor: pointer;
}
.navbar--light .hdr-search__submit { background: var(--primary); }

/* ---------------- Predal (ogrodje menu-button) ---------------- */
.nav-toggle {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px; padding: .4em .9em;
  background: transparent; color: inherit;
  border: 2px solid currentColor; border-radius: calc(var(--radius) * .8);
  cursor: pointer; font: inherit; font-weight: 700;
}
/* Brez JS gumb ne more nič — skrije se, predal pa ostane razgrnjen. */
html:not(.js) .nav-toggle--drawer { display: none; }
html.js .menu-drawer { display: none; }
html.js .menu-drawer.open { display: block; }
.menu-drawer {
  background: var(--surface); color: var(--text);
  border-bottom: var(--divider-w, 1px) solid var(--border);
  box-shadow: var(--shadow-lg);
}
.menu-drawer__in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.25rem 2rem; padding-block: 1.5rem;
}
.menu-drawer__title { margin: 0 0 .3rem; font-weight: 700; }
.menu-drawer ul { list-style: none; margin: 0; padding: 0; }
.menu-drawer a {
  display: inline-flex; align-items: center;
  min-height: 42px; padding: .2em .5em; margin-inline-start: -.5em;
  color: var(--link); text-decoration: none; border-radius: 8px;
}
.menu-drawer a:hover { background: var(--primary-soft); text-decoration: underline; }
.menu-drawer a[aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.menu-drawer .submenu-nested { padding-inline-start: 1rem; }

/* ---------------- Pas bližnjic (ogrodje tasks) ---------------- */
.quickband { background: var(--surface-alt); border-bottom: var(--divider-w, 1px) solid var(--border); }
.quickband__in { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding-block: .5rem; }
.quickband__label { font-weight: 600; font-size: .95rem; }
.quickband a {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 .9em;
  background: var(--surface); color: var(--link);
  border: 1px solid var(--primary-line); border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: .95rem;
}
.quickband a:hover { background: var(--primary); color: var(--on-primary); text-decoration: underline; }

/* ---------------- Ogrodje top-strip: višja vrstica z veliko znamko ---------------- */
.site-header--top-strip { --band: var(--primary); --on-band: var(--on-primary); }
.site-header--top-strip .navbar__in { padding-block: 17.5px; gap: 1rem 1.5rem; }
.site-header--top-strip .brand__name { font-size: 1.55rem; }
.site-header--top-strip .brand__logo { height: 80px; }
.site-header--top-strip .brand__mono { width: 80px; height: 80px; border-radius: 50%; font-size: 1.15rem; }
.site-header--top-strip .navbar__tools { gap: .5rem 1rem; }
.site-header--top-strip .hdr-search { flex: 0 0 17.25rem; max-width: 17.25rem; gap: 0; }
.site-header--top-strip .hdr-search input {
  min-height: 51px;
  border-color: var(--primary);
  border-radius: 5px 0 0 5px;
  font-size: .9rem;
}
.site-header--top-strip .hdr-search__submit {
  min-height: 51px;
  margin-inline-start: -2px;
  border-color: var(--primary);
  border-radius: 0 5px 5px 0;
  font-size: .9rem;
  font-weight: 400;
  text-transform: uppercase;
}
.site-header--top-strip .main-nav > ul { gap: 0; }
.site-header--top-strip .main-nav > ul > li {
  flex: 1 1 0;
  min-width: 0;
  border-inline-start: 1px solid color-mix(in srgb, var(--on-band) 55%, transparent);
}
.site-header--top-strip .main-nav > ul > li:last-child {
  border-inline-end: 1px solid color-mix(in srgb, var(--on-band) 55%, transparent);
}
.site-header--top-strip .main-nav > ul > li > a,
.site-header--top-strip .main-nav > ul > li > .sub-toggle--label {
  width: 100%;
  border-radius: 0;
  font-size: .925rem;
  font-weight: 400;
  text-transform: uppercase;
}
.site-header--top-strip .main-nav > ul > .has-sub > a { width: calc(100% - 44px); }
.site-header--top-strip .main-nav > ul > .has-sub > .sub-toggle:not(.sub-toggle--label) { border-radius: 0; }
@media (min-width: 64rem) {
  .site-header--top-strip .navbar__tools { flex: 0 0 auto; flex-wrap: nowrap; }
  .site-header--top-strip .navbar__links ul { flex-wrap: nowrap; }
}

/* ---------------- Mega meni (vrsta 3, po zgledu w3.org) ----------------
   Pano se razgrne čez celotno širino svojega pasu (sidro je .navbar oz.
   .menuband); na ozkih zaslonih se stolpci sesujejo v enega. */
.navbar { position: relative; }
.main-nav--mega .has-sub { position: static; }
.main-nav--mega .submenu--mega {
  inset-inline: 0; top: 100%;
  min-width: 0; max-width: none; padding: 0;
  border-radius: 0; border-inline: 0;
  border-top: 1px solid var(--border);
}
.megamenu { display: grid; gap: 1rem; padding-block: 1rem; }
.main-nav .megamenu__feature-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: .3rem;
  border-radius: var(--radius);
  text-decoration: none;
  padding: 1rem 1.1rem;
  background: var(--surface-alt);
  color: var(--link);
}
.megamenu__feature-link:hover { background: var(--primary-soft); }
.megamenu__feature-link:hover .megamenu__feature-label { text-decoration: underline; }
.megamenu__icon { width: 40px; height: 40px; object-fit: contain; }
.megamenu__feature-label { font-weight: 800; font-size: 1.1rem; }
.megamenu__feature-desc { font-weight: 400; font-size: .95rem; color: var(--text-muted); }
.megamenu__cols { display: grid; gap: .5rem; }
.megamenu__col > ul { margin: 0; padding: 0; }
.megamenu__group {
  margin: .75rem 0 .1rem; padding-inline: .9em;
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted);
}
@media (min-width: 64rem) {
  .megamenu { grid-template-columns: 16rem minmax(0, 1fr); gap: 2rem; padding-block: 1.5rem; }
  .megamenu__cols { gap: 2rem; align-content: start; }
  .megamenu__cols[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .megamenu__cols[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .megamenu__group:first-child { margin-top: 0; }
}
/* Brez JavaScripta pano ni prekrivni sloj, ampak navaden razdelek v toku:
   postavka s podmenijem se raztegne čez vso vrstico, pano se izriše pod njo. */
html:not(.js) .main-nav--mega .submenu--mega { position: static; border: 0; }
html:not(.js) .main-nav--mega > ul { flex-wrap: wrap; }
html:not(.js) .main-nav--mega .has-sub { flex-basis: 100%; }

/* ---------------- Drobtine ---------------- */
.breadcrumbs { background: var(--surface-alt); border-bottom: var(--divider-w, 1px) solid var(--border); font-size: .9rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: .55rem 0; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .25rem; }
.breadcrumbs li + li::before { content: "›" / ""; color: var(--text-muted); padding-inline: .25rem; }
.breadcrumbs a { color: var(--text); }
.breadcrumbs a:hover { color: var(--link-hover); }
.breadcrumbs [aria-current] { color: var(--text-muted); }

/* ================= POSTAVITVE ================= */
.site-main { container-type: inline-size; padding-block: calc(2rem * var(--space, 1)) calc(3rem * var(--space, 1)); }
.site-main:focus { outline: none; }
/* Polnoširinska glava (temna/mehka pasica) se drži glave spletišča — brez zgornjega odmika. */
.site-main--bleed { padding-block-start: 0; }

.layout { display: grid; gap: calc(2.5rem * var(--space, 1)); align-items: start; }
@media (min-width: 64rem) {
  .layout--aside-right { grid-template-columns: minmax(0, 1fr) 21rem; }
  .layout--aside-left  { grid-template-columns: 21rem minmax(0, 1fr); }
  .layout--aside-left .layout__main  { grid-column: 2; grid-row: 1; }
  .layout--aside-left .layout__aside { grid-column: 1; grid-row: 1; }
}
.layout__aside {
  background: var(--surface-alt);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius);
  padding: calc(1.5rem * var(--space, 1));
}
.layout__aside > :first-child { margin-top: 0; }
.aside-band { background: var(--surface-alt); border-block: 1px solid var(--border); padding-block: 2.5rem; margin-top: 1rem; }
.aside-band > .container > :first-child { margin-top: 0; }

.page-title { margin-bottom: .8rem; }
.page-lead { font-size: 1.15rem; color: var(--text-muted); max-width: 46em; }

/* ================= GLAVA STRANI (predloge) =================
   Pasica na vrhu strani po izbrani predlogi (App\Core\PageTemplates); drobtine
   so del glave. Vse barve so žetoni: temna pasica in pano hero predloge ležita
   na --band / --on-band (odtenek glavne barve, izpeljano na ≥ 7 : 1), hero s
   polno sliko na senčenju (--scrim / --on-scrim, ker pod njim preseva slika),
   mehke pa na izpeljanih podlagah (--primary-soft, --accent-soft, --*-soft),
   kjer besedilo doseže 4,5 : 1. */
.pageheader { margin-bottom: calc(2rem * var(--space, 1)); }
.pageheader__crumbs { font-size: .9rem; margin-bottom: 1rem; font-family: var(--font-ui, inherit); }
.pageheader__crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.pageheader__crumbs li { display: inline-flex; align-items: center; gap: .25rem; }
.pageheader__crumbs li + li::before { content: "›" / ""; padding-inline: .25rem; }
.pageheader__crumbs a { color: var(--text); }
.pageheader__crumbs [aria-current],
.pageheader__crumbs li + li::before { color: var(--text-muted); }
.pageheader__title { margin: 0 0 .35em; }
.pageheader__kicker {
  margin: 0 0 .6rem;
  font-size: .85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  font-family: var(--font-ui, inherit);
}
.pageheader__lead { font-size: 1.15rem; max-width: 46em; margin: 0; }
.pageheader__meta { margin: 0 0 1rem; font-size: .95rem; color: var(--text-muted); }
.pageheader__ctarow { margin: 1.4rem 0 0; }
.pageheader--center { text-align: center; }
.pageheader--center .pageheader__crumbs ol { justify-content: center; }
.pageheader--center .pageheader__lead { margin-inline: auto; }

/* Vsebinska stran: drobtine nad naslovom, ločnica pod glavo */
.pageheader--plain { padding-bottom: calc(1.25rem * var(--space, 1)); border-bottom: var(--divider-w, 1px) solid var(--border); }
.pageheader--plain .pageheader__lead { color: var(--text-muted); }

/* Novica ali članek: nadnaslov v poudarni barvi, poudarjen uvod */
.pageheader--article .pageheader__kicker { color: var(--accent-text); }
.pageheader--article .pageheader__lead { color: var(--text); font-weight: 600; }

/* Prosta stran: glava nosi le skrit naslov, zato nima višine. Postavitev jo
   izpiše zunaj .container in <main> pusti brez zgornjega odmika, tu odpade še
   odmik pod glavo in nad prvim blokom — vsebina se stika z menijem. */
.pageheader--bare { margin-bottom: 0; }
/* Blok »Odmik« z negativno velikostjo je izjema: njegov negativni zgornji rob
   je namenoma nastavljen, zato ga tu ne izničimo. */
.pageheader--bare + .container > :first-child:not(.spacer--neg),
.pageheader--bare + .container .page-article > :first-child:not(.spacer--neg) { margin-top: 0; }

/* Pasice: temna in mehka sta polnoširinski (barva od roba do roba, kot
   navigacijska vrstica) in se držita glave spletišča; vsebina znotraj je v
   .container. Drobtine na podlagi pasice podedujejo njeno barvo besedila
   (zajamčena kombinacija). */
.pageheader--band { padding: calc(1.75rem * var(--space, 1)) calc(1.75rem * var(--space, 1)) calc(2rem * var(--space, 1)); border-radius: var(--radius); }
.pageheader--band .pageheader__crumbs { margin-bottom: .75rem; }
.pageheader--band .pageheader__crumbs a,
.pageheader--band .pageheader__crumbs [aria-current],
.pageheader--band .pageheader__crumbs li + li::before { color: inherit; }
.pageheader--bleed { border-radius: 0; padding-inline: 0; }
.pageheader--band-dark { background: var(--band); color: var(--on-band); }
.pageheader--band-soft { background: var(--primary-soft); color: var(--text); }
.pageheader--band-accent { background: var(--accent-soft); }

/* Predloga »obvestilo«: enaka oblika kot komponenta .notice — oglat, poudarjen
   levi rob (7 px) in obroba naokoli v barvi obvestila; zaokrožena desna stran. */
.pageheader--notice {
  color: var(--text);
  border: 1px solid var(--border);
  border-inline-start-width: 7px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.pageheader--notice-info { background: var(--info-soft); border-color: var(--info); }
.pageheader--notice-success { background: var(--success-soft); border-color: var(--success); }
.pageheader--notice-warning { background: var(--warning-soft); border-color: var(--warning); }
.pageheader--notice-danger { background: var(--danger-soft); border-color: var(--danger); }

/* Hero s sliko: fotografija ob panoju na temni pasici. Brez fotografije ostane
   pano čez vso širino (enak videz kot temna pasica z gumbom). */
.pageheader__hero {
  display: grid;
  border-radius: var(--radius); overflow: hidden;
  background: var(--band); color: var(--on-band);
  box-shadow: var(--shadow);
}
@media (min-width: 48rem) {
  .pageheader__hero:not(.pageheader__hero--noimg) { grid-template-columns: 1.15fr 1fr; }
  .pageheader--media-end .pageheader__media { order: 2; }
}
.pageheader__media { position: relative; }
/* Razmerje kot najmanjša višina celice; pano jo lahko razširi, slika pokrije vse. */
.pageheader__media::before { content: ""; display: block; padding-top: 75%; }
.pageheader__media--r169::before { padding-top: 56.25%; }
.pageheader__media--r11::before { padding-top: 100%; }
.pageheader__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pageheader__panel { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-self: center; }

/* Gumb na temni podlagi: obrnjen par --on-band / --band (isto zajamčeno razmerje
   ≥ 7 : 1); enako berljiv tudi na senčenju hero predloge s polno sliko. */
.pageheader__cta { background: var(--on-band); color: var(--band); }
.pageheader__cta:hover { background: color-mix(in srgb, var(--on-band) 85%, var(--band)); color: var(--band); }

/* Hero s polno sliko: besedilo leži na senčenju, ne na sliki — enak vzorec kot
   vrtiljak »slika čez celotno površino« (glej komentar pri .carousel--overlay). */
.pageheader__overlay {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: var(--radius); overflow: hidden;
  background: var(--scrim); color: var(--on-scrim);
  box-shadow: var(--shadow);
}
.pageheader__overlay--low { min-height: clamp(13rem, 30vw, 20rem); }
.pageheader__overlay--med { min-height: clamp(18rem, 44vw, 28rem); }
.pageheader__overlay--high { min-height: clamp(24rem, 58vw, 38rem); }
.pageheader__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pageheader__overlay::before {
  content: "";
  position: absolute; z-index: 1; inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--scrim) 6%, transparent) 0%,
    color-mix(in srgb, var(--scrim) 24%, transparent) 48%,
    color-mix(in srgb, var(--scrim) 68%, transparent) 100%
  );
}
.pageheader__caption { position: relative; z-index: 2; padding: 2.5rem clamp(1.25rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 2.5rem); }
.pageheader__caption::before {
  content: "";
  position: absolute; inset: -3rem auto -1rem -1rem;
  width: min(56rem, calc(100% + 2rem));
  background: radial-gradient(
    ellipse at left bottom,
    color-mix(in srgb, var(--scrim) 92%, transparent) 0%,
    color-mix(in srgb, var(--scrim) 78%, transparent) 48%,
    transparent 78%
  );
}
.pageheader__caption > * { position: relative; }
.pageheader__caption .pageheader__title {
  max-width: 26ch;
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  text-shadow: 0 2px 8px var(--shadow-color);
  text-wrap: balance;
}
.pageheader__caption .pageheader__lead { text-shadow: 0 1px 6px var(--shadow-color); }

/* ---------------- Vsebina (prose) ---------------- */
.prose { max-width: var(--prose-maxw, 70ch); }
.layout__aside .prose, .card .prose { max-width: none; }
/* Podčrtaj je privzet; če ga urednik izklopi, mora povezavo od besedila ločiti
   barva (3 : 1, G183) — poročilo v Videzu to takrat preverja. Ob prehodu miške
   in fokusu se podčrtaj vrne v vsakem primeru (SC 1.4.1). */
.prose a { text-decoration: var(--prose-underline, underline); }
.prose a:hover, .prose a:focus-visible { text-decoration: underline; }
.prose a:visited { color: var(--link-visited); }
.prose ul, .prose ol { padding-inline-start: 1.4em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
.prose blockquote {
  margin: 1.25em 0; padding: .5em 1.25em;
  border-inline-start: 4px solid var(--accent);
  background: var(--surface-alt); border-radius: 0 var(--radius) var(--radius) 0;
}
.block-heading { margin-top: 1.5em; }
.block-cta { margin-block: 1.5rem; }

/* Dvostolpčni uvod: pas sega do robov okna, vsebina pa ostane poravnana z
   običajnim kontejnerjem. Podlaga je isti žeton kot pri svetli nogi. */
.introcols {
  width: 100cqw;
  margin-inline: calc(50% - 50cqw);
  background: var(--surface-alt);
  color: var(--text);
}
.introcols__grid {
  display: grid;
  gap: calc(2.5rem * var(--space, 1));
  padding-block: calc(2.5rem * var(--space, 1));
}
.introcols__col { max-width: none; min-width: 0; }
.introcols__col > :first-child { margin-top: 0; }
.introcols__col > :last-child { margin-bottom: 0; }
@media (min-width: 48rem) {
  .introcols--60-40 .introcols__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .introcols--50-50 .introcols__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .introcols--40-60 .introcols__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* Seznami (blok) */
.block-list { margin: 0 0 1.5rem; padding-inline-start: 1.4em; max-width: var(--prose-maxw, 70ch); }
.block-list > li { margin-bottom: .4em; }
.block-list__desc { display: block; font-size: .92rem; color: var(--text-muted); }
.block-list__meta { font-weight: 400; color: var(--text-muted); }
/* Dostopna alternativa datoteke — ločena povezava ob nedostopnem izvirniku. */
.block-list__alt { margin-inline-start: .6em; font-size: .92rem; }
.block-list--links, .block-list--files { list-style: none; padding-inline-start: 0; }
.block-list--links > li, .block-list--files > li {
  margin: 0; padding: .6rem .25rem;
  border-bottom: var(--divider-w, 1px) solid var(--border);
}
.block-list--links > li:first-child, .block-list--files > li:first-child { border-top: var(--divider-w, 1px) solid var(--border); }
.block-list--links a, .block-list--files a {
  font-weight: 600;
  display: inline-flex; flex-wrap: wrap; gap: .35em; align-items: baseline;
  min-height: 24px;
}
.layout__aside .block-list, .aside-band .block-list { max-width: none; }

.block-image { margin: 1.5rem 0; }
.block-image img { border-radius: var(--radius); display: block; max-width: 100%; height: auto; }
.block-image figcaption { font-size: .9rem; color: var(--text-muted); margin-top: .5rem; }
/* Navedba avtorja je ločena vrstica pod podnapisom — ne del stavka. */
.block-image__credit { display: block; font-size: .85rem; opacity: .9; }
/* Dolgi opis grafa ali diagrama: razdelek, ki ga razpre vsak bralec, ne le bralnik zaslona. */
.block-image__long { margin-top: .6rem; border: 1px solid var(--border); border-radius: calc(var(--radius) * .7); padding: 0 1rem; }
.block-image__long > summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.block-image__long .prose { padding-bottom: .5rem; }

/* ================= SEZNAM PODATKOV =================
   Pari izraz–vrednost (blok »Seznam podatkov«). V vseh treh oblikah je v kodi
   en sam <dl> — postavitev je izključno stvar CSS, pomen pa oznak, zato bralnik
   zaslona povsod prebere isto: koliko parov je in kaj sodi h komu.

   Prazne vrstice med skupinama parov ni v kodi: ločuje ju razmik na naslednjem
   paru (--gap). Prazen <dt></dt> bi bil za bralnik zaslona par brez vsebine,
   razmik pa je zgolj videz — kadar sta skupini pomensko različni, sodi vmes
   naslov (SC 1.3.1). */
.datalist { margin-block: 1.5rem; max-width: var(--prose-maxw, 70ch); }
.datalist__title { margin: 0 0 .75rem; }
.datalist__pairs { margin: 0; }
.datalist__value { margin: 0; }
.layout__aside .datalist, .aside-band .datalist, .card .datalist { max-width: none; }

/* Dvostolpčno: en sam mrežni vsebnik, da so stolpci poravnani po vsem seznamu.
   Na ozkem zaslonu se vrednost postavi pod izraz — izraz zato nikoli ne stisne
   vrednosti v en znak na vrstico (SC 1.4.10). */
.datalist--rows .datalist__term { font-weight: 700; }
.datalist--rows .datalist__value { margin-bottom: .6em; }
.datalist--rows .datalist__term--gap { margin-top: calc(.9rem * var(--space, 1)); }
@media (min-width: 40rem) {
  .datalist--rows .datalist__pairs {
    display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr;
    column-gap: calc(1.5rem * var(--space, 1)); row-gap: calc(.5rem * var(--space, 1));
  }
  .datalist--rows .datalist__value { margin-bottom: 0; }
  .datalist--rows .datalist__value--gap { margin-top: calc(.9rem * var(--space, 1)); }
}

/* Strnjeno, v vrstici — za nogo strani in stransko vrstico. Dvopičje za izrazom
   je pravo besedilo v <dt> in ne pseudoelement, zato ga bralnik zaslona prebere. */
.datalist--inline .datalist__pairs { display: flex; flex-direction: column; gap: .35em; }
.datalist--inline .datalist__pair { display: flex; flex-wrap: wrap; gap: .4em; }
.datalist--inline .datalist__term { font-weight: 700; }
.datalist--inline .datalist__pair--gap { margin-top: calc(.8rem * var(--space, 1)); }

/* Kartice: vsak par v svoji ploščici, a še vedno <dt>/<dd> v skupnem <dl>. */
.datalist--cards { max-width: none; }
.datalist--cards .datalist__pairs { display: grid; gap: calc(1rem * var(--space, 1)); }
@media (min-width: 40rem) {
  .datalist--cards .datalist__pairs { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
.datalist--cards .datalist__pair {
  padding: calc(.9rem * var(--space, 1)) calc(1.1rem * var(--space, 1));
  background: var(--surface); border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius);
}
.datalist--cards .datalist__term {
  font-size: .85rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-muted);
}
.datalist--cards .datalist__value { margin-top: .25rem; }

/* ================= CITAT =================
   Izjava v <blockquote>, vir v <figcaption> istega <figure>. Narekovaj je okras
   (aria-hidden v izpisu) — bralnik zaslona bi osamljeni znak prebral kot besedo
   sredi stavka, pomen citata pa nosi že besedilo samo. */
.quote { margin-block: 1.5rem; max-width: var(--prose-maxw, 70ch); }
.quote__text { margin: 0; font-size: 1.1rem; line-height: 1.55; }
.quote__text p { margin: 0 0 .5em; }
.quote__text p:last-child { margin-bottom: 0; }
.quote__source { margin-top: .75rem; color: var(--text-muted); }
.quote__source strong { color: var(--text); }
.quote__mark { font-weight: 700; line-height: 1; color: var(--accent-text); }
.layout__aside .quote, .aside-band .quote { max-width: none; }

.quote--feature {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .5rem; border-radius: var(--radius); background: var(--surface-alt);
  padding: calc(2rem * var(--space, 1)) calc(1.5rem * var(--space, 1));
}
.quote--feature .quote__mark { font-size: 3rem; }
.quote--feature .quote__text { font-size: clamp(1.15rem, 2.5vw, 1.4rem); font-weight: 600; }

.quote--classic {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem .6rem;
  padding: calc(1.25rem * var(--space, 1)) calc(1.5rem * var(--space, 1));
}
.quote--classic .quote__mark { font-size: 1.75rem; }
.quote--classic .quote__text { flex: 1 1 12rem; }
.quote--classic .quote__source {
  flex: 1 0 100%; margin-top: .25rem;
  margin-inline-start: calc(1.75rem + .6rem);
}

.quote--plain { padding-inline-start: 1.25rem; border-inline-start: 4px solid var(--accent); }
/* Ležeče je tu razlikovalni znak oblike; ker je citat kratek, ostane berljiv
   tudi bralcem z disleksijo — daljša besedila v tem spletišču ležeča niso. */
.quote--plain .quote__text { font-style: italic; }

.quote--portrait {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(1.25rem * var(--space, 1));
  padding: calc(1.25rem * var(--space, 1)) calc(1.5rem * var(--space, 1));
  background: var(--surface); border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius);
}
/* Portret je okras ob že napisanem imenu — v izpisu ima prazen ALT. */
.quote__img { flex: none; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.quote--portrait .quote__body { flex: 1 1 14rem; }

/* ================= PLOŠČICE ================= */
.cards { margin-block: 1.5rem; }
.cards__list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(1.25rem * var(--space, 1)); }
@media (min-width: 40rem) {
  .cards--cols-2 .cards__list, .cards--cols-3 .cards__list, .cards--cols-4 .cards__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .cards--cols-3 .cards__list { grid-template-columns: repeat(3, 1fr); }
  .cards--cols-4 .cards__list { grid-template-columns: repeat(4, 1fr); }
}
.cards__list > li { display: flex; }
.card {
  display: flex; flex-direction: column; width: 100%;
  background: var(--surface);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow);
  transition: box-shadow .15s, translate .15s;
}
a.card:hover { box-shadow: var(--shadow-lg); translate: 0 -2px; }
a.card:hover .card__title { text-decoration: underline; color: var(--link-hover); }
.card__img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.card__body { display: flex; flex-direction: column; gap: .5rem; padding: calc(1.25rem * var(--space, 1)); flex: 1; }
.card__title { margin: 0; font-size: 1.2rem; color: var(--link); }
.card__text { margin: 0; color: var(--text-muted); flex: 1; }
.card__meta { font-size: .875rem; color: var(--text-muted); }
.card__badge {
  align-self: flex-start; margin-top: auto;
  font-size: .8rem; font-weight: 700;
  padding: .25em .8em; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--border); color: var(--text);
}
.cards--image:not(.cards--subnav-compact) .card {
  border: 0;
  border-radius: .5625rem;
  box-shadow: 0 9px 18px rgb(13 13 15 / .15);
}
.cards--image:not(.cards--subnav-compact) .card__img { aspect-ratio: 4 / 3; }
.cards--image:not(.cards--subnav-compact) .card__body { padding: calc(1.5rem * var(--space, 1)); }
.cards--compact .card__body { padding: .9rem 1.1rem; }
.cards--compact .card__title { font-size: 1.05rem; }

/* ================= MENIJSKE PLOŠČICE (blok submenu) =================
   Navigacijske povezave na podrejene menijske postavke. Mrežni prikazi
   ponovno uporabijo ploščice (.cards/.card); naslov in opis sta <span>
   (ne naslov h3 — kartica je povezava, ne razdelek vsebine). */
.cards--subnav .card__title { display: block; font-weight: 700; }
.cards--subnav .card__text { display: block; }

/* Kompaktna ploščica: slika levo, besedilo desno */
.cards--subnav .card--row { flex-direction: row; align-items: stretch; }
.cards--subnav .card__img--side {
  width: 5.5rem; min-width: 5.5rem; height: auto; min-height: 100%;
  aspect-ratio: auto; object-fit: cover; flex: none;
}
.cards--subnav-compact .card__body { padding: .9rem 1.1rem; }
.cards--subnav-compact .card__title { font-size: 1.05rem; }

/* Poenostavljene ploščice s puščico */
.subnav-tiles { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: calc(.75rem * var(--space, 1)); }
@media (min-width: 40rem) {
  .subnav-tiles--cols-2, .subnav-tiles--cols-3, .subnav-tiles--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .subnav-tiles--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .subnav-tiles--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.subnav-tile {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 48px; padding: .8rem 1.1rem;
  background: var(--surface); border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  text-decoration: none; color: var(--link); font-weight: 700;
  transition: box-shadow .15s, translate .15s;
}
.subnav-tile:hover { box-shadow: var(--shadow-lg); translate: 0 -2px; color: var(--link-hover); }
.subnav-tile:hover span { text-decoration: underline; }
.subnav__arrow { flex: none; }

/* Horizontalni in vertikalni seznam */
.subnav-list { list-style: none; margin: 1.5rem 0; padding: 0; }
.subnav-list a {
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px; color: var(--link); text-decoration: none;
}
/* Podčrtan je samo naziv — opis je pojasnilo, ne del oznake povezave. */
.subnav-list__label { text-decoration: underline; text-underline-offset: .2em; }
.subnav-list a:hover { color: var(--link-hover); }
.subnav-list a:hover .subnav-list__label { text-decoration-thickness: 2px; }
.subnav-list__text { display: flex; flex-direction: column; gap: .15rem; }
.subnav-list__desc { color: var(--text-muted); font-size: .95rem; }
.subnav-list--h { display: flex; flex-wrap: wrap; column-gap: 2rem; row-gap: .25rem; }
.subnav-list--v > li + li { border-top: 1px solid var(--border); }
.subnav-list--v a { justify-content: space-between; padding: .8rem .25rem; }
.subnav-list--v .subnav-list__label { font-weight: 700; }

/* ================= HARMONIKA ================= */
/* Brez overflow: hidden — ta bi odrezal fokusni obroč gumbov, ki segajo od roba do roba.
   Zaokrožitev vogalov zato prevzameta prvi in zadnji vidni gumb (glej spodaj). */
.accordion { margin-block: 1.5rem; border: var(--surface-border-w, 1px) solid var(--border); border-radius: var(--radius); background: var(--surface); }
.accordion__heading { margin: 0; font-size: 1.05rem; }
.accordion__heading + .accordion__panel, .accordion__panel + .accordion__heading { border-top: 1px solid var(--border); }
.accordion__trigger {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  width: 100%; min-height: 48px; padding: calc(.9rem * var(--space, 1)) calc(1.25rem * var(--space, 1));
  background: none; border: 0; cursor: pointer;
  text-align: start; font-weight: 700; color: var(--text);
}
.accordion__trigger:hover { background: var(--primary-soft); color: var(--link-hover); }
.accordion__trigger[aria-expanded="true"] { background: var(--surface-alt); color: var(--link); }
.accordion__trigger svg { flex: none; transition: transform .2s; }
.accordion__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.accordion > :first-child .accordion__trigger {
  border-start-start-radius: calc(var(--radius) - 1px); border-start-end-radius: calc(var(--radius) - 1px);
}
.accordion > :last-child .accordion__trigger,
.accordion__heading:has(+ .accordion__panel[hidden]:last-child) .accordion__trigger {
  border-end-start-radius: calc(var(--radius) - 1px); border-end-end-radius: calc(var(--radius) - 1px);
}
.accordion__content { padding: calc(1rem * var(--space, 1)) calc(1.25rem * var(--space, 1)); }

/* ================= ZAVIHKI ================= */
.tabs { margin-block: 1.5rem; }
.tabs__list { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--border-strong); margin-bottom: 1.25rem; }
.tabs__list [role="tab"] {
  min-height: 44px; padding: .5em 1.1em;
  background: none; border: 0; border-bottom: 4px solid transparent;
  margin-bottom: -2px;
  font-weight: 700; color: var(--text-muted); cursor: pointer;
  border-radius: 8px 8px 0 0;
}
.tabs__list [role="tab"]:hover { color: var(--link-hover); background: var(--primary-soft); }
.tabs__list [role="tab"][aria-selected="true"] { color: var(--link); border-bottom-color: var(--primary-line); }
.tabs__section[role="tabpanel"] { border-radius: var(--radius); }
.tabs__heading { margin-top: 1rem; }

/* ================= TABELA ================= */
.table-wrap { overflow-x: auto; margin-block: 1.5rem; border: var(--surface-border-w, 1px) solid var(--border); border-radius: var(--radius); background: var(--surface); }
.table { border-collapse: collapse; width: 100%; min-width: 34rem; }
.table caption { text-align: start; font-weight: 700; padding: .9rem 1rem; font-size: 1.05rem; }
.table th, .table td { padding: calc(.65rem * var(--space, 1)) calc(1rem * var(--space, 1)); text-align: start; border-top: 1px solid var(--border); }
.table thead th { background: var(--surface-alt); border-bottom: 2px solid var(--border-strong); }
.table tbody tr:nth-child(even) { background: var(--surface-mute); }
.table tbody th { background: var(--surface-alt); font-weight: 700; }

/* ================= VRTILJAK ================= */
.carousel { margin-block: 1.5rem; position: relative; }
.carousel__controls { display: flex; gap: .5rem; justify-content: flex-end; margin-bottom: .6rem; }
html:not(.js) .carousel__controls, html:not(.js) .carousel__dots { display: none; }
.carousel__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: var(--surface); color: var(--link);
  border: 2px solid var(--primary-line); border-radius: 50%;
  cursor: pointer;
}
.carousel__btn:hover { background: var(--primary); color: var(--on-primary); }
.carousel__btn--toggle .ico-play { display: none; }
.carousel__btn--toggle[data-state="paused"] .ico-play { display: block; }
.carousel__btn--toggle[data-state="paused"] .ico-pause { display: none; }

.carousel:not(.is-ready) .carousel__slide + .carousel__slide { margin-top: 1.25rem; }
.carousel__slide { border: var(--surface-border-w, 1px) solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.carousel__img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.carousel__caption { padding: 1.25rem 1.5rem 1.5rem; }
.carousel__kicker { margin: 0 0 .25rem; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-text); }
.carousel__title { margin: 0 0 .4rem; font-size: 1.45rem; font-weight: 800; line-height: 1.25; }
.carousel__text { margin: 0 0 1rem; color: var(--text-muted); max-width: 60ch; }

/* Trenutni diapozitiv je polna tabletka, ostali so obrobljeni krogci — razlika je v
   obliki in ne le v barvi (SC 1.4.1). Polnilo je --primary-line, ker je edini žeton
   glavne barve, ki je zajamčeno 3 : 1 proti podlagam (SC 1.4.11). */
.carousel__dots { display: flex; gap: .4rem; justify-content: center; margin-top: .75rem; }
.carousel__dots button {
  width: 24px; height: 24px;
  border-radius: 999px; border: 2px solid var(--primary-line);
  background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.carousel__dots button::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.carousel__dots button:hover::after { background: var(--primary-hover); }
.carousel__dots button[aria-current] { width: 3rem; background: var(--primary-line); }
.carousel__dots button[aria-current]::after { background: transparent; }

/* Upravljanje leži znotraj diapozitiva — v kartici je dovolj prostora, zato se
   orodji le pomakneta vanjo (gumbi zgoraj desno, indikatorji spodaj na sredini).
   Oboje ima lastno neprosojno podlago in obrobo, zato razmerje 3 : 1 drži tudi
   nad sliko (SC 1.4.11). Prostor je zadržan s praznim robom napisa, da se
   besedilo z upravljanjem ne prekriva niti pri 200 % povečavi (SC 1.4.10).
   Postavitev velja šele, ko vrtiljak teče (.is-ready); brez JS ali pri enem
   diapozitivu ostane upravljanje v toku dokumenta. */
.carousel--split.is-ready .carousel__controls {
  position: absolute; z-index: 2;
  top: .9rem; inset-inline-end: .9rem;
  margin: 0; gap: .4rem;
}
.carousel--split.is-ready .carousel__btn { box-shadow: var(--shadow); }
.carousel--split.is-ready .carousel__dots {
  position: absolute; z-index: 2; inset-inline: 0; bottom: .9rem;
  width: fit-content; margin: 0 auto;
  padding: .35rem .6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.carousel--split.is-ready .carousel__caption { padding-bottom: 4rem; }
/* Diapozitiv brez slike: napis je prvi in sega do vrha, zato je treba zadržati
   še prostor za gumbe zgoraj. */
.carousel--split.is-ready .carousel__caption:first-child { padding-top: 4rem; }

@media (min-width: 48rem) {
  .carousel--split.is-ready .carousel__slide { display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; }
  .carousel--split.is-ready .carousel__img { height: 100%; aspect-ratio: auto; min-height: 18rem; }
  /* Napis je v desnem stolpcu — pod gumbi zgoraj desno in nad indikatorji, ki jih
     pri več diapozitivih tabletka razširi tudi pod njegov stolpec. */
  .carousel--split.is-ready .carousel__caption { align-self: center; padding: 4rem 2rem; }
}

/* ---- Različica »slika čez celotno površino« ----
   Naslov, besedilo in gumb ležijo na sliki. Berljivosti ne sme določati slika,
   zato je pod besedilom senčenje (--scrim), ki je tam neprosojno 94 % in se šele
   nad besedilom zlije s sliko; razmerje --on-scrim : --scrim je izpeljano na 7 : 1,
   kar je rezerva za tistih 6 %, ki jih slika še prosveti (Videz → Barve to razmerje pokaže).
   Besedilo ostane v toku diapozitiva (slika je pod njim absolutno), zato se pri
   povečavi diapozitiv razteza in besedilo nikoli ne uide iz njega (SC 1.4.10). */
.carousel--overlay .carousel__slide {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(20rem, 52vw, 34rem);
  background: var(--scrim);
}
.carousel--overlay .carousel__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
}
.carousel--overlay .carousel__slide::before {
  content: "";
  position: absolute; z-index: 1; inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--scrim) 6%, transparent) 0%,
    color-mix(in srgb, var(--scrim) 24%, transparent) 48%,
    color-mix(in srgb, var(--scrim) 68%, transparent) 100%
  );
}
.carousel--overlay .carousel__caption {
  position: relative; z-index: 2;
  padding: 2.5rem clamp(1.25rem, 3vw, 2.75rem) clamp(3.75rem, 4vw, 4.5rem);
}
/* Močnejše senčenje je omejeno na območje vsebine in se proti prostemu delu
   slike postopoma izgubi. */
.carousel--overlay .carousel__caption::before {
  content: "";
  position: absolute; inset: -3rem auto -1rem -1rem;
  width: min(56rem, calc(100% + 2rem));
  background: radial-gradient(
    ellipse at left bottom,
    color-mix(in srgb, var(--scrim) 92%, transparent) 0%,
    color-mix(in srgb, var(--scrim) 78%, transparent) 48%,
    transparent 78%
  );
}
.carousel--overlay .carousel__caption > * { position: relative; }
.carousel--overlay .carousel__kicker {
  display: inline-flex; width: fit-content;
  margin-bottom: .7rem; padding: .3rem .85rem;
  background: color-mix(in srgb, var(--on-scrim) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-scrim) 20%, transparent);
  color: var(--on-scrim);
  border-radius: 999px;
  backdrop-filter: blur(12px);
}
.carousel--overlay .carousel__title {
  max-width: 26ch;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem);
  color: var(--on-scrim);
  text-shadow: 0 2px 8px var(--shadow-color);
  text-wrap: balance;
}
.carousel--overlay .carousel__text { color: var(--on-scrim); }
.carousel--overlay .btn--on-image { border-color: var(--on-scrim); }
.carousel--overlay .btn--secondary {
  background: color-mix(in srgb, var(--on-scrim) 12%, transparent);
  border-color: color-mix(in srgb, var(--on-scrim) 45%, transparent);
  color: var(--on-scrim);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.carousel--overlay .btn--secondary:hover {
  background: color-mix(in srgb, var(--on-scrim) 22%, transparent);
  color: var(--on-scrim);
}

/* Steklena orodna vrstica sledi referenčnemu vzorcu carousel.html. */
.carousel--overlay .carousel__controls {
  position: absolute; z-index: 2; top: 1.25rem; inset-inline-end: 1.25rem;
  margin: 0; gap: .4rem; padding: .4rem;
  background: color-mix(in srgb, var(--scrim) 64%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-scrim) 45%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.carousel--overlay .carousel__btn {
  background: transparent; color: var(--on-scrim); border: 0;
  border-radius: calc(var(--radius) * .8);
  transition: background-color .2s ease, transform .2s ease;
}
.carousel--overlay .carousel__btn--toggle {
  background: color-mix(in srgb, var(--primary) 96%, transparent);
  color: var(--on-primary);
  box-shadow: inset 0 0 0 2px var(--on-scrim);
}
.carousel--overlay .carousel__btn:hover {
  background: color-mix(in srgb, var(--primary) 85%, transparent);
  color: var(--on-primary); transform: translateY(-1px);
}
.carousel--overlay .carousel__dots {
  position: absolute; z-index: 2; inset-inline: 0; bottom: 1.15rem; margin: 0;
  gap: .55rem;
}
/* Vidni indikator je manjši od 24-pikslovske klikovne tarče. */
.carousel--overlay .carousel__dots button { border: 0; }
.carousel--overlay .carousel__dots button::after {
  background: color-mix(in srgb, var(--on-scrim) 75%, transparent);
  box-shadow: 0 0 0 2px var(--scrim);
}
.carousel--overlay .carousel__dots button:hover::after { background: var(--on-scrim); }
.carousel--overlay .carousel__dots button[aria-current] { background: transparent; }
.carousel--overlay .carousel__dots button[aria-current]::after {
  width: 2.3rem; height: .75rem;
  border: 2px solid var(--on-scrim); border-radius: 999px;
  background: var(--on-scrim);
  box-shadow: 0 0 0 1px var(--scrim);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .carousel--overlay .carousel__controls {
    background: color-mix(in srgb, var(--scrim) 78%, transparent);
  }
}

@media (max-width: 47.99rem) {
  .carousel--overlay .carousel__caption {
    padding-top: 7.25rem;
  }
  .carousel--overlay .carousel__caption::before {
    inset-inline: 0;
    width: 100%;
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--scrim) 72%, transparent) 0%,
      color-mix(in srgb, var(--scrim) 62%, transparent) calc(100% - 3rem),
      transparent 100%
    );
  }
}

/* ================= CARALT (alternativa vrtiljaku) ================= */
.caralt { margin-block: 1.5rem; }
.caralt__heading { margin-bottom: 1rem; }
.caralt__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 64rem) {
  .caralt__list {
    grid-template-columns: 3fr 2fr;
    grid-template-rows: repeat(var(--caralt-side-count), minmax(0, 1fr));
  }
  .caralt__main { grid-row: 1 / span var(--caralt-side-count); }
  .caralt__side { grid-column: 2; }
}
.caralt__feature, .caralt__item {
  height: 100%;
  background: var(--surface); border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.caralt__feature-link, .caralt__item-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.caralt__feature-link:hover, .caralt__item-link:hover { outline: 2px solid var(--primary-line); outline-offset: -2px; }
/* Fokusni obroč nosi kartica, ne povezava: povezava je otrok kartice, ki ima overflow: hidden,
   zato bi bil obroč okoli povezave odrezan. Tako je obroč enak kot pri .card. */
.caralt__feature:has(.caralt__feature-link:focus-visible),
.caralt__item:has(.caralt__item-link:focus-visible) {
  outline: 3px solid var(--focus-outer); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--focus-inner);
}
.caralt__feature-link:focus-visible, .caralt__item-link:focus-visible { outline: none; box-shadow: none; }
@supports not selector(:has(*)) {
  .caralt__feature:focus-within, .caralt__item:focus-within {
    outline: 3px solid var(--focus-outer); outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--focus-inner);
  }
}
.caralt__feature-link:hover .caralt__feature-title,
.caralt__item-link:hover .caralt__item-title { text-decoration: underline; color: var(--link-hover); }
.caralt__feature-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.caralt__feature-body { padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.caralt__feature-title { margin: 0; font-size: 1.5rem; color: var(--link); }
.caralt__text { margin: 0; color: var(--text-muted); }
.caralt__more { margin-top: auto; padding-top: 1rem; }
.caralt__item { display: flex; align-items: stretch; }
.caralt__item-link { flex: 1; flex-direction: row; align-items: stretch; }
.caralt__item-media { flex: none; width: 7.5rem; }
.caralt__item-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caralt__item-body { padding: .9rem 1.1rem; }
.caralt__item-title { margin: 0 0 .25rem; font-size: 1.05rem; color: var(--link); }
.caralt__item-body p { margin: 0; font-size: .95rem; color: var(--text-muted); }

/* ================= VIDEO IN ZVOK =================
   Bloka Video in Zvok imata isto ogrodje: naslov, predvajalnik (Able Player,
   lokalno v /vendor/), seznam poglavij in prepis. Barve predvajalnika so v
   ableplayer-theme.css, ki se naloži samo na straneh s takim blokom. */
.block-media { margin: 1.5rem 0; max-width: 60rem; }
.block-media__title { font-weight: 700; font-size: 1.1rem; margin-bottom: .6rem; }
.block-audio { max-width: 45rem; }

.block-media__chapters { margin-top: .8rem; }
.block-media__chapters:empty { display: none; }

.media-transcript { margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.media-transcript summary { padding: .8rem 1.1rem; font-weight: 700; cursor: pointer; min-height: 44px; }
.media-transcript > div { padding: 0 1.1rem 1rem; }
/* Samodejni prepis napiše predvajalnik. Če se ni zgradil, vsebnik ostane prazen
   in razdelka ne obljubljamo — ročno vpisan prepis je tu vedno izpisan. */
.media-transcript--auto:has(> div:empty) { display: none; }

/* ================= ODMIK =================
   Prazen prostor med bloki (blok »Odmik«). Element ne nosi vsebine, zato ga
   bralnik zaslona ne napove — razmik je zgolj videz in ne sme biti edini
   nosilec pomena (SC 1.3.1); vsebino ločujejo naslovi. Višina raste z gostoto
   (--space, Videz → Gostota) in se ožjim zaslonom prilagodi s clamp(), da
   odmik ne odrine vsebine z zaslona in ostane smiseln tudi pri 200 % povečavi.
   Robovi sosednjih blokov se prištejejo — odmik jih ne nadomesti. */
.spacer { height: calc(var(--spacer-h, 2rem) * var(--space, 1)); }
.spacer--mini { --spacer-h: clamp(.35rem, .8vw, .6rem); }
.spacer--s  { --spacer-h: clamp(.75rem, 1.5vw, 1.25rem); }
.spacer--m  { --spacer-h: clamp(1.5rem, 3vw, 2.5rem); }
.spacer--l  { --spacer-h: clamp(2.5rem, 5vw, 4rem); }
.spacer--xl { --spacer-h: clamp(4rem, 8vw, 6.5rem); }

/* Negativni odmik: isti žeton stopnje, le da namesto višine potegne naslednji
   blok navzgor (npr. da se vrtiljak stakne z glavo strani). Zgornja meja je
   »velik«, spodnja meja clamp() pa poskrbi, da je pri ožjih zaslonih in pri
   200 % povečavi pritegnitev manjša in vsebina ostane cela (SC 1.4.10). */
.spacer--neg {
  height: 0;
  margin-block-start: calc(-1 * var(--spacer-h, 2rem) * var(--space, 1));
}

/* ================= NOVICE ================= */
.post-meta { color: var(--text-muted); font-size: .95rem; }
.post-single__image { border-radius: var(--radius); margin-bottom: 1.25rem; }
.post-single__lead { font-size: 1.15rem; color: var(--text-muted); max-width: 46em; }

.cat-filter { margin-block: 1rem 1.5rem; }
.cat-filter ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.cat-filter a {
  display: inline-flex; align-items: center; gap: .3em;
  min-height: 40px; padding: .3em 1em;
  border: 2px solid var(--primary-line); border-radius: 999px;
  color: var(--link); text-decoration: none; font-weight: 600;
}
.cat-filter a:hover { background: var(--primary-soft); color: var(--link-hover); }
.cat-filter a[aria-current] { background: var(--primary); color: var(--on-primary); }
.cat-filter__count { font-weight: 400; }

.pagination ul { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 1.5rem 0; padding: 0; }
.pagination a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  border: 2px solid var(--primary-line); border-radius: calc(var(--radius) * .6);
  color: var(--link); text-decoration: none; font-weight: 700;
}
.pagination a:hover { background: var(--primary-soft); color: var(--link-hover); }
.pagination a[aria-current] { background: var(--primary); color: var(--on-primary); }

/* ================= DOGODKI =================
   Štirje prikazi po maskah designs/Dogodki - maske.dc.html: kartice (E2),
   podolgovate ploščice (E3), ploščice brez slike (E6) in seznam (E4). Zaporedje
   podatkov je povsod enako: datum → kategorija → naslov → kraj → opis → dejanje.
   Naslov (h3) je v DOM prvi element telesa (skok po naslovih pripelje do imena
   dogodka), vizualni vrstni red pa ureja `order` v flex stolpcu — zato imajo
   otroci telesa izrecne vrednosti order. Vse barve so žetoni. */

.ev-badge, .ev-flag, .ev-chip {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .8rem; font-weight: 700;
  padding: .15em .7em; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--border); color: var(--text);
  font-family: var(--font-ui, inherit);
}
/* Sprememba dogodka je označena z obliko (obroba, prečrtan datum) IN besedo —
   nikoli samo z barvo (SC 1.4.1). */
.ev-flag--cancelled { background: var(--danger-soft); border-color: var(--danger); }
.ev-flag--postponed { background: var(--warning-soft); border-color: var(--warning); }
.ev-chip { background: var(--primary); color: var(--on-primary); border-color: transparent; font-size: .85rem; }
.ev-chip--off { background: var(--danger-soft); color: var(--text); border-color: var(--danger); }

.ev-date { font-weight: 700; color: var(--link); font-family: var(--font-ui, inherit); }
.ev-date--off { text-decoration: line-through; color: var(--text-muted); }

/* ---- Kartice (E2) in ploščice brez slike (E6) ---- */
.ev-cards {
  list-style: none; margin: 1.5rem 0; padding: 0;
  display: grid; gap: calc(1.25rem * var(--space, 1));
}
@media (min-width: 40rem) { .ev-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .ev-cards { grid-template-columns: repeat(3, 1fr); } }
.ev-cards > li { display: flex; }
.ev-card {
  display: flex; flex-direction: column; width: 100%;
  background: var(--surface);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.ev-card__img { order: -1; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.ev-card__body { display: flex; flex-direction: column; gap: .5rem; padding: calc(1.25rem * var(--space, 1)); flex: 1; }
.ev-card__date { order: 1; margin: 0; }
.ev-card__cat, .ev-tile__badges { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.ev-card__cat { order: 2; margin: 0; }
.ev-card__title { order: 3; margin: 0; font-size: 1.15rem; }
.ev-card__place { order: 4; margin: 0; color: var(--text-muted); font-size: .95rem; }
.ev-card__desc { order: 5; margin: 0; color: var(--text-muted); }
.ev-card__more { order: 6; margin: auto 0 0; padding-top: .5rem; font-weight: 700; font-family: var(--font-ui, inherit); }

/* E6: pisana datumska glava namesto slike in nožica z uro */
.ev-card__datehead { order: 1; display: flex; flex-direction: column; }
.ev-card__bigdate { font-size: 1.35rem; font-weight: 800; line-height: 1.25; }
.ev-card__weekday { color: var(--text-muted); font-size: .95rem; }
.ev-card__foot {
  padding: .6rem calc(1.25rem * var(--space, 1));
  background: var(--surface-alt); border-top: 1px solid var(--border);
}

/* ---- Podolgovate ploščice (E3) ----
   Postavitev je mreža z imenovanimi območji: datumski blok je vizualno prvi,
   telo (z naslovom na začetku DOM) pa sredinsko — mreža loči vrstni red v kodi
   od vrstnega reda na zaslonu. */
.ev-tiles { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-direction: column; gap: calc(1rem * var(--space, 1)); }
.ev-tile {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  grid-template-areas: "date body action";
  background: var(--surface);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.ev-tile--img {
  grid-template-columns: 5.5rem 9rem minmax(0, 1fr) auto;
  grid-template-areas: "date img body action";
}
.ev-tile__img { grid-area: img; width: 100%; height: 100%; object-fit: cover; }
.ev-datebox {
  grid-area: date;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  padding: .75rem .4rem;
  background: var(--primary); color: var(--on-primary);
  text-align: center; font-family: var(--font-ui, inherit);
}
.ev-datebox--muted { background: var(--surface-mute); color: var(--text); }
.ev-datebox--cancelled { background: var(--danger-soft); color: var(--text); }
.ev-datebox__mon { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ev-datebox__day { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.ev-datebox__day--off { text-decoration: line-through; }
.ev-datebox__time { font-size: .8rem; opacity: .92; }
.ev-tile__body { grid-area: body; display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; min-width: 0; }
.ev-tile__badges { order: 1; margin: 0; }
.ev-tile__title { order: 2; margin: 0; font-size: 1.15rem; }
.ev-tile__place { order: 3; margin: 0; color: var(--text-muted); font-size: .95rem; }
.ev-tile__desc { order: 4; margin: 0; color: var(--text-muted); }
.ev-tile__action {
  grid-area: action;
  display: flex; align-items: center;
  padding: 1rem 1.1rem;
  border-inline-start: 1px solid var(--border);
  font-weight: 700; font-family: var(--font-ui, inherit);
  white-space: nowrap;
}
.ev-tile__offnote { color: var(--text-muted); font-weight: 400; }
@media (max-width: 47.99rem) {
  .ev-tile, .ev-tile--img { grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "date body" "date action"; }
  .ev-tile__img { display: none; } /* slika je okrasna (alt=""), na ozkem zaslonu odpade */
  .ev-tile__action { border-inline-start: 0; padding-top: 0; align-items: flex-start; white-space: normal; }
}

/* ---- Seznam brez ploščic (E4) — meseci so naslovi, ne ploščice ---- */
.ev-list { margin: 1.5rem 0; }
.ev-list__month {
  margin: 1.5rem 0 .25rem; padding-bottom: .4rem;
  font-size: .95rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 2px solid var(--border-strong);
}
.ev-list__rows { list-style: none; margin: 0; padding: 0; }
.ev-list__row {
  display: flex; gap: .5rem 1rem; align-items: baseline; flex-wrap: wrap;
  padding: .7rem 0; border-bottom: var(--divider-w, 1px) solid var(--border);
}
.ev-list__date { flex: 0 0 11rem; }
.ev-list__main { flex: 1 1 14rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-weight: 600; }
.ev-list__place { flex: 0 1 auto; margin-inline-start: auto; color: var(--text-muted); font-size: .95rem; text-align: end; }

/* ---- Podatki o dogodku (podrobnost) ---- */
.ev-facts {
  margin: 0 0 1.5rem;
  background: var(--surface-alt);
  border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.ev-facts dl { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.ev-facts__row { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: .15rem 1rem; }
.ev-facts dt { font-weight: 700; }
.ev-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) { .ev-facts__row { grid-template-columns: 1fr; } }

/* ---- Blok »Seznam dogodkov« ---- */
.ev-block { margin-block: 1.5rem; }
.ev-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.ev-block__title { margin: 0; }
.ev-block__all { margin: 0; font-weight: 700; white-space: nowrap; font-family: var(--font-ui, inherit); }
.ev-block__all--bottom { margin-top: 1rem; white-space: normal; }
.ev-block .ev-cards, .ev-block .ev-tiles, .ev-block .ev-list { margin-block: 0; }

/* ---------------- Iskanje ---------------- */
.search-form { max-width: 34rem; margin-block: 1.5rem; }
.search-form label { display: block; font-weight: 700; margin-bottom: .4rem; }
.search-form__row { display: flex; gap: .6rem; }
.search-form input {
  flex: 1; min-height: 44px; padding: .4em .8em; font: inherit;
  border: 2px solid var(--border); border-radius: calc(var(--radius) * .8);
  background: var(--surface); color: var(--text);
}
.search-form input:focus-visible { border-color: var(--primary-line); }
.search-count { font-weight: 700; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results > li { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.search-results a { font-weight: 700; font-size: 1.1rem; }
.search-results__type {
  margin-inline-start: .5em; font-size: .8rem; font-weight: 700;
  padding: .15em .7em; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--border); color: var(--text);
}
.search-results p { margin: .35rem 0 0; color: var(--text-muted); }
/* Najdeni izraz v odlomku. Ista para barv kot oznaka vrste zadetka — torej
   kombinacija, ki je že v poročilu o kontrastih. */
.search-results mark {
  background: var(--accent-soft); color: var(--text); font-weight: 700;
  padding: 0 .15em; border-radius: calc(var(--radius) * .3);
}

/* ---------------- Zemljevid strani ---------------- */
.sitemap { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .sitemap { grid-template-columns: 1fr 1fr; } }
.sitemap ul { list-style: none; padding: 0; }
.sitemap li { padding: .25rem 0; }

/* ================= NOGA =================

  Pet postavitev (A11Y-SCMS-noge.md), štiri tudi v različici Primary. Barve so
  izključno žetoni: temna ogrodja ležijo na --band / --on-band (izpeljano ≥ 7 : 1),
  različice Primary na --primary / --on-primary, svetlo na --surface-alt / --text
  z zgornjo črto --primary-line (3 : 1), kartica na --surface, pasica dejanja na
  --primary-soft. Zato nobeno ogrodje ne more pasti na kontrastu in temna tema
  deluje brez posebnega urejanja.
   Stolpci so auto-fit/minmax: pri 320 px in pri 400 % povečavi se sesujejo v enega
   (SC 1.4.10). Povezave v stolpcih merijo ≥ 40 px, gumbi ≥ 44 px (SC 2.5.8, 2.5.5). */

.site-footer { margin-top: 2rem; }
.site-footer__main { padding-block: calc(2.2rem * var(--space, 1)); }
.site-footer__grid { display: grid; gap: calc(1.8rem * var(--space, 1)) 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.site-footer__grid--card { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; }
.site-footer__col { display: flex; flex-direction: column; gap: .4rem; }
.site-footer__name { font-weight: 800; font-size: 1.1rem; margin: 0 0 .2rem; }
.site-footer address { font-style: normal; line-height: 1.7; margin: 0; }
.site-footer p { margin: 0; }
.site-footer__contactlinks { line-height: 1.9; }
.site-footer__coltitle { font-weight: 700; margin: 0 0 .35rem; }
.site-footer__collinks, .site-footer__links { list-style: none; margin: 0; padding: 0; }
.site-footer__collinks a { display: inline-flex; align-items: center; min-height: 40px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: .1rem 1rem; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__cta { align-self: flex-start; margin-top: .5rem; }
.site-footer__free > :first-child { margin-top: 0; }

/* Podlage */
.site-footer--dark .site-footer__main,
.site-footer--split .site-footer__main { background: var(--band); color: var(--on-band); }
.site-footer--dark .site-footer__bottom,
.site-footer--split .site-footer__bottom { background: var(--band); color: var(--on-band); }
.site-footer--dark a, .site-footer--split .site-footer__main a, .site-footer--split .site-footer__bottom a { color: var(--on-band); }
.site-footer--primary .site-footer__main,
.site-footer--primary .site-footer__bottom { background: var(--primary); color: var(--on-primary); }
.site-footer--primary a { color: var(--on-primary); }
.site-footer--light { background: var(--surface-alt); border-top: 3px solid var(--primary-line); color: var(--text); }
.site-footer--light a { color: var(--link); }

/* Spodnja vrstica */
.site-footer__bottom { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.site-footer__bottomin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1.2rem; padding-block: .7rem; }
.site-footer__copy { font-size: .9rem; }
.site-footer--light .site-footer__copy { color: var(--text-muted); }
.site-footer__legalnav .site-footer__links a { min-height: 40px; font-size: .9rem; }

/* 1a — kompaktna: kontakt in povezave v eni vrstici */
.site-footer--compact-row .site-footer__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.6rem; }
.site-footer__inline { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.site-footer__inlinetext { line-height: 1.5; }
.site-footer__mono {
  flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  font-weight: 800; font-size: .95rem;
  background: var(--on-band); color: var(--band); border-radius: var(--radius, .5rem);
}
.site-footer--primary .site-footer__mono { background: var(--on-primary); color: var(--primary); }
.site-footer--light .site-footer__mono { background: var(--primary); color: var(--on-primary); }
.site-footer__logo { flex: none; max-height: 2.6rem; width: auto; }

/* 1c — svetla: kontaktna kartica z pari podatkov */
.site-footer__card {
  display: flex; flex-direction: column; gap: .7rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius, .75rem); padding: 1.1rem 1.2rem;
}
.site-footer__pairs { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; }
.site-footer__pairs dt { color: var(--text-muted); }
.site-footer__pairs dd { margin: 0; font-weight: 600; }

/* 1e — pasica dejanja nad nogo */
.site-footer__action { background: var(--primary-soft); color: var(--text); border-block: 1px solid var(--border); }
.site-footer__actionin { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 1.8rem; padding-block: calc(1.5rem * var(--space, 1)); }
.site-footer__actiontext { max-width: 48ch; display: flex; flex-direction: column; gap: .3rem; }
.site-footer__actiontitle { font-size: 1.2rem; font-weight: 800; }
.site-footer__action a { color: var(--link); }
.site-footer__form { display: grid; gap: .5rem; align-items: end; grid-template-columns: minmax(12rem, 18rem) auto; }
.site-footer__form .field { margin: 0; }
.site-footer__form .hint { grid-column: 1 / -1; }
@media (max-width: 30rem) { .site-footer__form { grid-template-columns: 1fr; } }

/* ---------------- Na vrh ---------------- */
.back-to-top {
  position: fixed; inset-inline-end: 1.25rem; bottom: 1.25rem; z-index: 50;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--on-primary);
  border: 2px solid color-mix(in srgb, var(--on-primary) 45%, transparent);
  border-radius: 50%;
  cursor: pointer; box-shadow: var(--shadow-lg);
}
.back-to-top:hover { background: var(--primary-hover); }

/* ---------------- Temna tema ----------------
   Barve prevzamejo žetoni (html.dark v /theme.css), zato je tu le
   blaženje slik, ki na temni podlagi sicer žarijo. */
html.dark img { opacity: .92; }

/* ---------------------------------------------------------------- Predogled nejavne vsebine

   Pasico vidi samo prijavljen urednik (Site::gate()). Barve so žetoni opozorila,
   zato je kontrast zagotovljen v svetli in temni shemi; pasica je prva v dokumentu,
   da je ne prezre ne oko ne bralnik zaslona.                                        */

.preview-bar {
  background: var(--warning-soft);
  border-bottom: 2px solid var(--warning);
  padding: .6rem 0;
}
.preview-bar__in {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  justify-content: space-between;
}
.preview-bar strong { font-size: .95rem; }