/*
Theme Name: Druflow
Theme URI: https://druflow.eu
Author: DruFlow
Author URI: https://druflow.eu
Description: Splošna, konfigurabilna novičarska/društvena tema z urejljivimi sekcijami naslovnice (hero, mreža, kartice, CTA, galerija), barvami/tipografijo v Customizerju in Classic Editor + Gutenberg podporo - brez odvisnosti od dodatnih page-builder vtičnikov.
Version: 1.7.135
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: druflow
Update URI: https://druflow.eu/updates/druflow-theme/
*/

:root {
	/* Uporabnikovo poročilo: ta spremenljivka je bila STATIČNA (nikoli
	   povezana s Customizerjem) - "zapečena barva iz predloge borci",
	   uporabljena kot privzeta vrednost na 41 mestih po tej datoteki
	   (npr. .card-category-badge). Prej #b18b5e (rjavo-peščena, izvorna
	   "borci" barva) - zdaj dejanska trenutna primarna barva znamke, enaka
	   privzeti vrednosti gumbov/glave v inc/design-customizer.php. */
	--color-primary: #6f3faf;
	--color-accent: #c0ab72;
	/* Temnejša različica --color-accent SAMO za besedilo (naslovi h2,
	   naslov predstavitvene kartice) - izvirna #c0ab72 na belem ozadju doseže
	   samo ~2,25:1 kontrastno razmerje, globoko pod WCAG AA pragom (3:1/4,5:1).
	   --color-accent sam ostane nespremenjen za dekorativno rabo (ozadja),
	   kjer čitljivost besedila ni vprašljiva - najdeno pri sistematičnem
	   pregledu. Privzeta vrednost ustreza istoimenskim Kirki poljem
	   (druflow_typo_h2, druflow_feature_card_title_color) v
	   inc/design-customizer.php, ki jo prek Customizerja tudi prepišeta. */
	--color-accent-text: #857042;
	--color-tan-light: #dbcfaf;
	--color-tan-lighter: #e2c49f;
	--color-tan-mid: #d1a97f;
	--color-red-accent: #ff0000;

	--color-text: #404040;
	--color-text-dark: #000000;
	--color-gray-1: #767676;
	--color-gray-2: #555555;
	--color-gray-3: #333333;
	--color-white: #ffffff;

	--color-footer-bg: #0e1422;
	--color-footer-text: #ffffff;
	--color-footer-link: #b0a9c0;

	--color-dark-section: #222222;
	--color-overlay-dark: rgba(0, 0, 0, 0.75);

	--font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* Uporabnikova eksplicitna zahteva: glava/noga naj bosta prilagodljivi,
	   od roba do roba (100%) - PRVOTNI poskus (90% na skupni spremenljivki)
	   je po njenem popravku zožil TUDI glavo/nogo, kar ni bil namen. Zdaj
	   velja SAMO za splošen ".container" (glava/noga ga uporabljata
	   nespremenjenega); vsebina strani (`.site-main > .container`) ima
	   svojo, ožjo 90% spodaj. */
	--container-width: 100%;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Uporabnikovo poročilo: ozadje strani (.druflow-site-bg spodaj) je
	   "preplavilo" nogo strani (in bi enako lahko katero koli drugo sekcijo
	   z lastno barvo ozadja, ki nima svojega z-indexa) - vzrok je bil
	   POZICIONIRAN element (position:fixed/absolute) se PO CSS PRAVILIH VEDNO
	   izriše NAD navadno (position:static) postavljeno vsebino, ne glede na
	   vrstni red v HTML-ju - glava je bila po naključju zaščitena samo zato,
	   ker ima svoj visok z-index (position:sticky), noga pa ne. Pravi popravek
	   ni "dodaj z-index tudi nogi" (isti problem bi se ponovil pri naslednji
	   sekciji z barvo ozadja) - je TA vrstica: brez lastnega ozadja na <html>
	   brskalnik <body>-jevo ozadje "razširi" na celotno platno strani, ki je
	   VEDNO popolnoma zadaj, tudi za elementi z negativnim z-indexom (zato
	   prejšnji poskus z z-index:-1 ni deloval). Z lastnim (istim) ozadjem tu
	   ta razpotegnitev odpade, in negativen z-index spodaj spet zanesljivo
	   pomeni "za VSO navadno postavljeno vsebino, karkoli že je". */
	background: var(--color-white);
}

body {
	margin: 0;
	font-family: var(--font-base);
	color: var(--color-text);
	background: var(--color-white);
	font-size: 16px;
	line-height: 1.6;
	/* Potrebno, da .druflow-site-bg (position:absolute, brez parallax učinka
	   spodaj) razpne čez CELO stran, ne le prvi zaslon. */
	position: relative;
	/* KLJUČNO, sicer je .druflow-site-bg NEVIDEN: "position:relative" SAM PO
	   SEBI (brez lastnega z-indexa) telesu NE ustvari novega "stacking
	   context"-a - z-index:-1 na .druflow-site-bg bi bil zato ovrednoten proti
	   KORENSKEMU stacking contextu cele strani, kar pomeni "za body-jevim IN
	   html-jevim lastnim ozadjem", ne le "za body-jevo navadno vsebino" - slika
	   ozadja bi bila v celoti nevidna, ne glede na opacity/z-index na sebi.
	   Eksploziten z-index (katerakoli številka) telesu prisili svoj stacking
	   context, znotraj katerega negativen z-index na otroku pravilno pomeni
	   "za normalno vsebino, PRED body-jevim lastnim ozadjem". */
	z-index: 0;
}

/* --- Ozadje cele strani (izbirno, gl. Prilagajanje -> Barve in tipografija
   -> Ozadje strani v inc/design-customizer.php) - ločen sloj ZA vso vsebino,
   ne neposredno na <body>, da opacity/razbarvanje ne prizadeneta tudi
   besedila/slik vsebine. --- */
.druflow-site-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Glej obsežno opombo pri <html> zgoraj - z-index:-1 zdaj zanesljivo
	   pomeni "za VSO navadno postavljeno vsebino" (nogo, glavo brez lastnega
	   z-indexa, katero koli sekcijo z lastno barvo ozadja ...), ker <html>
	   zgoraj prepreči, da bi se <body>-jevo ozadje "razširilo" na platno
	   strani. Ker je ta sloj prvi otrok znotraj <body> (gl. header.php),
	   ga navaden vrstni red izrisa (brez z-index-a) pravilno postavi ZA vso
	   kasnejšo vsebino, a PRED <body>-jevim lastnim ozadjem.  */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: var(--druflow-site-bg-opacity, 0.1);
	filter: grayscale(var(--druflow-site-bg-desaturate, 100%));
	pointer-events: none;
}

/* "Parallax" - slika miruje, vsebina se skrola čez njo. Preprost position:
   fixed namesto background-attachment:fixed na <body> - slednji je na iOS
   Safari na dolgih straneh znano nezanesljiv. */
.druflow-site-bg--parallax {
	position: fixed;
}

/* Ko je ozadje strani aktivno (telo dobi razred "druflow-has-bg", gl.
   inc/page-background-meta.php druflow_page_background_active()), glavna
   vsebina in ožji stolpec objav ne smeta imeti lastne NEPROSOJNE barve
   ozadja - sicer v celoti prekrijeta sliko ozadja (ta barva se v normalnem
   vrstnem redu izrisa nariše NAD sloj ozadja, saj je navadna postavljena
   vsebina, ne pozicionirana - negativen z-index ji tu ne pomaga). Privzeta
   "Barva ozadja glavne vsebine" v Prilagajanje JE neprosojna bela, zato je
   bila slika ozadja doslej v celotnem osrednjem delu strani nevidna.
   !important, ker mora zanesljivo zmagati ne glede na vrstni red glede na
   Kirkijev dinamični <style> v <head>. */
body.druflow-has-bg .site-main,
body.druflow-has-bg .druflow-content-column {
	background-color: transparent !important;
}

/* Brskalniki privzeto NE podedujejo font-family v form kontrolah - da
   "Glavna pisava" iz Customizerja res velja povsod, ne samo za besedilo. */
button,
input,
select,
textarea {
	font-family: inherit;
}

a {
	color: var(--color-text-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--color-primary);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-text);
	margin: 0 0 0.6em;
}

h2 {
	color: var(--color-accent-text);
}

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* Uporabnikova eksplicitna zahteva: "prostor za prispevke in vsebino je
   absolutno preozek, fiksirajva ga na 90%" - a SAMO za dejansko vsebino
   strani, NE za glavo/nogo (ti ostaneta prilagodljivi/100%, gl. --container-
   width zgoraj). `.site-main > .container` zadane samo neposreden ovoj
   vsebine (front-page.php/page.php/index.php/...), ne pa tudi `.container`
   znotraj glave/noge (te niso znotraj `.site-main`). Hero/CTA sekcija ostane
   VEDNO polna širina zaslona (ignorira ta odmik) - gl. `.hero-section`/
   `.cta-section` spodaj, ki sta namenoma ZUNAJ tega ovoja. */
.site-main > .container {
	max-width: 90%;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-primary);
	color: var(--color-white);
	padding: 10px 16px;
	z-index: 10000;
}

.skip-link:focus {
	left: 10px;
}

/* --- Glava strani --- */

.site-header {
	background: var(--color-primary);
	/* Trajno "solid" - brskalnik brez tega ne bi izrisal roba ne glede na
	   širino/barvo, nastavljivo v Prilagajanju -> Barve in tipografija ->
	   Glava in meni (privzeta širina 0 = vizualno brez roba, kot doslej). */
	border-bottom-style: solid;
	border-bottom-width: 0;
}

.site-header--sticky {
	position: sticky;
	top: 0;
	z-index: 100;
}

.top-bar {
	background: var(--color-primary);
	color: var(--color-white);
}

.top-bar .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.top-bar-info {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	font-size: 14px;
}

.top-bar-info a,
.top-bar-info span {
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Telefon/e-pošta so prave povezave (tel:/mailto:) - podčrtano jih vizualno
   loči od navadnega besedila (npr. naslov), da je jasno, da so klikljive. */
.top-bar-info a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.top-bar-info a:hover {
	/* Prej peščena --color-tan-light (uporabnikovo poročilo) - ozadje
	   zgornje vrstice je vijolično (--color-primary), zato preprosto
	   posvetlimo na belo namesto zapečene borci barve. */
	color: rgba(255, 255, 255, 0.75);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
}

.site-branding img {
	max-height: 110px;
	width: auto;
}

.site-branding .site-title,
.site-branding .site-description {
	margin: 0;
}

.site-branding .site-title a {
	font-size: 20px;
	font-weight: 700;
	color: var(--color-white);
}

.site-branding .site-description {
	font-size: 14px;
	/* Prej peščena --color-tan-light (uporabnikovo poročilo) - uskladeno z
	   .site-title tik zgoraj, ki je že pravilno belo. */
	color: var(--color-white);
}

.social-links {
	display: flex;
	gap: 10px;
}

.social-links a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	/* Prej peščena --color-tan-light/--color-text-dark (uporabnikovo
	   poročilo) - bel krog + primarna vijolična ikona, berljivo ne glede na
	   (nastavljivo) barvo glave strani. */
	background: var(--color-white);
	color: var(--color-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.social-links a:hover {
	background: var(--color-accent);
	color: var(--color-white);
}

.primary-navigation {
	background: var(--color-primary);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Postavitev menija "Levo od logotipa" (v isti vrstici z logotipom, namesto
   privzeto pod njim) - nastavljivo v Customizerju (Barve in tipografija ->
   Postavitev menija). Zgornja vrstica (.top-bar) ostane vedno na svoji
   celotni širini, logotip in meni pa si delita naslednjo vrstico. */
.site-header--menu-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.site-header--menu-inline .top-bar {
	flex: 1 1 100%;
}

.site-header--menu-inline .site-branding {
	flex: 0 1 auto;
	/* Odmik je zdaj nastavljiv v Customizerju (Logotip -> Odmik logotipa),
	   ki to vedno prepiše - tu ni privzete vrednosti, da ni protislovja. */
}

.site-header--menu-inline .primary-navigation {
	flex: 1 1 auto;
	border-top: none;
}

/* Zajame notranji div ne glede na to, ali ima razred ".container" (odvisno
   od "Meni čez celo širino" nastavitve v Customizerju, ki ta razred
   odstrani) - brez tega bi bil meni pri "polna širina" + "levo od logotipa"
   levo poravnan namesto potisnjen na desni rob. */
.site-header--menu-inline .primary-navigation > div {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
}

.primary-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.primary-navigation li {
	position: relative;
}

.primary-navigation a {
	display: block;
	padding: 14px 18px;
	color: var(--color-white);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.primary-navigation a:hover,
.primary-navigation li.current-menu-item > a {
	background: rgba(0, 0, 0, 0.12);
	color: var(--color-white);
}

.primary-navigation .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--color-white);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	z-index: 50;
}

.primary-navigation li:hover > .sub-menu {
	display: block;
}

.primary-navigation .sub-menu a {
	color: var(--color-text);
	text-transform: none;
	font-weight: 400;
	padding: 10px 18px;
}

.primary-navigation .sub-menu a:hover {
	/* Prej peščena --color-tan-light (uporabnikovo poročilo) - to je samo
	   statičen privzeti sloj, Kirkijev druflow_submenu_hover_bg_color (gl.
	   design-customizer.php, zdaj prav tako primarna vijolična) ga vedno
	   preglasi, a naj se ujemata. */
	background: var(--color-primary);
}

/* Uporabnikova eksplicitna zahteva: vsak element menija s spustnim podmenijem
   mora imeti VIDNO oznako (puščico navzdol), da je razvidno, da se da
   razširiti - doslej ni bilo nobenega znaka, samo dejstvo, da je klik/hover
   nekaj razkril. Ista puščica velja za VSE sloge menija (vgrajen spustni,
   hamburger, stranski) - vsi delijo isto `li.menu-item-has-children`/`.sub-
   menu` označevanje, samo `.is-open` (klik, dotik) oz. `:hover` (namizje,
   vgrajen spustni meni) jo zavrti, da nakaže odprto stanje. */
.primary-navigation li.menu-item-has-children > a {
	display: flex;
	align-items: center;
	gap: 6px;
}

.primary-navigation li.menu-item-has-children > a::after {
	content: '';
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -4px;
	transition: transform 0.2s ease;
}

.primary-navigation li.menu-item-has-children:hover > a::after,
.primary-navigation li.menu-item-has-children.is-open > a::after {
	transform: rotate(225deg);
	margin-top: 3px;
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--color-white);
	font-size: 24px;
	padding: 12px 18px;
	cursor: pointer;
}

/* --- Slog menija: vedno hamburger / stranski (vse velikosti zaslona,
   izbrano v Prilagajanje -> Postavitev menija) --- */

.site-header--menu-style-hamburger .menu-toggle,
.site-header--menu-style-sidebar-right .menu-toggle,
.site-header--menu-style-sidebar-left .menu-toggle {
	display: block;
}

.site-header--menu-style-hamburger .primary-navigation > div > ul {
	display: none;
	flex-direction: column;
	width: 100%;
}

.site-header--menu-style-hamburger .primary-navigation.is-open > div > ul {
	display: flex;
}

.site-header--menu-style-hamburger .primary-navigation .sub-menu {
	position: static;
	box-shadow: none;
	display: none;
}

.site-header--menu-style-hamburger .primary-navigation li.is-open > .sub-menu {
	display: block;
}

/* Stranski meni (levo ali desno) - drsna vrstica. Uporabljen je `right`/`left`
   (ne `transform`), ker transform na predniku spremeni "containing block" za
   position:fixed potomce - to bi gumb .menu-toggle spodaj potisnilo skupaj s
   panelom namesto da ostane fiksno pripet na svojem mestu ne glede na
   odprto/zaprto stanje. */
.site-header--menu-style-sidebar-right .primary-navigation,
.site-header--menu-style-sidebar-left .primary-navigation {
	position: fixed;
	top: 0;
	bottom: 0;
	width: min(320px, 85vw);
	background: var(--color-white);
	transition: right 0.3s ease, left 0.3s ease;
	overflow-y: auto;
	z-index: 300;
}

.site-header--menu-style-sidebar-right .primary-navigation {
	right: -340px;
	box-shadow: -10px 0 40px rgba(0, 0, 0, 0.25);
}

.site-header--menu-style-sidebar-right .primary-navigation.is-open {
	right: 0;
}

.site-header--menu-style-sidebar-left .primary-navigation {
	left: -340px;
	box-shadow: 10px 0 40px rgba(0, 0, 0, 0.25);
}

.site-header--menu-style-sidebar-left .primary-navigation.is-open {
	left: 0;
}

.site-header--menu-style-sidebar-right .primary-navigation > div,
.site-header--menu-style-sidebar-left .primary-navigation > div {
	display: block;
	padding: 70px 0 30px;
}

.site-header--menu-style-sidebar-right .primary-navigation > div > ul,
.site-header--menu-style-sidebar-left .primary-navigation > div > ul {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.site-header--menu-style-sidebar-right .primary-navigation li,
.site-header--menu-style-sidebar-left .primary-navigation li {
	width: 100%;
}

.site-header--menu-style-sidebar-right .primary-navigation a,
.site-header--menu-style-sidebar-left .primary-navigation a {
	color: var(--color-text-dark);
}

.site-header--menu-style-sidebar-right .primary-navigation a:hover,
.site-header--menu-style-sidebar-left .primary-navigation a:hover {
	/* Prej peščena --color-tan-light (uporabnikovo poročilo) - svetla
	   vijolična, usklajena z ostalimi "muted" elementi (npr. #e6ddf2 obroba
	   kartic), namesto zapečene borci barve. */
	background: #e6ddf2;
}

.site-header--menu-style-sidebar-right .primary-navigation .sub-menu,
.site-header--menu-style-sidebar-left .primary-navigation .sub-menu {
	position: static;
	box-shadow: none;
	display: none;
}

.site-header--menu-style-sidebar-right .primary-navigation li.is-open > .sub-menu,
.site-header--menu-style-sidebar-left .primary-navigation li.is-open > .sub-menu {
	display: block;
}

.site-header--menu-style-sidebar-right .menu-toggle,
.site-header--menu-style-sidebar-left .menu-toggle {
	position: fixed;
	top: 14px;
	z-index: 301;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: 4px;
}

.site-header--menu-style-sidebar-right .menu-toggle {
	right: 14px;
}

.site-header--menu-style-sidebar-left .menu-toggle {
	left: 14px;
}

.nav-sidebar-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 250;
}

.site-header--menu-style-sidebar-right .primary-navigation.is-open ~ .nav-sidebar-backdrop,
.site-header--menu-style-sidebar-left .primary-navigation.is-open ~ .nav-sidebar-backdrop {
	display: block;
}

/* --- Vsebina --- */

.site-main {
	padding: var(--druflow-main-padding-top, 40px) 0 var(--druflow-main-padding-bottom, 40px);
	min-height: 300px;
}

/* Če se vsebina strani začne s hero/CTA sekcijo (naslovnica, katera koli
 * druga stran), naj ta sedi tik ob glavi - brez zgornjega presledka, ki bi
 * sicer veljal za navadno besedilo. Spodnji presledek (padding-bottom)
 * ostane nespremenjen. `--hero-first` doda PHP predloga (front-page.php/
 * page.php/index.php), ko je prva sekcija hero/CTA - gl.
 * druflow_first_section_is_hero_or_cta() v page-sections-customizer.php.
 *
 * Naslovnica (front-page.php) NIMA stranske vrstice - tam izjema velja kar
 * na `.site-main` sami (edini otrok je vsebina). Strani s stransko vrstico
 * (page.php/index.php) pa `.site-main` DELITA med `.druflow-content-column`
 * IN `.druflow-sidebar` - če bi izjemo dali na `.site-main`, bi zgornji
 * odmik po nepotrebnem izginil TUDI stranski vrstici (uporabnikovo
 * poročilo: "tudi stranska vrstica mora upoštevati generalni odmik na
 * vrhu") - zato tam izjema velja SAMO na `.druflow-content-column`
 * (negativen margin, ne padding - `.site-main`-ov padding ostane skupen
 * obema stolpcema, stranska vrstica ga obdrži nespremenjenega). */
.site-main.site-main--hero-first {
	padding-top: 0;
}

.druflow-content-column.druflow-content-column--hero-first {
	margin-top: calc(-1 * var(--druflow-main-padding-top, 40px));
}

.page-header {
	margin-bottom: 30px;
}

.page-title {
	font-size: 28px;
}

.entry-content {
	font-size: 16px;
}

.entry-content > * + * {
	margin-top: 1.2em;
}

.entry-content img {
	border-radius: 4px;
}

.page-thumbnail {
	margin-bottom: 1.2em;
}

.page-thumbnail img {
	display: block;
	width: 100%;
	max-width: var(--druflow-image-max-width, 650px);
	height: auto;
	margin: 0 auto;
}

.page-thumbnail img,
.card-thumbnail img,
.entry-content img,
.entry-content video,
.entry-content iframe {
	box-sizing: border-box;
	border-style: solid;
	border-width: 0;
}

blockquote,
.entry-content blockquote {
	margin: 1.2em 0;
	padding: 10px 20px;
	border-left: 4px solid var(--color-primary);
	font-style: italic;
	color: var(--color-gray-2);
}

/* --- Kartice (seznami vsebin) --- */

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin: 30px 0;
}

.card {
	background: var(--druflow-card-bg, var(--color-white));
	border: 1px solid var(--color-primary);
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.card:hover {
	background: var(--druflow-card-hover-bg, var(--druflow-card-bg, var(--color-white)));
	/* Prej trdo kodiran peščen odtenek (rgba ustreznik stare --color-primary
	   #b18b5e) - zdaj vijolična senca, usklajena z dejansko primarno barvo. */
	box-shadow: 0 12px 30px rgba(111, 63, 175, 0.25);
	transform: translateY(-3px);
}

.card-thumbnail {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-tan-lighter);
}

.card-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-category-badge {
	position: absolute;
	right: 10px;
	bottom: 10px;
	background: var(--druflow-card-button-bg, var(--color-primary));
	color: var(--druflow-card-button-color, var(--color-white));
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: var(--druflow-card-button-radius, 3px);
}

.card-category-badge:hover {
	background: var(--druflow-card-button-bg, var(--color-primary));
	color: var(--druflow-card-button-color, var(--color-white));
	filter: brightness(0.92);
}

.content-section {
	position: relative;
	margin: 40px 0;
	/* Vodoravni del je nastavljiv (gl. "Notranji odmik od roba" pri Vrsti
	   sekcije, --druflow-content-inset - podeduje se z ovojnega <div> v
	   druflow_render_section()) - navpični ostane trdo zapisan, da se
	   obstoječi navpični ritem sekcij ne spremeni. */
	padding: 20px var(--druflow-content-inset, 20px);
}

/* --- Dekorativen barvni prehod ob robu sekcije (edge_effect) --- */

.druflow-edge-effect {
	position: absolute;
	left: 0;
	right: 0;
	line-height: 0;
	pointer-events: none;
	/* Enak z-index kot .hero-slide (2) - izrisan PRED diapozitivi v DOM-u, zato
	   bi bil sicer pri hero drsniku (2+ slik) skrit za trenutno aktivno sliko;
	   .hero-section-overlay (besedilo) je izrisan ZA tem učinkom in ima ISTI
	   z-index, zato ostane vrstni red v DOM-u odločilen in besedilo je vseeno
	   vedno na vrhu. */
	z-index: 2;
}

.druflow-edge-effect--top {
	top: 0;
}

.druflow-edge-effect--bottom {
	bottom: 0;
}

.druflow-edge-effect svg {
	display: block;
}

.content-section:first-child {
	margin-top: 0;
}

/* --- Slika + besedilo (dva stolpca, druga sekcija je zrcalna) --- */

.image-text-section {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
	margin: 40px 0;
	padding: 20px var(--druflow-content-inset, 20px);
}

.image-text-section:first-child {
	margin-top: 0;
}

/* PHP vedno najprej izriše .image-text-image, nato .image-text-body (za oba
   tipa enako) - "zrcaljenje" je zato izključno vizualno (flex-direction), ne
   sprememba DOM vrstnega reda, da mobilni pogled (spodnji media query) vedno
   sklada sliko NAD besedilom, ne glede na to, kateri tip je izbran. */
.image-text-section--reverse {
	flex-direction: row-reverse;
}

.image-text-image,
.image-text-body {
	flex: 1 1 320px;
	min-width: 280px;
}

.image-text-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

/* Pokončna ločnica med sliko in besedilom (izbirno, gl. it_divider* v inc/
   section-blocks.php) - `.image-text-section` je "auto" višine (odvisna od
   vsebine), zato navaden "height: 80%" na tem otroku ne bi zanesljivo
   deloval. `align-self: stretch` jo raztegne na CELOTNO višino vrstice
   (ujema se z najvišjim sosedom), `transform: scaleY(.8)` pa jo nato
   navpično skrči na 80%, središčno (privzeta transform-origin: center) -
   uporabnikova eksplicitna zahteva ("visok 80% maks. višina sekcije"). */
.image-text-divider {
	align-self: stretch;
	flex: 0 0 auto;
	transform: scaleY(0.8);
}

@media (max-width: 680px) {
	.image-text-divider {
		display: none;
	}
}

/* Kadar je "Obseg barve ozadja" nastavljen na "Samo pod besedilom", dobi
   besedilni stolpec svoj rob/zaobljenost - brez tega bi barva ozadja tesno
   objela besedilo brez zraka okoli, videti bi bilo kot napaka, ne kot izbira. */
.image-text-body--bg {
	padding: 24px;
	border-radius: 4px;
}

.image-text-heading {
	display: inline-block;
	margin: 0 0 20px;
	padding-bottom: 12px;
	/* currentColor namesto trdo kodirane var(--color-primary) - naslov je
	   dejanski <h2>/<h3>, njegova barva pride iz Prilagajanje -> Tipografija
	   -> Naslovi H2/H3 (Kirki jo izpiše neposredno na "h2"/"h3", ne kot CSS
	   spremenljivko) - s currentColor črta vedno sledi TEJ barvi. */
	border-bottom: 3px solid currentColor;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.image-text-content p {
	margin: 0 0 16px;
}

.image-text-content ul {
	margin: 0 0 16px;
	padding-left: 20px;
}

.image-text-content p:last-child,
.image-text-content ul:last-child {
	margin-bottom: 0;
}

@media (max-width: 782px) {
	.image-text-section,
	.image-text-section--reverse {
		flex-direction: column;
	}
}

/* --- Scroll-in animacije (gl. inc/scroll-animations.php + assets/scroll-animations.js) --- */

[data-druflow-animate] {
	opacity: 0;
	transition: opacity var(--druflow-animate-duration, 0.7s) ease, transform var(--druflow-animate-duration, 0.7s) ease, filter var(--druflow-animate-duration, 0.7s) ease;
	will-change: opacity, transform;
}

[data-druflow-animate].is-visible {
	opacity: 1;
	transform: none;
	filter: none;
}

[data-druflow-animate="fade-up"] { transform: translateY(40px); }
[data-druflow-animate="fade-down"] { transform: translateY(-40px); }
[data-druflow-animate="fade-in"] { transform: none; }
[data-druflow-animate="slide-left"] { transform: translateX(70px); }
[data-druflow-animate="slide-right"] { transform: translateX(-70px); }
[data-druflow-animate="zoom-in"] { transform: scale(0.85); }
[data-druflow-animate="zoom-out"] { transform: scale(1.15); }
[data-druflow-animate="flip"] { transform: perspective(800px) rotateY(35deg); }
[data-druflow-animate="rotate-in"] { transform: rotate(-6deg) scale(0.95); }
[data-druflow-animate="blur-in"] { filter: blur(10px); }
[data-druflow-animate="bounce-in"] {
	transform: translateY(30px);
	transition: opacity var(--druflow-animate-duration, 0.7s) ease, transform var(--druflow-animate-duration, 0.7s) cubic-bezier(0.34, 1.56, 0.64, 1), filter var(--druflow-animate-duration, 0.7s) ease;
}

/*
 * Razširitev na Pagelayerjev seznam učinkov (uporabnikova eksplicitna
 * zahteva) - te niso preprost prehod iz ENEGA začetnega v KONČNO stanje (kot
 * zgoraj), ampak imajo VEČ vmesnih korakov (odboj, tresenje, zibanje ...),
 * zato uporabljajo @keyframes + `animation` namesto `transition`. Ob
 * ".is-visible" preglasijo splošno `transition`-osnovano pravilo zgoraj -
 * `animation-fill-mode:forwards` poskrbi, da element po koncu animacije
 * obstane v svojem KONČNEM (100%) stanju.
 */
[data-druflow-animate="grow"].is-visible,
[data-druflow-animate="shrink"].is-visible,
[data-druflow-animate="pulse"].is-visible,
[data-druflow-animate="pulse-grow"].is-visible,
[data-druflow-animate="pulse-shrink"].is-visible,
[data-druflow-animate="push"].is-visible,
[data-druflow-animate="pop"].is-visible,
[data-druflow-animate="buzz"].is-visible,
[data-druflow-animate="buzz-out"].is-visible,
[data-druflow-animate="float"].is-visible,
[data-druflow-animate="sink"].is-visible,
[data-druflow-animate="bob"].is-visible,
[data-druflow-animate="hang"].is-visible,
[data-druflow-animate="bounce-out"].is-visible,
[data-druflow-animate="rotate"].is-visible,
[data-druflow-animate="grow-rotate"].is-visible,
[data-druflow-animate="skew-forward"].is-visible,
[data-druflow-animate="skew-backward"].is-visible,
[data-druflow-animate="wobble-vertical"].is-visible,
[data-druflow-animate="wobble-horizontal"].is-visible,
[data-druflow-animate="wobble-bottom-right"].is-visible,
[data-druflow-animate="wobble-top-right"].is-visible,
[data-druflow-animate="wobble-top"].is-visible,
[data-druflow-animate="wobble-bottom"].is-visible,
[data-druflow-animate="wobble-skew"].is-visible {
	animation-duration: var(--druflow-animate-duration, 0.9s);
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	transition: none;
}

[data-druflow-animate="grow"].is-visible { animation-name: druflow-anim-grow; }
[data-druflow-animate="shrink"].is-visible { animation-name: druflow-anim-shrink; }
[data-druflow-animate="pulse"].is-visible { animation-name: druflow-anim-pulse; }
[data-druflow-animate="pulse-grow"].is-visible { animation-name: druflow-anim-pulse-grow; }
[data-druflow-animate="pulse-shrink"].is-visible { animation-name: druflow-anim-pulse-shrink; }
[data-druflow-animate="push"].is-visible { animation-name: druflow-anim-push; }
[data-druflow-animate="pop"].is-visible { animation-name: druflow-anim-pop; }
[data-druflow-animate="buzz"].is-visible { animation-name: druflow-anim-buzz; }
[data-druflow-animate="buzz-out"].is-visible { animation-name: druflow-anim-buzz-out; }
[data-druflow-animate="float"].is-visible { animation-name: druflow-anim-float; }
[data-druflow-animate="sink"].is-visible { animation-name: druflow-anim-sink; }
[data-druflow-animate="bob"].is-visible { animation-name: druflow-anim-bob; }
[data-druflow-animate="hang"].is-visible { animation-name: druflow-anim-hang; transform-origin: top center; }
[data-druflow-animate="bounce-out"].is-visible { animation-name: druflow-anim-bounce-out; }
[data-druflow-animate="rotate"].is-visible { animation-name: druflow-anim-rotate; }
[data-druflow-animate="grow-rotate"].is-visible { animation-name: druflow-anim-grow-rotate; }
[data-druflow-animate="skew-forward"].is-visible { animation-name: druflow-anim-skew-forward; }
[data-druflow-animate="skew-backward"].is-visible { animation-name: druflow-anim-skew-backward; }
[data-druflow-animate="wobble-vertical"].is-visible { animation-name: druflow-anim-wobble-vertical; }
[data-druflow-animate="wobble-horizontal"].is-visible { animation-name: druflow-anim-wobble-horizontal; }
[data-druflow-animate="wobble-bottom-right"].is-visible { animation-name: druflow-anim-wobble-rotate; transform-origin: 100% 100%; }
[data-druflow-animate="wobble-top-right"].is-visible { animation-name: druflow-anim-wobble-rotate; transform-origin: 100% 0%; }
[data-druflow-animate="wobble-top"].is-visible { animation-name: druflow-anim-wobble-rotate; transform-origin: 50% 0%; }
[data-druflow-animate="wobble-bottom"].is-visible { animation-name: druflow-anim-wobble-rotate; transform-origin: 50% 100%; }
[data-druflow-animate="wobble-skew"].is-visible { animation-name: druflow-anim-wobble-skew; }

@keyframes druflow-anim-grow {
	0% { opacity: 0; transform: scale(0); }
	60% { opacity: 1; transform: scale(1.08); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes druflow-anim-shrink {
	0% { opacity: 0; transform: scale(1.6); }
	60% { opacity: 1; transform: scale(0.92); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes druflow-anim-pulse {
	0% { opacity: 0; transform: scale(0.6); }
	50% { opacity: 1; transform: scale(1.1); }
	70% { transform: scale(0.95); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes druflow-anim-pulse-grow {
	0% { opacity: 0; transform: scale(0.5); }
	50% { opacity: 1; transform: scale(1.15); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes druflow-anim-pulse-shrink {
	0% { opacity: 0; transform: scale(1.5); }
	50% { opacity: 1; transform: scale(0.85); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes druflow-anim-push {
	0% { opacity: 0; transform: translateY(60px); }
	70% { opacity: 1; transform: translateY(-10px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes druflow-anim-pop {
	0% { opacity: 0; transform: scale(0.3); }
	50% { opacity: 1; transform: scale(1.15); }
	80% { transform: scale(0.95); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes druflow-anim-buzz {
	0% { opacity: 0; transform: translateX(0) rotate(0); }
	10% { opacity: 1; transform: translateX(6px) rotate(2deg); }
	20% { transform: translateX(-6px) rotate(-2deg); }
	30% { transform: translateX(6px) rotate(2deg); }
	40% { transform: translateX(-6px) rotate(-2deg); }
	50% { transform: translateX(4px) rotate(1deg); }
	60% { transform: translateX(-4px) rotate(-1deg); }
	70% { transform: translateX(2px) rotate(1deg); }
	80% { transform: translateX(-2px) rotate(-1deg); }
	100% { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes druflow-anim-buzz-out {
	0% { opacity: 0; transform: translateX(0) rotate(0); }
	10% { opacity: 1; transform: translateX(10px) rotate(3deg); }
	20% { transform: translateX(-10px) rotate(-3deg); }
	30% { transform: translateX(8px) rotate(2deg); }
	40% { transform: translateX(-8px) rotate(-2deg); }
	50% { transform: translateX(6px) rotate(2deg); }
	60% { transform: translateX(-6px) rotate(-1deg); }
	70% { transform: translateX(3px) rotate(1deg); }
	80% { transform: translateX(-3px) rotate(-1deg); }
	100% { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes druflow-anim-float {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes druflow-anim-sink {
	0% { opacity: 0; transform: translateY(-20px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes druflow-anim-bob {
	0% { opacity: 0; transform: translateY(0); }
	20% { opacity: 1; transform: translateY(-8px); }
	40% { transform: translateY(0); }
	60% { transform: translateY(-4px); }
	80% { transform: translateY(0); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes druflow-anim-hang {
	0% { opacity: 0; transform: rotate(0deg); }
	20% { opacity: 1; transform: rotate(8deg); }
	40% { transform: rotate(-6deg); }
	60% { transform: rotate(4deg); }
	80% { transform: rotate(-2deg); }
	100% { opacity: 1; transform: rotate(0deg); }
}
@keyframes druflow-anim-bounce-out {
	0% { opacity: 0; transform: translateY(-40px); }
	50% { opacity: 1; transform: translateY(15px); }
	70% { transform: translateY(-8px); }
	85% { transform: translateY(4px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes druflow-anim-rotate {
	0% { opacity: 0; transform: rotate(-200deg) scale(0.5); }
	100% { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes druflow-anim-grow-rotate {
	0% { opacity: 0; transform: scale(0) rotate(-45deg); }
	100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes druflow-anim-skew-forward {
	0% { opacity: 0; transform: skewX(-20deg) translateX(-40px); }
	100% { opacity: 1; transform: skewX(0) translateX(0); }
}
@keyframes druflow-anim-skew-backward {
	0% { opacity: 0; transform: skewX(20deg) translateX(40px); }
	100% { opacity: 1; transform: skewX(0) translateX(0); }
}
@keyframes druflow-anim-wobble-vertical {
	0% { opacity: 0; transform: translateY(0); }
	15% { opacity: 1; transform: translateY(-15px); }
	30% { transform: translateY(10px); }
	45% { transform: translateY(-8px); }
	60% { transform: translateY(5px); }
	75% { transform: translateY(-3px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes druflow-anim-wobble-horizontal {
	0% { opacity: 0; transform: translateX(0); }
	15% { opacity: 1; transform: translateX(-15px); }
	30% { transform: translateX(10px); }
	45% { transform: translateX(-8px); }
	60% { transform: translateX(5px); }
	75% { transform: translateX(-3px); }
	100% { opacity: 1; transform: translateX(0); }
}
@keyframes druflow-anim-wobble-rotate {
	0% { opacity: 0; transform: rotate(0deg); }
	15% { opacity: 1; transform: rotate(-6deg); }
	30% { transform: rotate(4deg); }
	45% { transform: rotate(-3deg); }
	60% { transform: rotate(2deg); }
	75% { transform: rotate(-1deg); }
	100% { opacity: 1; transform: rotate(0deg); }
}
@keyframes druflow-anim-wobble-skew {
	0% { opacity: 0; transform: skewX(0); }
	15% { opacity: 1; transform: skewX(-10deg); }
	30% { transform: skewX(6deg); }
	45% { transform: skewX(-4deg); }
	60% { transform: skewX(2deg); }
	100% { opacity: 1; transform: skewX(0); }
}

/* --- Ikonske kartice (icon-cards - ikona/značka + naslov + besedilo + gumb) --- */

.icon-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin: 30px 0;
}

.icon-card {
	background: var(--druflow-card-bg, var(--color-white));
	border: 1px solid var(--color-tan-light);
	border-radius: 6px;
	padding: 28px 24px;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.icon-card:hover {
	background: var(--druflow-card-hover-bg, var(--druflow-card-bg, var(--color-white)));
	box-shadow: 0 12px 30px rgba(176, 139, 93, 0.25);
	transform: translateY(-3px);
}

.icon-card-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin: 0 auto 16px;
	flex-shrink: 0;
}

.icon-card-badge .icon-card-image {
	width: 60%;
	height: 60%;
	object-fit: contain;
	border-radius: 50%;
}

.icon-card-title {
	font-size: 18px;
	color: var(--color-accent-text);
	margin: 0 0 10px;
}

.icon-card-text {
	font-size: 14px;
	color: var(--color-gray-2);
	flex: 1 1 auto;
	margin: 0 0 16px;
}

.icon-card-link {
	display: inline-block;
	margin-top: auto;
	background: var(--druflow-card-button-bg, var(--color-primary));
	color: var(--druflow-card-button-color, var(--color-white));
	padding: 8px 16px;
	border-radius: var(--druflow-card-button-radius, 4px);
	font-size: 13px;
	font-weight: 600;
}

.icon-card-link:hover {
	background: var(--druflow-card-button-bg, var(--color-primary));
	color: var(--druflow-card-button-color, var(--color-white));
	filter: brightness(0.92);
}

/* --- Kontaktna kartica (inc/section-blocks.php, type === 'contact_card') -
   ikona z OBROBO (krog, NE poln izpolnjen krog kot pri "Ikonskih karticah"
   zgoraj), vse sredinsko poravnano. --- */
.contact-card {
	max-width: 420px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.contact-card-icon {
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin-bottom: 18px;
}

.contact-card-heading {
	margin: 0 0 6px;
}

.contact-card-subheading {
	margin: 0 0 14px;
	color: var(--color-gray-2);
	font-weight: 400;
}

.contact-card-lines p {
	margin: 0 0 10px;
}

.contact-card-lines p:last-child {
	margin-bottom: 0;
}

/* --- Predstavitvene kartice --- */

.feature-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin: 30px 0;
}

.feature-card {
	background: var(--druflow-card-bg, var(--color-white));
	border: 1px solid var(--color-tan-light);
	border-radius: 6px;
	padding: 24px;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.feature-card:hover {
	background: var(--druflow-card-hover-bg, var(--druflow-card-bg, var(--color-white)));
	box-shadow: 0 12px 30px rgba(176, 139, 93, 0.25);
	transform: translateY(-3px);
}

.feature-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.feature-card-image {
	display: block;
	width: 100%;
	max-width: var(--druflow-image-max-width, 650px);
	/* Uporabnikova eksplicitna zahteva: kvadratna slika mora ohraniti razmerje
	   4:3 (ne fiksno 140px, kar je pri visoki/ozki sliki povzročilo grobo
	   obrezavo) IN nikoli seči čez rob kartice - max 70% VIŠINE kartice.
	   `aspect-ratio` da naravno 4:3 višino iz širine; `max-height:70%` je
	   varovalka za primer, ko bi ta naravna višina pri KRATKI kartici (malo
	   besedila) presegla 70% - odstotek se veže na `.feature-card`, ki ima
	   prek `align-items:stretch` na `.feature-cards` (grid) definirano,
	   raztegnjeno višino (izenačeno z najvišjo kartico v isti vrstici). */
	aspect-ratio: 4 / 3;
	height: auto;
	max-height: 70%;
	object-fit: cover;
	border-radius: 4px;
	margin: 0 auto 14px;
	flex-shrink: 0;
	box-sizing: border-box;
	border-style: solid;
	border-width: 0;
}

.feature-card-title {
	font-size: 18px;
	color: var(--color-accent-text);
}

.feature-card-text {
	font-size: 14px;
	color: var(--color-gray-2);
}

/* Bilo je nehote definirano dvakrat (druga kopija je preglasila `margin-top:
   auto` z `10px`, s čimer se je izničila poravnava gumba na dno kartice pri
   različno dolgem besedilu - najdeno pri sistematičnem pregledu). */
.feature-card-link {
	display: inline-block;
	margin-top: auto;
	align-self: center;
	background: var(--druflow-card-button-bg, var(--color-primary));
	color: var(--druflow-card-button-color, var(--color-white));
	padding: 8px 16px;
	border-radius: var(--druflow-card-button-radius, 4px);
	font-size: 13px;
	font-weight: 600;
}

.feature-card-link:hover {
	background: var(--druflow-card-button-bg, var(--color-primary));
	color: var(--druflow-card-button-color, var(--color-white));
	filter: brightness(0.92);
}

/* Postavitev slike - levo/desno namesto privzeto zgoraj (smiselno, kadar je
   izpolnjena samo ena ali dve kartici). */
.feature-cards--img-left .feature-card,
.feature-cards--img-right .feature-card {
	flex-direction: row;
	align-items: center;
	gap: 20px;
	text-align: left;
}

.feature-cards--img-right .feature-card {
	flex-direction: row-reverse;
}

.feature-cards--img-left .feature-card-image,
.feature-cards--img-right .feature-card-image {
	width: 120px;
	height: 120px;
	margin-bottom: 0;
}

.feature-cards--img-left .feature-card-link,
.feature-cards--img-right .feature-card-link {
	align-self: flex-start;
}

/* Oblika slike */
.feature-cards--shape-rounded .feature-card-image {
	border-radius: 16px;
}

.feature-cards--shape-circle .feature-card-image {
	border-radius: 50%;
}

/* "Organic" - asimetrično zaobljeni vogali (dve nasproti si ležeči oglati,
   dve močno zaobljeni), po vzoru predloge - drugačna oblika kot običajen
   pravokotnik/krog. */
.feature-cards--shape-organic .feature-card-image {
	border-radius: 0 90px 0 90px;
}

/* Slika "gleda čez rob" kartice - negativni odmiki + senca za dinamičen,
   plasten videz namesto slike, ki je vedno lepo znotraj roba. */
.feature-cards--img-overflow .feature-card {
	overflow: visible;
}

.feature-cards--img-overflow .feature-card-image {
	margin: -50px -30px 14px -30px;
	width: calc(100% + 60px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
	position: relative;
	z-index: 2;
}

/* --- Hero/slider in CTA pasica (celozaslonska, prebijeta iz .container) --- */

.hero-section,
.cta-section {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	background-color: var(--color-dark-section);
	background-size: cover;
	background-position: center;
}

.hero-section-overlay,
.cta-section-overlay {
	/* Uporabnikovo poročilo: sprememba barve v Customizerju (Videz -> Hero/CTA)
	   ni imela nobenega učinka - vzrok je bil, da je Customizer ciljal isti
	   element (.hero-section-overlay) z ISTO specifičnostjo kot to pravilo
	   (oba en sam razred), zmagalo pa je karkoli je v izvorni kodi strani
	   pač pristalo kasneje - v praksi torej TA privzeta vrednost, ne izbira
	   uporabnika. Popravljeno po istem načelu, ki je bil za ISTO vrsto
	   hrošča (splošna Customizer nastavitev vs. konkreten CSS razred) že
	   uporabljen zgoraj pri višini (--druflow-block-min-height): Customizer
	   zdaj piše v CSS SPREMENLJIVKO na :root (gl. design-customizer.php),
	   to pravilo pa jo prebere z var()-om - ni tekme za specifičnost, zato
	   sprememba vedno zares učinkuje. Privzeta vrednost (--color-overlay-dark)
	   ostane, če uporabnik v Customizerju ni ničesar spremenil. */
	background-color: var(--druflow-hero-overlay-color, var(--color-overlay-dark));
	padding: 100px var(--druflow-content-inset, 20px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}

.cta-section-overlay {
	background-color: var(--druflow-cta-overlay-color, var(--color-overlay-dark));
}

/* --- Hero slider (več slik, avtoplay - gl. assets/hero-slider.js) --- */

.hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.2s ease;
	z-index: 1;
}

.hero-slide.is-active {
	opacity: 1;
}

.cta-section-overlay {
	padding: 60px var(--druflow-content-inset, 20px);
}

.hero-section-heading,
.cta-section-heading {
	color: var(--druflow-heading-color, var(--druflow-section-text-color, var(--color-white)));
	font-size: var(--druflow-heading-size, 34px);
	margin-bottom: 12px;
}

.hero-section .hero-section-subheading,
.cta-section .cta-section-subheading {
	/* Prej zapečena --color-tan-light (uporabnikovo poročilo) - podnaslov
	   je zdaj rahlo prosojna bela, usklajena z belim naslovom tik zgoraj
	   (namesto nepovezane borci barve). Selektor mora imeti DVA razreda
	   (ne enega), sicer ga zaradi enake specifičnosti prebije splošno
	   `.entry-content p` pravilo in podnaslov ostane siv ne glede na
	   nastavljeno barvo (najdeno pri gradnji k3dojo-nova). */
	color: var(--druflow-subheading-color, var(--druflow-section-text-color, rgba(255, 255, 255, 0.85)));
	font-size: var(--druflow-subheading-size, 16px);
	margin-bottom: 20px;
}

/* Uporabnikovo poročilo: gumb je preblizu podnaslovu - nastavljiv dodaten
   odmik SAMO za gumb (izbirno, na voljo pri "Vrsta sekcije" hero/CTA), ki se
   prišteje k obstoječemu 20px razmiku podnaslova zgoraj. Privzeto 0 (brez
   spremembe za tiste, ki tega polja ne uporabijo). */
.hero-section-button,
.cta-section-button {
	margin-top: var(--druflow-button-top-spacing, 0);
}

.hero-section-button,
.cta-section-button,
.feature-card-link,
.pagination a,
.pagination .current,
.button {
	box-sizing: border-box;
	border-style: solid;
	border-width: 0;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hero-section-button,
.cta-section-button,
.button {
	display: inline-block;
	/* Prej peščena --color-tan-light/--color-text-dark, brez sklica na
	   spremenljivko (uporabnikovo poročilo) - to je GLAVNI, najbolj
	   uporabljen gumb v celi temi; Kirkijeva "Gumbi" nastavitev (gl.
	   design-customizer.php) ga sicer vedno preglasi, a naj bo pravilen
	   privzeti tudi sam po sebi, brez odvisnosti od vrstnega reda nalaganja. */
	background: var(--color-primary);
	color: var(--color-white);
	padding: 12px 28px;
	border-radius: 4px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.04em;
}

.hero-section-button:hover,
.cta-section-button:hover,
.button:hover {
	/* Privzeto ozadje je zdaj že primarna vijolična (gl. zgoraj) - hover
	   samo potemni, enak vzorec kot ".card-more:hover" ipd. */
	filter: brightness(0.85);
}

/* --- Samostojen "Gumb" blok (druflow/button, gl. inc/button-block.php) ---
   Lastne barve/hover barve PO POSAMEZNI postavitvi, ločeno od splošne
   nastavitve gumbov zgoraj (--color-primary) - CSS spremenljivke z
   eksplicitnim privzetim skladom (NE `revert`, gl. opombo pri .wp-block-
   button__link spodaj - `revert` bi odstranil tudi to privzeto ozadje).
   Ovoj (.druflow-button-block) namenoma NE uporablja .alignfull/.alignwide
   (edini vzrok preboja širine v gradnikih pri jedrnem gumbu) - vedno ostane
   znotraj širine nadrejenega stolpca. */
.druflow-button-block {
	width: 100%;
	max-width: 100%;
}

.druflow-button-block--align-left {
	text-align: left;
}

.druflow-button-block--align-center {
	text-align: center;
}

.druflow-button-block--align-right {
	text-align: right;
}

.druflow-button-block .druflow-btn {
	max-width: 100%;
	background: var(--druflow-btn-bg, var(--color-primary));
	color: var(--druflow-btn-color, var(--color-white));
}

.druflow-button-block .druflow-btn:hover {
	background: var(--druflow-btn-bg-hover, var(--druflow-btn-bg, var(--color-primary)));
	color: var(--druflow-btn-color-hover, var(--druflow-btn-color, var(--color-white)));
}

/* --- Bralnik PDF (druflow/pdf-viewer, gl. inc/pdf-viewer-block.php in
   assets/pdf-viewer.js) - ena cela stran naenkrat, samo za branje. --- */
.druflow-pdf-viewer {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-tan-light, #f4f1ea);
	border-radius: 6px;
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
	outline: none;
}

.druflow-pdf-viewer:focus-visible {
	box-shadow: 0 0 0 3px var(--color-primary);
}

.druflow-pdf-viewer-canvas {
	max-width: 100%;
	max-height: 100%;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	background: #fff;
}

.druflow-pdf-viewer-status {
	position: absolute;
	margin: 0;
	color: var(--color-text-dark, #404040);
	font-size: 14px;
}

.druflow-pdf-viewer-status[hidden] {
	display: none;
}

.druflow-pdf-viewer-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.druflow-pdf-viewer-nav:hover {
	background: rgba(0, 0, 0, 0.8);
}

.druflow-pdf-viewer-nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.druflow-pdf-viewer-prev {
	left: 14px;
}

.druflow-pdf-viewer-next {
	right: 14px;
}

/* --- Sponzorji (trak logotipov, gl. type === 'sponsors' v section-blocks.php)
   - fiksnih 6 stolpcev, VSAK logotip eksplicitno v svojem stolpcu (inline
   grid-column v PHP) - manjkajoč logotip pusti svoj stolpec prazen, ostali
   ohranijo enako velikost/mesto (uporabnikova eksplicitna zahteva). --- */
.sponsors-strip {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: center;
	justify-items: center;
}

.sponsor-cell {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

/* Sponzor - povezava (izbirno) in napis ob prehodu miške (izbirno, gl. type
   === 'sponsors' v section-blocks.php) - prekrivni pas se ob hoverju dvigne
   čez logotip od spodaj (isti "razkrij ob hoverju" vzorec, ki ga uporabniki
   poznajo iz drugih spletnih strani s sponzorji/partnerji). Samo celice z
   dejansko vnesenim napisom dobijo ta element - brez napisa hover ne naredi
   ničesar (logotip ostane samo klikljiv, če ima povezavo). */
.sponsor-cell-caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	text-align: center;
	background: rgba(0, 0, 0, 0.78);
	color: #fff;
	font-size: 0.82rem;
	line-height: 1.3;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.sponsor-cell:hover .sponsor-cell-caption,
.sponsor-cell:focus-visible .sponsor-cell-caption {
	opacity: 1;
	transform: translateY(0);
}

/* Uporabnikovo poročilo: pokončni logotipi (npr. grbi občin) so bili videti
   veliko manjši od vodoravnih (podjetja) - prejšnja različica je omejevala
   SAMO višino (max-height), zato je ozek/pokončen logotip pri isti višini
   ostal ozek/majhen, širok/vodoraven logotip pa je zapolnil ves prostor.
   `object-fit:contain` znotraj FIKSNE škatle (širina + višina) namesto tega
   vsak logotip - ne glede na razmerje stranic - sorazmerno poveča do enake,
   dosledne velikosti (brez popačenja). */
.sponsor-cell img {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: contain;
}

@media (max-width: 782px) {
	.sponsors-strip {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 20px;
	}

	/* Na ozkem zaslonu naj se zapolnjene celice strnejo (brez praznih vrzeli
	   na mestu manjkajočih) - fiksna postavitev ima smisel samo v eni sami,
	   široki namizni vrstici. */
	.sponsor-cell {
		grid-column: auto !important;
	}
}

@media (max-width: 480px) {
	.sponsors-strip {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Ekipa (fotografija + ime + besedilo, do 12 oseb, gl. type === 'team' v
   section-blocks.php) - FLEX vrstice namesto CSS grida (za razliko od
   Sponzorjev zgoraj), ker so tu izrisane SAMO dejansko zapolnjene osebe, ne
   fiksnih 12 mest - `flex-wrap` + `justify-content:center` samodejno
   sredinsko poravna tudi zadnjo, nepopolno vrstico (uporabnikova eksplicitna
   zahteva), brez dodatne JS logike. Znotraj vsake vrstice (flex "line") vse
   kartice privzeto raztegne na enako višino (`align-items:stretch`,
   privzeto obnašanje flex vrstice) - "stolpci so po višini enaki". --- */
.team-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Privzeta vrednost (brez inline sloga) - dejanski razmik vrstic je
	   odvisen od nastavljenega zamika fotografije, zato ga PHP vedno nastavi
	   inline (gl. inc/section-blocks.php) - to je le varovalka. */
	gap: 32px 24px;
	/* Zgornji rob je večji od spodnjega (privzeto) - fotografije segajo delno
	   ČEZ zgornji rob kartic (gl. .team-card-photo spodaj), zato prva vrstica
	   potrebuje dodaten prostor, da se ne zaleti v naslov sekcije/vsebino nad
	   njo. */
	margin: 50px 0 30px;
}

.team-card {
	box-sizing: border-box;
	/* Uporabnikova eksplicitna zahteva: izbira 3 ALI 4 kartic v vrsti (doslej
	   trdo kodirano na 33.333% = vedno 3) - `--druflow-team-columns` nastavi
	   PHP inline na `.team-grid` (2 ali 24px razmik med stolpci upoštevan v
	   izračunu, da vrstica ne "prekipi" čez razpoložljivo širino). */
	flex: 0 1 calc((100% - (var(--druflow-team-columns, 3) - 1) * 24px) / var(--druflow-team-columns, 3));
	max-width: calc((100% - (var(--druflow-team-columns, 3) - 1) * 24px) / var(--druflow-team-columns, 3));
	background: var(--druflow-card-bg, var(--color-white));
	border: 1px solid var(--color-tan-light);
	border-radius: 6px;
	padding: 28px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* NUJNO za `.team-card-photo` spodaj (position:absolute se sicer sklicuje
	   na naslednjega POZICIONIRANEGA prednika, ne na to kartico). Namenoma
	   NE `overflow:hidden` - fotografija mora vidno segati ČEZ zgornji rob
	   (uporabnikova eksplicitna zahteva: "slika mora biti napol izven
	   okvirja"). Dejanski `padding-top` (rezerviran prostor za DEL
	   fotografije, ki ostane ZNOTRAJ kartice) je nastavljen INLINE v PHP, saj
	   je odvisen od velikosti/zamika TE POSAMEZNE osebe. */
	position: relative;
}

/* Fotografija (ali njeno nadomestilo z inicialkami, gl. --initials spodaj) je
   absolutno pozicionirana in namenoma sega delno ČEZ zgornji rob kartice
   (uporabnikova eksplicitna zahteva) - velikost/zamik navzgor/obroba so
   SKUPNI za VSO sekcijo (EN sam izračun, inline `style`, gl. section-blocks.
   php - "nastavitev mora biti nastavljena samo enkrat in velja za vse
   kartice"), zato tu ostanejo samo lastnosti, ki jih ni treba spreminjati po
   meritvah. `object-fit:cover`
   sliko obreže tako, da zapolni celotno (kvadratno) škatlo brez popačenja
   (uporabnikova zahteva: "slike se prilagodijo glede na format"). Oblika
   (pravokotna/zaobljena/okrogla) je EN sam izbirnik za VSE osebe hkrati
   (uporabnikova zahteva: "izbor če je slika okrogla"), enak vzorec kot pri
   "Samo slika" (image_only_shape). */
.team-card-photo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
	box-sizing: border-box;
}

.team-card-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-card-photo--rect {
	border-radius: 6px;
}

.team-card-photo--rounded {
	border-radius: 20px;
}

.team-card-photo--circle {
	border-radius: 50%;
}

/* Brez naložene fotografije: inicialke imena na ozadju primarne barve strani
   (uporabnikova eksplicitna zahteva) - ista škatla (velikost/zamik/obroba/
   oblika) kot prava fotografija, da se izgled ne "skoči", če urednik kasneje
   fotografijo doda. */
.team-card-photo--initials {
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.team-card-initials {
	color: #fff;
	font-weight: 700;
	line-height: 1;
}

.team-card-name {
	margin: 0 0 8px;
	/* Naslov posamezne osebe je NAMENOMA <h2> (uporabnikova eksplicitna
	   zahteva), a brez omejitve velikosti bi podedoval splošno (veliko)
	   velikost H2 iz Prilagajanje -> Tipografija - znotraj ozke kartice bi to
	   izgledalo pretirano, zato velikost tu POVOZIMO na razumno mero. */
	font-size: 1.15rem;
}

/* Besedilo pod imenom je LEVO poravnano (za razliko od centrirane
   fotografije/imena zgoraj) - odstavki/naštevanja se berejo veliko lažje
   levo poravnani kot centrirani, enako kot povsod drugod v temi, kjer se
   izriše prosto besedilo. `druflow_render_text_with_lists()` (gl. vrh te
   datoteke) poskrbi za pravo <ul>/<ol> zamik alinej/oštevilčenja. */
.team-card-text {
	text-align: left;
	width: 100%;
}

.team-card-text p {
	margin: 0 0 10px;
}

.team-card-text p:last-child {
	margin-bottom: 0;
}

.team-card-text ul,
.team-card-text ol {
	margin: 0 0 10px;
	padding-left: 1.3em;
}

.team-card-text ul:last-child,
.team-card-text ol:last-child {
	margin-bottom: 0;
}

@media (max-width: 782px) {
	.team-card {
		flex: 0 1 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}
}

@media (max-width: 480px) {
	.team-card {
		flex: 0 1 100%;
		max-width: 100%;
	}
}

.druflow-pdf-viewer-page-label {
	position: absolute;
	bottom: 12px;
	right: 14px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 12px;
	padding: 3px 10px;
	border-radius: 999px;
}

/* --- Kompakten seznam objav --- */

.compact-list-item {
	padding: 18px 0;
	border-bottom: 1px solid var(--color-tan-light);
}

.compact-list-item:first-child {
	padding-top: 0;
}

.compact-list-title {
	font-size: 18px;
	margin: 0 0 6px;
}

.compact-list-title a {
	color: var(--color-text);
}

.compact-list-title a:hover {
	color: var(--color-primary);
}

.compact-list-excerpt {
	font-size: 14px;
	color: var(--color-gray-2);
	margin: 6px 0;
}

.compact-list-more {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--druflow-card-button-color, var(--color-primary));
	background: var(--druflow-card-button-bg, transparent);
	padding: 4px 10px;
	margin-left: -10px;
	border-radius: var(--druflow-card-button-radius, 4px);
}

.compact-list-more:hover {
	filter: brightness(0.92);
}

/* --- "Sorodne objave" pod prispevkom - ena vrstica na objavo (naslov +
   datum, brez izvlečka/"beri dalje") - prejšnja različica je uporabljala
   isti ".compact-list" izris kot polnokrven seznam objav (naslov + izvleček
   + gumb), zato je zavzela do polovice višine prispevka (uporabnikovo
   poročilo). */

.related-posts-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.related-posts-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--color-tan-light);
}

.related-posts-item:first-child {
	padding-top: 0;
}

.related-posts-item:last-child {
	border-bottom: none;
}

.related-posts-link {
	font-size: 17px;
	font-weight: 600;
	color: var(--color-text);
}

.related-posts-link:hover {
	color: var(--color-primary);
}

.related-posts-date {
	flex-shrink: 0;
	font-size: 13px;
	color: var(--color-gray-2);
}

/* --- Galerija/drsnik --- */

.gallery-slider-section {
	padding: 20px var(--druflow-content-inset, 0);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* "Slikovni trak" (druflow/image-strip) - 2 do 6 slik STATIČNO druga ob
   drugi, brez drsnika (v nasprotju z .gallery-slider zgoraj). NAMENOMA BREZ
   obrezovanja (prej poskušeno z aspect-ratio + object-fit: cover, tako 4:3
   kot 1:1 - uporabnikovo poročilo: "mora pokazati CELO sliko... niti pod
   razno 1:1") IN NAMENOMA ZAPOLNI CELO ŠIRINO objave, ne glede na število
   slik (uporabnikovo poročilo: "če dodam tri slike, morajo biti večje in
   zapolniti širino, ne ostati v prostoru za vseh 6") - "justified gallery"
   postavitev: PHP (gl. druflow_image_aspect_ratio() v inc/section-blocks
   .php) izračuna DEJANSKO razmerje stranic vsake slike in ga uporabi kot
   `flex-grow` (inline slog na `.image-strip-item`) - flexbox nato širino
   vrstice razdeli SORAZMERNO tem razmerjem, skupna VIŠINA vrstice pa je
   fiksna (spodaj) - landscape slika (razmerje > 1) dobi širšo celico kot
   portret, vedno brez izgube dela slike, vedno čez celo širino. Slika sama
   se izriše v polni naloženi ločljivosti (gl. 'full' namesto 'large' v
   inc/section-blocks.php). */
.image-strip-section {
	padding: 20px var(--druflow-content-inset, 0);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.image-strip {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	/* 320px je le CSS-only fallback (dokler/če se assets/image-strip-layout.js
	   ne izvede) - JS ob nalaganju strani prepiše to na PRAVO izračunano
	   višino (gl. komentar tam), da so vse slike v vrstici prikazane CELE,
	   brez obrezovanja, ne glede na format/orientacijo. */
	height: 320px;
}

.image-strip-item {
	flex-shrink: 1;
	flex-basis: 0;
	/* flex-grow pride kot inline slog na SAMEM elementu (PHP) - sorazmeren
	   razmerju stranic te konkretne slike. */
	height: 100%;
	border-radius: 6px;
	overflow: hidden;
}

.image-strip-item img {
	display: block;
	width: 100%;
	height: 100%;
	/* "contain" namesto "cover": tudi če bi bil izračun višine vrstice
	   (JS ali CSS-fallback) nenatančen, se slika NIKOLI ne sme obrezati -
	   uporabnikova izrecna, dvakrat ponovljena zahteva. */
	object-fit: contain;
}

/* Na ozkih zaslonih preklopimo na navpičen sklad, kjer vsaka slika dobi
   svojo naravno višino pri polni širini (enak vzorec kot .druflow-page-
   columns v style.css) - "justified gallery" flex-grow razdelitev ima
   smisel samo v EN vrstici, ne v navpičnem skladu. */
@media (max-width: 680px) {
	.image-strip {
		flex-direction: column;
	}
	.image-strip-item {
		height: auto;
		width: 100%;
	}
	.image-strip-item img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}
}

/* ------------------------------------------------------------------ */
/* Nastavljiva višina bloka (px/%), ločeno za namizje/tablico/mobitel   */
/* ------------------------------------------------------------------ */
/* Uporabnikova eksplicitna zahteva: VSAK blok (ne le hero/CTA) mora imeti
   možnost nastavitve višine, odzivno po napravi - robovi/spacing sami po
   sebi ne zagotovijo predvidljivega videza ob preklopu na manjši zaslon.
   min-height (NE height) - daljša vsebina nikoli ni obrezana, blok se
   preprosto raztegne čez nastavljeno vrednost, če je treba. Spremenljivke
   nastavi PHP (gl. druflow_section_height_style_vars() v inc/section-
   blocks.php) kot inline slog na sami sekciji - prazna vrednost = brez
   izpisa, torej "auto" (obstoječe obnašanje, brez tveganja za nazaj). */
.content-section,
.gallery-slider-section,
.image-strip-section,
.image-text-section {
	min-height: var(--druflow-block-min-height, auto);
}

@media (max-width: 782px) {
	.content-section,
	.gallery-slider-section,
	.image-strip-section,
	.image-text-section {
		min-height: var(--druflow-block-min-height-tablet, var(--druflow-block-min-height, auto));
	}
}

@media (max-width: 600px) {
	.content-section,
	.gallery-slider-section,
	.image-strip-section,
	.image-text-section {
		min-height: var(--druflow-block-min-height-mobile, var(--druflow-block-min-height-tablet, var(--druflow-block-min-height, auto)));
	}
}

/* Hero/CTA: DVA razreda (ne en), da to zanesljivo premaga splošno Customizer
   privzeto višino (Videz -> Hero/CTA - gl. druflow_hero_min_height/
   druflow_cta_min_height v design-customizer.php, ki cilja isti element z
   ENAKO specifičnostjo) - enak vzorec/isti razlog kot pri .hero-section-
   subheading popravku. BREZ privzete vrednosti v var() je namerno: če
   uporabnik za TO sekcijo ne nastavi višine, to (bolj specifično) pravilo
   postane neveljavno in se "spusti" do splošne Customizer nastavitve
   spodaj v kaskadi - je ne prepiše s prazno/auto vrednostjo. */
.hero-section .hero-section-overlay,
.cta-section .cta-section-overlay {
	min-height: var(--druflow-block-min-height);
}

@media (max-width: 782px) {
	.hero-section .hero-section-overlay,
	.cta-section .cta-section-overlay {
		min-height: var(--druflow-block-min-height-tablet, var(--druflow-block-min-height));
	}
}

@media (max-width: 600px) {
	.hero-section .hero-section-overlay,
	.cta-section .cta-section-overlay {
		min-height: var(--druflow-block-min-height-mobile, var(--druflow-block-min-height-tablet, var(--druflow-block-min-height)));
	}
}

.gallery-slider {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	background: var(--color-dark-section);
}

.gallery-slider-track {
	position: relative;
	aspect-ratio: 16 / 9;
}

.gallery-slider-slide {
	position: absolute;
	inset: 0;
}

.gallery-slider-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--color-dark-section);
}

.gallery-slider-prev,
.gallery-slider-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.45);
	color: var(--color-white);
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.gallery-slider-prev {
	left: 14px;
}

.gallery-slider-next {
	right: 14px;
}

.gallery-slider-prev:hover,
.gallery-slider-next:hover {
	background: var(--color-primary);
}

.gallery-slider-dots {
	position: absolute;
	bottom: 14px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.gallery-slider-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	padding: 0;
}

.gallery-slider-dot.is-active {
	background: var(--color-white);
}

.card-body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.card-title {
	font-size: 18px;
	margin: 0;
}

.card-title a {
	color: var(--color-text);
}

.card-title a:hover {
	color: var(--color-primary);
}

.card-meta {
	font-size: 13px;
	color: var(--color-gray-1);
}

.card-excerpt {
	font-size: 14px;
	color: var(--color-gray-2);
	flex: 1;
}

.card-more {
	align-self: flex-start;
	background: var(--druflow-card-button-bg, var(--color-primary));
	color: var(--druflow-card-button-color, var(--color-white));
	padding: 8px 16px;
	border-radius: var(--druflow-card-button-radius, 4px);
	font-size: 13px;
	font-weight: 600;
}

.card-more:hover {
	background: var(--druflow-card-button-bg, var(--color-primary));
	color: var(--druflow-card-button-color, var(--color-white));
	filter: brightness(0.92);
}

/* --- Vrstica prednosti (feature bar) - prekriva se čez rob prejšnje sekcije --- */

.feature-bar {
	position: relative;
	z-index: 3;
	margin: -60px auto 30px;
	max-width: 1100px;
	background: var(--color-white);
	border-radius: 100px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-wrap: wrap;
}

.feature-bar-item {
	flex: 1 1 200px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 30px 24px;
	gap: 8px;
}

/* Tanka ločilna črta med postavkami (v barvi poudarjenega bloka). */
.feature-bar-item:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 20%;
	bottom: 20%;
	width: 1px;
	background: var(--druflow-fb-divider-color, var(--color-primary));
}

/* Zaobljenost na prvi/zadnji postavki (ne overflow:hidden na .feature-bar,
   ker bi ta obrezal ikono, ki sme čez zgornji rob - gl. --overflow spodaj). */
.feature-bar-item:first-child {
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;
}

.feature-bar-item:last-child {
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
}

/* Oblika CELEGA TRAKU (ne ikone) - izbirljivo v urejevalniku sekcije. Večja
   specifičnost (dodaten .feature-bar--{oblika} razred) prevlada nad zgornjo
   privzeto "pill" zaobljenostjo prve/zadnje postavke. */
.feature-bar--diagonal {
	border-radius: 60px 0 60px 0;
}

.feature-bar--diagonal .feature-bar-item:first-child {
	border-radius: 60px 0 0 0;
}

.feature-bar--diagonal .feature-bar-item:last-child {
	border-radius: 0 0 60px 0;
}

.feature-bar--diagonal-reverse {
	border-radius: 0 60px 0 60px;
}

.feature-bar--diagonal-reverse .feature-bar-item:first-child {
	border-radius: 0 0 0 60px;
}

.feature-bar--diagonal-reverse .feature-bar-item:last-child {
	border-radius: 0 60px 0 0;
}

.feature-bar--rect,
.feature-bar--rect .feature-bar-item:first-child,
.feature-bar--rect .feature-bar-item:last-child {
	border-radius: 0;
}

.feature-bar-item.is-highlighted {
	background: var(--druflow-fb-highlighted-bg, var(--color-primary));
	color: var(--color-white);
}

.feature-bar-icon {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--druflow-fb-icon-bg, var(--color-tan-light));
	overflow: hidden;
	box-sizing: border-box;
	border-style: solid;
	border-width: 0;
	border-color: var(--color-white);
	position: relative;
}

.feature-bar-item.is-highlighted .feature-bar-icon {
	background: rgba(255, 255, 255, 0.2);
	border-color: var(--druflow-fb-highlighted-bg, var(--color-primary));
}

.feature-bar-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Ikona iz seznama (namesto naložene slike) - sama SVG ikona že ima svojo
   obliko (zvezda, srce ...), zato ne rabi obrobe/clip-path okvirja kot
   slikovni način. Ozadje (krožec) PRIVZETO OSTANE (podeduje var(--color-
   tan-light) iz .feature-bar-icon) - "brez ozadja ikone" nastavitev (gl.
   druflow_feature_bar_render(), $glyph_style) ga po potrebi prek inline
   sloga izklopi na transparent, enako kot pri slikovnem načinu. */
.feature-bar-icon--glyph {
	border-width: 0;
	border-radius: 50%;
}
.feature-bar-icon--glyph svg {
	width: 70%;
	height: 70%;
}

/* Oblike ikone - izbirljive v urejevalniku sekcije. "diagonal"/"diagonal-
   reverse" uporabita odstotke (ne fiksne px kot pri obliki celega traku), ker
   je velikost ikone poljubna/nastavljiva. */
.feature-bar-icon--circle { border-radius: 50%; }
.feature-bar-icon--square { border-radius: 0; }
.feature-bar-icon--semi-left { border-radius: 50% 0 0 50%; }
.feature-bar-icon--semi-right { border-radius: 0 50% 50% 0; }
.feature-bar-icon--diagonal { border-radius: 40% 0 40% 0; }
.feature-bar-icon--diagonal-reverse { border-radius: 0 40% 0 40%; }
/* Oblike, kjer je za izris uporabljen clip-path (ne border-radius), NE smejo
   imeti clip-path neposredno na .feature-bar-icon elementu samem: clip-path
   na starševskem elementu obreže VSE znotraj njega (tudi ::before/::after
   psevdo-elemente), zato bel rob ne bi mogel "pokukati" izven zvezdaste/
   večkotne oblike navzven. Namesto tega je clip-path prek --icon-clip
   spremenljivke (deduje se na otroke) uporabljen LOČENO na treh mestih:
   sliki (obreže fotografijo), ::before (rob - večji, zamaknjen navzven za
   širino roba) in po potrebi ::after (barvni prelet pri zvezdi). Ozadje in
   navaden CSS border na .feature-bar-icon se za te oblike ne uporabita
   (border-radius+clip-path se ne kombinirata) - "rob" v celoti izriše
   ::before spodaj. Senčenje (pri prekrivanju čez rob traku) prav tako ne sme
   biti box-shadow (ta bi se izrisal kot pravokotnik/oklestena oblika po
   border-radius, ne po clip-path) - zato te oblike namesto box-shadow
   uporabijo filter:drop-shadow, ki upošteva dejansko (že obrezano) siluteo. */
.feature-bar-icon--hexagon,
.feature-bar-icon--diamond,
.feature-bar-icon--triangle,
.feature-bar-icon--pentagon,
.feature-bar-icon--star {
	background: transparent;
	overflow: visible;
	/* !important je tu nujen: druflow_feature_bar_render() na TA ISTI element
	   vedno zapiše tudi inline "border-width:Npx" (za oblike z border-radius,
	   kjer navaden CSS border deluje pravilno) - inline slog ima prednost
	   pred zunanjim CSS ne glede na specifičnost, zato bi brez !important tu
	   ta ista vrednost "uhajala" skozi kot navaden (kvadraten) CSS border,
	   VZPOREDNO z našim ::before okvirjem spodaj (viden kot grd kvadrat okoli
	   zvezde/večkotnika). Dejanska debelina roba za te oblike se prenese
	   izključno prek --icon-border-width (ločena spremenljivka, ne "border-
	   width" sama), ki jo bere ::before spodaj. */
	border-width: 0 !important;
}
.feature-bar-icon--hexagon { --icon-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.feature-bar-icon--diamond { --icon-clip: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.feature-bar-icon--triangle { --icon-clip: polygon(50% 0%, 0% 100%, 100% 100%); }
.feature-bar-icon--pentagon { --icon-clip: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.feature-bar-icon--star { --icon-clip: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

.feature-bar-icon--hexagon img,
.feature-bar-icon--diamond img,
.feature-bar-icon--triangle img,
.feature-bar-icon--pentagon img,
.feature-bar-icon--star img {
	clip-path: var(--icon-clip);
}

/* Rob - bela (privzeto) plast ZA sliko, večja od nje natanko za širino roba
   (negativen inset = --icon-border-width), obrezana na ISTO obliko - tako
   nastane enakomeren "obroč" okoli zvezde/večkotnika, ki se pravilno prilega
   robu oblike namesto biti nevidem kot pri navadnem CSS border. */
.feature-bar-icon--hexagon::before,
.feature-bar-icon--diamond::before,
.feature-bar-icon--triangle::before,
.feature-bar-icon--pentagon::before,
.feature-bar-icon--star::before {
	content: '';
	position: absolute;
	inset: calc(-1 * var(--icon-border-width, 0px));
	clip-path: var(--icon-clip);
	background: var(--color-white);
	z-index: -1;
}
.feature-bar-item.is-highlighted .feature-bar-icon--hexagon::before,
.feature-bar-item.is-highlighted .feature-bar-icon--diamond::before,
.feature-bar-item.is-highlighted .feature-bar-icon--triangle::before,
.feature-bar-item.is-highlighted .feature-bar-icon--pentagon::before,
.feature-bar-item.is-highlighted .feature-bar-icon--star::before {
	background: var(--color-primary);
}

/* Zvezda - EDINA oblika, ki je 100% zapolnjena z rdečo (::after, obrezan na
   isto zvezdasto obliko - slika pod njo je torej povsem prekrita). Vse
   ostale oblike sliko samo obrežejo, brez barvnega sloja. Privzeto ima bel
   rob (gl. druflow_feature_bar_render() - icon_border_width privzeto 4px pri
   zvezdi), katerega debelina je poljubno nastavljiva. */
.feature-bar-icon--star::after {
	content: '';
	position: absolute;
	inset: 0;
	clip-path: var(--icon-clip);
	background: #d21b1b;
	pointer-events: none;
}

/* Ikona sme (izbirno) pokukati čez zgornji rob TRAKU (ne samo postavke) za
   večji, "3D" efekt. `position: absolute` + `translateY(-50%)` je namerno
   namesto fiksnega negativnega margina - ikona je tako povsem izvzeta iz
   postavitve (samo okras), postavka/trak pa se širi izključno z naslovom in
   besedilom, ne glede na to, kako velika je slika. Ker je premik za polovico
   LASTNE višine (ne fiksno število px), to pravilno deluje pri POLJUBNI
   velikosti ikone (gl. druflow_feature_bar_render() - ustrezen zgornji odmik
   na .feature-bar-item je izračunan glede na dejansko velikost ikone). Širina
   roba (border-width) je nastavljiva - gl. inline slog na elementu. */
.feature-bar-icon--overflow {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
	z-index: 2;
}

/* box-shadow sledi pravokotni/border-radius obliki elementa, NE clip-path
   siluteti - pri šesterokotniku/rombu/trikotniku/peterokotniku/zvezdi bi se
   zato senca izrisala kot nevidna oz. napačna (skrita za robom ::before, ki
   ima z-index:-1). filter:drop-shadow namesto tega senči dejansko (že
   obrezano) vsebino elementa - deluje pravilno za poljubno obliko. */
.feature-bar-icon--overflow.feature-bar-icon--hexagon,
.feature-bar-icon--overflow.feature-bar-icon--diamond,
.feature-bar-icon--overflow.feature-bar-icon--triangle,
.feature-bar-icon--overflow.feature-bar-icon--pentagon,
.feature-bar-icon--overflow.feature-bar-icon--star {
	box-shadow: none;
	filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
}

.feature-bar-title {
	font-weight: 600;
	font-size: 15px;
	color: var(--druflow-fb-title-color, inherit);
}

.feature-bar-text {
	font-size: 13px;
	opacity: 0.75;
	color: var(--druflow-fb-text-color, inherit);
}

.feature-bar-item.is-highlighted .feature-bar-title {
	color: var(--druflow-fb-title-color-highlighted, var(--color-white));
}

.feature-bar-item.is-highlighted .feature-bar-text {
	color: var(--druflow-fb-text-color-highlighted, var(--color-white));
}

@media (max-width: 782px) {
	.feature-bar {
		margin-top: -30px;
		border-radius: 20px;
	}

	.feature-bar-item:first-child {
		border-top-left-radius: 20px;
		border-bottom-left-radius: 0;
	}

	.feature-bar-item:last-child {
		border-top-right-radius: 0;
		border-bottom-right-radius: 20px;
	}
}

/* --- Citati/priporočila (testimonials) --- */
/* Drsnik (slider) - en citat naenkrat, sredinsko poravnan, s puščicama levo/
   desno (gl. assets/testimonials-slider.js - enak preprost `hidden`-
   preklopni vzorec kot že obstoječ assets/gallery-slider.js za galerijo
   slik, brez podvajanja logike). Uporabnikova eksplicitna zahteva: "Glas
   članic je slider... če tega bloka nimaš, ga naredi." - prejšnja različica
   je bila staticna mreža VSEH citatov hkrati, kar ni bil pravi drsnik. */

.testimonials-slider {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.testimonials-slider-track {
	flex: 1;
	min-width: 0;
}

.testimonial-card {
	background: #f4f2f7;
	border-radius: 16px;
	padding: 40px 50px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Uporabnikovo poročilo: drsnik citatov je prikazal VSE kartice naenkrat,
   eno pod drugo, namesto ene naenkrat - `display:flex` zgoraj (avtorski
   CSS) vedno prepiše brskalnikov privzet `[hidden]{display:none}` (ta je na
   nivoju "user agent", avtorski slog ga premaga NE GLEDE na specifičnost ali
   vrstni red) - neaktivne kartice (gl. `hidden` atribut, ki ga PHP pravilno
   doda vsem razen prvi, inc/testimonials-block.php) so zato ostale VIDNE.
   Brez tega pravila drsnik torej ni deloval. */
.testimonial-card[hidden] {
	display: none;
}

.testimonial-photo-wrap {
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 16px;
}

.testimonial-photo {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.testimonial-content {
	max-width: 100%;
}

.testimonial-quote-mark {
	display: block;
	font-size: 48px;
	line-height: 1;
	color: var(--color-primary);
	font-family: Georgia, serif;
	margin-bottom: 6px;
}

.testimonial-text {
	font-size: 15px;
	color: var(--color-gray-3);
	line-height: 1.6;
	margin-bottom: 20px;
}

.testimonial-author {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.testimonial-name {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: var(--color-gray-3);
}

.testimonial-role {
	display: block;
	font-size: 13px;
	color: var(--color-gray-1);
	font-style: italic;
}

.testimonials-slider-prev,
.testimonials-slider-next {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.testimonials-slider-prev:hover,
.testimonials-slider-next:hover {
	filter: brightness(0.85);
}

.testimonials-slider-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.testimonials-slider-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: #e6ddf2;
	cursor: pointer;
}

.testimonials-slider-dot.is-active {
	background: var(--color-primary);
}

@media (max-width: 600px) {
	.testimonial-card {
		padding: 30px 24px;
	}
	.testimonials-slider-prev,
	.testimonials-slider-next {
		width: 32px;
		height: 32px;
	}
}

/* --- Prijava na e-novice --- */

.druflow-newsletter-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.newsletter-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

.newsletter-form-row input[type="text"],
.newsletter-form-row input[type="email"] {
	flex: 1 1 200px;
	padding: 10px 14px;
	border: 1px solid var(--color-tan-light);
	border-radius: 4px;
	font-size: 15px;
}

.druflow-newsletter-success {
	color: var(--color-primary);
	font-weight: 600;
}

.druflow-newsletter-errors {
	color: #b00020;
	margin-bottom: 12px;
}

/* --- Obvestilo o piškotkih --- */

.druflow-cookie-notice {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 400;
	background: var(--color-dark-section);
	color: var(--color-white);
	padding: 16px 24px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-size: 14px;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

/* Gl. enak komentar pri .druflow-lightbox - `display` mora biti vezan na
   `:not([hidden])`, sicer preglasi JS-jevo skrivanje po kliku "Strinjam se". */
.druflow-cookie-notice:not([hidden]) {
	display: flex;
}

.druflow-cookie-notice p {
	margin: 0;
	max-width: 700px;
}

.druflow-cookie-notice a {
	/* Prej peščena --color-tan-light (uporabnikovo poročilo) - svetla
	   vijolična, vidna na temnem ozadju obvestila, usklajena z znamko. */
	color: #cbb8e8;
	text-decoration: underline;
	margin-left: 6px;
}

.druflow-cookie-notice .button {
	flex-shrink: 0;
}

/* Uporabnikova eksplicitna zahteva: prava izbira (Sprejmem vse / Samo nujne
   / Ne sprejmem), ne le en vsiljen gumb - "Sprejmem vse" ostane glavni
   (.button, poln primarna barva), ostali dve pa manj poudarjeni obrobni
   izbiri, da vizualno ne tekmujeta z glavno akcijo. */
.druflow-cookie-notice-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.druflow-cookie-notice-actions .button-secondary {
	box-sizing: border-box;
	display: inline-block;
	background: transparent;
	color: var(--color-white);
	border: 1px solid rgba(255, 255, 255, 0.5);
	padding: 11px 20px;
	border-radius: 4px;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.04em;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.druflow-cookie-notice-actions .button-secondary:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.8);
}

/* --- Nazaj na vrh --- */

.druflow-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 300;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.druflow-back-to-top:hover {
	background: var(--color-accent);
}

.druflow-back-to-top.is-raised {
	bottom: 90px;
}

/* --- Deljenje na družbenih omrežjih --- */

.druflow-share-buttons {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--color-tan-light);
}

.druflow-share-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-gray-1);
	margin-right: 4px;
}

.druflow-share-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	/* Prej peščena --color-tan-light (uporabnikovo poročilo) - svetla
	   vijolična, usklajena z ostalimi "muted" elementi. */
	background: #e6ddf2;
	color: var(--color-gray-3);
}

.druflow-share-link:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

/* --- Lightbox za slike --- */

.druflow-lightbox {
	position: fixed;
	inset: 0;
	z-index: 500;
	background: rgba(0, 0, 0, 0.9);
	align-items: center;
	justify-content: center;
}

/* `display` NAMENOMA ločeno od zgornjega pravila in vezano na `:not([hidden])`
   - sicer bi to preglasilo brskalnikov privzeti `[hidden] { display:none }`
   (avtorski slog vedno zmaga nad privzetim UA slogom pri enaki specifičnosti),
   zaradi česar bi bil lightbox ves čas viden čez celo stran, ne glede na
   `hidden` atribut, ki ga JS preklaplja. */
.druflow-lightbox:not([hidden]) {
	display: flex;
}

body.druflow-lightbox-open {
	overflow: hidden;
}

.druflow-lightbox-image {
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.druflow-lightbox-close,
.druflow-lightbox-prev,
.druflow-lightbox-next {
	position: fixed;
	background: rgba(255, 255, 255, 0.15);
	color: var(--color-white);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

/* `display` ločeno od zgornjega pravila, enak razlog kot pri .druflow-lightbox
   samem - assets/lightbox.js preklaplja `prevBtn.hidden`/`nextBtn.hidden`
   glede na to, ali je slik na strani več kot ena; brez tega vezanega pravila
   bi avtorski `display:flex` preglasil `[hidden]{display:none}` in puščici
   ostali vidni tudi pri eni sami sliki (najdeno pri sistematičnem pregledu). */
.druflow-lightbox-close:not([hidden]),
.druflow-lightbox-prev:not([hidden]),
.druflow-lightbox-next:not([hidden]) {
	display: flex;
}

.druflow-lightbox-close:hover,
.druflow-lightbox-prev:hover,
.druflow-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.3);
}

.druflow-lightbox-close {
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	font-size: 28px;
	line-height: 1;
}

.druflow-lightbox-prev,
.druflow-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 54px;
	height: 54px;
	font-size: 30px;
}

.druflow-lightbox-prev {
	left: 20px;
}

.druflow-lightbox-next {
	right: 20px;
}

@media (max-width: 600px) {
	.druflow-lightbox-prev,
	.druflow-lightbox-next {
		width: 42px;
		height: 42px;
		font-size: 22px;
	}
}

/* --- Zaščita slik (odvračanje priložnostnega kopiranja) --- */

.druflow-image-protection img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* --- Ni rezultatov --- */

.no-results {
	text-align: center;
	padding: 60px 20px;
	color: var(--color-gray-1);
}

/* --- Časovnica ---
   Sredinska navpična črta (::before na .timeline), dogodki se lahko
   izmenjujejo levo/desno (privzeto - "eden levo, eden desno") ali so vsi
   na isti strani ("timeline-layout-left"/"timeline-layout-right") - gl.
   druflow_timeline_render() v inc/timeline-block.php. Barve/razmiki so
   nastavljivi prek CSS spremenljivk (--timeline-line-color itd.), ki jih
   izrisna funkcija po potrebi izpiše kot inline style na .timeline. */

.timeline {
	--timeline-gap: 40px;
	--timeline-item-spacing: 34px;
	position: relative;
	margin: 30px 0;
}

.timeline::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--timeline-line-color, var(--color-tan-light));
	transform: translateX(-50%);
}

.timeline-item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr var(--timeline-gap) 1fr;
	align-items: start;
	margin-bottom: var(--timeline-item-spacing);
}

.timeline-item:last-child {
	margin-bottom: 0;
}

.timeline-marker {
	position: absolute;
	left: 50%;
	top: 4px;
	transform: translateX(-50%) scale(0.8);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--timeline-line-color, var(--color-primary));
	border: 3px solid var(--color-white);
	box-shadow: 0 0 0 2px var(--timeline-line-color, var(--color-tan-light));
	z-index: 1;
	/* Isti učinek ob skrolanju kot pri "Časovnici z učinkom ob skrolanju"
	   (gl. .scroll-timeline-marker) - postavka se "osvetli" (doseže polno
	   velikost/prosojnost), ko med skrolanjem prečka sredino zaslona (gl.
	   .timeline-item.is-active spodaj + skupni opazovalnik v
	   assets/scroll-timeline.js), in ostane osvetljena. */
	opacity: 0.45;
	/* Hitrost (--timeline-speed, gl. "Hitrost animacije v ms" polje) je bila
	   doslej trdo zapisana - uporabnikovo poročilo: ni bilo možnosti nastaviti
	   hitrost. Privzeto ostane 0.5s (nespremenjeno), dokler polja ne nastaviš. */
	transition: opacity var(--timeline-speed, 0.5s) ease, transform var(--timeline-speed, 0.5s) ease;
}

.timeline-item.is-active .timeline-marker {
	opacity: 1;
	transform: translateX(-50%) scale(1.15);
}

.timeline-content {
	color: var(--timeline-text-color, inherit);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--timeline-speed, 0.6s) ease, transform var(--timeline-speed, 0.6s) ease;
}

.timeline-item.is-active .timeline-content {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
	.timeline-marker,
	.timeline-content {
		transition: none;
	}
}

.timeline-item--left .timeline-content {
	grid-column: 1;
	text-align: right;
}

.timeline-item--right .timeline-content {
	grid-column: 3;
	text-align: left;
}

.timeline-item--left .timeline-image {
	margin-left: auto;
}

.timeline-image {
	max-width: 220px;
	border-radius: 6px;
	margin-bottom: 10px;
}

.timeline-date {
	display: inline-block;
	font-weight: 700;
	color: var(--color-primary);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 4px;
}

.timeline-title {
	margin: 0 0 6px;
	font-size: 19px;
}

.timeline-text {
	color: var(--timeline-text-color, var(--color-gray-2));
	margin: 0;
}

/* Na ozkih zaslonih se izmenjujoča postavitev ne bere dobro - vsi dogodki
   se strnejo na eno (levo) stran črte, enotno, ne glede na izbrano
   postavitev na širšem zaslonu. */
@media (max-width: 700px) {
	.timeline-item,
	.timeline-item--left,
	.timeline-item--right {
		grid-template-columns: 0 var(--timeline-gap) 1fr;
	}
	.timeline-item--left .timeline-content,
	.timeline-item--right .timeline-content {
		grid-column: 3;
		text-align: left;
	}
	.timeline-item--left .timeline-image {
		margin-left: 0;
	}
	.timeline::before {
		left: calc(var(--timeline-gap) / 2);
	}
	.timeline-marker {
		left: calc(var(--timeline-gap) / 2);
	}
}

/* --- FAQ / razširjevalnik --- */

.faq-list {
	margin: 12px 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.faq-item {
	background: var(--color-white);
	border: 1px solid var(--color-tan-light);
	border-radius: 6px;
	padding: 2px 10px;
}

.faq-question {
	cursor: pointer;
	font-weight: 700;
	padding: 8px 0;
	list-style: none;
}

.faq-question::-webkit-details-marker {
	display: none;
}

.faq-question::before {
	content: "+";
	display: inline-block;
	width: 1.2em;
	color: var(--color-primary);
	font-weight: 700;
}

.faq-item[open] .faq-question::before {
	content: "\2212";
}

.faq-answer {
	padding: 0 0 10px 1.2em;
	color: var(--color-gray-2);
}

/* --- Vodstvo/člani odbora --- */

.board-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 24px;
	margin: 30px 0;
	text-align: center;
}

.board-member-photo {
	width: 140px;
	height: 140px;
	object-fit: cover;
	border-radius: 50%;
	margin: 0 auto 14px;
}

.board-member-name {
	font-size: 17px;
	margin-bottom: 2px;
}

.board-member-role {
	font-size: 13px;
	color: var(--color-gray-1);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* --- Dokumenti za prenos --- */

.documents-list {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.documents-list-item a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: var(--color-white);
	border: 1px solid var(--color-tan-light);
	border-radius: 6px;
	color: var(--color-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.documents-list-item a:hover {
	border-color: var(--color-primary);
	box-shadow: 0 6px 16px rgba(176, 139, 93, 0.2);
}

.documents-list-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.documents-list-name {
	flex: 1 1 auto;
	font-weight: 600;
}

.documents-list-size {
	flex-shrink: 0;
	font-size: 13px;
	color: var(--color-gray-1);
}

/* --- Kontaktni obrazec --- */

.druflow-contact-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.druflow-contact-success {
	/* Prej peščena --color-tan-light (uporabnikovo poročilo) - svetla
	   vijolična, usklajena z ostalimi "muted" elementi. */
	background: #e6ddf2;
	color: var(--color-text-dark);
	padding: 16px 20px;
	border-radius: 4px;
}

.druflow-contact-errors {
	background: #fdecea;
	color: #b71c1c;
	padding: 12px 18px;
	border-radius: 4px;
	margin-bottom: 16px;
}

.druflow-contact-errors p {
	margin: 4px 0;
}

.contact-form {
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.contact-form p {
	margin-bottom: 16px;
}

.contact-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--color-tan-mid);
	border-radius: 4px;
	font-size: 15px;
	font-family: inherit;
}

.contact-form textarea {
	resize: vertical;
}

/* --- Prijavni obrazec (npr. "brezplačen preizkusni trening") - izbirno čez
   sliko/video ozadja, kartica poravnana levo/sredinsko/desno. Isti 100vw
   preboj kot .hero-section/.cta-section, a SAMO kadar ima ozadje - brez
   ozadja je to navaden, poln širine vsebine, svetel odsek (uporabnikova
   zahteva: "lahko je tudi brez [ozadja]"). --- */

.druflow-signup-form {
	position: relative;
	padding: 70px 20px;
	box-sizing: border-box;
}

.druflow-signup-form.has-bg {
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 90px 20px;
	background-color: var(--color-dark-section);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	display: flex;
}

.druflow-signup-form.has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-overlay-dark);
	z-index: 1;
}

.druflow-signup-form-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.druflow-signup-form-card {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 440px;
	box-sizing: border-box;
	padding: 36px 32px;
	border-radius: 20px;
}

.druflow-signup-form.has-bg .druflow-signup-form-card {
	background: rgba(15, 15, 20, 0.62);
	border: 1px solid var(--druflow-signup-card-border, rgba(255, 255, 255, 0.18));
	backdrop-filter: blur(6px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.druflow-signup-form:not(.has-bg) .druflow-signup-form-card {
	background: var(--druflow-card-bg, var(--color-white));
	border: 1px solid var(--druflow-signup-card-border, var(--color-tan-mid));
	margin-left: auto;
	margin-right: auto;
}

.druflow-signup-form--align-left.has-bg .druflow-signup-form-card {
	margin-right: auto;
}

.druflow-signup-form--align-center.has-bg .druflow-signup-form-card,
.druflow-signup-form--align-center:not(.has-bg) .druflow-signup-form-card {
	margin-left: auto;
	margin-right: auto;
}

.druflow-signup-form--align-right.has-bg .druflow-signup-form-card {
	margin-left: auto;
}

/* Logotip na vrhu kartice, ki lahko sega ČEZ zgornji rob (uporabnikova
   eksplicitna zahteva) - velikost/zamik so inline (odvisni od nastavitev te
   posamezne sekcije), enak vzorec kot .team-card-photo zgoraj. Namenoma NE
   `overflow:hidden` na kartici - logotip mora vidno segati čez rob. */
.druflow-signup-form-logo {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
}

.druflow-signup-form-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.druflow-signup-form-eyebrow {
	margin: 0 0 8px;
	font-size: var(--druflow-signup-eyebrow-size, 12px);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--druflow-signup-eyebrow-color, var(--color-primary));
}

.druflow-signup-form.has-bg .druflow-signup-form-eyebrow {
	color: var(--druflow-signup-eyebrow-color, var(--color-primary));
}

.druflow-signup-form-title {
	margin: 0 0 10px;
	font-size: var(--druflow-signup-title-size, 26px);
	line-height: 1.2;
	color: var(--druflow-signup-title-color, inherit);
}

.druflow-signup-form.has-bg .druflow-signup-form-title {
	color: var(--druflow-signup-title-color, var(--color-white));
}

.druflow-signup-form-subtitle {
	margin: 0 0 22px;
	font-size: var(--druflow-signup-subtitle-size, 15px);
	color: var(--druflow-signup-subtitle-color, inherit);
}

.druflow-signup-form.has-bg .druflow-signup-form-subtitle {
	color: var(--druflow-signup-subtitle-color, rgba(255, 255, 255, 0.8));
}

.druflow-signup-form-fields {
	display: block;
}

.druflow-signup-form-fields label {
	display: block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.druflow-signup-form.has-bg .druflow-signup-form-fields label {
	color: rgba(255, 255, 255, 0.75);
}

.druflow-signup-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.druflow-signup-form-fields input[type="text"],
.druflow-signup-form-fields input[type="tel"],
.druflow-signup-form-fields input[type="email"],
.druflow-signup-form-fields select,
.druflow-signup-form-fields textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid var(--color-tan-mid);
	font-size: 15px;
	font-family: inherit;
	box-sizing: border-box;
	text-transform: none;
	font-weight: 400;
	letter-spacing: normal;
	resize: vertical;
}

.druflow-signup-form.has-bg .druflow-signup-form-fields input[type="text"],
.druflow-signup-form.has-bg .druflow-signup-form-fields input[type="tel"],
.druflow-signup-form.has-bg .druflow-signup-form-fields input[type="email"],
.druflow-signup-form.has-bg .druflow-signup-form-fields select,
.druflow-signup-form.has-bg .druflow-signup-form-fields textarea {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.25);
	color: var(--color-white);
}

.druflow-signup-form.has-bg .druflow-signup-form-fields select option {
	color: var(--color-text-dark, #222);
}

.druflow-signup-form-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.druflow-signup-form-consent {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	text-transform: none !important;
	font-weight: 400 !important;
	font-size: 13px !important;
	letter-spacing: normal !important;
}

.druflow-signup-form-consent input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}

.druflow-signup-form-consent a {
	text-decoration: underline;
}

.druflow-signup-form-submit {
	display: block;
	width: 100%;
	padding: 15px 20px;
	border: 0;
	border-radius: 8px;
	background: var(--druflow-signup-button-bg, var(--color-primary));
	color: var(--druflow-signup-button-color, var(--color-white));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 14px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.druflow-signup-form-submit:hover {
	opacity: 0.88;
}

.druflow-signup-form-trust {
	margin: 14px 0 0;
	text-align: center;
	font-size: var(--druflow-signup-trust-size, 12px);
	color: var(--druflow-signup-trust-color, inherit);
}

.druflow-signup-form.has-bg .druflow-signup-form-trust {
	color: var(--druflow-signup-trust-color, rgba(255, 255, 255, 0.6));
}

.druflow-signup-form-errors {
	margin-bottom: 16px;
	padding: 12px 16px;
	border-radius: 8px;
	background: #fee2e2;
	color: #991b1b;
	font-size: 14px;
}

.druflow-signup-form-errors p {
	margin: 4px 0;
}

.druflow-signup-form-success {
	font-size: 15px;
}

.druflow-signup-form.has-bg .druflow-signup-form-success {
	color: var(--color-white);
}

@media (max-width: 700px) {
	.druflow-signup-form-row {
		grid-template-columns: 1fr;
	}

	.druflow-signup-form.has-bg {
		padding: 60px 16px;
	}

	.druflow-signup-form-card {
		max-width: 100%;
		padding: 28px 22px;
	}
}

/* --- Iskalni obrazec (WP privzeti get_search_form() izpis) --- */

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	max-width: 480px;
	margin: 20px auto 0;
}

.search-form .search-field {
	flex: 1 1 240px;
	padding: 10px 14px;
	border: 1px solid var(--color-tan-mid);
	border-radius: 4px;
	font-size: 15px;
}

.search-form .search-submit {
	flex: 0 0 auto;
}

/* --- Paginacija --- */

.pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 30px 0;
	flex-wrap: wrap;
}

.pagination a,
.pagination span {
	padding: 8px 14px;
	border: 1px solid var(--color-primary);
	border-radius: 4px;
	color: var(--color-text);
}

.pagination .current {
	background: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}

.pagination a:hover {
	/* Prej peščena --color-tan-light (uporabnikovo poročilo) - svetla
	   vijolična, da se hover vizualno loči od polne primarne barve na
	   ".current" (trenutna stran) tik zgoraj. */
	background: #e6ddf2;
}

/* --- Prejšnja/naslednja objava (single.php) - brez tega pravila sta
   ".nav-previous"/".nav-next" navadna bloka, vsak na svoji vrstici, oba
   poravnana levo (uporabnikovo poročilo). Prejšnja (nazaj) mora biti levo,
   naslednja (naprej) desno, v isti vrstici. */

.post-navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin: 30px auto;
	flex-wrap: wrap;
}

.post-navigation .nav-next {
	text-align: right;
	margin-left: auto;
}

/* --- Video (YouTube/Instagram) --- */

/* Uporabnikova eksplicitna zahteva: velikost je nastavljiva (širina/višina
   sekcije "Video" v urejevalniku), a OBVEZNO v razmerju - `max-width` in
   `aspect-ratio` (dejanska vrednost obeh polj) prideta zdaj kot INLINE stil
   neposredno iz druflow_video_embed_html() v inc/section-blocks.php, ne kot
   fiksna vrednost tu. Nekdanji fiksen padding-bottom:56.25% trik (samo
   16:9) je zato odveč - CSS `aspect-ratio` sam poskrbi za pravilno višino iz
   poljubnega razmerja, iframe pa jo v celoti zapolni prek absolutne
   postavitve (position:relative na ovojnem elementu je zato še vedno
   potreben).
   .container tu NAMENOMA nima lastnega max-width - omejitev širine je
   naloga video-embed elementa samega (glede na admin polje), ne ovojnika. */
.video-embed--youtube {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 6px;
	margin: 0 auto;
}

.video-embed--youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Instagramova lastna vdelava (blockquote + njihov embed.js) je že sama po
   sebi odzivna - NAMENOMA brez fiksnega razmerja/postavitve, samo
   sredinska poravnava, da se ne razteza čez celo širino na širokih zaslonih. */
.video-embed--instagram {
	display: flex;
	justify-content: center;
}

/* Uporabnikova eksplicitna zahteva: galerija več videov (2-4 stolpci,
   samodejno toliko vrstic, kolikor jih je potrebnih) brez HTML znanja -
   nadomešča prej ROČNO sestavljen primer (gl. opombo pri druflow_video_
   embed_html() v inc/section-blocks.php). `width:0` v PHP izklopi max-width
   vsakega videa znotraj galerije - velikost zdaj v celoti določa mreža. Pod
   600px (en sam stolpec na mobitelu) se --druflow-video-gallery-columns
   namenoma ne upošteva - vsak video je dovolj širok šele pri eni koloni. */
.video-gallery {
	display: grid;
	grid-template-columns: repeat(var(--druflow-video-gallery-columns, 3), 1fr);
	gap: 20px;
}

.video-gallery .video-embed--instagram {
	display: block;
}

@media (max-width: 600px) {
	.video-gallery {
		grid-template-columns: 1fr;
	}
}

/* --- Noga strani --- */

.site-footer {
	background: var(--color-footer-bg);
	color: var(--color-footer-text);
	padding: var(--footer-padding-top, 50px) var(--footer-padding-right, 0px) var(--footer-padding-bottom, 20px) var(--footer-padding-left, 0px);
}

.footer-description {
	margin: 0 0 30px;
	max-width: 640px;
}

.footer-widgets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 30px;
	/* Prazno (privzeto) = "auto", torej brez učinka - višino v celoti določa
	   vsebina, enak "prazno = brez omejitve" vzorec kot pri hero/CTA min-
	   height (gl. druflow_hero_min_height v inc/design-customizer.php).
	   NAMENOMA samo TA vrstica (gradniki), NE cel .site-footer - uporabnikovo
	   poročilo: prejšnja različica je dodaten prostor pustila ČEZ spodnjo
	   vrstico z avtorskimi pravicami/jezikom, namesto okoli gradnikov samih.
	   align-items:center gradnike sredinsko poravna, ko je nastavljena
	   višina večja od njihove naravne. */
	min-height: var(--druflow-footer-widgets-height, auto);
}

.footer-widget-column {
	box-sizing: border-box;
	padding: 10px;
	overflow-wrap: break-word;
}

/* Brez tega pravila nimajo zaporedni gradniki v ISTEM stolpcu (npr. več
   "Matični podatki" gradnikov drug pod drugim) nobenega definiranega
   razmika - "Noga strani" Customizer razdelek to regulira. */
.footer-widget-column .widget {
	margin-bottom: var(--footer-widget-gap, 20px);
}

.footer-widget-column .widget:last-child {
	margin-bottom: 0;
}

/* Gradniki "Matični podatki"/"Ikone omrežij" si delijo isti splošen razred
   `.content-section` kot navadne sekcije strani (gl. .content-section
   zgoraj: margin:40px 0; padding:20px - namenjeno za razmik MED sekcijami
   na strani). Znotraj OZKEGA stolpca noge strani je ta razmik pretiran in
   nesmiseln (uporabnikovo poročilo, s posnetkom zaslona: "ogromno prostora
   pod kontaktnimi podatki") - stolpec ima svoj lasten, primerno majhen
   odmik (`.footer-widget-column { padding: 10px }` zgoraj), zato tu
   podedovan rob/odmik izničimo. */
.footer-widget-column .content-section {
	margin: 0;
	padding: 0;
}

.footer-widget-column img {
	max-width: 100%;
	height: auto;
}

.footer-widgets--cols-1 .footer-widget-column {
	width: 100%;
}

.footer-widgets--cols-2 .footer-widget-column {
	width: 50%;
}

.footer-widgets--cols-3 .footer-widget-column {
	width: 33.333%;
}

.footer-widgets--cols-4 .footer-widget-column {
	width: 25%;
}

@media (max-width: 782px) {
	.footer-widgets .footer-widget-column {
		width: 100% !important;
	}
}

/* Uporabnikovo poročilo: gumb (WP jedrni "Gumbi" blok), vstavljen v gradnik
   noge strani (ali stranske vrstice), je pobral SPLOŠNO barvo gumbov iz
   Prilagajanje -> Barve -> Gumbi (.wp-block-button__link zgoraj v design-
   customizer.php) namesto svoje lastne, na bloku nastavljene barve - obe
   pravili imajo enako specifičnost, zato je zmagalo tisto, ki se v <head>
   izpiše kasneje. Spodnji dve pravili imata VIŠJO specifičnost (dva razreda
   namesto enega), zato zanesljivo zmagata.
   PRVI POSKUS je uporabil "revert" - to je NAPAČNO odpravilo tudi WP
   JEDRNO privzeto barvo (ne samo našo), zato je gumb BREZ lastne barve
   postal popolnoma neviden (prosojno ozadje) - uporabnikovo poročilo "gumba
   ni videti". Spodaj je namesto tega smiseln, dejansko viden privzeti izgled
   (enak WP jedrnemu privzetku), ki ga lastna (inline) barva na bloku še
   vedno prepiše - inline slog na elementu vedno zmaga nad katerim koli
   pravilom v zunanji datoteki sloga, ne glede na specifičnost. */
.footer-widgets .wp-block-button__link,
.druflow-sidebar .wp-block-button__link {
	background-color: #32373c;
	color: #fff;
}

/* Uporabnikovo poročilo: gumb/skupina gumbov s poravnavo "polna širina"
   (WP jedrni razred .alignfull/.alignwide, namenjen prebijanju IZ omejene
   vsebinske širine čez cel zaslon - normalno vedenje znotraj besedila
   objave) v gradniku noge STRANI ALI stranske vrstice ni bil na noben
   način omejen - razširil se je čez CEL zaslon (100vw, WP jedrna privzeta
   CSS iz wp-block-library), namesto da bi ostal znotraj širine stolpca
   gradnika. Spodaj oba razreda znotraj gradnikov preprosto ponastavimo na
   100% ŠIRINE NJIHOVEGA STOLPCA (ne zaslona). */
.footer-widgets .alignfull,
.footer-widgets .alignwide,
.druflow-sidebar .alignfull,
.druflow-sidebar .alignwide {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.footer-widgets h2,
.footer-widgets h3 {
	color: var(--color-footer-text);
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 16px;
}

/* Gradnik "Druflow: Kontaktni podatki" (inc/contact-widget.php) - isti
   podatki kot vrstica v glavi, lahko dodan v katero koli območje gradnikov
   (privzeto stilizirano za nogo, a razred deluje enako povsod). */
.druflow-contact-widget p {
	margin: 0 0 8px;
}

.druflow-contact-widget-social {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

/* Samostojen blok/gradnik "Druflow: Družbena omrežja" (inc/social-links.php)
   - poravnava, velikost ikon in razmik so PO BLOKU/GRADNIKU (inline slog),
   ne skupna nastavitev. */
.druflow-social-links-icons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--druflow-social-gap, 10px);
}

.druflow-social-links-icons a {
	display: inline-flex;
	color: inherit;
}

.druflow-social-links--align-left {
	text-align: left;
}

.druflow-social-links--align-center {
	text-align: center;
}

.druflow-social-links--align-center .druflow-social-links-icons {
	justify-content: center;
}

.druflow-social-links--align-right {
	text-align: right;
}

.druflow-social-links--align-right .druflow-social-links-icons {
	justify-content: flex-end;
}

/* Gradnik "Druflow: Matični podatki" (inc/org-data-widget.php) - poravnava
   in razmik med vrsticami sta PO GRADNIKU (inline `--druflow-org-line-gap`/
   `font-size`, gl. druflow_org_data_render_lines()), ne skupna nastavitev. */
.druflow-org-data-widget p {
	margin: 0 0 var(--druflow-org-line-gap, 6px);
}

.druflow-org-data-widget p:last-child {
	margin-bottom: 0;
}

.druflow-org-data-widget--align-center {
	text-align: center;
}

.druflow-org-data-widget--align-right {
	text-align: right;
}

/* Podatki + Google Zemljevid v sekciji "Osnovni podatki" (uporabnikova
   eksplicitna zahteva - sekcija se pogosto uporablja tudi kot Kontakt) - V
   ISTI VRSTI, podatki 33% / preostanek zemljevid, postavitev (levo/desno)
   nastavljiva. Stolpec s podatki obdrži svojo 33% širino DOSLEDNO, tudi če
   je zemljevid izklopljen (uporabnikova eksplicitna zahteva - "širina
   stolpca se določi v obeh primerih") - prazen prostor poleg ostane
   namesto razteg čez celo sekcijo, da se postavitev ob kasnejšem vklopu
   zemljevida ne "premakne". `gap` je pri flexu samodejno odštet od
   razpoložljivega prostora PRED izračunom `flex:1` na zemljevidu, zato tu
   ni potreben `calc()`. */
.druflow-org-data-layout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

/* Privzeto (brez modifikatorja) = "levo": podatki so PRVI otrok v DOM-u in
   ostanejo vizualno levo. `--right` samo OBRNE vizualni vrstni red (DOM/
   bralniki zaslona ostanejo nespremenjeni) - podatki se prikažejo desno,
   zemljevid levo. */
.druflow-org-data-layout--right {
	flex-direction: row-reverse;
}

.druflow-org-data-content-col {
	flex: 0 0 33.333%;
	max-width: 33.333%;
	box-sizing: border-box;
}

/* Uporabnikova eksplicitna zahteva: brez zemljevida (npr. sekcija "Kontakt"
   uporabljena samo za podatke, ne za zemljevid) naj podatki zavzamejo CELO
   širino razpoložljivega prostora, ne ozek 33% stolpec, kjer se je daljša
   vrednost (npr. IBAN) lomila v več vrstic. */
.druflow-org-data-content-col--full {
	flex: 1 1 100%;
	max-width: 100%;
}

/* Privzeta razmerja stranic namesto fiksne višine, da izgleda smiselno na
   ozkih ISTO širokih mobilnih zaslonih. */
.druflow-org-data-map {
	flex: 1;
	aspect-ratio: 16 / 9;
	max-height: 450px;
	border-radius: 6px;
	overflow: hidden;
}

.druflow-org-data-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Ozek zaslon: 33%/67% stolpca bi bila neuporabno stisnjena - sklad
   navpično namesto vodoravno, ne glede na izbrano postavitev
   levo/desno (ta je smiselna samo vodoravno). Stolpec s podatki tu
   NAMENOMA dobi polno širino - "prazen prostor zraven" ob izklopljenem
   zemljevidu je smiseln SAMO v vodoravni postavitvi. */
@media (max-width: 782px) {
	.druflow-org-data-layout,
	.druflow-org-data-layout--right {
		flex-direction: column;
	}

	.druflow-org-data-content-col {
		flex: 1 1 auto;
		max-width: 100%;
	}
}

/* --- Google zemljevid (samostojna vrsta sekcije, inc/section-blocks.php,
   type === 'google_maps') - LOČENA od zemljevida znotraj "Osnovnih
   podatkov" zgoraj (drug uporabnikov zahtevek, druga postavitev: tudi
   zgoraj/spodaj, ne le levo/desno). DOM vrstni red je vedno besedilo PRVO,
   nato zemljevid - `flex-direction` modifikatorji spodaj samo VIZUALNO
   obrnejo/zložijo vrstni red. */
.gmap-layout {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.gmap-layout--right {
	flex-direction: row-reverse;
}

.gmap-layout--top {
	flex-direction: column;
}

.gmap-layout--bottom {
	flex-direction: column-reverse;
}

.gmap-layout--left .gmap-text-col,
.gmap-layout--right .gmap-text-col {
	flex: 0 0 33.333%;
	max-width: 33.333%;
	box-sizing: border-box;
}

.gmap-layout--top .gmap-text-col,
.gmap-layout--bottom .gmap-text-col {
	width: 100%;
}

.gmap-text-col p {
	margin: 0;
}

.gmap-map {
	flex: 1 1 auto;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 450px;
	border-radius: 6px;
	overflow: hidden;
}

.gmap-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Ozek zaslon: 33%/67% stolpec bi bil neuporabno stisnjen - sklad navpično
   ne glede na izbrano postavitev (zgoraj/spodaj postavitvi to že sta). */
@media (max-width: 782px) {
	.gmap-layout,
	.gmap-layout--right,
	.gmap-layout--top,
	.gmap-layout--bottom {
		flex-direction: column;
	}

	.gmap-layout--left .gmap-text-col,
	.gmap-layout--right .gmap-text-col {
		flex: 1 1 auto;
		max-width: 100%;
	}
}

.site-footer a {
	color: var(--color-footer-link);
}

.site-footer a:hover {
	/* Prej peščena --color-tan-light (uporabnikovo poročilo) - statičen
	   privzeti sloj, usklajen s Kirkijevim druflow_footer_link_hover_color
	   (design-customizer.php), ki ga vedno preglasi. */
	color: var(--color-white);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 20px;
	text-align: center;
	font-size: 13px;
	color: var(--color-footer-text);
}

.footer-privacy-lang {
	margin-top: 8px;
	font-size: 12px;
	opacity: 0.75;
}

.footer-privacy-lang a {
	color: inherit;
	text-decoration: underline;
	margin: 0 4px;
}

/* --- Odzivnost --- */

@media (max-width: 782px) {
	.menu-toggle {
		display: block;
	}

	.primary-navigation ul {
		display: none;
		flex-direction: column;
		width: 100%;
	}

	/* SAMO neposredni (glavni) seznam, ne "ul" na splošno - drugače bi ta
	   pravilo (višja specifičnost zaradi ".is-open") preglasilo
	   ".sub-menu { display:none }" spodaj in razkrilo VSE spustne podmenije
	   hkrati, ne glede na njihovo lastno odprto/zaprto stanje. */
	.primary-navigation.is-open > div > ul {
		display: flex;
	}

	.primary-navigation .sub-menu {
		position: static;
		box-shadow: none;
		display: none;
	}

	.primary-navigation li.is-open > .sub-menu {
		display: block;
	}

	.site-branding {
		flex-wrap: wrap;
	}

	/* Postavitev "Levo od logotipa" nima smisla na dotik napravah brez
	   hoverja - na mobilnem se vedno sklada normalno (logotip nad menijem),
	   ne glede na izbrano namizno postavitev v Customizerju. */
	.site-header--menu-inline {
		flex-direction: column;
		align-items: stretch;
	}

	.site-header--menu-inline .site-branding {
		flex: 1 1 100%;
		justify-content: flex-start !important;
	}

	.site-header--menu-inline .primary-navigation {
		flex: 1 1 100%;
	}

	.site-header--menu-inline .primary-navigation > div {
		justify-content: flex-start;
	}
}

/* --- Tiskanje --- */

@media print {
	.site-header,
	.primary-navigation,
	.menu-toggle,
	.nav-sidebar-backdrop,
	.site-footer,
	.druflow-cookie-notice,
	.skip-link,
	.hero-section,
	.hero-slide,
	.cta-section,
	.feature-bar,
	.druflow-newsletter,
	.druflow-contact-form,
	.druflow-signup-form,
	.pagination {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}

	.site-content,
	.container,
	.entry-content {
		max-width: 100% !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	a {
		color: #000 !important;
		text-decoration: underline;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 12px;
		color: #555;
	}

	img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}

	h1, h2, h3 {
		page-break-after: avoid;
	}

	.card-grid,
	.feature-cards,
	.testimonials-grid {
		display: block !important;
	}

	.card,
	.feature-card,
	.testimonial-card {
		page-break-inside: avoid;
		margin-bottom: 20px !important;
		border: 1px solid #999 !important;
	}
}

/* --- Abecedno kazalo objav (gl. inc/alphabetical-index.php) --- */

.druflow-az-index {
	margin: 20px 0;
}

.druflow-az-year-picker {
	margin: 0 0 20px;
	font-size: 14px;
}

.druflow-az-year-picker label {
	margin-right: 8px;
	font-weight: 600;
}

.druflow-az-year-select {
	padding: 6px 10px;
	border: 1px solid var(--color-tan-light);
	border-radius: 4px;
	font-size: 14px;
}

/* Mreža kartic po črkah (privzet izgled shortcoda/bloka na samostojni
   strani) - samo črke z vsaj eno objavo dobijo kartico, brez klika/modala,
   celoten seznam naslovov je viden takoj. Kadar je let več, izbirnik naenkrat
   prikaže samo eno leto (assets/alphabetical-index.js preklaplja [hidden]) -
   `display` je zato vezan na `:not([hidden])`, enak razlog kot pri
   .druflow-az-modal: avtorski CSS bi sicer preglasil UA-jev privzeti
   `[hidden]{display:none}`. */
.druflow-az-grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin: 20px 0;
}

.druflow-az-grid:not([hidden]) {
	display: grid;
}

.druflow-az-card {
	/* Prej peščena --color-tan-light (uporabnikovo poročilo, isti "dbcfaf"
	   bug kot pri mreži objav - a DRUG, ločen razred, zato takrat spregledan). */
	border: 1px solid var(--color-primary);
	border-radius: 8px;
	padding: 16px;
	background: var(--color-white);
}

.druflow-az-card-letter {
	margin: 0 0 10px;
	color: var(--color-primary);
	font-size: 20px;
}

@media (max-width: 600px) {
	.druflow-az-grid {
		grid-template-columns: 1fr;
	}
}

.druflow-az-letters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.druflow-az-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
}

button.druflow-az-letter {
	background: var(--color-primary);
	color: var(--color-white);
	border: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

button.druflow-az-letter:hover {
	/* Prej peščena `--color-tan-mid` (uporabnikovo poročilo: ni usklajeno z
	   ostalo vijolično paleto gumbov) - zdaj potemnjena različica dejanske
	   primarne barve, enak vzorec kot `.card-more:hover` ipd. */
	background: var(--color-primary);
	filter: brightness(0.85);
}

.druflow-az-letter--disabled {
	/* Prej peščena `--color-tan-light` (isto uporabnikovo poročilo) - zdaj
	   svetla vijolična, usklajena z ostalimi "muted" elementi (npr. obroba
	   kartic `#e6ddf2`), namesto zapečene borci barve. */
	background: #e6ddf2;
	color: var(--color-gray-1);
	opacity: 0.6;
}

/* Stranska vrstica je ožja - kazalo tam samodejno preide na manjše/gostejše
   črke (gl. .druflow-sidebar spodaj), da vseh ~30 znakov ne razbije v
   predolg, nerodno prelomljen blok. */
.druflow-sidebar .druflow-az-letter {
	min-width: 26px;
	height: 26px;
	font-size: 12px;
}

.druflow-az-modal {
	position: fixed;
	inset: 0;
	z-index: 500;
	background: rgba(0, 0, 0, 0.6);
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/* Enak razlog kot pri .druflow-lightbox: `display` mora biti vezan na
   `:not([hidden])`, sicer avtorski CSS preglasi UA-jev privzeti
   `[hidden]{display:none}` in modal ostane ves čas viden. */
.druflow-az-modal:not([hidden]) {
	display: flex;
}

body.druflow-az-modal-open {
	overflow: hidden;
}

.druflow-az-modal-dialog {
	background: var(--color-white);
	border-radius: 8px;
	max-width: 500px;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 30px;
	position: relative;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.druflow-az-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	/* Prej peščena --color-tan-light/--color-text-dark (uporabnikovo
	   poročilo) - primarna vijolična + bela, usklajeno z ostalimi gumbi. */
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.druflow-az-modal-close:hover {
	filter: brightness(0.85);
}

.druflow-az-modal-title {
	margin: 0 0 16px;
	color: var(--color-primary);
	font-size: 28px;
}

.druflow-az-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.druflow-az-list li {
	/* Uporabnikova zahteva: bolj kompaktno, BREZ vmesnih črt (prej `border-
	   bottom` v isti zapečeni peščeni barvi kot obroba kartice zgoraj). */
	padding: 4px 0;
}

.druflow-az-list a {
	color: var(--color-text-dark);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

.druflow-az-list a:hover {
	color: var(--color-primary);
}

.druflow-az-list-meta {
	display: block;
	font-size: 11px;
	color: var(--color-gray-1);
	margin-top: 1px;
}

/* --- Stranska vrstica strani/objave (gl. inc/sidebar-meta.php) --- */

.druflow-layout {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.druflow-content-column {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	/* `border-style: solid` je NAMENOMA vedno prisoten (ne pogojen na to, ali
	   je širina roba > 0) - brez eksplicitnega sloga je `border-width`/
	   `border-color` (Prilagajanje -> Videz predloge objav) nevidna, ne
	   glede na nastavljeno vrednost (CSS privzeto `border-style: none`).
	   Pri širini 0px (privzeto) je tak rob vseeno neviden, torej brez
	   neželenega učinka, dokler uporabnik širine ne nastavi. */
	border-style: solid;
	border-width: 0;
}

/* Notranji odmik za ozadje vsebine objav (Prilagajanje -> Videz ->
   "Barva ozadja vsebine objav") je NAMENOMA pogojen, ne stalen - gl.
   inc/design-customizer.php, ki ta razred doda samo, KADAR je barva
   dejansko nastavljena (sicer bi odmik po nepotrebnem ožal bralni stolpec
   tudi na objavah brez ozadja). Levi/desni odmik je NASTAVLJIV (px, gl.
   "Odmik vsebine objav od roba (levo/desno)" - Kirki 'output' zgornji dve
   vrednosti prepiše); zgornji/spodnji ostaneta tu, fiksna, manjša vrednost
   (odmik od GLAVE/NOGE strani je že urejen ločeno prek "Prostor nad/pod
   vsebino"). */
body.single .druflow-content-column--padded {
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 40px;
	padding-right: 40px;
	box-sizing: border-box;
}

.druflow-layout--sidebar-left {
	flex-direction: row-reverse;
}

/* Uporabnikovo poročilo (s posnetkom zaslona): barva ozadja stranske vrstice
 * (gl. druflow_sidebar_bg_color zgoraj v inc/design-customizer.php) se je
 * dotikala samega levega/desnega roba - blok slike/arhiva/kazala je segal do
 * roba brez vidne barve okrog. Rob dodamo kot padding, širino pa POVEČAMO za
 * isto vrednost (box-sizing: border-box), da ostane NOTRANJA širina vsebine
 * (bloki) nespremenjena - uporabnikova eksplicitna zahteva "širino vsebine
 * pustiš", samo stranska vrstica sama naj bo za ta odmik širša. */
.druflow-sidebar {
	width: 304px;
	padding: 0 12px;
	flex-shrink: 0;
}

.druflow-sidebar-block {
	background: var(--color-white);
	border: 1px solid var(--color-tan-light);
	border-radius: 6px;
	padding: 20px;
	margin-bottom: 20px;
}

.druflow-sidebar-heading {
	margin: 0 0 12px;
	font-size: 16px;
	color: var(--color-primary);
	border-bottom: 2px solid var(--color-tan-light);
	padding-bottom: 8px;
}

.druflow-sidebar-text p:last-child {
	margin-bottom: 0;
}

/* Uporabnikovo poročilo (s posnetkom zaslona): prvi poskus je za CTA v
 * privzeti stranski vrstici prispevkov (gl. druflow_render_default_post_
 * sidebar() v inc/sidebar-meta.php) ponovno uporabil `.cta-section`, ki je
 * NAMENOMA celozaslonska/prebita iz `.container` (gl. zgoraj) - znotraj
 * ozke stranske vrstice je to popolnoma razbilo postavitev. "Samo gumb CTA,
 * ne cel CTA blok" - preprost, znotraj bloka ostajajoč naslov+gumb. */
.druflow-sidebar-cta img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 12px;
}

.druflow-sidebar-cta .button {
	display: inline-block;
	margin-top: 8px;
	text-align: center;
	text-decoration: none !important;
}

/* Uporabnikova zahteva: "z drobnim tekstom blok sorodne objave" - drobni
 * (majhna pisava) seznam sorodnih objav znotraj stranske vrstice, ločen od
 * večjih kartic pod besedilom objave same (gl. druflow_render_related_posts_
 * compact() v inc/sidebar-meta.php). */
.druflow-sidebar-related-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.druflow-sidebar-related-list li {
	margin-bottom: 8px;
	font-size: 13px;
	line-height: 1.4;
}

.druflow-sidebar-related-list li:last-child {
	margin-bottom: 0;
}

.druflow-sidebar-related-list a {
	display: block;
	color: var(--color-text);
}

.druflow-sidebar-related-list a:hover {
	color: var(--color-primary);
}

.druflow-sidebar-related-list span {
	display: block;
	color: #999;
	font-size: 11px;
}

.druflow-sidebar-archive ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.druflow-sidebar-archive li {
	padding: 4px 0;
}

.druflow-sidebar-archive a {
	color: var(--color-text);
	text-decoration: none;
}

.druflow-sidebar-archive a:hover {
	color: var(--color-primary);
}

@media (max-width: 782px) {
	.druflow-layout,
	.druflow-layout--sidebar-left {
		flex-direction: column;
	}

	.druflow-sidebar {
		width: 100%;
	}
}

/* --- Stranska vrstica: slika + arhiv po letih/mesecih (harmonika) --- */

.druflow-sidebar-image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}

.druflow-year-archive-item {
	border-bottom: 1px solid var(--color-tan-light);
}

.druflow-year-archive-item:last-child {
	border-bottom: none;
}

.druflow-year-archive-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: none;
	border: none;
	padding: 10px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text-dark);
	cursor: pointer;
	text-align: left;
}

.druflow-year-archive-toggle::after {
	content: '+';
	font-size: 18px;
	color: var(--color-primary);
}

.druflow-year-archive-toggle[aria-expanded="true"]::after {
	content: '\2212';
}

.druflow-year-archive-months {
	list-style: none;
	margin: 0;
	padding: 0 0 10px 10px;
}

.druflow-year-archive-months li {
	padding: 4px 0;
}

.druflow-year-archive-months a {
	color: var(--color-text);
	text-decoration: none;
}

.druflow-year-archive-months a:hover {
	color: var(--color-primary);
}

.druflow-year-archive-count {
	color: var(--color-gray-1);
	font-weight: 400;
	font-size: 13px;
}

/* --- "Naštevanje" sekcija z ikono ob strani (gl. inc/section-blocks.php) --- */
.list-section--has-icon {
	display: flex;
	align-items: center;
	gap: 20px;
}

.list-section-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}

.list-section-body {
	flex: 1 1 auto;
	min-width: 0;
}

/* --- "Samo slika" sekcija (gl. inc/section-blocks.php) --- */
/* Uporabnikovo poročilo: logotipi občin v ozkih, 6-stolpčnih vrsticah
   (Sponzorji in donatorji) so videti nesorazmerno majhni glede na svoj
   stolpec. Vzrok: splošen `.content-section { padding: 20px; }` (namenjen
   celim, širokoformatnim sekcijam) v ozkem ~1/6-širine stolpcu "poje" skoraj
   tretjino razpoložljivega prostora. "Samo slika" sekcija ne potrebuje tega
   odmika (slika sama nosi svoj vizualni rob) - manjši, a ne ničeln odmik. */
.image-only-section {
	margin: 0;
	padding: 4px;
}

/* Isti vzrok kot zgoraj pri .image-only-section - .sponsors-strip-wrap ima
   tudi razred "content-section" (gl. druflow_render_section() v inc/
   section-blocks.php), zato je podedoval isti 20px odmik, ki je v 6-stolpčni
   mreži "pojedel" del prostora, namenjenega logotipom. Uporabnikova
   nastavitev "Notranji odmik logotipa" (sponsors_padding, inline `gap`/
   `padding` na .sponsors-strip/.sponsor-cell) je EDINI odmik, ki naj tu
   velja. */
.sponsors-strip-wrap {
	padding: 0;
}

.image-only-section-img {
	display: block;
	width: 100%;
	height: auto;
}

.image-only-section--rounded .image-only-section-img {
	border-radius: 12px;
}

.image-only-section--circle .image-only-section-img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/*
 * MANJKAJOČE pravilo - PRAVI VZROK, zakaj "stolpca drug ob drugem ne
 * delata" (uporabnikovo ponavljajoče se poročilo skozi celotno sejo):
 * druflow_render_page_sections()/druflow_render_section_list() (gl.
 * inc/page-sections-customizer.php) izrišeta otroke z inline
 * `flex:1 1 calc(N% - 16px)`, a ta deluje SAMO, če je STARŠ
 * `.druflow-page-columns` sam `display:flex` - brez tega pravila je bil
 * privzeto `display:block`, otroci so se torej vedno zložili DRUG POD
 * DRUGEGA čez celo širino, ne glede na katerokoli širino/stolpec, ki ga je
 * uporabnik nastavil. To pravilo je manjkalo od vsega začetka te funkcije.
 */
.druflow-page-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Uporabnikovo poročilo (s posnetkom zaslona): "višina desne sekcije mora
 * biti max enako visoka kot leva". PRVI poskus (display:flex;flex-direction:
 * column na `.druflow-page-column` SAMI, brez pogoja) je pokvaril strani, ki
 * imajo v EM stolpcu VEČ zloženih sekcij (npr. 7 kartic druga pod drugo) -
 * `flex:1 1 auto` na `> div > *` je prisilil VSAKO od njih, naj se raztegne,
 * namesto da bi ostale v naravnem, zloženem toku (uporabnikovo poročilo:
 * "kompletni kaos"). POPRAVEK je zato namenoma OZKO USMERJEN: nov razred
 * `.druflow-page-column--one-item` (dodan v PHP - gl. page-sections-
 * customizer.php - SAMO kadar ima ta stolpec točno ENO sekcijo) je edini, ki
 * sproži raztezanje. Stolpci z več sekcijami ostanejo BREZ te ali katere
 * koli nove CSS lastnosti - njihovo vedenje je bit-za-bit enako kot prej. */
.druflow-page-column--one-item {
	display: flex;
	flex-direction: column;
}

.druflow-page-column--one-item:not([class*="--valign-"]) > div {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.druflow-page-column--one-item:not([class*="--valign-"]) > div > * {
	flex: 1 1 auto;
}

.druflow-page-column--one-item.druflow-page-column--valign-top {
	justify-content: flex-start;
}

.druflow-page-column--one-item.druflow-page-column--valign-center {
	justify-content: center;
}

.druflow-page-column--one-item.druflow-page-column--valign-bottom {
	justify-content: flex-end;
}

@media (max-width: 680px) {
	.druflow-page-columns {
		flex-direction: column;
	}

	.druflow-page-column {
		flex-basis: 100% !important;
	}
}

/* --- Seznam oseb (ime - funkcija, poravnano) - gl. druflow_render_section()
   ('people_list' veja) v inc/section-blocks.php --- */

.people-list-section h2 {
	margin-bottom: 16px;
}

.people-list {
	display: block;
}

.people-list-name {
	font-weight: 600;
}

.people-list-role {
	color: var(--color-text-light, #767676);
}

/* Poravnano (privzeto) - CSS grid: PRVI stolpec (imena) si delijo ISTO
   širino (najširše ime), zato se DRUGI stolpec (funkcije) vedno začne na
   isti navpični črti, ne glede na dolžino posameznega imena - brez ročnega
   računanja/nastavljanja širin. */
.people-list.people-list--aligned {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 16px;
	row-gap: 8px;
	align-items: baseline;
}

.people-list:not(.people-list--aligned) .people-list-name,
.people-list:not(.people-list--aligned) .people-list-role {
	display: inline;
}

.people-list:not(.people-list--aligned) > div {
	margin-bottom: 6px;
}

/* --- Enostavno besedilo (naslov + odstavek) - gl. 'text_block' veja v inc/
   section-blocks.php --- */

.text-block-section p {
	margin: 0 0 1em;
}

.text-block-section p:last-child {
	margin-bottom: 0;
}

/* Google koledar - ovoj OKROG Googlovega iframa (barva/rob/zaobljenost
   nastavljivi prek polj sekcije, gl. inc/google-calendar.php); tu le
   dodan subtilen senca kot vizualni polish, ni uporabniško nastavljivo. */
.druflow-google-calendar-wrap {
	box-shadow: 0 4px 16px rgba(111, 63, 175, 0.08);
}

/* Blokiranje vdelave tretje osebe do izrecnega soglasja (gl. assets/cookie-
   notice.js activateEmbeds(), inc/google-calendar.php) - iframe ostane
   skrit in brez src, dokler wrap nima razreda "is-active". `!important`
   je nujen, ker ima sam <iframe> tudi lasten "display:block" v atributu
   style (nastavljen neposredno v PHP izrisu). */
.druflow-consent-embed {
	display: none !important;
}

.druflow-consent-embed-wrap.is-active .druflow-consent-embed {
	display: block !important;
}

.druflow-consent-embed-wrap.is-active .druflow-consent-embed-placeholder {
	display: none;
}

.druflow-consent-embed-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: #faf9fc;
	border: 1px dashed #cbb8e6;
	border-radius: 8px;
	padding: 20px;
	text-align: center;
	box-sizing: border-box;
}

.druflow-consent-embed-placeholder p {
	margin: 0;
	color: #555;
}

/* Slika v stranski vrstici z naključnim menjavanjem (gl. inc/sidebar-meta.php
   druflow_render_sidebar_image_rotator() + assets/sidebar-image-rotator.js).
   Fiksno razmerje stranic, da menjava slik ne povzroči skoka postavitve
   (izvirne slike so lahko zelo različnih dimenzij). */
.druflow-sidebar-image-rotator {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
}

.druflow-sidebar-image-rotator-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease;
}

.druflow-sidebar-image-rotator-img.is-active {
	opacity: 1;
}

/* Urnik (schedule) - dnevi v tednu kot stolpci, termini kronološko znotraj
   vsakega dne. Gl. inc/schedule-block.php. */
.druflow-schedule {
	text-align: center;
}

.druflow-schedule-subheading {
	margin-top: -0.5em;
	opacity: 0.75;
}

/* Vsak dan je NEODVISEN stolpec s svojim seznamom terminov, poljubnega
   števila in poljubnih ur - NI ene skupne "vrstice", deljene med vsemi
   dnevi (uporabnikovo eksplicitno zavrnjeno: ponedeljek ima lahko termin ob
   15:00 IN ob 20:00, torek popolnoma drugačnega ob 19:30 - to ni ista ura,
   deljena med dnevi). Termini z razpoznano uro (gl. druflow_schedule_parse_
   time_range() v inc/schedule-block.php) dobijo navpičen ZAMIK GLEDE NA URO
   na skupni časovnici (kot pravi koledar) - isti čas na različnih dnevih se
   tako poravna na isto višino. Termini brez razpoznane ure (prosto
   besedilo, npr. "ob dogovoru") se izrišejo navadno, nad časovnico. */
/* En skupen okvir OKROG CELE mreže (urna os + vsi dnevi) - loči "urnik"
   (mrežo terminov) od legende/kontakta POD njo. Barva/debelina/ozadje se
   nastavijo v Prilagajanju (gl. $grid_panel_style v inc/schedule-block.php) -
   privzeto tanek siv rob, brez ozadja. */
.druflow-schedule-grid-panel {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 10px;
	padding: 1rem;
	margin-top: 2rem;
}

.druflow-schedule-grid-panel .druflow-schedule-grid {
	margin-top: 0;
}

.druflow-schedule-grid {
	display: grid;
	grid-template-columns: repeat(var(--druflow-schedule-days, 5), 1fr);
	gap: 1.25rem;
	text-align: left;
	margin-top: 2rem;
	align-items: start;
}

.druflow-schedule-grid--timeline {
	grid-template-columns: 52px repeat(var(--druflow-schedule-days, 5), 1fr);
}

.druflow-schedule-hours-axis {
	position: relative;
}

.druflow-schedule-hour-tick {
	position: absolute;
	left: 0;
	right: 8px;
	transform: translateY(-0.6em);
	font-size: 0.72rem;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.4);
	text-align: right;
	white-space: nowrap;
}

.druflow-schedule-day-column {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* Sobota/nedelja (samo ob 7 prikazanih dneh) - rahlo obarvano ozadje čez
   cel stolpec, da vizualno izstopata od delovnih dni. */
.druflow-schedule-day-column--weekend {
	background: rgba(111, 63, 175, 0.05);
	border-radius: 10px;
	padding: 0.4rem 0.35rem;
}

.druflow-schedule-day-label {
	text-align: center;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--color-primary, #6f3faf);
	border-bottom: 2px solid var(--color-primary, #6f3faf);
	padding-bottom: 0.4rem;
	margin: 0;
}

.druflow-schedule-day-untimed {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Nežen rob okrog CELOTNE časovnice vsakega dne (uporabnikova zahteva) - brez
   tega je bila mreža videti kot ločene lebdeče črte, ne pravi "dnevni
   koledarski panel". `overflow: hidden` + `border-radius` lepo obreže
   ponavljajoč se vzorec urnih črt na zaobljenih vogalih. */
.druflow-schedule-day-canvas {
	position: relative;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden;
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.08),
		rgba(0, 0, 0, 0.08) 1px,
		transparent 1px,
		transparent var(--druflow-schedule-hour-px, 64px)
	);
}

.druflow-schedule-entry {
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-left: 3px solid var(--color-primary, #6f3faf);
	border-radius: 6px;
	padding: 0.35rem 0.55rem;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	overflow: hidden;
}

.druflow-schedule-day-canvas .druflow-schedule-entry {
	position: absolute;
	left: 2px;
	right: 2px;
}

.druflow-schedule-entry-time {
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1.25;
	white-space: nowrap;
}

/* Daljši termin (npr. "18:00 - 20:00", 2 uri) dobi na časovnici VIŠJO
   kartico (gl. $height v inc/schedule-block.php), a njegovo besedilo
   pogosto zavzame samo tanek pas na vrhu - preostanek kartice je bil prej
   "mrtev prostor", kjer premik/klik miške ni sprožil ničesar (uporabnikovo
   poročilo: izbirnik legende se ni pojavil/ostal viden). `flex: 1 1 auto`
   raztegne VSEBINO (in znotraj nje zadnjo vrstico besedila) čez CEL
   preostanek kartice - besedilo samo ostane pri vrhu (privzeto obnašanje
   bloka), a klikljivo/lebdeče območje zdaj sega čez celo kartico. */
.druflow-schedule-entry-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.druflow-schedule-entry-content .druflow-schedule-run:last-child {
	flex: 1 1 auto;
}

.druflow-schedule-run {
	font-weight: 700;
	line-height: 1.3;
	font-size: 0.88rem;
}

.druflow-schedule-run--small {
	font-size: 0.78rem;
	font-weight: 600;
	opacity: 0.85;
}

.druflow-schedule-run--large {
	font-size: 1rem;
}

/* Enter (v predogledu) = nova, vidno LOČENA vrstica znotraj istega termina
   (npr. "Kinder Training" / "Adult Training", dva različna vsebinska vnosa) -
   večji zgornji razmik poveča tudi klikljivo/urejljivo razdaljo med njima.
   Shift+Enter ostane tesna "vrstica pod vrstico" (privzet, majhen `gap` iz
   .druflow-schedule-entry-content zgoraj) - uporabnikovo poročilo, s
   posnetkom zaslona: dve preblizu skupaj ležeči vrstici je bilo nemogoče
   zanesljivo izbrati/urediti posamično. */
.druflow-schedule-run--gap {
	margin-top: 0.6rem;
}

.druflow-schedule-legend {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	text-align: left;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.druflow-schedule-legend li {
	margin-bottom: 0.4rem;
}

.druflow-schedule-contact {
	margin-top: 1.5rem;
	font-weight: 600;
}

@media (max-width: 782px) {
	.druflow-schedule-grid,
	.druflow-schedule-grid--timeline {
		grid-template-columns: 1fr;
	}

	.druflow-schedule-hours-axis {
		display: none;
	}

	.druflow-schedule-day-canvas {
		position: static;
		height: auto !important;
		background-image: none;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.druflow-schedule-day-canvas .druflow-schedule-entry {
		position: static;
	}
}

/* --- Časovnica z učinkom ob skrolanju (ločena, nova sekcija - gl. section-
   blocks.php + assets/scroll-timeline.js) - fotografije "priletijo" izmenično
   z leve/desne, oznaka na sredinski črti se ob tem trajno osvetli. Sekcija je
   čez celo širino zaslona (enak 100vw preboj kot .hero-section), z LASTNO,
   od Hero neodvisno barvo/prosojnostjo ozadja (nastavljeno inline v PHP). */
.scroll-timeline-section {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 80px var(--druflow-content-inset, 20px);
	box-sizing: border-box;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

/* Slika ozadja (izbirno, kot pri Hero) je SVOJ ločen sloj z LASTNO prosojnostjo
   (--druflow-scroll-bg-image-opacity), neodvisno od barve/prosojnosti prekritja
   spodaj - uporabnikova eksplicitna zahteva, da lahko sliko naredi komaj vidno,
   ne glede na nastavljeno barvo ozadja. Barvni prekrivni sloj je ločen ::after
   ČEZ sliko (ne navadno ozadje POD njo), sicer bi neprosojna slika barvo pod
   seboj v celoti prekrila. Brez slike ostane slikovni sloj prazen/prosojen in
   barva pride iz `background-color` neposredno na sekciji (gl. section-blocks.php). */
.scroll-timeline-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--druflow-scroll-bg-image, none);
	background-size: cover;
	background-position: center;
	opacity: var(--druflow-scroll-bg-image-opacity, 1);
	z-index: 0;
}

.scroll-timeline-section::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--druflow-scroll-overlay, transparent);
	z-index: 0;
}

.scroll-timeline-title {
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 0 0 60px;
	color: var(--druflow-scroll-title-color, inherit);
}

.scroll-timeline-track {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: 0 auto;
}

.scroll-timeline-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	background: var(--druflow-scroll-line-color, var(--color-primary));
	transform: translateX(-50%);
	opacity: 0.3;
}

.scroll-timeline-item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
	padding: 40px 0;
	min-height: 100px;
}

.scroll-timeline-marker {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: var(--druflow-scroll-marker-size, 44px);
	height: var(--druflow-scroll-marker-size, 44px);
	border-radius: 50%;
	background: var(--color-white);
	border: 3px solid var(--druflow-scroll-line-color, var(--color-primary));
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--druflow-scroll-line-color, var(--color-primary));
	z-index: 3;
	opacity: 0.45;
	box-sizing: border-box;
	/* Hitrost (--druflow-scroll-speed, gl. "Hitrost animacije v ms" polje) je
	   bila doslej trdo zapisana - gl. isto opombo pri .timeline-marker. */
	transition: opacity var(--druflow-scroll-speed, 0.5s) ease, background-color var(--druflow-scroll-speed, 0.5s) ease, color var(--druflow-scroll-speed, 0.5s) ease, transform var(--druflow-scroll-speed, 0.5s) ease;
}

.scroll-timeline-item.is-active .scroll-timeline-marker {
	opacity: 1;
	background: var(--druflow-scroll-line-color, var(--color-primary));
	color: var(--color-white);
	transform: translate(-50%, -50%) scale(1.12);
}

/* Odmik od oznake na sredinski črti je NAMENOMA vedno samodejen - polovica
   velikosti oznake (nastavljive) + fiksnih 50px zraka - uporabnikova
   eksplicitna zahteva ("da je slika in tekst vedno 50px od roba kroga in je
   odmik avtomatski"), brez ločenega nastavljivega polja, ki bi ga bilo treba
   ročno usklajevati z velikostjo oznake. */
.scroll-timeline-photo-wrap {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	justify-content: flex-end;
	padding-right: calc(var(--druflow-scroll-marker-size, 44px) / 2 + 50px);
}

.scroll-timeline-content {
	grid-column: 2;
	grid-row: 1;
	padding-left: calc(var(--druflow-scroll-marker-size, 44px) / 2 + 50px);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--druflow-scroll-speed, 0.6s) ease, transform var(--druflow-scroll-speed, 0.6s) ease;
}

.scroll-timeline-item--right .scroll-timeline-photo-wrap {
	grid-column: 2;
	justify-content: flex-start;
	padding-right: 0;
	padding-left: calc(var(--druflow-scroll-marker-size, 44px) / 2 + 50px);
}

.scroll-timeline-item--right .scroll-timeline-content {
	grid-column: 1;
	grid-row: 1;
	text-align: right;
	padding-left: 0;
	padding-right: calc(var(--druflow-scroll-marker-size, 44px) / 2 + 50px);
}

.scroll-timeline-photo-inner {
	position: relative;
	/* Namenoma SAMO širina, brez fiksne višine - slika obdrži svoje naravno
	   razmerje (pokončna ostane pokončna, ni obrezana), uporabnikova
	   eksplicitna zahteva. */
	width: var(--druflow-scroll-photo-width, 320px);
	max-width: 100%;
	border-radius: 10px;
	overflow: hidden;
}

.scroll-timeline-photo {
	width: 100%;
	height: auto;
	display: block;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity var(--druflow-scroll-speed, 0.6s) ease, transform var(--druflow-scroll-speed, 0.6s) ease;
}

.scroll-timeline-item.is-active .scroll-timeline-photo {
	opacity: 1;
	transform: scale(1);
}

.scroll-timeline-item.is-active .scroll-timeline-content {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.1s;
}

.scroll-timeline-item-title {
	margin: 0 0 8px;
	color: var(--druflow-scroll-item-title-color, inherit);
}

.scroll-timeline-item-text {
	margin: 0;
	color: var(--druflow-scroll-item-text-color, inherit);
}

/* Uporabnikovo poročilo: pri postavkah, kjer je besedilo desno poravnano
   (fotografija na nasprotni strani, gl. `.scroll-timeline-item--right`
   zgoraj), je bila navadna `text-align:right` na naštevanju neestetska -
   oznaka naštevanja je ostala na SVOJEM (levem) mestu, besedilo pa se je
   stisnilo k desnemu robu, kar je med njima pustilo veliko praznino
   (100-200px). Namesto da bi sezname zato kar prisilno pustili levo
   poravnane (izgubi se vizualna povezava z desno poravnanim navadnim
   besedilom istega bloka), uporabimo pravi "obešeni" desno poravnan seznam:
   `direction:rtl` premakne oznako naštevanja na DESNI rob vsake vrstice
   (nemško/slovensko besedilo samo po sebi ostane berljivo od leve proti
   desni - Unicode dvosmerni algoritem ne obrne vrstnega reda črk/besed v
   močno LTR pisavi, spremeni samo, na kateri strani je "začetek" bloka),
   `padding-right:30px` doda prostor za oznako, seznam pa je poln širine
   vsebnika, zato so vse oznake naštevanja samodejno poravnane na ISTI
   navpični liniji, ne glede na dolžino posamezne vrstice besedila. */
.scroll-timeline-item--right .scroll-timeline-item-text ul,
.scroll-timeline-item--right .scroll-timeline-item-text ol {
	text-align: right;
	direction: rtl;
	padding-left: 0;
	padding-right: 30px;
}

@media (prefers-reduced-motion: reduce) {
	.scroll-timeline-photo,
	.scroll-timeline-content,
	.scroll-timeline-marker {
		transition: none;
	}
}

@media (max-width: 780px) {
	.scroll-timeline-line {
		left: 24px;
	}

	.scroll-timeline-item,
	.scroll-timeline-item--right {
		grid-template-columns: 1fr;
		padding-left: 56px;
	}

	.scroll-timeline-item-photo-wrap,
	.scroll-timeline-photo-wrap,
	.scroll-timeline-item--right .scroll-timeline-photo-wrap,
	.scroll-timeline-content,
	.scroll-timeline-item--right .scroll-timeline-content {
		grid-column: 1;
		grid-row: auto;
		justify-content: flex-start;
		text-align: left;
		/* Namizni samodejni odmik od (zdaj levo, ne sredinsko postavljene)
		   oznake tu ni potreben - `.scroll-timeline-item` zgoraj že ima
		   `padding-left:56px`, ki edini skrbi za razmik od oznake na mobilnem. */
		padding-left: 0;
		padding-right: 0;
	}

	.scroll-timeline-marker {
		left: 24px;
		top: 4px;
		transform: translate(-50%, 0);
	}

	.scroll-timeline-item.is-active .scroll-timeline-marker {
		transform: translate(-50%, 0) scale(1.12);
	}

	.scroll-timeline-photo-inner {
		margin-top: 34px;
	}
}

/* --- Števci z animacijo (ločena, nova sekcija - gl. section-blocks.php +
   assets/stats-counter.js) - preprosta, čez celo širino zaslona sekcija
   (enak 100vw preboj kot pri Hero/Časovnici), ki ob prvem skrolu v pogled
   prešteje vsako številko navzgor od 0. --- */
.stats-counter-section {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 70px var(--druflow-content-inset, 20px);
	box-sizing: border-box;
	text-align: center;
}

.stats-counter-title {
	margin: 0 0 40px;
	text-align: center;
}

.stats-counter-grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(var(--druflow-stats-columns, auto-fit), minmax(160px, 1fr));
	gap: 40px 20px;
}

.stats-counter-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.stats-counter-number {
	font-size: var(--druflow-stats-number-size, 48px);
	font-weight: 800;
	line-height: 1;
	color: var(--druflow-stats-number-color, inherit);
}

.stats-counter-number-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--druflow-stats-number-size, 48px) * 2.6);
	height: calc(var(--druflow-stats-number-size, 48px) * 2.6);
	border-radius: 50%;
	border: var(--druflow-stats-circle-border-width, 2px) solid var(--druflow-stats-circle-color, currentColor);
	background: none;
	padding: 10px;
	box-sizing: border-box;
}

.stats-counter-number-circle .stats-counter-number {
	/* Manjše razmerje kot navadna (brez kroga) številka - namenoma, da tudi
	   večmestna števila (npr. skupno število ogledov prispevkov, lahko v
	   tisočih) ostanejo VIDNA V CELOTI znotraj kroga, namesto da vizualno
	   izstopijo čez njegov rob (uporabnikovo poročilo). */
	font-size: calc(var(--druflow-stats-number-size, 48px) * 0.42);
	white-space: nowrap;
	line-height: 1;
}

.stats-counter-label {
	font-size: var(--druflow-stats-label-size, 15px);
	color: var(--druflow-stats-label-color, inherit);
	opacity: 0.9;
}

@media (max-width: 700px) {
	.stats-counter-grid {
		grid-template-columns: repeat(2, minmax(120px, 1fr));
		gap: 30px 16px;
	}

	.stats-counter-number {
		font-size: calc(var(--druflow-stats-number-size, 48px) * 0.7);
	}

	.stats-counter-number-circle {
		width: calc(var(--druflow-stats-number-size, 48px) * 1.9);
		height: calc(var(--druflow-stats-number-size, 48px) * 1.9);
	}

	.stats-counter-number-circle .stats-counter-number {
		font-size: calc(var(--druflow-stats-number-size, 48px) * 0.32);
	}
}

/* --- Lebdeče okno Prijavnega obrazca (logotip + gumb, na vsaki strani) -
   gl. druflow_signup_form_render_floating() v inc/signup-form.php. Prikaže
   se šele, ko JS potrdi, da ni bilo predhodno zaprto (razred "is-visible"
   dodan v JS, ne tukaj), da obiskovalec brez JS-a nikoli ne vidi "obtičalega"
   okna. --- */
.druflow-signup-floating {
	position: fixed;
	z-index: 99998;
	display: none;
}

/* Uporabnikova zahteva: položaj lebdečega okna izbirljiv, VEDNO ob desnem robu
   (gl. `signup_floating_position` polje in $position_class v inc/signup-form.
   php) - "bottom-right" je privzet in ohranja obstoječ izgled. Zgornji/
   srednji položaj sta vedno 50px od desnega roba (in od glave pri zgornjem). */
.druflow-signup-floating--bottom-right {
	right: 20px;
	bottom: 20px;
}

.druflow-signup-floating--top-right {
	right: 50px;
	top: 50px;
}

.druflow-signup-floating--middle-right {
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
}

.druflow-signup-floating.is-visible {
	display: block;
	animation: druflow-signup-floating-in 0.4s ease;
}

/* Samo prosojnost, BREZ premika (transform) - položajne različice zgoraj (npr.
   translateX(-50%) za sredinski/spodnji-sredinski položaj) že uporabljajo
   `transform` za postavitev, animiran premik bi jih med prikazom trenutno
   prepisal. */
@keyframes druflow-signup-floating-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.druflow-signup-floating-trigger {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 26px 10px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(15, 15, 20, 0.92);
	color: var(--color-white);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.druflow-signup-floating-trigger:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.druflow-signup-floating-logo {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 2px solid var(--color-primary);
}

.druflow-signup-floating-close {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--color-white);
	border: 1px solid rgba(0, 0, 0, 0.15);
	color: #333;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	z-index: 1;
}

.druflow-signup-floating-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
}

.druflow-signup-floating-modal.is-visible {
	display: block;
}

.druflow-signup-floating-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.druflow-signup-floating-modal-panel {
	position: relative;
	max-width: 480px;
	width: calc(100% - 40px);
	margin: 5vh auto;
	max-height: 90vh;
	overflow-y: auto;
	border-radius: 20px;
}

/* Znotraj panela izriše CEL .druflow-signup-form (lastna kartica/ozadje) -
   panel sam nima dodatnega ozadja, da se izgled ne podvoji. */
.druflow-signup-floating-modal-panel .druflow-signup-form {
	padding: 0;
	min-height: 0;
}

.druflow-signup-floating-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	border: 0;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 480px) {
	.druflow-signup-floating {
		right: 12px;
		bottom: 12px;
		left: 12px;
	}

	.druflow-signup-floating-trigger {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   KOLEDAR DOGODKOV (events_calendar) IN REZULTATI (results) - novi vrsti
   sekcije (gl. inc/section-blocks.php).
   Uporabnikovo eksplicitno popravilo: ozadje sekcije NE sme biti privzeto
   temno - če je stran bela, mora biti tudi ozadje sekcije belo/brez barve,
   ENAKO kot pri VSEH ostalih vrstah sekcij v tej temi (gl. npr. .icon-card
   spodaj v datoteki) - ozadje/besedilo sekcije nastavi administrator SAM
   prek že obstoječih splošnih polj "Barva ozadja sekcije"/"Barva besedila
   sekcije" (izriše se prek $section_style v inc/section-blocks.php), ne
   prek CSS privzete vrednosti. Kartice/značke zato uporabljajo SVETLE,
   na belem berljive barve (--color-accent-text, --color-tan-light/-lighter,
   --color-gray-2) - enak nabor spremenljivk kot .icon-card/.feature-card -
   namesto prejšnjih belo-prosojnih (rgba(255,255,255,...)) odtenkov, ki so
   bili berljivi SAMO na (zdaj odstranjenem) trdo kodiranem temnem ozadju.
   ========================================================================== */
.events-calendar-eyebrow {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-accent-text);
	margin-bottom: 8px;
}

.events-calendar-subtitle {
	color: var(--color-gray-2);
	margin: 0;
	max-width: 640px;
}

.events-countdown {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	background: var(--druflow-card-bg, var(--color-white));
	border: 1px solid var(--color-tan-light);
	border-radius: 12px;
	padding: 22px 26px;
	margin: 0 0 30px;
}

.events-countdown-label {
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 11px;
	color: var(--color-accent-text);
	margin-bottom: 6px;
}

.events-countdown-title {
	font-size: 20px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
}

.events-countdown-title a {
	color: var(--color-text-dark);
	text-decoration: none;
}

.events-countdown-title a:hover {
	color: var(--color-accent-text);
	text-decoration: underline;
}

.events-countdown-meta {
	color: var(--color-gray-2);
	font-size: 13px;
	margin-top: 4px;
}

.events-countdown-timer {
	display: flex;
	gap: 12px;
}

.events-countdown-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 60px;
	padding: 10px 8px;
	border: 1px solid var(--color-accent);
	border-radius: 8px;
}

.events-countdown-num {
	font-size: 26px;
	font-weight: 700;
	color: var(--color-accent-text);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.events-countdown-caption {
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 1px;
	color: var(--color-gray-1);
	margin-top: 4px;
}

.events-calendar-list-heading {
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 13px;
	color: var(--color-accent-text);
	margin: 0 0 16px;
}

.event-card {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 20px;
	margin-bottom: 12px;
	background: var(--druflow-card-bg, var(--color-white));
	border: 1px solid var(--color-tan-light);
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.event-card:hover {
	border-color: var(--color-accent);
	box-shadow: 0 12px 30px rgba(176, 139, 93, 0.2);
	transform: translateY(-2px);
}

.event-card--next {
	border-color: var(--color-accent);
	background: var(--color-tan-lighter);
}

.event-card-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	padding: 8px 6px;
	border: 1px solid var(--color-accent);
	border-radius: 8px;
	color: var(--color-accent-text);
}

.event-card-day {
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.event-card-month {
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 1px;
	margin-top: 2px;
}

.event-card-body {
	flex: 1;
	min-width: 0;
}

.event-card-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--color-text-dark);
	margin-bottom: 4px;
}

.event-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 13px;
	color: var(--color-gray-2);
}

.event-card-tags {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.event-card-tag {
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--color-tan-lighter);
	color: var(--color-accent-text);
	white-space: nowrap;
}

.event-card-next-badge {
	text-transform: uppercase;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--color-primary);
	letter-spacing: .5px;
}

.results-card {
	background: var(--druflow-card-bg, var(--color-white));
	border: 1px solid var(--color-tan-light);
	border-radius: 12px;
	padding: 22px 26px;
}

.results-card-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-tan-light);
}

.results-card-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.results-card-title {
	font-size: 19px;
	font-weight: 700;
	color: var(--color-accent-text);
}

.results-card-tag {
	font-size: 12px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--color-tan-lighter);
	color: var(--color-accent-text);
}

.results-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: 13px;
	color: var(--color-gray-2);
	text-align: right;
}

.results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}

.result-item {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 14px;
	background: var(--color-tan-lighter);
	border-radius: 8px;
	font-size: 14px;
}

.result-medal {
	font-size: 16px;
	min-width: 22px;
}

.result-name {
	font-weight: 600;
	color: var(--color-text-dark);
}

.result-note {
	font-size: 12px;
	color: var(--color-gray-1);
}

@media (max-width: 640px) {
	.events-countdown {
		flex-direction: column;
		align-items: flex-start;
	}

	.event-card {
		flex-wrap: wrap;
	}

	.event-card-tags {
		align-items: flex-start;
		flex-direction: row;
	}
}