/*
 * Slash WP - 区块编辑器内容样式（前台）
 *
 * 老主题的 wp.css 只覆盖 2012 年的 .alignleft / .wp-caption，
 * 这里补齐 WordPress 7.x 核心区块在这套布局里的表现。
 * 文件最后加载，因此优先级高于主题原有样式。
 */

:root {
	--dt-content: 630px;
	--dt-wide: 1200px;
	--dt-gap: 1.5rem;
	--dt-ink: #222;
	--dt-muted: #5a5f66;
	--dt-accent: #b8874a;
	--dt-line: rgba(0, 0, 0, .12);
}

.entry-content,
.article .b,
.wp-block-post-content {
	max-width: 100%;
	overflow-wrap: break-word;
}

/* 对齐 -------------------------------------------------------------- */
.entry-content > .alignwide,
.wp-block-post-content > .alignwide,
.alignwide {
	max-width: var(--dt-wide);
	width: min(100%, var(--dt-wide));
	margin-left: auto;
	margin-right: auto;
	clear: both;
}

.entry-content > .alignfull,
.wp-block-post-content > .alignfull,
.alignfull {
	max-width: none;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	clear: both;
}

/*
 * 注意：这里绝不能写裸的 .alignleft / .alignright / .aligncenter。
 *
 * 老主题把 .alignleft 用在 a 标签上，作为「padding + 边框 +
 * position:relative」的浮动图片外框（a.alignleft.dt_highslide_image）。
 * 悬停放大遮罩 span.hover 是以这个外框为定位参照的 width/height:100%。
 * 一旦给外框加 max-width:50%，外框被压成图片的一半（630px 图片 /
 * 320px 外框），遮罩就只盖住半张图。旧站 999 的正确数值是：
 * 外框 641px、遮罩 639px、图片 630px。
 *
 * 所以现代对齐只作用于区块/图片元素，老外框完全交给 css/style.css。
 */
[class*="wp-block-"].alignleft,
figure.alignleft,
img.alignleft,
.wp-caption.alignleft {
	float: left;
	margin: 0 var(--dt-gap) var(--dt-gap) 0;
	max-width: 50%;
}

[class*="wp-block-"].alignright,
figure.alignright,
img.alignright,
.wp-caption.alignright {
	float: right;
	margin: 0 0 var(--dt-gap) var(--dt-gap);
	max-width: 50%;
}

[class*="wp-block-"].aligncenter,
figure.aligncenter,
img.aligncenter,
.wp-caption.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* 放大图片外框：宽度始终跟随内部图片，保证悬停遮罩与图片等大 */
a.alignleft.dt_highslide_image,
a.alignright.dt_highslide_image,
a.alignnone.dt_highslide_image,
a.aligncenter.dt_highslide_image {
	max-width: none;
}

/* 通用区块 ---------------------------------------------------------- */
.entry-content > *,
.wp-block-post-content > * {
	margin-top: 0;
	margin-bottom: var(--dt-gap);
}

p.has-background,
.wp-block-group.has-background {
	padding: 1.25rem 1.5rem;
	border-radius: 4px;
}

.wp-block-image img,
.wp-block-gallery img,
.wp-block-media-text__media img {
	height: auto;
	max-width: 100%;
}

.wp-block-image figcaption,
.wp-block-gallery .wp-block-image figcaption,
.wp-caption-text,
.wp-block-caption {
	color: var(--dt-muted);
	font-size: .875rem;
	line-height: 1.5;
	text-align: center;
	margin: .5rem 0 0;
}

.wp-block-gallery {
	gap: .75rem;
}

.wp-block-gallery .wp-block-image {
	margin: 0;
}

.wp-block-quote,
blockquote {
	border-left: 3px solid var(--dt-accent);
	margin: 1.75rem 0;
	padding: .25rem 0 .25rem 1.25rem;
	font-size: 1.125rem;
	font-style: italic;
}

.wp-block-quote cite,
blockquote cite {
	display: block;
	font-size: .875rem;
	font-style: normal;
	color: var(--dt-muted);
	margin-top: .5rem;
}

.wp-block-quote.is-style-slash-framed,
.is-style-slash-framed {
	border: 1px solid var(--dt-line);
	border-left: 3px solid var(--dt-accent);
	background: rgba(255, 255, 255, .6);
	padding: 1.25rem 1.5rem;
	border-radius: 4px;
}

.wp-block-pullquote {
	border-top: 2px solid var(--dt-accent);
	border-bottom: 2px solid var(--dt-accent);
	padding: 1.5rem 0;
}

.wp-block-code,
.wp-block-preformatted,
pre {
	background: #f5f4f0;
	border: 1px solid var(--dt-line);
	border-radius: 4px;
	padding: 1rem 1.25rem;
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table td,
.wp-block-table th,
.entry-content table td,
.entry-content table th {
	border: 1px solid var(--dt-line);
	padding: .6rem .8rem;
}

.wp-block-table th {
	background: rgba(0, 0, 0, .04);
	text-align: left;
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--dt-line);
	margin: 2rem auto;
	max-width: 100%;
}

.wp-block-button .wp-block-button__link,
.wp-element-button,
.wp-block-file .wp-block-file__button {
	border-radius: 4px;
	background: var(--dt-accent);
	color: #fff;
	padding: .65rem 1.25rem;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--dt-ink);
	color: #fff;
}

.is-style-slash-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--dt-accent);
	color: var(--dt-accent);
}

.is-style-slash-panel {
	background: rgba(255, 255, 255, .7);
	border: 1px solid var(--dt-line);
	border-radius: 6px;
	padding: 1.5rem;
}

.is-style-slash-shadow img {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.wp-block-embed iframe,
.wp-block-video video,
.wp-block-cover,
.wp-block-media-text {
	max-width: 100%;
}

.wp-block-embed.wp-embed-aspect-16-9 iframe {
	aspect-ratio: 16 / 9;
	height: auto;
}

.wp-caption,
.wp-block-image figure {
	max-width: 100%;
}

/* 列布局在窄屏堆叠 -------------------------------------------------- */
@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-direction: column !important;
	}
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: auto !important;
		margin-left: 0 !important;
	}
	.wp-block-media-text.is-stacked-on-mobile {
		grid-template-columns: 1fr !important;
	}
	/* 同上：只重置现代区块/图片的对齐，别动老主题的浮动图片外框 */
	[class*="wp-block-"].alignleft,
	[class*="wp-block-"].alignright,
	figure.alignleft,
	figure.alignright,
	img.alignleft,
	img.alignright,
	.wp-caption.alignleft,
	.wp-caption.alignright {
		float: none;
		max-width: 100%;
		margin: 0 0 var(--dt-gap);
	}
}

/* 无障碍 ------------------------------------------------------------ */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip: auto;
	background: #fff;
	color: #000;
	padding: .75rem 1rem;
	z-index: 100000;
}