/* =====================================================
   BLUESKY PAGE — loaded only by page-bluesky.php
   Uses the theme variables from style.css, so changing
   a colour there changes it here too.
   ===================================================== */

/* ---- Heading row ---- */
.bsky-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--color-border-line);
}

.bsky-head-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bsky-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text-primary);
}

.bsky-sub {
	font-size: 13px;
	color: var(--color-text-meta);
}

.bsky-dot {
	color: var(--color-nav-sep);
}

.bsky-follow,
.bsky-follow:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--color-border-input);
	border-radius: 8px;
	background-color: var(--color-bg-inset);
	font-size: 13px;
	color: var(--color-text-primary);
}

.bsky-follow:hover {
	border-color: var(--color-link-hover);
	color: var(--color-link-hover);
	text-decoration: none;
}

/* ---- One post ---- */
.bsky-post {
	display: flex;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--color-border-line);
}

.bsky-avatar {
	flex: 0 0 52px;
	box-sizing: border-box;
	width: 52px;
	height: 52px;
	object-fit: cover;
	object-position: center top;
	border-radius: 50%;
	border: 2px solid var(--color-border-media);
}

.bsky-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* "Posted on 3 Nov 2026 at 9:41 PM ▪ 14 likes ▪ 2 reposts" — the whole line links to the post */
.bsky-line {
	margin: 0;
	padding-top: 4px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--color-text-primary);
}

.bsky-line a,
.bsky-line a:visited {
	color: var(--color-text-primary);
}

.bsky-line .bsky-m {
	color: var(--color-text-meta);
	font-weight: 400;
}

.bsky-line a:hover {
	text-decoration: none;
}

.bsky-line a:hover span {
	color: var(--color-highlight);
}

.bsky-reposted {
	font-size: 12px;
	color: var(--color-text-meta);
}

.bsky-reposted a,
.bsky-reposted a:visited {
	color: var(--color-text-meta);
}

.bsky-reposted a:hover {
	color: var(--color-highlight);
	text-decoration: none;
}

/* post text — links, @mentions and #hashtags are orange */
.bsky-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	font-weight: 300;
	color: var(--color-text-body);
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.bsky-text a.bsky-rt,
.bsky-text a.bsky-rt:visited {
	color: var(--color-link-hover);
}

.bsky-text a.bsky-rt:hover {
	color: var(--color-highlight);
	text-decoration: none;
}

/* hashtags that end a post sit on their own line */
.bsky-text.bsky-tags {
	margin-top: -2px;
}

/* ---- Media frame: full column width, 16:9 ---- */
.bsky-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-top: 4px;
	border: 1px solid var(--color-border-media);
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--color-bg-inset);
}

.bsky-media-link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
}

.bsky-media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.bsky-media a:hover {
	text-decoration: none;
}

/* corner badges: GIF, +N more, duration, YOUTUBE */
.bsky-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 8px;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.78);
	font-size: 12px;
	color: #ffffff;
	pointer-events: none;
}

.bsky-badge-mono {
	font-family: var(--theme-font-code);
	font-size: 11px;
	letter-spacing: 0.5px;
}

.bsky-badge-right {
	left: auto;
	right: 10px;
}

/* big round play button (video / YouTube) */
.bsky-play,
.bsky-play:visited {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	transform: translate(-50%, -50%);
	border: 1px solid #555555;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.7);
	color: #ffffff;
}

.bsky-play:hover {
	background-color: var(--color-link-hover);
	border-color: var(--color-link-hover);
	color: #111111;
}

.bsky-yt-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* link card: dark strip with domain + title along the bottom */
.bsky-strip,
.bsky-strip:visited {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	background-color: rgba(8, 8, 8, 0.9);
	color: var(--color-text-primary);
}

.bsky-strip:hover {
	color: var(--color-text-primary);
}

.bsky-strip:hover .bsky-strip-title {
	color: var(--color-highlight);
}

.bsky-domain {
	font-family: var(--theme-font-code);
	font-size: 11px;
	color: var(--color-text-dim);
}

.bsky-strip-title {
	font-size: 14px;
	line-height: 1.35;
}

/* ---- Quoted post ---- */
.bsky-quote,
.bsky-quote:visited {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
	padding: 12px 14px;
	border: 1px solid var(--color-border-line);
	border-radius: 8px;
	background-color: var(--color-bg-inset);
	color: var(--color-text-body);
}

a.bsky-quote:hover {
	border-color: var(--color-border-input);
	color: var(--color-text-body);
	text-decoration: none;
}

.bsky-quote-gone {
	font-size: 13px;
	color: var(--color-text-dim);
}

.bsky-quote-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-size: 12px;
	color: var(--color-text-dim);
}

.bsky-quote-av {
	flex: 0 0 22px;
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--color-border-media);
	background-color: #2f3a44;
	object-fit: cover;
}

.bsky-quote-name {
	color: var(--color-text-primary);
}

.bsky-quote-text {
	font-size: 13px;
	line-height: 1.6;
	font-weight: 300;
	white-space: pre-line;
	overflow-wrap: anywhere;
	color: var(--color-text-body);
}

.bsky-quote-img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 1px solid var(--color-border-media);
	border-radius: 6px;
}

/* ---- Pagination: boxed numbers, current page outlined in orange, Previous / Next plain ---- */
.bsky-pagination {
	padding-top: 26px;
}

.bsky-pagination .pagination-links {
	gap: 8px;
}

.bsky-pagination .page-numbers {
	min-width: 34px;
	height: 34px;
	border: 1px solid var(--color-border-line);
	border-radius: 6px;
	background-color: var(--color-bg-inset);
	font-size: 13px;
}

.bsky-pagination a.page-numbers:hover {
	border-color: var(--color-link-hover);
	background-color: var(--color-bg-inset);
	color: var(--color-link-hover);
}

.bsky-pagination .page-numbers.current {
	border-color: var(--color-link-hover);
	background-color: transparent;
	color: var(--color-link-hover);
	font-weight: 500;
}

.bsky-pagination .page-numbers.prev,
.bsky-pagination .page-numbers.next {
	border-color: transparent;
	background-color: transparent;
	padding: 0 8px;
}

.bsky-pagination .page-numbers.disabled {
	color: var(--color-text-dim);
}

.bsky-pagination .page-numbers.dots {
	border-color: transparent;
	background-color: transparent;
}

/* ---- Small screens ---- */
@media (max-width: 560px) {
	.bsky-post { gap: 12px; }
	.bsky-avatar { flex-basis: 40px; width: 40px; height: 40px; }
	.bsky-line { font-size: 15px; }
	.bsky-play { width: 48px; height: 48px; }
}