/* =========================================================
   COMPONENTE: ESCLARECIMENTOS A SABER
   Aplicar a classe "esclarecimentos-a-saber"
   ao bloco Detalhes do WordPress
   ========================================================= */

.esclarecimentos-a-saber {
	--esclarecimentos-cor: #087da5;
	--esclarecimentos-cor-escura: #075d7a;
	--esclarecimentos-fundo: #f3f9fb;
	--esclarecimentos-borda: #b9dce8;
	--esclarecimentos-texto: #263238;
	--esclarecimentos-texto-suave: #53636b;

	margin: 1.25rem 0;
	padding: 0;
	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			var(--esclarecimentos-fundo) 0%,
			#ffffff 100%
		);

	border: 1px solid var(--esclarecimentos-borda);
	border-left: 4px solid var(--esclarecimentos-cor);
	border-radius: 10px;

	box-shadow:
		0 2px 4px rgba(15, 70, 90, 0.04),
		0 6px 18px rgba(15, 70, 90, 0.07);
}


/* =========================================================
   CABEÇALHO CLICÁVEL
   Menor quando o bloco está fechado
   ========================================================= */

.esclarecimentos-a-saber > summary {
	position: relative;

	display: flex;
	align-items: center;
	gap: 0.65rem;

	min-height: 48px;
	padding: 0.7rem 3rem 0.7rem 1rem;

	color: var(--esclarecimentos-cor-escura);

	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;

	cursor: pointer;
	list-style: none;

	transition:
		background-color 180ms ease,
		color 180ms ease,
		min-height 180ms ease,
		padding 180ms ease;
}


/* Remove o marcador padrão dos navegadores */

.esclarecimentos-a-saber > summary::-webkit-details-marker {
	display: none;
}

.esclarecimentos-a-saber > summary::marker {
	content: "";
}


/* =========================================================
   ÍCONE DE INFORMAÇÃO
   ========================================================= */

.esclarecimentos-a-saber > summary::before {
	content: "i";

	display: inline-grid;
	flex: 0 0 24px;
	place-items: center;

	width: 24px;
	height: 24px;

	color: #ffffff;
	background-color: var(--esclarecimentos-cor);

	border-radius: 50%;

	font-family: Georgia, serif;
	font-size: 0.85rem;
	font-weight: 700;
	font-style: italic;
}


/* =========================================================
   SETA À DIREITA
   ========================================================= */

.esclarecimentos-a-saber > summary::after {
	content: "";

	position: absolute;
	right: 1.1rem;
	top: 50%;

	width: 8px;
	height: 8px;

	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;

	transform:
		translateY(-70%)
		rotate(45deg);

	transition: transform 200ms ease;
}


/* =========================================================
   INTERAÇÕES
   ========================================================= */

.esclarecimentos-a-saber > summary:hover {
	color: var(--esclarecimentos-cor);
	background-color: rgba(8, 125, 165, 0.06);
}

.esclarecimentos-a-saber > summary:focus-visible {
	outline: 3px solid rgba(8, 125, 165, 0.3);
	outline-offset: -3px;
}


/* =========================================================
   ESTADO ABERTO
   Mantém o cabeçalho um pouco maior quando expandido
   ========================================================= */

.esclarecimentos-a-saber[open] > summary {
	min-height: 54px;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;

	color: #ffffff;
	background-color: var(--esclarecimentos-cor);

	border-bottom: 1px solid var(--esclarecimentos-borda);
}

.esclarecimentos-a-saber[open] > summary::before {
	color: var(--esclarecimentos-cor);
	background-color: #ffffff;
}

.esclarecimentos-a-saber[open] > summary::after {
	transform:
		translateY(-30%)
		rotate(225deg);
}


/* =========================================================
   CONTEÚDO INTERNO
   ========================================================= */

.esclarecimentos-a-saber > :not(summary) {
	margin-left: 1.25rem;
	margin-right: 1.25rem;

	color: var(--esclarecimentos-texto);
}


/* Primeiro conteúdo após o título */

.esclarecimentos-a-saber > summary + * {
	margin-top: 1.15rem;
}


/* Último elemento interno */

.esclarecimentos-a-saber > :last-child {
	margin-bottom: 1.25rem;
}


/* =========================================================
   PARÁGRAFOS
   ========================================================= */

.esclarecimentos-a-saber p {
	margin-top: 0;
	margin-bottom: 0.9rem;

	color: var(--esclarecimentos-texto-suave);

	font-size: 1rem;
	line-height: 1.6;
}


/* =========================================================
   DESTAQUES
   ========================================================= */

.esclarecimentos-a-saber strong {
	color: var(--esclarecimentos-cor-escura);
	font-weight: 700;
}


/* =========================================================
   LINKS
   ========================================================= */

.esclarecimentos-a-saber a {
	color: var(--esclarecimentos-cor-escura);

	font-weight: 600;

	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.esclarecimentos-a-saber a:hover {
	color: var(--esclarecimentos-cor);
	text-decoration-thickness: 2px;
}


/* =========================================================
   LISTAS
   ========================================================= */

.esclarecimentos-a-saber ul,
.esclarecimentos-a-saber ol {
	padding-left: 1.4rem;
	line-height: 1.6;
}

.esclarecimentos-a-saber li {
	margin-bottom: 0.5rem;
}

.esclarecimentos-a-saber li::marker {
	color: var(--esclarecimentos-cor);
}


/* =========================================================
   EVITA MARGENS ESTRANHAS EM BLOCOS INTERNOS
   ========================================================= */

.esclarecimentos-a-saber > :not(summary):first-of-type {
	margin-top: 1.15rem;
}

.esclarecimentos-a-saber > :not(summary):last-child {
	margin-bottom: 1.25rem;
}


/* =========================================================
   AJUSTES PARA CELULAR
   ========================================================= */

@media (max-width: 600px) {
	.esclarecimentos-a-saber {
		margin: 1rem 0;

		border-left-width: 3px;
		border-radius: 8px;
	}

	.esclarecimentos-a-saber > summary {
		min-height: 44px;

		padding:
			0.65rem
			2.75rem
			0.65rem
			0.85rem;

		gap: 0.55rem;

		font-size: 0.95rem;
	}

	.esclarecimentos-a-saber[open] > summary {
		min-height: 50px;

		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.esclarecimentos-a-saber > summary::before {
		flex-basis: 22px;

		width: 22px;
		height: 22px;

		font-size: 0.78rem;
	}

	.esclarecimentos-a-saber > summary::after {
		right: 1rem;

		width: 7px;
		height: 7px;
	}

	.esclarecimentos-a-saber > :not(summary) {
		margin-left: 1rem;
		margin-right: 1rem;
	}
}


/* =========================================================
   ACESSIBILIDADE: MENOS ANIMAÇÕES
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.esclarecimentos-a-saber > summary,
	.esclarecimentos-a-saber > summary::after {
		transition: none;
	}
}