/*
Theme Name: Nsemwokrom
Theme URI: https://nsemwokrom.com
Author: King
Author URI: https://nsemwokrom.com
Description: Fast, mobile-first, ad-ready entertainment news theme for nsemwokrom.com. Magazine-grid homepage, NewsArticle schema, AdSense slots built in.
Version: 1.3.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nsemwokrom
Tags: news, blog, entertainment, magazine, custom-logo, featured-images, threaded-comments
*/

/* -------------------------------------------------------------------------
   Phase 2 — Design tokens.

   The palette, type scale and spacing scale live in theme.json so the editor
   and front end stay in sync. WordPress emits them as --wp--preset--* custom
   properties. Below we alias the ones we use most into shorter --nsem-* tokens
   so component CSS reads cleanly (BEM-ish), and so a future re-theme only
   touches theme.json.
   ------------------------------------------------------------------------- */

:root {
	/* Colour */
	--nsem-accent: var(--wp--preset--color--accent, #d81e5b);
	--nsem-accent-dark: var(--wp--preset--color--accent-dark, #b01548);
	--nsem-ink: var(--wp--preset--color--ink, #16161a);
	--nsem-muted: var(--wp--preset--color--ink-muted, #6b6b70);
	--nsem-surface: var(--wp--preset--color--surface, #ffffff);
	--nsem-canvas: var(--wp--preset--color--canvas, #f5f5f3);
	--nsem-border: var(--wp--preset--color--border, #e6e6e3);

	/* Category badge colours (match real nsemwokrom.com taxonomy; WCAG AA with white text) */
	--nsem-cat-news: var(--wp--preset--color--news, #d81e5b);
	--nsem-cat-gossip: var(--wp--preset--color--gossip, #c2410c);
	--nsem-cat-people: var(--wp--preset--color--people, #1f7d70);
	--nsem-cat-music: var(--wp--preset--color--music, #7b2cbf);
	--nsem-cat-politics: var(--wp--preset--color--politics, #1d3557);
	--nsem-cat-naija: var(--wp--preset--color--naija, #008751);
	--nsem-cat-lifestyle: var(--wp--preset--color--lifestyle, #c92a35);

	/* Type */
	--nsem-font-display: var(--wp--preset--font-family--display, system-ui, sans-serif);
	--nsem-font-headline: var(--wp--preset--font-family--headline, "Playfair Display", Georgia, "Times New Roman", serif);
	--nsem-font-body: var(--wp--preset--font-family--body, system-ui, sans-serif);

	/* Spacing aliases */
	--nsem-space-sm: var(--wp--preset--spacing--30, 0.75rem);
	--nsem-space-md: var(--wp--preset--spacing--40, 1rem);
	--nsem-space-lg: var(--wp--preset--spacing--50, 1.5rem);
	--nsem-space-xl: var(--wp--preset--spacing--60, 2rem);

	/* Shape */
	--nsem-radius: 10px;
	--nsem-radius-sm: 6px;
	--nsem-shadow: 0 1px 2px rgba(22, 22, 26, 0.06), 0 4px 16px rgba(22, 22, 26, 0.05);
	--nsem-container: 1100px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--nsem-font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--nsem-ink);
	background: var(--nsem-canvas);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--nsem-accent);
}

a:hover {
	color: var(--nsem-accent-dark);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--nsem-font-headline);
	font-weight: 900;
	line-height: 1.18;
	letter-spacing: 0;
	color: var(--nsem-ink);
}

:focus-visible {
	outline: 3px solid var(--nsem-accent);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.5rem 1rem;
	background: var(--nsem-ink);
	color: #fff;
}

.skip-link:focus {
	left: 0;
}

.site-container {
	width: min(var(--nsem-container), 100% - 2rem);
	margin-inline: auto;
}

.site-header,
.site-footer {
	padding: var(--nsem-space-md) 0;
	background: var(--nsem-surface);
	border-bottom: 1px solid var(--nsem-border);
}

.site-footer {
	border-top: 1px solid var(--nsem-border);
	border-bottom: 0;
	margin-top: var(--nsem-space-xl);
	color: var(--nsem-muted);
}

.site-branding a {
	font-family: var(--nsem-font-display);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--nsem-ink);
}

.entry {
	background: var(--nsem-surface);
	border: 1px solid var(--nsem-border);
	border-radius: var(--nsem-radius);
	padding: var(--nsem-space-lg);
	margin: var(--nsem-space-md) 0;
	box-shadow: var(--nsem-shadow);
}

.entry__title {
	margin: 0 0 0.25rem;
	font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
	line-height: 1.2;
}

.entry__title a {
	color: var(--nsem-ink);
	text-decoration: none;
}

.entry__title a:hover {
	color: var(--nsem-accent);
}

.entry__meta {
	color: var(--nsem-muted);
	font-size: 0.85rem;
	margin-bottom: var(--nsem-space-sm);
}

/* -------------------------------------------------------------------------
   Category badge — reusable label coloured per category. Used across cards,
   single header and archive headers in later phases. Default is the brand
   accent; per-category modifiers override it.
   ------------------------------------------------------------------------- */

.cat-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: max-content;
    padding: 4px 10px;
    border-radius: var(--nsem-radius-sm);
    font-family: var(--nsem-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.4;
    color: #fff;
    background: var(--nsem-accent);
}

.cat-badge:hover {
	color: #fff;
	filter: brightness(0.92);
}

.cat-badge--news      { background: var(--nsem-cat-news); }
.cat-badge--gossip    { background: var(--nsem-cat-gossip); }
.cat-badge--people    { background: var(--nsem-cat-people); }
.cat-badge--music     { background: var(--nsem-cat-music); }
.cat-badge--politics  { background: var(--nsem-cat-politics); }
.cat-badge--naija     { background: var(--nsem-cat-naija); }
.cat-badge--lifestyle { background: var(--nsem-cat-lifestyle); }

/* Pagination from the core posts-pagination block / the_posts_pagination */
.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsem-space-sm);
	margin: var(--nsem-space-xl) 0;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--nsem-border);
	border-radius: var(--nsem-radius-sm);
	background: var(--nsem-surface);
	text-decoration: none;
	color: var(--nsem-ink);
}

.nav-links .page-numbers.current {
	background: var(--nsem-accent);
	border-color: var(--nsem-accent);
	color: #fff;
}

/* "Load more" button (JS enhancement over the pagination links) */
.load-more {
	display: block;
	margin: var(--nsem-space-lg) auto var(--nsem-space-xl);
	padding: 0.75rem 2.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--nsem-accent);
	color: #fff;
	font-family: var(--nsem-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

.load-more:hover {
	background: var(--nsem-accent-dark);
}

.load-more[disabled] {
	opacity: 0.7;
	cursor: default;
}

/* =========================================================================
   Phase 3 — Header, navigation, footer.
   Mobile-first: hamburger + off-canvas-ish panel by default; primary nav
   becomes a horizontal bar at the `md` breakpoint.
   ========================================================================= */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute;
	word-wrap: normal !important;
}

/* ---- Header bar ---- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 0;
	transition: box-shadow 0.2s ease;
}

.site-header.is-stuck {
	box-shadow: 0 2px 12px rgba(22, 22, 26, 0.12);
}

.site-header__bar {
	display: flex;
	align-items: center;
	gap: var(--nsem-space-md);
	min-height: 60px;
	padding-block: 0.5rem;
}

.site-branding {
	margin-right: auto;
	display: flex;
	align-items: center;
}

.site-branding__title {
	font-family: var(--nsem-font-display);
	font-weight: 800;
	font-size: 1.4rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--nsem-ink);
}

.custom-logo {
	max-height: 44px;
	width: auto;
}

/* ---- Primary (desktop) nav ---- */
.primary-nav {
	display: none; /* shown at md */
}

.primary-nav__list,
.mobile-nav__list,
.footer-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.primary-nav__list a {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	font-family: var(--nsem-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	color: var(--nsem-ink);
	border-radius: var(--nsem-radius-sm);
}

.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a {
	color: var(--nsem-accent);
}

/* ---- Header action buttons (search + hamburger) ---- */
.header-actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.header-actions__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--nsem-radius-sm);
	cursor: pointer;
	color: var(--nsem-ink);
	font-size: 1.25rem;
}

.header-actions__btn:hover {
	background: var(--nsem-canvas);
}

/* Hamburger icon built from a single element + pseudos */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--nsem-ink);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---- Header search drawer ---- */
.header-search {
	border-top: 1px solid var(--nsem-border);
	background: var(--nsem-surface);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.header-search.header-search--open {
	max-height: 120px;
}

.header-search .search-form {
	padding-block: 0.75rem;
}

/* ---- Live search suggestions (filled by main.js) ---- */
.search-suggest {
	list-style: none;
	margin: 0;
	padding: 0 0 0.75rem;
}

.search-suggest a {
	display: block;
	padding: 0.5rem 0;
	border-top: 1px solid var(--nsem-border);
	font-family: var(--nsem-font-display);
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--nsem-ink);
	text-decoration: none;
}

.search-suggest a:hover {
	color: var(--nsem-accent);
}

.search-suggest__empty {
	padding: 0.5rem 0;
	border-top: 1px solid var(--nsem-border);
	color: var(--nsem-muted);
	font-size: 0.9rem;
}

/* Suggestions can make the drawer taller than the closed max-height. */
.header-search.header-search--open {
	max-height: 60vh;
	overflow-y: auto;
}

/* ---- Saved stories panel (header drawer, same pattern as the search) ---- */
.saved-panel {
	border-top: 1px solid var(--nsem-border);
	background: var(--nsem-surface);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.saved-panel.saved-panel--open {
	max-height: 60vh;
	overflow-y: auto;
}

.saved-panel .site-container {
	padding-block: 0.75rem;
}

.saved-panel__title {
	margin: 0 0 0.5rem;
	font-family: var(--nsem-font-display);
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nsem-muted);
}

.saved-panel__empty {
	margin: 0;
	color: var(--nsem-muted);
	font-size: 0.9rem;
}

.saved-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.saved-panel__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--nsem-border);
}

.saved-panel__item:last-child {
	border-bottom: 0;
}

.saved-panel__item a {
	flex: 1;
	min-width: 0;
	font-family: var(--nsem-font-display);
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--nsem-ink);
	text-decoration: none;
}

.saved-panel__item a:hover {
	color: var(--nsem-accent);
}

.saved-panel__remove {
	flex: none;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: var(--nsem-canvas);
	color: var(--nsem-muted);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.saved-panel__remove:hover {
	color: var(--nsem-ink);
}

/* ---- Mobile nav panel ----
   Lives inside the sticky header and drops down from the bar as an overlay, so
   it's always visible right under the header at any scroll position. */
.mobile-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 99;
	background: var(--nsem-surface);
	border-bottom: 1px solid var(--nsem-border);
	box-shadow: 0 10px 18px rgba(22, 22, 26, 0.14);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.mobile-nav.mobile-nav--open {
	max-height: 80vh;
	overflow-y: auto;
}

.mobile-nav__list a {
	display: block;
	padding: 0.9rem var(--nsem-space-md);
	font-family: var(--nsem-font-display);
	font-weight: 700;
	text-decoration: none;
	color: var(--nsem-ink);
	border-bottom: 1px solid var(--nsem-border);
}

.mobile-nav__list a:hover {
	background: var(--nsem-canvas);
	color: var(--nsem-accent);
}

/* ---- Search form ---- */
.search-form {
	display: flex;
	gap: 0.5rem;
}

.search-form__field {
	flex: 1;
	min-width: 0;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--nsem-border);
	border-radius: var(--nsem-radius-sm);
	font: inherit;
}

.search-form__submit {
	padding: 0.6rem 1rem;
	border: 0;
	border-radius: var(--nsem-radius-sm);
	background: var(--nsem-accent);
	color: #fff;
	font-family: var(--nsem-font-display);
	font-weight: 700;
	cursor: pointer;
}

.search-form__submit:hover {
	background: var(--nsem-accent-dark);
}

/* =========================================================================
   Ad slots — reserved, CLS-safe placeholders (live AdSense swapped in Phase 8).
   ========================================================================= */
.ad-zone {
	margin-block: var(--nsem-space-md);
}

.ad-slot {
	display: block;
	margin-inline: auto;
}

.ad-slot__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		45deg,
		#efefec,
		#efefec 10px,
		#f6f6f4 10px,
		#f6f6f4 20px
	);
	border: 1px dashed #d4d4cf;
	border-radius: var(--nsem-radius-sm);
}

.ad-slot__label {
	font-family: var(--nsem-font-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #a3a39d;
}

/* Reserved sizes (min-height prevents layout shift) */
.ad-slot--leaderboard { width: 100%; max-width: 728px; }
.ad-slot--leaderboard .ad-slot__inner { min-height: 90px; }

.ad-slot--billboard { width: 100%; max-width: 970px; }
.ad-slot--billboard .ad-slot__inner { min-height: 90px; }

.ad-slot--rectangle { width: 100%; max-width: 336px; }
.ad-slot--rectangle .ad-slot__inner { min-height: 280px; }

@media (max-width: 480px) {
	.ad-slot--leaderboard .ad-slot__inner,
	.ad-slot--billboard .ad-slot__inner { min-height: 100px; }
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer__widgets {
	display: grid;
	gap: var(--nsem-space-lg);
	padding-block: var(--nsem-space-xl);
	grid-template-columns: 1fr;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--nsem-space-sm);
	padding-block: var(--nsem-space-md);
	border-top: 1px solid var(--nsem-border);
}

.footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsem-space-md);
}

.footer-nav__list a {
	text-decoration: none;
	color: var(--nsem-muted);
	font-size: 0.9rem;
}

.footer-nav__list a:hover {
	color: var(--nsem-accent);
}

.site-footer__copy {
	margin: 0;
	font-size: 0.85rem;
	color: var(--nsem-muted);
}

/* =========================================================================
   Breakpoints
   ========================================================================= */
@media (min-width: 768px) {
	.primary-nav {
		display: block;
	}

	.nav-toggle {
		display: none;
	}

	.mobile-nav {
		display: none;
	}

	.site-footer__widgets {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================================================================
   Phase 4 — Homepage magazine grid.
   ========================================================================= */

.front-page > * {
	margin-block: var(--nsem-space-xl);
}

/* Category blocks: horizontally swipeable card rows on mobile (discovery
   without vertical weight — same scroll-snap pattern as the trending strip),
   regular grid from the md breakpoint. */
@media (max-width: 767px) {
	.category-block .card-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 72%;
		overflow-x: auto;
		padding-bottom: 0.5rem;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.category-block .card {
		scroll-snap-align: start;
	}
}

/* ---- Section header (badge + view all) ---- */
.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nsem-space-sm);
	margin-bottom: var(--nsem-space-md);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--nsem-ink);
}

.section-head__title {
	margin: 0;
	font-size: 1.1rem;
}

.section-head__flag {
	display: inline-block;
	padding: 0.2em 0.6em;
	background: var(--nsem-ink);
	color: #fff;
	border-radius: var(--nsem-radius-sm);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.section-head__more {
	font-family: var(--nsem-font-display);
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
	white-space: nowrap;
}

/* ---- Generic card ---- */
.card {
	display: flex;
	flex-direction: column;
	background: var(--nsem-surface);
	border: 1px solid var(--nsem-border);
	border-radius: var(--nsem-radius);
	overflow: hidden;
	box-shadow: var(--nsem-shadow);
}

.card__media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--nsem-canvas);
}

.card__image,
.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.card:hover .card__image {
	transform: scale(1.04);
}

.card__image--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--nsem-canvas), #e9e9e5);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--nsem-space-md);
}

.card__title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.25;
}

.card__title a {
	color: var(--nsem-ink);
	text-decoration: none;
}

.card__title a:hover {
	color: var(--nsem-accent);
}

.card__excerpt {
	margin: 0;
	color: var(--nsem-muted);
	font-size: 0.9rem;
}

.card__meta {
	margin: 0;
	color: var(--nsem-muted);
	font-size: 0.78rem;
	display: flex;
	gap: 0.4rem;
	align-items: center;
}

.cat-badge + .card__title,
.cat-badge + .trending__title {
	margin-top: 0.15rem;
}

/* ---- Featured / hero card (overlaid title) ---- */
.card--featured .card__media {
	aspect-ratio: 16 / 9;
}

.card--featured {
	position: relative;
}

.card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 8, 12, 0.92) 0%, rgba(8, 8, 12, 0.55) 35%, rgba(8, 8, 12, 0.12) 68%, rgba(8, 8, 12, 0) 100%);
}

.card__body--overlay {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--nsem-space-lg);
	color: #fff;
	z-index: 1;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.card__title--featured {
	font-size: clamp(1.4rem, 1.1rem + 2.2vw, 2.4rem);
	line-height: 1.1;
}

.card__body--overlay .card__title a {
	color: #fff;
}

.card__body--overlay .card__title a:hover {
	color: #fff;
	text-decoration: underline;
}

.card__body--overlay .card__meta {
	color: rgba(255, 255, 255, 0.85);
}

/* ---- Hero layout ---- */
.hero__grid {
	display: grid;
	gap: var(--nsem-space-md);
	grid-template-columns: 1fr;
}

.hero__secondary {
	display: grid;
	gap: var(--nsem-space-md);
	grid-template-columns: 1fr; /* full-width mini cards so image + title have room */
}

/* Compact horizontal card — used for the hero's secondary stories so the right
   column balances the height of the lead, like the magazine mockup. */
.card--mini {
	flex-direction: row;
	align-items: stretch;
}

.card--mini .card__media {
	width: 40%;
	flex: 0 0 40%;
	aspect-ratio: 1 / 1;
}

.card--mini .card__body {
	flex: 1;
	justify-content: center;
	padding: 0.6rem 0.85rem;
	gap: 0.35rem;
}

.card--mini .card__title {
	font-size: 0.98rem;
	line-height: 1.2;
}

.card--mini .card__excerpt {
	display: none;
}

/* ---- Card grid (category blocks, archives) ---- */
.card-grid {
	display: grid;
	gap: var(--nsem-space-md);
	grid-template-columns: 1fr 1fr;
}

/* ---- Trending strip ---- */
.trending__list {
	list-style: none;
	margin: 0;
	padding: 0 0 0.5rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: var(--nsem-space-md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.trending__item {
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: auto 64px 1fr;
	align-items: center;
	gap: 0.6rem;
	background: var(--nsem-surface);
	border: 1px solid var(--nsem-border);
	border-radius: var(--nsem-radius);
	padding: 0.6rem;
}

.trending__rank {
	font-family: var(--nsem-font-display);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--nsem-accent);
	width: 1.4em;
	text-align: center;
}

.trending__thumb {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: var(--nsem-radius-sm);
	overflow: hidden;
	background: var(--nsem-canvas);
}

.trending__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.trending__title {
	margin: 0.15rem 0 0;
	font-size: 0.92rem;
	line-height: 1.2;
}

.trending__title a {
	color: var(--nsem-ink);
	text-decoration: none;
}

.trending__title a:hover {
	color: var(--nsem-accent);
}

/* ---- Homepage breakpoints ---- */
@media (min-width: 768px) {
	.hero__grid {
		grid-template-columns: 1.6fr 1fr;
		align-items: stretch;
	}

	.hero__secondary {
		grid-template-columns: 1fr;
		align-content: stretch;
	}

	/* Lead fills the row height so it balances the stacked secondary cards. */
	.hero__lead,
	.hero__lead .card--featured {
		height: 100%;
	}

	.hero__lead .card--featured .card__media {
		height: 100%;
		aspect-ratio: auto;
	}

	.card-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.trending__list {
		grid-auto-columns: minmax(260px, 1fr);
	}

	.section-head__title {
		font-size: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.trending__list {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-flow: row;
		overflow: visible;
	}
}

/* =========================================================================
   Phase 5 — Single article.
   ========================================================================= */

.single {
	padding-block: var(--nsem-space-lg) var(--nsem-space-xl);
}

.single-header {
	margin-bottom: var(--nsem-space-md);
}

.single-header__title {
	margin: 0.5rem 0 0.75rem;
	font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.25rem);
	line-height: 1.2;
}

.single-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45rem;
	color: var(--nsem-muted);
	font-size: 0.9rem;
}

.single-meta__avatar {
	border-radius: 50%;
	border: 2px solid var(--nsem-border);
	margin-right: 0.25rem;
}

.single-meta a {
	color: var(--nsem-ink);
	font-weight: 600;
	text-decoration: none;
}

.single-meta__updated {
	color: var(--nsem-accent-dark);
	font-weight: 600;
}

.single-meta__updated time {
	font-weight: 600;
}

.single-meta a:hover {
	color: var(--nsem-accent);
}

/* Hero image — fits the article column (no longer full-bleed) */
.single-hero {
	margin: 0 0 var(--nsem-space-md);
}

.single-hero__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--nsem-radius);
	background: var(--nsem-canvas);
}

.single-hero__caption {
	margin: 0.5rem 0 0;
	color: var(--nsem-muted);
	font-size: 0.82rem;
}

/* Body */
.single-body {
	margin-top: var(--nsem-space-md);
}

.entry-content {
	font-size: 1.08rem;
	line-height: 1.75;
}

.entry-content > p {
	margin: 0 0 1.25rem;
}

.entry-content h2 {
	margin: 2rem 0 0.75rem;
	font-size: 1.5rem;
}

.entry-content h3 {
	margin: 1.75rem 0 0.5rem;
	font-size: 1.25rem;
}

.entry-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content img,
.entry-content iframe {
	height: auto;
	border-radius: var(--nsem-radius-sm);
}

.entry-content figure {
	margin: 1.5rem 0;
}

.entry-content figcaption {
	color: var(--nsem-muted);
	font-size: 0.85rem;
	margin-top: 0.4rem;
}

.entry-content blockquote {
	position: relative;
	margin: 2rem 0;
	padding: 1.4rem 1.6rem 1.4rem 3.4rem;
	border: 1px solid var(--nsem-border);
	border-left: 4px solid var(--nsem-accent);
	border-radius: 0 var(--nsem-radius) var(--nsem-radius) 0;
	background: var(--nsem-canvas);
	font-family: var(--nsem-font-headline);
	font-size: 1.3rem;
	font-style: italic;
	line-height: 1.45;
	color: var(--nsem-ink);
}

.entry-content blockquote::before {
	content: "\201C";
	position: absolute;
	left: 0.7rem;
	top: 0.35rem;
	font-family: var(--nsem-font-headline);
	font-weight: 900;
	font-size: 3.2rem;
	line-height: 1;
	color: var(--nsem-accent);
	opacity: 0.45;
}

.entry-content blockquote p {
	margin: 0 0 0.5rem;
}

.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.entry-content blockquote cite,
.entry-content blockquote footer {
	display: block;
	margin-top: 0.7rem;
	font-family: var(--nsem-font-body);
	font-style: normal;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--nsem-muted);
}

.entry-content blockquote cite::before,
.entry-content blockquote footer::before {
	content: "— ";
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 1.25rem;
	padding-left: 1.4rem;
}

.entry-content li {
	margin-bottom: 0.4rem;
}

/* In-content ad slot spacing */
.entry-content .ad-slot {
	margin: var(--nsem-space-lg) auto;
}

/* -------------------------------------------------------------------------
   Overflow safety — wide media must never widen the page on mobile.
   ------------------------------------------------------------------------- */

/* Last line of defence: nothing can stretch the viewport sideways. `clip`
   (unlike `hidden`) doesn't create a scroll container, so the sticky header
   keeps working. */
html,
body {
	overflow-x: clip;
}

/* Anything media-like stays within the article column, including figures
   Gutenberg gives an explicit pixel width when an image is resized. */
.entry-content figure,
.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object {
	max-width: 100%;
}

/* Wide / Full alignments: the article column has no full-bleed layout, so
   pull them back to the column instead of overflowing the phone screen. */
.entry-content .alignwide,
.entry-content .alignfull {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Wide tables scroll sideways inside the article instead of stretching it. */
.entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
}

.single-tags {
	margin: var(--nsem-space-lg) 0 0;
	font-size: 0.85rem;
	color: var(--nsem-muted);
}

.single-tags a {
	display: inline-block;
	padding: 0.15em 0.6em;
	margin: 0 0.2rem 0.2rem 0;
	background: var(--nsem-canvas);
	border: 1px solid var(--nsem-border);
	border-radius: 999px;
	text-decoration: none;
	color: var(--nsem-ink);
}

/* ---- Share buttons ---- */
.share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--nsem-space-lg) 0;
	padding: var(--nsem-space-md) 0;
	border-block: 1px solid var(--nsem-border);
}

.share__label {
	font-family: var(--nsem-font-display);
	font-weight: 700;
	margin-right: 0.25rem;
}

.share__btn {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.9rem;
	border: 0;
	border-radius: 999px;
	font-family: var(--nsem-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

.share__btn--whatsapp { background: #0f7a3f; }
.share__btn--facebook { background: #1466d8; }
.share__btn--x        { background: #16161a; }
.share__btn--copy     { background: var(--nsem-canvas); color: var(--nsem-ink); border: 1px solid var(--nsem-border); }
.share__btn--copy.is-copied { background: var(--nsem-accent); color: #fff; border-color: var(--nsem-accent); }
.share__btn--save     { background: var(--nsem-canvas); color: var(--nsem-ink); border: 1px solid var(--nsem-border); }
.share__btn--save.is-saved { background: var(--nsem-ink); color: var(--nsem-surface); border-color: var(--nsem-ink); }

.share__btn:hover { filter: brightness(0.94); }

/* ---- Author box ---- */
.author-box {
	display: flex;
	gap: var(--nsem-space-lg);
	align-items: center;
	margin: var(--nsem-space-xl) 0;
	padding: var(--nsem-space-lg);
	background: var(--nsem-surface);
	border: 1px solid var(--nsem-border);
	border-radius: var(--nsem-radius);
	box-shadow: var(--nsem-shadow);
	position: relative;
	overflow: hidden;
}

.author-box::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: var(--nsem-accent);
}

.author-box__avatar {
	flex: none;
}

.author-box__img {
	display: block;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--nsem-surface);
	box-shadow: 0 0 0 3px var(--nsem-accent);
}

.author-box__eyebrow {
	margin: 0;
	font-family: var(--nsem-font-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nsem-accent);
}

.author-box__name {
	margin: 0.15rem 0 0.5rem;
	font-family: var(--nsem-font-display);
	font-size: 1.3rem;
	line-height: 1.1;
}

.author-box__name a {
	color: var(--nsem-ink);
	text-decoration: none;
}

.author-box__name a:hover {
	color: var(--nsem-accent);
}

.author-box__bio {
	margin: 0 0 0.75rem;
	color: var(--nsem-muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

.author-box__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 1rem;
	border: 1px solid var(--nsem-border);
	border-radius: 999px;
	font-family: var(--nsem-font-display);
	font-weight: 700;
	font-size: 0.82rem;
	color: var(--nsem-ink);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.author-box__more:hover {
	background: var(--nsem-accent);
	border-color: var(--nsem-accent);
	color: #fff;
}

.author-box__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--nsem-space-md);
}

.author-header__social {
	margin-top: 0.6rem;
}

@media (max-width: 560px) {
	.author-box {
		flex-direction: column;
		text-align: center;
		gap: var(--nsem-space-md);
	}

	.author-box::before {
		inset: 0 0 auto 0;
		width: auto;
		height: 5px;
	}

	.author-box__foot {
		justify-content: center;
	}
}

/* ---- Previous / next story navigation ---- */
.post-nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nsem-space-md);
	margin-top: var(--nsem-space-lg);
}

.post-nav__link {
	display: block;
	padding: var(--nsem-space-md);
	background: var(--nsem-surface);
	border: 1px solid var(--nsem-border);
	border-radius: var(--nsem-radius);
	text-decoration: none;
}

.post-nav__eyebrow {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--nsem-font-display);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nsem-muted);
}

.post-nav__title {
	font-family: var(--nsem-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.3;
	color: var(--nsem-ink);
}

.post-nav__link:hover .post-nav__title {
	color: var(--nsem-accent);
}

@media (min-width: 560px) {
	.post-nav {
		grid-template-columns: 1fr 1fr;
	}

	.post-nav__link--next {
		text-align: right;
	}

	/* A lone "next" card sits in the right column. */
	.post-nav__link--next:first-child {
		grid-column: 2;
	}
}

/* ---- Related + comments spacing ---- */
.related {
	margin-top: var(--nsem-space-xl);
}

.comments-area {
	margin-top: var(--nsem-space-xl);
}

/* =========================================================================
   Phase 6 — Archives & search.
   ========================================================================= */

.archive {
	padding-bottom: var(--nsem-space-xl);
}

.archive-header {
	padding-block: var(--nsem-space-lg);
	margin-bottom: var(--nsem-space-lg);
	border-bottom: 1px solid var(--nsem-border);
	background: var(--nsem-surface);
}

.archive-header__eyebrow {
	margin: 0 0 0.25rem;
	font-family: var(--nsem-font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nsem-muted);
}

.archive-header__title {
	margin: 0;
	font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2.6rem);
}

.archive-header__desc {
	margin-top: 0.5rem;
	max-width: 60ch;
	color: var(--nsem-muted);
}

/* Coloured category banner */
.archive-header--category {
	background: var(--cat-color, var(--nsem-accent));
	border-bottom: 0;
	color: #fff;
}

.archive-header--category .archive-header__eyebrow {
	color: #fff;
}

.archive-header--category .archive-header__desc {
	color: rgba(255, 255, 255, 0.92);
}

.archive-header--category .archive-header__title {
	color: #fff;
}

/* Author profile header */
.author-header {
	background: var(--nsem-surface);
}

.author-header__inner {
	display: flex;
	align-items: center;
	gap: var(--nsem-space-lg);
}

.author-header__img {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--nsem-surface);
	box-shadow: 0 0 0 3px var(--nsem-accent);
}

.author-header__bio {
	margin: 0.4rem 0 0.5rem;
	max-width: 60ch;
	color: var(--nsem-muted);
}

.author-header__count {
	margin: 0;
	font-size: 0.9rem;
	color: var(--nsem-muted);
}

.author-header__count strong {
	color: var(--nsem-ink);
}

@media (max-width: 560px) {
	.author-header__inner {
		flex-direction: column;
		text-align: center;
		gap: var(--nsem-space-md);
	}

	.author-header__bio {
		margin-inline: auto;
	}
}

/* Archive grid: 1 col mobile → up to 3 on desktop (slightly larger cards than homepage) */
.card-grid--archive {
	grid-template-columns: 1fr;
}

/* In-grid ad spans the full row and centres its unit */
.ad-zone--ingrid {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	margin-block: var(--nsem-space-sm);
}

@media (min-width: 560px) {
	.card-grid--archive {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 900px) {
	.card-grid--archive {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---- No results ---- */
.no-results {
	padding-block: var(--nsem-space-lg);
}

.no-results__title {
	font-size: 1.4rem;
	margin: 0 0 0.4rem;
}

.no-results__text {
	color: var(--nsem-muted);
	margin: 0 0 var(--nsem-space-md);
}

.no-results__search {
	max-width: 480px;
	margin-bottom: var(--nsem-space-xl);
}

.no-results__latest {
	margin-top: var(--nsem-space-lg);
}

/* =========================================================================
   Phase 7 — Sidebar & widgets.
   ========================================================================= */

.content-wrap {
	display: block;
}

.sidebar {
	margin-top: var(--nsem-space-xl);
}

@media (min-width: 768px) {
	.content-wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: var(--nsem-space-lg);
		align-items: start;
	}

	.sidebar {
		margin-top: 0;
	}

	/* Sticky sidebar ad — stays in view as the article scrolls (more impressions). */
	.sidebar .widget-ad {
		position: sticky;
		top: 80px;
	}

	/* With a sidebar present, keep the archive grid at two columns. */
	.content-main .card-grid--archive {
		grid-template-columns: 1fr 1fr;
	}
}

/* Roomier sidebar on larger screens. */
@media (min-width: 1024px) {
	.content-wrap {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--nsem-space-xl);
	}
}

/* ---- Widgets ---- */
.widget {
	margin-bottom: var(--nsem-space-lg);
	padding: var(--nsem-space-md);
	background: var(--nsem-surface);
	border: 1px solid var(--nsem-border);
	border-radius: var(--nsem-radius);
}

.widget__title {
	margin: 0 0 var(--nsem-space-sm);
	padding-bottom: 0.5rem;
	font-size: 1rem;
	letter-spacing: 0.02em;
	border-bottom: 2px solid var(--nsem-ink);
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Trending widget */
.widget-trending__list {
	counter-reset: trend;
}

.widget-trending__item {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 0.6rem;
	align-items: center;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--nsem-border);
}

.widget-trending__item:last-child {
	border-bottom: 0;
}

.widget-trending__thumb {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: var(--nsem-radius-sm);
	overflow: hidden;
	background: var(--nsem-canvas);
}

.widget-trending__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.widget-trending__title {
	font-family: var(--nsem-font-display);
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.25;
	color: var(--nsem-ink);
	text-decoration: none;
}

.widget-trending__title:hover {
	color: var(--nsem-accent);
}

/* Categories widget */
.widget-categories__list li {
	display: flex;
	justify-content: space-between;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--nsem-border);
}

.widget-categories__list li:last-child {
	border-bottom: 0;
}

.widget-categories__list a {
	text-decoration: none;
	color: var(--nsem-ink);
	font-weight: 600;
}

.widget-categories__list a:hover {
	color: var(--nsem-accent);
}

/* Generic core-widget lists (when admin adds widgets) */
.widget li {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--nsem-border);
}

.widget li:last-child {
	border-bottom: 0;
}

/* Ad widget area resets the card chrome */
.widget-ad {
	padding: 0;
	background: transparent;
	border: 0;
	display: flex;
	justify-content: center;
}

/* Footer widgets reuse the footer column layout from Phase 3 */
.site-footer__widgets .widget {
	background: transparent;
	border: 0;
	padding: 0;
}

.site-footer__widgets .widget__title {
	color: var(--nsem-ink);
}

/* =========================================================================
   Phase 11 — Polish: 404 + comments.
   ========================================================================= */

/* ---- 404 ---- */
.error-404 {
	padding-bottom: var(--nsem-space-xl);
}

.error-404__hero {
	padding-block: var(--nsem-space-xl);
	text-align: center;
	background: var(--nsem-surface);
	border-bottom: 1px solid var(--nsem-border);
	margin-bottom: var(--nsem-space-xl);
}

.error-404__code {
	margin: 0;
	font-family: var(--nsem-font-display);
	font-weight: 800;
	font-size: clamp(4rem, 2rem + 14vw, 9rem);
	line-height: 1;
	color: var(--nsem-accent);
	letter-spacing: -0.04em;
}

.error-404__title {
	margin: 0.25rem 0 0.5rem;
	font-size: clamp(1.5rem, 1.2rem + 2vw, 2.2rem);
}

.error-404__text {
	max-width: 48ch;
	margin: 0 auto var(--nsem-space-md);
	color: var(--nsem-muted);
}

.error-404__search {
	max-width: 460px;
	margin: 0 auto;
}

/* ---- Comments ---- */
.comments-area {
	max-width: 760px;
}

.comments-title {
	font-size: 1.3rem;
	margin: 0 0 var(--nsem-space-md);
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--nsem-ink);
}

.comment-list {
	list-style: none;
	margin: 0 0 var(--nsem-space-lg);
	padding: 0;
}

.comment-list ol.children {
	list-style: none;
	margin: 0;
	padding-left: var(--nsem-space-lg);
}

.comment-body {
	padding: var(--nsem-space-md) 0;
	border-bottom: 1px solid var(--nsem-border);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.4rem;
}

.comment-author .avatar {
	border-radius: 50%;
}

.comment-author .fn {
	font-family: var(--nsem-font-display);
	font-weight: 700;
	font-style: normal;
}

.comment-author .says {
	display: none;
}

.comment-metadata {
	font-size: 0.8rem;
	color: var(--nsem-muted);
	margin-bottom: 0.5rem;
}

.comment-metadata a {
	color: var(--nsem-muted);
	text-decoration: none;
}

.comment-content {
	margin-bottom: 0.5rem;
}

.comment-content p {
	margin: 0 0 0.75rem;
}

.reply a {
	display: inline-block;
	font-family: var(--nsem-font-display);
	font-weight: 700;
	font-size: 0.82rem;
	color: var(--nsem-accent);
	text-decoration: none;
}

.comment-respond {
	margin-top: var(--nsem-space-lg);
	padding: var(--nsem-space-lg);
	background: var(--nsem-surface);
	border: 1px solid var(--nsem-border);
	border-radius: var(--nsem-radius);
}

.comment-reply-title {
	margin: 0 0 var(--nsem-space-sm);
	font-size: 1.2rem;
}

.comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--nsem-space-sm);
}

.comment-form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--nsem-border);
	border-radius: var(--nsem-radius-sm);
	font: inherit;
	background: #fff;
}

.comment-form textarea {
	min-height: 120px;
	resize: vertical;
}

.comment-form .form-submit {
	margin: 0;
}

.comment-form input[type="submit"],
.comment-form .submit {
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: var(--nsem-radius-sm);
	background: var(--nsem-accent);
	color: #fff;
	font-family: var(--nsem-font-display);
	font-weight: 700;
	cursor: pointer;
}

.comment-form input[type="submit"]:hover {
	background: var(--nsem-accent-dark);
}

.comments-closed {
	color: var(--nsem-muted);
	font-style: italic;
}

.bypostauthor > .comment-body {
	border-left: 3px solid var(--nsem-accent);
	padding-left: var(--nsem-space-md);
}

/* =========================================================================
   Block styles & patterns (author experience).
   ========================================================================= */

/* Lead paragraph */
.is-style-nsem-lead {
	font-size: 1.25rem;
	line-height: 1.6;
	font-weight: 500;
	color: var(--nsem-ink);
}

/* Accent pull quote */
.wp-block-quote.is-style-nsem-accent {
	border-left: 4px solid var(--nsem-accent);
	padding: 0.25rem 0 0.25rem 1.25rem;
	font-style: italic;
	font-size: 1.2rem;
}

.wp-block-quote.is-style-nsem-accent cite {
	display: block;
	margin-top: 0.5rem;
	font-style: normal;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--nsem-muted);
}

/* Follow CTA group */
.nsem-cta {
	background: var(--nsem-canvas);
	border: 1px solid var(--nsem-border);
	border-left: 4px solid var(--nsem-accent);
	border-radius: var(--nsem-radius);
	padding: var(--nsem-space-lg);
}

.nsem-cta h3 {
	margin-top: 0;
}

/* =========================================================================
   Enhancements — ticker, reading progress, sticky share bar, footer socials.
   ========================================================================= */

/* ---- Breaking-news ticker ---- */
.ticker {
	background: var(--nsem-ink);
	color: #fff;
	font-size: 0.88rem;
	overflow: hidden;
}

.ticker__inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	height: 40px;
}

.ticker__label {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 0.25em 0.7em;
	border-radius: var(--nsem-radius-sm);
	background: var(--nsem-accent);
	font-family: var(--nsem-font-display);
	font-weight: 800;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ticker__viewport {
	flex: 1;
	overflow: hidden;
	position: relative;
}

.ticker__track {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	animation: nsem-ticker 40s linear infinite;
}

.ticker__viewport:hover .ticker__track,
.ticker__viewport:focus-within .ticker__track {
	animation-play-state: paused;
}

.ticker__item {
	white-space: nowrap;
}

.ticker__item a {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

.ticker__item a:hover {
	color: var(--nsem-accent);
}

@keyframes nsem-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---- Reading progress bar ---- */
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: transparent;
	z-index: 101;
	pointer-events: none;
}

.reading-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--nsem-accent);
}

/* ---- Sticky mobile share bar (single articles) ---- */
.share-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 95;
	display: flex;
	gap: 1px;
	background: var(--nsem-border);
	box-shadow: 0 -2px 10px rgba(22, 22, 26, 0.12);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.share-bar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	height: 52px;
	background: var(--nsem-surface);
	color: var(--nsem-ink);
	text-decoration: none;
	font-family: var(--nsem-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	border: 0;
	cursor: pointer;
	flex: 0 0 auto;
	width: 52px;
}

.share-bar__btn--whatsapp {
	flex: 1;
	background: #0f7a3f;
	color: #fff;
}

.share-bar__btn--facebook { color: #1466d8; }

.share-bar__icon {
	display: inline-flex;
}

/* Reserve space so the fixed bar never hides the footer on mobile single posts. */
@media (max-width: 767px) {
	body.single {
		padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
	}
}

@media (min-width: 768px) {
	.share-bar {
		display: none; /* sticky bar is mobile-only */
	}
}

/* ---- Social links (footer) ---- */
.site-footer__social {
	display: flex;
	align-items: center;
	gap: var(--nsem-space-md);
	padding-block: var(--nsem-space-md);
	border-top: 1px solid var(--nsem-border);
}

.site-footer__follow {
	font-family: var(--nsem-font-display);
	font-weight: 700;
}

.social-links {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--nsem-canvas);
	color: var(--nsem-ink);
	transition: background 0.15s ease, color 0.15s ease;
}

.social-link:hover {
	background: var(--nsem-accent);
	color: #fff;
}

/* Smaller social icons (author box / profile) */
.social-links--sm {
	gap: 0.4rem;
}

.social-links--sm .social-link {
	width: 32px;
	height: 32px;
}

.social-links--sm .social-link svg {
	width: 16px;
	height: 16px;
}

/* ---- Back-to-top button ---- */
.to-top {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 96;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--nsem-accent);
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(22, 22, 26, 0.25);
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}

.to-top.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.to-top:hover {
	background: var(--nsem-accent-dark);
}

/* Lift it above the sticky mobile share bar on single posts. */
@media (max-width: 767px) {
	body.single .to-top {
		bottom: calc(52px + 1rem + env(safe-area-inset-bottom, 0px));
	}
}

/* ---- Respect reduced-motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.ticker__track {
		animation: none;
		transform: none;
	}
}

/* =========================================================================
   Header search icon.
   ========================================================================= */

.header-actions__btn .icon-search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.icon-search svg {
	display: block;
}

/* =========================================================================
   Breadcrumbs, WhatsApp CTAs, sponsored label.
   ========================================================================= */

/* ---- Breadcrumbs ---- */
.breadcrumbs {
	font-size: 0.82rem;
	color: var(--nsem-muted);
	padding-block: 0.7rem;
}

.breadcrumbs a {
	color: var(--nsem-muted);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--nsem-accent);
}

.breadcrumbs__sep {
	margin: 0 0.4rem;
	color: var(--nsem-border);
}

.breadcrumbs [aria-current="page"] {
	color: var(--nsem-ink);
	font-weight: 600;
}

/* Anchored headings land below the sticky header */
.entry-content h2,
.entry-content h3 {
	scroll-margin-top: 80px;
}

/* ---- Inline WhatsApp CTA ---- */
.wa-cta {
	display: flex;
	align-items: center;
	gap: var(--nsem-space-md);
	margin: var(--nsem-space-lg) 0;
	padding: var(--nsem-space-md) var(--nsem-space-lg);
	background: linear-gradient( 135deg, rgba(37, 211, 102, 0.14), rgba(37, 211, 102, 0.04) );
	border: 1px solid rgba(37, 211, 102, 0.35);
	border-radius: var(--nsem-radius);
}

.wa-cta__icon {
	flex: none;
	color: #25d366;
	display: inline-flex;
}

.wa-cta__body {
	flex: 1;
	min-width: 0;
}

.wa-cta__title {
	margin: 0;
	font-family: var(--nsem-font-display);
	font-weight: 800;
	font-size: 1.05rem;
}

.wa-cta__text {
	margin: 0.1rem 0 0;
	color: var(--nsem-muted);
	font-size: 0.9rem;
}

.wa-cta__btn {
	flex: none;
	padding: 0.55rem 1.3rem;
	border-radius: 999px;
	background: #0f7a3f;
	color: #fff;
	font-family: var(--nsem-font-display);
	font-weight: 700;
	text-decoration: none;
}

.wa-cta__btn:hover {
	background: #0c6634;
	color: #fff;
}

@media (max-width: 480px) {
	.wa-cta {
		flex-wrap: wrap;
	}

	.wa-cta__btn {
		width: 100%;
		text-align: center;
	}
}

/* ---- Dismissible WhatsApp float (desktop) ---- */
.wa-float {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 96;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 320px;
	padding: 0.4rem 0.55rem 0.4rem 0.85rem;
	background: var(--nsem-surface);
	border: 1px solid var(--nsem-border);
	border-radius: 999px;
	box-shadow: var(--nsem-shadow);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.wa-float.is-visible {
	opacity: 1;
	transform: none;
}

.wa-float__link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--nsem-ink);
	text-decoration: none;
	font-family: var(--nsem-font-display);
	font-weight: 700;
	font-size: 0.9rem;
}

.wa-float__icon {
	color: #25d366;
	display: inline-flex;
}

.wa-float__close {
	order: 2;
	flex: none;
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 50%;
	background: var(--nsem-canvas);
	color: var(--nsem-muted);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.wa-float__close:hover {
	color: var(--nsem-ink);
}

@media (max-width: 767px) {
	.wa-float {
		display: none; /* mobile already has the sticky share bar */
	}
}

/* ---- Sponsored ---- */
.cat-badge--sponsored {
	background: #6b6b70;
}

.sponsored-note {
	margin: 0.6rem 0 0;
	font-size: 0.8rem;
	font-style: italic;
	color: var(--nsem-muted);
}

/* =========================================================================
   Dark mode.

   Two triggers, same rules (keep both blocks in sync):
   1. html[data-theme="dark"]      — the visitor pressed the header toggle.
   2. prefers-color-scheme: dark   — OS setting, unless the visitor explicitly
                                     chose light (data-theme="light").

   The component CSS reads the --nsem-* tokens, so flipping the neutral tokens
   re-themes ~90% of the UI. The handful of rules after each token block fix
   the spots that hardcode light values or put white text on an ink background
   (which becomes light in dark mode).
   ========================================================================= */

:root {
	color-scheme: light;
}

/* ---- Trigger 1: manual toggle ---- */
:root[data-theme="dark"] {
	color-scheme: dark;

	--nsem-ink: #ececef;
	--nsem-muted: #a0a0a8;
	--nsem-surface: #1d1d23;
	--nsem-canvas: #121216;
	--nsem-border: #2e2e36;
	--nsem-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);

	/* Hover shade must get LIGHTER on dark backgrounds, not darker. */
	--nsem-accent-dark: #e8487b;
}

:root[data-theme="dark"] .skip-link,
:root[data-theme="dark"] .section-head__flag {
	color: var(--nsem-canvas);
}

:root[data-theme="dark"] .ticker {
	background: #08080c;
}

:root[data-theme="dark"] .comment-form input[type="text"],
:root[data-theme="dark"] .comment-form input[type="email"],
:root[data-theme="dark"] .comment-form input[type="url"],
:root[data-theme="dark"] .comment-form textarea {
	background: var(--nsem-surface);
}

:root[data-theme="dark"] .ad-slot__inner {
	background: repeating-linear-gradient(
		45deg,
		#1a1a20,
		#1a1a20 10px,
		#202028 10px,
		#202028 20px
	);
	border-color: #34343c;
}

:root[data-theme="dark"] .ad-slot__label {
	color: #6f6f78;
}

:root[data-theme="dark"] .card__image--placeholder {
	background: linear-gradient(135deg, var(--nsem-canvas), #232329);
}

:root[data-theme="dark"] .share__btn--x {
	box-shadow: inset 0 0 0 1px var(--nsem-border);
}

/* ---- Trigger 2: OS preference (unless overridden to light) ---- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--nsem-ink: #ececef;
		--nsem-muted: #a0a0a8;
		--nsem-surface: #1d1d23;
		--nsem-canvas: #121216;
		--nsem-border: #2e2e36;
		--nsem-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
		--nsem-accent-dark: #e8487b;
	}

	:root:not([data-theme="light"]) .skip-link,
	:root:not([data-theme="light"]) .section-head__flag {
		color: var(--nsem-canvas);
	}

	:root:not([data-theme="light"]) .ticker {
		background: #08080c;
	}

	:root:not([data-theme="light"]) .comment-form input[type="text"],
	:root:not([data-theme="light"]) .comment-form input[type="email"],
	:root:not([data-theme="light"]) .comment-form input[type="url"],
	:root:not([data-theme="light"]) .comment-form textarea {
		background: var(--nsem-surface);
	}

	:root:not([data-theme="light"]) .ad-slot__inner {
		background: repeating-linear-gradient(
			45deg,
			#1a1a20,
			#1a1a20 10px,
			#202028 10px,
			#202028 20px
		);
		border-color: #34343c;
	}

	:root:not([data-theme="light"]) .ad-slot__label {
		color: #6f6f78;
	}

	:root:not([data-theme="light"]) .card__image--placeholder {
		background: linear-gradient(135deg, var(--nsem-canvas), #232329);
	}

	:root:not([data-theme="light"]) .share__btn--x {
		box-shadow: inset 0 0 0 1px var(--nsem-border);
	}
}

/* ---- Header toggle icon: moon in light mode, sun in dark ---- */
.theme-toggle__moon,
.theme-toggle__sun {
	display: inline-flex;
}

.theme-toggle__sun {
	display: none;
}

:root[data-theme="dark"] .theme-toggle__moon {
	display: none;
}

:root[data-theme="dark"] .theme-toggle__sun {
	display: inline-flex;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle__moon {
		display: none;
	}

	:root:not([data-theme="light"]) .theme-toggle__sun {
		display: inline-flex;
	}
}

/* =========================================================================
   Google News follow CTA (after article body).
   ========================================================================= */
.gn-cta {
	display: flex;
	align-items: center;
	gap: var(--nsem-space-md);
	margin: var(--nsem-space-lg) 0;
	padding: var(--nsem-space-md) var(--nsem-space-lg);
	background: linear-gradient( 135deg, rgba(26, 115, 232, 0.12), rgba(26, 115, 232, 0.03) );
	border: 1px solid rgba(26, 115, 232, 0.35);
	border-radius: var(--nsem-radius);
}

.gn-cta__icon {
	flex: none;
	color: #1a73e8;
	display: inline-flex;
}

.gn-cta__body {
	flex: 1;
	min-width: 0;
}

.gn-cta__title {
	margin: 0;
	font-family: var(--nsem-font-display);
	font-weight: 800;
	font-size: 1.05rem;
}

.gn-cta__text {
	margin: 0.1rem 0 0;
	color: var(--nsem-muted);
	font-size: 0.9rem;
}

.gn-cta__btn {
	flex: none;
	padding: 0.55rem 1.3rem;
	border-radius: 999px;
	background: #1a73e8;
	color: #fff;
	font-family: var(--nsem-font-display);
	font-weight: 700;
	text-decoration: none;
}

.gn-cta__btn:hover {
	background: #155cb8;
	color: #fff;
}

@media (max-width: 480px) {
	.gn-cta {
		flex-wrap: wrap;
	}

	.gn-cta__btn {
		width: 100%;
		text-align: center;
	}
}