/**
 * Sky Changelog Notifier — Frontend Styles
 *
 * Styles for changelog display shortcodes on the frontend.
 *
 * @package SkyChangelogNotifier
 */

/* ─── Changelog Display Container ─── */
.scln-changelog {
	max-width: 800px;
	margin: 2em auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.scln-changelog__heading {
	font-size: 1.5em;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 1em;
	padding-bottom: 0.5em;
	border-bottom: 2px solid #e5e7eb;
}

.scln-changelog__content {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 1.5em;
}

.scln-changelog__content ul,
.scln-changelog__content ol {
	margin: 0 0 1em 0;
	padding-left: 1.5em;
}

.scln-changelog__content li {
	margin-bottom: 0.5em;
	line-height: 1.6;
}

.scln-changelog__content p {
	margin: 0 0 1em 0;
	line-height: 1.6;
}

.scln-changelog__content p:last-child {
	margin-bottom: 0;
}

.scln-changelog__content code {
	background: #f3f4f6;
	padding: 0.2em 0.4em;
	border-radius: 4px;
	font-family: Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.9em;
}

.scln-changelog__content strong {
	color: #1f2937;
}

.scln-changelog__content a {
	color: #6366f1;
	text-decoration: none;
}

.scln-changelog__content a:hover {
	text-decoration: underline;
}

/* ─── Raw/Markdown Output ─── */
.scln-changelog__raw {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 1.5em;
	overflow-x: auto;
	font-family: Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.9em;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* ─── Error Messages ─── */
.scln-error {
	color: #dc2626;
	padding: 1em;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
}

/* ─── Full Changelog Display (All Versions) ─── */
.scln-changelog--full {
	max-width: 900px;
}

.scln-changelog__version {
	margin-bottom: 2em;
	border-left: 3px solid #e5e7eb;
	padding-left: 1.5em;
}

.scln-changelog__version--latest {
	border-left-color: #6366f1;
}

.scln-changelog__version-title {
	font-size: 1.25em;
	font-weight: 600;
	color: #374151;
	margin-bottom: 0.75em;
	padding-bottom: 0.25em;
	border-bottom: 1px solid #e5e7eb;
}

.scln-changelog__version--latest .scln-changelog__version-title {
	color: #6366f1;
}

.scln-changelog__version-content {
	font-size: 0.95em;
}

.scln-changelog__version-content ul,
.scln-changelog__version-content ol {
	margin: 0 0 0.75em 0;
	padding-left: 1.25em;
}

.scln-changelog__version-content li {
	margin-bottom: 0.35em;
}

/* Visual distinction for older versions */
.scln-changelog--full .scln-changelog__version:not(:first-child) {
	opacity: 0.9;
}

.scln-changelog--full .scln-changelog__version:not(:first-child):hover {
	opacity: 1;
}