/*
	Pogosta vprašanja
	Levo: filter po kategorijah (na manjših zaslonih gumb + panel, ki se odpre od spodaj).
	Desno: iskalnik in vprašanja po kategorijah.
*/

.faq {
	--faq__searchH: 2.2rem;
	--faq__sizeSmall: calc(var(--size__body--smallest) * 1.15);

	display: grid;
	gap: var(--spacing5);
}

.faq [hidden] {
	display: none !important;
}


.faq [id] {
	scroll-margin-top: var(--spacing10);
}



/* FILTER */

.faq__filterHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing4);
	margin-bottom: var(--spacing4);
}

.faq__label {
	display: flex;
	align-items: center;
	min-height: var(--faq__searchH);

	font-size: var(--faq__sizeSmall);
	font-weight: var(--weight__medium);
	font-style: italic;
}

.faq__filterList a {
	display: block;
	padding: 0.2rem 0;

	font-size: var(--faq__sizeSmall);
	font-weight: var(--weight__medium);
	font-style: italic;
	line-height: var(--lh__body--small);
	color: var(--color__green);
	text-decoration: none;
}

	.faq__filterList a:hover {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.3rem;
	}

.faq__filterList a:focus-visible,
.faq__close:focus-visible,
.faq__item summary:focus-visible {
	outline: 3px solid var(--color__select);
	outline-offset: 2px;
}

.faq__close {
	flex: 0 0 auto;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0.6rem;

	border: 0;
	background-color: transparent;
	color: var(--color__green);
	cursor: pointer;
}

.faq__close svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.faq__backdrop {
	display: none;
}



/* ISKALNIK */

.faq__search input {
	display: block;
	width: 100%;
	height: var(--faq__searchH);
	padding: 0 var(--spacing5);

	font-size: max(16px, var(--faq__sizeSmall));
	border: 1px solid var(--color__gray);
	border-radius: var(--borderRadius1);
	background-color: var(--color__white);
	color: var(--color__black);
	-webkit-appearance: none;
	appearance: none;
}

.faq__search input::placeholder {
	font-style: italic;
	color: var(--color__black);
	opacity: 0.6;
}

.faq__search input:focus-visible {
	outline: 3px solid var(--color__select);
	outline-offset: 2px;
	border-color: var(--color__select);
}

.faq__empty {
	margin-top: var(--spacing5);
	font-style: italic;
	color: var(--color__gray);
}



/* VPRAŠANJA */

.faq__groups {
	margin-top: var(--spacing5);
}

.faq__group + .faq__group {
	margin-top: var(--spacing4);
}

.faq__title {
	margin-bottom: var(--spacing3);

	font-size: var(--faq__sizeSmall);
	font-weight: var(--weight__bold);
	line-height: var(--lh__body--small);
	letter-spacing: normal;
}

.faq__title:focus {
	outline: none;
}

.faq__item {
	border-bottom: 1px solid var(--color__silver--light);
	transition: border-color .3s;
}

	.faq__item[open] {
		border-bottom-color: var(--color__silver);
	}

	.faq__item:hover {
		border-bottom-color: var(--color__green);
	}

.faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing4);
	padding: var(--spacing2) 0;

	font-size: var(--size__body--big);
	color: var(--color__green);
	list-style: none;
	cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__item summary::after {
	flex: 0 0 auto;
	width: 0.4em;
	height: 0.4em;
	margin-right: 0.3em;

	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: 0.4;
	transform: translateY(-0.12em) rotate(45deg);
	transition: transform .3s, opacity .3s;
	content: "";
}

	.faq__item summary:hover::after,
	.faq__item summary:focus-visible::after,
	.faq__item[open] summary::after {
		opacity: 1;
	}

.faq__item[open] summary::after {
	transform: translateY(0.12em) rotate(-135deg);
}

.faq__answer {
	padding: 0 var(--spacing6) var(--spacing4) 0;

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

.faq__answer a:not(.b) {
	color: var(--color__green);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: var(--weight__medium);
}

	.faq__answer a:not(.b):hover {
		text-decoration: none;
	}



/* Brez JavaScripta (gumb, zapiranje in iskalnik ne delujejo) se prikažejo samo kategorije in vprašanja. */
@media (scripting: none) {
	.faq__toggle,
	.faq__close,
	.faq__search {
		display: none;
	}
}



/* MANJŠI ZASLONI: filter je gumb, kategorije se odprejo v panelu od spodaj */
@media (max-width: 47.99em) {
	body.faqFilterOpen {
		overflow: hidden;
	}

	.faq__filter {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: var(--zindex__modal);

		max-height: 80svh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--spacing3) var(--spacing5) var(--spacing6);

		background-color: var(--color__white);
		border-radius: var(--borderRadius2) var(--borderRadius2) 0 0;
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);

		transform: translateY(100%);
		visibility: hidden;
		transition:
			transform .35s ease,
			visibility 0s linear .35s;
	}

	.faq--filterOpen .faq__filter {
		transform: translateY(0);
		visibility: visible;
		transition-delay: 0s;
	}

	.faq__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: var(--zindex__modalBackdrop);

		background-color: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transition:
			opacity .35s ease,
			visibility 0s linear .35s;
	}

	.faq--filterOpen .faq__backdrop {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}

	.faq__filterList a {
		padding: var(--spacing2) 0;
		font-size: var(--size__body--small);
	}

	.faq__label {
		font-size: var(--size__body--small);
	}
}

@media (max-width: 47.99em) and (scripting: none) {
	.faq__filter {
		position: static;
		max-height: none;
		padding: 0;
		border-radius: 0;
		box-shadow: none;
		transform: none;
		visibility: visible;
	}
}

@media (max-width: 47.99em) and (prefers-reduced-motion: reduce) {
	.faq__filter,
	.faq__backdrop {
		transition: none;
	}
}



/* VEČJI ZASLONI: sidebar (4 stolpci ≈ 1/3) + vsebina (2/3) v mreži strani */
@media (min-width: 48em) {
	.faq {
		grid-template-columns: subgrid;
		align-items: start;
	}

	.faq__side {
		grid-column: 1 / span 4;
		position: sticky;
		top: calc(var(--spacing6) + var(--headerOverlap));
		transition: top var(--headerTransition);
	}

	.faq__main {
		grid-column: 5 / -1;
	}

	.faq__toggle,
	.faq__close {
		display: none;
	}

	.faq__groups {
		margin-top: var(--spacing6);
	}
}

@media (min-width: 65em) {
	.faq__main {
		grid-column: 5 / span 7;
	}
}