/* ==========================================================================
   Easy Help blocks – AI Summary + FAQ (front end + editor)
   Brand: purple #8a30ff · deep #1c0a33 · Poppins headings · Roboto body
   ========================================================================== */

/* ---------- AI Summary ---------- */
.es-ai-summary {
	position: relative;
	margin: 0 0 36px;
	padding: 22px 26px 24px;
	border: 1px solid transparent;
	border-radius: 16px;
	background:
		linear-gradient(135deg, #fbf7ff 0%, #ffffff 60%) padding-box,
		linear-gradient(135deg, #8a30ff 0%, #c79bff 45%, #ece0ff 100%) border-box;
	box-shadow: 0 10px 30px -18px rgba(138, 48, 255, .45);
	overflow: hidden;
}

/* soft glow in the corner */
.es-ai-summary::before {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(138, 48, 255, .16), rgba(138, 48, 255, 0) 70%);
	pointer-events: none;
}

.es-ai-summary__head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-bottom: 14px;
}

.es-ai-summary__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	background: linear-gradient(135deg, #8a30ff, #5b17d6);
	color: #fff;
	font: 600 12px/1.2 'Poppins', sans-serif;
	letter-spacing: .03em;
	text-transform: uppercase;
	box-shadow: 0 4px 12px -4px rgba(138, 48, 255, .6);
}

.es-ai-summary__icon {
	flex: none;
	animation: es-sparkle 2.4s ease-in-out infinite;
}

@keyframes es-sparkle {
	0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
	50%      { transform: scale(1.15) rotate(12deg); opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
	.es-ai-summary__icon { animation: none; }
}

.es-prose .es-ai-summary__title,
.es-ai-summary__title {
	margin: 0;
	font: 600 17px/1.4 'Poppins', sans-serif;
	color: #1c0a33;
}

/* read-time chip, pushed to the right */
.es-ai-summary__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 4px 10px 4px 26px;
	border: 1px solid #e6dcff;
	border-radius: 999px;
	background: #fff
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%238a30ff' stroke-width='1.5'/%3E%3Cpath d='M8 5v3.2l2 1.3' fill='none' stroke='%238a30ff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")
		9px center / 13px no-repeat;
	font: 500 12px/1.3 'Roboto', sans-serif;
	color: #5b4a7a;
	white-space: nowrap;
}

.es-ai-summary__body {
	position: relative;
}

.es-prose .es-ai-summary__body p,
.es-prose .es-ai-summary__body li,
.es-ai-summary__body p,
.es-ai-summary__body li {
	font: 400 16px/1.65 'Roboto', sans-serif;
	color: #1a1a1a;
}

.es-ai-summary__body p { margin: 0 0 10px; }
.es-ai-summary__body > :last-child { margin-bottom: 0; }

.es-ai-summary__body ul,
.es-ai-summary__body ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.es-ai-summary__body li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 26px;
}

.es-ai-summary__body li:last-child { margin-bottom: 0; }

.es-ai-summary__body ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .35em;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(138, 48, 255, .12)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%238a30ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
		center / 12px no-repeat;
}

.es-ai-summary__body ol { counter-reset: es-sum; }
.es-ai-summary__body ol li { counter-increment: es-sum; }
.es-ai-summary__body ol li::before {
	content: counter(es-sum);
	position: absolute;
	left: 0;
	top: .25em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #8a30ff;
	color: #fff;
	font: 600 11px/18px 'Poppins', sans-serif;
	text-align: center;
}

.es-ai-summary a { color: #8a30ff; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- FAQ ---------- */
.es-faq {
	margin: 40px 0 0;
}

.es-prose .es-faq__title,
.es-faq__title {
	margin: 0 0 18px;
	font: 600 24px/1.3 'Poppins', sans-serif;
	color: #1a1a1a;
}

.es-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.es-faq__item {
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.es-faq__item:hover { border-color: #cfb2ff; }

.es-faq__item[open] {
	border-color: #8a30ff;
	box-shadow: 0 8px 24px -16px rgba(138, 48, 255, .55);
}

.es-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	font: 500 16px/1.45 'Poppins', sans-serif;
	color: #1a1a1a;
	cursor: pointer;
	list-style: none;
	border-radius: 12px;
}

.es-faq__q::-webkit-details-marker { display: none; }
.es-faq__q::marker { content: ''; }

.es-faq__q:focus-visible {
	outline: 2px solid #8a30ff;
	outline-offset: 2px;
}

.es-faq__item[open] > .es-faq__q {
	color: #1c0a33;
	background: rgba(138, 48, 255, .06);
	border-radius: 12px 12px 0 0;
}

/* plus → minus icon */
.es-faq__icon {
	position: relative;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(138, 48, 255, .1);
	transition: background-color .2s ease, transform .25s ease;
}

.es-faq__icon::before,
.es-faq__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 2px;
	border-radius: 2px;
	background: #8a30ff;
	transform: translate(-50%, -50%);
	transition: transform .25s ease, opacity .25s ease;
}

.es-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.es-faq__item[open] .es-faq__icon { background: #8a30ff; transform: rotate(180deg); }
.es-faq__item[open] .es-faq__icon::before,
.es-faq__item[open] .es-faq__icon::after { background: #fff; }
.es-faq__item[open] .es-faq__icon::after { opacity: 0; }

.es-faq__a {
	padding: 4px 20px 18px;
}

.es-prose .es-faq__a p,
.es-prose .es-faq__a li,
.es-faq__a p,
.es-faq__a li {
	font: 400 16px/1.65 'Roboto', sans-serif;
	color: #404040;
}

.es-faq__a p { margin: 12px 0 0; }
.es-faq__a > :first-child { margin-top: 12px; }
.es-faq__a > :last-child { margin-bottom: 0; }
.es-faq__a a { color: #8a30ff; text-decoration: underline; text-underline-offset: 2px; }

/* gentle reveal */
.es-faq__item[open] .es-faq__a { animation: es-faq-in .25s ease; }
@keyframes es-faq-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.es-faq__item[open] .es-faq__a { animation: none; }
}

/* editor: always show answers while editing */
.es-faq__item.is-editing .es-faq__q { cursor: text; }

@media (max-width: 600px) {
	.es-ai-summary { padding: 18px 18px 20px; border-radius: 14px; }
	.es-faq__q { padding: 14px 16px; font-size: 15px; }
	.es-faq__a { padding: 2px 16px 16px; }
	.es-faq__title { font-size: 21px; }
}