/*
 * shilapati component layer.
 *
 * Loaded after style.css so it can adopt the design tokens printed by
 * inc/design-system.php. Every colour here comes from a token, so the whole
 * palette is Customizer-driven.
 *
 * Sections:
 *   1. Tokens, base and accessibility
 *   2. Breadcrumbs
 *   3. Province switcher
 *   4. AI summary
 *   5. Share buttons
 *   6. News cards, bylines, author boxes
 *   7. Footer credits
 *   8. Motion
 *   9. Responsive
 *  10. Print
 *  11. Optional dark scheme
 */

/* ==========================================================================
   1. Tokens, base and accessibility
   ========================================================================== */

:root {
	--shilapati-space-xs: 0.375rem;
	--shilapati-space-sm: 0.625rem;
	--shilapati-space-md: 1rem;
	--shilapati-space-lg: 1.5rem;
	--shilapati-space-xl: 2.25rem;

	--shilapati-shadow-sm: 0 1px 2px rgba(18, 33, 46, 0.06);
	--shilapati-shadow-md: 0 6px 18px rgba(18, 33, 46, 0.08);

	--shilapati-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * The theme marks up screen-reader-only labels in a dozen templates but never
 * defined the class, so every one of them was rendering as visible text -
 * stray "Page", "Author:" and "Tags:" fragments in the layout. This is the
 * standard WordPress implementation, kept out of `display: none` so assistive
 * technology still announces it.
 */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	word-wrap: normal !important;
}

/* Skip links and anything else focusable must come back into view. */
.screen-reader-text:focus {
	z-index: 100000;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	color: var(--shilapati-heading, #12212e);
	background: var(--shilapati-card, #fff);
	border-radius: var(--shilapati-radius, 10px);
	box-shadow: var(--shilapati-shadow-md);
	clip: auto;
	clip-path: none;
	font-size: 1rem;
	text-decoration: none;
}

body {
	background-color: var(--shilapati-background, #f6f7f9);
	color: var(--shilapati-text, #26313d);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--shilapati-heading, #12212e);
}

.entry-content a:not(.btn),
.post-content a:not(.btn) {
	color: var(--shilapati-link, #0a58ca);
	text-underline-offset: 0.18em;
}

.entry-content a:not(.btn):hover,
.entry-content a:not(.btn):focus-visible,
.post-content a:not(.btn):hover,
.post-content a:not(.btn):focus-visible {
	color: var(--shilapati-hover, #005b87);
}

/* Devanagari needs a little more leading than Latin at the same size. */
.post-content,
.entry-content {
	line-height: 1.85;
}

/* A single visible focus treatment for every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--shilapati-accent, #d90429);
	outline-offset: 2px;
	border-radius: var(--shilapati-radius-sm, 5px);
}

.shilapati-skip-link:focus {
	position: fixed;
	top: var(--shilapati-space-sm);
	left: var(--shilapati-space-sm);
	z-index: 100000;
	clip: auto !important;
	clip-path: none;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	background: var(--shilapati-card, #fff);
	color: var(--shilapati-heading, #12212e);
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--shilapati-radius, 10px);
	box-shadow: var(--shilapati-shadow-md);
}

/* Every touch target reaches the 44px recommendation. */
.shilapati-province-switcher__link,
.shilapati-share__link,
.shilapati-ai-summary__tab,
.shilapati-ai-summary__toggle {
	min-height: 44px;
}

/* ==========================================================================
   2. Breadcrumbs
   ========================================================================== */

.shilapati-breadcrumbs {
	margin-bottom: var(--shilapati-space-md);
	font-size: 0.875rem;
}

.shilapati-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--shilapati-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.shilapati-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--shilapati-space-xs);
	min-width: 0;
	color: var(--shilapati-muted, #5b6875);
}

.shilapati-breadcrumbs__item + .shilapati-breadcrumbs__item::before {
	content: "/";
	color: var(--shilapati-border, #e3e7ec);
}

.shilapati-breadcrumbs__item a {
	color: var(--shilapati-muted, #5b6875);
	text-decoration: none;
}

.shilapati-breadcrumbs__item a:hover,
.shilapati-breadcrumbs__item a:focus-visible {
	color: var(--shilapati-primary, #0073aa);
	text-decoration: underline;
}

.shilapati-breadcrumbs__item [aria-current="page"] {
	overflow: hidden;
	max-width: 28ch;
	color: var(--shilapati-heading, #12212e);
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   3. Province switcher
   ========================================================================== */

.shilapati-province-switcher {
	margin-bottom: var(--shilapati-space-lg);
}

.shilapati-province-switcher__heading {
	display: flex;
	align-items: center;
	gap: var(--shilapati-space-sm);
	margin: 0 0 var(--shilapati-space-sm);
	color: var(--shilapati-heading, #12212e);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.shilapati-province-switcher__marker {
	display: inline-block;
	flex: 0 0 auto;
	width: 4px;
	height: 1.35em;
	background: var(--shilapati-accent, #d90429);
	border-radius: 4px;
}

.shilapati-province-switcher__scroller {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--shilapati-space-xs);
}

.shilapati-province-switcher__list {
	display: flex;
	flex: 1 1 auto;
	gap: var(--shilapati-space-xs);
	margin: 0;
	padding: 2px;
	list-style: none;

	/* Horizontal scroll instead of wrapping keeps the row one line on phones. */
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.shilapati-province-switcher__list::-webkit-scrollbar {
	display: none;
}

.shilapati-province-switcher__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.shilapati-province-switcher__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--shilapati-space-xs);
	padding: 0.5rem 0.95rem;
	color: var(--shilapati-heading, #12212e);
	background: var(--shilapati-card, #fff);
	border: 1px solid var(--shilapati-border, #e3e7ec);
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--shilapati-transition), background-color var(--shilapati-transition),
		border-color var(--shilapati-transition), transform var(--shilapati-transition),
		box-shadow var(--shilapati-transition);
}

.shilapati-province-switcher__icon {
	color: var(--shilapati-accent, #d90429);
	font-size: 0.9em;
	transition: color var(--shilapati-transition);
}

.shilapati-province-switcher__count {
	padding: 0.05rem 0.45rem;
	color: var(--shilapati-muted, #5b6875);
	background: rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.08);
	border-radius: 999px;
	font-size: 0.78em;
	font-weight: 700;
}

.shilapati-province-switcher__link:hover,
.shilapati-province-switcher__link:focus-visible {
	color: var(--shilapati-on-primary, #fff);
	background: var(--shilapati-primary, #0073aa);
	border-color: var(--shilapati-primary, #0073aa);
}

.shilapati-province-switcher__link:hover .shilapati-province-switcher__icon,
.shilapati-province-switcher__link:focus-visible .shilapati-province-switcher__icon,
.shilapati-province-switcher__link.is-active .shilapati-province-switcher__icon {
	color: currentColor;
}

.shilapati-province-switcher__link:hover .shilapati-province-switcher__count,
.shilapati-province-switcher__link.is-active .shilapati-province-switcher__count {
	color: currentColor;
	background: rgba(255, 255, 255, 0.22);
}

.shilapati-province-switcher__link.is-active {
	color: var(--shilapati-on-active, #fff);
	background: var(--shilapati-active, #c1121f);
	border-color: var(--shilapati-active, #c1121f);
	box-shadow: 0 4px 12px rgba(var(--shilapati-active-rgb, 193, 18, 31), 0.28);
}

/* Underline variant */
.shilapati-province-switcher.is-style-underline .shilapati-province-switcher__link {
	padding: 0.5rem 0.4rem;
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	box-shadow: none;
}

.shilapati-province-switcher.is-style-underline .shilapati-province-switcher__link:hover,
.shilapati-province-switcher.is-style-underline .shilapati-province-switcher__link:focus-visible {
	color: var(--shilapati-primary, #0073aa);
	background: transparent;
	border-bottom-color: rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.4);
}

.shilapati-province-switcher.is-style-underline .shilapati-province-switcher__link.is-active {
	color: var(--shilapati-active, #c1121f);
	background: transparent;
	border-bottom-color: var(--shilapati-active, #c1121f);
	box-shadow: none;
}

/* Cards variant */
.shilapati-province-switcher.is-style-cards .shilapati-province-switcher__link {
	flex-direction: column;
	gap: 2px;
	min-width: 7.5rem;
	padding: 0.7rem 0.9rem;
	border-radius: var(--shilapati-radius, 10px);
	box-shadow: var(--shilapati-shadow-sm);
}

.shilapati-province-switcher.is-style-cards .shilapati-province-switcher__icon {
	font-size: 1.15em;
}

.shilapati-province-switcher__arrow {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	color: var(--shilapati-heading, #12212e);
	background: var(--shilapati-card, #fff);
	border: 1px solid var(--shilapati-border, #e3e7ec);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--shilapati-transition), color var(--shilapati-transition);
}

.shilapati-province-switcher__arrow:hover,
.shilapati-province-switcher__arrow:focus-visible {
	color: var(--shilapati-on-primary, #fff);
	background: var(--shilapati-primary, #0073aa);
}

/* Arrows only exist where there is a pointer and the row overflows. */
@media (min-width: 992px) and (hover: hover) {
	.shilapati-province-switcher__arrow:not([hidden]) {
		display: inline-flex;
	}
}

/* Archive variant sits tight under the page heading. */
.shilapati-province-switcher--archive {
	padding-bottom: var(--shilapati-space-sm);
	border-bottom: 1px solid var(--shilapati-border, #e3e7ec);
}

/* ==========================================================================
   4. AI summary
   ========================================================================== */

.shilapati-ai-summary {
	/* Visually separate from the article: a distinct surface, a left rule and
	   generous padding, but no advertisement styling. */
	margin: 0 0 var(--shilapati-space-lg);
	padding: var(--shilapati-space-md) var(--shilapati-space-md) var(--shilapati-space-sm);
	background:
		linear-gradient(
			180deg,
			rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.05),
			rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.01)
		),
		var(--shilapati-card, #fff);
	border: 1px solid rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.22);
	border-left: 4px solid var(--shilapati-primary, #0073aa);
	border-radius: var(--shilapati-radius, 10px);
}

.shilapati-ai-summary__header {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shilapati-space-sm);
	align-items: center;
	justify-content: space-between;
}

.shilapati-ai-summary__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--shilapati-space-xs);
	margin: 0;
}

.shilapati-ai-summary__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	color: var(--shilapati-on-primary, #fff);
	background: var(--shilapati-primary, #0073aa);
	border-radius: 50%;
	font-size: 0.95rem;
}

.shilapati-ai-summary__label {
	color: var(--shilapati-primary, #0073aa);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.shilapati-ai-summary__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--shilapati-space-xs);
	padding: 0.35rem 0.7rem;
	color: var(--shilapati-muted, #5b6875);
	background: transparent;
	border: 1px solid var(--shilapati-border, #e3e7ec);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: color var(--shilapati-transition), border-color var(--shilapati-transition);
}

.shilapati-ai-summary__toggle:hover,
.shilapati-ai-summary__toggle:focus-visible {
	color: var(--shilapati-primary, #0073aa);
	border-color: var(--shilapati-primary, #0073aa);
}

.shilapati-ai-summary__toggle .bi {
	transition: transform var(--shilapati-transition);
}

.shilapati-ai-summary__toggle[aria-expanded="false"] .bi {
	transform: rotate(-90deg);
}

.shilapati-ai-summary__body {
	margin-top: var(--shilapati-space-sm);
}

.shilapati-ai-summary__tabs {
	display: flex;
	gap: var(--shilapati-space-xs);
	margin-bottom: var(--shilapati-space-sm);
	padding-bottom: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

.shilapati-ai-summary__tabs::-webkit-scrollbar {
	display: none;
}

.shilapati-ai-summary__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--shilapati-space-xs);
	flex: 0 0 auto;
	padding: 0.45rem 0.8rem;
	color: var(--shilapati-heading, #12212e);
	background: var(--shilapati-card, #fff);
	border: 1px solid var(--shilapati-border, #e3e7ec);
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--shilapati-transition), background-color var(--shilapati-transition),
		border-color var(--shilapati-transition);
}

.shilapati-ai-summary__tab:hover {
	border-color: var(--shilapati-primary, #0073aa);
}

.shilapati-ai-summary__tab.is-active {
	color: var(--shilapati-on-primary, #fff);
	background: var(--shilapati-primary, #0073aa);
	border-color: var(--shilapati-primary, #0073aa);
}

.shilapati-ai-summary__panel:focus-visible {
	outline-offset: 4px;
}

.shilapati-ai-summary__panel-title {
	display: flex;
	align-items: center;
	gap: var(--shilapati-space-xs);
	margin: 0 0 var(--shilapati-space-xs);
	font-size: 1.05rem;
	font-weight: 700;
}

.shilapati-ai-summary__text {
	color: var(--shilapati-text, #26313d);
	font-size: 1.02rem;
	line-height: 1.8;
}

.shilapati-ai-summary__text p {
	margin: 0 0 var(--shilapati-space-xs);
}

.shilapati-ai-summary__text p:last-child {
	margin-bottom: 0;
}

.shilapati-ai-summary__list {
	margin: 0;
	padding-left: 1.2rem;
	list-style: none;
}

.shilapati-ai-summary__list li {
	position: relative;
	margin-bottom: var(--shilapati-space-xs);
	padding-left: 0.35rem;
}

.shilapati-ai-summary__list li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: -0.85rem;
	width: 6px;
	height: 6px;
	background: var(--shilapati-accent, #d90429);
	border-radius: 50%;
}

.shilapati-ai-summary__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shilapati-space-xs) var(--shilapati-space-md);
	align-items: baseline;
	justify-content: space-between;
	margin-top: var(--shilapati-space-sm);
	padding-top: var(--shilapati-space-xs);
	border-top: 1px dashed var(--shilapati-border, #e3e7ec);
}

.shilapati-ai-summary__disclaimer,
.shilapati-ai-summary__timestamp {
	margin: 0;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.8rem;
	line-height: 1.55;
}

.shilapati-ai-summary__disclaimer {
	display: flex;
	align-items: flex-start;
	gap: var(--shilapati-space-xs);
	flex: 1 1 20rem;
}

/* States rendered by the block or by JS. */
.shilapati-ai-summary.is-loading .shilapati-ai-summary__body {
	opacity: 0.55;
}

.shilapati-ai-summary__notice {
	margin: 0;
	padding: var(--shilapati-space-xs) var(--shilapati-space-sm);
	color: var(--shilapati-muted, #5b6875);
	background: rgba(var(--shilapati-border-rgb, 227, 231, 236), 0.5);
	border-radius: var(--shilapati-radius-sm, 5px);
	font-size: 0.85rem;
}

/* ==========================================================================
   5. Share buttons
   ========================================================================== */

.shilapati-share {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shilapati-space-sm) var(--shilapati-space-md);
	align-items: center;
	margin: var(--shilapati-space-md) 0;
	padding: var(--shilapati-space-sm) 0;
	border-top: 1px solid var(--shilapati-border, #e3e7ec);
	border-bottom: 1px solid var(--shilapati-border, #e3e7ec);
}

.shilapati-share__label {
	display: inline-flex;
	align-items: center;
	gap: var(--shilapati-space-xs);
	margin: 0;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.9rem;
	font-weight: 700;
}

.shilapati-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shilapati-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.shilapati-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: var(--shilapati-heading, #12212e);
	background: var(--shilapati-card, #fff);
	border: 1px solid var(--shilapati-border, #e3e7ec);
	border-radius: 50%;
	font-size: 1.05rem;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--shilapati-transition), background-color var(--shilapati-transition),
		border-color var(--shilapati-transition), transform var(--shilapati-transition);
}

.shilapati-share__link:hover,
.shilapati-share__link:focus-visible {
	color: #fff;
	border-color: transparent;
}

.shilapati-share__link.is-facebook:hover,
.shilapati-share__link.is-facebook:focus-visible {
	background: #1877f2;
}

.shilapati-share__link.is-whatsapp:hover,
.shilapati-share__link.is-whatsapp:focus-visible {
	background: #128c7e;
}

.shilapati-share__link.is-twitter:hover,
.shilapati-share__link.is-twitter:focus-visible {
	background: #14171a;
}

.shilapati-share__link.is-linkedin:hover,
.shilapati-share__link.is-linkedin:focus-visible {
	background: #0a66c2;
}

.shilapati-share__link.is-telegram:hover,
.shilapati-share__link.is-telegram:focus-visible {
	background: #229ed9;
}

.shilapati-share__link.is-viber:hover,
.shilapati-share__link.is-viber:focus-visible {
	background: #7360f2;
}

.shilapati-share__link.is-email:hover,
.shilapati-share__link.is-email:focus-visible,
.shilapati-share__link.is-copy:hover,
.shilapati-share__link.is-copy:focus-visible {
	background: var(--shilapati-primary, #0073aa);
}

.shilapati-share__link.is-copied {
	color: #fff;
	background: #15803d;
	border-color: transparent;
}

.shilapati-share__status {
	margin: 0;
	color: #15803d;
	font-size: 0.85rem;
	font-weight: 600;
}

.shilapati-share__status:empty {
	display: none;
}

/* The readable permalink is for screen readers and print, not the layout. */
.shilapati-share__url {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   6. News cards, bylines, author boxes
   ========================================================================== */

.shilapati-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--shilapati-card, #fff);
	border: 1px solid var(--shilapati-border, #e3e7ec);
	border-radius: var(--shilapati-radius, 10px);
	box-shadow: var(--shilapati-shadow-sm);
	transition: transform var(--shilapati-transition), box-shadow var(--shilapati-transition),
		border-color var(--shilapati-transition);
}

.shilapati-card__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 21 / 13;
	background: rgba(var(--shilapati-border-rgb, 227, 231, 236), 0.6);
}

.shilapati-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.shilapati-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--shilapati-space-xs);
	padding: var(--shilapati-space-sm) var(--shilapati-space-md) var(--shilapati-space-md);
}

.shilapati-card__badge {
	align-self: flex-start;
	padding: 0.12rem 0.55rem;
	color: var(--shilapati-on-accent, #fff);
	background: var(--shilapati-accent, #d90429);
	border-radius: var(--shilapati-radius-sm, 5px);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color var(--shilapati-transition);
}

.shilapati-card__badge:hover,
.shilapati-card__badge:focus-visible {
	color: var(--shilapati-on-active, #fff);
	background: var(--shilapati-active, #c1121f);
}

.shilapati-card__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.5;
}

.shilapati-card__title a {
	color: var(--shilapati-heading, #12212e);
	text-decoration: none;
}

.shilapati-card__title a:hover,
.shilapati-card__title a:focus-visible {
	color: var(--shilapati-primary, #0073aa);
}

.shilapati-card__excerpt {
	margin: 0;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.92rem;
	line-height: 1.7;
}

.shilapati-card__meta {
	display: flex;
	align-items: center;
	gap: var(--shilapati-space-xs);
	margin: auto 0 0;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.82rem;
}

.shilapati-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--shilapati-space-xs) var(--shilapati-space-sm);
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.88rem;
}

.shilapati-byline__avatars {
	display: inline-flex;
	align-items: center;
}

.shilapati-byline__avatars .shilapati-author-avatar + .shilapati-author-avatar {
	margin-left: -0.7rem;
}

.shilapati-author-avatar {
	flex: 0 0 auto;
	object-fit: cover;
	background: rgba(var(--shilapati-border-rgb, 227, 231, 236), 0.8);
	border: 2px solid var(--shilapati-card, #fff);
	border-radius: 50%;
}

.shilapati-byline__names {
	color: var(--shilapati-heading, #12212e);
	font-weight: 600;
}

.shilapati-byline__time::before {
	content: "\00b7";
	margin-right: var(--shilapati-space-xs);
	color: var(--shilapati-border, #e3e7ec);
}

.shilapati-author-bio {
	display: flex;
	gap: var(--shilapati-space-md);
	align-items: flex-start;
	margin: var(--shilapati-space-lg) 0;
	padding: var(--shilapati-space-md);
	background: var(--shilapati-card, #fff);
	border: 1px solid var(--shilapati-border, #e3e7ec);
	border-radius: var(--shilapati-radius, 10px);
}

.shilapati-author-bio__media .shilapati-author-avatar {
	width: 96px;
	height: 96px;
	border-width: 3px;
	box-shadow: var(--shilapati-shadow-sm);
}

.shilapati-author-bio__eyebrow {
	margin: 0;
	color: var(--shilapati-accent, #d90429);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.shilapati-author-bio__name {
	margin: 0.1rem 0 var(--shilapati-space-xs);
	font-size: 1.2rem;
}

.shilapati-author-bio__name a {
	color: var(--shilapati-heading, #12212e);
	text-decoration: none;
}

.shilapati-author-bio__name a:hover,
.shilapati-author-bio__name a:focus-visible {
	color: var(--shilapati-primary, #0073aa);
}

.shilapati-author-bio__text {
	margin: 0 0 var(--shilapati-space-xs);
	color: var(--shilapati-text, #26313d);
	line-height: 1.75;
}

.shilapati-author-bio__count {
	margin: 0;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.85rem;
}

/* ==========================================================================
   6b. Page furniture: section headers, archives, 404, adjacent posts
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section headers

   One header treatment for every homepage block: eyebrow, headline, and a
   "more" pill.

   A section announces itself with a rule ABOVE the header, not only beneath
   the heading. With the divider under the title alone, the eye read it as an
   underline belonging to that heading and the blocks ran together - nothing
   said "a new section starts here". The top rule spans the container and
   carries a short accent segment at its left, so the boundary is visible in
   peripheral vision while scrolling; the hairline under the header then
   separates the header from its own content.
   -------------------------------------------------------------------------- */

.shilapati-section-header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--shilapati-space-md);
	align-items: flex-end;
	justify-content: space-between;

	/* Space above the rule is what makes it read as a break rather than a
	   border on the preceding block. */
	margin-top: var(--shilapati-space-xl);
	margin-bottom: var(--shilapati-space-lg);
	padding-top: var(--shilapati-space-md);

	/* One rule only. Carrying a second hairline under the header as well read
	   as a box drawn around the heading rather than a section break. */
	border-top: 3px solid var(--shilapati-border, #e3e7ec);
}

/* The accent segment that sits on the start rule. */
.shilapati-section-header::before {
	position: absolute;
	top: -3px;
	left: 0;
	width: 4.5rem;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--shilapati-accent, #d90429),
		var(--shilapati-primary, #0073aa)
	);
	content: "";
}

.shilapati-section-heading {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.shilapati-section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--shilapati-accent, #d90429);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.shilapati-section-title {
	display: flex;
	align-items: center;
	gap: var(--shilapati-space-xs);
	margin: 0;
	color: var(--shilapati-heading, #12212e);
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

/* Carries the section mark when there is no eyebrow line to hold it. */
.shilapati-section-title__icon {
	color: var(--section-accent, var(--shilapati-accent, #d90429));
	font-size: 0.8em;
}

.shilapati-section-header--invert .shilapati-section-title__icon {
	color: rgba(255, 255, 255, 0.75);
}

/* "More" affordance: a quiet pill that fills on hover. */
.shilapati-section-more {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--shilapati-space-xs);
	padding: 0.4rem 0.95rem;
	color: var(--shilapati-primary, #0073aa);
	background: rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.07);
	border: 1px solid rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.28);
	border-radius: 999px;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--shilapati-transition), background-color var(--shilapati-transition),
		border-color var(--shilapati-transition), transform var(--shilapati-transition);
}

.shilapati-section-more:hover,
.shilapati-section-more:focus-visible {
	color: var(--shilapati-on-primary, #fff);
	background: var(--shilapati-primary, #0073aa);
	border-color: var(--shilapati-primary, #0073aa);
}

.shilapati-section-more .bi {
	transition: transform var(--shilapati-transition);
}

.shilapati-motion .shilapati-section-more:hover .bi {
	transform: translateX(3px);
}

/*
 * Header sitting on a dark surface (entertainment, video theatre).
 *
 * These blocks are already their own panel, so they need no gap above and no
 * heavy start rule - the panel edge is the boundary. The rules are only there
 * to keep the header's internal shape consistent with the light sections.
 */
.shilapati-section-header--invert {
	margin-top: 0;
	padding-top: 0;
	padding-bottom: var(--shilapati-space-sm);
	border-top: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.shilapati-section-header--invert::before {
	top: auto;
	bottom: -1px;
	height: 2px;
}

.shilapati-section-header--invert .shilapati-section-title {
	color: #fff;
}

.shilapati-section-header--invert .shilapati-section-eyebrow {
	color: rgba(255, 255, 255, 0.7);
}

.shilapati-section-header--invert .shilapati-section-more {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.32);
}

.shilapati-section-header--invert .shilapati-section-more:hover,
.shilapati-section-header--invert .shilapati-section-more:focus-visible {
	color: var(--shilapati-heading, #12212e);
	background: #fff;
	border-color: #fff;
}

/* The tab variant sits directly under its own heading. */
.province-switcher--tabs {
	margin-bottom: var(--shilapati-space-md);
}

.province-tab-pane:focus-visible {
	outline-offset: 4px;
}

/* ==========================================================================
   6c. Entertainment block
   ========================================================================== */

.entertainment-dark-block {
	/*
	 * The one dark surface on the homepage. Built from the secondary token so
	 * it follows the Customizer palette, with an accent wash in one corner so
	 * the panel is not a flat rectangle. Replaces the old hard-coded
	 * rgba(27,127,204,.8) panel, whose blue-on-blue heading failed contrast.
	 */
	position: relative;
	padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2.25rem);
	overflow: hidden;
	background:
		radial-gradient(
			120% 140% at 100% 0%,
			rgba(var(--shilapati-accent-rgb, 217, 4, 41), 0.42),
			transparent 58%
		),
		radial-gradient(
			110% 120% at 0% 100%,
			rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.4),
			transparent 60%
		),
		linear-gradient(
			160deg,
			var(--shilapati-secondary, #123a5a),
			#0b1620 78%
		);
	border-radius: calc(var(--shilapati-radius, 10px) * 2);
	box-shadow: 0 18px 46px rgba(11, 22, 32, 0.32);
}

.entertainment-dark-block .dark-card {
	height: 100%;
	background: transparent;
	border: 0;
}

.entertainment-dark-block .dark-card__link {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: var(--shilapati-radius, 10px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
	text-decoration: none;
	transition: transform var(--shilapati-transition), box-shadow var(--shilapati-transition);
}

.entertainment-dark-block .card-image-wrapper {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: rgba(255, 255, 255, 0.05);
}

.entertainment-dark-block .card-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Only enough dimming for the caption to read; the old 70% brightness made
	   every thumbnail look muddy until hover. */
	filter: saturate(1.05);
	transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The scrim lives on the link, so a card without a thumbnail still reads. */
.entertainment-dark-block .dark-card__link::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(6, 14, 20, 0.92) 0%,
		rgba(6, 14, 20, 0.55) 38%,
		rgba(6, 14, 20, 0.05) 72%
	);
	content: "";
	transition: opacity var(--shilapati-transition);
}

.entertainment-dark-block .overlay-title {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--shilapati-space-md);
	color: #fff;
}

.entertainment-dark-block .overlay-title__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.78rem;
	font-weight: 600;
}

.entertainment-dark-block .overlay-title__text {
	display: -webkit-box;
	overflow: hidden;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.entertainment-dark-block .dark-card__link:hover,
.entertainment-dark-block .dark-card__link:focus-visible {
	box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5);
}

.shilapati-motion .entertainment-dark-block .dark-card__link:hover {
	transform: translateY(-4px);
}

.shilapati-motion .entertainment-dark-block .dark-card__link:hover img,
.shilapati-motion .entertainment-dark-block .dark-card__link:focus-visible img {
	transform: scale(1.06);
}

/* ==========================================================================
   6d. Video theatre
   ========================================================================== */

.shilapati-video-section {
	position: relative;
	padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2.25rem);
	overflow: hidden;
	background:
		radial-gradient(
			100% 130% at 0% 0%,
			rgba(var(--shilapati-accent-rgb, 217, 4, 41), 0.34),
			transparent 55%
		),
		linear-gradient(165deg, #16202b, #0a1119 75%);
	border-radius: calc(var(--shilapati-radius, 10px) * 2);
	box-shadow: 0 18px 46px rgba(11, 22, 32, 0.3);
}

.shilapati-video-theatre {
	display: grid;
	gap: var(--shilapati-space-lg);
	grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
	align-items: start;
}

/* --- Stage --- */

.shilapati-video-player {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
	border-radius: var(--shilapati-radius, 10px);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}

.shilapati-video-player__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
		filter var(--shilapati-transition);
}

.shilapati-video-player__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Once the real player exists the facade must not sit over its controls. */
.shilapati-video-player.is-playing .shilapati-video-player__poster,
.shilapati-video-player.is-playing .shilapati-video-player__play {
	display: none;
}

.shilapati-video-player__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
	background: linear-gradient(to top, rgba(6, 14, 20, 0.55), rgba(6, 14, 20, 0.05));
	border: 0;
	cursor: pointer;
}

.shilapati-video-player__play-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	color: #fff;
	background: var(--shilapati-accent, #d90429);
	border-radius: 50%;
	box-shadow: 0 0 0 0.55rem rgba(255, 255, 255, 0.16);
	font-size: 2.1rem;
	transition: transform var(--shilapati-transition), background-color var(--shilapati-transition),
		box-shadow var(--shilapati-transition);
}

.shilapati-video-player__play:hover .shilapati-video-player__play-icon,
.shilapati-video-player__play:focus-visible .shilapati-video-player__play-icon {
	background: var(--shilapati-active, #c1121f);
	box-shadow: 0 0 0 0.85rem rgba(255, 255, 255, 0.2);
}

.shilapati-motion .shilapati-video-player__play:hover .shilapati-video-player__play-icon {
	transform: scale(1.06);
}

.shilapati-motion .shilapati-video-player__play:hover ~ .shilapati-video-player__poster,
.shilapati-motion .shilapati-video-player:hover .shilapati-video-player__poster {
	transform: scale(1.03);
}

.shilapati-video-stage__body {
	margin-top: var(--shilapati-space-md);
}

.shilapati-video-stage__title {
	margin: 0 0 var(--shilapati-space-xs);
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-weight: 700;
	line-height: 1.4;
}

.shilapati-video-stage__title a {
	color: #fff;
	text-decoration: none;
}

.shilapati-video-stage__title a:hover,
.shilapati-video-stage__title a:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.shilapati-video-stage__excerpt {
	margin: 0 0 var(--shilapati-space-xs);
	color: rgba(255, 255, 255, 0.74);
	line-height: 1.7;
}

.shilapati-video-stage__meta {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.85rem;
	font-weight: 600;
}

/* --- Playlist --- */

.shilapati-video-playlist {
	display: flex;
	flex-direction: column;
	max-height: 32rem;
	padding: var(--shilapati-space-md);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--shilapati-radius, 10px);
}

.shilapati-video-playlist__heading {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 var(--shilapati-space-sm);
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.shilapati-video-playlist__list {
	display: flex;
	flex-direction: column;
	gap: var(--shilapati-space-xs);
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.shilapati-video-playlist__list::-webkit-scrollbar {
	width: 6px;
}

.shilapati-video-playlist__list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.22);
	border-radius: 999px;
}

.shilapati-video-playlist__link {
	display: grid;
	gap: var(--shilapati-space-sm);
	grid-template-columns: 6.5rem minmax(0, 1fr);
	align-items: center;
	padding: 0.45rem;
	border: 1px solid transparent;
	border-radius: var(--shilapati-radius-sm, 6px);
	text-decoration: none;
	transition: background-color var(--shilapati-transition), border-color var(--shilapati-transition);
}

.shilapati-video-playlist__link:hover,
.shilapati-video-playlist__link:focus-visible {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.16);
}

.shilapati-video-playlist__link.is-active {
	background: rgba(var(--shilapati-accent-rgb, 217, 4, 41), 0.16);
	border-color: rgba(var(--shilapati-accent-rgb, 217, 4, 41), 0.55);
}

.shilapati-video-playlist__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--shilapati-radius-sm, 6px);
}

.shilapati-video-playlist__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shilapati-video-playlist__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	color: #fff;
	background: rgba(6, 14, 20, 0.66);
	border-radius: 50%;
	font-size: 1rem;
	transform: translate(-50%, -50%);
	transition: background-color var(--shilapati-transition);
}

.shilapati-video-playlist__link:hover .shilapati-video-playlist__badge,
.shilapati-video-playlist__link.is-active .shilapati-video-playlist__badge {
	background: var(--shilapati-accent, #d90429);
}

.shilapati-video-playlist__duration {
	position: absolute;
	right: 0.25rem;
	bottom: 0.25rem;
	padding: 0.05rem 0.3rem;
	color: #fff;
	background: rgba(6, 14, 20, 0.82);
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 600;
}

.shilapati-video-playlist__text {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 0.2rem;
}

.shilapati-video-playlist__title {
	display: -webkit-box;
	overflow: hidden;
	color: #fff;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.45;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.shilapati-video-playlist__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: rgba(255, 255, 255, 0.52);
	font-size: 0.76rem;
}

@media (max-width: 991.98px) {
	.shilapati-video-theatre {
		grid-template-columns: minmax(0, 1fr);
	}

	.shilapati-video-playlist {
		max-height: 22rem;
	}
}

/* Kept for the video cards still used on the video archive template. */
.shilapati-video-card .shilapati-card__media {
	position: relative;
}

.shilapati-video-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	color: #fff;
	background: rgba(var(--shilapati-accent-rgb, 217, 4, 41), 0.9);
	border-radius: 50%;
	font-size: 1.5rem;
	transform: translate(-50%, -50%);
	transition: transform var(--shilapati-transition), background-color var(--shilapati-transition);
}

.shilapati-motion .shilapati-video-card:hover .shilapati-video-card__play,
.shilapati-motion .shilapati-video-card:focus-within .shilapati-video-card__play {
	background: var(--shilapati-active, #c1121f);
	transform: translate(-50%, -50%) scale(1.1);
}

.shilapati-archive__header {
	margin-bottom: var(--shilapati-space-lg);
	padding-bottom: var(--shilapati-space-sm);
	border-bottom: 2px solid var(--shilapati-border, #e3e7ec);
}

.shilapati-archive__title {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.015em;
}

.shilapati-archive__term {
	color: var(--shilapati-accent, #d90429);
}

.shilapati-archive__subtitle {
	margin: var(--shilapati-space-lg) 0 var(--shilapati-space-md);
	padding-bottom: var(--shilapati-space-xs);
	border-bottom: 2px solid var(--shilapati-border, #e3e7ec);
	font-size: 1.25rem;
}

.shilapati-archive__description,
.shilapati-archive__count {
	margin: var(--shilapati-space-xs) 0 0;
	color: var(--shilapati-muted, #5b6875);
}

.shilapati-archive__empty,
.shilapati-archive__notice {
	max-width: 60ch;
	padding: var(--shilapati-space-md);
	color: var(--shilapati-muted, #5b6875);
	background: var(--shilapati-card, #fff);
	border: 1px solid var(--shilapati-border, #e3e7ec);
	border-radius: var(--shilapati-radius, 10px);
}

.single-post-figure {
	margin: 0 0 var(--shilapati-space-lg);
}

.single-post-figcaption {
	margin-top: var(--shilapati-space-xs);
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.85rem;
	line-height: 1.6;
}

.single-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shilapati-space-xs);
	align-items: center;
	margin: var(--shilapati-space-md) 0;
	font-size: 0.88rem;
}

.single-post-tags a {
	padding: 0.15rem 0.6rem;
	color: var(--shilapati-muted, #5b6875);
	background: rgba(var(--shilapati-border-rgb, 227, 231, 236), 0.55);
	border-radius: 999px;
	text-decoration: none;
	transition: color var(--shilapati-transition), background-color var(--shilapati-transition);
}

.single-post-tags a:hover,
.single-post-tags a:focus-visible {
	color: var(--shilapati-on-primary, #fff);
	background: var(--shilapati-primary, #0073aa);
}

.post-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shilapati-space-xs);
	align-items: center;
	margin: var(--shilapati-space-md) 0;
	font-weight: 600;
}

.single-post-adjacent {
	display: grid;
	gap: var(--shilapati-space-sm);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	margin-top: var(--shilapati-space-lg);
}

.single-post-adjacent__link {
	display: flex;
	flex-direction: column;
	gap: var(--shilapati-space-xs);
	padding: var(--shilapati-space-sm) var(--shilapati-space-md);
	color: var(--shilapati-heading, #12212e);
	background: var(--shilapati-card, #fff);
	border: 1px solid var(--shilapati-border, #e3e7ec);
	border-radius: var(--shilapati-radius, 10px);
	text-decoration: none;
	transition: border-color var(--shilapati-transition), box-shadow var(--shilapati-transition);
}

.single-post-adjacent__link.is-next {
	text-align: right;
}

.single-post-adjacent__link:hover,
.single-post-adjacent__link:focus-visible {
	border-color: var(--shilapati-primary, #0073aa);
	box-shadow: var(--shilapati-shadow-sm);
}

.single-post-adjacent__label {
	display: flex;
	align-items: center;
	gap: var(--shilapati-space-xs);
	color: var(--shilapati-accent, #d90429);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.single-post-adjacent__link.is-next .single-post-adjacent__label {
	justify-content: flex-end;
}

.single-post-adjacent__title {
	font-weight: 600;
	line-height: 1.5;
}

.shilapati-404 {
	max-width: 62rem;
	margin: 0 auto;
	text-align: center;
}

.shilapati-404__code {
	margin: 0;
	color: rgba(var(--shilapati-accent-rgb, 217, 4, 41), 0.18);
	font-size: clamp(4rem, 18vw, 9rem);
	font-weight: 700;
	line-height: 1;
}

.shilapati-404 .page-title {
	margin: 0 0 var(--shilapati-space-sm);
	font-size: clamp(1.35rem, 4vw, 2rem);
}

.shilapati-404 .search-form {
	max-width: 30rem;
	margin: var(--shilapati-space-md) auto;
}

.shilapati-404__actions {
	margin: var(--shilapati-space-md) 0 0;
}

.shilapati-404__recent {
	margin-top: var(--shilapati-space-xl);
	padding-top: var(--shilapati-space-lg);
	border-top: 1px solid var(--shilapati-border, #e3e7ec);
	text-align: left;
}


/* ==========================================================================
   6e. Article byline and author cards
   ========================================================================== */

/*
 * The inline byline above the headline.
 *
 * The same byline renders in the homepage featured meta row, where it already
 * sits behind a "|" separator; the "लेखक" label would only repeat what
 * the row's shape already says. It is therefore hidden by default and shown
 * only in the article byline, which has room for the two-line treatment.
 */
.post-author-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.single-post-author-inline .post-author-label {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	color: var(--shilapati-muted, #5b6875);
	clip-path: none;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.post-author-names a {
	color: var(--shilapati-heading, #12212e);
	text-decoration: none;
	text-underline-offset: 0.18em;
}

.post-author-names a:hover,
.post-author-names a:focus-visible {
	color: var(--shilapati-primary, #0073aa);
	text-decoration: underline;
}

.single-post-author-inline .post-author-text {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	line-height: 1.35;
}

/* The author block closing an article. */
.shilapati-post-authors {
	margin: var(--shilapati-space-xl) 0 var(--shilapati-space-lg);
}

.shilapati-post-authors__title {
	display: flex;
	align-items: center;
	gap: var(--shilapati-space-sm);
	margin: 0 0 var(--shilapati-space-md);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.shilapati-post-authors__marker {
	display: inline-block;
	flex: 0 0 auto;
	width: 4px;
	height: 1.3em;
	background: linear-gradient(
		180deg,
		var(--shilapati-accent, #d90429),
		var(--shilapati-primary, #0073aa)
	);
	border-radius: 4px;
}

.shilapati-post-authors__grid {
	display: grid;
	gap: var(--shilapati-space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.shilapati-author-card {
	position: relative;
	display: flex;
	gap: var(--shilapati-space-md);
	align-items: flex-start;
	overflow: hidden;
	padding: var(--shilapati-space-lg) var(--shilapati-space-md) var(--shilapati-space-md);
	background:
		linear-gradient(
			180deg,
			rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.06),
			transparent 45%
		),
		var(--shilapati-card, #fff);
	border: 1px solid var(--shilapati-border, #e3e7ec);
	border-radius: calc(var(--shilapati-radius, 10px) * 1.4);
	box-shadow: var(--shilapati-shadow-sm);
	transition: box-shadow var(--shilapati-transition), border-color var(--shilapati-transition);
}

/* A coloured cap ties the card to the section accents. */
.shilapati-author-card::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--shilapati-accent, #d90429),
		var(--shilapati-primary, #0073aa)
	);
	content: "";
}

.shilapati-author-card:hover {
	border-color: rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.35);
	box-shadow: var(--shilapati-shadow-md);
}

.shilapati-author-card__media {
	flex: 0 0 auto;
}

.shilapati-author-card__media img {
	width: 5.5rem;
	height: 5.5rem;
	object-fit: cover;
	background: var(--shilapati-background, #f6f7f9);
	border: 3px solid var(--shilapati-card, #fff);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--shilapati-border, #e3e7ec);
}

.shilapati-author-card__body {
	min-width: 0;
	flex: 1 1 auto;
}

.shilapati-author-card__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0 0 0.15rem;
	color: var(--shilapati-accent, #d90429);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.shilapati-author-card__name {
	margin: 0 0 var(--shilapati-space-xs);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.35;
}

.shilapati-author-card__name a {
	color: var(--shilapati-heading, #12212e);
	text-decoration: none;
}

.shilapati-author-card__name a:hover,
.shilapati-author-card__name a:focus-visible {
	color: var(--shilapati-primary, #0073aa);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.shilapati-author-card__bio {
	display: -webkit-box;
	overflow: hidden;
	margin: 0 0 var(--shilapati-space-sm);
	color: var(--shilapati-text, #26313d);
	font-size: 0.94rem;
	line-height: 1.7;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

.shilapati-author-card__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shilapati-space-sm);
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding-top: var(--shilapati-space-sm);
	border-top: 1px dashed var(--shilapati-border, #e3e7ec);
}

.shilapati-author-card__count {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.83rem;
	font-weight: 600;
}

.shilapati-author-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--shilapati-space-xs);
	color: var(--shilapati-primary, #0073aa);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
}

.shilapati-author-card__link .bi {
	transition: transform var(--shilapati-transition);
}

.shilapati-author-card__link:hover,
.shilapati-author-card__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.shilapati-motion .shilapati-author-card__link:hover .bi {
	transform: translateX(3px);
}

@media (max-width: 575.98px) {
	.shilapati-author-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.shilapati-author-card__foot {
		justify-content: center;
	}
}

/* ==========================================================================
   6f. Pagination
   ========================================================================== */

.shilapati-pagination {
	display: flex;
	flex-direction: column;
	gap: var(--shilapati-space-sm);
	align-items: center;
	margin: var(--shilapati-space-xl) 0 var(--shilapati-space-md);
}

.shilapati-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shilapati-space-xs);
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.35rem;
	background: var(--shilapati-card, #fff);
	border: 1px solid var(--shilapati-border, #e3e7ec);
	border-radius: 999px;
	box-shadow: var(--shilapati-shadow-sm);
	list-style: none;
}

.shilapati-pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--shilapati-space-xs);
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.65rem;
	color: var(--shilapati-heading, #12212e);
	background: transparent;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: color var(--shilapati-transition), background-color var(--shilapati-transition);
}

.shilapati-pagination__item a.page-numbers:hover,
.shilapati-pagination__item a.page-numbers:focus-visible {
	color: var(--shilapati-on-primary, #fff);
	background: var(--shilapati-primary, #0073aa);
}

.shilapati-pagination__item .page-numbers.current {
	color: var(--shilapati-on-active, #fff);
	background: var(--shilapati-active, #c1121f);
	box-shadow: 0 4px 12px rgba(var(--shilapati-active-rgb, 193, 18, 31), 0.3);
}

.shilapati-pagination__item.is-dots .page-numbers {
	min-width: 1.5rem;
	padding: 0;
	color: var(--shilapati-muted, #5b6875);
}

/* The arrows carry a label on wide screens and shed it on phones, where the
   row would otherwise wrap to two lines. */
.shilapati-pagination__item.is-prev .page-numbers,
.shilapati-pagination__item.is-next .page-numbers {
	color: var(--shilapati-primary, #0073aa);
	background: rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.08);
}

.shilapati-pagination__item.is-prev .bi,
.shilapati-pagination__item.is-next .bi {
	transition: transform var(--shilapati-transition);
}

.shilapati-motion .shilapati-pagination__item.is-prev a:hover .bi {
	transform: translateX(-3px);
}

.shilapati-motion .shilapati-pagination__item.is-next a:hover .bi {
	transform: translateX(3px);
}

.shilapati-pagination__status {
	margin: 0;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.85rem;
	font-weight: 600;
}

@media (max-width: 575.98px) {
	.shilapati-pagination__item.is-prev .page-numbers span,
	.shilapati-pagination__item.is-next .page-numbers span {
		display: none;
	}

	.shilapati-pagination__item.is-prev .page-numbers,
	.shilapati-pagination__item.is-next .page-numbers {
		padding: 0;
	}
}


/* ==========================================================================
   6g. Sidebar widgets
   ========================================================================== */

/*
 * The widget chrome in style.css predates the design tokens and hard-codes
 * greys and #0d6efd. Re-pointed at the palette here so the sidebar follows the
 * Customizer like everything else.
 */
/*
 * One title treatment for every sidebar widget, classic or block.
 *
 * It echoes the homepage section headers - a rule with a short accent segment
 * riding on it - at widget scale, so the sidebar reads as part of the same
 * system instead of each widget inventing its own heading.
 */
.widget-title,
.widget-area .wp-block-heading {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--shilapati-space-xs);
	margin: 0 0 var(--shilapati-space-md);
	padding: 0 0 var(--shilapati-space-sm);
	color: var(--shilapati-heading, #12212e);
	background: none;
	border: 0;
	border-bottom: 2px solid var(--shilapati-border, #e3e7ec);
	border-radius: 0;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.35;
}

.widget-title::after,
.widget-area .wp-block-heading::after {
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 3rem;
	height: 2px;
	background: linear-gradient(
		90deg,
		var(--shilapati-accent, #d90429),
		var(--shilapati-primary, #0073aa)
	);
	border-radius: 999px;
	content: "";
}

.widget-title i,
.widget-area .wp-block-heading i {
	color: var(--shilapati-accent, #d90429);
	font-size: 0.92em;
}

/* --- यो लेखमा: article outline ------------------------------------------ */

.shilapati-outline {
	padding: var(--shilapati-space-md);
	background:
		linear-gradient(
			180deg,
			rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.06),
			transparent 40%
		),
		var(--shilapati-card, #fff);
	border: 1px solid var(--shilapati-border, #e3e7ec);
	border-radius: calc(var(--shilapati-radius, 10px) * 1.2);
	box-shadow: var(--shilapati-shadow-sm);
}

/*
 * Sticky outline.
 *
 * The sticky element has to be the .widget wrapper, not the card inside it: a
 * sticky box can only travel inside its own parent, and the card's parent is
 * exactly as tall as the card, so sticking it there does nothing. The wrapper's
 * parent is the sidebar column, which is stretched to the article's height by
 * the rule below - that is what lets the outline follow a long read.
 *
 * It also has to be the last widget in the sidebar. Anything placed after a
 * sticky sibling keeps scrolling and rides over it. JS only adds the class when
 * nothing follows.
 *
 * 90px clears the fixed navbar, matching the sidebar ad blocks.
 */
@media (min-width: 992px) {
	.widget-area {
		height: 100%;
	}

	.widget.shilapati-widget--sticky {
		position: sticky;
		top: 90px;
		max-height: calc(100vh - 110px);
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

.shilapati-outline__heading {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 var(--shilapati-space-sm);
	color: var(--shilapati-heading, #12212e);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.shilapati-outline__heading i {
	color: var(--shilapati-accent, #d90429);
}

.shilapati-outline__progress {
	height: 4px;
	margin-bottom: var(--shilapati-space-sm);
	overflow: hidden;
	background: var(--shilapati-border, #e3e7ec);
	border-radius: 999px;
}

.shilapati-outline__bar {
	width: 0;
	height: 100%;
	background: linear-gradient(
		90deg,
		var(--shilapati-accent, #d90429),
		var(--shilapati-primary, #0073aa)
	);
	border-radius: 999px;
	transition: width 120ms linear;
}

.shilapati-outline__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: outline;
}

.shilapati-outline__item {
	position: relative;
	padding-left: var(--shilapati-space-md);
}

/* A rail down the left, so the list reads as one progression. */
.shilapati-outline__item::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	background: var(--shilapati-border, #e3e7ec);
	content: "";
}

.shilapati-outline__item.is-h3 .shilapati-outline__link {
	padding-left: var(--shilapati-space-sm);
	font-size: 0.85rem;
}

.shilapati-outline__link {
	display: block;
	padding: 0.35rem 0;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.9rem;
	line-height: 1.5;
	text-decoration: none;
	transition: color var(--shilapati-transition);
}

.shilapati-outline__link:hover,
.shilapati-outline__link:focus-visible {
	color: var(--shilapati-primary, #0073aa);
}

.shilapati-outline__link.is-active {
	color: var(--shilapati-heading, #12212e);
	font-weight: 700;
}

/* The rail lights up beside whichever section is being read. */
.shilapati-outline__item:has(.shilapati-outline__link.is-active)::before {
	background: var(--shilapati-accent, #d90429);
}

/* --- पछि पढ्नुहोस्: reading list ---------------------------------------- */

.shilapati-reading-list__save {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: var(--shilapati-space-xs);
	margin-bottom: var(--shilapati-space-sm);
	padding: 0.55rem 0.9rem;
	color: var(--shilapati-primary, #0073aa);
	background: rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.07);
	border: 1px dashed rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.45);
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: color var(--shilapati-transition), background-color var(--shilapati-transition),
		border-color var(--shilapati-transition);
}

.shilapati-reading-list__save:hover,
.shilapati-reading-list__save:focus-visible {
	color: var(--shilapati-on-primary, #fff);
	background: var(--shilapati-primary, #0073aa);
	border-color: var(--shilapati-primary, #0073aa);
}

.shilapati-reading-list__save.is-saved {
	color: var(--shilapati-on-active, #fff);
	background: var(--shilapati-active, #c1121f);
	border-style: solid;
	border-color: var(--shilapati-active, #c1121f);
}

.shilapati-reading-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shilapati-reading-list__item {
	display: flex;
	gap: var(--shilapati-space-xs);
	align-items: flex-start;
	padding: var(--shilapati-space-sm) 0;
	border-bottom: 1px solid var(--shilapati-border, #e3e7ec);
}

.shilapati-reading-list__item:last-child {
	border-bottom: 0;
}

.shilapati-reading-list__body {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.15rem;
}

.shilapati-reading-list__link {
	color: var(--shilapati-heading, #12212e);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none;
}

.shilapati-reading-list__link:hover,
.shilapati-reading-list__link:focus-visible {
	color: var(--shilapati-primary, #0073aa);
}

.shilapati-reading-list__date {
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.76rem;
}

.shilapati-reading-list__remove {
	flex: 0 0 auto;
	padding: 0.2rem 0.35rem;
	color: var(--shilapati-muted, #5b6875);
	background: transparent;
	border: 0;
	border-radius: var(--shilapati-radius-sm, 5px);
	font-size: 0.75rem;
	line-height: 1;
	cursor: pointer;
	transition: color var(--shilapati-transition), background-color var(--shilapati-transition);
}

.shilapati-reading-list__remove:hover,
.shilapati-reading-list__remove:focus-visible {
	color: var(--shilapati-accent, #d90429);
	background: rgba(var(--shilapati-accent-rgb, 217, 4, 41), 0.1);
}

.shilapati-reading-list__empty,
.shilapati-reading-list__note {
	margin: var(--shilapati-space-xs) 0 0;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.8rem;
	line-height: 1.6;
}

.shilapati-reading-list__note {
	display: flex;
	gap: 0.35rem;
	align-items: baseline;
	padding-top: var(--shilapati-space-xs);
	border-top: 1px dashed var(--shilapati-border, #e3e7ec);
	font-size: 0.75rem;
}

/* --- चर्चाका विषय: trending topics -------------------------------------- */

.shilapati-topics {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shilapati-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.shilapati-topics__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.7rem;
	color: var(--shilapati-heading, #12212e);
	background: var(--shilapati-card, #fff);
	border: 1px solid var(--shilapati-border, #e3e7ec);
	border-radius: 999px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: color var(--shilapati-transition), background-color var(--shilapati-transition),
		border-color var(--shilapati-transition);
}

.shilapati-topics__count {
	padding: 0 0.35rem;
	color: var(--shilapati-muted, #5b6875);
	background: rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.1);
	border-radius: 999px;
	font-size: 0.72em;
	font-weight: 700;
}

.shilapati-topics__link:hover,
.shilapati-topics__link:focus-visible {
	color: var(--shilapati-on-primary, #fff);
	background: var(--shilapati-primary, #0073aa);
	border-color: var(--shilapati-primary, #0073aa);
}

.shilapati-topics__link:hover .shilapati-topics__count,
.shilapati-topics__link:focus-visible .shilapati-topics__count {
	color: currentColor;
	background: rgba(255, 255, 255, 0.25);
}

/* Four steps of emphasis rather than a continuous scale. */
.shilapati-topics__link.is-level-1 {
	font-size: 0.8rem;
}

.shilapati-topics__link.is-level-2 {
	font-size: 0.88rem;
}

.shilapati-topics__link.is-level-3 {
	font-size: 0.96rem;
	border-color: rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.4);
}

.shilapati-topics__link.is-level-4 {
	color: var(--shilapati-on-accent, #fff);
	background: var(--shilapati-accent, #d90429);
	border-color: var(--shilapati-accent, #d90429);
	font-size: 1.02rem;
}

.shilapati-topics__link.is-level-4 .shilapati-topics__count {
	color: currentColor;
	background: rgba(255, 255, 255, 0.25);
}

/* --- इतिहासमा आज: on this day ------------------------------------------- */

.shilapati-on-this-day {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shilapati-on-this-day__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: var(--shilapati-space-sm) 0 var(--shilapati-space-sm) var(--shilapati-space-md);
	border-bottom: 1px solid var(--shilapati-border, #e3e7ec);
}

.shilapati-on-this-day__item:last-child {
	border-bottom: 0;
}

/* A timeline rail with a node per entry. */
.shilapati-on-this-day__item::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 3px;
	width: 2px;
	background: var(--shilapati-border, #e3e7ec);
	content: "";
}

.shilapati-on-this-day__item::after {
	position: absolute;
	top: 1.15rem;
	left: 0;
	width: 8px;
	height: 8px;
	background: var(--shilapati-accent, #d90429);
	border-radius: 50%;
	content: "";
}

.shilapati-on-this-day__item:first-child::before {
	top: 1.15rem;
}

.shilapati-on-this-day__item:last-child::before {
	bottom: auto;
	height: 1.15rem;
}

.shilapati-on-this-day__badge {
	color: var(--shilapati-accent, #d90429);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.shilapati-on-this-day__title {
	color: var(--shilapati-heading, #12212e);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none;
}

.shilapati-on-this-day__title:hover,
.shilapati-on-this-day__title:focus-visible {
	color: var(--shilapati-primary, #0073aa);
}

.shilapati-on-this-day__date {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.76rem;
}


/* ==========================================================================
   6h. Core list blocks used as widgets (Recent Posts / Recent Comments)
   ========================================================================== */

/*
 * These arrive as core block markup with no styling of their own beyond a bare
 * <ul>, so they read as a stack of blue links next to the theme's own widgets.
 * Given the same shape as .shilapati-widget-item: thumbnail, title, date.
 * Their dates are rewritten into Nepali by inc/blocks.php.
 */

/* --- ताजा समाचार: core/latest-posts ------------------------------------- */

.wp-block-latest-posts__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-latest-posts__list li {
	display: grid;
	gap: var(--shilapati-space-sm);
	grid-template-columns: 4.5rem minmax(0, 1fr);
	align-items: start;
	padding: var(--shilapati-space-sm) 0;
	border-bottom: 1px solid var(--shilapati-border, #e3e7ec);
}

/* A post with no featured image must not leave a hole in the grid. */
.wp-block-latest-posts__list li:not(:has(.wp-block-latest-posts__featured-image)) {
	grid-template-columns: minmax(0, 1fr);
}

.wp-block-latest-posts__list li:last-child {
	border-bottom: 0;
}

.wp-block-latest-posts__featured-image {
	grid-row: span 2;
	margin: 0;
}

.wp-block-latest-posts__featured-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--shilapati-background, #f6f7f9);
	border-radius: var(--shilapati-radius-sm, 5px);
}

.wp-block-latest-posts__post-title {
	align-self: end;
	color: var(--shilapati-heading, #12212e);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none;
}

.wp-block-latest-posts__post-title:hover,
.wp-block-latest-posts__post-title:focus-visible {
	color: var(--shilapati-primary, #0073aa);
}

.wp-block-latest-posts__post-date {
	align-self: start;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.76rem;
}

/* --- पछिल्ला टिप्पणी: core/latest-comments ------------------------------ */

.wp-block-latest-comments {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-latest-comments__comment {
	display: grid;
	gap: 0 var(--shilapati-space-sm);
	grid-template-columns: 2.5rem minmax(0, 1fr);
	margin: 0;
	padding: var(--shilapati-space-sm) 0;
	border-bottom: 1px solid var(--shilapati-border, #e3e7ec);
	font-size: 0.9rem;
	line-height: 1.55;
}

.wp-block-latest-comments__comment:last-child {
	border-bottom: 0;
}

.wp-block-latest-comments__comment-avatar {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: cover;
	border-radius: 50%;
	background: var(--shilapati-background, #f6f7f9);
}

.wp-block-latest-comments__comment-meta {
	margin: 0;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.85rem;
}

.wp-block-latest-comments__comment-author,
.wp-block-latest-comments__comment-link {
	color: var(--shilapati-heading, #12212e);
	font-weight: 600;
	text-decoration: none;
}

.wp-block-latest-comments__comment-author:hover,
.wp-block-latest-comments__comment-link:hover,
.wp-block-latest-comments__comment-link:focus-visible {
	color: var(--shilapati-primary, #0073aa);
}

.wp-block-latest-comments__comment-date {
	display: block;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.76rem;
}

.wp-block-latest-comments__comment-excerpt p {
	margin: var(--shilapati-space-xs) 0 0;
	color: var(--shilapati-text, #26313d);
	font-size: 0.85rem;
	line-height: 1.6;
}

/* Empty state, with the sentence supplied by inc/blocks.php. */
.wp-block-latest-comments.no-comments {
	padding: var(--shilapati-space-sm) 0;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.88rem;
}

/* ==========================================================================
   6i. Article text-size control
   ========================================================================== */

/*
 * The buttons carry .is-active from theme.js, but nothing ever styled it, so
 * the reader could not see which size was selected. They were also Bootstrap
 * btn-sm, well under a comfortable touch target.
 */
.single-post-tools-row .text-size-options {
	gap: var(--shilapati-space-sm);
}

.text-size-options__label {
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.82rem;
	font-weight: 600;
}

.text-size-options__group {
	display: inline-flex;
	align-items: stretch;
	padding: 3px;
	background: var(--shilapati-background, #f6f7f9);
	border: 1px solid var(--shilapati-border, #e3e7ec);
	border-radius: 999px;
}

.text-size-options__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.55rem;
	color: var(--shilapati-muted, #5b6875);
	background: transparent;
	border: 0;
	border-radius: 999px;
	line-height: 1;
	cursor: pointer;
	transition: color var(--shilapati-transition), background-color var(--shilapati-transition);
}

/* The glyph is the sample, so each button shows the size it sets. */
.text-size-options__btn.is-small {
	font-size: 0.85rem;
}

.text-size-options__btn.is-medium {
	font-size: 1.05rem;
}

.text-size-options__btn.is-large {
	font-size: 1.3rem;
}

.text-size-options__btn:hover {
	color: var(--shilapati-heading, #12212e);
	background: rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.1);
}

.text-size-options__btn.is-active {
	color: var(--shilapati-on-primary, #fff);
	background: var(--shilapati-primary, #0073aa);
	font-weight: 700;
}

/* ==========================================================================
   7b. Footer quick links
   ========================================================================== */

/* The footer body is a light surface (--shilapati-card), so this block takes
   the ordinary text tokens; only the social bar and the legal strip are dark. */
.footer-quick-links h3 {
	margin: 0 0 var(--shilapati-space-sm);
	padding-bottom: var(--shilapati-space-xs);
	border-bottom: 2px solid var(--shilapati-accent, #d90429);
	color: var(--shilapati-heading, #12212e);
	font-size: 1.05rem;
	font-weight: 700;
}

.footer-quick-links__list {
	display: grid;
	gap: 0.3rem var(--shilapati-space-md);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-quick-links__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--shilapati-text, #26313d);
	font-size: 0.88rem;
	text-decoration: none;
	transition: color var(--shilapati-transition);
}

.footer-quick-links__list a::before {
	color: var(--shilapati-accent, #d90429);
	content: "›";
	font-weight: 700;
}

.footer-quick-links__list a:hover,
.footer-quick-links__list a:focus-visible {
	color: var(--shilapati-primary, #0073aa);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}


/* ==========================================================================
   6j. Homepage section colour and typography
   ========================================================================== */

/*
 * Every homepage section used to ship its own inline <style> block: ten of
 * them, each hardcoding #0d6efd / #dc3545 / #212529 / #6c757d and each styling
 * its own `h2`. That last part is why four section titles rendered Bootstrap
 * blue - `.politics-block h2` outranked the section-header rule - and why the
 * page carried 21 different text colours that ignored the Customizer.
 *
 * The blocks are gone. Each section now declares one --section-accent and
 * inherits a shared set of text colours from the design tokens, so a section
 * keeps its identity (sport is red, science green, lifestyle amber) while
 * headings, body copy and meta stay consistent and themeable.
 *
 * The font sizes below are carried over from those blocks deliberately, so
 * removing them changed colour without resizing the homepage.
 */

.economic-section,
.shiksha-block,
.swasthya-block,
.sports-block,
.science-tech-block,
.jivansthali-block,
.samaj-block,
.bichar-block,
.antarwbarta-block,
.world-block {
	--section-accent: var(--shilapati-primary, #0073aa);
	--section-accent-rgb: var(--shilapati-primary-rgb, 0, 115, 170);
}

/* Sections that were red keep their red, now from the accent token. */
.swasthya-block,
.sports-block,
.antarwbarta-block {
	--section-accent: var(--shilapati-accent, #d90429);
	--section-accent-rgb: var(--shilapati-accent-rgb, 217, 4, 41);
}

/* These three are not in the palette; they are the section's own identity. */
.science-tech-block {
	--section-accent: #1a8754;
	--section-accent-rgb: 26, 135, 84;
}

.jivansthali-block {
	--section-accent: #b45309;
	--section-accent-rgb: 180, 83, 9;
}

.samaj-block {
	--section-accent: #6f42c1;
	--section-accent-rgb: 111, 66, 193;
}

/* The header eyebrow and its rule pick up whichever accent the section set. */
.shilapati-section-eyebrow {
	color: var(--section-accent, var(--shilapati-accent, #d90429));
}

.shilapati-section-header::before {
	background: linear-gradient(
		90deg,
		var(--section-accent, var(--shilapati-accent, #d90429)),
		var(--shilapati-primary, #0073aa)
	);
}

/* --- Shared card typography ---------------------------------------------- */

.economic-section :is(h3, h5, h6),
.shiksha-block :is(h3, h5, h6),
.swasthya-block :is(h3, h5, h6),
.sports-block :is(h3, h5, h6),
.science-tech-block :is(h3, h5, h6),
.jivansthali-block :is(h3, h5, h6),
.samaj-block :is(h3, h5, h6),
.bichar-block :is(h3, h5, h6),
.antarwbarta-block :is(h3, h5, h6),
.world-block :is(h3, h5, h6) {
	display: -webkit-box;
	overflow: hidden;
	margin-bottom: var(--shilapati-space-xs);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.economic-section p,
.shiksha-block p,
.swasthya-block p,
.sports-block p,
.science-tech-block p,
.jivansthali-block p,
.samaj-block p,
.bichar-block p,
.antarwbarta-block p,
.world-block p {
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.95rem;
	line-height: 1.65;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/*
 * Bootstrap's .text-muted and .text-dark are single classes, so these compound
 * selectors win without !important.
 */
.economic-section :is(small, .text-muted),
.shiksha-block :is(small, .text-muted),
.swasthya-block :is(small, .text-muted),
.sports-block :is(small, .text-muted),
.science-tech-block :is(small, .text-muted),
.jivansthali-block :is(small, .text-muted),
.samaj-block :is(small, .text-muted),
.bichar-block :is(small, .text-muted),
.antarwbarta-block :is(small, .text-muted),
.world-block :is(small, .text-muted) {
	font-size: 0.82rem;
}

/* Card links carry no colour of their own; the heading inside supplies it. */
.economic-section a:not(.btn):not(.shilapati-section-more),
.shiksha-block a:not(.btn):not(.shilapati-section-more),
.swasthya-block a:not(.btn):not(.shilapati-section-more),
.sports-block a:not(.btn):not(.shilapati-section-more),
.science-tech-block a:not(.btn):not(.shilapati-section-more),
.jivansthali-block a:not(.btn):not(.shilapati-section-more),
.samaj-block a:not(.btn):not(.shilapati-section-more),
.bichar-block a:not(.btn):not(.shilapati-section-more),
.antarwbarta-block a:not(.btn):not(.shilapati-section-more),
.world-block a:not(.btn):not(.shilapati-section-more) {
	text-decoration: none;
	transition: color var(--shilapati-transition);
}

/* Hover is where the section's own colour shows up. */
.economic-section a:hover :is(h3, h5, h6),
.shiksha-block a:hover :is(h3, h5, h6),
.swasthya-block a:hover :is(h3, h5, h6),
.sports-block a:hover :is(h3, h5, h6),
.science-tech-block a:hover :is(h3, h5, h6),
.jivansthali-block a:hover :is(h3, h5, h6),
.samaj-block a:hover :is(h3, h5, h6),
.bichar-block a:hover :is(h3, h5, h6),
.antarwbarta-block a:hover :is(h3, h5, h6),
.world-block a:hover :is(h3, h5, h6),
.economic-section a:not(.btn):hover,
.shiksha-block a:not(.btn):hover,
.swasthya-block a:not(.btn):hover,
.sports-block a:not(.btn):hover,
.science-tech-block a:not(.btn):hover,
.jivansthali-block a:not(.btn):hover,
.samaj-block a:not(.btn):hover,
.bichar-block a:not(.btn):hover,
.antarwbarta-block a:not(.btn):hover,
.world-block a:not(.btn):hover {
	color: var(--section-accent, var(--shilapati-primary, #0073aa));
}

/* The "more" pill takes the section colour too. */
.shilapati-section-more {
	color: var(--section-accent, var(--shilapati-primary, #0073aa));
	background: rgba(var(--section-accent-rgb, 0, 115, 170), 0.07);
	border-color: rgba(var(--section-accent-rgb, 0, 115, 170), 0.3);
}

.shilapati-section-more:hover,
.shilapati-section-more:focus-visible {
	color: #fff;
	background: var(--section-accent, var(--shilapati-primary, #0073aa));
	border-color: var(--section-accent, var(--shilapati-primary, #0073aa));
}

/* Category chips inside a section follow it as well. */
.economic-section .badge,
.shiksha-block .badge,
.swasthya-block .badge,
.sports-block .badge,
.science-tech-block .badge,
.jivansthali-block .badge,
.samaj-block .badge,
.bichar-block .badge,
.antarwbarta-block .badge,
.world-block .badge {
	background: var(--section-accent, var(--shilapati-primary, #0073aa)) !important;
	color: #fff;
}

/*
 * One headline size for every content card on the homepage.
 *
 * The province, entertainment and category cards had drifted to 23.2 / 16.8 /
 * 20px, so a reader scanning down the page met a different headline weight in
 * each section. They now share 1.25rem and the same two-line clamp.
 *
 * The video playlist is left alone on purpose: it is an up-next rail beside a
 * player, roughly 270px wide once its thumbnail is subtracted, where 1.25rem
 * Devanagari would fit about two words a line.
 */
.province-featured-card h3,
.province-list-item h3 {
	display: -webkit-box;
	overflow: hidden;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* Card body copy matches the sections too. */
.province-featured-card p,
.province-list-item p {
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.95rem;
	line-height: 1.65;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/*
 * Text sitting on an image.
 *
 * The caption inherits white from its .text-white parent, but the blanket
 * `h1..h6 { color: heading }` rule sets the headline directly, so the h4 came
 * out near-black on a dark scrim - illegible over the photo. The scrim is
 * deepened as well, since a bright image left the old 0.7 gradient too weak.
 */
.economic-featured-caption {
	background: linear-gradient(
		to top,
		rgba(6, 14, 20, 0.92) 0%,
		rgba(6, 14, 20, 0.6) 45%,
		rgba(6, 14, 20, 0) 100%
	);
}

.economic-featured-caption,
.economic-featured-caption :is(h1, h2, h3, h4, h5, h6),
.economic-featured-caption small,
.economic-featured-caption a {
	color: #fff;
}

/* Matches every other card headline on the page. */
.economic-featured-caption :is(h3, h4, h5) {
	display: -webkit-box;
	overflow: hidden;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* --- समाज list items ------------------------------------------------------ */

.samaj-block__item {
	display: grid;
	gap: var(--shilapati-space-sm);
	grid-template-columns: 6.5rem minmax(0, 1fr);
	align-items: start;
	padding-bottom: var(--shilapati-space-sm);
	border-bottom: 1px solid var(--shilapati-border, #e3e7ec);
}

/* An item with no thumbnail should not leave a gap where one would be. */
.samaj-block__item:not(:has(.samaj-block__thumb)) {
	grid-template-columns: minmax(0, 1fr);
}

.samaj-block__thumb {
	display: block;
	overflow: hidden;
	border-radius: var(--shilapati-radius-sm, 5px);
}

.samaj-block__thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--shilapati-background, #f6f7f9);
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shilapati-motion .samaj-block__item:hover .samaj-block__thumb img {
	transform: scale(1.06);
}

.samaj-block__body {
	min-width: 0;
}

.samaj-block__body h6 {
	margin: 0 0 0.25rem;
}

.samaj-block__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.78rem;
	font-weight: 600;
}

.samaj-block__meta i {
	color: var(--section-accent, var(--shilapati-accent, #d90429));
}

.samaj-block .card-body .samaj-block__meta {
	margin-top: var(--shilapati-space-xs);
}

/* --- Card images: one ratio, so rows line up ----------------------------- */

/*
 * The templates used to set height inline - 150, 180, 200, 250, 350, 370 and
 * 380px across the sections - so no two grids agreed and card bodies started
 * at different heights. One aspect ratio replaces all of them: it scales with
 * the column instead of fighting it, and every headline in a row now begins on
 * the same line.
 */
.economic-section .card img,
.shiksha-block .card img,
.swasthya-block .card img,
.sports-block .card img,
.science-tech-block .card img,
.jivansthali-block .card img,
.samaj-block .card img,
.bichar-block .card img,
.antarwbarta-block .card img,
.world-block .card img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	background: var(--shilapati-background, #f6f7f9);
}

/*
 * Side-by-side cards, where the image is a column beside the text rather than
 * a banner above it. They keep a squarer ratio, but a ratio all the same:
 * height:100% against a parent with no definite height resolves to auto, and
 * these images then rendered at their full intrinsic size - 1500px tall.
 */
.economic-section .card img.h-100,
.bichar-block .card img.h-100,
.samaj-block .card img.h-100,
.swasthya-block .card img.h-100 {
	height: 100%;
	min-height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Cards in a grid stretch to the tallest, so their bodies align. */
.economic-section .card,
.shiksha-block .card,
.swasthya-block .card,
.sports-block .card,
.science-tech-block .card,
.jivansthali-block .card,
.samaj-block .card,
.bichar-block .card,
.antarwbarta-block .card,
.world-block .card {
	height: 100%;
}

/* The list-style thumbnails keep their own small fixed box. */
.shiksha-block .card-body ~ * img,
.sports-block .list-group-item img,
.shiksha-block .list-group-item img {
	width: 100px;
	height: 70px;
	aspect-ratio: auto;
	object-fit: cover;
	flex: 0 0 auto;
}

/* --- Layout rules carried over from the removed style blocks ------------- */

.swasthya-block .featured-img {
	width: 100%;
	height: 350px;
	object-fit: cover;
	display: block;
}
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.world-block .card-img-top {
	height: 200px;
	object-fit: cover;
}

.sports-block .list-group-item {
	color: var(--shilapati-heading, #12212e);
	background: transparent;
	border-color: var(--shilapati-border, #e3e7ec);
}

@media (max-width: 767.98px) {
	.swasthya-block .featured-img {
		height: 220px;
	}

	.sports-block .list-group-item {
		flex-direction: column;
		align-items: start;
	}

	.sports-block .list-group-item img {
		width: 100%;
		height: auto;
		margin-bottom: 10px;
	}
}

/*
 * Links whose visible text lives in a child span still need a colour of their
 * own: without one they fall back to the browser/Bootstrap link blue, which
 * shows through on any stray text node.
 */
.entertainment-dark-block .dark-card__link,
.shilapati-video-playlist__link,
.shilapati-video-stage__title a {
	color: #fff;
}

/*
 * Colours in style.css that predate the design tokens: #323ca8 on the featured
 * headline, #333 on its body copy, #666 / #6b7280 on meta. The three card
 * roles are re-pointed in 6k below; the sidebar widgets keep the muted token,
 * being a quiet rail beside the content rather than cards of their own.
 */
.featured-post .post-title a:hover,
.featured-post .post-title a:focus-visible {
	color: var(--shilapati-primary, #0073aa);
}

.shilapati-widget-content small {
	color: var(--shilapati-muted, #5b6875);
}

/* ==========================================================================
   6k. Homepage card colour
   ========================================================================== */

/*
 * The front page used to be written in ink: near-black headlines, near-black
 * excerpts and grey timestamps, section after section. Nothing was wrong with
 * it, but a news grid printed entirely in black-grey reads flat, and the only
 * colour on the page was the section accent in the header rule.
 *
 * The three card roles now have tokens of their own:
 *
 *   card-title  #1c2f6b  deep indigo ink   12.6:1 on white
 *   card-text   #4a5a72  slate blue         7.0:1 on white
 *   card-meta   #0e7490  teal               5.4:1 on white
 *
 * They sit in the same blue family, so a card reads as one object rather than
 * three colours stacked, and every one clears WCAG AA at the small sizes the
 * cards actually use. Hover still hands the headline to --section-accent, so
 * a section keeps its identity where the reader is pointing.
 *
 * All three are Customizer tokens like the rest of the palette, so an editor
 * can take the page back to ink without touching this file.
 */

/* --- Headlines ------------------------------------------------------------ */

.featured-post .post-title a,
.economic-section :is(h3, h5, h6),
.shiksha-block :is(h3, h5, h6),
.swasthya-block :is(h3, h5, h6),
.sports-block :is(h3, h5, h6),
.science-tech-block :is(h3, h5, h6),
.jivansthali-block :is(h3, h5, h6),
.samaj-block :is(h3, h5, h6),
.bichar-block :is(h3, h5, h6),
.antarwbarta-block :is(h3, h5, h6),
.world-block :is(h3, h5, h6),
.economic-section a:not(.btn):not(.shilapati-section-more),
.shiksha-block a:not(.btn):not(.shilapati-section-more),
.swasthya-block a:not(.btn):not(.shilapati-section-more),
.sports-block a:not(.btn):not(.shilapati-section-more),
.science-tech-block a:not(.btn):not(.shilapati-section-more),
.jivansthali-block a:not(.btn):not(.shilapati-section-more),
.samaj-block a:not(.btn):not(.shilapati-section-more),
.bichar-block a:not(.btn):not(.shilapati-section-more),
.antarwbarta-block a:not(.btn):not(.shilapati-section-more),
.world-block a:not(.btn):not(.shilapati-section-more),
.province-featured-body h3 a,
.province-list-body h3 a {
	color: var(--shilapati-card-title, #1c2f6b);
}

/*
 * The side-post headline in six sections carried `color: #111 !important` in
 * style.css, so it stayed black however the tokens moved. That declaration is
 * gone; this is the replacement, and without the !important the section hover
 * rule above can reach it again.
 */
.economic-post-title {
	color: var(--shilapati-card-title, #1c2f6b);
}

.province-featured-body h3 a:hover,
.province-featured-body h3 a:focus-visible,
.province-list-body h3 a:hover,
.province-list-body h3 a:focus-visible {
	color: var(--shilapati-primary, #0073aa);
}

/* --- Summaries ------------------------------------------------------------ */

.featured-post .post-content,
.economic-section p,
.shiksha-block p,
.swasthya-block p,
.sports-block p,
.science-tech-block p,
.jivansthali-block p,
.samaj-block p,
.bichar-block p,
.antarwbarta-block p,
.world-block p,
.province-featured-body p,
.province-list-body p {
	color: var(--shilapati-card-text, #4a5a72);
}

/* --- Dates, bylines and counts -------------------------------------------- */

/*
 * The teal is what separates a timestamp from the summary above it now that
 * neither is black; 600 keeps the small size legible in Devanagari, where a
 * coloured 400 weight goes thin.
 */
.post-meta,
.featured-meta-separator,
.post-author-label,
.post-meta time,
.featured-post .post-meta,
.economic-section :is(small, .text-muted),
.shiksha-block :is(small, .text-muted),
.swasthya-block :is(small, .text-muted),
.sports-block :is(small, .text-muted),
.science-tech-block :is(small, .text-muted),
.jivansthali-block :is(small, .text-muted),
.samaj-block :is(small, .text-muted),
.bichar-block :is(small, .text-muted),
.antarwbarta-block :is(small, .text-muted),
.world-block :is(small, .text-muted),
.samaj-block__meta,
.province-featured-body span,
.province-list-body span {
	color: var(--shilapati-card-meta, #0e7490);
	font-weight: 600;
}

/* The author name is a link inside .post-meta, so it needs saying twice. */
.featured-post .post-meta a,
.featured-post .post-meta a:visited {
	color: var(--shilapati-card-meta, #0e7490);
}

.featured-post .post-meta a:hover,
.featured-post .post-meta a:focus-visible {
	color: var(--shilapati-primary, #0073aa);
}

/*
 * The clock and comment glyphs were Bootstrap blue (#0d6efd in style.css) on
 * teal meta text - two blues arguing at 13px. They take the section's accent
 * instead, which is the one place a flash of the section colour helps rather
 * than distracts.
 */
.post-meta .fa-regular,
.post-meta .fa-solid,
.post-meta .fa-brands,
.economic-section :is(small, .text-muted) i,
.shiksha-block :is(small, .text-muted) i,
.swasthya-block :is(small, .text-muted) i,
.sports-block :is(small, .text-muted) i,
.science-tech-block :is(small, .text-muted) i,
.jivansthali-block :is(small, .text-muted) i,
.samaj-block :is(small, .text-muted) i,
.bichar-block :is(small, .text-muted) i,
.antarwbarta-block :is(small, .text-muted) i,
.world-block :is(small, .text-muted) i,
.province-featured-body span i,
.province-list-body span i {
	color: var(--section-accent, var(--shilapati-accent, #d90429));
}

/*
 * Text over a photo is the exception: the scrim is dark, so the caption stays
 * white and its date stays a translucent white rather than teal.
 */
.economic-featured-caption :is(small, .text-muted),
.economic-featured-caption :is(small, .text-muted) i {
	color: rgba(255, 255, 255, 0.88);
}

/* ==========================================================================
   7. Footer and credits
   ========================================================================== */

/*
 * The footer previously hard-coded a mint green bar (#21D192) and magenta
 * copyright text on pale green (#c1dbc8), which failed contrast. It now uses
 * the secondary token with an auto-derived foreground.
 */
.site-footer {
	margin-top: var(--shilapati-space-xl);
	color: var(--shilapati-text, #26313d);
	background: var(--shilapati-card, #fff);
	border-top: 3px solid var(--shilapati-primary, #0073aa);
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shilapati-space-sm);
	align-items: center;
	justify-content: space-between;
	padding: var(--shilapati-space-md) var(--shilapati-space-lg);
	color: var(--shilapati-on-secondary, #fff);
	background: var(--shilapati-secondary, #123a5a);
	font-weight: 600;
}

.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	transition: background-color var(--shilapati-transition), border-color var(--shilapati-transition);
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.7);
}

.site-footer .footer-widget {
	margin-bottom: var(--shilapati-space-md);
}

.site-footer .footer-widget h4 {
	margin-bottom: var(--shilapati-space-sm);
	padding-bottom: var(--shilapati-space-xs);
	border-bottom: 2px solid var(--shilapati-accent, #d90429);
	font-size: 1.05rem;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Footer brand and masthead
   -------------------------------------------------------------------------- */

.shilapati-footer-brand__logo {
	display: inline-block;
	max-width: 200px;
	margin-bottom: var(--shilapati-space-sm);
	text-decoration: none;
}

.shilapati-footer-brand__logo img {
	width: 100%;
	height: auto;
}

.shilapati-footer-brand__name {
	color: var(--shilapati-heading, #12212e);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.shilapati-footer-brand__tagline {
	margin: 0 0 var(--shilapati-space-xs);
	padding-bottom: var(--shilapati-space-xs);
	border-bottom: 2px solid var(--shilapati-accent, #d90429);
	color: var(--shilapati-heading, #12212e);
	font-weight: 600;
}

.shilapati-footer-brand__text {
	margin: 0;
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.88rem;
	line-height: 1.7;
}

.shilapati-team {
	margin: 0;
	padding: 0;
	list-style: none;
}

.shilapati-team__item {
	display: grid;
	gap: 0 var(--shilapati-space-sm);
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	align-items: baseline;
	padding: 0.3rem 0;
	border-bottom: 1px dashed var(--shilapati-border, #e3e7ec);
}

.shilapati-team__item:last-child {
	border-bottom: 0;
}

/* A row with no designation gives its name the full width. */
.shilapati-team__item:not(:has(.shilapati-team__role)) {
	grid-template-columns: minmax(0, 1fr);
}

.shilapati-team__role {
	color: var(--shilapati-muted, #5b6875);
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

.shilapati-team__name {
	color: var(--shilapati-heading, #12212e);
	font-size: 0.92rem;
	font-weight: 600;
}

.site-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shilapati-space-xs) var(--shilapati-space-md);
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: var(--shilapati-space-sm) 0;
	list-style: none;
	border-top: 1px solid var(--shilapati-border, #e3e7ec);
	font-size: 0.9rem;
}

.site-footer__menu a {
	color: var(--shilapati-muted, #5b6875);
	text-decoration: none;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible {
	color: var(--shilapati-primary, #0073aa);
	text-decoration: underline;
}

.site-footer__legal {
	padding: var(--shilapati-space-sm) 0;
	color: var(--shilapati-on-secondary, #fff);
	background: var(--shilapati-secondary, #123a5a);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/*
 * Copyright left, credits right. They are two separate statements - who owns
 * the content and who built the site - so stacking them centred made the strip
 * read as one run-on line. On narrow screens they stack and centre again,
 * because side by side there is no room for either to stay on one line.
 */
.site-footer__legal-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shilapati-space-xs) var(--shilapati-space-lg);
	align-items: center;
	justify-content: space-between;
}

.site-footer__copyright {
	margin: 0;
	font-size: 0.875rem;
}

.site-footer__copyright a {
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

.site-footer__copyright a:hover,
.site-footer__copyright a:focus-visible {
	text-decoration: underline;
}

.shilapati-credits {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shilapati-space-xs);
	align-items: center;
	justify-content: flex-end;
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.6;
	opacity: 0.85;
}

@media (max-width: 575.98px) {
	.site-footer__legal-row {
		justify-content: center;
		text-align: center;
	}

	.shilapati-credits {
		justify-content: center;
	}
}

.shilapati-credits a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.shilapati-credits a:hover,
.shilapati-credits a:focus-visible {
	text-decoration-thickness: 2px;
}

.shilapati-credits__separator {
	opacity: 0.5;
}

/* ==========================================================================
   8. Motion
   ========================================================================== */

/*
 * Reveals are opt-in per element (data-shilapati-reveal) and only armed by JS
 * when IntersectionObserver exists, so content is never left invisible if the
 * script fails to run.
 */
.shilapati-motion [data-shilapati-reveal].is-armed {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.shilapati-motion [data-shilapati-reveal].is-armed.is-visible {
	opacity: 1;
	transform: none;
}

/* Staggered children for grids, capped so a long list never feels slow. */
.shilapati-motion [data-shilapati-reveal].is-armed:nth-child(2) {
	transition-delay: 60ms;
}

.shilapati-motion [data-shilapati-reveal].is-armed:nth-child(3) {
	transition-delay: 120ms;
}

.shilapati-motion [data-shilapati-reveal].is-armed:nth-child(n + 4) {
	transition-delay: 160ms;
}

/* Hover interactions. Transform and opacity only, so nothing triggers layout. */
.shilapati-motion .shilapati-card:hover,
.shilapati-motion .shilapati-card:focus-within {
	transform: translateY(-3px);
	border-color: rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.35);
	box-shadow: var(--shilapati-shadow-md);
}

.shilapati-motion .shilapati-card:hover .shilapati-card__image,
.shilapati-motion .shilapati-card:focus-within .shilapati-card__image {
	transform: scale(1.045);
}

.shilapati-motion .shilapati-province-switcher__link:hover {
	transform: translateY(-1px);
}

.shilapati-motion .shilapati-share__link:hover,
.shilapati-motion .shilapati-share__link:focus-visible {
	transform: translateY(-2px);
}

.shilapati-motion .shilapati-author-bio:hover {
	border-color: rgba(var(--shilapati-primary-rgb, 0, 115, 170), 0.3);
}

/*
 * Homepage hover.
 *
 * Transform, opacity, colour and shadow only - nothing here triggers layout,
 * so a hover never reflows the grid. Images sit inside an overflow-hidden
 * frame so the zoom is clipped to the card.
 */
.shilapati-motion :is(
	.economic-section,
		.shiksha-block,
	.swasthya-block,
	.sports-block,
	.science-tech-block,
	.jivansthali-block,
	.samaj-block,
	.bichar-block,
	.antarwbarta-block,
	.world-block
) .card {
	transition: transform var(--shilapati-transition), box-shadow var(--shilapati-transition),
		border-color var(--shilapati-transition);
}

.shilapati-motion :is(
	.economic-section,
		.shiksha-block,
	.swasthya-block,
	.sports-block,
	.science-tech-block,
	.jivansthali-block,
	.samaj-block,
	.bichar-block,
	.antarwbarta-block,
	.world-block
) .card:hover,
.shilapati-motion :is(
	.economic-section,
		.shiksha-block,
	.swasthya-block,
	.sports-block,
	.science-tech-block,
	.jivansthali-block,
	.samaj-block,
	.bichar-block,
	.antarwbarta-block,
	.world-block
) .card:focus-within {
	transform: translateY(-4px);
	border-color: rgba(var(--section-accent-rgb, 0, 115, 170), 0.35);
	box-shadow: var(--shilapati-shadow-md);
}

/* Clip the zoom to the card. */
:is(
	.economic-section,
		.shiksha-block,
	.swasthya-block,
	.sports-block,
	.science-tech-block,
	.jivansthali-block,
	.samaj-block,
	.bichar-block,
	.antarwbarta-block,
	.world-block
) .card {
	overflow: hidden;
}

.shilapati-motion :is(
	.economic-section,
		.shiksha-block,
	.swasthya-block,
	.sports-block,
	.science-tech-block,
	.jivansthali-block,
	.samaj-block,
	.bichar-block,
	.antarwbarta-block,
	.world-block
) .card img {
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shilapati-motion :is(
	.economic-section,
		.shiksha-block,
	.swasthya-block,
	.sports-block,
	.science-tech-block,
	.jivansthali-block,
	.samaj-block,
	.bichar-block,
	.antarwbarta-block,
	.world-block
) .card:hover img {
	transform: scale(1.05);
}

/* Province panes and the video playlist get the same treatment. */
.shilapati-motion .province-featured-card,
.shilapati-motion .province-list-item {
	transition: transform var(--shilapati-transition), box-shadow var(--shilapati-transition);
}

.shilapati-motion .province-featured-card:hover,
.shilapati-motion .province-featured-card:focus-within,
.shilapati-motion .province-list-item:hover,
.shilapati-motion .province-list-item:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--shilapati-shadow-md);
}

.shilapati-motion .province-featured-media,
.shilapati-motion .province-list-thumb {
	display: block;
	overflow: hidden;
}

.shilapati-motion .province-featured-media img,
.shilapati-motion .province-list-thumb img {
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shilapati-motion .province-featured-card:hover .province-featured-media img,
.shilapati-motion .province-list-item:hover .province-list-thumb img {
	transform: scale(1.05);
}

.shilapati-motion .shilapati-video-playlist__link:hover .shilapati-video-playlist__thumb img {
	transform: scale(1.06);
}

.shilapati-motion .shilapati-video-playlist__thumb img {
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shilapati-motion .shilapati-topics__link:hover,
.shilapati-motion .footer-quick-links__list a:hover {
	transform: translateY(-1px);
}

/*
 * The visitor's own preference always wins, whatever the Customizer says.
 * Nothing below is inside a class guard on purpose.
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-shilapati-reveal].is-armed {
		opacity: 1 !important;
		transform: none !important;
	}

	.shilapati-card:hover,
	.shilapati-card:focus-within {
		transform: none !important;
	}

	.shilapati-card:hover .shilapati-card__image,
	.shilapati-card:focus-within .shilapati-card__image {
		transform: none !important;
	}

	.shilapati-province-switcher__list {
		scroll-behavior: auto;
	}
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

/*
 * Nothing may overflow the viewport horizontally.
 *
 * `clip` rather than `hidden`: overflow-x:hidden on html/body turns them into
 * scroll containers, and a scroll container between a sticky element and the
 * viewport silently kills position:sticky. That is why the sidebar ad blocks
 * never actually stuck. `clip` cuts the overflow without creating one.
 *
 * The `hidden` line stays first as the fallback for browsers without `clip`
 * (Safari below 16); they lose sticky, as they did before, but keep the clip.
 */
html,
body {
	overflow-x: hidden;
	overflow-x: clip;
}

.shilapati-card__title,
.shilapati-card__excerpt,
.shilapati-ai-summary__text,
.shilapati-author-bio__text,
.shilapati-breadcrumbs {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Wide content scrolls inside its own box rather than stretching the page. */
.post-content table,
.entry-content table {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.post-content pre,
.entry-content pre {
	overflow-x: auto;
}

.post-content img,
.post-content iframe,
.post-content video,
.entry-content img,
.entry-content iframe,
.entry-content video {
	max-width: 100%;
	height: auto;
}

.post-content iframe,
.entry-content iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.shilapati-ai-summary {
		padding: var(--shilapati-space-sm);
	}

	.shilapati-ai-summary__footer {
		flex-direction: column;
		gap: var(--shilapati-space-xs);
	}

	.shilapati-author-bio {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.shilapati-share {
		gap: var(--shilapati-space-xs);
	}

	.shilapati-share__label {
		flex: 1 0 100%;
	}
}

@media (max-width: 480px) {
	.shilapati-province-switcher__heading {
		font-size: 1.1rem;
	}

	.shilapati-province-switcher__link {
		padding: 0.45rem 0.75rem;
		font-size: 0.88rem;
	}

	.shilapati-share__link {
		width: 2.5rem;
		height: 2.5rem;
	}

	.shilapati-card__title {
		font-size: 1rem;
	}

	.shilapati-breadcrumbs__item [aria-current="page"] {
		max-width: 16ch;
	}
}

/* Cap measure on very large screens so lines stay readable. */
@media (min-width: 1600px) {
	.post-content,
	.entry-content {
		max-width: 78ch;
	}
}

/* ==========================================================================
   10. Print
   ========================================================================== */

@media print {
	.shilapati-share,
	.shilapati-province-switcher,
	.shilapati-ai-summary__toggle,
	.shilapati-breadcrumbs {
		display: none !important;
	}

	.shilapati-ai-summary {
		padding: 0.5rem 0;
		background: none;
		border: 0;
		border-top: 2px solid #000;
		border-bottom: 1px solid #000;
		border-radius: 0;
	}

	/* Every summary tab prints as a labelled section instead of a hidden pane. */
	.shilapati-ai-summary__body[hidden],
	.shilapati-ai-summary__panel[hidden] {
		display: block !important;
	}

	.shilapati-ai-summary__tabs {
		display: none !important;
	}

	.shilapati-ai-summary__panel {
		break-inside: avoid;
	}

	.shilapati-ai-summary__badge {
		color: #000;
		background: none;
	}

	.shilapati-ai-summary__label,
	.shilapati-ai-summary__disclaimer {
		color: #000;
	}

	/* The readable permalink becomes visible so a printout stays traceable. */
	.shilapati-share__url {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}

	.shilapati-card,
	.shilapati-author-bio {
		border: 1px solid #999;
		box-shadow: none;
	}
}

/* ==========================================================================
   11. Optional dark scheme
   ========================================================================== */

/*
 * Off by default: the site's identity is a light news portal. Turning on
 * "Follow the visitor's dark mode preference" in the Customizer adds
 * .shilapati-dark-auto and redefines the tokens, so every component above
 * follows without further rules.
 */
@media (prefers-color-scheme: dark) {
	body.shilapati-dark-auto {
		--shilapati-background: #0f151c;
		--shilapati-background-rgb: 15, 21, 28;
		--shilapati-card: #18212b;
		--shilapati-card-rgb: 24, 33, 43;
		--shilapati-border: #2c3947;
		--shilapati-border-rgb: 44, 57, 71;
		--shilapati-text: #dde5ee;
		--shilapati-text-rgb: 221, 229, 238;
		--shilapati-heading: #f2f6fb;
		--shilapati-heading-rgb: 242, 246, 251;
		--shilapati-muted: #9aa8b8;
		--shilapati-muted-rgb: 154, 168, 184;
		/* The card trio lightened for a dark ground: the indigo would sink
		   into the surface and the teal loses contrast below about #22d3ee. */
		--shilapati-card-title: #cfe0ff;
		--shilapati-card-title-rgb: 207, 224, 255;
		--shilapati-card-text: #b3c2d4;
		--shilapati-card-text-rgb: 179, 194, 212;
		--shilapati-card-meta: #5fd0e6;
		--shilapati-card-meta-rgb: 95, 208, 230;
		--shilapati-link: #6db3ff;
		--shilapati-link-rgb: 109, 179, 255;
		--shilapati-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
		--shilapati-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
	}

	body.shilapati-dark-auto .shilapati-author-avatar {
		border-color: var(--shilapati-card);
	}
}