/*
Theme Name: Biece for Poe
Theme URI: https://blog.cyhao.space/
Description: A restrained dark editorial child theme for Poe.
Author: Yanhao Chen
Template: poe
Version: 0.1.0
Text Domain: biece-poe
*/

:root {
	color-scheme: dark;
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

.yx-site-header {
	position: relative;
	z-index: 2;
	border-bottom: 1px solid var(--wp--preset--color--tertiary);
}

.yx-site-header .wp-block-site-title a,
.yx-site-footer a {
	text-decoration: none;
}

.yx-brand,
.yx-blog-mark {
	display: flex;
	align-items: center;
}

.yx-blog-mark {
	width: 1.875rem;
	height: 1.875rem;
	flex: 0 0 auto;
}

.yx-blog-mark img {
	display: block;
	width: 100%;
	height: 100%;
}

.yx-blog-mark:focus-visible {
	outline: 1px solid var(--wp--preset--color--foreground);
	outline-offset: 0.25rem;
}

.yx-site-header .wp-block-navigation-item__content,
.yx-site-footer a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}

.yx-site-header .wp-block-navigation-item__content:hover,
.yx-site-footer a:hover {
	text-decoration: underline;
}

.yx-intro {
	min-height: min(54vh, 620px);
	display: flex;
	align-items: flex-end;
}

.yx-intro h1,
.yx-intro .wp-block-site-title {
	max-width: 8ch;
}

.yx-intro .wp-block-site-title a,
.yx-site-footer .wp-block-site-title a {
	text-decoration: none;
}

.yx-post-row {
	transition: opacity 180ms ease;
}

.yx-post-list:has(.yx-post-row:hover) .yx-post-row:not(:hover) {
	opacity: 0.44;
}

.yx-post-row .wp-block-post-title a {
	text-decoration: none;
}

.yx-post-row .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.yx-post-row .wp-block-post-excerpt__excerpt {
	max-width: 56ch;
}

.yx-article-header {
	min-height: min(58vh, 680px);
	display: flex;
	align-items: flex-end;
}

.yx-article-content :where(p, li) {
	line-height: 1.85;
}

.yx-article-content :where(h2, h3) {
	margin-top: 2.2em;
}

.yx-site-footer {
	border-top: 1px solid var(--wp--preset--color--tertiary);
}

@media (max-width: 781px) {
	.yx-intro,
	.yx-article-header {
		min-height: 44vh;
	}

	.yx-post-row .wp-block-columns {
		gap: 0.65rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.yx-post-row {
		transition: none;
	}
}