/* Widget: acordeon. */

.icc-acc {
	--icc-acc-gap: 26px;
	--icc-acc-bg: var(--icc-color-cream, #fef9ef);
	--icc-acc-contur: rgba(191, 89, 45, 0.16);
	--icc-acc-radius: 6px;
	--icc-acc-pad-sus: 26px;
	--icc-acc-pad-dreapta: 30px;
	--icc-acc-pad-jos: 30px;
	--icc-acc-pad-stanga: 30px;
	--icc-acc-cap-gap: 24px;
	--icc-acc-corp-sus: 22px;
	--icc-acc-titlu-ink: var(--icc-color-ink, #0c202f);
	--icc-acc-corp-ink: var(--icc-color-ink, #0c202f);
	--icc-acc-semn: 46px;
	--icc-acc-semn-bg: var(--icc-color-orange, #bf592d);
	--icc-acc-semn-ink: #fff;
	--icc-acc-semn-grosime: 2px;
	--icc-acc-durata: 0.35s;
	--icc-acc-gap-mobil: 18px;
	--icc-acc-pad-mobil: 18px;
	--icc-acc-titlu-fs-mobil: 17px;
	--icc-acc-corp-fs-mobil: 15px;
	--icc-acc-semn-mobil: 34px;

	display: flex;
	flex-direction: column;
	gap: var(--icc-acc-gap);
	width: 100%;
}

.icc-acc__item {
	border: 1px solid var(--icc-acc-contur);
	border-radius: var(--icc-acc-radius);
	background-color: var(--icc-acc-bg);
	transition: background-color 0.3s ease;

	&:hover .icc-acc__semn{
		background-color: #173F5D;
		transition: background-color 0.3s ease;
	}
}

/* ------------------------------------------------------------------ Cap --- */

.icc-acc .icc-acc__cap {
	margin: 0;
	font: inherit;
}

.icc-acc .icc-acc__buton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--icc-acc-cap-gap);
	width: 100%;
	margin: 0;
	padding: var(--icc-acc-pad-sus) var(--icc-acc-pad-dreapta) var(--icc-acc-pad-sus) var(--icc-acc-pad-stanga);
	border: 0;
	border-radius: var(--icc-acc-radius);
	background: none;
	color: var(--icc-acc-titlu-ink);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.icc-acc .icc-acc__buton:focus-visible {
	outline: 2px solid var(--icc-acc-semn-bg);
	outline-offset: -4px;
}

/* Reset-ul temei parinte pune `nowrap` pe <button>. */
.icc-acc .icc-acc__buton {
	white-space: normal;
}

.icc-acc .icc-acc__titlu {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
	font-family: var(--icc-font-sans);
	font-size: var(--icc-fs-card-title, 1.375rem);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: var(--icc-ls-card-title, -0.009em);
	color: inherit;
}

/* --------------------------------------------------------------- Semnul --- */

.icc-acc__semn {
	position: relative;
	flex: 0 0 auto;
	width: var(--icc-acc-semn);
	height: var(--icc-acc-semn);
	border-radius: 50%;
	background-color: var(--icc-acc-semn-bg);
}

.icc-acc__semn::before,
.icc-acc__semn::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40%;
	height: var(--icc-acc-semn-grosime);
	border-radius: 2px;
	background-color: var(--icc-acc-semn-ink);
	transform: translate(-50%, -50%);
}

.icc-acc__semn::after {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform var(--icc-acc-durata) ease, opacity var(--icc-acc-durata) ease;
}

.icc-acc__item.is-deschis .icc-acc__semn::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0deg);
}

/* ---------------------------------------------------------------- Panou --- */

.icc-acc__panou {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition:
		grid-template-rows var(--icc-acc-durata) ease,
		visibility 0s linear var(--icc-acc-durata);
}

.icc-acc__item.is-deschis > .icc-acc__panou {
	grid-template-rows: 1fr;
	visibility: visible;
	transition:
		grid-template-rows var(--icc-acc-durata) ease,
		visibility 0s;
}

.icc-acc__clip {
	overflow: hidden;
}

.icc-acc .icc-acc__corp {
	padding:
		var(--icc-acc-corp-sus)
		var(--icc-acc-pad-dreapta)
		var(--icc-acc-pad-jos)
		var(--icc-acc-pad-stanga);
	color: var(--icc-acc-corp-ink);
	font-family: var(--icc-font-sans);
	font-size: var(--icc-fs-ui, 1rem);
	line-height: 1.55;
}

.icc-acc .icc-acc__corp > :first-child {
	margin-top: 0;
}

.icc-acc .icc-acc__corp > :last-child {
	margin-bottom: 0;
}

.icc-acc .icc-acc__corp p {
	margin: 0 0 1.1em;
}

.icc-acc .icc-acc__corp ul,
.icc-acc .icc-acc__corp ol {
	margin: 0 0 1.1em;
	padding-left: 1.4em;
}

.icc-acc .icc-acc__corp li {
	margin-bottom: 0.5em;
}

.icc-acc .icc-acc__corp a {
	color: var(--icc-color-orange, #bf592d);
	text-underline-offset: 3px;
}

.icc-acc .icc-acc__gol {
	margin: 0;
	font-size: var(--icc-fs-ui, 1rem);
	opacity: 0.8;
}

/* -------------------------------------------------------------- Mobil ----- */

@media (max-width: 767px) {
	.icc-acc {
		gap: var(--icc-acc-gap-mobil);
	}

	.icc-acc .icc-acc__buton {
		gap: 14px;
		padding: var(--icc-acc-pad-mobil);
	}

	.icc-acc .icc-acc__titlu {
		font-size: var(--icc-acc-titlu-fs-mobil);
	}

	.icc-acc__semn {
		width: var(--icc-acc-semn-mobil);
		height: var(--icc-acc-semn-mobil);
	}

	.icc-acc .icc-acc__corp {
		padding: 0 var(--icc-acc-pad-mobil) var(--icc-acc-pad-mobil);
		font-size: var(--icc-acc-corp-fs-mobil);
		line-height: 1.6;
	}
}

@media (prefers-reduced-motion: reduce) {
	.icc-acc__panou,
	.icc-acc__semn::after {
		transition: none;
	}
}
