/* =========================================================
   BLUMI
   FAQ Accordion
   ========================================================= */


.blumi-faq {

	position: relative;

	left: 50%;

	width: 100vw;

	margin-left: -50vw;

	border-top:
		2px solid
		var(--blumi-lavender);

	border-bottom:
		2px solid
		var(--blumi-lavender);

	background:
		transparent;

	color:
		var(--blumi-cocoa);

}


/* ---------------------------------------------------------
   Item
   --------------------------------------------------------- */

.blumi-faq__item {

	width: 100%;

}


.blumi-faq__item
+ .blumi-faq__item {

	border-top:
		2px solid
		var(--blumi-lavender);

}


/* ---------------------------------------------------------
   Container
   --------------------------------------------------------- */

.blumi-faq__container {

	width:
		min(
			calc(100% - (var(--blumi-gutter) * 2)),
			var(--blumi-container)
		);

	margin:
		0 auto;

}


/* ---------------------------------------------------------
   Trigger
   --------------------------------------------------------- */

.blumi-faq__trigger {
   
	   -webkit-appearance: none;
	   appearance: none;
   
	   display: flex;
   
	   align-items: center;
	   justify-content: space-between;
   
	   gap: 50px;
   
	   width: 100%;
   
	   margin: 0;
   
	   padding:
		   30px 0;
   
	   border: 0;
	   border-radius: 0;
   
	   background: transparent !important;
	   background-color: transparent !important;
	   background-image: none !important;
   
	   box-shadow: none !important;
   
	   color: var(--blumi-cocoa) !important;
   
	   text-align: left;
   
	   cursor: pointer;
   
}

.blumi-faq__trigger:hover,
.blumi-faq__trigger:active,
.blumi-faq__trigger:focus,
.blumi-faq__trigger:focus-visible {

	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;

	color: var(--blumi-cocoa) !important;

	box-shadow: none !important;

}


/* ---------------------------------------------------------
   Question
   --------------------------------------------------------- */

.blumi-faq__question {
   
	   display: block;
   
	   color: var(--blumi-cocoa);
   
	   font-family:
		   var(--blumi-font-primary);
   
	   font-size: 52px;
   
	   font-weight: 600;
   
	   line-height: 1;
   
	   letter-spacing: 0;
   
	   transition:
		   color .3s ease;
   
}




/* ---------------------------------------------------------
   Plus / Minus
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   FAQ Icon
   --------------------------------------------------------- */

.blumi-faq__icon {

	position: relative;

	flex: 0 0 auto;

	display: flex;

	align-items: center;
	justify-content: center;

	color:
		var(--blumi-cocoa);

	transition:
		color .3s ease;

}


.blumi-faq__icon-state {

	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	line-height: 1;

}


.blumi-faq__icon-state svg,
.blumi-faq__icon-state img {

	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;

}


.blumi-faq__icon-state i {

	display: block;

	font-size: 1em;
	line-height: 1;

}


/* Icona minus nascosta quando la voce è chiusa */

.blumi-faq__icon-state--open {

	display: none;

}


/* FAQ aperta: nasconde il plus */

.blumi-faq__item.is-open
.blumi-faq__icon-state--closed {

	display: none;

}


/* FAQ aperta: mostra il minus */

.blumi-faq__item.is-open
.blumi-faq__icon-state--open {

	display: flex;

}


/* Hover / stato aperto */

.blumi-faq__trigger:hover
.blumi-faq__icon,

.blumi-faq__item.is-open
.blumi-faq__icon {

	color:
		var(--blumi-lavender);

}



/* ---------------------------------------------------------
   Answer animation
   --------------------------------------------------------- */

.blumi-faq__panel {

	max-height: 0;

	overflow: hidden;

	opacity: 0;

	transition:
		max-height .5s
			var(--blumi-ease),
		opacity .3s ease;

}


.blumi-faq__item.is-open
.blumi-faq__panel {

	opacity: 1;

}


.blumi-faq__answer {

	padding:
		0 0 42px;

	color:
		var(--blumi-cocoa);

	font-family:
		var(--blumi-font-primary);

	font-size: var(--blumi-body-size);

	font-weight: 400;

	line-height: var(--global--line-height-body);

}


.blumi-faq__answer p {

	margin:
		0 0 18px;

}


.blumi-faq__answer p:last-child {

	margin-bottom: 0;

}


/* ---------------------------------------------------------
   Focus
   --------------------------------------------------------- */

.blumi-faq__trigger:focus {

	background:
		transparent;

}


.blumi-faq__trigger:focus-visible {

	outline:
		2px solid
		var(--blumi-lavender);

	outline-offset:
		-4px;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

	.blumi-faq__trigger {

		padding:
			25px 0;

		gap: 30px;

	}


	.blumi-faq__question {

		font-size: 44px;

	}


	.blumi-faq__answer {

		padding-bottom:
			34px;

	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.blumi-faq {

		border-top-width:
			1.5px;

		border-bottom-width:
			1.5px;

	}


	.blumi-faq__item
	+ .blumi-faq__item {

		border-top-width:
			1.5px;

	}


	.blumi-faq__container {

		width:
			calc(
				100%
				-
				(var(--blumi-gutter) * 2)
			);

	}


	.blumi-faq__trigger {

		align-items:
			flex-start;

		gap:
			20px;

		padding:
			22px 0;

	}


	.blumi-faq__question {

		font-size:
			34px;

		line-height:
			1.04;

	}


	.blumi-faq__icon {

		flex-basis:
			32px;

		width:
			32px;

		height:
			32px;

		margin-top:
			1px;

	}




	.blumi-faq__answer {

		max-width:
			none;

		padding:
			0 0 28px;

		font-size:
			17px;

		line-height:
			1.4;

	}

}


/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

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

	.blumi-faq__panel,
	.blumi-faq__question {

		transition:
			none !important;

	}

}

/* =========================================================
   FAQ ICON
   ========================================================= */



.blumi-faq__icon-state {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;
}


.blumi-faq__icon-state svg {
	display: block;

	width: 100%;
	height: 100%;
}


/* Aperto nascosto di default */

.blumi-faq__icon-state--open {
	display: none;
}

.blumi-faq__icon-state svg path {
	fill: var(--blumi-cocoa) !important;
}


/* Quando la FAQ viene aperta */

.blumi-faq__item.is-open
.blumi-faq__icon-state--closed {
	display: none;
}


.blumi-faq__item.is-open
.blumi-faq__icon-state--open {
	display: flex;
}