/* Native body, headings and links use GeneratePress settings. */

/* Blue gradient separators; explicit theme choice overrides the OS preference. */
.pm-v2 hr:not(.is-style-dots) {
	height: 1px;
	margin: var(--sp-5) 0;
	padding: 0;
	border: 0;
	background: linear-gradient(to right, transparent, rgba(0, 136, 255, 0.65), transparent);
	opacity: 1;
}

html.dark .pm-v2 hr:not(.is-style-dots),
body.pm-v2.dark-mode hr:not(.is-style-dots),
[data-theme="dark"] .pm-v2 hr:not(.is-style-dots),
.pm-v2[data-theme="dark"] hr:not(.is-style-dots) {
	background: linear-gradient(to right, transparent, rgba(59, 160, 255, 0.85), transparent);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .pm-v2 hr:not(.is-style-dots) {
		background: linear-gradient(to right, transparent, rgba(59, 160, 255, 0.85), transparent);
	}
}

/* Shared section-heading treatment for related content and widget modules. */
.pm-v2 .pm-related__title,
.pm-v2 .widget-title,
.pm-v2 .pm-rail__title {
	position: relative;
	margin: 0 0 var(--sp-5);
	padding: 0 0 var(--sp-2);
	border: 0;
	border-bottom: var(--bw) solid var(--border);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	line-height: 1.35;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* Content-owned headings keep the portal text token; widget title colors belong to GP. */
.pm-v2 .pm-related__title,
.pm-v2 .pm-rail__title { color: var(--text); }

.pm-v2 .pm-related__title::after,
.pm-v2 .widget-title::after,
.pm-v2 .pm-rail__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 28px;
	height: 2px;
	background-color: var(--primary);
}

/*
 * POST-FOOTER TERM LISTS — categories and tags, styled as ONE system.
 *
 * GeneratePress prints the post's categories (`.cat-links`) and tags (`.tags-links`) in
 * the entry footer (`<footer class="entry-meta">`). Three things were wrong:
 *
 *   1. The category list is a real `<ul class="post-categories">` with `<li>` children,
 *      so it inherited the browser's list bullet and indent while the tag list — a run
 *      of bare `<a>` — did not.
 *   2. Every term was separated by a literal "," (GP's own separator). Removed at the
 *      SOURCE now (`pm_v2_term_separator()` empties it for both contexts).
 *   3. BOTH groups were INLINE siblings inside `.entry-meta`, so the folder icon and the
 *      tag icon ended up wedged BETWEEN the two chip runs on one long line, and the two
 *      labels did not share a left edge.
 *
 * THE FIX FOR (3): `.entry-meta` is a COLUMN. The category group is row one and the tag
 * group is row two, each starting at the same left edge with its icon leading its own
 * row. That is what makes it read as two labelled rows instead of one mixed strip.
 */
.pm-v2 .entry-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
	margin-block: var(--sp-5) 0;
}

/* Each group is one row: icon first, then its chips. */
.pm-v2 .cat-links,
.pm-v2 .tags-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
}

/* The category row's inner list is flattened to match the flat tag row. */
.pm-v2 .cat-links ul.post-categories,
.pm-v2 .cat-links .post-categories {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-v2 .cat-links .post-categories li,
.pm-v2 .cat-links ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The GP term icon (folder / tag glyph) leads its own row. */
.pm-v2 .entry-meta .gp-icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	color: var(--muted);
	line-height: 1;
}

.pm-v2 .entry-meta .gp-icon svg {
	width: 1em;
	height: 1em;
}

/* ONE chip shape for both rows. */
.pm-v2 .cat-links a,
.pm-v2 .tags-links a {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 2px var(--sp-3);
	border: var(--bw) solid var(--border);
	border-radius: var(--r-sm);
	background-color: var(--surface-muted);
	color: var(--text);
	font-size: var(--fs-meta);
	line-height: 1.2;
	text-decoration: none;
	transition: border-color var(--pm-ease), color var(--pm-ease), background-color var(--pm-ease);
}

.pm-v2 .cat-links a:hover,
.pm-v2 .tags-links a:hover,
.pm-v2 .cat-links a:focus-visible,
.pm-v2 .tags-links a:focus-visible {
	border-color: var(--primary);
	background-color: var(--primary-soft);
	color: var(--primary);
}

/* Visible focus for keyboard users only. Never removed, never !important. */
.pm-v2 a:focus-visible,
.pm-v2 button:focus-visible,
.pm-v2 input:focus-visible,
.pm-v2 summary:focus-visible,
.pm-v2 [tabindex]:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

/* Tables and any tabular readout align on the digit grid. */
.pm-v2 table,
.pm-v2 .pm-tnum {
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.pm-v2 code,
.pm-v2 pre,
.pm-v2 kbd {
	font-family: var(--pm-font-mono);
	font-size: 0.875em;
}

/*
 * Reduced motion: honour the OS preference.
 *
 * `!important` is deliberate and is the one place this theme uses it. The rule has to
 * beat EVERY component's `transition` shorthand (`.pm-v2 .site-footer .tagcloud a…`,
 * the rail link, the CTA, the cards), each of which sets `transition-duration`
 * explicitly at a specificity a universal selector can never match. Without the flag
 * the override silently loses the cascade and a prefers-reduced-motion visitor still
 * gets full-duration transitions - the exact failure the preference exists to prevent.
 * It only ever touches timing, never layout, colour or content.
 */
@media (prefers-reduced-motion: reduce) {
	.pm-v2 *,
	.pm-v2 *::before,
	.pm-v2 *::after {
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}

	/*
	 * Neutralise duration is not enough for a hover LIFT: the transform still moves,
	 * just instantly. The whole-row and whole-tile hover effects therefore drop their
	 * movement under this preference and keep only the colour change, so a
	 * reduced-motion visitor gets no motion at all.
	 */
	.pm-v2 .pm-software-card__link:hover,
	.pm-v2 .pm-post-item:hover .pm-post-item__media,
	.pm-v2 .pm-post-item:focus-within .pm-post-item__media {
		transform: none;
	}
}