/* =========================================================
   MFTZF — FAQ
   EasyDNNnews / Generic
   Pure HTML + CSS
   ========================================================= */

.mft-faq {
	--faq-primary: var(--skin-color-brand);
	--faq-primary-dark: var(--skin-color-brand-strong);
	--faq-accent: var(--skin-color-accent);

	--faq-text: var(--skin-color-text);
	--faq-muted: var(--skin-color-text-soft);

	--faq-border: var(--skin-color-border);
	--faq-surface: var(--skin-color-surface);
	--faq-soft: var(--skin-color-surface-muted);

	--faq-radius: var(--skin-radius-lg);

	position: relative;
	padding-block: clamp(2rem, 4vw, 3.5rem);

	color: var(--faq-text);

	direction: rtl;
	isolation: isolate;
}


/* ---------------------------------------------------------
   Decorative background
   --------------------------------------------------------- */

.mft-faq::before {
	content: "";

	position: absolute;
	inset-block-start: 7rem;
	inset-inline-end: 2%;

	z-index: -1;

	inline-size: clamp(8rem, 16vw, 15rem);
	aspect-ratio: 1;

	border-radius: 50%;

	background:
		color-mix(
			in srgb,
			var(--faq-primary) 6%,
			transparent
		);

	pointer-events: none;
}


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


/* =========================================================
   Container
   ========================================================= */

.mft-faq__container {
	inline-size: min(100%, 74rem);
	margin-inline: auto;
}


/* =========================================================
   Header
   ========================================================= */

.mft-faq__header {
	max-inline-size: 52rem;

	margin-inline: auto;
	margin-block-end: clamp(1.75rem, 4vw, 2.75rem);

	text-align: center;
}


.mft-faq__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-block-size: 2rem;

	margin-block-end: .8rem;
	padding: .3rem .85rem;

	border:
		1px solid
		color-mix(
			in srgb,
			var(--faq-primary) 20%,
			transparent
		);

	border-radius: var(--skin-radius-pill, 999rem);

	background:
		color-mix(
			in srgb,
			var(--faq-primary) 7%,
			var(--faq-surface)
		);

	color: var(--faq-primary);

	font-size: .82rem;
	font-weight: 800;
	line-height: 1.5;
}


.mft-faq__title {
	margin: 0;

	color: var(--faq-text);

	font: inherit;
	font-size: clamp(1.45rem, 3vw, 2.1rem);
	font-weight: 900;
	line-height: 1.55;

	text-wrap: balance;
}


.mft-faq__title::after {
	content: "";

	display: block;

	inline-size: 3.5rem;
	block-size: .22rem;

	margin: .9rem auto 0;

	border-radius: var(--skin-radius-pill, 999rem);

	background:
		linear-gradient(
			90deg,
			var(--faq-primary),
			var(--faq-accent)
		);
}


.mft-faq__intro {
	max-inline-size: 44rem;

	margin: 1rem auto 0;

	color: var(--faq-muted);

	font-size: clamp(.9rem, 1.6vw, 1rem);
	line-height: 2;

	text-wrap: pretty;
}


/* =========================================================
   FAQ list
   ========================================================= */

.mft-faq__list {
	display: grid;
	gap: .8rem;

	max-inline-size: 66rem;

	margin-inline: auto;

	counter-reset: mft-faq;
}


/* =========================================================
   Item
   ========================================================= */

.mft-faq__item {
	counter-increment: mft-faq;

	overflow: clip;

	border: 1px solid var(--faq-border);
	border-radius: var(--faq-radius);

	background: var(--faq-surface);

	box-shadow:
		0 .3rem 1.3rem rgba(65, 31, 80, .045);

	transition:
		border-color .25s ease,
		box-shadow .25s ease,
		transform .25s ease,
		background-color .25s ease;
}


@media (hover: hover) and (pointer: fine) {

	.mft-faq__item:hover {
		border-color:
			color-mix(
				in srgb,
				var(--faq-primary) 28%,
				var(--faq-border)
			);

		box-shadow:
			0 .65rem 1.8rem rgba(65, 31, 80, .08);

		transform: translateY(-1px);
	}
}


.mft-faq__item[open] {
	border-color:
		color-mix(
			in srgb,
			var(--faq-primary) 32%,
			var(--faq-border)
		);

	background:
		linear-gradient(
			180deg,
			color-mix(
				in srgb,
				var(--faq-primary) 4%,
				var(--faq-surface)
			),
			var(--faq-surface) 42%
		);

	box-shadow:
		0 .8rem 2rem rgba(65, 31, 80, .09);
}


/* =========================================================
   EasyDNN admin actions
   ========================================================= */

.mft-faq__list > .edn_adminActions {
	position: relative;
	z-index: 4;

	margin-block-end: -.45rem;
}


/* =========================================================
   Question
   ========================================================= */

.mft-faq__question {
	display: grid;

	grid-template-columns:
		2.35rem
		minmax(0, 1fr)
		1.75rem;

	align-items: center;

	gap: .9rem;

	min-block-size: 4.8rem;

	padding: .85rem 1.1rem;

	cursor: pointer;
	list-style: none;
	user-select: none;
}


.mft-faq__question::-webkit-details-marker {
	display: none;
}


.mft-faq__question::marker {
	content: "";
}


.mft-faq__question h3 {
	margin: 0;

	color: var(--faq-text);

	font: inherit;
	font-size: clamp(.98rem, 1.8vw, 1.1rem);
	font-weight: 800;
	line-height: 1.8;

	transition: color .25s ease;
}


.mft-faq__item[open] .mft-faq__question h3 {
	color: var(--faq-primary-dark);
}


/* =========================================================
   Automatic item number
   ========================================================= */

.mft-faq__index {
	display: grid;
	place-items: center;

	inline-size: 2.35rem;
	aspect-ratio: 1;

	border-radius: .8rem;

	background: var(--faq-soft);
	color: var(--faq-primary);

	font-size: .72rem;
	font-weight: 900;
	line-height: 1;

	transition:
		color .25s ease,
		background-color .25s ease,
		transform .25s ease;
}


.mft-faq__index::before {
	content: counter(mft-faq, decimal-leading-zero);
}


.mft-faq__item[open] .mft-faq__index {
	background: var(--faq-primary);
	color: #fff;

	transform: scale(1.03);
}


/* =========================================================
   Plus / minus
   ========================================================= */

.mft-faq__toggle {
	position: relative;

	display: grid;
	place-items: center;

	inline-size: 1.75rem;
	aspect-ratio: 1;

	border-radius: 50%;

	background:
		color-mix(
			in srgb,
			var(--faq-primary) 8%,
			var(--faq-surface)
		);

	transition:
		background-color .25s ease,
		transform .35s cubic-bezier(.2, .8, .2, 1);
}


.mft-faq__toggle::before,
.mft-faq__toggle::after {
	content: "";

	position: absolute;

	inline-size: .75rem;
	block-size: .11rem;

	border-radius: var(--skin-radius-pill, 999rem);

	background: var(--faq-primary);

	transition:
		transform .35s cubic-bezier(.2, .8, .2, 1);
}


.mft-faq__toggle::after {
	transform: rotate(90deg);
}


.mft-faq__item[open] .mft-faq__toggle {
	background: var(--faq-primary);

	transform: rotate(180deg);
}


.mft-faq__item[open] .mft-faq__toggle::before,
.mft-faq__item[open] .mft-faq__toggle::after {
	background: #fff;
}


.mft-faq__item[open] .mft-faq__toggle::after {
	transform: rotate(0);
}


/* =========================================================
   Answer animation
   ========================================================= */

.mft-faq__answer-wrap {
	display: grid;

	grid-template-rows: 0fr;

	opacity: 0;

	transition:
		grid-template-rows .45s cubic-bezier(.2, .8, .2, 1),
		opacity .3s ease;
}


.mft-faq__item[open] .mft-faq__answer-wrap {
	grid-template-rows: 1fr;
	opacity: 1;
}


.mft-faq__answer {
	min-block-size: 0;

	overflow: hidden;

	margin-inline:
		4.35rem
		1.1rem;

	border-block-start: 1px solid transparent;
}


.mft-faq__item[open] .mft-faq__answer {
	border-block-start-color:
		color-mix(
			in srgb,
			var(--faq-primary) 11%,
			transparent
		);
}


.mft-faq__answer > div {
	padding: 1rem .15rem 1.35rem;
}


/* =========================================================
   EasyDNN Summary normalization
   ========================================================= */

.mft-faq__answer p {
	margin: 0;

	color: var(--faq-muted);

	font-size: .95rem;
	line-height: 2.15;

	text-align: justify;
	text-align-last: start;
}


.mft-faq__answer p + p {
	margin-block-start: .85rem;
}


.mft-faq__answer ul,
.mft-faq__answer ol {
	margin: .75rem 0;
	padding-inline-start: 1.4rem;

	color: var(--faq-muted);

	line-height: 2;
}


.mft-faq__answer a {
	color: var(--faq-primary);
	font-weight: 700;
	text-decoration-thickness: .08em;
	text-underline-offset: .2em;
}


.mft-faq__answer strong {
	color: var(--faq-text);
}


/* =========================================================
   Footer
   ========================================================= */

.mft-faq__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 1rem 2rem;

	max-inline-size: 66rem;

	margin: 1.5rem auto 0;
	padding: 1.1rem 1.25rem;

	border: 1px solid var(--faq-border);
	border-radius: var(--skin-radius-lg);

	background: var(--faq-soft);
}


.mft-faq__footer > div {
	min-inline-size: 0;
}


.mft-faq__footer strong {
	display: block;

	color: var(--faq-text);

	font-size: .9rem;
	font-weight: 800;
	line-height: 1.7;
}


.mft-faq__footer p {
	margin: .2rem 0 0;

	color: var(--faq-muted);

	font-size: .8rem;
	line-height: 1.85;
}


.mft-faq__contact {
	flex: 0 0 auto;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: .55rem;

	min-block-size: 2.85rem;

	padding: .65rem 1.1rem;

	border: 1px solid var(--faq-primary);
	border-radius: var(--skin-radius-md, .85rem);

	background: var(--faq-primary);
	color: #fff !important;

	font-size: .85rem;
	font-weight: 800;
	line-height: 1.5;

	text-decoration: none;

	box-shadow:
		0 .45rem 1.1rem
		color-mix(
			in srgb,
			var(--faq-primary) 20%,
			transparent
		);

	transition:
		background-color .25s ease,
		border-color .25s ease,
		box-shadow .25s ease,
		transform .25s ease;
}


.mft-faq__contact svg {
	inline-size: 1rem;
	block-size: 1rem;

	flex: 0 0 auto;
}


@media (hover: hover) and (pointer: fine) {

	.mft-faq__contact:hover {
		border-color: var(--faq-primary-dark);
		background: var(--faq-primary-dark);

		color: #fff !important;

		box-shadow:
			0 .7rem 1.5rem
			color-mix(
				in srgb,
				var(--faq-primary) 25%,
				transparent
			);

		transform: translateY(-2px);
	}
}


/* =========================================================
   Accessibility
   ========================================================= */

.mft-faq__question:focus-visible,
.mft-faq__contact:focus-visible {
	outline:
		.18rem solid
		color-mix(
			in srgb,
			var(--faq-accent) 85%,
			#fff
		);

	outline-offset: .2rem;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 48rem) {

	.mft-faq {
		padding-block: 2.5rem;
	}


	.mft-faq__question {
		grid-template-columns:
			2.1rem
			minmax(0, 1fr)
			1.65rem;

		min-block-size: 4.45rem;

		padding: .75rem .85rem;
	}


	.mft-faq__index {
		inline-size: 2.1rem;
		border-radius: .7rem;
	}


	.mft-faq__answer {
		margin-inline:
			3.8rem
			.85rem;
	}


	.mft-faq__footer {
		align-items: flex-start;
	}
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 36rem) {

	.mft-faq__header {
		margin-block-end: 1.5rem;

		text-align: start;
	}


	.mft-faq__title::after {
		margin-inline: 0;
	}


	.mft-faq__intro {
		margin-inline: 0;
	}


	.mft-faq__question {
		grid-template-columns:
			minmax(0, 1fr)
			1.65rem;

		gap: .7rem;

		min-block-size: 4.15rem;

		padding: .75rem .85rem;
	}


	.mft-faq__index {
		display: none;
	}


	.mft-faq__question h3 {
		font-size: .95rem;
		line-height: 1.75;
	}


	.mft-faq__answer {
		margin-inline: .85rem;
	}


	.mft-faq__answer > div {
		padding-block-start: .85rem;
	}


	.mft-faq__answer p {
		font-size: .9rem;
		line-height: 2;

		text-align: start;
	}


	.mft-faq__footer {
		flex-direction: column;
		align-items: stretch;

		padding: 1rem;
	}


	.mft-faq__contact {
		inline-size: 100%;
	}
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.mft-faq *,
	.mft-faq *::before,
	.mft-faq *::after {
		scroll-behavior: auto !important;

		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}


/* =========================================================
   Print
   ========================================================= */

@media print {

	.mft-faq {
		padding: 1rem 0;
	}


	.mft-faq::before,
	.mft-faq__footer {
		display: none;
	}


	.mft-faq__item {
		break-inside: avoid;

		box-shadow: none;
	}


	.mft-faq__answer-wrap {
		grid-template-rows: 1fr !important;

		opacity: 1 !important;
	}
}