@charset "UTF-8";
/*!
 * VO-KA parametri pitne vode — samostojni osnovni slog.
 *
 * ZAKAJ TA DATOTEKA OBSTAJA
 * -------------------------
 * `voka-parametri.css` je dobesedni prenos sloga iz Drupal 7 modula. Ta slog NI
 * samostojen: oblikuje samo DataTables, barve poligonov na zemljevidu, `.loader`
 * in preklop `obmocja-active/inactive`. Vse ostalo — širino zemljevida, seznam
 * oskrbovalnih območij, tipografijo in postavitev — je v Drupalu prispevala tema
 * `jhl`. Na katerikoli drugi temi zato vmesnik razpade v neoblikovan HTML.
 *
 * Ta datoteka doda manjkajoče privzetke, da je vmesnik dostojen na poljubni temi.
 *
 * VRSTNI RED NALAGANJA (nujno)
 * ----------------------------
 * Slog se v čakalno vrsto vpiše PRED `voka-parametri.css` (glej
 * `Voka_Parametri_Shortcode::register_assets()` — ročica `voka-parametri` ima ta
 * slog med odvisnostmi). Kjer se pravili prekrivata ob enaki specifičnosti,
 * zato zmaga izvirnik. Izvirnika ne spreminjamo — če se spletišče kdaj vrne na
 * temo `jhl`, mora ostati nedotaknjen.
 *
 * SPECIFIČNOST PROTI IZVIRNIKU
 * ----------------------------
 * Odkar je `voka-parametri.css` izoliran, je vsak njegov selektor zavit v
 * `:where(.voka-parametri)`. `:where()` NE prispeva specifičnosti, zato so
 * razmerja med to datoteko in izvirnikom ostala natanko taka, kot so bila —
 * spodaj opisane "IZJEME" delujejo nespremenjeno. Kdor bi `:where()` kdaj
 * zamenjal z navadno predpono (`.voka-parametri .water-link`), bi vsakemu
 * pravilu izvirnika dodal en razred specifičnosti; izvirnik se nalaga ZA to
 * datoteko, zato bi ob nastalem izenačenju prevladal in izjeme bi utihnile.
 *
 * NAMERNE IZJEME (edina mesta, kjer prehitimo izvirnik z višjo specifičnostjo)
 * so posebej označene s komentarjem "IZJEMA".
 *
 * OBSEG
 * -----
 * Vsa pravila so pod razredom `.voka-parametri` (ovoj v `templates/parametri.php`),
 * da slog ne pušča v temo. Posebnih izjem za DataTables in Chosen ni:
 *  - DataTables svoj ovoj zgradi znotraj `#parameters-results`, torej znotraj ovoja;
 *  - Chosen se v tem vtičniku sploh ne aktivira (njegov CSS ni priložen, zato
 *    `chosenAvailable()` v `voka-parametri.js` vrne false). Razreda
 *    `.chosen-container` zato namenoma NE oblikujemo — če bi mu dali
 *    `display:inline-block`, bi se Chosen vklopil brez svojih slogov in bi bil
 *    izbirnik neuporaben.
 *
 * PREVERJENO na izpisu strani (ne sklepano): `.dataTables_wrapper`, `#parameters`,
 * `.DTFC_LeftWrapper`/`.DTFC_RightWrapper` in `.DTFC_Cloned` res vsi nastanejo
 * znotraj `#parameters-results`, torej znotraj ovoja. Edino vozlišče, ki nastane
 * IZVEN ovoja, je sonda `<div class="chosen-container">`, ki jo `chosenAvailable()`
 * za hip pripne na `document.body` — še en razlog, da tega razreda ne oblikujemo.
 *
 * PISAVA
 * ------
 * Naročnikova pisava je "aktiv-grotesk" (Adobe Typekit). Na tem spletišču je ni
 * in zunanjih virov ne nalagamo, zato veriga za njo našteva sistemske neogroteske
 * (Helvetica Neue, Arial, Liberation Sans …). Na pravem spletišču, kjer je Typekit
 * naložen, prevzame pravo pisavo brez spremembe te datoteke.
 *
 * @package Voka_Parametri_Vode
 */

/* ---------------------------------------------------------------------------
 * 1. Žetoni oblikovnega jezika naročnika
 *    (izvleček iz jhl_front/src/sass/helpers/_variables.scss)
 * ------------------------------------------------------------------------ */

/*
 * Uporabljene barve naročnikove palete. Ostale barve iz `_variables.scss`
 * (svetla modra #addcf8, siva 2 #999999, barva stranskih naslovov #b6b6b6) v tem
 * vmesniku nimajo vloge, zato jih tu namenoma ni — spremenljivka, ki je nihče ne
 * bere, je samo še ena stvar, ki lahko zastari.
 */
.voka-parametri {
	--voka-blue: #007ac3;
	--voka-blue-dark: #00629d;   /* izpeljanka za stanje ob prehodu miške */
	--voka-blue-wash: #f0f7fc;   /* izpeljanka za zelo lahko podlago */
	--voka-gray: #595959;
	--voka-border: #d7d7d7;
	--voka-bg: #f4f4f4;
	--voka-brown: #aa722e;       /* rjava VO-KA SNAGA — edini poudarek, ki ni moder */
	--voka-ink: #1c1c1c;         /* izpeljanka: barva naslovov, temnejša od sive */

	--voka-font: "aktiv-grotesk", "Helvetica Neue", Helvetica, "Segoe UI",
		Roboto, Arial, "Liberation Sans", sans-serif;

	/* Največja širina vsebnika po naročnikovem oblikovnem jeziku. */
	--voka-max: 1300px;
	/* Zemljevid je najbolj berljiv med 900 in 1000 px. */
	--voka-map-max: 960px;
}

/* ---------------------------------------------------------------------------
 * 2. Vsebnik in tipografija
 * ------------------------------------------------------------------------ */

/*
 * IZJEMA (proti temi, ne proti izvirniku vtičnika): bločne teme postavijo
 * vsebino v omejen stolpec s pravilom
 *   `.is-layout-constrained > :where(...) { max-width: var(--wp--style--global--content-size) }`
 * (v Twenty Twenty-Five je to 645 px). Pravilo ima specifičnost 0-1-0 in se
 * naloži za slogi vtičnika, zato ga z enim razredom ni mogoče prehiteti.
 * Ovoj ima zato dva razreda in ju tu naslovimo oba (0-2-0).
 */
.voka-parametri.voka-parametri-vode {
	max-width: var(--voka-max);
	margin-left: auto;
	margin-right: auto;
}

.voka-parametri {
	font-family: var(--voka-font);
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--voka-gray);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.voka-parametri h2,
.voka-parametri h3,
.voka-parametri h4 {
	font-family: var(--voka-font);
	color: var(--voka-ink);
	font-weight: 500;
	margin: 0 0 0.75rem;
}

.voka-parametri h2 {
	font-size: 28px;
	line-height: 1.35;
}

.voka-parametri h3 {
	font-size: 24px;
	line-height: 1.35;
}

.voka-parametri h4 {
	font-size: 18px;
	line-height: 1.45;
}

.voka-parametri p {
	font-size: 14px;
	line-height: 1.8;
	font-weight: 400;
	margin: 0 0 0.9rem;
}

.voka-parametri p:last-child {
	margin-bottom: 0;
}

.voka-parametri-intro {
	max-width: 46rem;
	margin: 0 0 2rem;
}

.voka-parametri-intro p {
	font-size: 16px;
	line-height: 1.6;
}

/*
 * Prazni vsebniki za rezultate stojijo v predlogi MED zemljevidom in seznamom
 * območij. Izvirnik jim da `margin: 40px 0 80px` oziroma `margin-bottom: 40px`,
 * kar v izhodiščnem stanju naredi ~240 px mrtvega prostora sredi strani.
 * IZJEMA: robove pobiramo samo, dokler so vsebniki prazni — takoj ko JavaScript
 * vanje kaj vstavi, spet velja izvirnik.
 */
.voka-parametri #parameters-results:empty,
.voka-parametri #parameters-results-all:empty,
.voka-parametri #parameter-chart:empty,
.voka-parametri #parameter-chart-desc:empty,
.voka-parametri #area-title:empty {
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------------
 * 3. Zemljevid oskrbovalnih območij
 * ------------------------------------------------------------------------ */

/*
 * SVG ima `viewBox`, nima pa atributov `width`/`height`. Brez pravila se razteza
 * čez celotno širino starša in v ozkem stolpcu teme ostane droben.
 * `.obmocja-inactive` iz izvirnika ima `display:none !important`, zato `display`
 * tu ne moti skrivanja zemljevida ob izbiri območja.
 */
.voka-parametri #obmocja {
	display: block;
	width: 100%;
	max-width: var(--voka-map-max);
	height: auto;
	margin: 0 auto 2.5rem;
}

/* Oznake občin in območij nariše skupina `#oo-oznake` s pisavo Arial v atributu. */
.voka-parametri #obmocja text {
	font-family: var(--voka-font);
}

/*
 * Kazalec in stanje ob prehodu miške. Izvirnik nastavi `cursor:pointer` samo
 * naštetim razredom območij (`.area-klece`, `.area-brest` …), na tej karti pa
 * jih je precej več (`.area-ig`, `.area-golo-brdo`, `.area-podpec-virje` …),
 * zato ga tu damo vsem klikljivim likom naenkrat.
 *
 * Karta uporablja `path.area-water` (ne `polygon`), kar izvirnik sicer pokriva
 * (`path.area-water:hover { opacity: 1 }`). Prosojnost zato PUŠČAMO IZVIRNIKU
 * in dodamo samo obrobo, ki je izvirnik ne določa — tako je območje pod miško
 * res očitno, prekrivanja pravil pa ni.
 */
.voka-parametri #obmocja .area-water {
	cursor: pointer;
}

.voka-parametri #obmocja path.area-water:hover {
	stroke: var(--voka-blue);
	stroke-width: 3;
	stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
 * 4. Seznam oskrbovalnih območij (`#water-area-visible`)
 * ------------------------------------------------------------------------ */

/*
 * V predlogi je seznam zapisan kot `<table>` z eno celico na vrstico — tako je
 * bilo v Drupalu in oznak ne spreminjamo, ker so nanje vezani izbirniki v
 * `voka-parametri.js`. Da iz njega dobimo odzivno mrežo, moramo tabelarno
 * postavitev razveljaviti EKSPLICITNO na vseh štirih ravneh:
 *
 *   table  -> block    (sicer okoli ostane tabelarni kontekst)
 *   tbody  -> grid     (nosilec mreže)
 *   tr     -> contents (vrstica izgine iz postavitve, celica postane element mreže)
 *   td/th  -> block    (sicer bi brskalnik okoli njiju ustvaril anonimne
 *                       tabelarne škatle in vsaka celica bi spet dobila svojo vrstico)
 *
 * Brez katerekoli od teh štirih deklaracij mreža ne nastane.
 */
.voka-parametri #water-area-visible {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-top: 1px solid var(--voka-border);
	padding-top: 2rem;
}

.voka-parametri #water-area-visible tbody {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.5rem;
	align-items: stretch;
}

.voka-parametri #water-area-visible tr {
	display: contents;
}

.voka-parametri #water-area-visible td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
}

/* Prva vrstica ni element seznama, ampak naslov razdelka nad mrežo. */
.voka-parametri #water-area-visible th {
	display: block;
	grid-column: 1 / -1;
	padding: 0;
	border: 0;
	margin: 0 0 0.75rem;
	background: none;
	font-size: 24px;
	line-height: 1.35;
	font-weight: 500;
	color: var(--voka-ink);
	text-align: left;
}

/* Povezave do območij kot mirni gumbi. */
.voka-parametri #water-area-visible a.area-water {
	display: flex;
	align-items: center;
	min-height: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--voka-border);
	background: #fff;
	color: var(--voka-gray);
	font-family: var(--voka-font);
	font-size: 16px;
	line-height: 1.35;
	font-weight: 400;
	text-decoration: none;
	box-shadow: none;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.voka-parametri #water-area-visible a.area-water:hover,
.voka-parametri #water-area-visible a.area-water:focus {
	border-color: var(--voka-blue);
	background: var(--voka-blue-wash);
	color: var(--voka-blue);
	text-decoration: none;
}

.voka-parametri #water-area-visible a.area-water:focus-visible {
	outline: 2px solid var(--voka-blue);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 5. Obrazec z izbirnikom (`#area`)
 * ------------------------------------------------------------------------ */

.voka-parametri #area {
	margin: 0 0 1.5rem;
}

.voka-parametri #area-title {
	font-size: 28px;
	line-height: 1.3;
	font-weight: 500;
	color: var(--voka-ink);
	margin: 0 0 1.25rem;
}

/*
 * Izvirnik izbirniku že da obrobo, pisavo, velikost in notranji rob — teh
 * lastnosti tu ne ponavljamo. Dodamo samo tisto, česar ne določa: širino,
 * podlago in poravnavo v vrstici.
 */
.voka-parametri #water-area {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	max-width: 26rem;
	background: #fff;
	vertical-align: middle;
	margin: 0 0.5rem 0.75rem 0;
	border-radius: 2px;
}

.voka-parametri #water-area:focus-visible {
	outline: 2px solid var(--voka-blue);
	outline-offset: 2px;
}

/* Izvirnik ima za `#submit-area` samo prazno pravilo, gumb je torej neoblikovan. */
.voka-parametri #submit-area {
	display: inline-block;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var(--voka-blue);
	border-radius: 2px;
	background: var(--voka-blue);
	color: #fff;
	font-family: var(--voka-font);
	font-size: 15px;
	line-height: 1;
	font-weight: 500;
	padding: 0.95rem 1.6rem;
	margin: 0 0 0.75rem;
	vertical-align: middle;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.voka-parametri #submit-area:hover {
	background: var(--voka-blue-dark);
	border-color: var(--voka-blue-dark);
}

.voka-parametri #submit-area:focus-visible {
	outline: 2px solid var(--voka-blue-dark);
	outline-offset: 2px;
}

/*
 * Povezavo "Nazaj na zemljevid" izvirnik že oblikuje (velikost, spodnja črta).
 * IZJEMA: barvo `#bcbcbc` na belem povozimo — razmerje kontrasta je 1,9 : 1 in
 * ne doseže niti WCAG AA za veliko besedilo. Ostale lastnosti puščamo izvirniku.
 */
.voka-parametri .water-link {
	color: var(--voka-gray);
	border-bottom-color: var(--voka-border);
}

.voka-parametri .water-link:hover {
	color: var(--voka-blue);
	border-bottom-color: var(--voka-blue);
}

.voka-parametri .water-link:focus-visible {
	outline: 2px solid var(--voka-blue);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * 6. Nalagalnik
 * ------------------------------------------------------------------------ */

/*
 * Izvirnik nalagalnik skrije (`display:none`) in ga JavaScript pokaže z
 * `.obmocja-active { display:block !important }`; sredinjenje in barvo prav tako
 * določa izvirnik. Tu dodamo samo prostor okrog, da ni prilepljen na tabelo.
 */
.voka-parametri .loader {
	padding: 1.5rem 0;
	line-height: 1.5;
}

.voka-parametri .loader img {
	vertical-align: middle;
	margin-right: 0.35rem;
}

/* ---------------------------------------------------------------------------
 * 7. Tabela rezultatov (DataTables)
 * ------------------------------------------------------------------------ */

/*
 * DataTables in `voka-parametri.css` skupaj poskrbita za iskalnik, oštevilčenje
 * in fiksne stolpce. Manjkajo osnovne obrobe in razmiki celic — dodamo jih
 * zadržano in samo znotraj ovoja. Vodoravno drsenje ureja DataTables sam
 * (`scrollX: true` + FixedColumns), zato tu NE dodajamo lastnega `overflow`.
 */
.voka-parametri table.dataTable {
	font-family: var(--voka-font);
	font-size: 14px;
	line-height: 1.45;
	color: var(--voka-gray);
	/*
	 * `border-collapse` namenoma puščamo tak, kot ga nastavi DataTables
	 * (`separate` + `border-spacing: 0`) — ob `scrollX` knjižnica širine stolpcev
	 * računa v slikovnih pikah, sprememba modela obrob pa bi glavo in telo tabele
	 * razmaknila za piko.
	 */
}

.voka-parametri table.dataTable thead th {
	padding: 0.65rem 0.75rem;
	border-bottom: 2px solid var(--voka-blue);
	color: var(--voka-ink);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.35;
	text-align: left;
	vertical-align: bottom;
	white-space: normal;
}

.voka-parametri table.dataTable tbody td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--voka-border);
	vertical-align: middle;
}

/*
 * FixedColumns pribije prva dva in zadnji stolpec tako, da NAD drseči del tabele
 * položi klon tabele (`table.DTFC_Cloned`). Priložena datoteka
 * `fixedColumns.dataTables.min.css` da belo podlago samo `thead` in `tfoot` klona
 * — podlago za `tbody` je v Drupalu prispevala tema. Brez nje se skozi pribite
 * stolpce vidi besedilo, ki drsi pod njimi. Podlago zato dodamo tu.
 */
.voka-parametri table.DTFC_Cloned tbody td,
.voka-parametri table.DTFC_Cloned tbody th {
	background-color: #fff;
}

/*
 * Tanka črta pokaže, kje se pribiti stolpci končajo in kje se začne drseči del.
 * Senco nosi klonirana tabela (ta ima v slogu FixedColumns `z-index: 2`, zato se
 * res nariše nad drsečo vsebino); `box-shadow` ne vpliva na postavitev, širine
 * pribitih stolpcev pa FixedColumns tako ali tako zapiše v slog elementa.
 */
.voka-parametri div.DTFC_LeftWrapper table.DTFC_Cloned {
	box-shadow: 1px 0 0 var(--voka-border);
}

.voka-parametri div.DTFC_RightWrapper table.DTFC_Cloned {
	box-shadow: -1px 0 0 var(--voka-border);
}

/* Povezava "Graf" v zadnjem stolpcu. */
.voka-parametri table.dataTable tbody a {
	color: var(--voka-blue);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.voka-parametri table.dataTable tbody a:hover {
	border-bottom-color: var(--voka-blue);
}

.voka-parametri table.dataTable tbody a:focus-visible {
	outline: 2px solid var(--voka-blue);
	outline-offset: 2px;
}

/* Iskalnik in izbirnik dolžine strani — samo poravnava, videz da izvirnik. */
.voka-parametri .dataTables_wrapper {
	margin: 0;
}

.voka-parametri .dataTables_filter input,
.voka-parametri .dataTables_length select {
	box-sizing: border-box;
	background: #fff;
	border-radius: 2px;
}

.voka-parametri .dataTables_filter input:focus-visible,
.voka-parametri .dataTables_length select:focus-visible {
	outline: 2px solid var(--voka-blue);
	outline-offset: 2px;
}

.voka-parametri .dataTables_paginate a:focus-visible {
	outline: 2px solid var(--voka-blue);
	outline-offset: 2px;
}

.voka-parametri .voka-parametri-error {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--voka-brown);
	background: var(--voka-bg);
	font-size: 15px;
	color: var(--voka-ink);
}

/* ---------------------------------------------------------------------------
 * 8. Opis parametra in graf
 * ------------------------------------------------------------------------ */

.voka-parametri #parameter-chart-desc {
	max-width: 46rem;
	margin: 0 0 1.5rem;
}

.voka-parametri #parameter-chart-desc h3 {
	font-size: 24px;
	line-height: 1.35;
	font-weight: 500;
	color: var(--voka-ink);
	margin: 0 0 0.5rem;
}

/* Mejna vrednost je edini odebeljeni odstavek v opisu. */
.voka-parametri #parameter-chart-desc p strong {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	background: var(--voka-blue-wash);
	border-left: 3px solid var(--voka-blue);
	color: var(--voka-ink);
	font-weight: 500;
	font-size: 15px;
}

.voka-parametri #parameter-chart {
	max-width: var(--voka-map-max);
}

/* ---------------------------------------------------------------------------
 * 9. Odzivnost
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	.voka-parametri #obmocja {
		margin-bottom: 1.75rem;
	}

	.voka-parametri #area-title,
	.voka-parametri #water-area-visible th,
	.voka-parametri #parameter-chart-desc h3 {
		font-size: 22px;
	}
}

@media (max-width: 600px) {
	.voka-parametri #water-area-visible {
		padding-top: 1.5rem;
	}

	/*
	 * Na telefonu je seznam 29 območij edini način izbire (izbirnik `#water-area`
	 * je do izbire skrit), zato mora ostati kratek. Ena celica na vrstico nanese
	 * čez 1600 px — z dvema stolpcema (`minmax(150px, 1fr)` da pri 390 px točno
	 * dva) se prepolovi, tapljiva ploskev pa ostane krepko nad 44 x 44 px.
	 */
	.voka-parametri #water-area-visible tbody {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 0.4rem;
	}

	.voka-parametri #water-area-visible a.area-water {
		padding: 0.7rem 0.75rem;
		font-size: 15px;
	}

	.voka-parametri #water-area-visible th {
		font-size: 20px;
	}

	.voka-parametri #water-area,
	.voka-parametri #submit-area {
		display: block;
		width: 100%;
		max-width: none;
		margin-right: 0;
	}

	.voka-parametri #submit-area {
		text-align: center;
	}

	/*
	 * IZJEMA (edina proti izvirniku v tem razdelku): izvirnik da iskalnemu polju
	 * `#parameters_filter input { min-width: 260px }` in ga plava. To je bilo
	 * pisano za širok stolpec teme `jhl`; pri 390 px je vsebnik širok 330 px, zato
	 * polje obvisi 7 px od levega roba in se konča 63 px pred desnim — poravnano
	 * ni ne levo ne desno. Ker selektor izvirnika nosi ID, ga z razredi ni mogoče
	 * prehiteti; dodamo zato ovoj pred ID (0-1-1-0 proti 0-1-0-1). Velja samo na
	 * ozkih zaslonih — na širokih ostane izvirnik nedotaknjen.
	 */
	.voka-parametri #parameters_filter {
		float: none;
		width: auto;
		/*
		 * `clear` je nujen: brez plavanja se škatla začne že ob vrhu levo
		 * plavajočega izbirnika dolžine, iskalna ikona pa je v izvirniku
		 * absolutno postavljena glede na to škatlo (`#parameters_filter
		 * label:after { top: 10px; right: 12px }`) — pristala bi nad poljem.
		 */
		clear: both;
	}

	.voka-parametri #parameters_filter label {
		display: block;
		margin: 0;
	}

	.voka-parametri #parameters_filter input {
		min-width: 0;
		width: 100%;
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------------
 * 10. Dostopnost
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.voka-parametri #water-area-visible a.area-water,
	.voka-parametri #submit-area,
	.voka-parametri .water-link,
	.voka-parametri table.dataTable tbody a,
	.voka-parametri #obmocja .area-water {
		transition: none;
	}
}