/*
 * NSEMM policy page-type stylesheet (handle: nsemm-theme-policy).
 *
 * Loaded ONLY on the policy CPT single, the policy archive and the
 * policy-category taxonomy archive (see nsemm_theme_enqueue_assets()).
 *
 * Faithful to /var/www/nsemm-design/policy-archive.html and policy-single.html:
 *   - interior SANDY canvas, content in WHITE rounded cards
 *   - archive: breadcrumb + title on the sandy ground, a category-chip filter
 *     row, then a 3-up grid of white policy cards
 *   - single: breadcrumb + title + last-updated on the sandy ground, the policy
 *     body in a single centred white prose card (~820px) with two plain-anchor
 *     action buttons (Download as PDF, View in Policy System)
 *
 * Every selector is namespaced under .nsemm-policy-archive / .nsemm-policy-single
 * so no bare WordPress body/landmark class can be styled (Spec A integration
 * rule 1 + 2). Colours come from the global var map (theme.css :root), so
 * Brand-Sync keeps recolouring this at runtime. Alpha shades go through
 * color-mix, never an rgba/hex literal (rule 4). Buttons are the wireframe's
 * plain .btn-o anchors, never core wp:button (rule 3).
 *
 * The floating page-title pill, the Contents & Share FAB and the scroll-progress
 * bar are shared interior chrome owned by the interior-foundation package; they
 * are intentionally NOT defined here.
 */

/* == SHARED SANDY-CANVAS HEAD (breadcrumb + title + meta) == */
.nsemm-policy-archive,
.nsemm-policy-single {
	background: var(--sandy);
}

.nsemm-policy-archive .pg-hero,
.nsemm-policy-single .pg-hero {
	max-width: 1320px;
	margin: 0 auto;
	padding: 28px 64px 36px;
}

.nsemm-policy-archive .breadcrumb,
.nsemm-policy-single .breadcrumb {
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
	font-family: var(--head);
	font-size: 13px;
	color: color-mix(in srgb, var(--midnight) 50%, transparent);
}

.nsemm-policy-archive .breadcrumb p,
.nsemm-policy-single .breadcrumb p {
	margin: 0;
	font-size: 13px;
}

.nsemm-policy-archive .breadcrumb a,
.nsemm-policy-single .breadcrumb a,
.nsemm-policy-archive .breadcrumb .wp-block-home-link,
.nsemm-policy-single .breadcrumb .wp-block-home-link {
	color: var(--blue);
	text-decoration: none;
	opacity: 0.8;
}

.nsemm-policy-archive .breadcrumb a:hover,
.nsemm-policy-single .breadcrumb a:hover {
	opacity: 1;
}

.nsemm-policy-archive .breadcrumb-sep,
.nsemm-policy-single .breadcrumb-sep {
	opacity: 0.5;
}

.nsemm-policy-archive .nsemm-pg-title,
.nsemm-policy-single .nsemm-pg-title {
	font-family: var(--head);
	font-size: 42px;
	font-weight: 700;
	color: var(--blue);
	line-height: 1.15;
	padding: 18px 0 28px;
	max-width: 760px;
}

/* Single-policy last-updated + version line on the sandy ground. */
.nsemm-policy-single .last-updated {
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: color-mix(in srgb, var(--midnight) 55%, transparent);
	font-family: var(--head);
	margin-bottom: 8px;
}

.nsemm-policy-single .last-updated p,
.nsemm-policy-single .last-updated time {
	margin: 0;
	font-size: 13px;
}

/* == ARCHIVE: CATEGORY-CHIP FILTER ROW ==
   The core/categories block renders a <ul> of term links; we style each link as
   a pill so the term list reads as the wireframe's chip row. */
.nsemm-policy-archive .chip-row {
	gap: 8px;
	max-width: 1320px;
	margin: 0 auto 32px;
	padding: 0 40px;
}

.nsemm-policy-archive .chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nsemm-policy-archive .chip-list li {
	margin: 0;
	list-style: none;
}

.nsemm-policy-archive .chip-list a {
	display: inline-block;
	font-family: var(--head);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 16px;
	border-radius: var(--r-pill);
	background: var(--bg);
	color: var(--blue);
	text-decoration: none;
	opacity: 0.75;
	transition: background 0.18s, color 0.18s, opacity 0.18s;
}

.nsemm-policy-archive .chip-list a:hover,
.nsemm-policy-archive .chip-list li.current-cat a {
	background: var(--blue);
	color: var(--bg);
	opacity: 1;
}

/* == ARCHIVE: POLICY CARD GRID ==
   White cards (the interior treatment flips the sandy accent to white), each a
   policy summary that links through to the single policy. */
.nsemm-policy-archive .archive-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1320px;
	margin: 0 auto 64px;
	padding: 0 40px;
}

.nsemm-policy-archive .svc {
	background: var(--bg);
	border-radius: var(--r-card);
	padding: 36px 36px 32px;
	border: 1px solid color-mix(in srgb, var(--midnight) 4%, transparent);
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	opacity: 0.9;
	transition: box-shadow 0.3s ease, transform 0.3s ease,
		background 0.25s ease, opacity 0.25s ease;
}

.nsemm-policy-archive .svc:hover {
	box-shadow: 0 10px 36px color-mix(in srgb, var(--midnight) 9%, transparent);
	transform: translateY(-4px);
	background: color-mix(in srgb, var(--midnight) 3%, var(--bg));
	opacity: 1;
}

/* Category pill on the card (core/post-terms output). */
.nsemm-policy-archive .svc .svc-num {
	font-family: var(--head);
	font-size: 13px;
	font-weight: 700;
	color: var(--gold);
	background: var(--blue);
	display: inline-block;
	padding: 4px 12px;
	border-radius: 6px;
	margin-bottom: 20px;
	letter-spacing: 0.04em;
	align-self: flex-start;
}

.nsemm-policy-archive .svc .svc-num a {
	color: var(--gold);
	text-decoration: none;
}

.nsemm-policy-archive .svc h3,
.nsemm-policy-archive .svc h3 a {
	font-family: var(--head);
	font-size: 21px;
	font-weight: 700;
	color: var(--blue);
	margin-bottom: 12px;
	line-height: 1.25;
	text-decoration: none;
}

.nsemm-policy-archive .svc p {
	font-size: 15px;
	opacity: 0.72;
	line-height: 1.65;
	margin-bottom: 20px;
	flex: 1;
}

.nsemm-policy-archive .svc .svc-link-row {
	margin-top: auto;
}

.nsemm-policy-archive .svc .svc-link {
	font-family: var(--head);
	font-size: 14px;
	font-weight: 600;
	color: var(--blue);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* == ARCHIVE: PAGINATION + EMPTY STATE == */
.nsemm-policy-archive .nsemm-policy-pagination {
	max-width: 1320px;
	margin: 0 auto 64px;
	padding: 0 40px;
	font-family: var(--head);
}

.nsemm-policy-archive .nsemm-policy-pagination a,
.nsemm-policy-archive .nsemm-policy-pagination .wp-block-query-pagination-numbers {
	color: var(--blue);
	text-decoration: none;
	font-weight: 600;
}

.nsemm-policy-archive .empty-state {
	max-width: 520px;
	margin: 40px auto 100px;
	text-align: center;
	padding: 0 24px;
}

/* Circular icon badge above the empty-state heading (wireframe: 84px circle,
   white interior fill, blue FA glyph). Self-hosted FA <i>, no inline SVG. */
.nsemm-policy-archive .empty-state .ico {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 28px;
}

.nsemm-policy-archive .empty-state .ico i {
	font-size: 32px;
	color: var(--blue);
}

.nsemm-policy-archive .empty-state h2 {
	font-family: var(--head);
	font-size: 26px;
	color: var(--blue);
	font-weight: 700;
	margin-bottom: 10px;
}

.nsemm-policy-archive .empty-state p {
	font-size: 15px;
	opacity: 0.65;
	line-height: 1.7;
	margin-bottom: 28px;
}

/* == SINGLE: WHITE PROSE CARD ==
   A single centred white card (~820px) holding the policy body. */
.nsemm-policy-single .nsemm-policy-card {
	background: var(--bg);
	border-radius: var(--r-card);
	padding: 48px;
	max-width: 820px;
	margin: 0 auto 64px;
	box-shadow: 0 4px 20px color-mix(in srgb, var(--midnight) 5%, transparent);
}

.nsemm-policy-single .nsemm-policy-card p {
	font-size: 16px;
	line-height: 1.8;
	opacity: 0.85;
	margin-bottom: 18px;
}

.nsemm-policy-single .nsemm-policy-card h2 {
	font-family: var(--head);
	font-size: 24px;
	color: var(--blue);
	font-weight: 700;
	margin: 32px 0 14px;
	padding-top: 6px;
}

.nsemm-policy-single .nsemm-policy-card h3 {
	font-family: var(--head);
	font-size: 19px;
	color: var(--blue);
	font-weight: 700;
	margin: 26px 0 12px;
}

.nsemm-policy-single .nsemm-policy-card ul,
.nsemm-policy-single .nsemm-policy-card ol {
	margin: 0 0 18px 22px;
	font-size: 16px;
	line-height: 1.8;
	opacity: 0.85;
}

.nsemm-policy-single .nsemm-policy-card a {
	color: var(--blue);
	text-underline-offset: 3px;
}

/* == SINGLE: POLICY ACTION BUTTONS ==
   Plain .btn-o anchors (never core wp:button). The interior var map provides
   the brand colours; this defines the outline button since the global sheet
   only ships the hero buttons. */
.nsemm-policy-single .nsemm-policy-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.nsemm-policy-single .nsemm-policy-actions .btn-o {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: transparent;
	color: var(--blue);
	font-family: var(--head);
	font-size: 13px;
	font-weight: 600;
	padding: 9px 22px;
	border-radius: var(--r-pill);
	text-decoration: none;
	border: 2px solid color-mix(in srgb, var(--blue) 30%, transparent);
	transition: border-color 0.18s ease, background 0.18s ease,
		transform 0.18s ease, color 0.18s ease;
	cursor: pointer;
}

.nsemm-policy-single .nsemm-policy-actions .btn-o:hover {
	background: color-mix(in srgb, var(--midnight) 5%, transparent);
	border-color: var(--brown);
	transform: translateY(-1px);
}

.nsemm-policy-single .nsemm-policy-actions .btn-o i {
	font-size: 14px;
}

/* == RESPONSIVE == */
@media (max-width: 900px) {
	.nsemm-policy-archive .pg-hero,
	.nsemm-policy-single .pg-hero {
		padding: 40px 24px 24px;
	}

	.nsemm-policy-archive .nsemm-pg-title,
	.nsemm-policy-single .nsemm-pg-title {
		font-size: 32px;
	}

	.nsemm-policy-archive .chip-row {
		padding: 0 20px;
	}

	.nsemm-policy-archive .archive-grid {
		grid-template-columns: 1fr;
		padding: 0 20px;
	}

	.nsemm-policy-archive .nsemm-policy-pagination {
		padding: 0 20px;
	}

	.nsemm-policy-single .nsemm-policy-card {
		margin: 0 20px 48px;
		padding: 28px;
	}
}