/**
 * PureSourceCode — theme layer.
 *
 * Everything here reads from css/tokens.css. Loaded after style.css so it
 * wins on the cascade without needing !important, which keeps the inherited
 * Newsup rules overridable rather than frozen.
 *
 * Mobile-first throughout: base rules are the phone layout, media queries
 * only ever add.
 */

/* ====================================================================== *
 * 1. Base
 * ====================================================================== */
body {
	background: var(--psc-surface);
	color: var(--psc-text);
	font-family: var(--psc-font-sans);
	font-size: var(--psc-text-base);
	line-height: var(--psc-leading-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.boxed .wrapper {
	max-width: var(--psc-container);
	margin: 0 auto;
	background: var(--psc-surface);
	box-shadow: var(--psc-shadow-lg);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.title {
	font-family: var(--psc-font-display);
	color: var(--psc-text);
	font-weight: 700;
	line-height: var(--psc-leading-tight);
	letter-spacing: -0.011em;
}

a {
	color: var(--psc-link);
	text-decoration: none;
	transition: color var(--psc-transition);
}

a:hover,
a:focus {
	color: var(--psc-link-hover);
	text-decoration: underline;
}

/* Visible focus for keyboard users, invisible for mouse users. */
:focus-visible {
	outline: 2px solid var(--psc-primary);
	outline-offset: 2px;
	border-radius: var(--psc-radius-sm);
}

/*
 * One measure for the whole page.
 *
 * The inherited blocks use Bootstrap's .container-fluid, which is full-bleed
 * with 50px of padding, while everything rebuilt here uses .psc-container
 * capped at --psc-container. On a 1650px screen that put the hero at 1535px
 * and the category sections at 1240px - visibly different bands down the page,
 * and it meant the "Maximum content width" setting only governed half the site.
 *
 * Both now resolve to the same width and the same gutters, so every band lines
 * up and the Customizer control governs all of it.
 */
.psc-container,
.wrapper .container,
.wrapper .container-fluid {
	width: 100%;
	max-width: var(--psc-container);
	margin-inline: auto;
	padding-inline: var(--psc-space-4);
}

@media (min-width: 992px) {
	.psc-container,
	.wrapper .container,
	.wrapper .container-fluid {
		padding-inline: var(--psc-space-6);
	}
}

/* A band that should still run edge to edge opts out: the coloured strips
   paint full width and re-centre their own inner container. */
.psc-belowmenu-ad,
.psc-front-ad,
.psc-footer-ad,
.psc-cat-section-ad {
	max-width: none;
	padding-inline: 0;
}

.psc-no-scroll { overflow: hidden; }

/* ====================================================================== *
 * 2. Utility bar
 * ====================================================================== */
.psc-topbar {
	background: var(--psc-topbar-bg);
	color: var(--psc-topbar-text);
	font-size: var(--psc-text-xs);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.psc-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--psc-space-4);
	min-height: 38px;
	flex-wrap: wrap;
}

.psc-topbar__left,
.psc-topbar__right {
	display: flex;
	align-items: center;
	gap: var(--psc-space-4);
}

.psc-topbar ul {
	display: flex;
	align-items: center;
	gap: var(--psc-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.psc-topbar__meta li,
.psc-topbar a {
	color: var(--psc-topbar-text);
}

.psc-topbar a:hover {
	color: #fff;
	text-decoration: none;
}

/* The date is noise on a small screen; the social icons are not. */
@media (max-width: 575.98px) {
	.psc-topbar__left { display: none; }
	.psc-topbar__inner { justify-content: center; }
}

/* ====================================================================== *
 * 3. Social icons
 * ====================================================================== */
.psc-social {
	display: flex;
	align-items: center;
	gap: var(--psc-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.psc-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--psc-radius-sm);
	color: inherit;
	transition: background var(--psc-transition), color var(--psc-transition);
}

.psc-social__link:hover {
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
	text-decoration: none;
}

.psc-social__svg { display: block; }

/* Footer: the icons sit on the dark footer, so they follow footer text. */
.psc-social--footer {
	justify-content: flex-end;
}

.psc-social--footer .psc-social__link {
	color: var(--psc-footer-text);
}

.psc-social--footer .psc-social__link:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

@media (max-width: 767.98px) {
	.psc-social--footer { justify-content: center; }
}

/* Widget: on a light card the icons need a visible outline. */
.psc-social--widget {
	flex-wrap: wrap;
	gap: var(--psc-space-2);
}

.psc-social--widget .psc-social__link {
	color: var(--psc-text-muted);
	border: 1px solid var(--psc-border);
}

.psc-social--widget .psc-social__link:hover {
	color: var(--psc-on-primary);
	background: var(--psc-primary);
	border-color: var(--psc-primary);
}

.psc-social--grid .psc-social__link {
	width: 40px;
	height: 40px;
	border-radius: var(--psc-radius-md);
}

/* ====================================================================== *
 * 4. Masthead
 * ====================================================================== */
.psc-masthead {
	background: var(--psc-header-bg);
	border-bottom: 1px solid var(--psc-border);
	padding-block: var(--psc-space-5);
}

.psc-masthead__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--psc-space-4);
	align-items: center;
}

@media (min-width: 768px) {
	.psc-masthead__inner {
		grid-template-columns: auto minmax(200px, 1fr);
		gap: var(--psc-space-6);
	}
}

@media (min-width: 992px) {
	/* Brand | search | ad. The ad column is allowed to shrink but never to
	   push the search below its minimum. */
	.psc-masthead__inner {
		grid-template-columns: auto minmax(220px, 320px) minmax(0, auto);
	}
}

.psc-brand {
	display: flex;
	align-items: center;
	gap: var(--psc-space-3);
	min-width: 0;
}

/*
 * Logo.
 *
 * width:auto here plus height:auto from the responsive image rule left both
 * dimensions unresolved, and inside the flex brand container the aspect ratio
 * was lost - a square 128x128 logo rendered 56x26. Pin the height, let the
 * width follow, and keep object-fit as a guard so the image can never be
 * stretched even if something else constrains both axes.
 *
 * Height is a token so it can be set from the Customizer.
 */
.psc-brand .navbar-brand,
.psc-brand a.navbar-brand {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}

.psc-brand .custom-logo,
.psc-brand .navbar-brand img,
.psc-brand img,
.custom-logo {
	display: block;
	width: auto;
	height: var(--psc-logo-height, 48px);
	max-height: var(--psc-logo-height, 48px);
	max-width: 100%;
	margin: 0;
	object-fit: contain;
	flex: 0 0 auto;
}

/* Give the logo a little less room on small screens so it never crowds out
   the site title. */
@media (max-width: 575.98px) {
	.psc-brand .custom-logo,
	.psc-brand img,
	.custom-logo {
		height: calc(var(--psc-logo-height, 48px) * 0.8);
		max-height: calc(var(--psc-logo-height, 48px) * 0.8);
	}
}

.psc-brand__text { min-width: 0; }

.site-title {
	margin: 0;
	font-size: var(--psc-text-2xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.site-title a { color: var(--psc-text); }

.site-title a:hover {
	color: var(--psc-primary);
	text-decoration: none;
}

.site-description {
	margin: 2px 0 0;
	font-size: var(--psc-text-sm);
	color: var(--psc-text-muted);
	line-height: 1.3;
}

.psc-masthead__ad {
	justify-self: end;
	max-width: 100%;
	min-width: 0;
}

/* ====================================================================== *
 * 5. Search
 * ====================================================================== */
.psc-masthead__search .search-form,
.psc-masthead__search form {
	position: relative;
	display: flex;
	width: 100%;
}

/* Bootstrap squares off the trailing corners of a .form-control that is not
   the last child of an .input-group; the button span follows it, so the pill
   lost its right end. Restore the full radius on every corner. */
.psc-masthead__search input[type="search"],
.psc-masthead__search input[type="text"],
.psc-masthead__search .form-control,
.psc-masthead__search .input-group > .form-control:not(:last-child) {
	width: 100%;
	height: 42px;
	padding: 0 44px 0 var(--psc-space-4);
	border-radius: var(--psc-radius-pill);
	font-family: var(--psc-font-sans);
	font-size: var(--psc-text-sm);
	color: var(--psc-text);
	background: var(--psc-surface-sunken);
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-pill);
	transition: border-color var(--psc-transition), box-shadow var(--psc-transition), background var(--psc-transition);
}

.psc-masthead__search input:focus {
	outline: none;
	background: var(--psc-surface);
	border-color: var(--psc-primary);
	box-shadow: 0 0 0 3px var(--psc-primary-soft);
}

.psc-masthead__search input::placeholder { color: var(--psc-text-faint); }

/*
 * The markup is form > .input-group > input + span.input-group-btn > button.
 *
 * Absolutely positioning the button itself takes it out of the flex flow and
 * collapses the wrapping span to ~1px, which still paints its Bootstrap
 * border - a thin vertical line just outside the rounded field. Position the
 * span instead and leave the button in normal flow inside it.
 */
.psc-masthead__search .input-group {
	position: relative;
	display: block;
	width: 100%;
}

.psc-masthead__search .input-group-btn,
.psc-masthead__search .input-group-append {
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	z-index: 2;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.psc-masthead__search button,
.psc-masthead__search input[type="submit"],
.psc-masthead__search .btn {
	position: static;
	transform: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	min-width: 0;
	padding: 0;
	margin: 0;
	line-height: 1;
	color: var(--psc-on-primary);
	background: var(--psc-primary);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	font-size: 0;
	transition: background var(--psc-transition);
}

.psc-masthead__search button::before {
	/* Font Awesome magnifier, so the button reads as search even when the
	   inherited markup supplies no icon element. */
	font: normal normal normal 13px/1 FontAwesome;
	content: "\f002";
}

.psc-masthead__search button:hover { background: var(--psc-primary-dark); }

/* ---------------------------------------------------------------------- *
 * Header layout: centred
 *
 * Same markup as the standard header, stacked and centred.
 * ---------------------------------------------------------------------- */
@media (min-width: 768px) {
	.psc-header--centred .psc-masthead__inner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: var(--psc-space-4);
	}

	.psc-header--centred .psc-brand {
		flex-direction: column;
		text-align: center;
	}

	.psc-header--centred .psc-masthead__search {
		width: min(420px, 100%);
	}

	.psc-header--centred .psc-masthead__ad {
		justify-self: center;
	}

	.psc-header--centred .psc-nav__inner {
		justify-content: center;
	}

	/* The actions sit hard right in the standard header; centring the menu
	   means they must not claim the leftover space. */
	.psc-header--centred .psc-nav__menu {
		flex: 0 1 auto;
	}

	.psc-header--centred .psc-nav__actions {
		margin-left: var(--psc-space-4);
	}
}

/* ---------------------------------------------------------------------- *
 * Header layout: compact
 *
 * No masthead row at all - the brand and the search field are rendered
 * inside the navigation bar (see header.php; CSS cannot move an element
 * between parents).
 * ---------------------------------------------------------------------- */
.psc-header--compact .psc-nav {
	border-top: 0;
}

.psc-header--compact .psc-nav__inner {
	gap: var(--psc-space-4);
	min-height: 68px;
}

.psc-brand--compact {
	flex: 0 0 auto;
	gap: var(--psc-space-2);
}

.psc-brand--compact .site-title {
	font-size: var(--psc-text-lg);
	white-space: nowrap;
}

.psc-brand--compact .navbar-brand,
.psc-brand--compact img,
.psc-brand--compact .custom-logo {
	max-height: 40px;
}

/* The search shrinks to fit whatever the menu leaves. */
.psc-masthead__search--compact {
	flex: 0 1 260px;
	min-width: 0;
}

.psc-masthead__search--compact input[type="search"],
.psc-masthead__search--compact input[type="text"],
.psc-masthead__search--compact .form-control {
	height: 38px;
}

.psc-masthead__search--compact button,
.psc-masthead__search--compact .btn {
	width: 28px;
	height: 28px;
}

/* Below the menu breakpoint the bar would be far too crowded, so the search
   drops onto its own line under the brand. */
@media (max-width: 991.98px) {
	.psc-header--compact .psc-nav__inner {
		flex-wrap: wrap;
		padding-block: var(--psc-space-3);
	}

	.psc-masthead__search--compact {
		flex: 1 1 100%;
		order: 10;
	}
}

/* ====================================================================== *
 * 6. Navigation
 * ====================================================================== */
.psc-nav {
	position: relative;
	z-index: var(--psc-z-nav);
	background: var(--psc-nav-bg);
	border-bottom: 1px solid var(--psc-border);
	padding: 0;
}

.psc-nav__inner {
	display: flex;
	align-items: center;
	gap: var(--psc-space-2);
	min-height: var(--psc-header-sticky-height);
}

/* Sticky state, toggled by an IntersectionObserver sentinel in psc-theme.js. */
.psc-nav[data-psc-sticky-nav].is-stuck {
	position: sticky;
	top: 0;
	box-shadow: var(--psc-shadow-md);
}

@supports (position: sticky) {
	.psc-nav[data-psc-sticky-nav] {
		position: sticky;
		top: 0;
	}
}

.psc-nav__burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: none;
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-md);
	cursor: pointer;
}

.psc-nav__burger-bar {
	display: block;
	height: 2px;
	background: var(--psc-nav-text);
	border-radius: 2px;
	transition: transform var(--psc-transition), opacity var(--psc-transition);
}

.psc-nav__home {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--psc-nav-text);
	border-radius: var(--psc-radius-md);
}

.psc-nav__home:hover {
	color: var(--psc-primary);
	background: var(--psc-primary-soft);
	text-decoration: none;
}

.psc-nav__actions {
	display: flex;
	align-items: center;
	gap: var(--psc-space-2);
	margin-left: auto;
}

@media (min-width: 992px) {
	.psc-nav__burger { display: none; }
}

/* ---- Menu items ---- */
.psc-menu {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 992px) {
	.psc-menu {
		flex-direction: row;
		align-items: center;
		gap: var(--psc-space-1);
	}
}

.psc-menu > li > a {
	display: block;
	padding: var(--psc-space-3) var(--psc-space-4);
	font-size: var(--psc-text-sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--psc-nav-text);
	border-radius: var(--psc-radius-md);
	transition: color var(--psc-transition), background var(--psc-transition);
}

.psc-menu > li > a:hover,
.psc-menu > li > a:focus {
	color: var(--psc-primary);
	background: var(--psc-primary-soft);
	text-decoration: none;
}

/* Current section gets the brand underline rather than a filled block, so the
   nav stays quiet. */
.psc-menu > li.current-menu-item > a,
.psc-menu > li.current-menu-parent > a,
.psc-menu > li.current-menu-ancestor > a {
	color: var(--psc-primary);
	position: relative;
}

@media (min-width: 992px) {
	.psc-menu > li.current-menu-item > a::after,
	.psc-menu > li.current-menu-parent > a::after,
	.psc-menu > li.current-menu-ancestor > a::after {
		content: "";
		position: absolute;
		left: var(--psc-space-4);
		right: var(--psc-space-4);
		bottom: -1px;
		height: 2px;
		background: var(--psc-primary);
		border-radius: 2px;
	}
}

/* ---- Dropdowns ---- */
.psc-menu .sub-menu,
.psc-menu .dropdown-menu {
	margin: 0;
	padding: var(--psc-space-2);
	list-style: none;
	background: var(--psc-surface-raised);
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-lg);
	box-shadow: var(--psc-shadow-lg);
	min-width: 220px;
}

.psc-menu .sub-menu a,
.psc-menu .dropdown-menu a {
	display: block;
	padding: var(--psc-space-2) var(--psc-space-3);
	font-size: var(--psc-text-sm);
	color: var(--psc-text);
	border-radius: var(--psc-radius-sm);
}

.psc-menu .sub-menu a:hover,
.psc-menu .dropdown-menu a:hover {
	background: var(--psc-primary-soft);
	color: var(--psc-primary);
	text-decoration: none;
}

/* ---- Theme toggle ---- */
.psc-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--psc-nav-text);
	background: none;
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-md);
	cursor: pointer;
	transition: color var(--psc-transition), border-color var(--psc-transition), background var(--psc-transition);
}

.psc-theme-toggle:hover {
	color: var(--psc-primary);
	border-color: var(--psc-primary);
	background: var(--psc-primary-soft);
}

.psc-theme-toggle__light { display: none; }
:root[data-theme="dark"] .psc-theme-toggle__dark { display: none; }
:root[data-theme="dark"] .psc-theme-toggle__light { display: inline; }

/* ====================================================================== *
 * 7. Below-menu and footer ad strips
 * ====================================================================== */
.psc-belowmenu-ad,
.psc-front-ad,
.psc-footer-ad {
	background: var(--psc-surface-sunken);
	border-bottom: 1px solid var(--psc-border);
}

.psc-belowmenu-ad .container,
.psc-front-ad .container,
.psc-footer-ad .container {
	max-width: var(--psc-container);
	margin: 0 auto;
	padding-inline: var(--psc-space-4);
}

/* ====================================================================== *
 * 8. Tag bar
 * ====================================================================== */
.psc-tags {
	background: var(--psc-surface);
	border-bottom: 1px solid var(--psc-border);
	padding-block: var(--psc-space-2);
	font-size: var(--psc-text-sm);
}

.psc-tags a { color: var(--psc-text-muted); }
.psc-tags a:hover { color: var(--psc-primary); }

/* ---------------------------------------------------------------------- *
 * Hot News ticker
 *
 * Three inherited problems, all from the deleted skin stylesheets:
 *   - the section wrapper carries a hardcoded #fff, which showed as white
 *     strips either side of the ticker in dark mode;
 *   - the "Hot News" heading is white text that used to sit on a coloured
 *     block the skins supplied, so on a light bar it vanished entirely;
 *   - an empty decorative <span> and a 54px marquee wrapper inside a 40px
 *     bar threw the vertical alignment out.
 * ---------------------------------------------------------------------- */
.mg-latest-news-sec {
	background: var(--psc-surface);
	border-bottom: 1px solid var(--psc-border);
}

.mg-latest-news {
	display: flex;
	align-items: center;
	gap: var(--psc-space-3);
	min-height: 48px;
	padding-block: var(--psc-space-2);
	background: transparent;
	border: 0;
	font-size: var(--psc-text-sm);
}

/* ---- The label ---- */
.mg-latest-news .bn_title {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	height: auto;
	background: none;
}

.mg-latest-news .bn_title h2 {
	display: flex;
	align-items: center;
	height: auto;
	margin: 0;
	padding: 5px 14px;
	font-family: var(--psc-font-sans);
	font-size: var(--psc-text-xs);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--psc-on-primary);
	background: var(--psc-primary);
	border-radius: var(--psc-radius-pill);
}

/* Decorative leftover from the old skins: an empty span that rendered as a
   blank block once its background image went away. */
.mg-latest-news .bn_title h2 span:empty {
	display: none;
}

/* ---- The scrolling strip ----
   The inherited rule positions this absolutely, so it never joined the flex
   row and could not be centred against the label. Put it back in flow.

   The edges are faded rather than hard-cut. Each item's arrow is a ::before on
   the anchor, so it paints left of its text and scrolls into view first - with
   a plain overflow:hidden that reads as a stray arrow with no headline beside
   it. Fading the last stretch lets a part-arrived item dissolve instead. */
.mg-latest-news .mg-latest-news-slider {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 48px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 48px), transparent 100%);
}

/* Narrow screens have less room, so fade sooner and over a shorter distance. */
@media (max-width: 575.98px) {
	.mg-latest-news .mg-latest-news-slider {
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 28px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 28px), transparent 100%);
	}
}

/* Leave the plugin's generated elements in their default flow. Forcing flex
   on them reflows the duplicated track and leaves gaps; the strip is centred
   by the flex parent instead, and the text by line-height. */
.mg-latest-news .mg-latest-news-slider {
	line-height: 22px;
}

/* The plugin duplicates the track and floats the two copies side by side.
   The wrapper must be a flex row so the copies stay on one line (an auto-width
   block wrapper wraps the second copy underneath), but the copies themselves
   keep their normal inline flow - making them flex containers too spaces their
   links out and leaves gaps in the strip. */
.mg-latest-news .js-marquee-wrapper {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.mg-latest-news .js-marquee {
	flex: 0 0 auto;
}

.mg-latest-news .mg-latest-news-slider a {
	display: inline;
	color: var(--psc-text-muted);
	line-height: inherit;
	white-space: nowrap;
}

.mg-latest-news .mg-latest-news-slider a:hover {
	color: var(--psc-primary);
	text-decoration: none;
}

/* The label is the first thing a screen reader hits in this region; keep it
   readable but stop it dominating on a narrow screen. */
@media (max-width: 575.98px) {
	.mg-latest-news .bn_title h2 {
		padding: 4px 10px;
		font-size: 0.625rem;
	}
}

/* ====================================================================== *
 * 9. Cards and post lists
 * ====================================================================== */
.mg-posts-sec,
.mg-blog-post-box,
.mg-widget {
	background: var(--psc-surface);
}

.mg-posts-sec-post,
article.mg-posts-sec-post {
	background: var(--psc-surface-raised);
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-lg);
	overflow: hidden;
	margin-bottom: var(--psc-space-6);
	transition: box-shadow var(--psc-transition), border-color var(--psc-transition), transform var(--psc-transition);
}

.mg-posts-sec-post:hover {
	border-color: var(--psc-border-strong);
	box-shadow: var(--psc-shadow-md);
}

.mg-post-thumb.back-img {
	background-size: cover;
	background-position: center;
	min-height: 200px;
}

/* List cards: hold the thumbnail to 16:9 rather than letting it stretch to
   the row height, which left a tall image beside a short block of text. */
.mg-posts-sec-post .mg-post-thumb.md {
	aspect-ratio: 16 / 9;
	min-height: 0;
	height: auto;
}

@media (min-width: 768px) {
	.mg-posts-sec-post {
		align-items: stretch;
	}

	.mg-posts-sec-post .mg-post-thumb.md {
		aspect-ratio: auto;
		height: 100%;
		min-height: 220px;
	}

	/* Centre the text against the image instead of pinning it to the top. */
	.mg-posts-sec-post .mg-sec-top-post {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* The inherited CSS applies text-transform:capitalize to titles and excerpts,
   which mangles real sentences and technical names - "the container in .NET 10"
   becomes "The Container In .NET 10". Titles are already written in the casing
   the author intended, so let them through unchanged. Uppercase is kept only
   where it is a deliberate label: category chips, ad labels, meta. */
.title,
.title a,
.entry-title,
.entry-title a,
.mg-sec-top-post .title,
.mg-blog-post-box .title,
.mg-content,
.mg-content p,
.entry-content,
h1, h2, h3, h4, h5, h6 {
	text-transform: none;
}

.mg-sec-top-post .title,
.mg-blog-post-box .title {
	font-size: var(--psc-text-xl);
	margin-bottom: var(--psc-space-2);
}

.mg-sec-top-post .title a,
.mg-blog-post-box .title a {
	color: var(--psc-text);
}

.mg-sec-top-post .title a:hover,
.mg-blog-post-box .title a:hover {
	color: var(--psc-primary);
	text-decoration: none;
}

.mg-blog-meta,
.mg-blog-meta a {
	font-size: var(--psc-text-xs);
	color: var(--psc-text-muted);
}

.mg-blog-meta a:hover { color: var(--psc-primary); }

.mg-content p {
	color: var(--psc-text-muted);
	font-size: var(--psc-text-sm);
}

/* ---- Section headings ---- */
/* The container carries its own border-bottom in style.css, hardcoded to a
   near-black. Tokenise it here or it paints a heavy dark rule under every
   section heading. */
.mg-sec-title {
	border-bottom-color: var(--psc-border);
}

.mg-sec-title h4,
.mg-wid-title h6 {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--psc-space-3);
	font-size: var(--psc-text-lg);
	font-weight: 700;
	margin-bottom: var(--psc-space-4);
	padding-bottom: var(--psc-space-2);
	border-bottom: 2px solid var(--psc-border);
}

/* Newsup hung a 30x40 decorative block off the right edge of section headings
   (position:absolute; right:-30px) and filled it from the skin stylesheets.
   With those gone it renders as an empty square outside the heading. */
.mg-sec-title h4::before {
	content: none;
	display: none;
}

.mg-sec-title h4 span.bg,
.mg-wid-title h6 {
	background: none;
	color: var(--psc-text);
	padding: 0;
}

/* Brand tick under the section title. */
.mg-sec-title h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 48px;
	height: 2px;
	background: var(--psc-primary);
}

/* ====================================================================== *
 * 9b. Hero and image-backed cards
 *
 * Two jobs. When a post has a featured image, lay a scrim over it so white
 * text stays legible whatever the photo. When it does not, the inherited
 * markup still emits background-image:url("") inline, which the browser
 * resolves to nothing and the old CSS painted black — so the fallback has to
 * be a background-colour plus a gradient layer, because an inline
 * background-image always beats a stylesheet one.
 * ====================================================================== */
.mg-blog-post.back-img,
.mg-post-thumb.back-img {
	position: relative;
	background-color: #241A4D; /* deep .NET purple, so an image-less post reads as deliberate */
	background-size: cover;
	background-position: center;
	border-radius: var(--psc-radius-lg);
	overflow: hidden;
	isolation: isolate;
}

/* The caption element is called .bottom but the card is display:block, so it
   rendered at the top with the image dead below it. Push it to the foot of the
   card, which is also where the scrim gradient is darkest. */
.mg-blog-post.back-img {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.mg-blog-post.back-img > article,
.mg-blog-post.back-img > .mg-blog-inner {
	width: 100%;
	z-index: 2;
}

/* The inherited padding leaves only 20px under the meta line, so it sits on
   the card's bottom edge. Give the caption room to breathe, more on the large
   hero than on the smaller cards. */
.mg-blog-post.back-img > article.bottom {
	padding-bottom: var(--psc-space-8);
}

.mg-blog-post.lg.back-img > article.bottom {
	padding-bottom: var(--psc-space-10);
}

.mg-blog-post.back-img .mg-blog-meta {
	margin-bottom: 0;
}

/* Full-card click target, behind the caption so the caption's own links and
   the category chip stay clickable. */
.mg-blog-post.back-img > .link-div {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	height: auto;
}

.mg-blog-post.back-img::before,
.mg-post-thumb.back-img::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(135deg, rgba(81, 43, 212, 0.55) 0%, rgba(0, 164, 239, 0.18) 45%, rgba(15, 18, 22, 0.20) 100%),
		linear-gradient(180deg, rgba(15, 18, 22, 0) 35%, rgba(15, 18, 22, 0.88) 100%);
}

.mg-blog-post.back-img > *,
.mg-post-thumb.back-img > * {
	position: relative;
	z-index: 1;
}

/* Text sitting on the scrim is always white, never the link colour. */
.mg-blog-post.back-img .title,
.mg-blog-post.back-img .title a,
.mg-blog-post.back-img h1,
.mg-blog-post.back-img h1 a,
.mg-blog-post.back-img h4,
.mg-blog-post.back-img h4 a,
.mg-blog-post.back-img .mg-blog-meta,
.mg-blog-post.back-img .mg-blog-meta a,
.mg-blog-post.back-img .mg-content,
.mg-blog-post.back-img .mg-content p {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.mg-blog-post.back-img .title a:hover,
.mg-blog-post.back-img h4 a:hover {
	color: var(--psc-accent-yellow);
	text-decoration: none;
}

/*
 * The .post-form camera glyph has been removed from the templates. It was
 * hardcoded as a camera in eleven places regardless of the post's actual
 * format, so it told the reader nothing. The genuine per-format indicator is
 * psc_post_format(), which emits .af-post-format and is used on the
 * featured-posts banner only.
 */

/* ====================================================================== *
 * 10. Category chips
 *
 * Each category can define its own colour on the term edit screen; the
 * inherited markup already emits an inline background for those. This styles
 * the shape and provides the fallback.
 * ====================================================================== */
.mg-blog-category a,
.psc-cat-chip {
	display: inline-block;
	margin: 0 var(--psc-space-1) var(--psc-space-1) 0;
	padding: 3px 10px;
	font-family: var(--psc-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--psc-on-primary);
	background: var(--psc-primary);
	border-radius: var(--psc-radius-pill);
	line-height: 1.6;
}

.mg-blog-category a:hover {
	color: #fff;
	text-decoration: none;
	filter: brightness(1.1);
}

/* ====================================================================== *
 * 10b. Front-page category sections
 *
 * Each section carries its category's colour as --psc-section-accent, set
 * inline by the renderer, so the heading rule and hover states pick it up
 * without a stylesheet rule per category.
 * ====================================================================== */
.psc-cat-section {
	padding-block: var(--psc-space-8);
	border-bottom: 1px solid var(--psc-border);
}

/* Ad strip sitting immediately before or after a category block. Full-bleed
   background so it reads as a separator between blocks rather than as part of
   the section above or below it. */
.psc-cat-section-ad {
	padding-block: var(--psc-space-5);
	background: var(--psc-surface-sunken);
	border-bottom: 1px solid var(--psc-border);
}

.psc-cat-section-ad .psc-ad {
	margin: 0;
}

.psc-cat-section:nth-of-type(even) {
	background: var(--psc-surface-sunken);
}

.psc-cat-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--psc-space-4);
	margin-bottom: var(--psc-space-6);
	padding-bottom: var(--psc-space-3);
	border-bottom: 2px solid var(--psc-border);
	position: relative;
}

/* Accent tick under the heading, in the category's own colour. */
.psc-cat-section__head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 56px;
	height: 2px;
	background: var(--psc-section-accent, var(--psc-primary));
}

.psc-cat-section__title {
	margin: 0;
	font-size: var(--psc-text-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Uses the link colour, not the section accent: an author-chosen category
   colour is often too dark to read as text on the dark theme's background
   (.NET purple on #0F1216 measures 2.4:1). The accent still identifies the
   section through the heading tick and the card chips. */
.psc-cat-section__more {
	flex: 0 0 auto;
	font-size: var(--psc-text-sm);
	font-weight: 600;
	color: var(--psc-link);
	white-space: nowrap;
}

.psc-cat-section__more:hover {
	text-decoration: underline;
}

.psc-cat-section__more .fa {
	margin-left: 4px;
}

/* ---- Card ---- */
.psc-cat-card {
	display: flex;
	flex-direction: column;
	background: var(--psc-surface-raised);
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-lg);
	overflow: hidden;
	transition: border-color var(--psc-transition), box-shadow var(--psc-transition);
}

.psc-cat-card:hover {
	border-color: var(--psc-section-accent, var(--psc-border-strong));
	box-shadow: var(--psc-shadow-md);
}

.psc-cat-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background-color: #241A4D;
	background-size: cover;
	background-position: center;
}

/* No featured image: a tint of the section accent rather than a black box. */
.psc-cat-card__media.is-empty {
	background-image: linear-gradient(135deg, var(--psc-section-accent, var(--psc-primary)) 0%, #0F1216 100%);
	opacity: 0.9;
}

.psc-cat-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--psc-space-2);
	padding: var(--psc-space-4);
}

.psc-cat-card__cats a {
	display: inline-block;
	margin: 0 4px 4px 0;
	padding: 2px 9px;
	font-family: var(--psc-font-mono);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--psc-on-primary);
	background: var(--psc-section-accent, var(--psc-primary));
	border-radius: var(--psc-radius-pill);
}

.psc-cat-card__cats a:hover {
	color: #fff;
	text-decoration: none;
	filter: brightness(1.12);
}

.psc-cat-card__title {
	margin: 0;
	font-size: var(--psc-text-base);
	line-height: var(--psc-leading-snug);
}

.psc-cat-card__title a { color: var(--psc-text); }

.psc-cat-card__title a:hover {
	color: var(--psc-section-accent, var(--psc-primary));
	text-decoration: none;
}

.psc-cat-card__meta {
	font-size: var(--psc-text-xs);
	color: var(--psc-text-muted);
}

.psc-cat-card__excerpt {
	margin: 0;
	font-size: var(--psc-text-sm);
	color: var(--psc-text-muted);
}

/* ---- Layout: grid ---- */
.psc-cat-section--grid .psc-cat-section__body {
	display: grid;
	gap: var(--psc-space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 576px) {
	.psc-cat-section--grid .psc-cat-section__body { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
	.psc-cat-section--grid .psc-cat-section__body { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Layout: compact list ---- */
.psc-cat-section--list .psc-cat-section__body {
	display: grid;
	gap: var(--psc-space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.psc-cat-section--list .psc-cat-section__body { grid-template-columns: repeat(2, 1fr); }
}

.psc-cat-section--list .psc-cat-card {
	flex-direction: row;
	align-items: stretch;
}

.psc-cat-section--list .psc-cat-card__media {
	flex: 0 0 120px;
	aspect-ratio: auto;
}

.psc-cat-section--list .psc-cat-card__body {
	padding: var(--psc-space-3) var(--psc-space-4);
	justify-content: center;
}

.psc-cat-section--list .psc-cat-card__title {
	font-size: var(--psc-text-sm);
}

/* ---- Layout: spotlight ---- */
.psc-cat-section--spotlight .psc-cat-section__body {
	display: grid;
	gap: var(--psc-space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 992px) {
	.psc-cat-section--spotlight .psc-cat-section__body {
		grid-template-columns: 1.4fr 1fr;
		align-items: start;
	}
}

.psc-cat-section--spotlight .psc-cat-section__lead .psc-cat-card__title {
	font-size: var(--psc-text-xl);
}

.psc-cat-section--spotlight .psc-cat-section__rest {
	display: grid;
	gap: var(--psc-space-3);
}

.psc-cat-section--spotlight .psc-cat-section__rest .psc-cat-card {
	flex-direction: row;
}

.psc-cat-section--spotlight .psc-cat-section__rest .psc-cat-card__media {
	flex: 0 0 96px;
	aspect-ratio: auto;
}

.psc-cat-section--spotlight .psc-cat-section__rest .psc-cat-card__body {
	padding: var(--psc-space-3);
	justify-content: center;
}

.psc-cat-section--spotlight .psc-cat-section__rest .psc-cat-card__title {
	font-size: var(--psc-text-sm);
}

/* ====================================================================== *
 * 11. Code
 *
 * Dark surface even in the light theme: a code block should read as an
 * editor. Code scrolls rather than wraps, because a wrapped snippet is a
 * misleading snippet.
 * ====================================================================== */
.psc-code {
	position: relative;
	margin: var(--psc-space-6) 0;
}

.entry-content pre,
article pre,
.mg-blog-post-box pre,
.psc-code pre {
	margin: 0;
	padding: var(--psc-space-5);
	background: var(--psc-code-bg);
	color: var(--psc-code-text);
	border: 1px solid var(--psc-code-border);
	border-radius: var(--psc-radius-lg);
	font-family: var(--psc-font-mono);
	font-size: 0.8125rem;
	line-height: 1.65;
	tab-size: 4;
	overflow-x: auto;
	white-space: pre;
}

.entry-content pre code,
article pre code,
.psc-code pre code {
	background: none;
	color: inherit;
	padding: 0;
	font-size: inherit;
	white-space: inherit;
}

/* Inline code reads as brand-tinted, not as a block. */
.entry-content code,
article :not(pre) > code {
	padding: 0.15em 0.4em;
	font-family: var(--psc-font-mono);
	font-size: 0.875em;
	color: var(--psc-code-inline-fg);
	background: var(--psc-code-inline-bg);
	border-radius: var(--psc-radius-sm);
}

/* ---- Copy button ---- */
.psc-code__copy {
	position: absolute;
	top: var(--psc-space-3);
	right: var(--psc-space-3);
	padding: 4px 10px;
	font-family: var(--psc-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #cfd6dd;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--psc-radius-sm);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--psc-transition), background var(--psc-transition), color var(--psc-transition);
}

.psc-code:hover .psc-code__copy,
.psc-code__copy:focus-visible {
	opacity: 1;
}

/* Always visible on touch, where there is no hover. */
@media (hover: none) {
	.psc-code__copy { opacity: 1; }
}

.psc-code__copy:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.psc-code__copy.is-copied {
	color: #0F1216;
	background: var(--psc-accent-green);
	border-color: var(--psc-accent-green);
}

/* ====================================================================== *
 * 12. Post body
 * ====================================================================== */
.entry-content,
.mg-blog-post-box .mg-content {
	font-size: var(--psc-text-lg);
	line-height: var(--psc-leading-base);
	color: var(--psc-text);
}

.entry-content > * + * { margin-top: var(--psc-space-5); }

.entry-content h2 {
	margin-top: var(--psc-space-10);
	font-size: var(--psc-text-2xl);
}

.entry-content h3 {
	margin-top: var(--psc-space-8);
	font-size: var(--psc-text-xl);
}

.entry-content blockquote {
	margin: var(--psc-space-8) 0;
	padding: var(--psc-space-4) var(--psc-space-6);
	border-left: 3px solid var(--psc-primary);
	background: var(--psc-surface-sunken);
	border-radius: 0 var(--psc-radius-md) var(--psc-radius-md) 0;
	color: var(--psc-text-muted);
	font-style: normal;
}

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

.entry-content ul,
.entry-content ol { padding-left: var(--psc-space-6); }

.entry-content li + li { margin-top: var(--psc-space-2); }

.entry-content img { border-radius: var(--psc-radius-md); }

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--psc-text-sm);
}

.entry-content th,
.entry-content td {
	padding: var(--psc-space-3);
	border: 1px solid var(--psc-border);
	text-align: left;
}

.entry-content th {
	background: var(--psc-surface-sunken);
	font-weight: 700;
}

/* ====================================================================== *
 * 13. Sidebar
 * ====================================================================== */
.mg-widget {
	margin-bottom: var(--psc-space-8);
	padding: var(--psc-space-5);
	background: var(--psc-surface-raised);
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-lg);
}

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

.mg-widget li + li {
	margin-top: var(--psc-space-2);
	padding-top: var(--psc-space-2);
	border-top: 1px solid var(--psc-border);
}

.mg-widget a { color: var(--psc-text); }
.mg-widget a:hover { color: var(--psc-primary); text-decoration: none; }

/* ---------------------------------------------------------------------- *
 * Hierarchical term lists
 *
 * WordPress nests children in ul.children *inside* the parent <li>, so the
 * first child is :first-child of that list and the "li + li" rule above never
 * gave it a separator - the parent and its first child ran together as one
 * pair. With no indentation either, every row looked like the same level.
 *
 * Fixed with three cues rather than one: the parent carries more weight, the
 * children are indented behind a guide line, and the nested list is spaced
 * away from its parent's own label.
 * ---------------------------------------------------------------------- */

/* Top-level terms read as the heading of their group. */
.mg-widget > ul > li > a,
.mg-widget .wp-block-categories-list > li > a,
.mg-widget .widget_categories > ul > li > a {
	font-weight: 700;
}

/* Nested lists: indent behind a guide, and stand clear of the parent label.
 *
 * style.css zeroes the padding with ".mg-sidebar .mg-widget ul", which at
 * (0,2,1) outranks a plain ".mg-widget .children" at (0,2,0) - the indent was
 * being dropped and only the 2px guide showed. Matching the element in the
 * selector, and naming the sidebar case explicitly, wins it back. */
.mg-widget ul.children,
.mg-widget ul ul,
.mg-sidebar .mg-widget ul.children,
.mg-sidebar .mg-widget ul ul {
	margin: var(--psc-space-3) 0 0;
	padding-left: var(--psc-space-4);
	border-left: 2px solid var(--psc-border);
	list-style: none;
}

/* The nested list opens a level, so its first row needs no rule above it -
   the indent and the guide already mark the change. Later rows keep the
   separator inherited from "li + li". */
.mg-widget .children > li:first-child,
.mg-widget ul ul > li:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Children are subordinate: lighter, smaller, muted until hovered. */
.mg-widget .children > li > a,
.mg-widget ul ul > li > a {
	font-weight: 400;
	font-size: var(--psc-text-sm);
	color: var(--psc-text-muted);
}

.mg-widget .children > li > a:hover,
.mg-widget ul ul > li > a:hover {
	color: var(--psc-primary);
}

/* A parent row keeps its own separator from the term above it, but the rule
   must not be drawn again by the nested list it contains. */
.mg-widget li > .children:last-child {
	margin-bottom: 0;
}

/* The current term, at any depth. */
.mg-widget .current-cat > a,
.mg-widget .current-cat-parent > a,
.mg-widget .current-menu-item > a {
	color: var(--psc-primary);
	font-weight: 700;
}

/* Search widget in the sidebar, matching the masthead field.
 *
 * Two different markups end up here. The classic widget is a flat form, so the
 * form itself becomes the flex row. WordPress's block search is not: it puts
 * the label on its own line and expects .wp-block-search__inside-wrapper to be
 * the row. Making that form a flex row instead left the label taking width
 * beside a wrapper still sized to 100%, pushing the button outside the widget.
 */
.mg-widget .search-form,
.mg-widget form[role="search"]:not([class*="wp-block-search"]),
.widget_search form:not([class*="wp-block-search"]) {
	display: flex;
	gap: var(--psc-space-2);
}

.mg-widget form[class*="wp-block-search"],
.mg-widget .wp-block-search {
	display: block;
	max-width: 100%;
}

.mg-widget .wp-block-search__label {
	display: block;
	margin-bottom: var(--psc-space-2);
	font-size: var(--psc-text-sm);
	font-weight: 600;
	color: var(--psc-text);
}

.mg-widget .wp-block-search__inside-wrapper {
	display: flex;
	gap: var(--psc-space-2);
	width: 100%;
	max-width: 100%;
}

.mg-widget .wp-block-search__input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.mg-widget .wp-block-search__button {
	flex: 0 0 auto;
	margin: 0;
}

/* Nothing in a widget may exceed its box, whatever markup a plugin injects. */
.mg-widget > *,
.mg-widget form,
.mg-widget img,
.mg-widget iframe {
	max-width: 100%;
}

.mg-widget input[type="search"],
.mg-widget input[type="text"],
.widget_search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	padding: 0 var(--psc-space-3);
	font-family: var(--psc-font-sans);
	font-size: var(--psc-text-sm);
	color: var(--psc-text);
	background: var(--psc-surface-sunken);
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-md);
}

.mg-widget input[type="search"]:focus,
.widget_search input[type="search"]:focus {
	outline: none;
	background: var(--psc-surface);
	border-color: var(--psc-primary);
	box-shadow: 0 0 0 3px var(--psc-primary-soft);
}

.mg-widget input[type="submit"],
.mg-widget button[type="submit"],
.widget_search input[type="submit"],
.widget_search button[type="submit"] {
	flex: 0 0 auto;
	height: 42px;
	padding: 0 var(--psc-space-4);
	font-family: var(--psc-font-sans);
	font-size: var(--psc-text-sm);
	font-weight: 600;
	color: var(--psc-on-primary);
	background: var(--psc-primary);
	border: 0;
	border-radius: var(--psc-radius-md);
	cursor: pointer;
	transition: background var(--psc-transition);
}

.mg-widget input[type="submit"]:hover,
.mg-widget button[type="submit"]:hover,
.widget_search input[type="submit"]:hover,
.widget_search button[type="submit"]:hover {
	background: var(--psc-primary-dark);
}

.tagcloud a {
	display: inline-block;
	margin: 0 var(--psc-space-1) var(--psc-space-1) 0;
	padding: 4px 10px;
	font-size: var(--psc-text-xs) !important;
	color: var(--psc-text-muted);
	background: var(--psc-surface-sunken);
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-pill);
}

.tagcloud a:hover {
	color: var(--psc-on-primary);
	background: var(--psc-primary);
	border-color: var(--psc-primary);
	text-decoration: none;
}

/* ====================================================================== *
 * 14. Pagination
 * ====================================================================== */
.pagination .page-numbers,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	margin: 0 3px;
	padding: 0 var(--psc-space-3);
	color: var(--psc-text);
	background: var(--psc-surface-raised);
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-md);
	font-size: var(--psc-text-sm);
	font-weight: 600;
}

.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
	border-color: var(--psc-primary);
	color: var(--psc-primary);
	text-decoration: none;
}

.pagination .page-numbers.current,
.nav-links .page-numbers.current {
	color: var(--psc-on-primary);
	background: var(--psc-primary);
	border-color: var(--psc-primary);
}

/* ====================================================================== *
 * 15. Footer
 * ====================================================================== */
footer {
	background: var(--psc-footer-bg);
	color: var(--psc-footer-text);
}

footer .overlay { background: transparent !important; }

footer h6 {
	color: #fff;
	font-size: var(--psc-text-sm);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: var(--psc-space-4);
}

footer a { color: var(--psc-footer-text); }
footer a:hover { color: #fff; }

footer .mg-widget {
	background: transparent;
	border: 0;
	padding: 0;
}

footer .mg-widget li + li { border-top-color: rgba(255, 255, 255, 0.08); }

/* ====================================================================== *
 * 15b. Inherited and vendor components, tokenised
 *
 * Found by auditing the rendered pages in dark mode for opaque light
 * backgrounds. style.css itself only carries ~130 colour literals (Newsup
 * kept its palette in the skin files, which are gone); the remainder come
 * from bootstrap.css and WordPress core markup. Rather than rewrite a vendor
 * stylesheet, only the components the theme actually renders are mapped here.
 * ====================================================================== */

/* ---- Panels the theme paints white ---- */
.mg-card-box,
.missed-inner,
.comments-area,
.mg-featured-slider,
.mg-posts-sec-inner,
.mg-blog-post-box {
	background: var(--psc-surface-raised);
	color: var(--psc-text);
	border-color: var(--psc-border);
}

.missed-inner {
	border-radius: var(--psc-radius-lg);
}

/* ---- Bootstrap: tabs (Latest / Popular / Trending) ---- */
.nav-tabs {
	border-bottom-color: var(--psc-border);
}

.nav-tabs .nav-link {
	color: var(--psc-text-muted);
	background: transparent;
	border-color: transparent;
	border-radius: var(--psc-radius-md) var(--psc-radius-md) 0 0;
}

.nav-tabs .nav-link:hover {
	color: var(--psc-primary);
	border-color: transparent;
	background: var(--psc-primary-soft);
}

/* style.css carries .top-right-area .nav-tabs .nav-link.active with a
   hardcoded #fff, which outranks a plain .nav-tabs .nav-link.active. Matching
   its specificity rather than reaching for !important. */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.top-right-area .nav-tabs .nav-link.active,
.mg-widget .nav-tabs .nav-link.active {
	color: var(--psc-text);
	background: var(--psc-surface-raised);
	border-color: var(--psc-border) var(--psc-border) var(--psc-surface-raised);
}

.tab-content,
.tab-pane {
	background: transparent;
	color: var(--psc-text);
}

/* ---- Bootstrap: form controls ---- */
.form-control,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	color: var(--psc-text);
	background-color: var(--psc-surface-sunken);
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-md);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
	color: var(--psc-text);
	background-color: var(--psc-surface);
	border-color: var(--psc-primary);
	box-shadow: 0 0 0 3px var(--psc-primary-soft);
	outline: none;
}

::placeholder { color: var(--psc-text-faint); opacity: 1; }

/* ---- Buttons: Bootstrap, WordPress blocks and comment forms ---- */
.btn,
.btn-default,
.btn-primary,
input[type="submit"],
button[type="submit"],
.wp-block-button__link,
.wp-element-button,
.comment-form .submit {
	color: var(--psc-on-primary);
	background-color: var(--psc-primary);
	border: 1px solid var(--psc-primary);
	border-radius: var(--psc-radius-md);
	font-weight: 600;
	transition: background-color var(--psc-transition), border-color var(--psc-transition);
}

.btn:hover,
.btn-default:hover,
.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.comment-form .submit:hover {
	color: #fff;
	background-color: var(--psc-primary-dark);
	border-color: var(--psc-primary-dark);
}

/* ---- Comments ---- */
.comments-area,
#respond {
	background: var(--psc-surface-raised);
	color: var(--psc-text);
}

.comment-body,
.comment-list li {
	border-color: var(--psc-border);
	color: var(--psc-text);
}

.comment-meta,
.comment-metadata,
.comment-metadata a,
.says {
	color: var(--psc-text-muted);
}

.comment-reply-title,
.comments-title {
	color: var(--psc-text);
}

/* ---- Permanently dark regions ----
 *
 * Two areas are dark in BOTH themes: the footer, and the "you may have
 * missed" cards, which style.css paints #333. Text inside them was still
 * inheriting the light-theme tokens, so in light mode it was dark-on-dark
 * (the site title in the footer measured 1.09:1). These regions need their
 * own foreground, independent of the active theme.
 */
footer,
footer p,
footer li,
footer span,
footer td,
footer .site-description,
footer .mg-blog-meta,
footer .textwidget,
footer .auth {
	color: var(--psc-footer-text);
}

footer a,
footer .title a,
footer .site-title a,
footer .mg-blog-meta a {
	color: var(--psc-footer-text);
}

footer a:hover,
footer .title a:hover,
footer .site-title a:hover {
	color: #fff;
}

footer h1, footer h2, footer h3,
footer h4, footer h5, footer h6,
footer .site-title,
footer .title {
	color: #fff;
}

/* "You may have missed" cards. */
.mg-blog-post-3 {
	position: relative;
	background-color: #241A4D;
	background-size: cover;
	background-position: center;
	border-radius: var(--psc-radius-md);
	overflow: hidden;
}

.mg-blog-post-3::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 18, 22, 0.15) 40%, rgba(15, 18, 22, 0.85) 100%);
}

.mg-blog-post-3 > * {
	position: relative;
	z-index: 1;
}

.mg-blog-post-3,
.mg-blog-post-3 p,
.mg-blog-post-3 span,
.mg-blog-post-3 .title,
.mg-blog-post-3 .title a,
.mg-blog-post-3 .mg-blog-meta,
.mg-blog-post-3 .mg-blog-meta a,
.mg-blog-post-3 .auth {
	color: #fff;
}

.mg-blog-post-3 .title a:hover {
	color: var(--psc-accent-yellow);
}

/* Related-post cards: the title was overflowing its box and being clipped
   mid-word. Cap it at three lines with an ellipsis instead. */
.mg-blog-post-3 {
	display: flex;
	min-height: 200px;
}

.mg-blog-post-3 .mg-blog-inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--psc-space-2);
	width: 100%;
	padding: var(--psc-space-4);
}

.mg-blog-post-3 .title {
	margin: 0;
	font-size: var(--psc-text-base);
	line-height: var(--psc-leading-snug);
}

.mg-blog-post-3 .title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mg-blog-post-3 .mg-blog-meta {
	font-size: var(--psc-text-xs);
}

/* ---- Share buttons ----
 *
 * style.css gives these a white glyph with a transparent box, which is
 * invisible on the light theme, and paints .email a hardcoded #222 so only
 * that one showed. Neutral outline by default in both themes, filling with
 * the network's colour on hover.
 */
.post-share-icons .link,
.post-share-icons a.link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 4px 4px 0;
	color: var(--psc-text-muted);
	background: transparent;
	border: 1px solid var(--psc-border);
	border-radius: var(--psc-radius-md);
	transition: color var(--psc-transition), background var(--psc-transition), border-color var(--psc-transition);
}

.post-share-icons .link i,
.post-share-icons .link:before {
	color: inherit;
}

.post-share-icons .link:hover {
	color: #fff;
	background: var(--psc-primary);
	border-color: var(--psc-primary);
	text-decoration: none;
}

.post-share-icons .facebook:hover  { background: #1877F2; border-color: #1877F2; }
.post-share-icons .twitter:hover   { background: #14171A; border-color: #14171A; }
.post-share-icons .linkedin:hover  { background: #0A66C2; border-color: #0A66C2; }
.post-share-icons .pinterest:hover { background: #E60023; border-color: #E60023; }
.post-share-icons .email:hover     { background: var(--psc-text); border-color: var(--psc-text); color: var(--psc-surface); }

/* ---- Horizontal rules and generic borders ---- */
hr {
	border-color: var(--psc-border);
	background-color: var(--psc-border);
}

/* ---- Selection ---- */
::selection {
	background: var(--psc-primary);
	color: #fff;
}

/* ---- reCAPTCHA attribution ----
 * Shown only when the floating badge is hidden, which is the condition
 * Google attaches to hiding it. */
.psc-recaptcha-note {
	padding-block: var(--psc-space-3);
	background: var(--psc-footer-bg);
	color: var(--psc-footer-text);
	font-size: var(--psc-text-xs);
	text-align: center;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.psc-recaptcha-note a {
	color: var(--psc-footer-text);
	text-decoration: underline;
}

.psc-recaptcha-note a:hover { color: #fff; }

/* ====================================================================== *
 * 16. Accessibility helpers
 * ====================================================================== */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: var(--psc-space-3);
	left: var(--psc-space-3);
	z-index: var(--psc-z-modal);
	width: auto;
	height: auto;
	padding: var(--psc-space-3) var(--psc-space-4);
	clip: auto;
	color: var(--psc-on-primary);
	background: var(--psc-primary);
	border-radius: var(--psc-radius-md);
	font-weight: 600;
}