/* UMU 词典 — archive (card grid) + single (detail) styling.
   Matches Figma "官网 2026" file (0SFWQshDzOQ3cfJBYeCbF7),
   node 26838:8944 (archive) / 26838:9148 (detail). No mobile variant
   exists in that file for these two frames — the @media rules below are
   this implementation's own responsive adaptation, not a Figma spec. */

/* These two templates bypass the active theme entirely (see archive-template.php),
   so its stylesheet — which is normally what backs WordPress's ".screen-reader-text"
   convention — never loads here. Without this rule the pagination prev/next
   labels render as plain visible text instead of being screen-reader-only. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* twentytwentyfive's theme.json sets a global body { font-weight: 300 } via
   its inline global-styles CSS, which still loads here (these templates call
   wp_head() for other hooks/scripts even though they skip the theme's own
   page templates) — reset it back to the normal 400 default so unstyled text
   isn't inherited-thin. Elements with their own font-weight (titles, tags,
   etc.) are unaffected since their own rules are more specific. */
body.umu-dictionary-archive,
body.umu-dictionary-single {
	font-weight: 400;
}

:root {
	/* PingFang SC first and explicit — -apple-system/BlinkMacSystemFont come
	   with their own automatic CJK fallback, so if either is listed ahead of
	   PingFang SC here, the browser resolves through them for every
	   character (Latin and Chinese alike) and never actually matches
	   "PingFang SC" by name, even though the two usually look very close. */
	--umu-dict-font: "PingFang SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
	--umu-dict-text1: #222222;
	--umu-dict-text2: #666666;
	--umu-dict-body: #333333;
	--umu-dict-accent: #1e6ee6;
	--umu-dict-brand: #ffc610;
	--umu-dict-border: #e0e0e0;
	--umu-dict-divider: #eeeeee;
}

.umu-dict-main {
	padding: 40px 24px;
	font-family: var(--umu-dict-font);
}

.umu-dict-container {
	max-width: 1100px;
	margin: 0 auto;
}

.umu-dict-title {
	font-size: 28px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0 0 32px;
	color: var(--umu-dict-text1);
}

.umu-dict-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.umu-dict-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	border: 1px solid var(--umu-dict-border);
	border-radius: 12px;
	padding: 16px 24px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	/* Same automatic-minimum-size gotcha one level up: grid items (this card
	   is a direct child of .umu-dict-grid) also default to min-width:auto,
	   so a nowrap title inside can expand the card itself past its 1fr
	   share of the grid, which is why min-width:0 on the title alone (below)
	   isn't enough — the title's own parent has to stop growing first. */
	min-width: 0;
}

.umu-dict-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.umu-dict-card-title {
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
	margin: 0;
	color: var(--umu-dict-text1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	/* Same flex-item gotcha as the excerpt's min-height fix above, but on the
	   cross axis: a flex child's implicit min-width:auto lets nowrap content
	   grow past the parent's width instead of being clipped. */
	min-width: 0;
}

.umu-dict-card-excerpt {
	font-size: 16px;
	line-height: 22px;
	color: var(--umu-dict-text2);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Flex items default to min-height: auto, which overrides overflow:hidden
	   and lets the clamped box grow to fit its content instead of cutting it
	   off — this card is a flex column, so the excerpt needs an explicit 0. */
	min-height: 0;
}

.umu-dict-card-link {
	/* Pushes the link to the bottom of the card regardless of how many lines
	   the title/excerpt above it take up — cards in the same grid row are
	   already equal height (grid's default align-items: stretch), so this
	   keeps every "查看定义" lined up on the same baseline across a row. */
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: var(--umu-dict-accent);
}

.umu-dict-pagination {
	margin-top: 32px;
}

/* the_posts_pagination() wraps the actual button row in <nav><div class="nav-links">
   — that's the real flex row; .umu-dict-pagination itself only contains the <nav>,
   so centering/gap belongs here, not on the outer wrapper (which was a no-op). */
.umu-dict-pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}

.umu-dict-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	border-radius: 2px;
	text-decoration: none;
	font-size: 16px;
	line-height: 22px;
	color: var(--umu-dict-text1);
	border: 1px solid var(--umu-dict-border);
	background: #fff;
}

/* The ‹ › glyphs render visually small/thin at the same 16px used for page
   numbers, so bump just the prev/next arrow up a bit for legibility. */
.umu-dict-pagination .prev.page-numbers,
.umu-dict-pagination .next.page-numbers {
	font-size: 20px;
}

.umu-dict-pagination .page-numbers.current {
	background: var(--umu-dict-brand);
	border-color: var(--umu-dict-brand);
	color: #fff;
}

.umu-dict-empty {
	color: var(--umu-dict-text2);
	font-size: 15px;
}

/* ── Single (detail) page ──────────────────────────────────────────────── */

.umu-dict-breadcrumb {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 16px;
	line-height: 22px;
	margin-bottom: 32px;
}

.umu-dict-breadcrumb a {
	color: var(--umu-dict-text2);
	text-decoration: none;
}

.umu-dict-breadcrumb a:hover {
	color: var(--umu-dict-accent);
}

.umu-dict-breadcrumb .umu-dict-breadcrumb-sep {
	color: var(--umu-dict-text2);
	/* Same glyph-looks-thin-at-body-text-size issue as the pagination arrows. */
	font-size: 20px;
}

.umu-dict-breadcrumb .umu-dict-breadcrumb-current {
	font-weight: 500;
	color: var(--umu-dict-text1);
}

.umu-dict-single-title {
	font-size: 36px;
	font-weight: 600;
	line-height: 54px;
	letter-spacing: -0.4px;
	margin: 0 0 20px;
	color: #0a1f24;
}

.umu-dict-single-content {
	font-size: 18px;
	line-height: 28px;
	color: var(--umu-dict-body);
	margin-bottom: 32px;
}

.umu-dict-single-content p {
	margin: 0 0 1.2em;
}

.umu-dict-related {
	border-top: 1px solid var(--umu-dict-divider);
	padding-top: 32px;
}

.umu-dict-related-title {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
	color: var(--umu-dict-text1);
}

.umu-dict-related-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	/* The first row's own padding-top is what provides the 20px gap below the
	   title (an earlier attempt to zero this out via :first-child never
	   matched — the title itself is the real first child, not this row —
	   so the title used to also carry a margin-bottom, double-counting the
	   gap to 40px). No margin on the title now; this padding is the only
	   source of that spacing. */
	padding: 20px 0;
	border-bottom: 1px solid var(--umu-dict-divider);
}

.umu-dict-related-row-title {
	font-size: 16px;
	line-height: 24px;
	color: var(--umu-dict-text1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.umu-dict-related-row-link {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 16px;
	line-height: 22px;
	color: var(--umu-dict-accent);
	text-decoration: none;
}

/* ── Responsive (this implementation's own breakpoints — no Figma mobile spec) ── */

@media (max-width: 900px) {
	.umu-dict-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.umu-dict-main {
		padding: 28px 16px 48px;
	}

	.umu-dict-title {
		font-size: 22px;
		margin-bottom: 20px;
	}

	.umu-dict-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.umu-dict-card {
		padding: 14px 18px;
	}

	.umu-dict-single-title {
		font-size: 24px;
		line-height: 1.4;
		letter-spacing: normal;
		margin-bottom: 20px;
	}

	.umu-dict-single-content {
		font-size: 16px;
		line-height: 1.7;
	}

	.umu-dict-related-title {
		font-size: 19px;
	}

	.umu-dict-related-row {
		flex-wrap: wrap;
		gap: 8px;
		padding: 16px 0;
	}

	.umu-dict-related-row-title {
		white-space: normal;
		flex: 1 1 100%;
	}
}