/* Component: detail-misc — shared polish for single-guideline, 404 and search
   templates. Enqueued after main.css via the components/*.css glob. Uses
   existing --scs-* vars only. No @keyframes / animation here. */

/* ---------------------------------------------------------------- Breadcrumbs */
.scs-crumbs {
	font-size: .85rem;
	color: var(--scs-muted, #68737D);
	margin-bottom: .75rem;
	letter-spacing: .01em;
}

.scs-crumbs a {
	color: var(--scs-muted, #68737D);
	text-decoration: none;
	transition: color .15s ease;
}

.scs-crumbs a:hover,
.scs-crumbs a:focus-visible {
	color: var(--scs-red, #24E35A);
}

.scs-crumbs [aria-current="page"] {
	color: var(--scs-ink, #101010);
}

/* ------------------------------------------------------- Topic badge pills */
.scs-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .6rem 0 1.25rem;
	font-size: 0;
}

.scs-badges a,
.scs-badges .wp-block-post-terms__separator {
	display: inline-block;
}

.scs-badges .wp-block-post-terms__separator {
	width: 0;
	overflow: hidden;
	font-size: 0;
}

.scs-badges a {
	font-family: "Inter Tight", system-ui, sans-serif;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--scs-red, #24E35A);
	background: #EAF7EC;
	border: 1px solid rgba(36, 227, 90, .18);
	border-radius: 999px;
	padding: .28rem .7rem;
	line-height: 1.2;
	transition: background .15s ease, color .15s ease;
}

.scs-badges a:hover,
.scs-badges a:focus-visible {
	background: var(--scs-red, #24E35A);
	color: #fff;
}

/* --------------------------------------------------- Readable article column */
.scs-article {
	max-width: 760px;
	color: var(--scs-body, #333);
	font-size: 1.05rem;
	line-height: 1.75;
}

.scs-article > * {
	margin-top: 0;
	margin-bottom: 1.15rem;
}

.scs-article h2 {
	font-size: 1.6rem;
	line-height: 1.25;
	margin-top: 2.25rem;
	margin-bottom: .75rem;
	color: var(--scs-ink, #101010);
	letter-spacing: -0.01em;
}

.scs-article h3 {
	font-size: 1.25rem;
	line-height: 1.3;
	margin-top: 1.75rem;
	margin-bottom: .6rem;
	color: var(--scs-ink, #101010);
}

.scs-article a {
	color: var(--scs-red, #24E35A);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.scs-article ul,
.scs-article ol {
	padding-inline-start: 1.35rem;
}

.scs-article li {
	margin-bottom: .4rem;
}

.scs-article blockquote {
	margin: 1.5rem 0;
	padding-block: .5rem;
	padding-inline-start: 1.1rem;
	padding-inline-end: 0;
	border-inline-start: 3px solid var(--scs-red, #24E35A);
	color: var(--scs-muted, #68737D);
	font-style: italic;
}

.scs-article code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
	background: var(--scs-surface, #F5F5F5);
	border: 1px solid var(--scs-surface-2, #EBEBEB);
	border-radius: 4px;
	padding: .1rem .35rem;
}

.scs-article pre {
	background: var(--scs-ink, #101010);
	color: #f5f5f5;
	border-radius: var(--scs-radius, 8px);
	padding: 1rem 1.15rem;
	overflow-x: auto;
	font-size: .9rem;
	line-height: 1.5;
}

.scs-article pre code {
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
}

.scs-article table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: var(--scs-radius, 8px);
	overflow: hidden;
	box-shadow: var(--scs-shadow);
	font-size: .95rem;
}

.scs-article th,
.scs-article td {
	padding: .7rem .9rem;
	text-align: start;
	border-bottom: 1px solid var(--scs-surface, #F5F5F5);
}

.scs-article th {
	background: var(--scs-surface, #F5F5F5);
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--scs-ink, #101010);
}

.scs-article img {
	max-width: 100%;
	height: auto;
	border-radius: var(--scs-radius, 8px);
}

/* ------------------------------------------------------- Related guidelines */
.scs-related {
	max-width: 760px;
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--scs-surface-2, #EBEBEB);
}

.scs-related > h2 {
	margin: 0 0 1rem;
	color: var(--scs-ink, #101010);
}

.scs-related .scs-card {
	padding: 1rem 1.1rem;
}

.scs-related .scs-card h3 {
	margin: 0 0 .5rem;
}

.scs-related .scs-card h3 a {
	color: var(--scs-ink, #101010);
	text-decoration: none;
	transition: color .15s ease;
}

.scs-related .scs-card h3 a:hover,
.scs-related .scs-card h3 a:focus-visible {
	color: var(--scs-red, #24E35A);
}

.scs-related .scs-badges {
	margin: 0;
}

/* ----------------------------------------------------------------- 404 page */
.scs-404 {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
}

.scs-404__num {
	margin: 0;
	font-family: "Inter Tight", system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(5rem, 18vw, 9rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--scs-red, #24E35A);
}

.scs-404 h1 {
	margin: .25rem 0 0;
	color: var(--scs-ink, #101010);
}

.scs-404__lede {
	max-width: 460px;
	margin: .5rem auto 1.5rem;
	color: var(--scs-muted, #68737D);
	font-size: 1.05rem;
	line-height: 1.6;
}

.scs-404 .wp-block-search {
	max-width: 440px;
	width: 100%;
	margin: 0 auto 1.75rem;
}

.scs-404__links {
	gap: .6rem;
}

/* --------------------------------------------------------- Search results */
.scs-searchform {
	max-width: 480px;
	margin: 1rem 0 2rem;
}

.scs-searchresults {
	max-width: 760px;
}

.scs-searchrow {
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--scs-surface-2, #EBEBEB);
}

.scs-searchrow:first-child {
	padding-top: 0;
}

.scs-searchrow__title {
	margin: 0 0 .35rem;
}

.scs-searchrow__title a {
	color: var(--scs-ink, #101010);
	text-decoration: none;
	transition: color .15s ease;
}

.scs-searchrow__title a:hover,
.scs-searchrow__title a:focus-visible {
	color: var(--scs-red, #24E35A);
}

.scs-searchrow__meta {
	gap: .5rem;
	margin: 0 0 .4rem;
	font-size: .8rem;
	color: var(--scs-muted, #68737D);
	text-transform: uppercase;
	letter-spacing: .03em;
}

.scs-searchrow__meta time,
.scs-searchrow__meta .wp-block-post-date {
	color: var(--scs-muted, #68737D);
}

.scs-searchrow .wp-block-post-excerpt {
	margin: 0;
	color: var(--scs-body, #333);
	line-height: 1.6;
}

.scs-searchrow .wp-block-post-excerpt__more-link {
	color: var(--scs-red, #24E35A);
	font-weight: 600;
	text-decoration: none;
}

.scs-searchrow .wp-block-post-excerpt__more-link:hover {
	text-decoration: underline;
}

.scs-noresults {
	max-width: 560px;
	padding: 1.5rem 0;
	color: var(--scs-muted, #68737D);
}

.scs-noresults p {
	margin: 0 0 1rem;
	font-size: 1.05rem;
}

.wp-block-query-pagination {
	margin-top: 1.75rem;
	gap: .5rem;
}

/* --------------------------------------------------------------- Responsive */
@media (max-width: 768px) {
	.scs-article {
		font-size: 1rem;
		line-height: 1.7;
	}

	.scs-article h2 {
		font-size: 1.4rem;
	}

	.scs-article table {
		display: block;
		overflow-x: auto;
	}

	.scs-404__lede {
		font-size: 1rem;
	}
}

@media (max-width: 375px) {
	.scs-404__num {
		font-size: clamp(4rem, 26vw, 6rem);
	}

	.scs-badges a {
		font-size: .72rem;
		padding: .24rem .55rem;
	}

	.scs-searchrow {
		padding: .95rem 0;
	}
}