/*
 * NSEMM blog stylesheet (handle: nsemm-blog).
 *
 * Owns ONLY the blog/news-SPECIFIC pieces of the ARCHIVE + SINGLE page types:
 * the inline archive search, the category chip filter row, the post-card grid +
 * cards, the archive pagination + empty state, and the single-post category
 * pill. Enqueued conditionally by functions.php on the posts index, post
 * archives and single posts (after nsemm-theme-interior), so it never weighs on
 * the homepage or other page types.
 *
 * The shared §18 interior chrome is owned by the interior-foundation stylesheet
 * (assets/css/interior.css) and CONSUMED here, not re-implemented:
 *   .nsemm-interior   -> the Sandy-Brown page canvas (our <main> opts in)
 *   .nsemm-pg-hero    -> title/breadcrumb region on the sandy canvas
 *   .nsemm-breadcrumb -> the "Home / Blog & News / ..." trail
 *   .nsemm-pg-title   -> the page H1 (the title-pill tracks this)
 *   .nsemm-last-updated -> the "Last updated <date>" meta line
 *   .nsemm-card       -> the white prose card (~820px) for the single article
 *   .nsemm-scroll-progress / .nsemm-page-title-bar -> driven by title-pill.js
 * This file adds nothing that interior.css already provides; it would only
 * duplicate (and risk fighting) the shared canvas/hero/card rules.
 *
 * Faithful to /var/www/nsemm-design/blog-archive.html and blog-single.html.
 *
 * HARD-WON RULES honoured:
 *   - Every selector is namespaced under .nsemm-blog-archive / .nsemm-blog-single
 *     (never a bare WP body/landmark class, never a bare tag selector).
 *   - Brand colours read from the local var map (mapped from the theme.json
 *     preset custom properties) so Brand-Sync keeps recolouring this file.
 *     Shadows/alpha use color-mix on the brand vars, never an rgba hex literal.
 *   - Buttons are plain <a class="btn-..."> anchors, never core wp:button.
 *   - Icons are self-hosted Font Awesome <i class="fa-solid fa-...">.
 *
 * The local var names mirror interior.css/theme.css so the file reads the same
 * as the wireframe; they are re-declared (not inherited) so this stylesheet is
 * self-contained regardless of cascade order.
 */
:root {
	--blue: var(--wp--preset--color--university-blue);
	--gold: var(--wp--preset--color--knowledge-gold);
	--teal: var(--wp--preset--color--discovery-teal);
	--brown: var(--wp--preset--color--foundational-brown);
	--sandy: var(--wp--preset--color--sandy-brown);
	--midnight: var(--wp--preset--color--midnight);
	--bg: var(--wp--preset--color--white);
	--gold-dark: #D4AC00; /* hover shade, not a palette slug */
	--r-pill: 9999px;
	--r-card: 16px;
	--body: var(--wp--preset--font-family--readex-pro);
	--head: var(--wp--preset--font-family--sora);
}

/* == ARCHIVE PAGE VERTICAL RHYTHM ==
   interior.css gives .nsemm-pg-hero 28px top + 36px bottom padding and the
   .nsemm-interior wrapper 64px bottom padding. For the news archive that makes
   the title band feel heavier than the card grid it leads into. Tighten to a
   balanced 20px/24px hero inset and 40px bottom canvas gap so the chips and
   card grid feel closer to the headline. Scoped to .nsemm-blog-archive so the
   single-post interior layout (nsemm-blog-single) and other interior pages are
   untouched. */
.nsemm-blog-archive.nsemm-interior {
	padding-bottom: 40px;
}
.nsemm-blog-archive .nsemm-pg-hero {
	padding-top: 20px;
	padding-bottom: 24px;
}

/* == ARCHIVE TITLE ROW ==
   On the archive/index the search box sits inline to the right of the page H1,
   baseline-aligned, wrapping on narrow screens (Spec A 18). The H1 itself keeps
   the shared .nsemm-pg-title styling from interior.css; here we only drive the
   row layout. The .nsemm-pg-hero owns the side padding, so the row spans it. */
.nsemm-blog-archive .nsemm-blog-titlerow {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
}
/* The interior .nsemm-pg-title has 18px 0 28px padding; in the inline row we
   drop the bottom padding so the title baseline meets the search box, matching
   the wireframe's style="padding-bottom:0". */
.nsemm-blog-archive .nsemm-blog-titlerow .nsemm-pg-title {
	padding-bottom: 0;
}

/* == ARCHIVE SEARCH BOX ==
   Wraps the core wp:search block. Scoped so it matches the wireframe's inline
   pill without touching core search colours globally. */
.nsemm-blog-archive .nsemm-blog-search {
	max-width: 320px;
	flex: 1;
	min-width: 220px;
	margin: 0;
}
.nsemm-blog-archive .nsemm-blog-search .wp-block-search__inside-wrapper {
	display: flex;
	gap: 10px;
	border: none;
	padding: 0;
}
.nsemm-blog-archive .nsemm-blog-search .wp-block-search__input {
	flex: 1;
	border: 2px solid var(--sandy);
	border-radius: var(--r-pill);
	padding: 14px 22px;
	font-family: var(--body);
	font-size: 15px;
	background: var(--bg);
	color: var(--midnight);
}
.nsemm-blog-archive .nsemm-blog-search .wp-block-search__input:focus {
	outline: none;
	border-color: var(--blue);
}
.nsemm-blog-archive .nsemm-blog-search .wp-block-search__button {
	background: var(--blue);
	color: var(--bg);
	border: none;
	border-radius: var(--r-pill);
	padding: 0 26px;
	margin: 0;
	font-family: var(--head);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background .18s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.nsemm-blog-archive .nsemm-blog-search .wp-block-search__button:hover {
	background: color-mix(in srgb, var(--blue) 85%, black);
}

/* == CATEGORY CHIP ROW ==
   The taxonomy filter (News, Achievements, Events, Safeguarding). Plain <a>
   chips; "All" returns to the blog index. On the sandy canvas the resting chip
   is white (Spec A 18 accent-on-sandy switch); active/hover is blue. The row
   shares the hero's 64px side padding so it lines up with the title above and
   the grid below. */
.nsemm-blog-archive .nsemm-blog-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	max-width: 1320px;
	margin: 0 auto 32px;
	padding: 0 64px;
}
.nsemm-blog-archive .nsemm-blog-chip {
	font-family: var(--head);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 16px;
	border-radius: var(--r-pill);
	background: var(--bg);
	color: var(--blue);
	border: none;
	cursor: pointer;
	text-decoration: none;
	opacity: .85;
	transition: background .18s, color .18s, opacity .18s;
}
.nsemm-blog-archive .nsemm-blog-chip:hover,
.nsemm-blog-archive .nsemm-blog-chip.is-active {
	background: var(--blue);
	color: var(--bg);
	opacity: 1;
}

/* == ARCHIVE GRID (post cards) ==
   Three-column grid of post cards, one column on mobile. Wraps the core Query
   Loop's post-template. Matches the wireframe .archive-grid. */
.nsemm-blog-archive .nsemm-blog-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1320px;
	margin: 0 auto 64px;
	padding: 0 64px;
	list-style: none;
}

/* == POST CARD ==
   The wireframe .svc card, forced white on the sandy canvas. Category pill, then
   the linked title, excerpt and Read more link. The whole card lifts on hover /
   focus-within (the title link is the focus target). */
.nsemm-blog-card {
	background: var(--bg);
	border-radius: var(--r-card);
	padding: 36px 36px 32px;
	border: 1px solid color-mix(in srgb, var(--midnight) 4%, transparent);
	display: flex;
	flex-direction: column;
	height: 100%;
	opacity: .95;
	transition: box-shadow .3s ease, transform .3s ease, opacity .25s ease;
}
.nsemm-blog-card:hover,
.nsemm-blog-card:focus-within {
	box-shadow: 0 10px 36px color-mix(in srgb, var(--midnight) 9%, transparent);
	transform: translateY(-4px);
	opacity: 1;
}
/* Category pill (post-terms). The wireframe .svc-num: gold text on a blue pill. */
.nsemm-blog-card .nsemm-blog-card-cat,
.nsemm-blog-card .nsemm-blog-card-cat.wp-block-post-terms {
	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: .04em;
	align-self: flex-start;
}
.nsemm-blog-card .nsemm-blog-card-cat a {
	color: var(--gold);
	text-decoration: none;
}
.nsemm-blog-card .wp-block-post-title {
	font-family: var(--head);
	font-size: 21px;
	font-weight: 700;
	color: var(--blue);
	margin: 0 0 12px;
	line-height: 1.25;
}
.nsemm-blog-card .wp-block-post-title a {
	color: var(--blue);
	text-decoration: none;
}
.nsemm-blog-card .wp-block-post-title a:hover {
	color: var(--brown);
}
.nsemm-blog-card .wp-block-post-excerpt {
	margin: 0 0 20px;
	flex: 1;
}
.nsemm-blog-card .wp-block-post-excerpt__excerpt {
	font-size: 15px;
	opacity: .72;
	line-height: 1.65;
	color: var(--midnight);
}
/* The "Read more" excerpt link, styled as the wireframe .svc-link. */
.nsemm-blog-card .wp-block-post-excerpt__more-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;
	margin-top: auto;
}
.nsemm-blog-card .wp-block-post-excerpt__more-link:hover {
	color: var(--brown);
}

/* == ARCHIVE PAGINATION ==
   Centred pill-style number links on the sandy canvas. */
.nsemm-blog-archive .nsemm-blog-grid .wp-block-query-pagination {
	max-width: 1320px;
	margin: 0 auto 80px;
	padding: 0 64px;
	gap: 10px;
	font-family: var(--head);
	font-weight: 600;
}
.nsemm-blog-archive .nsemm-blog-grid .wp-block-query-pagination a {
	color: var(--blue);
	text-decoration: none;
}
.nsemm-blog-archive .nsemm-blog-grid .wp-block-query-pagination .page-numbers.current {
	color: var(--brown);
}

/* == EMPTY STATE ==
   Query no-results card. Matches the wireframe .empty-state pattern. */
.nsemm-blog-archive .nsemm-blog-empty {
	max-width: 520px;
	margin: 40px auto 100px;
	text-align: center;
	padding: 0 24px;
}
.nsemm-blog-archive .nsemm-blog-empty .nsemm-blog-empty-ico {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 28px;
}
.nsemm-blog-archive .nsemm-blog-empty .nsemm-blog-empty-ico i {
	font-size: 34px;
	color: var(--blue);
}
.nsemm-blog-archive .nsemm-blog-empty h2 {
	font-family: var(--head);
	font-size: 26px;
	color: var(--blue);
	font-weight: 700;
	margin: 0 0 10px;
}
.nsemm-blog-archive .nsemm-blog-empty p {
	font-size: 15px;
	opacity: .65;
	line-height: 1.7;
	margin: 0 0 28px;
	color: var(--midnight);
}

/* == SINGLE-POST CATEGORY PILL ==
   The category pill above the H1 on the single post (the wireframe .svc-num
   colourway). The title, breadcrumb, last-updated line and the white prose card
   itself all come from interior.css; this is the only blog-specific addition on
   the single. */
.nsemm-blog-single .nsemm-blog-article-cat,
.nsemm-blog-single .nsemm-blog-article-cat.wp-block-post-terms {
	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: 14px;
	letter-spacing: .04em;
}
.nsemm-blog-single .nsemm-blog-article-cat a {
	color: var(--gold);
	text-decoration: none;
}

/* == RESPONSIVE ==
   Match the wireframe's 900px breakpoint for the blog-specific pieces. The
   shared hero/card breakpoints live in interior.css. */
@media (max-width: 900px) {
	.nsemm-blog-archive .nsemm-blog-chips {
		padding: 0 24px;
	}
	.nsemm-blog-archive .nsemm-blog-grid .wp-block-post-template {
		grid-template-columns: 1fr;
		padding: 0 24px;
	}
	.nsemm-blog-archive .nsemm-blog-grid .wp-block-query-pagination {
		padding: 0 24px;
	}
}