/* Shared by the coded pages (service pages, enquiry page): tokens, reset, FAQ. Figma "advokat". */

.advp {
	--advp-primary: #897cfc;
	--advp-primary-soft: rgba(127, 113, 240, 0.05);
	--advp-primary-tint: rgba(127, 113, 240, 0.1);
	--advp-text-100: #080808;
	--advp-text-200: #4d4d4d;
	--advp-text-300: #5e5e5e;
	--advp-black: #1b1b1b;
	--advp-border: #e0e0e0;
	--advp-base: #fafafa;
	--advp-faq-bg: #f8f8f8;
	--advp-white: #fff;
	--advp-font: "Poppins", "Noto Sans", sans-serif;
	--advp-gutter: 96px;
	--advp-max: 1280px;
	--advp-anchor-offset: 120px;
	--advp-header: 0px; /* the Elementor header sits in the page flow (it used to overlay the content at 130px) */

	font-family: var(--advp-font);
	color: var(--advp-text-200);
	background: var(--advp-white);
	overflow-x: clip;
}

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

.advp h1,
.advp h2,
.advp h3,
.advp h4,
.advp p,
.advp ul,
.advp ol {
	margin: 0;
	padding: 0;
	font-family: inherit;
	letter-spacing: inherit;
	text-transform: none;
}

.advp ul,
.advp ol {
	list-style: none;
}

.advp img {
	max-width: none;
	display: block;
}

.advp a {
	text-decoration: none;
}

/* ---------------------------------------------------------------- FAQ */

.advp-faq {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 108px var(--advp-gutter);
	background: var(--advp-faq-bg);
	scroll-margin-top: var(--advp-anchor-offset);
}

.advp .advp-faq__title {
	font-size: 42px;
	font-weight: 500;
	line-height: 46px;
	text-align: center;
	color: var(--advp-text-100);
}

.advp-faq__list {
	width: 800px;
	max-width: 100%;
}

.advp-faq__item {
	--advp-faq-speed: 0.25s;
	border-bottom: 1px solid var(--advp-border);
	transition: background-color var(--advp-faq-speed) ease;
}

/* "Open" look. While an answer slides shut it keeps [open] but gets .is-closing, so the look switches back at once. */
.advp-faq__item[open]:not(.is-closing) {
	background: var(--advp-primary-tint);
}

.advp-faq__item summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 16px;
	cursor: pointer;
	list-style: none;
}

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

.advp-faq__item summary:focus-visible {
	outline: 2px solid var(--advp-primary);
	outline-offset: -2px;
}

.advp-faq__num {
	display: flex;
	flex: 0 0 24px;
	align-items: center;
	justify-content: center;
	height: 24px;
	font-family: "Inter", var(--advp-font);
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.3px;
	color: var(--advp-text-100);
	transition: color var(--advp-faq-speed) ease;
}

.advp-faq__q {
	flex: 1 1 0;
	min-width: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.3px;
	color: var(--advp-text-100);
	transition: color var(--advp-faq-speed) ease;
}

/* Plus and minus sit on top of each other and cross-fade with a quarter turn. */
.advp-faq__icon {
	position: relative;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--advp-base);
	transition: background-color var(--advp-faq-speed) ease;
}

.advp .advp-faq__icon img {
	position: absolute;
	top: 6px;
	left: 6px;
	transition: opacity var(--advp-faq-speed) ease, transform var(--advp-faq-speed) ease;
}

.advp .advp-faq__minus {
	opacity: 0;
	transform: rotate(-90deg);
}

.advp-faq__item[open]:not(.is-closing) .advp-faq__plus {
	opacity: 0;
	transform: rotate(90deg);
}

.advp-faq__item[open]:not(.is-closing) .advp-faq__minus {
	opacity: 1;
	transform: none;
}

.advp-faq__item[open]:not(.is-closing) .advp-faq__num,
.advp-faq__item[open]:not(.is-closing) .advp-faq__q {
	color: var(--advp-primary);
}

.advp-faq__item[open]:not(.is-closing) .advp-faq__q {
	font-weight: 400;
}

.advp-faq__item[open]:not(.is-closing) .advp-faq__icon {
	background: var(--advp-primary);
}

/* Height is animated on .advp-faq__a (practice.js); padding lives on the inner box so it can reach 0. */
.advp-faq__a {
	overflow: hidden;
}

.advp-faq__a-inner {
	margin-top: -4px; /* 16px between question and answer */
	padding: 0 16px 20px 57px;
	font-size: 16px;
	line-height: 18px;
	letter-spacing: 0.3px;
	color: var(--advp-text-300);
}

.advp .advp-faq__a-inner p + p {
	margin-top: 8px;
}

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 1199px) {
	/* The theme's mobile header (below 1200px) is in the page flow, not over the content. */
	.advp {
		--advp-gutter: 48px;
	}
}

@media (max-width: 767px) {
	.advp {
		--advp-gutter: 16px;
		--advp-anchor-offset: 90px;
	}

	.advp .advp-faq__title {
		font-size: 28px;
		line-height: 32px;
	}

	.advp-faq {
		gap: 28px;
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.advp-faq__item summary {
		gap: 12px;
		padding: 16px 8px;
	}

	.advp-faq__num {
		flex-basis: 20px;
		font-size: 16px;
	}

	.advp-faq__q {
		font-size: 16px;
	}

	.advp-faq__a-inner {
		padding: 0 8px 16px 40px;
		font-size: 15px;
		line-height: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.advp *,
	.advp *::before,
	.advp *::after {
		transition: none !important;
	}
}