:root {
	--pt-paper: #f9f9f9;
	--pt-paper-warm: #fef8f1;
	--pt-surface: #ffffff;
	--pt-surface-soft: #f3f3f3;
	--pt-surface-line: #ded7d2;
	--pt-ink: #111111;
	--pt-ink-soft: #4c4546;
	--pt-muted: #6a6263; /* >=4.5:1 (WCAG AA) on the cream background */
	--pt-black: #000000;
	--pt-gold: #d4af37;
	--pt-gold-deep: #735c00;
	--pt-max: 1280px;
	--pt-gutter: 24px;
	--pt-head: "Libre Caslon Text", Georgia, serif;
	--pt-body: "Source Serif 4", Georgia, serif;
	--pt-ui: "Work Sans", Arial, sans-serif;
	--pt-radius: 3px;
	--pt-shadow: 0 16px 40px rgba(17, 17, 17, 0.06);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--pt-paper);
	color: var(--pt-ink);
	font-family: var(--pt-body);
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--pt-gold-deep);
}

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

button,
input,
select,
textarea {
	font: inherit;
}

.pt-container {
	width: min(var(--pt-max), calc(100% - 48px));
	margin-inline: auto;
}

.screen-reader-text,
.pt-skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pt-skip-link:focus {
	z-index: 9999;
	left: 16px;
	top: 16px;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: 10px 14px;
	background: var(--pt-black);
	color: #fff;
	font-family: var(--pt-ui);
}

/* Breaking news ticker */
.pt-breaking {
	position: relative;
	z-index: 20;
	background: var(--pt-black);
	color: #ffffff;
	font-family: var(--pt-ui);
	font-size: 12px;
	letter-spacing: 0.02em;
}

.pt-breaking__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 34px;
	overflow: hidden;
}

.pt-breaking__label {
	flex: 0 0 auto;
	background: var(--pt-gold);
	color: #111;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 4px 8px;
	line-height: 1;
}

.pt-breaking__viewport {
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

.pt-breaking__track {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	white-space: nowrap;
	animation: pt-ticker 42s linear infinite;
}

.pt-breaking__track:hover {
	animation-play-state: paused;
}

.pt-breaking__seg {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	white-space: nowrap;
}

.pt-breaking--paused .pt-breaking__track,
.pt-breaking--focus .pt-breaking__track {
	animation-play-state: paused;
}

.pt-breaking__pause {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-left: 10px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
}

.pt-breaking__pause:hover,
.pt-breaking__pause:focus-visible {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.12);
}

.pt-breaking__pause .pt-breaking__ico-play { display: none; }
.pt-breaking--paused .pt-breaking__pause .pt-breaking__ico-play { display: inline; }
.pt-breaking--paused .pt-breaking__pause .pt-breaking__ico-pause { display: none; }

@media (prefers-reduced-motion: reduce) {
	.pt-breaking__pause { display: none; }
}

.pt-breaking__track a {
	color: #ffffff;
}

.pt-breaking__track a:hover {
	color: var(--pt-gold);
}

@keyframes pt-ticker {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Header */
.pt-site-header {
	background: var(--pt-surface);
	border-bottom: 1px solid var(--pt-surface-line);
}

.pt-masthead {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 24px 0 18px;
}

.pt-brand-wrap {
	text-align: center;
}

.pt-brand,
.pt-footer-title {
	display: inline-block;
	font-family: var(--pt-head);
	font-weight: 700;
	font-size: clamp(38px, 5vw, 56px);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--pt-black);
}

.pt-tagline {
	margin: 8px 0 0;
	font-family: var(--pt-ui);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--pt-muted);
}

.pt-menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex-direction: column;
	border: 1px solid var(--pt-surface-line);
	background: transparent;
	cursor: pointer;
}

.pt-menu-toggle__bar {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--pt-black);
}

.pt-header-search {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 0;
	max-width: 280px;
	width: 100%;
	border: 1px solid var(--pt-surface-line);
	background: var(--pt-paper);
}

.pt-header-search input {
	min-width: 0;
	width: 100%;
	border: 0;
	background: transparent;
	padding: 9px 10px;
	font-family: var(--pt-ui);
	font-size: 13px;
	outline: none;
}

.pt-header-search button {
	border: 0;
	border-left: 1px solid var(--pt-surface-line);
	background: var(--pt-black);
	color: #fff;
	padding: 9px 12px;
	font-family: var(--pt-ui);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.pt-primary-nav {
	border-top: 1px solid var(--pt-surface-line);
}

.pt-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(14px, 2vw, 28px);
	font-family: var(--pt-ui);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.pt-menu > li {
	position: relative;
}

.pt-menu a {
	display: block;
	padding: 14px 0;
	color: var(--pt-ink-soft);
}

.pt-menu a:hover,
.pt-menu .current-menu-item > a,
.pt-menu .current_page_item > a {
	color: var(--pt-black);
}

/* Sections */
.pt-site-main {
	padding-bottom: 64px;
}

.pt-section {
	padding: 40px 0;
	border-bottom: 1px solid var(--pt-surface-line);
}

.pt-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 18px;
	border-bottom: 2px solid var(--pt-black);
	padding-bottom: 8px;
}

.pt-section__head h1,
.pt-section__head h2,
.pt-page-header h1 {
	margin: 0;
	font-family: var(--pt-ui);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.pt-section__head a {
	font-family: var(--pt-ui);
	font-size: 12px;
	font-weight: 700;
	color: var(--pt-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.pt-top-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.8fr) minmax(230px, 0.55fr);
	gap: 24px;
	align-items: start;
}

.pt-top-grid__side,
.pt-feature-grid__list,
.pt-video-grid__list {
	display: grid;
	gap: 18px;
}

.pt-top-grid__list {
	border-left: 1px solid var(--pt-surface-line);
	padding-left: 20px;
}

.pt-feature-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
	gap: 24px;
	align-items: start;
}

.pt-card-grid {
	display: grid;
	gap: 24px;
}

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

.pt-card-grid--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Cards */
.pt-card,
.pt-news-line,
.pt-video-card {
	position: relative;
}

.pt-card__image,
.pt-video-card__image,
.pt-single-fallback__image {
	margin: 0 0 12px;
	background: var(--pt-surface-soft);
	overflow: hidden;
}

.pt-card__image img,
.pt-video-card__image img,
.pt-single-fallback__image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 500ms ease;
}

/* Wide news-card image (v0.1.9): match the ~1.91:1 source so headline text inside
   the image is not cropped. Cards only — video + article hero keep 16/10. */
.pt-card__image img {
	aspect-ratio: 16 / 9;
}

.pt-archive:not(.pt-home) .pt-card__image img {
	object-fit: contain;
	object-position: center;
}

.pt-archive:not(.pt-home) .pt-card:hover .pt-card__image img {
	transform: none;
}

.pt-card:hover .pt-card__image img,
.pt-video-card:hover .pt-video-card__image img {
	transform: scale(1.035);
}

.pt-card__body {
	display: grid;
	gap: 6px;
}

.pt-card__title,
.pt-news-line h3,
.pt-video-card h3 {
	margin: 0;
	font-family: var(--pt-head);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--pt-black);
}

.pt-card__title {
	font-size: clamp(22px, 2.2vw, 30px);
}

.pt-card--lead .pt-card__title {
	font-size: clamp(32px, 4vw, 52px);
}

.pt-card--mini {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
}

.pt-card--mini .pt-card__image {
	margin: 0;
}

.pt-card--mini .pt-card__image img {
	aspect-ratio: 1 / 1;
}

.pt-card--mini .pt-card__title {
	font-size: 17px;
	line-height: 1.2;
}

.pt-card--text {
	padding: 20px 0;
	border-top: 1px solid var(--pt-surface-line);
}

.pt-card--text .pt-card__image {
	display: none;
}

.pt-card__excerpt {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--pt-ink-soft);
}

.pt-meta {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--pt-ui);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pt-muted);
}

.pt-news-line {
	padding: 0 0 14px;
	border-bottom: 1px solid var(--pt-surface-line);
}

.pt-news-line h3 {
	margin-top: 6px;
	font-size: 17px;
	line-height: 1.25;
}

.pt-news-line:last-child {
	border-bottom: 0;
}

/* Video */
.pt-video-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
	gap: 24px;
}

.pt-video-card--lead {
	background: var(--pt-black);
	color: #fff;
	overflow: hidden;
}

.pt-video-card--lead .pt-video-card__image {
	margin: 0;
	background: var(--pt-black);
}

.pt-video-card--lead .pt-video-card__image img {
	aspect-ratio: 16 / 8.8;
	opacity: 0.78;
}

.pt-video-card__body {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 22px;
	display: grid;
	gap: 8px;
}

.pt-video-card h3 {
	font-size: clamp(28px, 3vw, 42px);
	color: #fff;
}

.pt-play-icon {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 999px;
	font-size: 18px;
	color: #fff;
	backdrop-filter: blur(4px);
}

/* Trending + newsletter */
.pt-trending-list {
	list-style: none;
	counter-reset: trending;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
}

.pt-trending-list li {
	counter-increment: trending;
	padding-left: 50px;
	position: relative;
	min-height: 56px;
	border-left: 1px solid var(--pt-surface-line);
}

.pt-trending-list li::before {
	content: counter(trending, decimal-leading-zero);
	position: absolute;
	left: 14px;
	top: -2px;
	font-family: var(--pt-head);
	font-size: 28px;
	color: var(--pt-gold-deep);
}

.pt-trending-list a {
	display: block;
	font-family: var(--pt-head);
	font-weight: 700;
	line-height: 1.2;
}

.pt-trending-list time {
	display: block;
	margin-top: 8px;
	font-family: var(--pt-ui);
	font-size: 11px;
	color: var(--pt-muted);
	text-transform: uppercase;
}

.pt-newsletter {
	padding: 52px 0;
	background: var(--pt-surface-soft);
	border-bottom: 1px solid var(--pt-surface-line);
}

.pt-newsletter__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.65fr);
	gap: 32px;
	align-items: center;
}

.pt-kicker {
	margin: 0 0 8px;
	font-family: var(--pt-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pt-gold-deep);
}

.pt-newsletter h2 {
	margin: 0;
	font-family: var(--pt-head);
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1.05;
}

.pt-newsletter p {
	max-width: 620px;
	margin: 10px 0 0;
	color: var(--pt-ink-soft);
}

.pt-newsletter__box {
	background: var(--pt-surface);
	border: 1px solid var(--pt-surface-line);
	padding: 22px;
	box-shadow: var(--pt-shadow);
}

.pt-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--pt-black);
	color: #fff;
	border: 1px solid var(--pt-black);
	padding: 10px 16px;
	font-family: var(--pt-ui);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.pt-button:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: var(--pt-gold-deep);
	border-color: var(--pt-gold-deep);
	color: #fff;
}

/* Footer */
.pt-site-footer {
	background: var(--pt-surface);
	border-top: 1px solid var(--pt-surface-line);
	padding: 40px 0 22px;
}

.pt-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

.pt-footer-title {
	font-size: clamp(30px, 4vw, 44px);
}

.pt-footer-brand p {
	margin: 8px 0 0;
	color: var(--pt-ink-soft);
}

.pt-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px 24px;
	font-family: var(--pt-ui);
	font-size: 13px;
	font-weight: 600;
}

.pt-footer-bottom {
	margin-top: 36px;
	padding-top: 16px;
	border-top: 1px solid var(--pt-surface-line);
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font-family: var(--pt-ui);
	font-size: 12px;
	color: var(--pt-muted);
}

.pt-footer-bottom p {
	margin: 0;
}

/* Fallback archive/single */
.pt-archive {
	padding-top: 44px;
}

.pt-page-header {
	margin-bottom: 24px;
	border-bottom: 2px solid var(--pt-black);
	padding-bottom: 12px;
}

.pt-archive-description {
	margin-top: 10px;
	max-width: 760px;
	color: var(--pt-ink-soft);
	font-size: 16px;
	line-height: 1.6;
}

.pt-archive-description p {
	margin: 0;
}

.pt-archive-description p + p {
	margin-top: 0.75em;
}

.pt-loop-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.pt-single-fallback {
	max-width: 820px;
	margin-inline: auto;
}

.pt-single-fallback .pt-single-fallback__image img {
	aspect-ratio: 16 / 9;
	object-fit: contain !important;
	object-position: center;
}

.pt-entry-content {
	margin-top: 22px;
}

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

.pt-entry-content p,
.pt-entry-content ul,
.pt-entry-content ol,
.pt-entry-content blockquote {
	margin-top: 0;
	margin-bottom: 1.2em;
}

.pt-entry-content h2,
.pt-entry-content h3,
.pt-entry-content h4 {
	font-family: var(--pt-head);
	line-height: 1.15;
}

.pt-pagination {
	margin-top: 40px;
	font-family: var(--pt-ui);
}

.pt-empty {
	font-family: var(--pt-ui);
	color: var(--pt-muted);
}

/* WordPress alignment basics */
.alignwide {
	max-width: min(1100px, 100%);
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* Responsive */
@media (max-width: 1100px) {
	.pt-top-grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
	}

	.pt-top-grid__list {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid var(--pt-surface-line);
		padding-top: 18px;
	}

	.pt-card-grid--four,
	.pt-trending-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pt-loop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.pt-container {
		width: min(100% - 32px, var(--pt-max));
	}

	.pt-breaking__inner {
		min-height: 36px;
	}

	.pt-masthead {
		grid-template-columns: 44px 1fr 44px;
		gap: 10px;
		padding: 16px 0 14px;
	}

	.pt-menu-toggle {
		display: inline-flex;
	}

	.pt-brand,
	.pt-footer-title {
		font-size: 34px;
	}

	.pt-tagline {
		font-size: 10px;
		letter-spacing: 0.08em;
	}

	.pt-header-search {
		display: none;
	}

	.pt-primary-nav {
		display: none;
		border-top: 1px solid var(--pt-surface-line);
		background: var(--pt-surface);
	}

	body.pt-menu-open .pt-primary-nav {
		display: block;
	}

	.pt-menu {
		display: grid;
		justify-content: stretch;
		gap: 0;
		padding: 8px 0;
	}

	.pt-menu a {
		padding: 12px 0;
		border-bottom: 1px solid var(--pt-surface-line);
	}

	.pt-section {
		padding: 30px 0;
	}

	.pt-top-grid,
	.pt-feature-grid,
	.pt-video-grid,
	.pt-newsletter__inner,
	.pt-footer-grid {
		grid-template-columns: 1fr;
	}

	.pt-top-grid__side,
	.pt-top-grid__list,
	.pt-feature-grid__list,
	.pt-video-grid__list {
		grid-template-columns: 1fr;
	}

	.pt-card-grid--four,
	.pt-card-grid--three,
	.pt-trending-list,
	.pt-loop-grid,
	.pt-footer-links {
		grid-template-columns: 1fr;
	}

	.pt-top-grid__list {
		border-top: 0;
		padding-top: 0;
	}

	.pt-card--lead .pt-card__title {
		font-size: 34px;
	}

	.pt-card__title {
		font-size: 24px;
	}

	.pt-video-card__body {
		position: static;
		padding: 16px;
	}

	.pt-video-card--lead .pt-video-card__image img {
		aspect-ratio: 16 / 10;
	}

	.pt-footer-bottom {
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	body {
		font-size: 17px;
	}

	.pt-breaking__label {
		font-size: 10px;
		padding: 4px 6px;
	}

	.pt-breaking__track {
		font-size: 11px;
		animation-duration: 34s;
	}

	.pt-section__head {
		align-items: center;
	}

	.pt-section__head h1,
	.pt-section__head h2 {
		font-size: 13px;
	}

	.pt-card--mini {
		grid-template-columns: 78px minmax(0, 1fr);
	}

	.pt-card__excerpt {
		font-size: 16px;
	}
}

/* 404 page */
.pt-404__body { max-width: 720px; margin: 0 auto 48px; }
.pt-404__lead { font-size: 1.15rem; line-height: 1.7; margin: 0 0 8px; }
.pt-404__hint { color: var(--pt-muted); margin: 0 0 20px; }
.pt-404__search { margin: 0 0 26px; }
.pt-404__search .search-form,
.pt-search__form .search-form { display: flex; gap: 8px; max-width: 480px; }
.pt-404__search .search-form input[type="search"],
.pt-search__form .search-form input[type="search"] { flex: 1 1 auto; padding: 10px 12px; border: 1px solid var(--pt-surface-line); background: #fff; color: var(--pt-ink); }
.pt-404__search .search-form input[type="submit"],
.pt-404__search .search-form button,
.pt-search__form .search-form input[type="submit"],
.pt-search__form .search-form button { padding: 10px 18px; border: 0; background: var(--pt-black); color: #fff; cursor: pointer; }
.pt-404__links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.pt-404__links a { display: inline-block; padding: 9px 16px; border: 1px solid var(--pt-surface-line); border-radius: 2px; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pt-ink); }
.pt-404__links a:hover, .pt-404__links a:focus-visible { border-color: var(--pt-black); }
.pt-search__count { color: var(--pt-muted); margin: 4px 0 0; }
.pt-search__form { margin: 0 0 26px; }

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

	.pt-breaking__track {
		animation: none;
	}
}

/* CookieYes revisit button: keep it visible/clickable, but less dominant. */
.cky-btn-revisit-wrapper,
.cky-revisit-bottom-left {
	opacity: 0.4;
	transition: opacity 160ms ease;
}

.cky-btn-revisit-wrapper:hover,
.cky-btn-revisit-wrapper:focus-within,
.cky-btn-revisit-wrapper:active,
.cky-revisit-bottom-left:hover,
.cky-revisit-bottom-left:focus-within,
.cky-revisit-bottom-left:active {
	opacity: 0.9;
}

/* ============================================================
 * PT-FIX 2026-07-02 — audit remediation (archive H1, card clamp,
 * focus states, meta contrast, author box, post navigation).
 * Reversible: remove this block to revert. ============================================================ */

/* G: authoritative archive/search headline (single posts styled elsewhere) */
body.archive .pt-page-header h1,
body.search .pt-page-header h1 {
	font-family: var(--pt-head);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-transform: none;
}

/* H: even archive/search cards with clamped title + excerpt */
body.archive .pt-loop-grid,
body.search .pt-loop-grid { align-items: stretch; }
body.archive .pt-loop-grid .pt-card,
body.search .pt-loop-grid .pt-card { display: flex; flex-direction: column; }
body.archive .pt-loop-grid .pt-card__body,
body.search .pt-loop-grid .pt-card__body { flex: 1 1 auto; }
body.archive .pt-loop-grid .pt-card__title a,
body.search .pt-loop-grid .pt-card__title a {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body.archive .pt-loop-grid .pt-card__excerpt,
body.search .pt-loop-grid .pt-card__excerpt {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* U: visible keyboard focus (the header search field had its ring removed) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--pt-gold-deep);
	outline-offset: 2px;
}
.pt-header-search input:focus-visible,
.pt-war-search input:focus-visible { outline-offset: -2px; }

/* V: meta text contrast + legibility (was 11px / low contrast) */
body .pt-meta { font-size: 12.5px; color: var(--pt-ink-soft); }

/* R: author bio box on single articles */
.pt-author-box {
	display: flex; gap: 16px; align-items: flex-start;
	margin: 2rem 0 0; padding: 20px;
	background: var(--pt-surface-soft); border: 1px solid var(--pt-surface-line);
	border-radius: var(--pt-radius);
}
.pt-author-box__avatar { border-radius: 50%; flex: none; width: 72px; height: 72px; }
.pt-author-box__eyebrow {
	margin: 0 0 2px; font-family: var(--pt-ui); font-size: 12px;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--pt-muted);
}
.pt-author-box__name { margin: 0 0 6px; font-family: var(--pt-head); font-size: 19px; font-weight: 700; }
.pt-author-box__bio { margin: 0; font-size: 15px; line-height: 1.6; color: var(--pt-ink-soft); }

/* S: previous/next article navigation */
.pt-single .post-navigation { margin: 2rem 0 0; border-top: 1px solid var(--pt-surface-line); padding-top: 1rem; }
.pt-single .post-navigation .nav-links { display: flex; gap: 16px; justify-content: space-between; }
.pt-single .post-navigation .nav-previous, .pt-single .post-navigation .nav-next { max-width: 48%; }
.pt-single .post-navigation .nav-next { margin-left: auto; text-align: right; }
.pt-single .post-navigation a { text-decoration: none; color: inherit; }
.pt-single .post-navigation a:hover .pt-postnav__lbl { color: var(--pt-gold-deep); }
.pt-postnav__lbl {
	display: block; font-family: var(--pt-ui); font-size: 12px; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--pt-muted); margin-bottom: 3px;
}
@media (max-width: 640px) {
	.pt-single .post-navigation .nav-links { flex-direction: column; }
	.pt-single .post-navigation .nav-previous, .pt-single .post-navigation .nav-next { max-width: 100%; text-align: left; }
	.pt-single .post-navigation .nav-next { text-align: left; }
}

/**
 * PunjabiTime News — Phase A: Gurmukhi typography override.
 *
 * ADDITIVE & SAFE. This file is enqueued AFTER main.css and only adjusts
 * typography (font-family, letter-spacing, line-height, transform) so that
 * Gurmukhi (Punjabi) text reads cleanly. It does NOT change layout, colors,
 * structure, queries, or spacing of sections.
 *
 * To revert Phase A completely: remove the enqueue block in functions.php
 * (and optionally delete this file). main.css is untouched.
 *
 * Fonts loaded via functions.php:
 *   - Noto Sans Gurmukhi  -> body, UI, titles (primary Punjabi face)
 *   - Noto Serif Gurmukhi -> reserved for large display headings only
 *
 * @package PunjabiTime
 */

:root {
	/* Punjabi-first stacks. Latin names kept as fallback so English/numbers
	   stay readable when mixed inline with Gurmukhi. */
	/* 2026-08-18 perf: the "Noto Sans Gurmukhi Fallback" family is a
	   metric-matched local-font face declared inline by
	   punjabitime_gurmukhi_fontface() — it makes the pre-swap fallback occupy
	   the same space as the webfont (CLS fix). */
	--pt-guru-sans: "Noto Sans Gurmukhi", "Noto Sans Gurmukhi Fallback", "Work Sans", "Segoe UI", Arial, sans-serif;
	--pt-guru-serif: "Noto Serif Gurmukhi", "Noto Sans Gurmukhi", "Noto Sans Gurmukhi Fallback", Georgia, serif;
}

/* -------------------------------------------------------------------------
 * 1. Base body text — readable Gurmukhi sans, comfortable line-height.
 * ---------------------------------------------------------------------- */
body {
	font-family: var(--pt-guru-sans);
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
 * 2. Brand / logo text and footer title.
 *    Keep it strong but use Gurmukhi-aware spacing (no negative tracking).
 * ---------------------------------------------------------------------- */
.pt-brand,
.pt-footer-title {
	font-family: var(--pt-guru-sans);
	letter-spacing: 0;
	line-height: 1.15;
}

/* -------------------------------------------------------------------------
 * 3. Navigation, tagline, kicker, meta, section heads, buttons.
 *    These are UI/label text. Keep them clean and readable. We relax the
 *    aggressive uppercase + wide tracking that hurts Gurmukhi legibility,
 *    while leaving short Latin labels (e.g. "View all") perfectly fine.
 * ---------------------------------------------------------------------- */
.pt-menu,
.pt-tagline,
.pt-kicker,
.pt-meta,
.pt-section__head h1,
.pt-section__head h2,
.pt-page-header h1,
.pt-section__head a,
.pt-button,
.pt-footer-links,
.pt-footer-bottom,
.pt-breaking,
.pt-empty,
.pt-trending-list time {
	font-family: var(--pt-guru-sans);
}

/* Gurmukhi does not have letter-case, and wide tracking pulls matras apart.
   Soften tracking and disable uppercasing so Punjabi labels read naturally.
   Latin labels remain clear at these gentler values. */
.pt-menu,
.pt-tagline,
.pt-kicker,
.pt-meta,
.pt-section__head h1,
.pt-section__head h2,
.pt-page-header h1,
.pt-section__head a,
.pt-trending-list time {
	text-transform: none;
	letter-spacing: 0.01em;
}

/* Section headings need a touch more height so Punjabi marks are not clipped. */
.pt-section__head h1,
.pt-section__head h2,
.pt-page-header h1 {
	line-height: 1.35;
}

/* Navigation links: comfortable Punjabi line-height. */
.pt-menu a {
	line-height: 1.4;
}

/* Meta row (category • date) — keep small but breathing. */
.pt-meta {
	line-height: 1.4;
	letter-spacing: 0.02em;
}

/* Breaking ticker label can stay uppercase (short Latin word "BREAKING"),
   but ticker headlines are Punjabi, so give them natural spacing. */
.pt-breaking__track a {
	letter-spacing: 0;
}

/* -------------------------------------------------------------------------
 * 4. Post / card / news-line / video titles.
 *    This is the most important fix: remove negative letter-spacing and
 *    tight leading that clip Gurmukhi matras, and switch to the Gurmukhi
 *    sans face for crisp, modern news headlines.
 * ---------------------------------------------------------------------- */
.pt-card__title,
.pt-news-line h3,
.pt-video-card h3,
.pt-trending-list a {
	font-family: var(--pt-guru-sans);
	letter-spacing: 0;            /* was -0.02em in main.css */
	line-height: 1.4;            /* was 1.08 / 1.2 — too tight for Gurmukhi */
}

/* Large lead headline: serif Gurmukhi for an elegant, but still modern,
   front-page feel. Generous-but-not-loose leading. */
.pt-card--lead .pt-card__title,
.pt-video-card--lead h3 {
	font-family: var(--pt-guru-serif);
	letter-spacing: 0;
	line-height: 1.3;
}

/* Mini cards (compact list) — keep tight but uncramped. */
.pt-card--mini .pt-card__title {
	line-height: 1.35;
}

/* -------------------------------------------------------------------------
 * 5. Article body content (single posts / fallback) and excerpts.
 *    Comfortable reading measure for long Gurmukhi paragraphs.
 * ---------------------------------------------------------------------- */
.pt-entry-content,
.pt-card__excerpt {
	font-family: var(--pt-guru-sans);
}

.pt-entry-content {
	line-height: 1.85;
}

.pt-entry-content h2,
.pt-entry-content h3,
.pt-entry-content h4 {
	font-family: var(--pt-guru-sans);
	letter-spacing: 0;
	line-height: 1.4;
}

.pt-card__excerpt {
	line-height: 1.65;
}

/* -------------------------------------------------------------------------
 * 6. Archive / search / page headers.
 * ---------------------------------------------------------------------- */
.pt-archive .pt-page-header h1,
.pt-page-header h1 {
	line-height: 1.4;
	letter-spacing: 0.01em;
}

/* -------------------------------------------------------------------------
 * 7. Newsletter heading (display) — keep elegant serif Gurmukhi, untight.
 * ---------------------------------------------------------------------- */
.pt-newsletter h2 {
	font-family: var(--pt-guru-serif);
	letter-spacing: 0;
	line-height: 1.25;
}

/* -------------------------------------------------------------------------
 * 8. Mobile readability — slightly looser leading on small screens so
 *    stacked Gurmukhi headlines and body text stay comfortable.
 * ---------------------------------------------------------------------- */
@media (max-width: 820px) {
	body {
		line-height: 1.75;
	}

	.pt-card__title,
	.pt-news-line h3,
	.pt-video-card h3 {
		line-height: 1.4;
	}

	.pt-card--lead .pt-card__title {
		line-height: 1.35;
	}

	.pt-entry-content {
		line-height: 1.8;
	}
}

@media (max-width: 480px) {
	.pt-card__excerpt {
		line-height: 1.7;
	}
}

/**
 * PunjabiTime News — FT-inspired header + mobile navigation system.
 *
 * ADDITIVE & SAFE. Styles the new header.php markup: desktop masthead (left
 * menu/search icons, centered wordmark, right Subscribe + Sign In), a reveal
 * search row, the category nav bar, a fixed mobile bottom nav, and a dark
 * left drawer with overlay. Loaded via the Novamira sandbox loader AFTER all
 * existing header CSS so it wins.
 *
 * Does NOT touch: the dark footer, the (removed) newsletter block, the cream
 * PAGE background (#FFF1E5), posts/pages/categories/menus/typography/AdSense/
 * settings, or the WordPress admin bar. The header itself stays light cream.
 *
 * Palette:
 *   --ptn-red       deep news red (accent / active)
 *   --ptn-teal      optional teal accent (drawer active alt)
 *   --ptn-header-bg light cream header
 *   --ptn-hairline  warm hairline separators
 *   --ptn-ink       strong ink
 *   --ptn-ink-soft  link ink
 *   --ptn-drawer-bg dark charcoal drawer (matches footer)
 *
 * TO REVERT: disable/delete the sandbox loader (pt-header-mobile-nav.php),
 * restore header.php from its backup, and optionally delete this file + the JS.
 */

:root {
	--ptn-red: #9e1b1b;
	--ptn-red-soft: rgba(158, 27, 27, 0.12);
	--ptn-teal: #1f8a8a;
	--ptn-header-bg: #fffaf4;
	--ptn-hairline: #e4ddd5;
	--ptn-hairline-strong: #d8cfc4;
	--ptn-ink: #1a1a1a;
	--ptn-ink-soft: #4c4546;
	--ptn-drawer-bg: #1f252e;
	--ptn-drawer-bg-2: #1a1f27;
	--ptn-drawer-ink: #c3c8d0;
	--ptn-drawer-head: #f4f1ec;
	--ptn-bottom-h: 60px;
}

/* ================================================================== *
 * DESKTOP MASTHEAD
 * Three-column grid: left icon cluster | centered wordmark | right CTAs.
 * Light cream header with a thin red top rule and hairline separators.
 * ================================================================== */
.pt-header--ft {
	background: var(--ptn-header-bg);
	border-bottom: 1px solid var(--ptn-hairline);
	box-shadow: inset 0 3px 0 0 var(--ptn-red);
}

.pt-header--ft .pt-masthead {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 26px 0 20px;
}

.pt-masthead__left {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-self: start;
}

.pt-masthead__right {
	display: flex;
	align-items: center;
	gap: 18px;
	justify-self: end;
}

/* Icon buttons (menu + search) */
.pt-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--ptn-hairline);
	border-radius: 2px;
	background: #fff;
	color: var(--ptn-ink);
	cursor: pointer;
	transition: border-color 150ms ease, color 150ms ease;
}

.pt-icon-btn:hover,
.pt-icon-btn:focus-visible {
	border-color: var(--ptn-red);
	color: var(--ptn-red);
}

/* Reuse the existing 3-bar markup for the menu icon */
.pt-header--ft .pt-menu-toggle {
	flex-direction: column;
	gap: 4px;
}

.pt-header--ft .pt-menu-toggle__bar {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
}

/* Centered wordmark — text unchanged, strong + clean */
.pt-header--ft .pt-brand-wrap {
	text-align: center;
	justify-self: center;
}

.pt-header--ft .pt-brand {
	color: var(--ptn-ink);
	letter-spacing: -0.045em;
}

.pt-header--ft .pt-brand:hover,
.pt-header--ft .pt-brand:focus-visible {
	color: var(--ptn-red);
}

.pt-header--ft .pt-tagline {
	margin-top: 9px;
	color: var(--pt-muted, #7e7576);
	letter-spacing: 0.14em;
}

/* Subscribe button + Sign In link */
.pt-subscribe-btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	background: var(--ptn-red);
	color: #fff;
	font-family: var(--pt-ui, Arial, sans-serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: 2px;
	transition: background-color 150ms ease;
}

.pt-subscribe-btn:hover,
.pt-subscribe-btn:focus-visible {
	background: #821616;
	color: #fff;
}

.pt-signin-link {
	font-family: var(--pt-ui, Arial, sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ptn-ink-soft);
	white-space: nowrap;
	transition: color 150ms ease;
}

.pt-signin-link:hover,
.pt-signin-link:focus-visible {
	color: var(--ptn-red);
}

/* ================================================================== *
 * REVEAL SEARCH ROW (hidden until search icon is clicked)
 * ================================================================== */
.pt-header-search-row {
	display: none;
	border-top: 1px solid var(--ptn-hairline);
	background: #fff;
}

.pt-header-search-row.is-open {
	display: block;
}

.pt-header--ft .pt-header-search {
	display: flex;
	align-items: center;
	max-width: var(--pt-max, 1280px);
	width: 100%;
	margin: 12px auto;
	border: 1px solid var(--ptn-hairline);
	border-radius: 2px;
	background: #fff;
	overflow: hidden;
}

.pt-header--ft .pt-header-search:focus-within {
	border-color: var(--ptn-red);
	box-shadow: 0 0 0 2px var(--ptn-red-soft);
}

.pt-header--ft .pt-header-search input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 11px 14px;
	font-family: var(--pt-ui, Arial, sans-serif);
	font-size: 14px;
	outline: none;
}

.pt-header--ft .pt-header-search button {
	border: 0;
	background: var(--ptn-ink);
	color: #fff;
	padding: 11px 16px;
	font-family: var(--pt-ui, Arial, sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.pt-header--ft .pt-header-search button:hover {
	background: var(--ptn-red);
}

/* ================================================================== *
 * CATEGORY NAV BAR
 * ================================================================== */
.pt-header--ft .pt-primary-nav {
	border-top: 1px solid var(--ptn-hairline);
	background: var(--ptn-header-bg);
}

.pt-header--ft .pt-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(16px, 2.2vw, 32px);
	font-family: var(--pt-ui, Arial, sans-serif);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

.pt-header--ft .pt-menu > li {
	position: relative;
}

.pt-header--ft .pt-menu a {
	display: block;
	padding: 14px 0;
	color: var(--ptn-ink-soft);
	transition: color 150ms ease;
}

.pt-header--ft .pt-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 9px;
	height: 2px;
	background: var(--ptn-red);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 170ms ease;
}

.pt-header--ft .pt-menu a:hover,
.pt-header--ft .pt-menu .current-menu-item > a {
	color: var(--ptn-red);
}

.pt-header--ft .pt-menu > li > a:hover::after,
.pt-header--ft .pt-menu .current-menu-item > a::after {
	transform: scaleX(1);
}

/* ================================================================== *
 * MOBILE BOTTOM NAV (Home / Search / Menu) — fixed, mobile/tablet only
 * ================================================================== */
.pt-bottom-nav {
	display: none;
}

.pt-drawer-overlay {
	display: none;
}

.pt-drawer {
	/* hidden by default off-canvas; shown only at mobile widths */
	display: none;
}

/* ================================================================== *
 * RESPONSIVE — mobile / tablet (<= 1024px)
 * ================================================================== */
@media (max-width: 1024px) {
	/* Masthead: hide desktop icon cluster + right CTAs; keep clean centered
	 * wordmark. Menu/Search/Home all live in the bottom nav instead. */
	.pt-header--ft .pt-masthead {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 6px;
		padding: 16px 0 14px;
	}

	.pt-masthead__left,
	.pt-masthead__right {
		display: none;
	}

	/* Hide the desktop category bar on mobile — the drawer carries it. */
	.pt-header--ft .pt-primary-nav {
		display: none;
	}

	/* The old body.pt-menu-open mechanism is not used on mobile anymore;
	 * ensure it can never force the desktop nav open on small screens. */
	body.pt-menu-open .pt-header--ft .pt-primary-nav {
		display: none;
	}

	/* ---- Fixed bottom navigation ---- */
	.pt-bottom-nav {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		position: fixed;
		inset: auto 0 0 0;
		z-index: 1000;
		height: var(--ptn-bottom-h);
		background: #fffdf9;
		border-top: 1px solid var(--ptn-hairline-strong);
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.pt-bottom-nav__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		background: transparent;
		border: 0;
		cursor: pointer;
		color: var(--ptn-ink-soft);
		font-family: var(--pt-ui, Arial, sans-serif);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		transition: color 150ms ease;
	}

	.pt-bottom-nav__item:hover,
	.pt-bottom-nav__item:focus-visible,
	.pt-bottom-nav__item:active {
		color: var(--ptn-red);
	}

	.pt-bottom-nav__item svg {
		display: block;
	}

	/* Keep page content clear of the fixed bar (footer included). */
	body {
		padding-bottom: calc(var(--ptn-bottom-h) + env(safe-area-inset-bottom, 0));
	}

	/* ---- Left drawer ---- */
	.pt-drawer-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1100;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 200ms ease, visibility 200ms ease;
	}

	.pt-drawer-overlay[hidden] {
		display: block; /* override the HTML hidden attr so we can animate */
	}

	body.pt-drawer-open .pt-drawer-overlay {
		opacity: 1;
		visibility: visible;
	}

	.pt-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 1200;
		width: min(82vw, 320px);
		background: var(--ptn-drawer-bg);
		color: var(--ptn-drawer-ink);
		transform: translateX(-100%);
		transition: transform 220ms ease;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-shadow: 2px 0 18px rgba(0, 0, 0, 0.35);
	}

	body.pt-drawer-open .pt-drawer {
		transform: translateX(0) !important;
	}

	.pt-drawer__head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
		padding: 20px 18px 16px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
		box-shadow: inset 0 3px 0 0 var(--ptn-red);
	}

	.pt-drawer__brand a {
		font-family: var(--pt-head, Georgia, serif);
		font-weight: 700;
		font-size: 26px;
		letter-spacing: -0.03em;
		color: var(--ptn-drawer-head);
	}

	.pt-drawer__brand p {
		margin: 6px 0 0;
		font-family: var(--pt-ui, Arial, sans-serif);
		font-size: 11.5px;
		letter-spacing: 0.04em;
		color: var(--ptn-drawer-ink);
	}

	.pt-drawer__close {
		flex: 0 0 auto;
		width: 38px;
		height: 38px;
		line-height: 1;
		font-size: 28px;
		color: var(--ptn-drawer-ink);
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 2px;
		cursor: pointer;
		transition: color 150ms ease, border-color 150ms ease;
	}

	.pt-drawer__close:hover,
	.pt-drawer__close:focus-visible {
		color: #fff;
		border-color: var(--ptn-red);
	}

	.pt-drawer__nav {
		padding: 14px 0 28px;
	}

	.pt-drawer__heading {
		margin: 16px 18px 8px;
		font-family: var(--pt-ui, Arial, sans-serif);
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: #7f8794;
	}

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

	.pt-drawer__nav a {
		display: block;
		padding: 12px 18px;
		font-family: var(--pt-ui, Arial, sans-serif);
		font-size: 15px;
		font-weight: 600;
		color: var(--ptn-drawer-ink);
		border-left: 3px solid transparent;
		transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
	}

	.pt-drawer__nav a:hover,
	.pt-drawer__nav a:focus-visible {
		color: #fff;
		background: rgba(255, 255, 255, 0.04);
		border-left-color: var(--ptn-red);
	}

	.pt-drawer__nav .is-active > a {
		color: #fff;
		border-left-color: var(--ptn-red);
		background: rgba(158, 27, 27, 0.16);
	}

	.pt-drawer__useful a {
		font-size: 14px;
		font-weight: 500;
		color: #9aa1ab;
	}
}

/* Small phones: keep the wordmark from overpowering the masthead. */
@media (max-width: 480px) {
	.pt-header--ft .pt-brand {
		font-size: 32px;
	}
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	.pt-drawer,
	.pt-drawer-overlay {
		transition: none;
	}
}

/* ===================================================================
 * BRAND LOCKUP (v0.2.8-clean) — SINGLE source-of-truth logo.
 *
 * One round Site Icon image (.pt-brand-logo, printed exactly once in
 * header.php inside .pt-brand-wrap) sits to the LEFT of the "PunjabiTime"
 * wordmark as one centred brand group, with the tagline on its own line
 * below. These base rules apply to BOTH desktop and mobile; the mobile
 * logo size and the right-aligned Original/EN pill are refined in
 * punjabitime-mobile-header.css (loaded after this file).
 *
 * There is no second logo element and no pseudo-element logo anywhere, so a
 * duplicate is structurally impossible. This replaces BOTH the v0.2.7
 * left-cluster reveal of .pt-mobile-logo and the earlier desktop-only
 * v0.2.8 brand block: the round logo is now shown on mobile too, inside the
 * same brand group, instead of a separate .pt-mobile-logo in the left icon
 * cluster.
 * =================================================================== */
.pt-header--ft .pt-brand-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 14px;
}

/* ONE brand link wraps the logo + wordmark (header.php). It is the flex
 * container that lays the round logo to the LEFT of the wordmark with the
 * lockup gap; the tagline stays a sibling below. Clicking anywhere on this
 * link (logo or text) opens the homepage. No underline / inherited colour. */
.pt-header--ft .pt-brand-link {
	display: inline-flex;
	align-items: center;
	column-gap: 14px;
	text-decoration: none;
	color: inherit;
}

.pt-header--ft .pt-brand-link:hover .pt-brand,
.pt-header--ft .pt-brand-link:focus-visible .pt-brand {
	color: var(--ptn-red);
}

.pt-header--ft .pt-brand-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	order: 1;
	line-height: 0;
}

.pt-header--ft .pt-brand-logo img {
	display: block;
	width: 60px;   /* desktop size; user spec 56–64px. Mobile overrides to 46px. */
	height: 60px;
	border-radius: 50%;
	object-fit: contain;
}

.pt-header--ft .pt-brand-wrap .pt-brand {
	order: 2;
}

.pt-header--ft .pt-brand-wrap .pt-tagline {
	order: 3;
	flex-basis: 100%;
	text-align: center;
}

/**
 * PunjabiTime News — Global warm cream (newspaper) background.
 *
 * ADDITIVE & SAFE. Applies ONLY a site-wide page background: a warm cream
 * "newspaper paper" base inspired by the Financial Times, with a barely-there
 * warm glow from the centre. Visible behind the whole site — not a hidden tint.
 *
 * It does NOT:
 *   - change header or footer design (they keep their own white surface)
 *   - change posts, pages, categories, menus, layout or typography
 *   - tint content text or images
 *
 * Removable: disable / delete the sandbox loader
 * (novamira-sandbox/pt-global-background.php) and, optionally, this file.
 */

/* ------------------------------------------------------------------ *
 * 1. Warm cream page base for the whole document.
 *    This overrides the theme's body background (--pt-paper: #f9f9f9),
 *    which was reading as near-white. Header (.pt-site-header) and footer
 *    (.pt-site-footer) keep their own white --pt-surface background, so
 *    their design is untouched.
 * ------------------------------------------------------------------ */
html,
body {
	background-color: #FFF1E5; /* Financial Times warm cream */
}

/*
 * The theme sets `body { background: var(--pt-paper); }` (shorthand), which
 * can win over our background-color above due to specificity/order. Re-assert
 * the cream as the body background explicitly so it always shows.
 */
body {
	background: #FFF1E5;
}

/* The main content region is transparent so the cream shows through cleanly. */
.pt-site-main {
	background-color: transparent;
}

/* ------------------------------------------------------------------ *
 * 2. Very soft warm glow from the centre, layered over the cream.
 *    Fixed full-viewport pseudo-element, behind all content, never
 *    intercepts clicks. Kept gentle so it reads as ambient warmth, not
 *    a yellow wash.
 * ------------------------------------------------------------------ */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(circle at center, rgba(255, 249, 145, 0.28) 0%, rgba(255, 249, 145, 0) 65%);
	opacity: 1;
	mix-blend-mode: multiply;
}

/* ------------------------------------------------------------------ *
 * 3. Protect readability & images.
 *    Never let the glow blend into media.
 * ------------------------------------------------------------------ */
img,
video,
.wp-post-image,
.pt-card__image img,
.pt-video-card__image img {
	mix-blend-mode: normal;
}

/**
 * PunjabiTime News — Header & Footer polish (FT-inspired, not a copy).
 *
 * ADDITIVE & SAFE. Refines ONLY the masthead/header and footer presentation:
 * spacing, thin newspaper separator lines, navigation readability, a tasteful
 * deep-red accent for hover/active, and a light cream footer.
 *
 * It does NOT:
 *   - change the warm cream page background (#FFF1E5) — left exactly as-is
 *   - change posts, pages, categories, menus, typography, or settings
 *   - redesign homepage cards or article layout
 *   - alter the mobile menu mechanism (body.pt-menu-open toggle is untouched)
 *
 * Accent: deep newspaper red #9b1c1c (hover/active only).
 *
 * Removable: disable / delete the sandbox loader
 * (novamira-sandbox/pt-header-footer-polish.php) and, optionally, this file.
 */

:root {
	--pt-accent-red: #9b1c1c;
	--pt-hairline: #e4ddd5;     /* warm hairline that suits the cream page */
	--pt-header-cream: #fffaf4; /* very light cream, almost white */
}

/* ================================================================== *
 * HEADER
 * ================================================================== */

/* Clean, very-light-cream header that sits gracefully on the cream page,
 * with a crisp hairline rule beneath — a serious-newspaper cue. */
.pt-site-header {
	background: var(--pt-header-cream);
	border-bottom: 1px solid var(--pt-hairline);
}

/* A thin accent rule at the very top of the header for a premium masthead
 * edge (kept subtle, deep red, full width). */
.pt-site-header {
	box-shadow: inset 0 3px 0 0 var(--pt-accent-red);
}

/* More balanced, premium masthead breathing room. */
.pt-masthead {
	padding-top: 30px;
	padding-bottom: 22px;
}

/* Brand wordmark: keep text unchanged, just let it breathe. */
.pt-brand {
	letter-spacing: -0.045em;
}

.pt-tagline {
	margin-top: 10px;
	color: var(--pt-muted, #7e7576);
}

/* Header search field: clean, light, with a tasteful red focus cue. */
.pt-header-search {
	background: #ffffff;
	border-color: var(--pt-hairline);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pt-header-search:focus-within {
	border-color: var(--pt-accent-red);
	box-shadow: 0 0 0 2px rgba(155, 28, 28, 0.12);
}

/* Keep the search button serious; warm to red on hover. */
.pt-header-search button:hover {
	background: var(--pt-accent-red);
}

/* Menu toggle (mobile icon): clean outline, red on hover/focus. */
.pt-menu-toggle {
	border-color: var(--pt-hairline);
	transition: border-color 160ms ease;
}

.pt-menu-toggle:hover,
.pt-menu-toggle:focus-visible {
	border-color: var(--pt-accent-red);
}

/* ---- Primary navigation ----
 * NOTE: we deliberately do NOT touch `.pt-primary-nav { display }` so the
 * mobile toggle (body.pt-menu-open .pt-primary-nav { display:block }) keeps
 * working exactly as before. */
.pt-primary-nav {
	border-top: 1px solid var(--pt-hairline);
}

.pt-menu {
	gap: clamp(18px, 2.4vw, 34px);
	letter-spacing: 0.09em;
}

.pt-menu a {
	padding: 15px 0;
	color: var(--pt-ink-soft, #4c4546);
	position: relative;
	transition: color 150ms ease;
}

/* Subtle red underline that grows on hover/active — a refined news cue. */
.pt-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 2px;
	background: var(--pt-accent-red);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 180ms ease;
}

.pt-menu a:hover,
.pt-menu .current-menu-item > a,
.pt-menu .current_page_item > a {
	color: var(--pt-accent-red);
}

.pt-menu a:hover::after,
.pt-menu .current-menu-item > a::after,
.pt-menu .current_page_item > a::after {
	transform: scaleX(1);
}

/* ================================================================== *
 * FOOTER
 * ================================================================== */

/* Light, warm, professional footer — NOT heavy black. Matches the cream
 * site with a clean top hairline plus a thin red accent line above it. */
.pt-site-footer {
	background: var(--pt-header-cream);
	border-top: 1px solid var(--pt-hairline);
	box-shadow: inset 0 3px 0 0 var(--pt-accent-red);
	padding-top: 46px;
	padding-bottom: 26px;
}

.pt-footer-grid {
	gap: 40px;
	padding-bottom: 6px;
}

/* Brand line reads as a latest-news publication. */
.pt-footer-title {
	letter-spacing: -0.04em;
	color: var(--pt-black, #000);
}

.pt-footer-brand p {
	max-width: 46ch;
	color: var(--pt-ink-soft, #4c4546);
}

/* Tidy, readable footer links with red hover. */
.pt-footer-links {
	gap: 12px 28px;
}

.pt-footer-links a {
	color: var(--pt-ink-soft, #4c4546);
	transition: color 150ms ease;
}

.pt-footer-links a:hover,
.pt-footer-links a:focus-visible {
	color: var(--pt-accent-red);
}

/* Bottom bar: clean separation, muted, with red link hover. */
.pt-footer-bottom {
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid var(--pt-hairline);
}

.pt-footer-bottom a:hover,
.pt-footer-bottom a:focus-visible {
	color: var(--pt-accent-red);
}

/* ================================================================== *
 * RESPONSIVE — header & footer only
 * ================================================================== */
@media (max-width: 820px) {
	.pt-masthead {
		padding-top: 18px;
		padding-bottom: 14px;
	}

	/* In the mobile dropdown, give items clean hairlines and red hover.
	 * Display is still controlled by the theme's toggle rule — untouched. */
	.pt-menu a {
		padding: 14px 0;
		border-bottom: 1px solid var(--pt-hairline);
	}

	/* The animated underline doesn't suit stacked mobile items; hide it. */
	.pt-menu a::after {
		display: none;
	}

	.pt-footer-grid {
		gap: 26px;
	}

	.pt-footer-bottom {
		gap: 10px;
	}
}

/**
 * PunjabiTime News — Footer polish (FT-inspired DARK utility footer, not a copy).
 *
 * ADDITIVE & SAFE. Styles ONLY the site footer (.pt-site-footer and children),
 * which uses the multi-column markup in footer.php. Loaded via the Novamira
 * sandbox loader AFTER main.css, typography, the global cream background, and
 * the existing header/footer polish stylesheet, so these footer rules win
 * without editing any of those files.
 *
 * It does NOT touch:
 *   - the header / masthead / primary navigation
 *   - the warm cream page background (#FFF1E5) — left exactly as-is
 *   - posts, pages, categories, menus, typography, AdSense, ads.txt, settings
 *   - homepage layout, post cards, or article layout
 *
 * Design: dark charcoal footer, soft light-grey body text, light column
 * headings, muted-grey links with a subtle hover, four utility columns, a
 * thin deep-red separator rule at the very top, and a clean bottom copyright
 * row with an independent-platform note. Generous, premium spacing.
 *
 * Palette:
 *   --ptf-bg        dark charcoal footer background
 *   --ptf-bg-2      slightly lighter charcoal (bottom row)
 *   --ptf-red       deep newspaper red (top rule)
 *   --ptf-heading   light heading colour
 *   --ptf-text      soft light grey body text
 *   --ptf-link      muted grey links
 *   --ptf-link-hover light hover
 *   --ptf-divider   subtle divider on dark
 *
 * TO REVERT: restore footer.php from its footer.php.bak-* backup, then disable
 * / delete the sandbox loader (novamira-sandbox/pt-footer-polish.php) and,
 * optionally, this file.
 */

:root {
	--ptf-bg: #1f252e;          /* dark charcoal */
	--ptf-bg-2: #1a1f27;        /* deeper charcoal for the bottom row */
	--ptf-red: #9e1b1b;         /* deep news red separator */
	--ptf-heading: #f4f1ec;     /* light cream/white headings */
	--ptf-text: #c3c8d0;        /* soft light grey */
	--ptf-link: #a7adb7;        /* muted grey links */
	--ptf-link-hover: #ffffff;  /* clean light hover */
	--ptf-divider: rgba(255, 255, 255, 0.10);
}

/* ================================================================== *
 * FOOTER SHELL
 * Dark charcoal area that begins after a thin deep-red separator line.
 * Generous, newspaper-grade vertical rhythm.
 * ================================================================== */
.pt-site-footer {
	background: var(--ptf-bg);
	border-top: 0;
	/* Thin deep-red separator at the very top of the footer. */
	box-shadow: inset 0 3px 0 0 var(--ptf-red);
	padding-top: 64px;
	padding-bottom: 0;
	color: var(--ptf-text);
}

/* Keep footer content aligned to the site content width. */
.pt-site-footer .pt-container {
	max-width: var(--pt-max, 1280px);
	margin-left: auto;
	margin-right: auto;
}

/* ================================================================== *
 * TOP GRID — brand on the left, four utility columns on the right
 * ================================================================== */
.pt-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
	gap: 48px;
	align-items: start;
	padding-bottom: 48px;
}

/* ---- Brand block ---- */
.pt-footer-brand {
	max-width: 320px;
}

.pt-footer-title {
	display: inline-block;
	font-family: var(--pt-head, Georgia, serif);
	font-weight: 700;
	font-size: clamp(28px, 3vw, 38px);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ptf-heading);
	transition: color 150ms ease;
}

.pt-footer-title:hover,
.pt-footer-title:focus-visible {
	color: #ffffff;
}

.pt-footer-brand p {
	margin: 14px 0 0;
	font-family: var(--pt-ui, Arial, sans-serif);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ptf-text);
}

/* ---- Columns wrapper ---- */
.pt-footer-nav {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.pt-footer-col__title {
	margin: 0 0 14px;
	font-family: var(--pt-ui, Arial, sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--ptf-heading);
}

.pt-footer-col__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pt-footer-col__links li {
	margin: 0 0 10px;
}

.pt-footer-col__links li:last-child {
	margin-bottom: 0;
}

.pt-footer-col__links a {
	font-family: var(--pt-ui, Arial, sans-serif);
	font-size: 14px;
	line-height: 1.4;
	color: var(--ptf-link);
	transition: color 150ms ease;
}

.pt-footer-col__links a:hover,
.pt-footer-col__links a:focus-visible {
	color: var(--ptf-link-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ================================================================== *
 * BOTTOM ROW — copyright + independent-platform note
 * Sits on a slightly deeper charcoal band with a subtle top divider.
 * ================================================================== */
.pt-footer-bottom {
	display: block;
	margin-top: 0;
	padding: 22px 0 28px;
	border-top: 1px solid var(--ptf-divider);
	background: transparent;
	font-family: var(--pt-ui, Arial, sans-serif);
}

.pt-footer-copy {
	margin: 0;
	font-size: 13px;
	color: var(--ptf-text);
}

.pt-footer-note {
	margin: 8px 0 0;
	max-width: 760px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ptf-link);
}

/* Make the deeper bottom band span full width while content stays aligned. */
.pt-site-footer {
	position: relative;
}

/* ================================================================== *
 * RESPONSIVE — footer only. Stack neatly; no overflow.
 * ================================================================== */
@media (max-width: 980px) {
	.pt-footer-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.pt-footer-brand {
		max-width: none;
	}
}

@media (max-width: 700px) {
	.pt-site-footer {
		padding-top: 48px;
	}

	.pt-footer-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 24px;
	}

	.pt-footer-grid {
		padding-bottom: 36px;
	}
}

@media (max-width: 420px) {
	.pt-footer-nav {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

/* ================================================================== *
 * MOBILE FOOTER CLEANUP (v0.2.8-clean)
 *
 * On phones the footer was too long because all four utility columns
 * stacked. Hide the two SECONDARY columns (News + More, tagged
 * .pt-footer-col--secondary in footer.php) at <= 700px, so the mobile
 * footer shows only: brand + tagline, About, Legal, and the copyright
 * row. Every required legal/trust link — About Us, Contact, Advertise,
 * Editorial Policy, Fact-Checking & Sources, Ownership / Funding,
 * Privacy Policy, Terms of Service, Cookie Policy (/cookie-policy-eu/),
 * Corrections Policy, Disclaimer — lives in the About + Legal columns,
 * which always remain visible, so nothing essential is lost.
 *
 * Desktop / tablet (> 700px) keep all four columns, so the wider footer
 * never looks empty or broken.
 *
 * Bottom-nav clearance is already handled globally by
 * punjabitime-header-mobile-nav.css (body padding-bottom = bottom-nav
 * height + safe-area), so the copyright text is never covered by the
 * fixed mobile bottom navigation.
 * ================================================================== */
@media (max-width: 700px) {
	.pt-site-footer .pt-footer-col--secondary {
		display: none;
	}
}

/**
 * PunjabiTime News — Header polish (FT-inspired clean newspaper masthead, not a copy).
 *
 * ADDITIVE & SAFE. Refines ONLY the public header: the breaking-news strip,
 * masthead balance/spacing, the search field, the menu toggle, the primary
 * navigation rule and link readability, and tasteful deep-red hover/active
 * accents. Loaded via the Novamira sandbox loader AFTER main.css, typography,
 * the global cream background, the footer polish, and the earlier header/footer
 * polish stylesheet — so these header rules win.
 *
 * It does NOT:
 *   - change the warm cream PAGE background (#FFF1E5) — left exactly as-is
 *   - touch the dark footer, the (removed) newsletter block, posts, pages,
 *     categories, menus, typography, AdSense, ads.txt, or settings
 *   - alter the mobile menu MECHANISM: the JS toggles body.pt-menu-open and the
 *     rule `body.pt-menu-open .pt-primary-nav { display:block }` is left intact.
 *     We never set `.pt-primary-nav { display }`, so open/close keeps working.
 *   - style or depend on the WordPress admin bar.
 *
 * Accent: deep newspaper red #9e1b1b (hover / active / focus only).
 *
 * TO REVERT: disable / delete the sandbox loader
 * (novamira-sandbox/pt-header-polish.php) and, optionally, this file.
 */

:root {
	--pth-red: #9e1b1b;            /* deep news red accent */
	--pth-red-soft: rgba(158, 27, 27, 0.12);
	--pth-header-bg: #fffaf4;      /* very light cream, almost white */
	--pth-hairline: #e4ddd5;       /* warm hairline that suits the cream page */
	--pth-ink: #1a1a1a;            /* strong masthead ink */
	--pth-ink-soft: #4c4546;       /* nav link ink */
}

/* ================================================================== *
 * BREAKING STRIP
 * Keep it serious and tight; let the red label cue the news brand
 * instead of the existing gold, for a more newspaper-like masthead edge.
 * ================================================================== */
.pt-breaking__inner {
	min-height: 36px;
	gap: 16px;
}

.pt-breaking__label {
	background: var(--pth-red);
	color: #ffffff;
	letter-spacing: 0.10em;
	padding: 4px 10px;
}

/* ================================================================== *
 * HEADER SHELL
 * Light, very-light-cream header sitting gracefully on the cream page,
 * with a thin deep-red rule at the very top and a crisp hairline below.
 * ================================================================== */
.pt-site-header {
	background: var(--pth-header-bg);
	border-bottom: 1px solid var(--pth-hairline);
	box-shadow: inset 0 3px 0 0 var(--pth-red);
}

/* ---- Masthead layout: balanced three-column grid, more breathing room ---- */
.pt-masthead {
	gap: 28px;
	padding: 30px 0 22px;
}

/* Strong, clean wordmark — text unchanged, just refined weight/tracking. */
.pt-brand,
.pt-site-header .pt-brand {
	color: var(--pth-ink);
	letter-spacing: -0.045em;
}

.pt-brand:hover,
.pt-brand:focus-visible {
	color: var(--pth-red);
}

.pt-tagline {
	margin-top: 10px;
	color: var(--pt-muted, #7e7576);
	letter-spacing: 0.14em;
}

/* ================================================================== *
 * HEADER SEARCH
 * Clean light field with a tasteful red focus cue; serious submit button.
 * ================================================================== */
.pt-header-search {
	background: #ffffff;
	border-color: var(--pth-hairline);
	border-radius: 2px;
	overflow: hidden;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pt-header-search:focus-within {
	border-color: var(--pth-red);
	box-shadow: 0 0 0 2px var(--pth-red-soft);
}

.pt-header-search input {
	padding: 10px 12px;
}

.pt-header-search button {
	background: var(--pth-ink);
	border-left-color: var(--pth-hairline);
	padding: 10px 14px;
	letter-spacing: 0.06em;
	transition: background-color 150ms ease;
}

.pt-header-search button:hover,
.pt-header-search button:focus-visible {
	background: var(--pth-red);
}

/* ================================================================== *
 * MENU TOGGLE (mobile icon)
 * Clean outline, red on hover/focus. Display behaviour left to the theme.
 * ================================================================== */
.pt-menu-toggle {
	border-color: var(--pth-hairline);
	border-radius: 2px;
	transition: border-color 150ms ease;
}

.pt-menu-toggle:hover,
.pt-menu-toggle:focus-visible {
	border-color: var(--pth-red);
}

.pt-menu-toggle:hover .pt-menu-toggle__bar {
	background: var(--pth-red);
}

/* ================================================================== *
 * PRIMARY NAVIGATION
 * Real news-site feel: comfortable spacing, readable links, a refined
 * deep-red underline that grows on hover/active.
 * NOTE: we deliberately do NOT set `.pt-primary-nav { display }`.
 * ================================================================== */
.pt-primary-nav {
	border-top: 1px solid var(--pth-hairline);
}

.pt-menu {
	gap: clamp(18px, 2.4vw, 34px);
	letter-spacing: 0.09em;
}

.pt-menu a {
	position: relative;
	padding: 15px 0;
	color: var(--pth-ink-soft);
	transition: color 150ms ease;
}

/* Subtle red underline that grows on hover/active — a refined news cue. */
.pt-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 9px;
	height: 2px;
	background: var(--pth-red);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 180ms ease;
}

.pt-menu a:hover,
.pt-menu .current-menu-item > a,
.pt-menu .current_page_item > a,
.pt-menu .current-menu-parent > a {
	color: var(--pth-red);
}

.pt-menu > li > a:hover::after,
.pt-menu .current-menu-item > a::after,
.pt-menu .current_page_item > a::after,
.pt-menu .current-menu-parent > a::after {
	transform: scaleX(1);
}

/* ================================================================== *
 * RESPONSIVE — header only. Keep the mobile menu functional & tidy.
 * The theme already shows the toggle and stacks the nav at <=820px; we
 * only refine spacing and the stacked link affordances here.
 * ================================================================== */
@media (max-width: 820px) {
	.pt-masthead {
		padding: 18px 0 14px;
		gap: 12px;
	}

	/* Stacked mobile items: clean hairlines + red hover. */
	.pt-menu a {
		padding: 14px 0;
		border-bottom: 1px solid var(--pth-hairline);
	}

	/* The animated underline doesn't suit stacked items; hide it on mobile. */
	.pt-menu > li > a::after {
		display: none;
	}
}

/**
 * PunjabiTime News — UI extras: scroll-to-top button + dark mode.
 *
 * ADDITIVE & SAFE. Loaded via the Novamira sandbox loader AFTER all other
 * stylesheets. Adds:
 *   1) A floating "Back to top" button (desktop bottom-right; on mobile it sits
 *      above the fixed bottom nav so it never covers Home/Search/Menu).
 *   2) A dark-mode toggle button (injected into the header actions + bottom nav
 *      by punjabitime-ui-extras.js) and a tasteful dark theme applied when
 *      <html> has the .pt-dark-mode class.
 *
 * Default = current LIGHT mode. Dark mode is opt-in and remembered in
 * localStorage. Does NOT tint images, does NOT touch AdSense (ins.adsbygoogle
 * / iframes are explicitly left alone), and does NOT change the light-mode
 * cream background (#FFF1E5) or the existing dark footer.
 *
 * TO REVERT: disable/delete the sandbox loader (pt-ui-extras.php) and,
 * optionally, this file + the JS.
 */

:root {
	--ptx-red: #9e1b1b;
	--ptx-charcoal: #1f252e;
}

/* ================================================================== *
 * 1) SCROLL-TO-TOP BUTTON
 * ================================================================== */
.pt-to-top {
	position: fixed;
	right: 20px;
	bottom: 24px;
	z-index: 990;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--ptx-charcoal);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 200ms ease, transform 200ms ease, background-color 150ms ease, visibility 200ms ease;
}

.pt-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pt-to-top:hover,
.pt-to-top:focus-visible {
	background: var(--ptx-red);
}

.pt-to-top svg {
	display: block;
}

/* On mobile/tablet, lift the button above the fixed bottom nav (var set in
 * the mobile-nav CSS = --ptn-bottom-h, fallback 60px) plus a gap. */
@media (max-width: 1024px) {
	.pt-to-top {
		right: 14px;
		bottom: calc(var(--ptn-bottom-h, 60px) + 14px + env(safe-area-inset-bottom, 0px));
		width: 42px;
		height: 42px;
	}
}

/* ================================================================== *
 * 2a) DARK-MODE TOGGLE BUTTON (light-mode appearance)
 * Injected by JS into .pt-masthead__right (desktop) and as a bottom-nav
 * item label is handled separately; here we style the header chip.
 * ================================================================== */
.pt-dark-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--pt-surface-line, #ded7d2);
	border-radius: 2px;
	background: #fff;
	color: #1a1a1a;
	font-family: var(--pt-ui, Arial, sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.pt-dark-toggle:hover,
.pt-dark-toggle:focus-visible {
	border-color: var(--ptx-red);
	color: var(--ptx-red);
}

.pt-dark-toggle svg {
	display: block;
}

/* Show the right icon/label per mode: .pt-dark-toggle has two children
 * (.pt-dt-dark shown in light mode, .pt-dt-light shown in dark mode). */
.pt-dark-toggle .pt-dt-light {
	display: none;
}

html.pt-dark-mode .pt-dark-toggle .pt-dt-dark {
	display: none;
}

html.pt-dark-mode .pt-dark-toggle .pt-dt-light {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Bottom-nav variant of the toggle (mobile) inherits .pt-bottom-nav__item. */
.pt-bottom-nav .pt-dark-toggle {
	height: auto;
	padding: 0;
	border: 0;
	background: transparent;
	flex-direction: column;
	gap: 3px;
	font-size: 11px;
	text-transform: uppercase;
}

/* ================================================================== *
 * 2b) DARK MODE THEME (applied when <html class="pt-dark-mode">)
 * Tasteful charcoal, not pure black. Scoped overrides of the theme's
 * CSS custom properties + key surfaces. Images & ads untouched.
 * ================================================================== */
/* Apply the dark page base to <html> (this reliably wins over the global
 * cream rule, which targets body), and make body transparent so the charcoal
 * shows through. */
html.pt-dark-mode {
	background: #141922 !important;
}

html.pt-dark-mode body {
	background: transparent !important;
	color: #d7dbe0;
}

/* Neutralise the global cream warm-glow overlay in dark mode. */
html.pt-dark-mode body::before {
	display: none !important;
}

/* Re-map the theme's design tokens for dark surfaces/text. These cascade
 * into most components that use var(--pt-*). */
html.pt-dark-mode {
	--pt-paper: #141922;
	--pt-paper-warm: #171c24;
	--pt-surface: #1f252e;
	--pt-surface-soft: #1a1f27;
	--pt-surface-line: #333b46;
	--pt-ink: #e8eaed;
	--pt-ink-soft: #b9bec6;
	--pt-muted: #8b929c;
	--pt-black: #f2f3f5;
}

/* Global background override stylesheet sets a cream bg on html/body with its
 * own selector; neutralise it ONLY in dark mode so the charcoal shows. */
html.pt-dark-mode {
	background-color: #141922 !important;
}

/* Generic text + links */
html.pt-dark-mode h1,
html.pt-dark-mode h2,
html.pt-dark-mode h3,
html.pt-dark-mode h4,
html.pt-dark-mode h5,
html.pt-dark-mode h6 {
	color: #f1f3f5;
}

html.pt-dark-mode a {
	color: #d7dbe0;
}

html.pt-dark-mode a:hover,
html.pt-dark-mode a:focus-visible {
	color: #e2655f; /* lightened red for contrast on dark */
}

/* ---- Header in dark mode (do not redesign; just recolour) ---- */
html.pt-dark-mode .pt-header--ft {
	background: #1b212b;
	border-bottom-color: #333b46;
}

html.pt-dark-mode .pt-header--ft .pt-brand,
html.pt-dark-mode .pt-header--ft .pt-brand-wrap .pt-brand {
	color: #f2f3f5;
}

html.pt-dark-mode .pt-tagline {
	color: #9aa1ab;
}

html.pt-dark-mode .pt-icon-btn {
	background: #232b35;
	border-color: #3a434f;
	color: #e8eaed;
}

html.pt-dark-mode .pt-icon-btn:hover,
html.pt-dark-mode .pt-icon-btn:focus-visible {
	border-color: #e2655f;
	color: #e2655f;
}

html.pt-dark-mode .pt-signin-link {
	color: #c3c8d0;
}

html.pt-dark-mode .pt-header-search-row {
	background: #1b212b;
	border-top-color: #333b46;
}

html.pt-dark-mode .pt-header--ft .pt-header-search {
	background: #232b35;
	border-color: #3a434f;
}

html.pt-dark-mode .pt-header--ft .pt-header-search input {
	color: #e8eaed;
}

html.pt-dark-mode .pt-header--ft .pt-primary-nav {
	background: #1b212b;
	border-top-color: #333b46;
}

html.pt-dark-mode .pt-header--ft .pt-menu a {
	color: #c3c8d0;
}

html.pt-dark-mode .pt-header--ft .pt-menu a:hover,
html.pt-dark-mode .pt-header--ft .pt-menu .current-menu-item > a {
	color: #e2655f;
}

/* ---- Breaking strip: already dark; keep readable ---- */
html.pt-dark-mode .pt-breaking {
	background: #0f131a;
}

/* ---- Cards / sections / common surfaces ---- */
html.pt-dark-mode .pt-card,
html.pt-dark-mode .pt-loop-card,
html.pt-dark-mode .pt-trending,
html.pt-dark-mode .pt-section,
html.pt-dark-mode .pt-newsletter__box,
html.pt-dark-mode .pt-feature,
html.pt-dark-mode article {
	background: #1f252e;
	border-color: #333b46;
}

html.pt-dark-mode .pt-kicker,
html.pt-dark-mode .pt-meta,
html.pt-dark-mode time {
	color: #9aa1ab;
}

/* Section heading underlines/borders soften on dark */
html.pt-dark-mode hr,
html.pt-dark-mode .pt-section__title,
html.pt-dark-mode .pt-divider {
	border-color: #333b46;
}

/* ---- Dark-mode toggle chip appearance in dark mode ---- */
html.pt-dark-mode .pt-dark-toggle {
	background: #232b35;
	border-color: #3a434f;
	color: #e8eaed;
}

html.pt-dark-mode .pt-dark-toggle:hover {
	border-color: #e2655f;
	color: #e2655f;
}

/* ---- Scroll-top button stays charcoal; nudge hover in dark ---- */
html.pt-dark-mode .pt-to-top {
	background: #2a323d;
}

html.pt-dark-mode .pt-to-top:hover {
	background: var(--ptx-red);
}

/* ---- Mobile bottom nav + drawer remain functional & themed in dark ---- */
html.pt-dark-mode .pt-bottom-nav {
	background: #1b212b;
	border-top-color: #333b46;
}

html.pt-dark-mode .pt-bottom-nav__item {
	color: #c3c8d0;
}

html.pt-dark-mode .pt-bottom-nav__item:hover,
html.pt-dark-mode .pt-bottom-nav__item:focus-visible {
	color: #e2655f;
}
/* Drawer is already dark charcoal in both modes — leave it as-is. */

/* ================================================================== *
 * PROTECTED: never tint images or AdSense
 * ================================================================== */
html.pt-dark-mode img,
html.pt-dark-mode picture,
html.pt-dark-mode video,
html.pt-dark-mode .adsbygoogle,
html.pt-dark-mode ins.adsbygoogle,
html.pt-dark-mode iframe {
	filter: none !important;
	background: transparent;
}

/* Smooth, subtle colour transition when toggling (respect reduced motion). */
@media (prefers-reduced-motion: no-preference) {
	html.pt-dark-mode body,
	html.pt-dark-mode .pt-header--ft,
	html.pt-dark-mode .pt-card,
	html.pt-dark-mode article {
		transition: background-color 200ms ease, color 200ms ease;
	}
}

/* ================================================================== *
 * 3) ORIGINAL / ENGLISH LANGUAGE TOGGLE (Phase 1, safe)
 * A small segmented control. “Original” = normal Punjabi site (default).
 * “English” opens a lightweight helper that points to the browser’s own
 * translate. Injected by JS into the masthead actions + the drawer.
 * ================================================================== */
.pt-lang-toggle {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--pt-surface-line, #ded7d2);
	border-radius: 2px;
	overflow: hidden;
	background: #fff;
}

.pt-lang-btn {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0 12px;
	height: 44px; /* WCAG 2.5.8 / mobile tap-target minimum */
	font-family: var(--pt-ui, Arial, sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #1a1a1a;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.pt-lang-btn + .pt-lang-btn {
	border-left: 1px solid var(--pt-surface-line, #ded7d2);
}

.pt-lang-btn:hover,
.pt-lang-btn:focus-visible {
	color: var(--ptx-red);
}

.pt-lang-btn.is-active {
	background: var(--ptx-red);
	color: #fff;
}

/* Drawer variant: full-width segmented control inside the dark drawer. */
.pt-lang-toggle--drawer {
	display: flex;
	margin: 4px 18px 8px;
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
}

.pt-lang-toggle--drawer .pt-lang-btn {
	flex: 1 1 50%;
	color: #c3c8d0;
}

.pt-lang-toggle--drawer .pt-lang-btn + .pt-lang-btn {
	border-left-color: rgba(255, 255, 255, 0.18);
}

.pt-lang-toggle--drawer .pt-lang-btn.is-active {
	background: var(--ptx-red);
	color: #fff;
}

/* Dark-mode appearance of the header language chip. */
html.pt-dark-mode .pt-lang-toggle {
	background: #232b35;
	border-color: #3a434f;
}

html.pt-dark-mode .pt-lang-btn {
	color: #e8eaed;
}

html.pt-dark-mode .pt-lang-btn + .pt-lang-btn {
	border-left-color: #3a434f;
}

/* ---- Language helper popover (browser-translate guidance) ---- */
.pt-lang-help {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.5);
}

.pt-lang-help__inner {
	position: relative;
	width: min(440px, 100%);
	background: #fff;
	color: #1a1a1a;
	border-radius: 6px;
	padding: 22px 22px 20px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
	font-family: var(--pt-ui, Arial, sans-serif);
}

.pt-lang-help__close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 34px;
	height: 34px;
	font-size: 24px;
	line-height: 1;
	border: 0;
	background: transparent;
	color: #7e7576;
	cursor: pointer;
}

.pt-lang-help__close:hover { color: var(--ptx-red); }

.pt-lang-help__title {
	margin: 0 0 8px;
	font-family: var(--pt-head, Georgia, serif);
	font-size: 22px;
	font-weight: 700;
}

.pt-lang-help__text {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: #4c4546;
}

.pt-lang-help__list {
	margin: 0 0 12px;
	padding-left: 18px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #1a1a1a;
}

.pt-lang-help__note {
	margin: 0;
	font-size: 12px;
	color: #7e7576;
}

html.pt-dark-mode .pt-lang-help__inner {
	background: #1f252e;
	color: #e8eaed;
}

html.pt-dark-mode .pt-lang-help__text,
html.pt-dark-mode .pt-lang-help__note { color: #b9bec6; }

html.pt-dark-mode .pt-lang-help__list { color: #e8eaed; }

/* Final polish: drawer no longer carries the language toggle. On mobile a
 * compact Original / English pill sits at the top-right of the masthead. */
.pt-lang-toggle--mobile {
	display: none;
}

@media (max-width: 1024px) {
	/* The masthead is a single-column centered grid on mobile. The pill is
	 * appended as the last masthead child, so it flows naturally below the
	 * wordmark + tagline as its own small centered row — no overlap. */
	.pt-lang-toggle--mobile {
		display: inline-flex;
		position: static;
		justify-self: center;
		margin: 2px auto 0;
	}

	.pt-lang-toggle--mobile .pt-lang-btn {
		padding: 4px 14px;
		min-height: 44px;
		font-size: 11px;
		line-height: 1.2;
	}
}

/* CookieYes: on mobile, lift ONLY the floating revisit icon above the fixed
 * bottom nav so it never covers Home / Contact / Dark / Menu. The consent
 * banner itself (.cky-consent-container) is NOT touched. */
@media (max-width: 1024px) {
	.cky-btn-revisit-wrapper {
		bottom: calc(var(--ptn-bottom-h, 60px) + 14px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* Safety net: never render a language toggle inside the drawer (covers any
 * cached JS that still injects it). */
.pt-drawer .pt-lang-toggle,
.pt-drawer__nav .pt-drawer__heading + .pt-lang-toggle,
.pt-drawer__nav .pt-lang-toggle {
	display: none !important;
}

/* Accessibility: high-visibility keyboard focus ring in dark mode (the
 * default outline is nearly invisible on the charcoal surfaces). */
html.pt-dark-mode a:focus-visible,
html.pt-dark-mode button:focus-visible,
html.pt-dark-mode input:focus-visible,
html.pt-dark-mode select:focus-visible,
html.pt-dark-mode textarea:focus-visible,
html.pt-dark-mode [tabindex]:focus-visible {
	outline: 2px solid #8ab4f8;
	outline-offset: 2px;
}

/**
 * PunjabiTime News — Phase 1 polish (additive, safe).
 *
 * Loaded via the Novamira sandbox loader AFTER all other stylesheets so it wins
 * without editing main.css. Scope:
 *   T3  Homepage layout stabilisation (consistent images, capped headlines,
 *       reduced blank space, hide empty category sections).
 *   T4  Single article page — centered, clean reading width.
 *   T5  Hide Opinion (homepage section + nav/drawer/footer links) for now.
 *   T6  Desktop 3-line menu opens the left charcoal drawer (CSS half; the JS
 *       already wires the click — this exposes the drawer on desktop too).
 *
 * Does NOT change posts, images, categories, menus, AdSense, the cream page
 * background, the dark footer design, or the active theme. Fully reversible:
 * disable / delete the sandbox loader (pt-phase1-polish.php) and this file.
 */

/* ================================================================== *
 * T5 — HIDE OPINION (links). Category is NOT deleted; only hidden.
 * Re-enable by deleting this block (and the homepage rule below).
 * Matches the primary nav, the drawer list, and the footer "More" link.
 * ================================================================== */
.pt-header--ft .pt-menu a[href*="/opinion"],
.pt-header--ft .pt-menu a[href*="/category/opinion"],
.pt-drawer__nav a[href*="/opinion"],
.pt-drawer__nav a[href*="/category/opinion"],
.pt-site-footer a[href*="/opinion"],
.pt-site-footer a[href*="/category/opinion"] {
	display: none !important;
}

/* Hide the menu list-item wrapper too (so spacing stays even). */
.pt-header--ft .pt-menu > li:has(> a[href*="opinion"]),
.pt-drawer__nav li:has(> a[href*="opinion"]),
.pt-site-footer li:has(> a[href*="opinion"]) {
	display: none !important;
}

/* ================================================================== *
 * T3 + T5 — HIDE EMPTY HOMEPAGE SECTIONS automatically.
 * Any homepage section that rendered a "No posts…" empty message is hidden.
 * When that category gets posts later, the .pt-empty disappears and the
 * section returns on its own. (Top Stories / Latest / Trending always have
 * content on a live site, so they are unaffected.)
 * ================================================================== */
.pt-home .pt-section:has(> .pt-container > .pt-empty),
.pt-home .pt-section:has(> .pt-container .pt-card-grid > .pt-empty),
.pt-home .pt-section:has(> .pt-container .pt-feature-grid > .pt-empty),
.pt-home .pt-opinion-section {
	display: none !important;
}

/* The Opinion homepage section is explicitly hidden for Phase 1 regardless of
 * :has() support (it currently has zero posts). Remove this line to re-enable. */
.pt-home .pt-opinion-section { display: none !important; }

/* Safety: if JS marks a section empty (fallback for browsers without :has()). */
.pt-home .pt-section.pt-is-empty { display: none !important; }

/* ================================================================== *
 * T3 — HOMEPAGE LAYOUT STABILISATION
 * ================================================================== */

/* Consistent image aspect ratios across every homepage card type so rows line
 * up. (main.css already sets 16/10; we re-assert + cover to avoid stretch.) */
.pt-home .pt-card__image img,
.pt-home .pt-video-card__image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Lead cards get a slightly wider cinematic ratio but stay bounded. */
.pt-home .pt-card--lead .pt-card__image img,
.pt-home .pt-top-grid__lead .pt-card__image img {
	aspect-ratio: 16 / 9;
}

/* Mini cards stay square (thumbnail list). */
.pt-home .pt-card--mini .pt-card__image img {
	aspect-ratio: 1 / 1;
}

/* Cap oversized headlines so a long title never blows a card out of shape. */
.pt-home .pt-card--lead .pt-card__title {
	font-size: clamp(26px, 2.8vw, 40px);
	line-height: 1.1;
}

.pt-home .pt-card__title {
	font-size: clamp(18px, 1.6vw, 24px);
	line-height: 1.14;
}

/* Clamp card titles + excerpts to keep card heights even (no runaway cards). */
.pt-home .pt-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pt-home .pt-card--lead .pt-card__title a {
	-webkit-line-clamp: 4;
}

.pt-home .pt-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 16px;
	line-height: 1.5;
}

/* Make the four-up grids stretch evenly so short cards don’t leave gaps. */
.pt-home .pt-card-grid {
	align-items: stretch;
}

.pt-home .pt-card-grid .pt-card {
	display: flex;
	flex-direction: column;
}

.pt-home .pt-card-grid .pt-card .pt-card__body {
	flex: 1 1 auto;
}

/* Reduce excess vertical blank space between sections. */
.pt-home .pt-section {
	padding: 30px 0;
}

.pt-home .pt-section:first-child {
	padding-top: 24px;
}

/* Feature section: keep the lead from dominating; tighten the side list. */
.pt-home .pt-feature-grid {
	grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
	gap: 28px;
}

.pt-home .pt-feature-grid__list {
	gap: 14px;
}

/* Trending: even columns, no stray empty cells. */
.pt-home .pt-trending-list {
	gap: 18px 20px;
}

/* Tablet: make the four-up grids two-up and keep ratios tidy. */
@media (max-width: 1100px) {
	.pt-home .pt-card-grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile: single column, comfortable spacing, controlled headline sizes. */
@media (max-width: 820px) {
	.pt-home .pt-section {
		padding: 22px 0;
	}

	.pt-home .pt-card--lead .pt-card__title {
		font-size: 26px;
	}

	.pt-home .pt-card__title {
		font-size: 21px;
	}

	.pt-home .pt-feature-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* ================================================================== *
 * T4 — SINGLE ARTICLE PAGE (uses index.php .pt-single-fallback)
 * Centered, clean reading width, sized + centered featured image.
 * ================================================================== */
body.single .pt-archive .pt-container {
	max-width: 760px;
}

body.single .pt-page-header {
	max-width: 760px;
	margin-inline: auto;
	text-align: left;
}

body.single .pt-page-header h1 {
	font-family: var(--pt-head, Georgia, serif);
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.14;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* Override the loop grid on single posts: one centered column. */
body.single .pt-loop-grid {
	display: block;
	max-width: 760px;
	margin-inline: auto;
}

body.single .pt-single-fallback {
	max-width: 760px;
	margin-inline: auto;
}

/* Featured image: centered, sized, never stretched. */
body.single .pt-single-fallback__image {
	margin: 0 auto 22px;
}

body.single .pt-single-fallback__image img {
	width: 100%;
	max-height: 460px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 3px;
}

/* Meta row under the title. */
body.single .pt-single-fallback .pt-meta {
	margin: 4px 0 18px;
}

/* Readable body: comfortable measure + paragraph rhythm. */
body.single .pt-entry-content {
	font-family: var(--pt-body, Georgia, serif);
	font-size: 19px;
	line-height: 1.75;
	color: var(--pt-ink, #111);
}

body.single .pt-entry-content > * {
	max-width: 100%;
}

body.single .pt-entry-content p,
body.single .pt-entry-content ul,
body.single .pt-entry-content ol,
body.single .pt-entry-content blockquote {
	margin: 0 0 1.3em;
}

body.single .pt-entry-content h2 {
	margin: 1.6em 0 0.5em;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.2;
}

body.single .pt-entry-content h3 {
	margin: 1.4em 0 0.45em;
	font-size: clamp(20px, 2vw, 25px);
	line-height: 1.25;
}

body.single .pt-entry-content img {
	margin: 1.2em auto;
	border-radius: 3px;
}

body.single .pt-entry-content figure {
	margin: 1.4em 0;
}

body.single .pt-entry-content blockquote {
	padding-left: 18px;
	border-left: 3px solid var(--pt-gold, #d4af37);
	color: var(--pt-ink-soft, #4c4546);
	font-style: italic;
}

@media (max-width: 820px) {
	body.single .pt-archive .pt-container,
	body.single .pt-loop-grid,
	body.single .pt-single-fallback,
	body.single .pt-page-header {
		max-width: 100%;
	}

	body.single .pt-entry-content {
		font-size: 18px;
	}
}

/* ================================================================== *
 * T6 — DESKTOP DRAWER (>= 1025px)
 * The drawer/overlay markup + JS already exist; the mobile-nav CSS only
 * reveals them <=1024px. Here we expose the SAME charcoal drawer on desktop
 * when the 3-line menu button is clicked (body.pt-drawer-open). The desktop
 * primary nav bar and search are untouched.
 * ================================================================== */
@media (min-width: 1025px) {
	/* Overlay behind the drawer, dims the page. */
	.pt-drawer-overlay {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1100;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 200ms ease, visibility 200ms ease;
	}

	.pt-drawer-overlay[hidden] {
		display: block;
	}

	body.pt-drawer-open .pt-drawer-overlay {
		opacity: 1;
		visibility: visible;
	}

	/* The left charcoal drawer (matches mobile + footer). */
	.pt-drawer {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 1200;
		width: min(380px, 90vw);
		background: var(--ptn-drawer-bg, #1f252e);
		color: var(--ptn-drawer-ink, #c3c8d0);
		transform: translateX(-100%);
		transition: transform 220ms ease;
		overflow-y: auto;
		box-shadow: 2px 0 22px rgba(0, 0, 0, 0.35);
	}

	body.pt-drawer-open .pt-drawer {
		transform: translateX(0);
	}

	/* Lock background scroll on desktop while the drawer is open. */
	body.pt-drawer-open {
		overflow: hidden;
	}

	/* Drawer internals (mirror the mobile styling so it looks identical). */
	.pt-drawer__head {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
		padding: 22px 20px 18px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
		box-shadow: inset 0 3px 0 0 var(--ptn-red, #9e1b1b);
	}

	.pt-drawer__brand a {
		font-family: var(--pt-head, Georgia, serif);
		font-weight: 700;
		font-size: 28px;
		letter-spacing: -0.03em;
		color: var(--ptn-drawer-head, #f4f1ec);
	}

	.pt-drawer__brand p {
		margin: 6px 0 0;
		font-family: var(--pt-ui, Arial, sans-serif);
		font-size: 12px;
		letter-spacing: 0.04em;
		color: var(--ptn-drawer-ink, #c3c8d0);
	}

	.pt-drawer__close {
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		line-height: 1;
		font-size: 28px;
		color: var(--ptn-drawer-ink, #c3c8d0);
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.18);
		border-radius: 2px;
		cursor: pointer;
		transition: color 150ms ease, border-color 150ms ease;
	}

	.pt-drawer__close:hover,
	.pt-drawer__close:focus-visible {
		color: #fff;
		border-color: var(--ptn-red, #9e1b1b);
	}

	.pt-drawer__nav {
		padding: 14px 0 28px;
	}

	.pt-drawer__heading {
		margin: 16px 20px 8px;
		font-family: var(--pt-ui, Arial, sans-serif);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: #7f8794;
	}

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

	.pt-drawer__nav a {
		display: block;
		padding: 12px 20px;
		font-family: var(--pt-ui, Arial, sans-serif);
		font-size: 15px;
		font-weight: 600;
		color: var(--ptn-drawer-ink, #c3c8d0);
		border-left: 3px solid transparent;
		transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
	}

	.pt-drawer__nav a:hover,
	.pt-drawer__nav a:focus-visible {
		color: #fff;
		background: rgba(255, 255, 255, 0.04);
		border-left-color: var(--ptn-red, #9e1b1b);
	}

	.pt-drawer__nav .is-active > a {
		color: #fff;
		border-left-color: var(--ptn-red, #9e1b1b);
		background: rgba(158, 27, 27, 0.16);
	}

	.pt-drawer__useful a {
		font-size: 14px;
		font-weight: 500;
		color: #9aa1ab;
	}

	/* Make sure the desktop 3-line menu button is clearly visible/clickable. */
	.pt-header--ft .pt-masthead__left .pt-menu-toggle {
		display: inline-flex;
	}
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.pt-drawer,
	.pt-drawer-overlay {
		transition: none;
	}
}

/**
 * PunjabiTime News — Phase 1 FOLLOW-UP polish (additive, safe).
 *
 * Loaded via the Novamira sandbox loader AFTER punjabitime-phase1-polish.css
 * (priority 95) so these refinements win without editing main.css or any
 * template. Scope is purely visual:
 *   T2  Homepage: cap oversized images, make category sections look balanced
 *       and professional when they have only 1 or 2 posts, reduce blank space.
 *   T3  Single article: tighten featured-image height + spacing rhythm.
 *   T1  Belt-and-braces hide of any Google/GTranslate visual chrome.
 *
 * Changes NO posts, images, categories, menus, settings, AdSense, ads.txt,
 * the cream background, or the dark footer. Fully reversible: disable/delete
 * the sandbox loader (pt-phase1-followup.php) and this file.
 */

/* ================================================================== *
 * T1 — keep all Google Translate chrome out of the layout (safety net).
 * ================================================================== */
.pt-gt-hidden,
#google_translate_element,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget,
.gt_float_switcher,
.gtranslate_wrapper .switcher {
	display: none !important;
}
body { top: 0 !important; }

/* ================================================================== *
 * T2 — HOMEPAGE IMAGE SIZE CONTROL
 * Hard caps so no image can ever take half the page. Lead is the only
 * intentionally larger image and it stays bounded.
 * ================================================================== */
.pt-home .pt-card__image,
.pt-home .pt-video-card__image {
	overflow: hidden;
	border-radius: 3px;
}

.pt-home .pt-card--standard .pt-card__image img,
.pt-home .pt-grid-section .pt-card__image img {
	aspect-ratio: 16 / 10;
	max-height: 220px;
	width: 100%;
	object-fit: cover;
}

/* Lead images: bounded cinematic banner, never half the screen. */
.pt-home .pt-top-grid__lead .pt-card__image img,
.pt-home .pt-feature-grid__main .pt-card__image img,
.pt-home .pt-card--lead .pt-card__image img {
	aspect-ratio: 16 / 9;
	max-height: 360px;
	width: 100%;
	object-fit: cover;
}

@media (max-width: 820px) {
	.pt-home .pt-top-grid__lead .pt-card__image img,
	.pt-home .pt-feature-grid__main .pt-card__image img,
	.pt-home .pt-card--lead .pt-card__image img {
		max-height: 250px;
	}
	.pt-home .pt-card--standard .pt-card__image img,
	.pt-home .pt-grid-section .pt-card__image img {
		max-height: 240px;
	}
}

/* ================================================================== *
 * T2 — BALANCED SECTIONS WHEN A CATEGORY HAS ONLY 1 OR 2 POSTS
 * ================================================================== */

/* --- 4-up card grids (Latest News, World, Politics, Crime, Entertainment) ---
 * When the grid has only 1 or 2 cards, stop them stretching across the whole
 * row. Pack them to the left in compact, consistent widths. */
.pt-home .pt-card-grid--four {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
	justify-content: start;
}

/* Exactly one card -> single compact card (not a full-width giant). */
.pt-home .pt-card-grid--four:has(> .pt-card:only-child) {
	grid-template-columns: minmax(0, 320px);
}

/* Exactly two cards -> two balanced compact cards, left aligned. */
.pt-home .pt-card-grid--four:has(> .pt-card:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 320px));
}

/* Exactly three cards -> three even columns. */
.pt-home .pt-card-grid--four:has(> .pt-card:nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --- Feature sections (Punjab, India, NRI, Sports): lead + side list ---
 * The lead and the side list are fed by the SAME query, so a 1-post category
 * fills the lead and leaves the side list empty (big blank right column).
 * When the list is empty, collapse to a single bounded lead card. */
.pt-home .pt-feature-grid:has(> .pt-feature-grid__list:empty),
.pt-home .pt-feature-grid:has(> .pt-feature-grid__list:not(:has(.pt-news-line))) {
	grid-template-columns: minmax(0, 640px);
}

.pt-home .pt-feature-grid:has(> .pt-feature-grid__list:empty) .pt-feature-grid__list,
.pt-home .pt-feature-grid:has(> .pt-feature-grid__list:not(:has(.pt-news-line))) .pt-feature-grid__list {
	display: none;
}

/* Keep the lead readable, never edge-to-edge huge, when it stands alone. */
.pt-home .pt-feature-grid:has(> .pt-feature-grid__list:empty) .pt-feature-grid__main .pt-card__image img {
	max-height: 320px;
}

/* Tablet: 4-up becomes 2-up; honour the 1/2 card caps too. */
@media (max-width: 1100px) {
	.pt-home .pt-card-grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pt-home .pt-card-grid--four:has(> .pt-card:only-child) {
		grid-template-columns: minmax(0, 320px);
	}
}

/* Mobile: everything single column, tidy. */
@media (max-width: 820px) {
	.pt-home .pt-card-grid--four,
	.pt-home .pt-card-grid--four:has(> .pt-card:only-child),
	.pt-home .pt-card-grid--four:has(> .pt-card:nth-child(2):last-child),
	.pt-home .pt-card-grid--four:has(> .pt-card:nth-child(3):last-child),
	.pt-home .pt-feature-grid:has(> .pt-feature-grid__list:empty) {
		grid-template-columns: 1fr;
	}
}

/* Headline sizing already capped in phase1-polish; nudge feature lead down a
 * touch on very wide screens so it reads as news, not a poster. */
@media (min-width: 1400px) {
	.pt-home .pt-feature-grid__main .pt-card__title {
		font-size: clamp(24px, 2vw, 32px);
	}
}

/* ================================================================== *
 * T3 — SINGLE ARTICLE FINE-TUNE (on top of phase1-polish T4)
 * ================================================================== */
body.single .pt-single-fallback__image img {
	max-height: 420px;
	object-fit: cover;
}

/* A little more breathing room between title, meta and body. */
body.single .pt-page-header h1 {
	margin-bottom: 10px;
}

body.single .pt-entry-content > :first-child {
	margin-top: 0;
}

/* Center any standalone images/figures in the body. */
body.single .pt-entry-content img,
body.single .pt-entry-content figure {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/**
 * PunjabiTime News — Phase 1 FINAL homepage hard polish (additive, safe).
 *
 * Loaded via the Novamira sandbox loader AFTER every other stylesheet
 * (priority 96, i.e. after main, ui-extras, phase1-polish=90, followup=95) so
 * these decisive layout caps win without editing main.css or any template.
 *
 * Goal: a stable, balanced, compact, professional latest-news homepage.
 *   - Hard caps on every homepage image height (no half-page images).
 *   - Top Stories rebalanced: lead larger but bounded; clean secondary align.
 *   - Category sections look right with 1 / 2 / 3 / 4+ posts (no blank space).
 *   - Consistent section spacing; capped headline sizes; empty/Opinion hidden.
 *   - Cream FT background + dark mode preserved (no hardcoded colours here).
 *
 * Changes NO posts, images, categories, menus, settings, AdSense, ads.txt,
 * the cream background, or the dark footer. Fully reversible: disable/delete
 * the sandbox loader (pt-phase1-final.php) and this file.
 */

/* ================================================================== *
 * 1) GLOBAL HOMEPAGE IMAGE SIZE CONTROL — hard caps so nothing is huge.
 * ================================================================== */
.pt-home .pt-card__image,
.pt-home .pt-video-card__image {
	overflow: hidden;
	border-radius: 3px;
	margin-bottom: 12px;
}

/* Standard / grid / feature-list cards: compact, consistent 16:10, capped. */
.pt-home .pt-card--standard .pt-card__image img,
.pt-home .pt-grid-section .pt-card__image img,
.pt-home .pt-card-grid .pt-card__image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	max-height: 190px;
	object-fit: cover;
}

/* Lead images (Top Stories lead + feature lead): larger but firmly bounded. */
.pt-home .pt-top-grid__lead .pt-card__image img,
.pt-home .pt-feature-grid__main .pt-card__image img,
.pt-home .pt-card--lead .pt-card__image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 300px;
	object-fit: cover;
}

/* Video lead. */
.pt-home .pt-video-grid__main .pt-video-card__image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 300px;
	object-fit: cover;
}

/* ================================================================== *
 * 2) TOP STORIES — balanced, professional, lead bounded.
 * ================================================================== */
.pt-home .pt-top-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.95fr) minmax(220px, 0.75fr);
	gap: 26px;
	align-items: start;
}

/* Lead headline: prominent but never poster-sized (main.css had up to 52px). */
.pt-home .pt-top-grid__lead .pt-card__title,
.pt-home .pt-card--lead .pt-card__title {
	font-size: clamp(23px, 2.3vw, 34px);
	line-height: 1.12;
}

.pt-home .pt-top-grid__lead .pt-card__excerpt,
.pt-home .pt-card--lead .pt-card__excerpt {
	font-size: 15px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Secondary (side) cards align cleanly and stay compact. */
.pt-home .pt-top-grid__side .pt-card__title {
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.18;
}

.pt-home .pt-top-grid__side .pt-card__excerpt {
	display: none;
}

/* The text "More top stories" list stays tight. */
.pt-home .pt-top-grid__list {
	gap: 12px;
}

.pt-home .pt-top-grid__list .pt-news-line h3 {
	font-size: 15px;
	line-height: 1.25;
}

/* ================================================================== *
 * 3) HEADLINE CAPS + EVEN CARD HEIGHTS everywhere on the homepage.
 * ================================================================== */
.pt-home .pt-card__title {
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.18;
}

.pt-home .pt-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pt-home .pt-card__excerpt {
	font-size: 14px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pt-home .pt-card-grid {
	align-items: stretch;
}

.pt-home .pt-card-grid .pt-card {
	display: flex;
	flex-direction: column;
}

.pt-home .pt-card-grid .pt-card .pt-card__body {
	flex: 1 1 auto;
}

/* ================================================================== *
 * 4) SPARSE SECTIONS — look good with 1 / 2 / 3 posts (no blank space).
 * ================================================================== */

/* --- 4-up grids (Latest, World, Politics, Crime, Entertainment) --- */
.pt-home .pt-card-grid--four {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	justify-content: start;
}

/* 1 card -> one compact card, left aligned (not a stretched giant). */
.pt-home .pt-card-grid--four:has(> .pt-card:only-child) {
	grid-template-columns: minmax(0, 300px);
}

/* 2 cards -> two balanced compact cards. */
.pt-home .pt-card-grid--four:has(> .pt-card:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 300px));
}

/* 3 cards -> three even columns. */
.pt-home .pt-card-grid--four:has(> .pt-card:nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --- Feature sections (Punjab, India, NRI, Sports) lead + side list ---
 * When the side list has no news lines (only 1 post in the category), drop the
 * empty column and show a single bounded lead card instead of a half-page block. */
.pt-home .pt-feature-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
	gap: 26px;
	align-items: start;
}

.pt-home .pt-feature-grid:has(> .pt-feature-grid__list:empty),
.pt-home .pt-feature-grid:not(:has(.pt-feature-grid__list .pt-news-line)) {
	grid-template-columns: minmax(0, 600px);
}

.pt-home .pt-feature-grid:has(> .pt-feature-grid__list:empty) .pt-feature-grid__list,
.pt-home .pt-feature-grid:not(:has(.pt-feature-grid__list .pt-news-line)) .pt-feature-grid__list {
	display: none;
}

.pt-home .pt-feature-grid:not(:has(.pt-feature-grid__list .pt-news-line)) .pt-feature-grid__main .pt-card__image img {
	max-height: 280px;
}

/* Feature side list tight. */
.pt-home .pt-feature-grid__list {
	gap: 14px;
}

.pt-home .pt-feature-grid__list .pt-news-line h3 {
	font-size: 15px;
	line-height: 1.25;
}

/* ================================================================== *
 * 5) CONSISTENT SECTION SPACING (compact, even rhythm).
 * ================================================================== */
.pt-home .pt-section {
	padding: 26px 0;
}

.pt-home .pt-section:first-child {
	padding-top: 20px;
}

.pt-home .pt-section__head {
	margin-bottom: 16px;
}

/* Trending list compact. */
.pt-home .pt-trending-list {
	gap: 14px 20px;
}

/* ================================================================== *
 * 6) Keep empty sections + Opinion hidden (reassert; harmless duplicate).
 * ================================================================== */
.pt-home .pt-section:has(> .pt-container > .pt-empty),
.pt-home .pt-section:has(> .pt-container .pt-card-grid > .pt-empty),
.pt-home .pt-section:has(> .pt-container .pt-feature-grid > .pt-empty),
.pt-home .pt-opinion-section,
.pt-home .pt-section.pt-is-empty {
	display: none !important;
}

/* ================================================================== *
 * 7) RESPONSIVE — tablet + mobile stay clean and not oversized.
 * ================================================================== */
@media (max-width: 1100px) {
	.pt-home .pt-top-grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
	}
	.pt-home .pt-card-grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pt-home .pt-card-grid--four:has(> .pt-card:only-child) {
		grid-template-columns: minmax(0, 300px);
	}
}

@media (max-width: 820px) {
	.pt-home .pt-section {
		padding: 20px 0;
	}
	.pt-home .pt-top-grid,
	.pt-home .pt-feature-grid,
	.pt-home .pt-feature-grid:has(> .pt-feature-grid__list:empty),
	.pt-home .pt-card-grid--four,
	.pt-home .pt-card-grid--four:has(> .pt-card:only-child),
	.pt-home .pt-card-grid--four:has(> .pt-card:nth-child(2):last-child),
	.pt-home .pt-card-grid--four:has(> .pt-card:nth-child(3):last-child) {
		grid-template-columns: 1fr;
	}

	.pt-home .pt-top-grid__lead .pt-card__title,
	.pt-home .pt-card--lead .pt-card__title {
		font-size: 23px;
	}

	.pt-home .pt-card__title {
		font-size: 19px;
	}

	/* On mobile, lead + standard images a touch shorter for a tidy scroll. */
	.pt-home .pt-top-grid__lead .pt-card__image img,
	.pt-home .pt-feature-grid__main .pt-card__image img,
	.pt-home .pt-card--lead .pt-card__image img,
	.pt-home .pt-video-grid__main .pt-video-card__image img {
		max-height: 240px;
	}

	.pt-home .pt-card--standard .pt-card__image img,
	.pt-home .pt-grid-section .pt-card__image img,
	.pt-home .pt-card-grid .pt-card__image img {
		max-height: 220px;
	}

	/* Show side-card excerpts again on mobile single column for context. */
	.pt-home .pt-top-grid__side .pt-card__excerpt {
		display: -webkit-box;
	}
}

/**
 * PunjabiTime News — Breaking ticker (moved below the category menu) styling.
 *
 * Additive & safe, loaded via the Novamira sandbox loader AFTER all other CSS.
 * Pairs with punjabitime-breaking-move.js, which moves the existing
 * .pt-breaking element to directly below .pt-primary-nav and injects the
 * red/green blinking dot indicator inside the BREAKING label.
 *
 * Provides:
 *   - clean modern look in light + dark mode,
 *   - subtle (non-annoying) red + green blinking dots near "BREAKING",
 *   - readable ticker, lightweight CSS-only animation,
 *   - mobile-friendly height, does not cover content,
 *   - no conflict with the WP admin bar (ticker is in normal flow, not fixed).
 *
 * Changes NO ticker content, posts, settings, or AdSense. Reversible: disable
 * the loader (pt-phase1-final.php) / delete this file.
 */

/* The ticker now lives below the menu; give it a subtle top/bottom hairline so
 * it reads as its own band, in normal document flow (admin-bar safe). */
.pt-breaking.pt-breaking--belowmenu {
	position: relative;
	z-index: 5;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Keep it readable + compact. */
.pt-breaking--belowmenu .pt-breaking__inner {
	min-height: 36px;
	gap: 12px;
}

.pt-breaking--belowmenu .pt-breaking__label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* ---- Blinking red/green dot indicator ---- */
.pt-breaking__dots {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.pt-breaking__dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	line-height: 0;
}

.pt-breaking__dot--red {
	background: #e0322f;
	box-shadow: 0 0 0 0 rgba(224, 50, 47, 0.55);
	animation: pt-breaking-blink 1.8s ease-in-out infinite;
}

.pt-breaking__dot--green {
	background: #21b34a;
	box-shadow: 0 0 0 0 rgba(33, 179, 74, 0.55);
	/* Offset so the two dots alternate gently rather than pulse in unison. */
	animation: pt-breaking-blink 1.8s ease-in-out infinite;
	animation-delay: 0.9s;
}

@keyframes pt-breaking-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}

/* Respect reduced-motion: no blinking, just steady dots. */
@media (prefers-reduced-motion: reduce) {
	.pt-breaking__dot--red,
	.pt-breaking__dot--green {
		animation: none;
		opacity: 1;
	}
}

/* ---- Dark mode: keep the band crisp and legible ---- */
html.pt-dark-mode .pt-breaking.pt-breaking--belowmenu {
	background: #14181e;
	border-top-color: rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html.pt-dark-mode .pt-breaking--belowmenu .pt-breaking__track a {
	color: #e8eaed;
}

html.pt-dark-mode .pt-breaking--belowmenu .pt-breaking__track a:hover {
	color: var(--pt-gold, #d4af37);
}

/* ---- Mobile: readable, not too tall ---- */
@media (max-width: 820px) {
	.pt-breaking--belowmenu .pt-breaking__inner {
		min-height: 32px;
	}
	.pt-breaking--belowmenu .pt-breaking__label {
		font-size: 10px;
		padding: 3px 6px;
	}
	.pt-breaking--belowmenu .pt-breaking__track {
		font-size: 11px;
	}
	.pt-breaking__dot {
		width: 6px;
		height: 6px;
	}
}

/*!
 * PunjabiTime News — compact premium footer (Phase 1 Step 3, 2026-08-23).
 *
 * Layout only. The dark charcoal shell, the deep-red top rule and every colour
 * come from punjabitime-footer-polish.css via the inherited --ptf-* tokens
 * (--ptf-bg #1f252e, --ptf-bg-2 #1a1f27, --ptf-red #9e1b1b, --ptf-heading,
 * --ptf-text, --ptf-link, --ptf-link-hover, --ptf-divider), so the PunjabiTime
 * footer identity is unchanged — only its height and structure are.
 *
 * Loaded site-wide at priority 97, after punjabitime-footer-polish (50), so
 * these rules win without that file being edited.
 *
 * The old footer was ~472 px tall with 20 links, 8 of which repeated the main
 * category navigation. Those are gone; this is a brand block, the institutional
 * and legal pages, the real social profiles, and the copyright last.
 */

.pt-site-footer.pt-footer--compact {
	padding-top: 30px;
	padding-bottom: 0;
}

.pt-footer--compact .pt-footer-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 26px 40px;
	align-items: start;
	padding-bottom: 24px;
}

/* ---------- Brand ---------- */
.pt-footer--compact .pt-footer-brand__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.pt-footer--compact .pt-footer-brand__logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.pt-footer--compact .pt-footer-brand__logo img {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.pt-footer--compact .pt-footer-brand__name {
	font-family: var(--pt-head, Georgia, serif);
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--ptf-heading);
}

.pt-footer--compact .pt-footer-brand__desc {
	margin: 12px 0 0;
	max-width: 46ch;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ptf-text);
}

/* ---------- Social ---------- */
.pt-footer--compact .pt-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.pt-footer--compact .pt-footer-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--ptf-divider);
	color: var(--ptf-link);
	transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.pt-footer--compact .pt-footer-social__link:hover,
.pt-footer--compact .pt-footer-social__link:focus-visible {
	color: var(--ptf-link-hover);
	border-color: var(--ptf-link-hover);
	background: rgba(255, 255, 255, 0.06);
}

.pt-footer--compact .pt-footer-social__link svg {
	display: block;
}

/* ---------- Institutional links ---------- */

/* main.css already defines a `.pt-footer-links` class as a 3-column grid for an
   older layout. Our <nav> reuses that class name, so the <ul> below was being
   laid out as a narrow 202 px grid item and every link wrapped onto its own
   line (the footer measured 365 px instead of ~250 px). Reset the nav to a
   plain block so the list can use the full column width and wrap naturally. */
.pt-footer--compact .pt-footer-links {
	display: block;
	grid-template-columns: none;
	gap: 0;
}

.pt-footer--compact .pt-footer-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pt-footer--compact .pt-footer-links__list a {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ptf-link);
	text-decoration: none;
	transition: color 150ms ease;
}

.pt-footer--compact .pt-footer-links__list a:hover,
.pt-footer--compact .pt-footer-links__list a:focus-visible {
	color: var(--ptf-link-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Bottom row: copyright is the final line ---------- */
.pt-footer--compact .pt-footer-base {
	background: var(--ptf-bg-2);
	border-top: 1px solid var(--ptf-divider);
	padding: 14px 0;
}

.pt-footer--compact .pt-footer-copy {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ptf-text);
}

/* ---------- Mobile: compact, no oversized gaps, easy tap targets ---------- */
@media (max-width: 782px) {
	.pt-site-footer.pt-footer--compact {
		padding-top: 24px;
	}

	.pt-footer--compact .pt-footer-inner {
		grid-template-columns: 1fr;
		gap: 18px;
		padding-bottom: 18px;
	}

	.pt-footer--compact .pt-footer-brand__name {
		font-size: 20px;
	}

	.pt-footer--compact .pt-footer-brand__desc {
		margin-top: 10px;
		font-size: 13px;
		max-width: none;
	}

	.pt-footer--compact .pt-footer-links__list {
		gap: 9px 14px;
	}

	/* On phones these institutional links should read as SECONDARY to the
	   PunjabiTime brand, not as a second main navigation. The wrapper sets
	   font-weight 600, which the links inherit and which made them look like
	   nav items, so the weight is reset explicitly here and the size and
	   spacing are eased back a step. Colour is unchanged (--ptf-link).
	   The 5px block padding keeps each link about 29 px tall, so they stay
	   comfortable to tap even though they read lighter. */
	.pt-footer--compact .pt-footer-links__list a {
		display: inline-block;
		padding: 5px 0;
		font-size: 12.5px;
		font-weight: 400;
		line-height: 1.45;
	}

	.pt-footer--compact .pt-footer-social__link {
		width: 38px;
		height: 38px;
	}
}

/* ---------- Scroll-to-top clearance ----------
   The floating scroll-to-top button is repositioned for the fixed mobile bottom
   nav at <= 1024px (punjabitime-ui-extras.css): position:fixed, 42 px tall,
   sitting 14 px above the 60 px nav, so it occupies 74–116 px up from the
   viewport bottom. The copyright used to end exactly 74 px up (60 px body
   padding + 14 px base padding), so at full scroll the button sat right on top
   of it. This clearance must therefore span the SAME range as the button's own
   rule — including landscape phones between 783 px and 1024 px, where the
   footer is still in its two-column layout but the mobile bottom nav is present.
   60 px of the clearance already comes from body padding-bottom; this adds the
   remainder plus a 20 px breathing gap above the button.
   Above 1024 px nothing here applies and the desktop footer is untouched. */
@media (max-width: 1024px) {
	.pt-footer--compact .pt-footer-base {
		padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.pt-footer--compact .pt-footer-social__link,
	.pt-footer--compact .pt-footer-links__list a {
		transition: none;
	}
}

/**
 * PunjabiTime News — Mobile header layout (mobile / tablet only, <= 1024px).
 *
 * Theme-native. Enqueued by functions.php (handle: punjabitime-mobile-header)
 * AFTER the other header stylesheets so its mobile-only rules win. Every rule
 * is wrapped in a max-width media query, so the DESKTOP header (> 1024px) is
 * NOT changed in any way.
 *
 * v0.2.8-clean — SINGLE logo system. The round Site Icon logo is printed
 * exactly once, in the centre brand group (.pt-brand-logo inside
 * .pt-brand-wrap, see header.php), and the base brand-lockup rules live in
 * punjabitime-header-mobile-nav.css. On mobile the layout is:
 *
 *   [ ◯ logo  PunjabiTime ]   (centred brand group)        [ Original | EN ]
 *                tagline
 *
 *   - The logo sits beside the wordmark as one centred brand group (same
 *     lockup as desktop, just smaller). There is NO separate left-cluster
 *     logo and NO Customizer ::after pseudo-logo, so a duplicate is
 *     impossible.
 *   - The top hamburger + search icons live in the fixed bottom nav, so the
 *     whole left icon cluster is hidden here. Hiding .pt-masthead__left also
 *     removes the legacy Customizer ".pt-masthead__left::after" pseudo-logo
 *     (a display:none element generates no pseudo-elements).
 *   - The GTranslate Original / English pill is pinned right and shrunk
 *     ("English" -> "EN") so it never overflows or causes horizontal scroll.
 *
 * Does NOT change: the desktop header, the fixed bottom nav + its Menu button,
 * the slide-in drawer, dark mode, posts, the homepage, the footer, SEO, the
 * sitemap, plugins, or AdSense.
 */

@media (max-width: 1024px) {

	/* ---- MOBILE STICKY HEADER (v0.2.8-clean) ----
	 * Keep the compact masthead pinned to the top while scrolling on mobile /
	 * tablet (<= 1024px). We make the WHOLE .pt-site-header sticky (not an inner
	 * div) so its solid cream background spans the full viewport width — a sticky
	 * .pt-container child would leave transparent side gutters that show the page
	 * scrolling through. position:sticky (NOT a fixed overlay) keeps the header in
	 * normal flow, so it reserves its own space: no layout jump, and it never
	 * covers the top of the page content on load.
	 *
	 *  - top:0 pins it to the viewport top once the page scrolls up to it.
	 *  - The relocated Breaking ticker lives inside this header (after the hidden
	 *    category nav, moved there by punjabitime-breaking-move.js), so it stays
	 *    visible and intact while pinned — the breaking bar is not broken.
	 *  - z-index 900 sits BELOW the fixed bottom nav (1000), the drawer overlay
	 *    (1100) and the slide-in drawer (1200) defined in
	 *    punjabitime-header-mobile-nav.css, so the menu drawer still opens cleanly
	 *    OVER the header; it sits above page content.
	 *  - The header is at the TOP edge and the bottom nav is fixed at the BOTTOM
	 *    edge, so they occupy opposite edges and can never overlap.
	 *  - No width / transform is added, so it cannot introduce horizontal scroll.
	 *  - The Original/EN pill and the Dark toggle live inside the header, so they
	 *    stay pinned and keep working.
	 *
	 * Desktop (> 1024px) is unaffected: the header stays in normal flow there. */
	.pt-header--ft.pt-site-header {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 900;
	}

	/* ---- Masthead: centred brand group on the left/centre, language right ---- */
	.pt-header--ft .pt-masthead {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 12px 0;
		overflow-x: clip; /* final guard: the header row can never cause h-scroll */
	}

	/* ---- Hide BOTH icon clusters on mobile ----
	 * Menu/Search/Home all live in the fixed bottom nav. Hiding the left
	 * cluster (display:none) also kills the legacy Customizer
	 * ".pt-masthead__left::after" pseudo-logo at the source, since a
	 * display:none element renders no ::before/::after. */
	.pt-header--ft .pt-masthead__left,
	.pt-header--ft .pt-masthead__right {
		display: none !important;
	}

	/* ---- CENTER: the single brand group (round logo + wordmark + tagline).
	 * display:flex / centring / ordering come from the base brand-lockup rules
	 * in punjabitime-header-mobile-nav.css; here we only let it fill the row
	 * (so it centres in the space left of the language pill) and trim sizes. */
	.pt-header--ft .pt-brand-wrap {
		flex: 1 1 auto;
		min-width: 0;        /* allow the centre group to shrink (no overflow) */
		column-gap: 10px;
		text-align: center;
		justify-self: auto;
	}

	/* Tighter logo<->wordmark gap inside the brand link on mobile. */
	.pt-header--ft .pt-brand-link {
		column-gap: 10px;
	}

	/* Mobile logo size (overrides the 60px desktop size from the base rules). */
	.pt-header--ft .pt-brand-logo img {
		width: 46px;
		height: 46px;
		transform: translateY(2px);
	}

	.pt-header--ft .pt-brand {
		font-size: clamp(19px, 5.2vw, 26px);
		line-height: 1.05;
		white-space: nowrap;
	}

	.pt-header--ft .pt-tagline {
		margin-top: 4px;
		font-size: 9.5px;
		letter-spacing: 0.10em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* ---- RIGHT: compact Original / English pill, inline on the row ---- *
	 * The base rule centres this pill BELOW the wordmark; override it to sit
	 * inline on the right of the row instead. */
	.pt-header--ft .pt-masthead .pt-lang-toggle--mobile {
		display: inline-flex !important;
		order: 3;
		flex: 0 0 auto;
		position: static;
		justify-self: auto;
		margin: 0;
	}

	.pt-header--ft .pt-lang-toggle--mobile .pt-lang-btn {
		height: auto;
		padding: 4px 9px;
		font-size: 11px;
		line-height: 1.2;
	}

	/* Shorten ONLY the English label to "EN" on mobile so the pill stays narrow.
	 * The real <button> text ("English") is kept for assistive tech — we only
	 * collapse its glyphs and paint "EN" via ::after. Active red style intact. */
	.pt-header--ft .pt-lang-toggle--mobile .pt-lang-btn[data-lang="en"] {
		font-size: 0;
	}

	.pt-header--ft .pt-lang-toggle--mobile .pt-lang-btn[data-lang="en"]::after {
		content: "EN";
		font-size: 11px;
		letter-spacing: 0.04em;
	}
}

/* ---- Very small phones: trim a touch more so the row always fits ---- */
@media (max-width: 380px) {
	.pt-header--ft .pt-masthead {
		gap: 8px;
	}

	.pt-header--ft .pt-brand-wrap {
		column-gap: 8px;
	}

	.pt-header--ft .pt-brand-link {
		column-gap: 8px;
	}

	.pt-header--ft .pt-brand-logo img {
		width: 40px;
		height: 40px;
	}

	.pt-header--ft .pt-brand {
		font-size: 19px;
	}

	.pt-header--ft .pt-tagline {
		display: none; /* drop the tagline on the narrowest screens */
	}

	.pt-header--ft .pt-lang-toggle--mobile .pt-lang-btn {
		padding: 4px 7px;
		font-size: 10.5px;
	}

	.pt-header--ft .pt-lang-toggle--mobile .pt-lang-btn[data-lang="en"]::after {
		font-size: 10.5px;
	}
}

/* ===========================================================================
 * DUPLICATE-LOGO KILL (defensive, kept from v0.1.4)
 *
 * The WordPress Customizer "Additional CSS" still contains a legacy
 *     @media (max-width:820px){ .pt-masthead__left::after{ background-image:
 *     url(...PTime...) !important } }
 * pseudo-logo hack. In v0.2.8-clean the whole .pt-masthead__left cluster is
 * display:none on mobile (above), so that ::after can no longer render — but
 * we ALSO neutralise it here as belt-and-suspenders, with a higher-specificity
 * rule (html body … = 0,2,3) that beats the Customizer rule (0,1,1) even
 * though that one is !important and loads later. No pseudo-logo is added.
 *
 * RECOMMENDED: delete that "LOGO MOBILE" block from Appearance → Customize →
 * Additional CSS — it is now dead and the theme no longer relies on it.
 * =========================================================================== */
@media (max-width: 1024px) {
	html body .pt-header--ft .pt-masthead__left::after,
	html body .pt-header--ft .pt-masthead__left::before {
		content: none !important;
		display: none !important;
		background: none !important;
		background-image: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}