@import url("cFonts.css");
@import url("cFonts.css");
@layer reset, dev, base, theme, layout, widgets, blocks;

/* https://jakelazaroff.com/words/my-modern-css-reset/ */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
  }

  input, button, textarea, select {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    color: currentColor;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  ol, ul {
    list-style: none;
  }

  :not([class]) {
    h1&, h2&, h3&, h4&, h5&, h6& {
      text-wrap: balance;
    }

    ol&, ul& {
      padding-inline-start: 1.5em;
      list-style: revert;
    }
  }
}





/* The global variables are initialized within the root scope. */
:root {
	/* Osnovna velikost pisave za mobilnike in tablice (vse ostalo je v rem, zato se razmerja ohranijo).
	   17px pri 375px širine, linearno do 22px pri 768px; od 65em naprej velja 30px (glej spodaj). */
	font-size: clamp(17px, 11.7px + 1.43vw, 22px);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;

	/* 1. BASE COLOR PALETTE (Literal names) */
	--hslColor__green: 165 100% 19%;
	--hslColor__green--dark: 164 65% 15%;
	
	--hslColor__select: 208 100% 43%;
	--hslColor__silver: 0 0% 77%;
	--hslColor__silver--light: 0 0% 95%;
	--hslColor__gray: 0 0% 50%;
	--hslColor__white: 0 0% 100%;
	--hslColor__black: 0 0% 0%;
	
	/* The system feedback colors are added to the base palette. */
	--hslColor__success: 143 100% 31%;  /* Success */
	--hslColor__warning: 45 100% 51%; 	/* Warning */
	--hslColor__danger: 354 70% 54%;    /* Danger */
	
	--color__silver: hsl(var(--hslColor__silver));
	--color__silver--light: hsl(var(--hslColor__silver--light));
	--color__gray: hsl(var(--hslColor__gray));
	--color__white: hsl(var(--hslColor__white));
	--color__green: hsl(var(--hslColor__green));
	--color__black: hsl(var(--hslColor__black));
	--color__green--dark: hsl(var(--hslColor__green--dark));
	
	--color__primary: hsl(var(--hslColor__green));
	--color__secondary: hsl(var(--hslColor__green));
	--color__select: hsl(var(--hslColor__select));
	
	--theme__bg: transparent;
	--theme__text: var(--color__black);
	--theme__text--inverse: var(--color__white);

	--family1: "DM Sans", sans-serif;
	
	/** 1.067 Minor Second */
	--size__h1: 1.476rem;
	--size__h2: 1.383rem;
	--size__h3: 1.296rem;
	--size__h4: 1.215rem;
	--size__h5: 1.138rem;
	--size__body--big: 1.067rem;
	--size__body: 1rem;
	--size__body--small: 0.937rem;
	--size__body--smallest: 0.7rem;
	--size__buttons: 0.934rem;
	
	/** 1.125 Major Second */
	/*
	--size__h1: 2.03rem;
	--size__h2: 1.8rem;
	--size__h3: 1.6rem;
	--size__h4: 1.42rem;
	--size__h5: 1.26rem;
	--size__body--big: 1.125rem;
	--size__body: 1rem;
	--size__body--small: 0.88rem;
	--size__body--smallest: 0.79rem;
	*/
	
	--lh__h1: 1.2;
	--lh__h2: 1.2;
	--lh__h3: 1.2;
	--lh__h4: 1.2;
	--lh__h5: 1.2;
	--lh__body--big: 1.5;
	--lh__body: 1.6;
	--lh__body--small: 1.4;
	
	/** - posodobitev 
	--weight__thin: 150;
	--weight__normal: 200;
	**/
	
	--weight__thin: 200;
	--weight__normal: 300;
	--weight__medium: 300;
	--weight__bold: 700;
	
	--spacer: 1rem;

	/* The 4px/8px spacing scale is calculated dynamically. */
	--spacing0: 0;
	--spacing1: calc(var(--spacer) * 0.25);  /* 4px */
	--spacing2: calc(var(--spacer) * 0.5);   /* 8px */
	--spacing3: calc(var(--spacer) * 0.75);  /* 12px */
	--spacing4: var(--spacer);               /* 16px - Base unit */
	--spacing5: calc(var(--spacer) * 1.5);   /* 24px */
	--spacing6: calc(var(--spacer) * 2);     /* 32px */
	--spacing7: calc(var(--spacer) * 2.5);   /* 40px */
	--spacing8: calc(var(--spacer) * 3);     /* 48px */
	--spacing9: calc(var(--spacer) * 4);     /* 64px */
	--spacing10: calc(var(--spacer) * 5);    /* 80px */
	--spacing11: calc(var(--spacer) * 6);    /* 96px */
	--spacing12: calc(var(--spacer) * 8);    /* 128px */
	
	/* The global z-index scale is standardized to prevent layer conflicts. */
	--zindex__dropdown: 1000;
	--zindex__sticky: 1020;
	--zindex__fixed: 1030;
	--zindex__modalBackdrop: 1040;
	--zindex__modal: 1050;
	--zindex__tooltip: 1070;
	--zindex__skipLink: 2000;
	
	/* The layout parameters are set. */
	--flow-space: 0.7em;
	--gridGap: 1rem;
	--borderRadius1: 0.4rem;
	--borderRadius2: 1.5rem;
	--easing1: cubic-bezier(0.11, 0, 0.5, 0);
	--shadow1: rgba(0, 0, 0, 0.2) 0px 3px 8px;
	
	--cardSize: 20em;
	--innerCardPadding: var(--spacing4);
	--headerHeight: 4rem;
	--headerOffset: calc(var(--headerHeight) * 1.4);
	--headerOverlap: 0px; /* višina pripete glave, ko je prikazana (js/header.js); za odmik drugih pripetih elementov */
	--headerTransition: .3s ease;
	/* --b__height: 2.5em; */
	--b__height: 2.2em;
	
	--theme__padBlockStart: var(--spacing7);
	--theme__padBlockEnd: var(--spacing7);
	--theme__padInline: var(--gridGap);
	
	
	/* faq */
	--faq-bg: #00614b;          /* zelena iz grafike, po potrebi popravi */
	--faq-h: 560px;             /* višina seznama, prilagodi postavitvi */
	--faq-fade: 72px;           /* višina zgornjega/spodnjega prelivanja */
	

	/* odštevalnik */
	--countdown__num: 2.37rem;        /* ≈ 52px pri root 22px; izpeljano iz --size__h1 razmerja */
	--countdown__label: var(--size__body--smallest);  /* 0.7rem, za napise DNI/UR/... */
	--countdown__box: 6em;         /* velikost kvadrata, ≈ 160px */
	--countdown__gap: var(--spacing5); /* 24px */
	--countdown__radius: var(--borderRadius1);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--headerTransition: 0s;
	}
}




@layer layout {
	:root {
		/* The central container's maximum width is defined. */
		--w__maxWidth: 1840px;
		--w__gap: var(--gridGap, 0.5rem);
		--w__padding: 0.5rem; 
	}

	/* The main layout is configured to stick the footer to the bottom. */
	body {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	/* The flex items are prevented from growing implicitly. */
	body > * {
		flex: 0 0 auto;
	}

	/* The body section is allowed to expand and fill available vertical space. */
	body > main {
		flex: 1 1 auto;
	}

	/* The base grid structure is initialized with a mobile-first approach. */
	.w {
		display: grid;
		grid-template-columns:
			[full-start] var(--w__padding)
			[content-start] repeat(6, minmax(0, 1fr)) [content-end]
			var(--w__padding) [full-end];
		column-gap: var(--w__gap);
		align-content: start;
	}

	/* The structural layout is inherited by child wrappers via subgrid. */
	.ws {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: content-start / content-end;
	}

	/* The wrapper is stretched to cover the entire viewport width. */
	.ws--full {
		grid-column: full-start / full-end;
	}

	/* The wrapper is spanned from the first content column to the right screen edge. */
	.ws--extend-right {
		grid-column: content-start / full-end;
	}

	/* The wrapper is spanned from the left screen edge to the last content column. */
	.ws--extend-left {
		grid-column: full-start / content-end;
	}
	
	/* The inner content wrapper is defined for full-width sections. */
	/* The element spans the central 12 columns but resets display to block for normal text flow. */
	.ws__content {
		grid-column: content-start / content-end;
	}
	
	/* The inner grid wrapper is defined for complex layouts inside full-width sections. */
	/* The subgrid is passed down another level. */
	.ws__grid {
		grid-column: content-start / content-end;
		display: grid;
		grid-template-columns: subgrid;
	}
	
	main section header {
		margin-bottom: var(--spacing7); 
	}
	

	@media (min-width: 48em) {
		/* The layout is upgraded to a 12-column grid on larger viewports. */
		.w {
			grid-template-columns:
				[full-start] minmax(var(--w__padding), 1fr)
				[content-start] repeat(12, minmax(0, calc((var(--w__maxWidth) - (11 * var(--w__gap))) / 12))) [content-end]
				minmax(var(--w__padding), 1fr) [full-end];
		}
		
		.ws__content--10, 
		.ws__content--6, 
		.ws__content--8, 
		.ws__content--4 {
			grid-column: 2 / -2;
		}
		
		.ws--full .ws__content--10, 
		.ws--full .ws__content--6,
		.ws--full .ws__content--8,
		.ws--full .ws__content--4 {
			grid-column: 3 / -3;
		}
		
		
		main > section header {
			text-align: left;
		}
	}
	
	@media (min-width: 65em) {
		.ws__content--10 {
			grid-column: 2 / -2;
		}
		
		.ws__content--8 {
			grid-column: 3 / -3;
		}
		
		.ws__content--6 {
			grid-column: 4 / -4;
		}
		
		.ws__content--4 {
			grid-column: 5 / -5;
		}
		
		.ws--full .ws__content--10 {
			grid-column: 3 / -3;
		}
		
		.ws--full .ws__content--8 {
			grid-column: 4 / -4;
		}
		
		.ws--full .ws__content--6 {
			grid-column: 5 / -5;
		}
		
		.ws--full .ws__content--4 {
			grid-column: 6 / -6;
		}
	}
}







@layer base {
	html {
		scrollbar-gutter: stable;
	}
	
	[id] {
		scroll-margin-top: calc(var(--header__height, 8em) + 4em);
	}

	body {
		color: var(--color__black);
		font-weight: var(--weight__normal);
		font-family: var(--family1);
		font-style: normal;
		line-height: var(--lh__body);
		background-color: var(--color__white);
		
		font-optical-sizing: auto;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}

	h1, h2, h3, h4, h5 {
		leading-trim: both;
		text-edge: cap;
		font-weight: var(--weight__normal);
	}

	.text--h1, 
	h1 {
		font-size: var(--size__h1);
		line-height: var(--lh__h1);
		font-style: italic;
		letter-spacing: 4%;
	}

	.text--h2, 
	h2 {
		font-size: var(--size__h2);
		line-height: var(--lh__h2);
		font-style: italic;
		letter-spacing: 4%;
	}

	.text--h3, 
	h3 {
		font-size: var(--size__h3);
		line-height: var(--lh__h3);
	}

	.text--h4, 
	h4 {
		font-size: var(--size__h4);
		line-height: var(--lh__h4);
	}

	.text--h5, 
	h5 {
		font-size: var(--size__h5);
		line-height: var(--lh__h5);
	}
	
	a {
		color: currentColor;
		transition: 
			color .3s, 
			text-decoration-color .3s;
		
		text-decoration: underline;
		text-decoration-color: transparent;
		text-underline-offset: 0.4rem;
		text-decoration-thickness: 2px;
	}
	
		a:not(.b):hover {
			text-decoration-color: currentColor;		
		}
	
	b, strong {
		font-weight: var(--weight__bold);
	}
	
	small {
		font-size: var(--size__body--small);
	}
	
	.body--big {
		font-size: var(--size__body--big);
		line-height: var(--lh__body--big);
	}
	
	.body--regular {
		font-size: var(--size__body);
		line-height: var(--lh__body);
	}
	
	.body--small {
		font-size: var(--size__body--small);
		line-height: var(--lh__body--small);
	}
	
	.radius1 {
		overflow: hidden;
		border-radius: var(--borderRadius1);
	}
	
	
	.flow > * + * {
		margin-block-start: var(--flow-space, 1em);
	}
	
	:is(h2 + *, h3 + *, h4 + *) {
		--flow-space: 0.6em;
	}
	
	
	.b {
		--b__borderWeight: 2px;
		--b__borderRadius: var(--borderRadius1);
		--b__bg: var(--color__primary);
		--b__border: var(--color__primary);
		--b__text: var(--color__white);
		--b__icon: currentColor;
		
		
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--spacing4);
		
		min-width: 8em;
		height: var(--b__height);
		padding-left: var(--spacing5);
		padding-right: var(--spacing5);
		
		white-space: nowrap;
		border-radius: var(--b__borderRadius);
		background-color: var(--b__bg);
		border: var(--b__borderWeight) solid var(--b__border);
		color: var(--b__text);
		
		/* font-weight: var(--weight__bold); */
		font-size: var(--size__buttons);
		text-align: center;
		text-decoration: none;
		line-height: 1.2;
		font-style: italic;
		
		outline: 3px solid transparent; 
		outline-offset: 0;
		user-select: none;

		transition: 
			color 0.3s ease,
			background-color 0.3s ease,
			border-color 0.3s ease,
			outline-offset 0.3s ease;
	}
	
	@media (max-width: 47.99em) {
		
		.b {
			line-height: 1.4;
			--b__height: 2.8em;
		}
	}
	
	a.b, 
	button.b {
		cursor: pointer;
	}
		
		.b[aria-expanded="true"], 
		.b:hover {
			--b__bg: transparent;
			--b__text: var(--color__primary);
			--b__icon: var(--color__white);
			--b__iconbg: var(--color__primary);
		}
		
		.b:has(.icon) {
		}
	
		.b span {
			flex: 1 1 auto;
			white-space: nowrap;
			text-align: center;
		}
		
		.b:focus-visible {
			outline-color: var(--color__select); 
			outline-offset: 4px;
		}
	
	.b__group {
		position: relative;
		z-index: 10;
	}
	
	
		
	
	
	.b:has(.badge) {
		position: relative;
	}
	
	.b .badge {
		position: absolute;
		bottom: 0;
		right: 0;
		transform: translate(30%, 30%);
		
		padding: 0.3em;
		
		line-height: 1;
		background-color: var(--color__black);
		color: var(--color__white);
		font-size: 0.6em;
		border-radius: 4px;
	}
	
	.b--small {
		--b__height: 1.2rem;
	}
	
	.b--small.b--icon {
		padding: 0.15em;
	}
	
	.b--small.b--image {
		padding: 0;
	}

	.b--plain {
		padding: 0;
		margin: 0;
		background-color: transparent;
		border: 0;
		color: inherit;
	}
	
		.b.b--plain .icon {
			--b__iconbg: transparent;
			padding: 0;
		}

	.b--primary {
		--b__text: var(--color__white);
		--b__icon: var(--color__green);
		--b__iconbg: var(--color__white);
	}
	
		.b--primary[aria-selected="true"], 
		.b--primary[aria-expanded="true"], 
		.b--primary:hover {
			--b__bg: var(--color__white);
			--b__text: var(--color__green);
			--b__border: var(--color__green);
			--b__iconbg: var(--color__green);
			--b__icon: var(--color__green);
		}
	
	
		
	.b--back .icon {
		transform: rotate(-135deg);
	}
		
	.b--silver {
		--b__bg: var(--color__silver);
		--b__border: var(--color__silver);
		--b__icon: var(--color__black);
		--b__text: var(--color__black);
	}
	
		.b--silver[aria-selected="true"], 
		.b--silver:hover {
			--b__bg: var(--color__green);
			--b__border: var(--color__green);
			--b__text: var(--color__white);
			--b__iconbg: var(--color__green);
			--b__icon: var(--color__white);
		}
	
	
	
	.b--yellow {
		--b__bg: var(--color__yellow);
		--b__border: var(--color__yellow);
		--b__text: var(--color__white);
	}
	
		.b--yellow[aria-selected="true"], 
		.b--yellow:hover {
			--b__bg: var(--color__white); 
			--b__border: var(--color__orange);
			--b__text: var(--color__orange);
		}
		
	.b--red {
		--b__bg: var(--color__red);
		--b__border: var(--color__red);
		--b__text: var(--color__white);
		--b__iconbg: var(--color__white);
		--b__icon: var(--color__red);
	}
	
		.b--red[aria-selected="true"], 
		.b--red:hover {
			--b__bg: var(--color__white); 
			--b__border: var(--color__red);
			--b__text: var(--color__red);
			--b__iconbg: var(--color__red);
			--b__icon: var(--color__white);
		}
		
	.b--green {
		--b__bg: var(--color__green);
		--b__border: var(--color__green);
		--b__text: var(--color__white);
		--b__iconbg: var(--color__white);
		--b__icon: var(--color__white);
	}
	
		.b--green[aria-selected="true"], 
		.b--green:hover {
			--b__bg: var(--color__white); 
			--b__border: var(--color__green);
			--b__text: var(--color__green);
			--b__iconbg: var(--color__white);
			--b__icon: var(--color__green);
		}
		
	.b--blue {
		--b__bg: var(--color__blue);
		--b__border: var(--color__blue);
		--b__text: var(--color__white);
		--b__iconbg: var(--color__white);
		--b__icon: var(--color__blue);
	}
	
		.b--blue[aria-selected="true"], 
		.b--blue:hover {
			--b__bg: var(--color__white); 
			--b__border: var(--color__blue);
			--b__text: var(--color__blue);
			--b__iconbg: var(--color__blue);
			--b__icon: var(--color__white);
		}
	
	
	.b--icon {
		--b__bg: var(--color__white);
		--b__icon: var(--color__primary);
		
		border-radius: 50%;
		
		padding: 0.45em;
		min-width: unset;
		width: var(--b__height);
		height: var(--b__height);
		fill: var(--b__icon);
	}

		/* Vgrajeni SVG ima le viewBox; brez izrecne velikosti ga Safari (iOS) v gumbu stisne na 0 in ikona se ne vidi. */
		.b--icon > svg {
			width: 100%;
			height: 100%;
		}

		.b--icon:hover {
			--b__bg: var(--color__green);
			--b__text: var(--color__white);
			--b__iconbg: var(--color__green);
			--b__border: var(--color__white);
		}

	.b .icon {
		--iconSize: calc(var(--b__height) * 0.7); 
		
		flex: 0 0 auto;
		stroke: var(--b__icon, var(--color__green));
		fill: var(--b__icon, var(--color__green));
		width: var(--iconSize); 
		height: var(--iconSize); 
		padding: 0.35em;
		
		color: var(--b__icon, var(--color__white));
		transition: background-color .3s;
	}
	
	
		.b .icon svg path {
			fill: currentColor;
			stroke: currentColor;
		}
	
	.b.tooltipped {
		position: relative;
	}
		
	.b.tooltipped:after {
		position: absolute;
		left: 50%;
		top: 110%;
		transform: translateX(-50%);
		
		padding: 0.3em 0.6em;
		
		border-radius: 0.3em;
		white-space: nowrap;
		font-size: 0.8rem;
		background-color: var(--color__green);
		color: #fff;
		content: attr(data-tooltip);
	}
	
	.dropdown__toggle {
		position: relative;
		z-index: 10;
	}

		.dropdown__toggle .icon {
			transition: transform .3s;
		}

		.dropdown__toggle[aria-expanded="true"] .icon {
			transform: rotate(-180deg);
		}

	
	.dropdown__menu {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		z-index: 1;
		
		flex-direction: column;
		gap: var(--spacing2);
		align-items: center;
		
		padding-top: var(--spacing5);
		padding-bottom: var(--spacing3);
		margin-top: calc(var(--spacing6) / 2 * -1);
		
		background-color: var(--color__green);
		border-bottom-left-radius: var(--borderRadius1);
		border-bottom-right-radius: var(--borderRadius1);
		color: var(--color__white);
		font-weight: var(--weight__bold);
	}
	
	.dropdown__menu[aria-hidden="true"] {
		display: none;
	}

	.dropdown__menu[aria-hidden="false"] {
		display: flex;
	}
	
		.dropdown__menu a:hover {
			color: var(--color__black);
		}
	
	
	
	
	.bWrap {
		display: flex; 
		flex-direction: row; 
		gap: var(--spacing2); 
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
		.bWrap--left {
			justify-content: flex-start;
		}
	
		.bWrap--right {
			justify-content: flex-end;
		}
		
		.bWrap--center {
			justify-content: center;
		}
		
		.bWrap--equal .b {
			flex: 1;
		}
	
	
	
	::selection {
		background-color: var(--color__select);
		color: var(--color__white);
		text-shadow: none;
	}

	::-moz-selection {
		background-color: var(--color__select);
		color: var(--color__white);
		text-shadow: none;
	}
}


.tag {
	--tag__bg: var(--color__silver);
	
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	padding: var(--spacing2) var(--spacing4);
	
	white-space: nowrap;
	border-radius: 20px;
	background-color: var(--tag__bg);
	color: var(--color__white);
	
	font-weight: var(--weight__bold);
	font-size: var(--size__body--smallest);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2%;
	line-height: 1;
}

.tag--green {
	--tag__bg: var(--color__green);
}

.tag--orange {
	--tag__bg: var(--color__green);
}

.tag--red {
	--tag__bg: var(--color__red);
}

.tag--yellow {
	--tag__bg: var(--color__yellow);
}

.tag--blue {
	--tag__bg: var(--color__blue);
}





#btnMenu {
	--b__bg: transparent;
	--b__border: transparent;
	--b__text: var(--header_text_color);
	
	padding: 0;
	min-width: 0;
	
	font-size: 0.8em;
	font-weight: var(--weight__bold);
	font-style: normal;
	text-transform: uppercase;
}

	
	
	#btnMenu .icon {
		position: relative;
		margin-right: 0;
		padding: 0;
	}
	
	#btnMenu:hover .icon {
		--b__iconbg: transparent;
	}
	
	#btnMenu:hover .icon:after {
		top: 30%;
	}

	#btnMenu:hover .icon:before {
		top: 70%;
	}
	
	

#btnMenu .icon:before, 
#btnMenu .icon:after {
	position: absolute;
	
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
	
	width: 100%;
	height: 4px;
	
	border-radius: 2px;
	background-color: var(--b__text);
	content: "";
	
	transition: top .3s, transform .6s;
}


	#btnMenu .icon:after {
		top: 38%;
	}

	#btnMenu .icon:before {
		top: 63%;
	}


.header--floating #btnMenu[aria-expanded="true"] {
	color: var(--b__text);
}



#btnMenu[aria-expanded="true"] .icon {
	transform: rotate(-90deg);
	transition: 
		transform .6s ease-in-out, 
		background-color .3s;
}

	#btnMenu[aria-expanded="true"] .icon:after {
		top: 50%;
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	#btnMenu[aria-expanded="true"] .icon:before {
		top: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}



.offscreen {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px; 
}

.skipLink {
	position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	z-index: var(--zindex__skipLink);
	padding: 1em 2em;
	
	background-color: var(--color__select);
	color: #fff;
}

	.skipLink.offscreen:focus {
		clip: auto;
		height: auto;
		overflow: auto;
		position: absolute;
		width: auto;
	}

.previewAlert {
	position: fixed;
	top: 1em;
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	
	padding: 0.3em 1em;
	
	font-size: var(--size__body--small);
	border-radius: 5px;
	background-color: var(--color__green);
	box-shadow: var(--shadow1);
}










.teaser, 
.header {
	--header_text_color: var(--color__primary);
	z-index: calc(var(--zindex__fixed) + 1);
}

.header {
	color: var(--header_text_color);
	background-color: #fff;
}

.menu .header {
	background-color: transparent;
}

/* Pripeta glava (js/header.js): ko glava skupaj z vsebino odide z zaslona, se pripne na vrh okna.
   Ob drsenju navzgor se prikaže, ob drsenju navzdol se skrije. */
.header--pinned {
	position: sticky;
	top: 0;
	box-shadow: var(--shadow1);
}

	.header--hidden {
		transform: translateY(-100%);
		box-shadow: none;
	}

	/* fokus s tipkovnico skrito glavo prikaže */
	.header--hidden:has(:focus-visible) {
		transform: none;
		box-shadow: var(--shadow1);
	}

	/* prehod se vklopi šele, ko je glava že pripeta (js/header.js), sicer bi ob pripenjanju zdrsnila čez vsebino */
	.header--animate {
		transition:
			transform var(--headerTransition),
			box-shadow var(--headerTransition);
	}

	body.menu .header--pinned {
		transform: none;
		box-shadow: none;
	}

.header .ws__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gridGap);
	min-height: var(--headerHeight);
	padding: 0;
}

	.header__logo--color .header__logoWhite {
		display: none;
	}

	.header__logo--white .header__logoColor {
		display: none;
	}

.header--floating {
	--header_text_color: var(--color__primary);
}

.header--floating ~ main {
	margin-top: calc(var(--headerHeight) * -1);
}

	body.menu .header--floating .header__logoWhite {
		display: block;
	}

body.menu .header--floating.header--noLogo .header__logo {
	visibility: visible;
	pointer-events: all;
}

/* naslovnica: v pripeti glavi je logotip viden */
.header--noLogo:not(.header--pinned) .header__logo {
	visibility: hidden;
	pointer-events: none;
}


.header__logo {
	width: 8em;
	flex: 0 0 auto;
}

.header__lang {
	display: flex;
	gap: var(--spacing3);
	font-size: var(--size__body--smallest);
	
	text-transform: lowercase;
}

	.header__lang a:hover {
		text-decoration: underline;
		text-underline-offset: 0.3rem;
		text-decoration-thickness: 2px;
		color: var(--color__black);
	}

.header__more {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spacing6);
}

/* Na mobilnikih so v glavi vidni isti elementi kot na velikih zaslonih (Prijava, jeziki, Menu), le v zgoščeni obliki. */
@media (max-width: 64.99em) {
	.header__more {
		gap: var(--spacing4);
	}

	.header__more > * {
		flex-shrink: 0;
	}

	.header__more > .b--prijava {
		--b__height: 2em;

		min-width: 0;
		padding-inline: var(--spacing3);

		font-size: var(--size__body--small);
	}

	/* Če v vrstici zmanjka prostora, se jeziki prelomijo v dve vrstici (namesto da glava preseže zaslon). */
	.header__more > .header__lang {
		flex-shrink: 1;
		flex-wrap: wrap;
		min-width: 0;
		row-gap: 0;
		line-height: 1.3;
	}

	/* Skrito logo na vstopni strani ne sme zasedati prostora v vrstici (ob odprtem meniju se spet prikaže). */
	body:not(.menu) .header--noLogo:not(.header--pinned) .header__logo {
		width: 0;
		min-width: 0;
	}
}

@media (max-width: 29.99em) {
	.header__more {
		gap: var(--spacing3);
	}

	.header__more > .b--prijava {
		padding-inline: var(--spacing2);
	}
}

/* Zelo ozki zaslonih: stisnjeni razmiki in manjše logo, da gredo logo + Prijava + jeziki + Menu v eno vrstico. */
@media (max-width: 23.49em) {
	.header .ws__content, 
	.header__more {
		gap: var(--spacing2);
	}
	
	/* -- mts logo brez radenske
	.header__logo {
		width: 4.4em;
	}
	*/

	.header__logo {
		width: 8em;
	}
}

/* Na telefonih so jeziki na voljo samo v odprtem meniju (v glavi jih ob zaprtem meniju ni). */
@media (max-width: 47.99em) {
	body:not(.menu) .header__more > .header__lang {
		display: none;
	}
}








.mega {
	height: 0;
	overflow: hidden;
	padding-top: var(--headerOffset);
	
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	z-index: var(--zindex__fixed);
	
	opacity: 0;
	background-color: var(--color__green);
	
	
	background: linear-gradient(
		-45deg, 
        #000c09 0%,   
        #002b20 20%,  
        #006149 50%,  
        #006149 100%  
	);

	background-size: 400% 400%;

	background-position: 100% 100%;
}

	@keyframes loading-efekt {
	  0% { 
		background-position: 100% 100%; 
	  }
	  100% { 
		background-position: 0% 0%;  
	  }
	}

	body.menu {
		overflow-y: hidden;
	}

	body.menu .mega {
		opacity: 1;
		height: 100svh;
		
		animation: loading-efekt 1.5s ease-out forwards;
	}
	
	/* Glava (logo + zapri meni) ostane na vrhu, tudi če telefon (iOS) ob drsenju po meniju premakne stran. */
	body.menu .header {
		--header_text_color: var(--color__white);

		position: sticky;
		top: 0;
	}
	
	body.menu #btnMenu {
		--b__text: var(--header_text_color);
	}
	
	body.menu .header__logoColor {
		display: none;
	}
	
	body.menu .header__logoWhite {
		display: block;
	}

.mega .ws__content {
	height: 100%;
	overflow: auto;
	overscroll-behavior: contain; /* drsenje po meniju se ne prenese na stran pod njim */

	display: flex;
	gap: var(--spacing6);
	flex-direction: column;
	padding-bottom: var(--spacing8);
}

.mega__quicklinks {
	flex-direction: column;
	flex-wrap: wrap;
	
	max-width: 10em;
}

.mega__quicklinks .b[aria-selected="true"] {
	--b__bg: var(--color__green);
    --b__border: var(--color__white);
    --b__text: var(--color__white);
    --b__iconbg: var(--color__white);
    --b__icon: var(--color__green);
}

.mega .nav ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing1);
	list-style: none;
	margin: 0;
	padding: 0;
	
	font-style: italic;
}

/* Glavna navigacija je enako velika kot e-pošta in telefon v meniju. */
.mega .nav--main {
	font-size: var(--size__h4);
}

/* Aktivna stran je podčrtana (enako kot ob hoverju); sekundarne povezave so ob hoverju in aktivne bele. */
.mega .nav li.active > a {
	text-decoration-color: currentColor;
}

.mega .nav--sec li.active > a,
.mega .nav--sec a:hover {
	color: var(--color__white);
}

.mega .ws__content .mega__column:first-child {
	order: 10;
}


.mega__info {
	--flow-space: var(--spacing6);
	
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Navaden blok (ne flex): iOS bančne številke spremeni v povezave in v flex stolpcu bi vsaka skočila v svojo vrstico. */
.mega__details {
	position: relative;
	display: block;
	margin-top: var(--spacing4);
	padding-top: var(--spacing4);
	
	font-size: var(--size__body--smallest);
	color: hsla(var(--hslColor__white) / 0.6);
}

.mega__details::before {
	content: '';
	position: absolute;
	top: 0;
	/* top: var(--spacing4); */
	left: 0;
	width: 3rem;
	height: 2px;
	background-color: rgba(0,0,0,0.3);
}

.mega__contact {
	display: flex;
	flex-direction: column;
}

.mega__contact > a {
	font-size: var(--size__h4);
}













/* Ko je meni odprt, je Prijava že v mega meniju (mega__quicklinks), zato jo v glavi skrijemo. */
body.menu .header .b--prijava {
	display: none;
}

.nav--sec {
	margin-top: var(--spacing6);
	font-weight: var(--weight__normal);
	color: hsla(var(--hslColor__white) / 0.6);
}

	.nav--sec a {
		text-decoration-thickness: 1px;
	}


.nav--pravne {
	color: var(--color__white);
}

	.mega .nav--pravne ul {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: felx-start;
		flex-wrap: wrap;
		gap: 0.4em 1em;
		
		margin-top: 1em;
		margin-bottom: 0.2em; /* da se vidi hover črta */
		font-size: var(--size__body--smallest);
		font-style: italic;
	}
	
	.mega .nav--pravne a {
		text-decoration-thickness: 1px;
	}



.alert {
	border-radius: var(--borderRadius1);
}

.alert a:not(.b) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

	.alert a:not(.b):hover {
		color: var(--color__white);
	}
	
.alert--secondary {
	/* background-color: var(--color__silver); */
	color: var(--color__black);
}

.alert--info {
}

.alert--success {
}

.alert--warning {
}

.alert--danger {
	/* background-color: hsl(var(--hslColor__danger)); */
}




.footer {
	--theme__padBlockEnd: var(--spacing4);
}

.footer__contacts {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing6);
	
	padding-top: var(--spacing8);
	padding-bottom: var(--spacing6);

	/*
	border-bottom-left-radius: var(--borderRadius2);
	border-bottom-right-radius: var(--borderRadius2);
	*/
}

	.footer__contacts .b {
	}

.footer__contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing1);
}

.footer__contact a {
	display: flex;
	align-items: center;
	gap: var(--spacing4);
}


	.footer__contact a span {
		font-size: var(--size__h3);
	}

	.footer__contact a .b {
		flex: 0 0 auto;
	}

.sm {
	display: flex;
	align-items: center;
	gap: var(--spacing2); 
}

.footer__sm {
	gap: var(--gridGap);
	
	padding-top: var(--spacing6);
	
	border-top: 1px solid var(--color__green--dark);
}

.footer__notes {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gridGap);
}

.copyright {
	font-size: var(--size__body--smallest);
	text-align: center;
}

.language {
	display: flex;
	gap: var(--spacing3); 
}






@layer theme {
	/* The base theme structure is initialized with spacing parameters. */
	.theme {
		background-color: var(--theme__bg, transparent);
		color: var(--theme__text);
	}
	
	.theme--padB {
		padding-block-start: var(--theme__padBlockStart);
		padding-block-end: var(--theme__padBlockEnd);
	}
	
	.theme--padB.theme--padBsmall {
		--theme__padBlockStart: var(--spacing6);
		--theme__padBlockEnd: var(--spacing6);
	}
	
		.theme--padBsmall + .theme--padB:not(.theme--padBsmall) {
			padding-block-start: var(--theme__padBlockStart);
		}
	
		.theme--white + .theme--white {
			padding-top: 0;
		}
		
		.theme--white + section.theme--overFooter {
			padding-top: 0;
		}
	
	.theme--overFooter:last-child {
		padding-bottom: 0;
		padding-top: var(--theme__padBlockStart);
	}

	main:has(> .theme--overFooter:last-child) ~ footer {
		padding-top: calc(var(--theme__padBlockStart) * 2);
		margin-top: calc(var(--theme__padBlockStart) * -1);
	}

	
	.theme--padI {
		padding-inline: var(--theme__padInline);
	}
	
	.theme--first {
		padding-block-start: var(--headerOffset);
	}

	/* =========================================
	   COLOR THEMES
	   ========================================= */
	
	.theme--white {
		--theme__bg: var(--color__white);
		--theme__text: var(--color__black);
		
		background-color: var(--theme__bg);
		color: var(--theme__text);
	}
			
	.theme--green {
		--theme__bg: var(--color__green);
		--theme__text: var(--color__white);
	}
	
		body.menu .header .b--primary, 
		.theme--green .b--primary {
			--b__bg: var(--color__white);
			--b__border: var(--color__white);
			--b__text: var(--color__green);
			--b__iconbg: var(--color__green);
			--b__icon: var(--color__white);
		}
	
			body.menu .header .b--primary:hover, 
			.theme--green .b--primary:hover {
				--b__bg: var(--color__green);
				--b__border: var(--color__white);
				--b__text: var(--color__white);
				--b__iconbg: var(--color__white);
				--b__icon: var(--color__green);
			}
			
		.theme--green .b--secondary {
			--b__bg: var(--color__green);
			--b__border: var(--color__white);
			--b__text: var(--color__white);
			--b__iconbg: var(--color__white);
			--b__icon: var(--color__green);
		}
		
			.theme--green .b--secondary:hover {
				--b__bg: var(--color__white);
				--b__border: var(--color__white);
				--b__iconbg: var(--color__green);
				--b__text: var(--color__green);
				--b__icon: var(--color__white);
			}
	
	
	.theme--silver {
		--theme__bg: var(--color__silver--light);
		--theme__text: var(--color__black);
	}
	
	.theme--black {
		--theme__bg: var(--color__black);
		--theme__text: var(--color__white);
	}
	
		.theme--black .b--secondary {
			--b__bg: var(--color__white);
			--b__border: var(--color__white);
			--b__text: var(--color__green);
			--b__iconbg: var(--color__green);
			--b__icon: var(--color__white);
		}
		
			.theme--black .b--secondary:hover {
				--b__bg: var(--color__green);
				--b__border: var(--color__green);
				--b__text: var(--color__white);
				--b__iconbg: var(--color__white);
				--b__icon: var(--color__green);
			}
	
	.theme--image {
		color: var(--color__white);
		background-color: transparent;
	}
	
			.theme--image .b--primary:hover {
				--b__bg: var(--color__white);
				--b__border: var(--color__green);
				--b__text: var(--color__green);
				--b__iconbg: var(--color__green);
				--b__icon: var(--color__white);
			}
}


.logo--white path {
	fill: #fff;
}




.swiper-navigation .swiper-prev svg {
	transform: rotate(180deg);
}

.swiper-pagination, 
.swiper {
	--swiper-pagination-bottom: 0;
	--swiper-pagination-bullet-horizontal-gap: var(--spacing1);
	--swiper-pagination-color: var(--color__gray);
	--swiper-pagination-bullet-inactive-color: var(--swiper-pagination-color);
	--swiper-pagination-bullet-opacity: 1;
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-bullet-width: 0.6em;
	--swiper-pagination-bullet-height: var(--swiper-pagination-bullet-width);
	--swiper-pagination-bullet-border-radius: calc(var(--swiper-pagination-bullet-width) / 2); 
}

.swiper:has(> .swiper-pagination-bullets) {
	padding-bottom: var(--spacing8);
}

.swiper-pagination-bullet {
	transition: 
		color .3s,
		width .3s;
}

.swiper-pagination-bullet-active {
	--swiper-pagination-bullet-width: 1.6em;
}





@layer widgets {
	.wRunEntry {
		position: relative;
		max-width: var(--cardSize);
		color: var(--color__white);
		aspect-ratio: 60 /66;
		
		
		border-radius: var(--borderRadius1);
		overflow: hidden;
	}
	
	.wRunEntry h3 {
		
	}
	
	.wRunEntry__distance {
		margin-top: var(--spacing3);
		font-weight: var(--weight__bold);
	}

	.wRunEntry__priceLabel,
	.wRunEntry__price {
		font-size: var(--size__body--smallest);
	}

	.wRunEntry__priceLabel {
		text-transform: uppercase;
	}

	.wRunEntry__price {
		margin-bottom: var(--spacing4);
	}

		.wRunEntry__price small {
			font-size: inherit;
		}


	.wRunEntry__cover {
		position: relative;
		height: 100%;
	}

	.wRunEntry__cover::after {
		content: '';
		position: absolute;
		inset: 0;

		background-color: hsla(var(--hslColor__green) / 0.45);
		opacity: 0;
		transition: opacity 0.4s ease-in-out;
	}

	.wRunEntry:hover .wRunEntry__cover::after {
		opacity: 1;
	}
	
	.wRunEntry__cover img {
		object-fit: cover;
		width: 100%;
		height: 100%;
		
		filter: brightness(90%);
	}
	
	.wRunEntry__info {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		
		z-index: 10;
		
		/* https://colorzilla.com/gradient-editor/#006148+0,006148+100&0+0,1+100 */
		background: linear-gradient(to bottom, hsla(var(--hslColor__green) / 0) 0%, hsla(var(--hslColor__green) / 1) 100%); 
	}
	
	
	.wRunEntry__info1 {
		padding: var(--innerCardPadding);
	}
	
	.wRunEntry__info2 {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.4s ease-in-out;
	}
	
	.wRunEntry__info2hidden {
		overflow: hidden;
	}
	
	.wRunEntry__info2content {
		padding: 0 var(--innerCardPadding) var(--innerCardPadding) var(--innerCardPadding);
	}
	
	.wRunEntry:hover .wRunEntry__info2 {
		grid-template-rows: 1fr;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	.wNewsEntry {
		display: flex;
		flex-direction: column;
		gap: var(--spacing3);
		
		container-type: inline-size;
		container-name: cnt__newsentry;
		
		border-radius: var(--borderRadius1);
		box-shadow: var(--shadow1);
		background-color: var(--color__white);
	}
	
	.wNewsEntry h2, 
	.wNewsEntry h3 {
		flex: 1 0 auto;
		padding-left: var(--innerCardPadding);
		padding-right: var(--innerCardPadding);
		font-size: var(--size__h3);
	}
	
	.wNewsEntry__cover {
		aspect-ratio: 16 / 9;
		width: 100%; 
		height: auto;
		flex: 0 0 auto;
		min-height: 0;
	}
	
	.wNewsEntry__cover img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		
		border-radius: var(--borderRadius1);
	}
	
	.wNewsEntry__details {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: var(--gridGap);
		
		padding-right: var(--innerCardPadding);
		padding-bottom: var(--innerCardPadding);
		padding-left: var(--innerCardPadding);
	}
	
	.wNewsEntry__sponsored {
		order: 1;
		width: 100%;
	}
	
	.wNewsEntry__details time {
		order: 2;
		font-weight: var(--weight__medium);
	}
	
	.wNewsEntry__details .b {
		order: 3;
		margin-left: auto;
	}
	
	.wNewsEntry__sponsored {
		color: var(--color__gray);
		text-transform: uppercase;
		font-size: var(--size__body--small);
		font-weight: var(--weight__medium);
	}
	
	@container cnt__newsentry (min-width: 30em) {
		.wNewsEntry__cover {
			aspect-ratio: 16 / 6;
		}
		
		.wNewsEntry__sponsored {
			order: 2;
			width: auto;
		}
		
		.wNewsEntry__details time {
			order: 1;
		}
	}
	
	
	
	
	
	.wShare {
		display: flex;
		gap: var(--spacing2);
		align-items: center;
	}
	
	.wShare h4 {
		font-size: var(--size__body--small);
		color: var(--color__gray);
	}
	
	.wShare__fallbacks {
		display: flex;
		gap: var(--spacing2);
		align-items: center;
	}
	
	
	
	
	.defHeader {
		margin-bottom: var(--spacing4);
		padding-top: var(--spacing6);
	}
	
	.defHeader .ws__content {
		
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	
	.defHeader__info {
	}
	
	.defHeader__info h1:not(:only-child) {
		margin-bottom: var(--spacing3);
	}
	
	.defHeader__info:has(.defHeader__back) {
		display: flex;
		align-items: flex-start;
		gap: var(--spacing6);
	}

	/* Na mobilnikih je gumb nazaj nad naslovom, da se glava ne razširi čez rob zaslona. */
	@media (max-width: 47.99em) {
		.defHeader__info:has(.defHeader__back) {
			flex-direction: column;
			gap: var(--spacing4);
		}
		
		.defHeader .ws__content {
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			gap: var(--spacing4);
		}
	}

	/* Računalnik: gumb nazaj je v prvih dveh stolpcih mreže, naslov se začne v 3. stolpcu - tam kot besedilo vsebine. */
	@media (min-width: 65em) {
		.defHeader .ws__content:has(> .defHeader__info > .defHeader__back) {
			display: grid;
			grid-template-columns: subgrid;
		}

		.defHeader__info:has(> .defHeader__back) {
			grid-column: 1 / -1;
			display: grid;
			grid-template-columns: subgrid;
			gap: 0 normal; /* razmik med stolpci kot v mreži strani */
			align-items: start;
		}

		.defHeader__back {
			grid-column: 1 / span 2;
		}

		/* gumb ne sme biti širši od obeh stolpcev (manjši računalniški zasloni) */
		.defHeader__back .b {
			min-width: min(8em, 100%);
			padding-inline: var(--spacing3);
		}

		.defHeader__back ~ * {
			grid-column: 3 / -1;
		}
	}
}







@media (min-width: 65em) {
	:root {
		font-size: 30px;
		
		--lh__h1: 1.2;
		--lh__h2: 1.2;
		--lh__h3: 1.2;
		--lh__h4: 1.2;
		--lh__h5: 1.2;
		--lh__body--big: 1.5;
		--lh__body: 1.6;
		--lh__body--small: 1.4;
		
		/* Gumbi: pisava ≈ 24 px, višina ≈ 60 px (2.5em). */
		--size__buttons: 0.8rem;
		--b__height: 2.5em;

		--innerCardPadding: calc(var(--spacer) * 1.3);
		--theme__padBlockStart: var(--spacing9);
		--theme__padBlockEnd: var(--spacing9);  
	}
	
	/* mts logo brez radenske
	.header__logo {
		width: 8em;
	}
	*/
	
	.header__logo {
		width: 15em;
	}
	
	/* Desni del glave: Prijava sledi gumbom, jeziki in MENU ≈ 21 px. */
	.header__more {
		gap: var(--spacing5);
	}

	#btnMenu {
		font-size: var(--size__body--smallest);
	}

	.header .ws__content {
		padding-top: var(--spacing4);
		padding-bottom: var(--spacing4);
	}
	
	
	.mega .ws__content {
		display: grid;
		grid-template-columns: subgrid;
		padding-bottom: 0;
		
		overflow: auto;
		max-height: 75vh;
	}
	
	.footer__contact a span {
		font-size: var(--size__h1);
	}

	/* copyright bližje ikonam: razmik med elementi noge je --spacing6, tu ostane --spacing4 */
	.footer__notes {
		margin-top: calc(var(--spacing4) - var(--spacing6));
	}
	
	.mega .ws__content {
		display: grid;
		grid-template-columns: subgrid;
		grid-template-rows: 1fr 1fr;
		gap: var(--spacing2);
	}
	
	.nav--sec {
		margin-top: var(--spacing4);
	}
	
	.mega__quicklinks {
		grid-column: 8 / -1;
		grid-row: 1;
		justify-content: start;
	}
	
	/* Sekundarna navigacija je takoj pod glavno (ne na dnu stolpca). */
	.mega__nav {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;

		grid-column: 3 / 7;
		grid-row: 1 / -1;
	}

	/* V odprtem meniju na velikih zaslonih logotipa ni. */
	body.menu .header .header__logo,
	body.menu .header--floating.header--noLogo .header__logo {
		visibility: hidden;
		pointer-events: none;
	}
	
	.mega__info {
		grid-column: 8 / -1;
		grid-row: 2;
		justify-content: end;
	}
	
}

@media (min-width: 90em) {
}

@media (min-width: 100em) {
	
}

@media (min-width: 116em) {
	
}