/*
 * Seonix front-end styles for content blocks injected by the plugin.
 *
 * Scoped to the "Key takeaways" callout. The callout must read as part of
 * the host site, not as an embedded Seonix widget, so every colour is
 * either inherited from the theme or derived from the site's own brand
 * accent (`--seonix-accent`, sent per-post in the publish payload). There
 * is deliberately no hardcoded palette and no prefers-color-scheme
 * override: OS dark mode says nothing about the theme's colours, while
 * inherited text plus translucent accent tints follow light and dark
 * themes on their own.
 *
 * Every selector carries a `:not(#_)` specificity bump (id-level, matches
 * everything) so the few properties we do declare — sizes, spacing, list
 * reset — win against arbitrary theme rules like `.single-post
 * .entry-content h2` regardless of load order. Typography and colours are
 * intentionally NOT declared, so the theme keeps painting those. Themes
 * can still restyle the callout with an id/!important rule or redefine
 * `--seonix-accent` at :root.
 */

.seonix-key-takeaways:not(#_) {
	/* No brand accent configured → derive the accents from the theme's
	   text colour instead of shipping any Seonix brand colour. */
	--seonix-accent: currentColor;
	margin: 1.5rem 0 2rem;
	padding: 1.125em 1.375em;
	border-radius: 0.375rem;
	border-inline-start: 3px solid var(--seonix-accent);
	background: color-mix(in srgb, var(--seonix-accent) 7%, transparent);
	font-size: 0.9375em;
	line-height: 1.6;
}

/* Legacy wrapper still present in posts published by older releases. */
.seonix-key-takeaways:not(#_) .seonix-key-takeaways__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin: 0 0 0.5em;
}

/* Sized to the callout; family, weight and colour come from the theme's
   own heading styles so the title matches the site. */
.seonix-key-takeaways:not(#_) .seonix-key-takeaways__title {
	margin: 0 0 0.5em;
	padding: 0;
	font-size: 1.125em;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
}

/* The list reset is structural — the custom markers below assume it — and
   real-world child themes hit article lists with `!important` (e.g.
   `.single-post .entry-content ul { padding: 40px !important }`), so these
   few resets carry `!important` too. Aesthetic properties above stay
   overridable. */
.seonix-key-takeaways:not(#_) .seonix-key-takeaways__list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.seonix-key-takeaways:not(#_) .seonix-key-takeaways__item {
	position: relative;
	margin: 0 !important;
	padding: 0.3em 0 !important;
	padding-inline-start: 1.25em !important;
}

.seonix-key-takeaways:not(#_) .seonix-key-takeaways__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.125em;
	top: 0.75em;
	width: 0.375em;
	height: 0.375em;
	border-radius: 9999px;
	background: var(--seonix-accent);
}

.seonix-key-takeaways:not(#_) .seonix-key-takeaways__item + .seonix-key-takeaways__item {
	border-top: 1px solid color-mix(in srgb, var(--seonix-accent) 15%, transparent);
}