/* ==========================================================================
   Piškotki — pasica, ikona in predogled zemljevida
   --------------------------------------------------------------------------
   Logika je ista kot na tothemoon.si: dva enakovredna gumba, odločitev se
   zapomni v brskalniku, povezava v nogi jo odpre znova. Videz je EMPOR-jev:
   robovi 4 px, gumbi v obliki tablete, oznaka v IBM Plex Mono.

   Barve so zapisane naravnost in ne prek spremenljivk strani, ker se pasica
   izriše tudi na straneh, ki slogov EMPOR ne naložijo (npr. 404).
   ========================================================================== */

.ttm-pisk,
.ttm-pisk-ikona,
.ttm-zpred {
	--pisk-mornar: #0F294F;
	--pisk-modra: #2461A6;
	--pisk-besedilo: #3D5673;
	--pisk-oznaka: #4E6B88;
	--pisk-crta: #E2E8F0;
	--pisk-crta-mocna: #C4D8EC;
	box-sizing: border-box;
	font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

.ttm-pisk *,
.ttm-zpred * {
	box-sizing: border-box;
}

/* Brez tega `hidden` ne skrije elementa, ki ima display v svojem slogu —
   na tej strani se je to že enkrat zgodilo (glej iskalnik na Katalogih). */
.ttm-pisk[hidden],
.ttm-pisk-ikona[hidden],
.ttm-zpred[hidden],
[data-ttm="zemljevid"][hidden] {
	display: none !important;
}

/* ---- pasica ------------------------------------------------------------- */

.ttm-pisk {
	position: fixed;
	z-index: 9990;
	left: 20px;
	bottom: 20px;
	width: min(420px, calc(100vw - 40px));
	padding: 22px 22px 20px;
	background: #fff;
	border: 1px solid var(--pisk-crta);
	border-radius: 4px;
	box-shadow: 0 30px 70px -30px rgba(15, 41, 79, .45), 0 2px 6px rgba(15, 41, 79, .06);
	color: var(--pisk-mornar);
	transform: translateY(14px);
	opacity: 0;
	transition: transform 240ms ease, opacity 240ms ease;
}

.ttm-pisk--vidno {
	transform: none;
	opacity: 1;
}

.ttm-pisk__oznaka {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pisk-oznaka);
}

.ttm-pisk__oznaka svg {
	flex: none;
	color: var(--pisk-modra);
}

.ttm-pisk__besedilo {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pisk-besedilo);
}

body.ttm-empor .ttm-pisk__besedilo a,
.ttm-pisk__besedilo a {
	color: var(--pisk-modra);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.ttm-empor .ttm-pisk__besedilo a:hover,
.ttm-pisk__besedilo a:hover {
	color: var(--pisk-mornar);
}

.ttm-pisk__gumbi {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Oba gumba sta enako velika in enako dosegljiva: zavrniti mora biti enako
   lahko kot dovoliti. Razlikujeta se samo v barvi. */
.ttm-pisk__gumb,
.ttm-zpred__gumb {
	flex: 1 1 0;
	min-height: 44px;
	padding: 11px 20px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.ttm-pisk__gumb--da,
.ttm-zpred__gumb {
	border: 1px solid var(--pisk-modra);
	background: var(--pisk-modra);
	color: #fff;
}

.ttm-pisk__gumb--da:hover,
.ttm-zpred__gumb:hover {
	border-color: var(--pisk-mornar);
	background: var(--pisk-mornar);
}

.ttm-pisk__gumb--ne {
	border: 1px solid var(--pisk-crta-mocna);
	background: #fff;
	color: var(--pisk-mornar);
}

.ttm-pisk__gumb--ne:hover {
	border-color: var(--pisk-modra);
	color: var(--pisk-modra);
}

.ttm-pisk__gumb:focus-visible,
.ttm-pisk-ikona:focus-visible,
.ttm-zpred__gumb:focus-visible,
.ttm-zpred__povezava:focus-visible {
	outline: 2px solid var(--pisk-modra);
	outline-offset: 3px;
}

/* ---- ikona, ko je pasica pomanjšana ------------------------------------- */
/* Kvadrat z robom 4 px, ne krog — v jeziku strani, kot gumb za meni. */

.ttm-pisk-ikona {
	position: fixed;
	z-index: 9989;
	left: 20px;
	bottom: 20px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--pisk-crta);
	border-radius: 4px;
	background: #fff;
	color: var(--pisk-modra);
	box-shadow: 0 12px 30px -14px rgba(15, 41, 79, .45);
	cursor: pointer;
	transition: color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.ttm-pisk-ikona:hover {
	color: var(--pisk-mornar);
	border-color: var(--pisk-crta-mocna);
	transform: translateY(-2px);
}

/* ---- predogled zemljevida pred privolitvijo ------------------------------ */

.ttm-zpred {
	position: relative;
	overflow: hidden;
	background: #F4F7FA;
}

/* Dva razreda, ne en: slog strani ima `body.ttm-empor img { height: auto }`
   (specifičnost 0,1,2), ki je en sam razred (0,1,0) premagal — slika je bila
   takrat 486 px visoka v 560 px okvirju, pod njo pa siv pas. Absolutna
   postavitev jo naredi neodvisno od višine, ki bi jo kdo še postavil. */
.ttm-zpred .ttm-zpred__slika {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}

.ttm-zpred__plosca {
	position: absolute;
	top: 16px;
	right: 16px;
	width: min(300px, calc(100% - 32px));
	padding: 16px 16px 14px;
	background: #fff;
	border: 1px solid var(--pisk-crta);
	border-radius: 4px;
	box-shadow: 0 20px 44px -26px rgba(15, 41, 79, .5);
}

.ttm-zpred__oznaka {
	margin: 0 0 6px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pisk-oznaka);
}

.ttm-zpred__besedilo {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--pisk-besedilo);
}

.ttm-zpred__vrsta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.ttm-zpred__gumb {
	flex: 0 0 auto;
	padding: 10px 18px;
	font-size: 14px;
}

body.ttm-empor .ttm-zpred__povezava,
.ttm-zpred__povezava {
	font-size: 13px;
	font-weight: 600;
	color: var(--pisk-modra);
	text-decoration: none;
}

body.ttm-empor .ttm-zpred__povezava:hover,
.ttm-zpred__povezava:hover {
	color: var(--pisk-mornar);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Navedba vira je pogoj licence OpenStreetMap. */
body.ttm-empor .ttm-zpred__vir,
.ttm-zpred__vir {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 3px 8px;
	background: rgba(255, 255, 255, .82);
	font-size: 11px;
	line-height: 1.4;
	color: var(--pisk-besedilo);
	text-decoration: none;
}

body.ttm-empor .ttm-zpred__vir:hover,
.ttm-zpred__vir:hover {
	color: var(--pisk-mornar);
	text-decoration: underline;
}

/* ---- povezave v nogi ------------------------------------------------------ */
/* Barvo podedujejo od odstavka (#7F9BB8 na temni nogi), da se ne ločijo od
   sosednjega besedila, dokler kazalec ni na njih. */

/* Slog strani ima body.ttm-empor a { color: #2461A6 } (0,1,2); en sam razred
   bi izgubil in povezavi bi bili modri na temni nogi — premalo kontrasta. */
body.ttm-empor .ttm-pisk-noga,
.ttm-pisk-noga {
	color: inherit;
	text-decoration: none;
	transition: color 200ms ease;
}

body.ttm-empor .ttm-pisk-noga:hover,
body.ttm-empor .ttm-pisk-noga:focus-visible,
.ttm-pisk-noga:hover,
.ttm-pisk-noga:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ttm-pisk-noga:focus-visible {
	outline: 2px solid #7FB3E0;
	outline-offset: 3px;
}

/* ttm-pisk-rob: nad 1024 px je levo navpični pas strani ([data-ttm=rail], 56 px).
   Ikona sede V pas, pod napis »empor.si«, ki ga dvignemo — tako ne prekriva ne
   pasu ne vsebine (Miha, 27. 9.). Pasica gre desno od pasu. */
@media (min-width: 1025px) {
	[data-ttm="rail"] {
		padding-bottom: 92px !important;
	}

	.ttm-pisk-ikona {
		left: 9px;
		bottom: 24px;
		width: 38px;
		height: 38px;
		min-height: 38px;
	}

	.ttm-pisk {
		left: 76px;
	}
}

/* ---- telefon ------------------------------------------------------------- */

@media (max-width: 560px) {
	.ttm-pisk {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		padding: 18px 18px 16px;
	}

	/* Na telefonu bi plavajoča ikona ves čas pokrivala levi rob vsebine (gumbe,
	   tabele, nogo) — izmerjeno 26. 9. 2026. Odločitev se tu spremeni prek
	   povezave »Nastavitve piškotkov« v nogi, ki je na vsaki strani. */
	.ttm-pisk-ikona,
	.ttm-pisk-ikona:not([hidden]) {
		display: none !important;
	}

	/* Na ozkem zemljevidu plošča ne sme pokriti oznake lokacije, ki je v
	   sredini — zato gre na dno, besedilo pa se skrči na eno vrstico. */
	.ttm-zpred__plosca {
		top: auto;
		right: 12px;
		bottom: 30px;
		left: 12px;
		width: auto;
		padding: 12px 14px;
	}

	.ttm-zpred__besedilo {
		margin-bottom: 10px;
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ttm-pisk,
	.ttm-pisk-ikona,
	.ttm-pisk__gumb,
	.ttm-zpred__gumb {
		transition: none;
	}

	.ttm-pisk {
		transform: none;
	}

	.ttm-pisk-ikona:hover {
		transform: none;
	}
}

@media print {
	.ttm-pisk,
	.ttm-pisk-ikona,
	.ttm-zpred__plosca {
		display: none !important;
	}
}