/* ── Stream page ──────────────────────────────────────────────────────────── */

.stream-page-title {
	margin: 0;
}

/* ── Feed container ───────────────────────────────────────────────────────── */

.stream-feed {
	display: flex;
	flex-direction: column;
	margin-top: 2em;
}

/* ── Base item: icon + body side by side ──────────────────────────────────── */

.stream-item {
	display: flex;
	align-items: flex-start;
	gap: 0.65em;
	padding: 1.25em 0;
	border-bottom: 1px solid var(--color-border);
}

.stream-item:first-child {
	padding-top: 0;
}

/* ── Service / format icons ───────────────────────────────────────────────── */

.stream-icon {
	display: block;
	flex-shrink: 0;
	position: relative;
	width: 1.5em;
	height: 1.5em;
	margin-top: 0.2em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Tooltip from aria-label */
.stream-icon::after {
	content: attr(aria-label);
	position: absolute;
	bottom: calc(100% + 5px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-text);
	color: var(--color-bg);
	font-size: 0.7rem;
	font-family: var(--font-body);
	font-weight: 400;
	white-space: nowrap;
	padding: 2px 6px;
	border-radius: 3px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
}

.stream-icon:hover::after {
	opacity: 1;
}

/* WP post format icons — same SVG paths as homepage sidebar, orange stroke */
.stream-icon--standard {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF3D00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}
.stream-icon--link {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF3D00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}
.stream-icon--video {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF3D00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='15' rx='2' ry='2'/%3E%3Cpolyline points='17 2 12 7 7 2'/%3E%3C/svg%3E");
}

/* Service icons — filled with brand colors */
.stream-icon--mastodon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23563acc'%3E%3Cpath d='M21.327 8.566c0-4.339-2.843-5.61-2.843-5.61-1.433-.658-3.894-.935-6.451-.956h-.063c-2.557.021-5.016.298-6.45.956 0 0-2.843 1.272-2.843 5.61 0 .993-.019 2.181.012 3.441.103 4.243.778 8.425 4.701 9.463 1.809.479 3.362.579 4.612.51 2.268-.126 3.541-.809 3.541-.809l-.075-1.646s-1.621.511-3.441.449c-1.804-.062-3.707-.194-3.999-2.409a4.523 4.523 0 0 1-.04-.621s1.77.433 4.014.536c1.372.063 2.658-.08 3.965-.236 2.506-.299 4.688-1.843 4.962-3.254.434-2.223.398-5.424.398-5.424zm-3.353 5.59h-2.081V9.057c0-1.075-.452-1.62-1.357-1.62-1 0-1.501.647-1.501 1.927v2.791h-2.069V9.364c0-1.28-.501-1.927-1.502-1.927-.905 0-1.357.546-1.357 1.62v5.099H6.026V8.903c0-1.074.273-1.927.823-2.558.567-.631 1.307-.955 2.228-.955 1.065 0 1.872.409 2.405 1.228l.518.869.519-.869c.533-.819 1.34-1.228 2.4-1.228.92 0 1.66.324 2.228.955.549.631.822 1.484.822 2.558v5.253z'/%3E%3C/svg%3E");
}
.stream-icon--bluesky {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230085ff'%3E%3Cpath d='M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.249 1.031 0 .39V19.5c1.437.866 4.048.406 5.702-.534C8.29 17.399 9.046 14.5 12 14.5c2.953 0 3.71 2.899 6.298 4.466 1.653.94 4.265 1.4 5.702.534V.39c-1.249.64-2.566.554-5.202 2.415C16.045 4.748 13.087 8.686 12 10.8z'/%3E%3C/svg%3E");
}
.stream-icon--instapaper {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888888'%3E%3Cpath d='M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}

/* ── Stream date ──────────────────────────────────────────────────────────── */

.stream-date {
	display: block;
	font-size: 0.75em;
	color: var(--color-faded-text);
	margin-top: 0.35em;
}

/* ── Native WP post row ───────────────────────────────────────────────────── */

.stream-post-body {
	flex: 1;
}

.stream-title {
	font-family: var(--font-heading);
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	padding: 0;
}

.stream-title a,
.stream-title a:visited {
	color: var(--color-text);
	text-decoration: none;
}

.stream-title a:hover {
	color: var(--color-link);
}

/* Link and video posts at ~50% of article heading size */
.stream-title--small {
	font-size: 0.85em;
	font-family: var(--font-body);
	font-weight: 700;
}

/* ── Social post (Mastodon / Bluesky) ─────────────────────────────────────── */

.stream-social-body {
	flex: 1;
}

.stream-social-content {
	font-size: 0.9em;
	line-height: 1.6;
	background: var(--color-footer-bg);
	border-left: 3px solid var(--color-border);
	padding: 0.6em 0.85em;
	border-radius: 0 4px 4px 0;
	margin-bottom: 0.4em;
}

.stream-social-content p {
	margin: 0 0 0.5em;
}

.stream-social-content p:last-child {
	margin-bottom: 0;
}

.stream-social-content a {
	color: var(--color-link);
}

.stream-social-meta {
	font-size: 0.75em;
	color: var(--color-faded-text);
}

.stream-source-link,
.stream-source-link:visited {
	color: var(--color-faded-text);
	text-decoration: none;
}

.stream-source-link:hover {
	color: var(--color-link);
}

/* ── Instapaper save ──────────────────────────────────────────────────────── */

.stream-item-instapaper {
	align-items: center;
}

.stream-instapaper-body {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	flex-wrap: wrap;
	flex: 1;
}

.stream-instapaper-title,
.stream-instapaper-title:visited {
	font-size: 0.9em;
	color: var(--color-text);
	text-decoration: none;
	flex: 1;
}

.stream-instapaper-title:hover {
	color: var(--color-link);
}

.stream-item-instapaper .stream-date {
	display: inline;
	margin-top: 0;
	white-space: nowrap;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */

.stream-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	margin-top: 2em;
	font-size: 0.85em;
}

.stream-pagination a.page-numbers,
.stream-pagination a.page-numbers:visited {
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 2px solid var(--color-link);
	padding-bottom: 1px;
}

.stream-pagination a.page-numbers:hover {
	color: var(--color-link);
}

.stream-pagination .current {
	font-weight: 700;
	color: var(--color-faded-text);
	padding-bottom: 3px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.stream-item-instapaper .stream-instapaper-body {
		flex-direction: column;
		gap: 0.3em;
	}
}