/*
 * Design tokens — added as part of the 2026-09 UI/UX redesign.
 *
 * This file establishes a real, consistent system to replace the 36+
 * scattered, near-duplicate breakpoints previously spread across main.css,
 * responsive.css and add.css. It is loaded AFTER those files, so its rules
 * win the cascade for anything it targets; it does not delete the old
 * rules (many of which are unrelated to layout and still needed), it
 * establishes the new standard going forward and fixes specific, verified
 * issues below.
 *
 * Breakpoint system (mobile-first; use min-width, base styles = mobile):
 *   mobile:  < 640px   (no media query needed, this is the base)
 *   tablet:  >= 640px  and < 1024px
 *   desktop: >= 1024px
 *
 * Spacing scale (4px base):
 *   --space-1: 4px   --space-2: 8px   --space-3: 12px  --space-4: 16px
 *   --space-5: 24px  --space-6: 32px  --space-7: 48px  --space-8: 64px
 *
 * Type scale (1.125 ratio, 16px/1rem base — for NEW components; existing
 * legacy component CSS keeps its own per-element customizer-driven sizes
 * and was not retrofitted in this pass):
 *   --text-xs: 0.75rem   --text-sm: 0.875rem   --text-base: 1rem
 *   --text-lg: 1.125rem  --text-xl: 1.25rem    --text-2xl: 1.5rem
 *   --text-3xl: 1.875rem
 */

:root {
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
}

/*
 * Fix: the header search button was only as large as its icon glyph
 * (measured 16x19px live — well under the 44x44px comfortable minimum
 * touch target). Padding creates a real hit area without changing the
 * visual icon size.
 */
.site-header.layout--default .search-wrap .search-trigger {
	padding: var(--space-3);
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * Styling for the per-post category badge on the single-post header. The
 * markup was missing the "cat-item cat-{ID}" class the color system
 * expects (fixed at the template level in content-single.php), and
 * add.css had a mobile-only rule explicitly hiding it (removed — it
 * predates the category-color fix, when every badge showed the same
 * color and hiding genuinely-uninformative noise was reasonable; now
 * that each category has a distinct color, it's worth showing).
 */
.single-header-categories .post-categories {
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-header-categories .post-categories .cat-item {
	display: inline-block !important;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.single-header-categories .post-categories .cat-item a {
	color: #fff !important;
	text-decoration: none;
}

/*
 * Top-header tagline ("SOCIAL, ECONOMIC & POLITICAL NEWS") — added via
 * mu-plugins/top-header-tagline.php. On mobile it now shows as a second
 * line below the social icons (icons first, tagline second, then the
 * logo below the whole red bar) per explicit request.
 */
.top-header-tagline {
	display: block;
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: var(--text-xs);
	font-weight: 500;
	letter-spacing: 0.03em;
	/* Optical correction: this text is all-caps with no descenders, so a
	   line-box centered by the numbers reads as sitting high — nudge it
	   down a hair to compensate. */
	padding-top: 2px;
	/* DOM order is [tagline, date, social] (needed so desktop's
	   space-between layout puts the tagline on the left) — order:2 here
	   pushes it to the second line on mobile without touching that. */
	order: 2;
}

.site-header.layout--default .top-header .row {
	flex-wrap: wrap;
	row-gap: var(--space-1);
}

.site-header.layout--default .social-icons-wrap {
	/* Two pre-existing rules fight this element: main.css sets
	   flex: 0 1 20% (flex-basis beats width, so width:100% alone did
	   nothing), and add.css has justify-content: flex-end !important
	   (a "vertically center social icons" fix from earlier this
	   session) which no non-!important rule can beat. Matching
	   !important here is the only way to actually win. */
	flex: 1 1 100% !important;
	width: 100%;
	justify-content: center !important;
	order: 1;
}

/*
 * Reserved ad-slot containers — inert (no ad network code) until a real
 * AdSense account is connected. Fixed, explicit dimensions prevent layout
 * shift once ads are added. Placement per the project vision doc: one
 * in-content, one sidebar (tablet/desktop only), one between homepage
 * sections, one in the hero banner.
 *
 * Border bumped from 1px #E2E2E2 to 2px #B0B0B0 — the original was too
 * faint to read as a deliberate placeholder at normal viewing size.
 */
.digital-newspaper-ad-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: var(--space-5) auto;
	background: var(--full-width-section-bk-color, #F0F1F2);
	border: 2px dashed #B0B0B0;
	color: var(--meta-text-color, #8A8A8C);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	min-height: 100px;
	max-width: 100%;
	overflow: hidden;
}

.digital-newspaper-ad-slot--in-content {
	width: 100%;
	max-width: 336px;
}

.digital-newspaper-ad-slot--sidebar {
	width: 100%;
	max-width: 300px;
	min-height: 250px;
	display: none;
}

.digital-newspaper-ad-slot--homepage {
	width: 100%;
	max-width: 728px;
	min-height: 90px;
}

/*
 * Second homepage slot: end of the post list, right before the "1 2 3"
 * pagination links (see mu-plugins/ad-slot-placements.php). Same
 * dimensions as the other homepage slot for visual consistency.
 */
.digital-newspaper-ad-slot--homepage-pagination {
	width: 100%;
	max-width: 728px;
	min-height: 90px;
}

/*
 * SCOPE NOTE. Every card rule below was written as `.home.blog ...` and so
 * applied to the front page only - category, tag, author and search results
 * kept the untouched theme defaults, which is why they looked like a
 * different site: description at weight 500 grey instead of 600 black, Read
 * More at the bottom LEFT, and card heights drifting 385-421px instead of
 * one fixed size. Category links sit in the main nav, so readers hit those
 * pages constantly.
 *
 * Re-keyed to `.dn-feed.dn-cards`, two classes added together by
 * mu-plugins/archive-feed-parity.php on the front page AND on every archive
 * and search listing. Two classes, not one, so the specificity stays exactly
 * what `.home.blog` was (0,2,0) and no rule that previously won its cascade
 * battle silently starts losing it.
 */

/*
 * Mobile feed ad card (after post 2, then every 3 posts) — fills the same
 * fixed-height .blaze_box_wrap box as a real card (see the mobile card
 * rules below), so it comes out exactly the same height by construction
 * rather than a separate guessed pixel value. Hidden at >=640px:
 * tablet/desktop already get the sticky sidebar ads instead (see below),
 * and running both at once would be excessive.
 */
.digital-newspaper-ad-slot--inline-feed {
	width: 100%;
	flex: 1;
	min-height: 0;
}

@media (min-width: 640px) {
	.digital-newspaper-inline-ad {
		display: none;
	}
}

/*
 * Homepage sidebar slot, right after "Latest Posts". A standard
 * 300x600 "half page" unit — not a giant box filling the full ~1800px
 * of empty space, since that would look absurd. Sticky so it stays in
 * view while the (much longer) post list next to it keeps scrolling,
 * which is what actually makes use of all that extra height.
 */
.digital-newspaper-ad-slot--sidebar-sticky,
.digital-newspaper-ad-slot--sidebar-sticky-2 {
	width: 100%;
	max-width: 300px;
	min-height: 600px;
	margin-top: var(--space-5);
	display: none;
}

@media (min-width: 640px) {
	.digital-newspaper-ad-slot--sidebar {
		display: flex;
	}

	.digital-newspaper-ad-slot--sidebar-sticky {
		display: flex;
		position: sticky;
		top: var(--space-5);
	}

	/*
	 * Second slot stacks below the first once both are sticky — its
	 * top offset accounts for the first ad's full height (600px) plus
	 * the gap above and between them, so it settles directly under the
	 * first instead of overlapping it.
	 */
	.digital-newspaper-ad-slot--sidebar-sticky-2 {
		display: flex;
		position: sticky;
		top: calc(var(--space-5) + 600px + var(--space-5));
	}
}

/*
 * Mobile card (<640px): image on top, then title, description, Read More.
 *
 * Sizing contract - every card is the same height because the three stacked
 * pieces are each deterministic:
 *   - the image is a fixed 16:9 frame
 *   - title and description share ONE line box (--dn-card-line), and their line
 *     counts always add up to 4 (1+3, 2+2, 3+1). mu-plugins/card-line-budget.php
 *     measures the rendered title and sets --dn-desc-lines per card; the
 *     fallback of 2 below keeps things sane if that script never runs.
 * Using one shared line height for both is what makes the swap exact: four
 * lines is four lines regardless of how they are split.
 *
 * The description markup is div.post-excerpt > a > p (the_excerpt() adds the
 * <p>, add.css:552 forces the <a> to display:block), so the clamp has to go on
 * the <p> - the element that actually holds the text lines - and that <p>'s
 * default ~16px browser margin has to be zeroed. That stray margin, stacked on
 * the flex gap, was the "too much space under the heading".
 */
@media (max-width: 639px) {
	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .blaze_box_wrap {
		--dn-card-line: 24px;
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		height: auto;
		padding: var(--space-3);
		overflow: hidden;
	}

	/* Square corners - rounded photos read as "app", not newspaper. */
	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-thumb-wrap {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		position: relative;
		margin: 0;
		overflow: hidden;
		border-radius: 0;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-thumb-wrap a {
		display: block;
		position: absolute;
		inset: 0;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-thumb-wrap img {
		display: block;
		width: 100%;
		/* add.css:869 forces height:auto !important under 768px, which made the
		   photo render at its natural size and get clipped by the frame. */
		height: 100% !important;
		object-fit: cover;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-element {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		padding: 0;
		min-height: 0;
		overflow: hidden;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-title {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin: 0;
		line-height: var(--dn-card-line);
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-meta {
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		white-space: nowrap;
		margin: 0;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-excerpt {
		margin: 0;
		overflow: hidden;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-excerpt a {
		display: block;
	}

	/* Heavier and a touch larger: this audience reads it with the naked eye. */
	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-excerpt p {
		display: -webkit-box;
		-webkit-line-clamp: var(--dn-desc-lines, 2);
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin: 0;
		font-size: 15px;
		font-weight: 600;
		line-height: var(--dn-card-line);
		color: var(--post-title-color, #1f1f24);
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-link-button {
		margin: 0;
		margin-top: auto;
		align-self: flex-end;
	}
}

/*
 * Homepage density rework (tablet/desktop only — the mobile single-column
 * card rhythm gets its own fixed-height treatment above).
 *
 * Live audit (body classes: home blog post-layout--one right-sidebar) found
 * the post loop used the exact same single-column, full-width-image stacked
 * card at every viewport, including desktop, with almost no whitespace
 * (#theme-content padding was 10px, .blaze_box_wrap padding was 7px). This
 * keeps it a single column at every width (an earlier pass tried a 2-column
 * grid with a featured first card — reverted per feedback: one card per
 * row, no special treatment for the first post) and adds real breathing
 * room around the homepage sections.
 */
@media (min-width: 640px) {
	.dn-feed.dn-cards #theme-content {
		padding: var(--space-4) 0;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap article .blaze_box_wrap {
		padding: var(--space-3);
	}
}

@media (min-width: 1024px) {
	.dn-feed.dn-cards #theme-content {
		padding: var(--space-5) 0;
	}

	#bottom-full-width-section {
		padding: var(--space-5) 0;
	}
}

/*
 * Touch-target audit — mobile header (measured live at 375px, in addition
 * to the .search-trigger fix above).
 *
 * .sidebar-toggle-trigger (the kebab / 3-dot icon that opens the
 * Disclaimer/Contact/Privacy drawer) measured 4x20px — the <a> shrank to
 * fit its three 4px dots with zero padding, making it nearly impossible to
 * tap accurately. There's only ~40px of free space between the search
 * button and the viewport edge here, so a full 44x44 target would overlap
 * the search button's own hit area; 40x40 is the largest a real fit
 * allows without that collision, still well clear of Apple's 28x28
 * absolute minimum.
 */
.site-header .sidebar-toggle-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
}

/*
 * button.menu-toggle ("Sections") measured 115x36px — has a visible label
 * so it already clears Apple's 28px absolute minimum, but not the 44px
 * default. Vertical padding closes most of the gap without changing the
 * label's font size or the header's overall height budget.
 */
.site-header button.menu-toggle {
	min-height: 44px;
	padding-top: var(--space-2);
	padding-bottom: var(--space-2);
}

/*
 * .social-icon (top utility bar: Facebook/Instagram/X/YouTube) measured
 * ~16-26x16px. This bar deliberately fits 4 icons in ~20% of a 375px
 * screen (~75px total) — a 44px target per icon cannot fit here at all.
 * Apple's accessibility guidance gives 28x28 as the documented minimum
 * for exactly this kind of space-constrained secondary control, so that's
 * the target, not the 44px default.
 */
.site-header.layout--default .social-icons-wrap .social-icon {
	min-width: 28px;
	min-height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * Card layout (tablet/desktop): image on the left sized to the card,
 * heading + a 2-line excerpt on the right, one card per row. Every card
 * is a fixed height so the list lines up evenly regardless of how long
 * any one title or excerpt is — including the first post, same as the
 * rest, no special "featured" treatment.
 *
 * White background + padding restored to match the gentle card look
 * mobile/tablet already had (was rgb(255,255,255), 7px padding, per
 * .home.blog article .blaze_box_wrap in main.css) — an earlier pass
 * dropped this to transparent/0, which read as too flat. Thumbnail
 * widened from 140 to 180px per feedback that the image read too small.
 */
@media (min-width: 640px) {
	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .blaze_box_wrap {
		display: flex;
		align-items: stretch;
		gap: var(--space-4);
		height: 160px;
		padding: var(--space-3);
		background: var(--archive-content-bk-color, #fff);
		/* main.css's post-layout--one rule sets margin-bottom: 16px on this
		   same element with no media query — stacked on top of the grid's
		   own `gap` above, cards ended up with 16px + this gap of visible
		   space between them. Zeroed here so `gap` alone controls spacing. */
		margin-bottom: 0;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-thumb-wrap {
		flex: 0 0 180px;
		height: 100%;
		margin: 0;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-thumb-wrap a {
		display: block;
		height: 100%;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-thumb-wrap img {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-element {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-2);
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-title {
		font-size: var(--text-base);
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin: 0;
	}

	/* Meta (author/date/views) dropped on these compact cards — no room
	   alongside a 2-line heading and 2-line excerpt at a 160px card height. */
	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-meta {
		display: none;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: var(--text-sm);
		line-height: 1.4;
	}
}

/*
 * Desktop-only refinements per feedback: bigger image, bigger heading,
 * a smaller Read More button, and a tighter gap between cards (matched
 * to the theme's own "Popular News" list-post component, which already
 * uses 12px — cut further to 8px here since it still read as too loose
 * at this card's proportions). Left at 640-1024px (tablet) as before.
 */
@media (min-width: 1024px) {
	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap {
		gap: var(--space-2);
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .blaze_box_wrap {
		height: 170px;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-thumb-wrap {
		flex: 0 0 220px;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-title {
		font-size: var(--text-lg);
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-link-button,
	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-link-button i {
		font-size: var(--text-xs);
	}
}

/*
 * Logo size, mobile + tablet only (<1024px) — desktop's own 50px rule
 * below is untouched per explicit request. Native logo is 200x79px; this
 * is a ~20% reduction off that native height (79px * 0.8 ≈ 63px), not a
 * new size picked independently — a first pass at 32/40px read as far
 * too small and was walked back to this. The customizer's own logo-width
 * control (inc/styles.php, digital_newspaper_site_logo_width_fnc) already
 * injects per-breakpoint inline CSS on the same selector, so this needs
 * !important to win, same as the desktop rule below.
 */
@media (max-width: 1023px) {
	.site-header .custom-logo-link img,
	.site-header .custom-logo {
		max-height: 80px !important;   /* was 71px — bumped up a bit further at owner's request */
		width: auto !important;
		object-fit: contain !important;
	}
}

/*
 * Above-the-fold rework (desktop, >=1024px only) — competitive research on
 * Eenadu and NDTV (both major news sites, checked live at 1366x768) showed
 * neither uses a large hero carousel: compact header, a single-line
 * ticker, then content immediately. Ours measured header(124) + top
 * bar(34) + ticker(142) + banner(601) = 901px, taller than a 768px laptop
 * screen. This brings all three down without removing any of them.
 */
@media (min-width: 1024px) {
	/* Logo measured 200x79px — the single biggest driver of header height.
	   Something else (customizer-injected CSS, loaded after this file)
	   pins width to 200px with higher specificity, so width needs
	   !important to actually shrink instead of just cropping via the
	   sitewide `img { object-fit: cover }` reset — contain + !important
	   guarantees it scales down proportionally instead of cropping. */
	.site-header .custom-logo-link img,
	.site-header .custom-logo {
		max-height: 100px !important;   /* 2x — was 50px, doubled at owner's request */
		width: auto !important;
		object-fit: contain !important;
	}

	/* Nav links had 15px top/bottom padding (30px total) — measured 56px
	   nav row height for a single line of text. */
	.main-navigation .menu li a,
	.main-navigation .nav.menu li a {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	/*
	 * Ticker ("HEADLINES" strip) — round 2. Checked Sakshi, TV9 Telugu and
	 * India Today live: all three keep their top breaking-news strip
	 * text-only; image+headline pairs only appear in their card grids
	 * further down the page, never in a thin ticker. Went with a
	 * text-only single line for that reason, but that's since been
	 * reverted per explicit request to bring images back. This is a
	 * middle ground: a small 40px square thumbnail (not the original
	 * 80px-tall one that made the whole strip 142px), single-line title.
	 */
	.ticker-news-wrap {
		margin: 0;
		margin-top: var(--space-1);
		margin-bottom: var(--space-1);
		padding: var(--space-2) var(--space-3);
	}

	/*
	 * #main-banner-section carries the generic .digital-newspaper-section
	 * padding (10px top AND bottom from main.css), which stacks on top of
	 * the ticker's own margin-bottom, making the gap below the ticker
	 * bigger than the gap above it unless this is zeroed out.
	 */
	#main-banner-section {
		padding-top: 0;
	}

	.ticker-news-wrap.layout--three .digital-newspaper-ticker-box {
		max-height: none;
	}

	/*
	 * The "HEADLINES" badge (.ticker-title) was a normal flex item sitting
	 * to the left of the scrolling box, and .digital-newspaper-ticker-box
	 * was only flex-basis 85% to make room for it — together that wasted
	 * real horizontal space. Per explicit direction: overlay the badge and
	 * the pause button on top of the scrolling track instead (occasional
	 * overlap with scrolling text is fine), and let the track use the
	 * full width.
	 */
	.ticker-news-wrap.layout--three .ticker-title {
		position: absolute;
		top: 50%;
		left: var(--space-3);
		transform: translateY(-50%);
		z-index: 2;
		margin: 0;
	}

	.ticker-news-wrap.layout--three .digital-newspaper-ticker-box {
		flex: 1 1 100%;
		width: 100%;
	}

	.ticker-news-wrap.layout--three .ticker-item .feature_image {
		max-width: 48px;
		height: 48px;
		margin-right: var(--space-2);
		border-radius: 4px;
		overflow: hidden;
		flex-shrink: 0;
	}

	.ticker-news-wrap.layout--three .ticker-item .feature_image img {
		height: 100%;
		width: 100%;
		object-fit: cover;
		border-radius: 4px;
	}

	.ticker-news-wrap .post-date {
		display: none;
	}

	.ticker-news-wrap.layout--three .ticker-item .title-wrap {
		max-width: none;
	}

	.ticker-news-wrap.layout--three .ticker-item .post-title,
	.ticker-news-wrap .ticker-item h2.post-title {
		-webkit-line-clamp: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: var(--text-base);
		margin: 0;
		max-width: 300px;
	}

	/* Hero banner: the carousel image had a hardcoded height:581px, the
	   "Popular News" column thumbnails (.main-banner-list-posts — the
	   theme's class names don't match the visible labels: this one is
	   the right-side column) were 212px each, and "Latest News"
	   (.main-banner-grid-posts — the left-side column) thumbnails were
	   170px each — together the reason the banner ran 601px tall (the
	   row stretches all 3 columns to match whichever is naturally
	   tallest). Scaled all three down by roughly the same ratio so the
	   row still reads proportionally. */
	.banner-layout--five .main-banner-wrap article .post-thumb {
		height: 360px;
	}

	/*
	 * "Popular News" column (right side, class .main-banner-list-posts):
	 * cut from 4 items to 2 (see template-five.php) per feedback that
	 * cramming several items into short 110px thumbnails looked odd.
	 * With only 2 items now, thumbnails can be a real size again.
	 */
	.banner-layout--five .main-banner-list-posts article .post-thumb {
		height: 170px;
	}

	/*
	 * "Latest News" column (left side, class .main-banner-grid-posts):
	 * this is a slick slider whose PHP groups posts 3-per-slide
	 * (`$grid_post_key % 3`) — that grouping is what actually controlled
	 * how many cards showed at once, not a simple item count. Changed
	 * the grouping to 2-per-slide in template-five.php, then sized the
	 * thumbnail up to match, same treatment as "Popular News" above.
	 */
	.banner-layout--five .main-banner-grid-posts article .post-thumb {
		height: 156px;
	}

	.banner-layout--five .main-banner-grid-posts article {
		margin-bottom: 12px;
	}

	/*
	 * "Popular News" column (right side) replaced with a reserved ad
	 * slot per explicit request. Sized to fill the same 360px the other
	 * two hero columns already match, so the row stays even.
	 */
	.main-banner-list-posts--ad {
		display: flex;
	}

	.main-banner-list-posts--ad .digital-newspaper-ad-slot--hero {
		flex: 1;
		height: auto;
		width: 100%;
		max-width: 100%;
		margin: 0;
	}

	/*
	 * Top utility bar: 3-zone layout (tagline left, date centered, social
	 * icons right) instead of the previous 2-zone space-between (date
	 * left, icons right, nothing to balance the date into the middle).
	 * Tried a 1fr/auto/1fr grid first — measured it landing ~29px off
	 * true center (verified via getBoundingClientRect, not eyeballed).
	 * Absolute-positioning the date at left:50% + translateX(-50%) against
	 * the row guarantees exact center regardless of how wide the tagline
	 * or icon list are, so that's what's actually applied here.
	 */
	.site-header.layout--default .top-header .row {
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
	}

	/* Reset the mobile 2-line treatment back to a single inline row. */
	.top-header-tagline {
		width: auto;
		text-align: left;
		white-space: nowrap;
		order: 0;
	}

	.site-header.layout--default .social-icons-wrap {
		/* Must match !important weight of the mobile rule above (line ~132)
		   or this reset silently loses and desktop inherits the mobile
		   full-width-centered layout — exactly what broke last time. */
		flex: 0 1 20% !important;
		width: auto !important;
		justify-content: flex-end !important;
		order: 0;
	}

	.site-header.layout--default .top-date-time {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	/*
	 * Header now sits flush against the hero banner (0px gap) since the
	 * Headlines ticker — which used to provide the visual separation —
	 * was disabled entirely. Small gap restored so they don't look glued
	 * together.
	 */
	#main-banner-section {
		margin-top: var(--space-3);
	}

	/*
	 * Hero carousel headline (the "middle part") — doubled per explicit
	 * request. Multiplying the existing calc() instead of replacing it
	 * keeps whatever the user changed in the customizer's post-title
	 * typography settings (--post-title-size) intact; this just doubles
	 * whatever that resolves to, measured live at 38.25px -> ~76.5px.
	 */
	.main-banner-wrap .post-element .post-title {
		font-size: calc(var(--post-title-size) * 1.53 * 2);
	}

	/*
	 * The carousel's left slick-arrow (35px wide, sitting at the left
	 * edge) overlapped the start of the title/meta text by ~25px —
	 * measured live: title left edge 355px vs arrow right edge 381px.
	 * Padding-left bumped from 20 to 55px on the whole text block clears
	 * it with a little breathing room, other sides unchanged.
	 */
	.main-banner-wrap .post-element {
		padding-left: 55px;
	}
}

/*
 * Footer redesign (2026-09). Prior implementation: flat #393939/#333 grey
 * blocks, widget columns positioned with hand-tuned flex-basis percentages
 * per column-count (one/two/three/four), a loud red "pill" badge repeated
 * on every widget title, and a cramped, center-everything bottom bar. None
 * of the markup in footer.php / footer-hooks.php / bottom-footer-hooks.php
 * changes here — this is a CSS-only pass laid over the existing structure,
 * consistent with the rest of this file. Existing customizer color vars
 * (--footer-text-color, --footer-bottom-*) are kept rather than replaced,
 * so a site owner's color choices there still apply; only the two flat
 * background greys are deepened for actual visual depth between the two
 * footer sections.
 */

/* Main footer (widget columns) */
footer .main-footer {
	background-color: #24252b;
	background-image: linear-gradient(180deg, #26272d 0%, #1f2024 100%);
	padding: var(--space-6) 0;
}

footer .main-footer .row {
	/* .row is also a Bootstrap-style gutter helper elsewhere on the site
	   (base main.css rule: -0.75rem left/right margin, meant to be offset
	   by matching padding on .col children) — this footer doesn't use
	   that column system, so the negative margins are zeroed here or the
	   grid below would overflow past the container padding on both sides. */
	margin-left: 0;
	margin-right: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

/* Old flex-basis columns are neutralized (grid items ignore `flex`
   anyway) mainly to zero out the old side padding, which produced
   uneven column edges once real `gap` spacing is doing the job. */
.footer-widget.column-one,
.main-footer .footer-widget.column-two,
.main-footer .footer-widget.column-three,
.main-footer .footer-widget.column-four {
	padding: 0;
}

@media (min-width: 640px) {
	footer .main-footer .row {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-6) var(--space-5);
	}
}

@media (min-width: 1024px) {
	footer .main-footer {
		padding: var(--space-7) 0;
	}

	footer .main-footer .row {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

/* Widget titles: the sitewide style is a solid-red "pill" behind the
   text (h2 span { background: var(--theme-color-red) }) — fine as a
   one-off section label elsewhere, but repeated 2-4 times down a footer
   it reads as loud rather than organized. Swapped for a small-caps
   label with a simple accent underline, still using the same brand
   red so it doesn't introduce a new color. */
.main-footer h2.digital-newspaper-widget-title,
.main-footer h2.widget-title {
	display: block;
	margin: 0 0 var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--theme-color-red);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.main-footer h2.digital-newspaper-widget-title span,
.main-footer h2.widget-title span {
	background: transparent;
	color: var(--white-text);
	padding: 0;
	margin-bottom: 0;
}

/* Widget link lists: same underlying list markup as everywhere else on
   the site (chevron bullet, border-bottom divider) — just a hover state
   and a slightly darker divider line so it reads correctly on the new
   background instead of the light-mode divider color. */
.main-footer .widget ul li,
.main-footer .widget ol li {
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.main-footer .widget ul li a,
.main-footer .widget ol li a {
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.main-footer .widget ul li a:hover,
.main-footer .widget ol li a:hover {
	color: var(--theme-color-red);
	padding-left: var(--space-1);
}

/* Bottom bar: darker than the main footer for real depth (was the same
   flat family of grey, #333 vs #393939, so the two sections barely read
   as separate), plus an actual row layout instead of everything
   center-aligned regardless of content length. */
.site-footer .bottom-footer {
	background-color: #17181c;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: var(--space-4) 0;
	text-align: center;
}

.site-footer .bottom-footer .row {
	/* same Bootstrap-gutter .row margin reset as the main footer above */
	margin-left: 0;
	margin-right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.site-footer .bottom-footer .bottom-inner-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	justify-content: center;
}

.site-footer .site-info {
	flex: initial;
	margin: 0;
	text-align: center;
	font-size: var(--text-sm);
}

.bottom-menu {
	flex: initial;
	margin: 0;
	text-align: center;
}

.bottom-menu ul li {
	padding: 0 var(--space-2);
}

.bottom-menu ul li a,
.bottom-menu a {
	font-size: var(--text-sm);
	letter-spacing: 0.02em;
	transition: color 0.2s ease;
}

footer .social-icons-wrap {
	margin: 0;
	display: flex;
	justify-content: center;
	gap: var(--space-2);
}

footer .social-icons-wrap a {
	margin: 0;
}

footer .social-icons-wrap a i {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	/* main.css centers this circle's icon with text-align + line-height,
	   which only ever worked for an inline font glyph - .dn-icon is
	   display:block, so it was never actually centered. Flex replaces
	   that regardless of viewport width. */
	display: flex !important;
	align-items: center;
	justify-content: center;
	line-height: normal;
}

/* One cohesive brand color for all four, rather than four different,
   clashing brand hues (blue/pink/black/red) sitting in a row - that read
   as mismatched rather than colorful. Same red used across the rest of
   the site's UI (buttons, links, accents). */
footer .social-icons-wrap a i,
footer .social-icons-wrap a:visited i {
	background: var(--theme-color-red);
	border-color: var(--theme-color-red);
	color: var(--white-text);
}

footer .social-icons-wrap a:hover i {
	background: var(--white-text);
	color: var(--theme-color-red);
	border-color: var(--theme-color-red);
	transform: translateY(-2px);
}

@media (min-width: 640px) {
	/* DOM order is [social-icons-wrap, bottom-inner-wrapper] (see
	   bottom-footer-hooks.php priorities 10 and 15-40) — row-reverse
	   puts the first DOM child on the right, giving the conventional
	   "legal info left, social right" bottom-bar layout without
	   touching the PHP render order (the same trick already used for
	   the hero card's category/date corner, above). */
	.site-footer .bottom-footer .row {
		flex-direction: row-reverse;
		justify-content: space-between;
	}

	.site-footer .bottom-footer {
		text-align: left;
	}

	.site-footer .bottom-footer .bottom-inner-wrapper {
		flex-direction: row;
		justify-content: space-between;
		gap: var(--space-5);
	}

	.site-footer .site-info,
	.bottom-menu {
		text-align: left;
	}

	footer .social-icons-wrap {
		justify-content: flex-end;
	}
}

/* Developer credit strip (mu-plugins/developer-credit.php). Deliberately
   separate from and below the site's own bottom-footer bar, and light
   rather than dark, so it never competes with the site's own branding
   and so the dark FalcoTech logo art actually reads. */
.dn-dev-credit {
	background: #f4f4f5;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding: var(--space-2) var(--space-4);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	row-gap: var(--space-1);
	column-gap: var(--space-4);
	text-align: center;
}

/* Below 480px both rows comfortably fit on one line by pure available
   width, but that means whether it's one line or two comes down to how
   long "Designed and Developed by" happens to measure - not a real
   layout decision. Forcing the stack on phones makes it deliberate: row
   1 is always the credit, row 2 is always Contact + the buttons. */
@media (max-width: 480px) {
	.dn-dev-credit {
		flex-direction: column;
		row-gap: var(--space-2);
	}
}

/* Each logical half ("Designed and Developed by [logo]" / "Contact
   [buttons]") is its own flex group, so wrapping only ever happens
   BETWEEN the two groups, never in the middle of one - on a narrow
   screen the whole first group breaks onto its own line rather than
   splitting unpredictably wherever the width runs out. */
.dn-dev-credit__row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: var(--space-2);
}

.dn-dev-credit__text {
	font-size: 11px;
	color: #71717a;
	letter-spacing: 0.01em;
}

.dn-dev-credit__contact-label {
	margin-left: var(--space-1);
}

.dn-dev-credit__logo {
	height: 16px;
	width: auto;
	opacity: 0.9;
}

.dn-dev-credit__btn {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #52525b;
	color: #ffffff;
	font-size: 12px;
	flex-shrink: 0;
}

.dn-dev-credit__btn i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.dn-dev-credit__btn:hover,
.dn-dev-credit__btn:focus,
.dn-dev-credit__btn:active,
.dn-dev-credit__btn:visited {
	color: #ffffff;
}

.dn-dev-credit__btn--whatsapp {
	background: #25d366;
}

/*
 * ---------------------------------------------------------------------------
 * NAVIGATION: fix the ragged two/three-row menu between 769px and ~1320px.
 *
 * Mechanism (measured, not guessed): header_layout "three" puts the nav inside
 * the branding row, so .row splits 25% logo / 75% .menu-section, and the nav
 * shares that 75% with the search + kebab. At 1100px the nav <ul> gets 603px
 * but the 8 Telugu items need 778px, and main.css sets
 * `@media screen and (min-width: 48.1em) { .main-navigation ul { flex-wrap: wrap } }`
 * so it wraps instead of fitting -> 112px tall, 2-3 ragged rows.
 * Solving 0.75*row - ~130px(search+kebab) >= 778px puts the natural fit at
 * ~1320px viewport, which is exactly why 1366px works and 1280px does not.
 *
 * Fix: below that threshold give the nav its own full-width line under the
 * logo, on ONE row, horizontally scrollable if it still overflows (the standard
 * news-site category strip). Menu font-size is deliberately NOT touched - 18px
 * is the site owner's explicit choice in the Customizer's Additional CSS.
 * At >=1320px nothing changes; the existing beside-the-logo layout already fits.
 * ---------------------------------------------------------------------------
 */
@media (min-width: 1024px) and (max-width: 1319px) {
	.site-header.layout--default .site-branding-section .row {
		flex-wrap: wrap;
		row-gap: var(--space-2);
	}

	.site-header.layout--default .site-branding-section .row > .site-branding {
		flex: 0 0 auto;
	}

	/* Nav + search + kebab drop to their own full-width line below the logo. */
	.site-header.layout--default .site-branding-section .row > .menu-section {
		flex: 1 1 100%;
		max-width: 100%;
		/* A flex item will not shrink below its min-content width without this,
		   so the 778px menu widened the whole page instead of scrolling. */
		min-width: 0;
	}

	.site-header.layout--default .menu-section .main-navigation {
		min-width: 0;
	}

	/* One row, never ragged; scroll instead of wrapping when still too narrow. */
	.site-header.layout--default .menu-section .main-navigation ul.menu,
	.site-header.layout--default .menu-section .main-navigation ul.nav-menu {
		flex-wrap: nowrap;
		/* The theme sets justify-content:flex-end here; with flex-end the
		   overflow spills LEFT to negative coordinates and is unreachable by
		   scrolling (it hid the first two categories). flex-start puts the
		   overflow on the right where it can actually be scrolled to. */
		justify-content: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.site-header.layout--default .menu-section .main-navigation ul.menu::-webkit-scrollbar,
	.site-header.layout--default .menu-section .main-navigation ul.nav-menu::-webkit-scrollbar {
		display: none;
	}

	/* Keep items on one line and reclaim some of the 288px of side padding. */
	.site-header.layout--default .menu-section .main-navigation ul.menu > li,
	.site-header.layout--default .menu-section .main-navigation ul.nav-menu > li {
		flex: 0 0 auto;
	}

	.site-header.layout--default .menu-section .main-navigation ul.menu > li > a,
	.site-header.layout--default .menu-section .main-navigation ul.nav-menu > li > a {
		padding-left: var(--space-3);
		padding-right: var(--space-3);
		white-space: nowrap;
	}
}

/*
 * ---------------------------------------------------------------------------
 * TABLET COLUMNS. responsive.css:19 `@media (max-width:1025px)` forces
 * `#theme-content .row { flex-direction: column }` and `width:100%` on every
 * child, so the ENTIRE 768-1025px band renders as one column with the sidebar
 * dumped below the whole post list. Measured: 768px -> content 645 / sidebar
 * 645 stacked; 1024px -> content 631 but sidebar 901 (mismatched widths).
 *
 * A sidebar is only worth showing once it can hold a real 300px ad unit plus
 * gutters, so the two columns start at 900px rather than 768px:
 *   900px  -> content ~526 + sidebar 320
 *   1024px -> content ~665 + sidebar 320
 * Below 900px the column would starve the article text, so that band stays
 * single-column but lays the sidebar widgets out two-up instead of one long
 * wasted strip.
 * Above 1025px the theme's own 70/30 desktop rules resume untouched.
 * ---------------------------------------------------------------------------
 */
@media (min-width: 900px) and (max-width: 1025px) {
	body.right-sidebar #theme-content .row {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
	}

	body.right-sidebar #theme-content .row .primary-content {
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		/* Long Telugu compounds and fixed-width thumbs would otherwise inflate
		   the min-content floor and push the sidebar out of the row. */
		min-width: 0;
		margin-bottom: 0;
		order: 1;
	}

	body.right-sidebar #theme-content .row .secondary-sidebar {
		flex: 0 0 320px;
		width: 320px;
		max-width: 320px;
		margin: 0 0 0 var(--space-5);
		order: 2;
	}

	body.right-sidebar #theme-content .row .secondary-left-sidebar {
		display: none;
	}
}

/* 768-899px: one column, but the sidebar widgets go two-up below the posts
   rather than a single narrow strip down an otherwise empty 740px. */
@media (min-width: 768px) and (max-width: 899px) {
	body.right-sidebar #theme-content .row .secondary-sidebar .widget-area {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5);
		align-items: start;
	}
}

/*
 * ---------------------------------------------------------------------------
 * TABLET HEADER (769-1023px): behave exactly like mobile, per explicit request.
 *   - "Sections" hamburger instead of a row of categories
 *   - logo centred on its own line
 *   - no date/time (it is laptop-only; it was rendering flush-left and ugly
 *     between ~940px and 1023px, and only centres itself at >=1024px)
 * This mirrors main.css's own `@media (max-width: 769px)` mobile nav block
 * (button.menu-toggle / nav.main-navigation ul.menu ... around lines 1636-1850)
 * rather than inventing a second pattern, so the drawer looks and behaves the
 * same as it already does on phones.
 * ---------------------------------------------------------------------------
 */
@media (min-width: 769px) and (max-width: 1023px) {
	/* Logo centred on its own line; Sections + search + kebab on the next. */
	.site-header.layout--default .site-branding-section .row {
		flex-wrap: wrap;
		row-gap: var(--space-2);
	}

	.site-header.layout--default .site-branding-section .row > .site-branding {
		flex: 1 0 100%;
		max-width: 100%;
		display: flex;
		justify-content: center;
	}

	.site-header.layout--default .site-branding-section .row > .menu-section {
		flex: 1 0 100%;
		max-width: 100%;
		/* containing block for the absolutely-positioned dropdown panel */
		position: relative;
	}

	/* Show the "Sections" toggle. */
	.site-header.layout--default button.menu-toggle {
		background-color: transparent;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border: none;
		/* Inherited --menu-color is white (desktop menu sits on a dark bar);
		   on this white tablet header that rendered invisible. Match the
		   colour main.css gives the same button on phones. */
		color: rgba(0, 0, 0, 0.8);
		font-size: 16px;
		gap: var(--space-2);
		cursor: pointer;
	}

	/* Collapse the horizontal category row into the mobile dropdown panel. */
	.site-header.layout--default nav.main-navigation {
		position: static;
	}

	.site-header.layout--default nav.main-navigation ul.menu,
	.site-header.layout--default nav.main-navigation ul.nav-menu {
		display: none;
		position: absolute;
		left: 0;
		width: 100%;
		z-index: 10;
		padding: 10px 30px;
		background-color: var(--mobile-menu-bk-color);
		flex-wrap: nowrap;
		overflow: visible;
	}

	.site-header.layout--default nav.main-navigation.toggled ul.menu,
	.site-header.layout--default nav.main-navigation.toggled ul.nav-menu {
		display: block;
	}

	.site-header.layout--default nav.main-navigation ul.menu > li,
	.site-header.layout--default nav.main-navigation ul.nav-menu > li {
		display: block;
		float: none;
		width: 100%;
		position: relative;
		border-top: 0;
		border-bottom: 1px solid var(--mobile-menu-border-btm-color);
	}

	.site-header.layout--default nav.main-navigation ul.menu > li:last-child,
	.site-header.layout--default nav.main-navigation ul.nav-menu > li:last-child {
		border-bottom: none;
	}

	.site-header.layout--default nav.main-navigation ul.menu > li > a,
	.site-header.layout--default nav.main-navigation ul.nav-menu > li > a {
		display: block;
		float: none;
		width: 100%;
		padding: 9px 0;
		white-space: normal;
		text-align: left;
	}
}

/* Date/time is laptop-and-up only. */
@media (max-width: 1023px) {
	.site-header .top-header .top-date-time {
		display: none;
	}
}

/*
 * ---------------------------------------------------------------------------
 * TABLET INTERSTITIAL (769-1023px). Tablets are out of scope by decision;
 * effort goes to phones and laptops. Markup comes from
 * mu-plugins/tablet-notice.php and stays hidden at every other width, so the
 * real page still ships in full for crawlers.
 * Range note: 1024px and up gets the normal desktop layout (iPad landscape
 * included), and the phone layout is left alone - only genuine tablet portrait
 * is intercepted.
 *
 * The gate is four conditions, not just a width, because width alone caught the
 * wrong devices. Measured CSS viewports:
 *
 *   iPhone 16 / 14 Pro Max landscape  932x430   <- was blocked, is a phone
 *   iPhone 11 Pro Max landscape       896x414   <- was blocked, is a phone
 *   Galaxy S23 Ultra landscape        915x412   <- was blocked, is a phone
 *   Pixel 7 Pro landscape             892x412   <- was blocked, is a phone
 *   iPad mini 6 portrait              744x1133  <- was NOT blocked, is a tablet
 *
 * A reader turning their phone sideways is the single most common way to hit
 * 769-1023px, and on a site where 85-95% of traffic is mobile that made the
 * interstitial fire mostly at the wrong people. So:
 *
 *   min-width 700px    catches iPad mini portrait (744), which 769 missed
 *   max-width 1023px   1024+ is the desktop layout, unchanged
 *   min-height 700px   every phone in landscape is ~430px tall; tablets are 1100+
 *   orientation        tablets held upright; a phone in landscape cannot match
 *   pointer: coarse    a touch device, so a narrowed desktop window is not caught
 * ---------------------------------------------------------------------------
 */
.dn-tablet-block {
	display: none;
}

@media (min-width: 700px) and (max-width: 1023px) and (min-height: 700px) and (orientation: portrait) and (pointer: coarse) {
	.dn-tablet-block {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 999999;
		align-items: center;
		justify-content: center;
		padding: var(--space-6);
		background: #ffffff;
		text-align: center;
	}

	.dn-tablet-block__inner {
		max-width: 30rem;
	}

	.dn-tablet-block__brand {
		margin: 0 0 var(--space-5);
		color: var(--theme-color-red, #E4002B);
		font-size: var(--text-xl);
		font-weight: 700;
		letter-spacing: 0.02em;
	}

	.dn-tablet-block__title {
		margin: 0 0 var(--space-4);
		font-size: var(--text-2xl);
		line-height: 1.45;
	}

	.dn-tablet-block__msg {
		margin: 0 0 var(--space-3);
		font-size: var(--text-base);
		line-height: 1.8;
		color: var(--meta-text-color, #55565B);
	}

	.dn-tablet-block__msg--en {
		font-size: var(--text-sm);
		opacity: 0.75;
	}

	/* Nothing behind the overlay should be reachable. */
	html,
	body {
		overflow: hidden !important;
	}
}

/*
 * In-feed ad card, mobile. A real card measures 357px (12px padding + a 16:9
 * image + two clamped text lines + Read More + 12px padding), so the ad slot
 * reserves the same inner height and the feed keeps one steady rhythm instead
 * of a short ad box interrupting it. Reserving the height also means no layout
 * shift when a real ad loads into the slot later.
 */
@media (max-width: 639px) {
	.digital-newspaper-inline-ad .blaze_box_wrap {
		padding: var(--space-3);
	}

	.digital-newspaper-ad-slot--inline-feed {
		/* Fallback only. The real height is copied from a measured news card by
		   mu-plugins/card-line-budget.php, because the card height scales with
		   viewport width (the 16:9 image) and cannot be hard-coded. */
		min-height: 300px;
		height: 100%;
		margin: 0;
	}
}

/*
 * ---------------------------------------------------------------------------
 * MOBILE ARTICLE PAGE (<640px).
 *
 * Typography specificity note: the theme only ever styles the CONTAINER
 * (`.single .post-inner .entry-content`, main.css:5131 / responsive.css:445),
 * so paragraphs inherit those values. The site owner's Customizer Additional
 * CSS matches `p, li` DIRECTLY, and a direct match always beats an inherited
 * value no matter how specific the ancestor rule is - which is why the body
 * currently renders at weight 500 / line-height 1.8 rather than the theme's
 * values. To change it at all we must also match the elements directly; hence
 * `... .entry-content p` (0-3-1) rather than styling the container.
 *
 * Also note the theme switches to its "mobile" body values at 610px, while this
 * file uses 640px everywhere - the two systems are not aligned, so these rules
 * deliberately cover the whole sub-640px range.
 * ---------------------------------------------------------------------------
 */
@media (max-width: 639px) {
	/* Category badges directly under the headline - removed on phones, where
	   the space is better spent on the headline and the first paragraph.
	   Desktop keeps them. */
	.single .entry-header .single-header-categories {
		display: none;
	}

	/* 30px text in a 35px line box (1.17) collides for stacked Telugu matras. */
	.single h1.entry-title {
		line-height: 1.35;
	}

	.single .post-inner .entry-content p,
	.single .post-inner .entry-content li {
		font-size: 17px;
		font-weight: 600;
		line-height: 1.85;
		color: #23232a;
	}
}

/*
 * ---------------------------------------------------------------------------
 * ARTICLE AD SLOTS. Before this pass a phone reading an article saw ZERO ads:
 * the only slot reaching the DOM was --sidebar, which is display:none below
 * 640px, and --in-content never fired at all (see ad-slot-placements.php).
 * Two slots now, both below the fold, which keeps content well ahead of ad
 * volume for Better Ads / AdSense purposes.
 * Explicit heights are reserved so nothing shifts when a real unit loads.
 * ---------------------------------------------------------------------------
 */
.digital-newspaper-ad-slot--article-end {
	width: 100%;
	max-width: 336px;
	min-height: 280px;
}

@media (max-width: 639px) {
	.digital-newspaper-ad-slot--in-content {
		min-height: 250px;
	}
}

/*
 * ---------------------------------------------------------------------------
 * "Read More" pinned to the bottom-right corner of every card.
 *
 * Taken out of the text flow and anchored to .post-element (the text column),
 * so it sits in the same spot on every card no matter how the description
 * wraps. The description is trimmed by mu-plugins/card-line-budget.php so its
 * FINAL line stops short - 25% of the width on phones, 50% on laptops - which
 * is what keeps the text clear of the button instead of running under it.
 *
 * Selectors carry the same long prefix the card rules use: the mobile block
 * above styles .post-link-button through an #id, so a shorter selector here
 * would lose the cascade.
 * ---------------------------------------------------------------------------
 */
.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-element {
	position: relative;
}

.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-element > .post-link-button {
	display: inline-flex;
	align-items: center;
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	white-space: nowrap;
	font-weight: 600;
}

@media (max-width: 639px) {
	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .blaze_box_wrap {
		--dn-last-line-max: 25;
	}
}

@media (min-width: 640px) {
	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .blaze_box_wrap {
		--dn-desc-lines: 3;
		--dn-last-line-max: 50;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-excerpt p {
		-webkit-line-clamp: 3;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.6;
		margin: 0;
	}
}

/*
 * Reserve the description's full line budget regardless of how many lines the
 * trimmed text actually fills. Telugu words are long, so for some posts there
 * is no word count that produces a final line under the target width - the
 * text settles on fewer lines instead, which made card heights vary (324 vs
 * 300px when measured). Reserving the height keeps every card identical and
 * keeps the button level with the bottom of that reserved block.
 */
.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-excerpt p {
	min-height: calc(var(--dn-desc-lines, 2) * var(--dn-card-line, 24px));
}

@media (min-width: 640px) {
	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .blaze_box_wrap {
		--dn-card-line: 24px;
	}

	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-excerpt p {
		line-height: var(--dn-card-line);
	}
}

/*
 * ---------------------------------------------------------------------------
 * Mobile anchor ad (single posts). Phones only - on laptop the sidebar column
 * already carries the 300x250 and the 300x600 under "Latest Posts".
 * Height is reserved on <body> so the anchor never hides the end of the footer,
 * and the slot keeps its own height so nothing shifts when a real unit loads.
 * ---------------------------------------------------------------------------
 */
.dn-anchor-ad {
	display: none;
}

@media (max-width: 639px) {
	.dn-anchor-ad {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		background: #fff;
		border-top: 1px solid #DADADD;
		padding: 4px 0;
	}

	.digital-newspaper-ad-slot--anchor {
		width: 320px;
		max-width: 100%;
		min-height: 50px;
		margin: 0 auto;
	}

	body.single {
		padding-bottom: 62px;
	}
}

/*
 * Laptop description colour, matched to the phone.
 *
 * Size, weight, line-height and family were already identical at both widths
 * (15px / 600 / 24px / Noto Sans Telugu) - the laptop text only LOOKED thinner
 * because it inherited rgb(80,80,80) from the link wrapping the excerpt, while
 * the phone rule set an explicit near-black. add.css:552 sets
 * `.post-excerpt a { color: inherit !important }`, so the colour has to be
 * declared on the paragraph itself to take effect.
 */
@media (min-width: 640px) {
	.dn-feed.dn-cards #theme-content .row .primary-content .news-list-wrap > article .post-excerpt p {
		color: var(--post-title-color, #1f1f24);
	}
}

/*
 * Article body, all widths. This was previously scoped to phones, so laptop
 * readers still got the lighter inherited treatment: weight 500 and
 * rgb(64,64,64) against the phone's 600 and near-black. Size already matched at
 * 17px, so weight and colour were the whole difference.
 *
 * Declared on p/li rather than on .entry-content because the owner's Customizer
 * Additional CSS matches `p, li` directly, and a direct match beats a value
 * inherited from the container no matter how specific that container rule is.
 * The category badges under the headline stay phone-only (see the mobile block
 * above) - this is only the body copy.
 */
.single .post-inner .entry-content p,
.single .post-inner .entry-content li {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.85;
	color: #23232a;
}

/*
 * ---------------------------------------------------------------------------
 * PRE-LAUNCH CORRECTIONS (audited at 375px and 1366px).
 * ---------------------------------------------------------------------------
 */

/*
 * In-content article slot, laptop. The 250px reservation was written inside
 * the max-width:639px block, so above 640px the slot fell back to the generic
 * .digital-newspaper-ad-slot min-height of 100px and rendered 336x100 - not an
 * IAB size, and 180px shorter than the 336x280 unit that will actually load
 * there. That difference is a layout shift pushing the rest of the article
 * down after the ad arrives, which is exactly what the reserved heights exist
 * to prevent. Matches --article-end, which already reserves 280px everywhere.
 */
@media (min-width: 640px) {
	.digital-newspaper-ad-slot--in-content {
		min-height: 280px;
	}
}

/*
 * Static pages (Contact, Privacy Policy, Disclaimer) were left on the theme
 * default of 16px/500/#404040 while articles moved to 17px/600/#23232a, so the
 * two page types read as different sites. Same declaration as the .single rule
 * further up, and it needs the same element-level specificity for the same
 * reason: the Customizer's "Additional CSS" sets `p, li` directly, and a direct
 * element match beats any value inherited from an ancestor no matter how
 * specific that ancestor's selector is.
 */
.page .post-inner .entry-content p,
.page .post-inner .entry-content li,
.page .entry-content p,
.page .entry-content li {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.85;
	color: #23232a;
}

/*
 * Author archive heading, phones.
 *
 * add.css:(max-width:768px) hides `.ticker-news-section--*` with !important to
 * take the scrolling news ticker off small screens. The author archive's header
 * is wrapped in that same class name by
 * inc/extras/helpers.php:digital_newspaper_category_archive_author_html(), so it
 * was hidden as collateral: on a phone the author page opened straight into a
 * list of cards with no heading and no h1 at all.
 *
 * :not(.after-header) is what separates the two - the real ticker block carries
 * `after-header header-layout-banner-two` alongside the shared class, and it
 * stays hidden. Restores only the author header.
 */
@media (max-width: 768px) {
	body.archive.author .ticker-news-section--full-width--layout:not(.after-header),
	body.archive.author .ticker-news-section--boxed--layout:not(.after-header) {
		display: block !important;
	}
}

/*
 * ---------------------------------------------------------------------------
 * "YOU MAY HAVE MISSED" — redesign
 *
 * The theme ships this section (template-parts/news-carousel/template-two.php)
 * as text-over-image cards: the headline, category, meta and excerpt are all
 * absolutely positioned on top of a darkened photo. On this site it rendered as
 * a row of near-black bars with barely legible text.
 *
 * TWO layouts now, split at 769px:
 *
 *   >=769px (tablet/desktop) — a horizontal strip of [small thumbnail | 2-line
 *   headline] items on white, unchanged from the original redesign.
 *
 *   <=768px (phone) — a full vertical card: image on top, bold headline,
 *   description below. The horizontal thumb-left version put a tiny 84x56
 *   thumbnail next to mostly-empty white space on a 367px-wide slide, which is
 *   the "not so good" the owner flagged - a phone screen has the width to show
 *   a real card, not a compressed ticker row. Title/excerpt sizing is pulled
 *   directly from the main homepage cards (21px/700 title, 15px/600 black
 *   excerpt) so this reads as the same site, just a secondary section.
 * ---------------------------------------------------------------------------
 */

/* Section frame: white, quiet. */
.news-carousel .news-carousel-post-wrap {
	background: #ffffff;
}

/* Arrows: keep, but quiet. Dots removed — a scannable strip needs neither chrome. */
.news-carousel .news-carousel-post-wrap .slick-dots {
	display: none !important;
}

/* Fallback for when the self-hosted Slick library (assets/lib/slick)
   fails to load/initialize for a visitor - the same "webfont/script
   never arrived for this reader" failure already seen with Font Awesome
   elsewhere on the site. Slick normally converts these into a track via
   JS-added inline styles; without it the bare markup is just block-level
   <article>s, which stack vertically instead of scrolling horizontally.
   Scoped to :not(.slick-initialized) - the class Slick itself adds on
   successful init - so this steps out of the way the moment Slick
   actually takes over, and never fights its own layout. */
.news-carousel .news-carousel-post-wrap:not(.slick-initialized) {
	display: flex;
	overflow-x: auto;
	gap: var(--space-4);
}

.news-carousel .news-carousel-post-wrap:not(.slick-initialized) > .carousel-item {
	flex: 0 0 auto;
	width: 300px;
}

@media (max-width: 768px) {
	.news-carousel .news-carousel-post-wrap:not(.slick-initialized) > .carousel-item {
		width: 85%;
	}
}

@media (min-width: 769px) {
	/* Each slide becomes a clean card cell with a hairline separator. */
	.news-carousel .carousel-item {
		background: #ffffff;
	}
	.news-carousel .carousel-item .blaze_box_wrap {
		padding: 10px 16px;
	}

	/* figure = the flex row: thumb left, text right, centered. */
	.news-carousel .carousel-item .post-thumb-wrap {
		display: flex !important;
		flex-direction: row !important;
		align-items: center;
		gap: 12px;
		position: static !important;
		margin: 0;
		background: transparent;
	}

	/* The image link: fixed small thumbnail, no longer the full card. */
	.news-carousel .carousel-item .post-thumb-wrap > a {
		flex: 0 0 84px;
		width: 84px;
		height: 64px;
		display: block;
		position: static !important;
		overflow: hidden;
		border-radius: 6px;
	}
	.news-carousel .carousel-item .post-thumb-wrap > a img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		border-radius: 6px;
		transition: transform .3s ease;
	}
	.news-carousel .carousel-item:hover .post-thumb-wrap > a img {
		transform: scale(1.05);
	}

	/* Kill the dark overlay entirely — the whole point of the redesign. */
	.news-carousel .carousel-item .thumb-overlay {
		display: none !important;
	}

	/* Text column: out of the image, static, dark on white. */
	.news-carousel .carousel-item .post-element {
		position: static !important;
		flex: 1 1 auto;
		min-width: 0;               /* let the headline clamp instead of overflowing */
		padding: 0 !important;
		background: transparent !important;
		transform: none !important; /* main.css slides .post-element up on hover */
		inset: auto !important;
	}
	.news-carousel .carousel-item .post-element-inner {
		padding: 0 !important;
	}

	/* Headline only at this width — no description, no meta, no button. */
	.news-carousel .carousel-item .post-categories,
	.news-carousel .carousel-item .post-meta,
	.news-carousel .carousel-item .post-excerpt,
	.news-carousel .carousel-item .post-link-button {
		display: none !important;
	}

	/* Headline: dark, medium-bold, two lines then ellipsis. */
	.news-carousel .carousel-item .post-title {
		margin: 0 !important;
		font-size: 14px !important;
		line-height: 1.4 !important;
		font-weight: 600 !important;
	}
	.news-carousel .carousel-item .post-title a {
		color: #1f1f24 !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-shadow: none !important;   /* main.css adds a shadow for legibility over the photo */
	}
	.news-carousel .carousel-item:hover .post-title a {
		color: var(--primary-color, #c8102e) !important;
	}
}

@media (max-width: 768px) {
	/* The wrap goes light-grey (matching the page's own background) so the
	   white card floating inside it reads as a distinct card, the same way
	   the main feed's cards float on grey with gaps between them — rather
	   than a white card on a white section with no edges at all. */
	.news-carousel .news-carousel-post-wrap {
		background: #F0F1F2;
		padding: 4px;
	}

	.news-carousel .carousel-item {
		background: transparent;
	}
	.news-carousel .carousel-item .blaze_box_wrap {
		background: #ffffff;
		border-radius: 10px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
		overflow: hidden;
		margin: 6px;
	}

	/* figure = a vertical card: image on top, text below. */
	.news-carousel .carousel-item .post-thumb-wrap {
		display: flex !important;
		flex-direction: column !important;
		position: static !important;
		margin: 0;
		background: transparent;
	}

	/* Full-width image, a real height instead of a postage stamp. */
	.news-carousel .carousel-item .post-thumb-wrap > a {
		display: block;
		width: 100%;
		height: 180px;
		position: static !important;
		overflow: hidden;
	}
	.news-carousel .carousel-item .post-thumb-wrap > a img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
	}

	/* Kill the dark overlay — text now sits below the image, not on it. */
	.news-carousel .carousel-item .thumb-overlay {
		display: none !important;
	}

	/* Text block below the image. */
	.news-carousel .carousel-item .post-element {
		position: static !important;
		padding: 14px 16px 16px !important;
		background: transparent !important;
		transform: none !important;
		inset: auto !important;
	}
	.news-carousel .carousel-item .post-element-inner {
		padding: 0 !important;
	}

	/* Category badge and meta stay off (keeps this section visually distinct
	   from the main feed's cards, which already carry that information) —
	   but the description the owner asked for is back. */
	.news-carousel .carousel-item .post-categories,
	.news-carousel .carousel-item .post-meta,
	.news-carousel .carousel-item .post-link-button {
		display: none !important;
	}

	/* Headline — same weight/size language as the main feed's cards. */
	.news-carousel .carousel-item .post-title {
		margin: 0 0 8px !important;
		font-size: 19px !important;
		line-height: 1.35 !important;
		font-weight: 700 !important;
	}
	.news-carousel .carousel-item .post-title a {
		color: #1f1f24 !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-shadow: none !important;
	}
	.news-carousel .carousel-item:active .post-title a {
		color: var(--primary-color, #c8102e) !important;
	}

	/* Description — re-enabled (the theme-level rule above hides it at
	   >=769px only), styled to match the main cards' excerpt exactly:
	   15px/600/black, so the two sections read as one design system. */
	.news-carousel .carousel-item .post-excerpt {
		display: block !important;
		margin: 0 !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		line-height: 1.6 !important;
		color: #1f1f24 !important;
		overflow: hidden;
		display: -webkit-box !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

/*
 * ---------------------------------------------------------------------------
 * LATEST-HEADLINES TICKER below the header (mu-plugins/header-headline-strip.php)
 *
 * Auto-scrolling marquee of [thumbnail | 2-line headline] items, matching the
 * supplied reference. The item set is rendered twice inside one track; the
 * track translates from 0 to -50%, so when it restarts the second (identical)
 * set is exactly where the first began and the loop is seamless. Pauses on
 * hover so a reader can stop and click; honours prefers-reduced-motion.
 * Desktop only — hidden below 768px by request.
 * ---------------------------------------------------------------------------
 */
.dn-headline-strip {
	width: 100%;
	background: #ffffff;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	overflow: hidden;                 /* clip the sliding track */
}

.dn-headline-strip__track {
	display: flex;
	align-items: stretch;
	width: max-content;               /* natural width so items sit in one line */
	animation: dn-headline-marquee 90s linear infinite;
	will-change: transform;
}

/* Pause when the reader hovers anywhere on the strip, so they can read + click. */
.dn-headline-strip:hover .dn-headline-strip__track {
	animation-play-state: paused;
}

@keyframes dn-headline-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }   /* one full set = half the doubled track */
}

.dn-headline-item {
	flex: 0 0 300px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	border-right: 1px solid #eeeeee;
	text-decoration: none;
}

.dn-headline-thumb {
	flex: 0 0 84px;
	width: 84px;
	height: 60px;
	border-radius: 6px;
	overflow: hidden;
	display: block;
}
.dn-headline-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.dn-headline-item:hover .dn-headline-thumb img {
	transform: scale(1.05);
}

.dn-headline-title {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
	color: #1f1f24;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.dn-headline-item:hover .dn-headline-title {
	color: var(--primary-color, #c8102e);
}

/* No motion for readers who ask the OS to reduce it: freeze the ticker. */
@media (prefers-reduced-motion: reduce) {
	.dn-headline-strip__track {
		animation: none;
	}
}

/* Desktop only, by request. The theme's after-header wrapper already hides
   below 768px; declaring it here too makes "desktop only" intentional and
   independent of that theme behaviour. */
@media (max-width: 768px) {
	.dn-headline-strip {
		display: none !important;
	}
}

/*
 * ---------------------------------------------------------------------------
 * Top-strip tagline weight — match the date beside it.
 *
 * The date (.top-date-time .date) renders at weight 600; the tagline
 * (mu-plugins/top-header-tagline.php) was weight 500, so it read lighter than
 * the date in the same red bar. Bumped to 600 so the two lines match.
 * ---------------------------------------------------------------------------
 */
.top-header .top-header-tagline,
.top-header-tagline {
	font-weight: 600;
	font-size: 15px;      /* match the date (.top-date-time .date is 15px) so it reads equally bold */
	line-height: 18px;    /* same line box as the date */
	padding-top: 0;       /* was 2px, which pushed it above the date's vertical centre */
}

/*
 * ---------------------------------------------------------------------------
 * MOBILE FOOTER cleanup (<=768px).
 *
 * The stock footer stacked four widgets with 50px-tall list rows (5 Most Read +
 * 8 Categories = ~650px of list alone), the brand widget sat in an odd grey
 * card the others didn't have, and alignment was mixed (logo centred, the rest
 * left). This makes it compact and consistent: centred brand block, no card,
 * tighter rows, and Categories in two columns.
 * ---------------------------------------------------------------------------
 */
@media (max-width: 768px) {
	/* Drop the grey card so all widgets sit on the same footer background. */
	.site-footer .widget {
		background: transparent !important;
		padding: 0 !important;
		margin-bottom: 30px;
	}

	/* Brand block (logo + about + email/phone) centred to match the logo. */
	.site-footer .widget:nth-child(1),
	.site-footer .widget:nth-child(1) *,
	.site-footer .widget:nth-child(2),
	.site-footer .widget:nth-child(2) * {
		text-align: center;
	}

	/* Tighter list rows — halve the vertical padding. */
	.site-footer .wp-block-latest-posts__list li,
	.site-footer .wp-block-categories-list li {
		padding-top: 5px !important;
		padding-bottom: 5px !important;
	}

	/* Categories in two columns: 8 items -> 4 rows. */
	.site-footer .wp-block-categories-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 18px;
	}

	/* Category items were centre-aligned, which left the chevron adrift from the
	   text; left-align so they read as a clean link list like Most Read. */
	.site-footer .wp-block-categories-list li {
		text-align: left !important;
	}
}

/*
 * ---------------------------------------------------------------------------
 * MOBILE FOOTER — visual rhythm pass (<=768px), on top of the structural
 * change made via mu-plugins/footer-restructure (widget config): Most Read
 * removed, Categories now sits in its place, about text trimmed to one line.
 *
 * This pass adds what a "designed" footer needs that pure content changes
 * can't give it: a divider between the two remaining sections, and bigger,
 * better-spaced social icons (42px circles with 5px gaps read as an
 * afterthought at the very bottom of the page).
 * ---------------------------------------------------------------------------
 */
@media (max-width: 768px) {
	/* Divider between [Brand] and [Categories] — the two sections now read as
	   distinct blocks instead of one continuous stack. */
	.site-footer .footer-widget:nth-child(2) {
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		padding-top: 24px;
		margin-top: 4px;
	}

	/* Divider above the bottom bar (social + copyright), same treatment. */
	.site-footer .bottom-footer {
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}

	/* Social icons: bigger circles, real spacing, a visible hover state —
	   the icons are the only interactive element in the whole footer and
	   deserve to look like one.
	   .social-icons is display:block in main.css, so `gap` alone is a no-op —
	   it needs display:flex to do anything, and the 5px on-screen spacing
	   the icons had was actually a margin on .social-icon, not a gap. */
	.site-footer .social-icons {
		display: flex !important;
		gap: 14px !important;
	}
	.site-footer .social-icons .social-icon {
		width: 46px;
		height: 46px;
		margin: 0 !important;
		transition: transform .2s ease, background-color .2s ease;
	}
	.site-footer .social-icons .social-icon:hover {
		transform: translateY(-2px);
	}

	/* Contact row (email/phone): slightly muted so it doesn't compete with
	   the about line above it, matching the tone WordPress core uses for
	   secondary footer text. */
	.site-footer .footer-widget:nth-child(1) .widget:nth-child(2) p {
		color: rgba(255, 255, 255, 0.75);
		font-size: 14px;
	}
}

/*
 * ---------------------------------------------------------------------------
 * MOBILE HEADING CONSISTENCY PASS (<=768px)
 *
 * The owner scrolled the mobile homepage and flagged inconsistent boldness/
 * size on section headings. Root cause: three unrelated heading systems on
 * one page —
 *   .section-title              ("Latest News")       hardcoded 700 / 20.8px
 *   .digital-newspaper-block-title ("You May Have Missed") Customizer-driven,
 *                                                        was Light 300 / 15.75px
 *   .wp-block-heading            ("Latest Posts","Categories") raw, UNSTYLED
 *                                                        WordPress block-editor
 *                                                        default: 24px/700
 *
 * The Customizer weight (300) was fixed separately via set_theme_mod (see
 * heading-fix.php) — that's a config value, not CSS. What's left is the third
 * system: .wp-block-heading was never given any site typography at all, so
 * widget titles rendered at the WordPress default regardless of context.
 * Sized down to match the other two (~20px) rather than left at 24px.
 * ---------------------------------------------------------------------------
 */
@media (max-width: 768px) {
	.widget .wp-block-heading {
		font-size: 20px !important;
		font-weight: 700 !important;
	}

	/* Sidebar "Latest Posts" sits on a light background — was #404040 (a
	   generic WordPress grey), now the same near-black used for every other
	   heading on the page. The footer's "Categories" is untouched here: it
	   already gets its (correct, white-on-dark) color from the footer's own
	   widget styling elsewhere in this file. */
	.widget-area .wp-block-heading {
		color: #1f1f24 !important;
	}
}

/*
 * "Latest Posts" widget — list item links.
 *
 * The heading ("Latest Posts") was already matched to the site's other
 * section headings above. The individual post links inside it
 * (.wp-block-latest-posts__post-title, e.g. "వారణాసి") were still at the raw
 * WordPress block-editor default — 17px/400 — while the SAME headline in the
 * main feed above it renders at 21px/700. Matched to the main feed's card
 * title exactly, so the same post title reads identically wherever it
 * appears on the page.
 */
@media (max-width: 768px) {
	.widget .wp-block-latest-posts__post-title {
		font-size: 21px !important;
		font-weight: 700 !important;
		color: #1f1f24 !important;
		line-height: 1.4 !important;
	}
}

/*
 * ---------------------------------------------------------------------------
 * STATIC PAGES (Disclaimer, Contact Us, Privacy Policy) — mobile full-width fix
 *
 * responsive.css (max-width:610px) maintains an explicit whitelist of which
 * page types get their container's desktop side-margins zeroed on phones:
 * .home, .single, .archive, .search, .error404 - `.page` was simply never
 * added to that list. The practical effect: every static Page rendered its
 * content column at 267px on a 375px phone (a permanent extra ~30px of
 * padding per side that .single/.home/.archive don't carry), while the
 * SAME container on a single post correctly goes full-width. That narrow
 * column is what made body text look oversized/cramped - the font-size was
 * never the problem, the column was a third narrower than everywhere else.
 *
 * This mirrors the theme's own two rules exactly, just adding `.page` to
 * each selector list, rather than editing the vendor file directly.
 * ---------------------------------------------------------------------------
 */
@media (max-width: 610px) {
	/*
	 * Getting here took three rounds because this theme has TWO separate,
	 * overlapping "full width on mobile" systems that don't fully agree with
	 * each other, and .page was missing from both:
	 *
	 *   1. responsive.css (`.home`/`.single`/`.archive`/`.search`/`.error404`,
	 *      NOT `.page`) zeroes the CONTAINER's margin and gives the ROW a
	 *      negative margin (Bootstrap's gutter trick: the row overflows back
	 *      into the container's own padding, then reappears as padding on
	 *      the row's children).
	 *   2. main.css (`.home`/`.single`/`.archive`/`.search`/`.error404`
	 *      AND, actually, `.page` - this one WAS already there) instead sets
	 *      the ROW's margin to a flat 0, no gutter trick, at HIGHER
	 *      specificity (`.digital-newspaper-container .row`, 5 classes,
	 *      beats my own row-margin attempt at 4).
	 *
	 * Net effect measured on this page specifically: the container's own
	 * 24px-each-side padding was NEVER zeroed for `.page` in either system,
	 * so the content column sat at 327px (container 375 minus 48px padding)
	 * instead of matching a single post's 351px. Rather than fight system 2's
	 * higher specificity to force system 1's gutter trick to apply, just
	 * remove the padding it was never given - container goes fully edge to
	 * edge (row's own margin is already 0 for pages, so it follows), and the
	 * existing `.page .primary-content .post-inner-wrapper { padding: 20px }`
	 * (main.css, unconditional, matches `.single .post-inner`'s own 20px)
	 * supplies the actual reading margin against the screen edge.
	 */
	.page .site-main.width-full-width--layout .digital-newspaper-container {
		margin: 0;
		padding: 0 !important;
	}

	/*
	 * flex-basis:70% (main.css's unconditional right-sidebar rule, meant for
	 * the desktop row-direction split) is irrelevant to width in this
	 * column-direction context, but .row's align-items:center still means a
	 * flex child only fills the cross-axis if given a definite size - an
	 * explicit width makes that definite instead of leaving it content-based.
	 */
	.page .site-main.width-full-width--layout .row .primary-content {
		width: 100%;
	}
}

/*
 * ---------------------------------------------------------------------------
 * MOBILE ARTICLE — top spacing pass (<=639px)
 *
 * Second pass, measured live: the first cut (10px/6px/8px) left the headline
 * feeling cramped against the top edge while the meta strip still had 17px
 * before the first paragraph — because that 17px was never coming from
 * .entry-meta's own margin-bottom at all. Adjacent margins collapse to
 * whichever is larger, and the theme's own <p> carries margin-top: 17px,
 * which was winning regardless of what .entry-meta's margin-bottom was set
 * to. Fixed at the actual source (the first paragraph) instead of continuing
 * to adjust a margin that wasn't the one rendering.
 *
 * Desktop is untouched throughout - the theme's own values look right there.
 * ---------------------------------------------------------------------------
 */
@media (max-width: 639px) {
	.single .post-inner {
		padding-top: 16px;   /* was 10px — a little more air above the headline */
	}

	.single h1.entry-title {
		font-size: 32px;     /* was 30px */
		margin-top: 0;
		margin-bottom: 3px;  /* was 6px — tighter to the meta strip below it */
	}

	.single .entry-header .entry-meta {
		margin-bottom: 8px;
	}

	/* The actual source of the meta-strip-to-copy gap: the theme's own
	   paragraph margin-top (17px), which was winning the margin-collapse
	   against .entry-meta's margin-bottom above regardless of that value. */
	.single .post-inner .entry-content > p:first-child {
		margin-top: 8px;
	}
}

/*
 * ---------------------------------------------------------------------------
 * FLOATING SHARE BUTTON (phones, single posts)
 * Markup + behaviour: mu-plugins/mobile-share-fab.php
 *
 * Bottom-right, deliberately offset to 74px so it clears the mobile anchor ad
 * that occupies the bottom 62px of the viewport (.dn-anchor-ad, z-index 9990)
 * instead of covering it. z-index sits just above the ad.
 *
 * Closed state: the stack is invisible, non-interactive and nudged down/scaled
 * slightly, so opening it reads as the options "rising" out of the button.
 * Items stagger via per-child transition-delay.
 * ---------------------------------------------------------------------------
 */
.dn-share-fab {
	display: none;               /* phones only, see media query below */
	position: fixed;
	right: 14px;
	bottom: 74px;
	z-index: 9991;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	transition: opacity .25s ease, visibility .25s ease;
}

.dn-share-fab.is-obscured {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Button + expanding stack. Keeps stack coords tied to the 52px circle
   even though views/shares sit in the column around it. */
.dn-share-fab__core {
	position: relative;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
}

.dn-share-fab__views,
.dn-share-fab__shares {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(17, 24, 39, .82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .09);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.5;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
}

.dn-share-fab__views i,
.dn-share-fab__shares i {
	font-size: 10px;
}

.dn-share-fab__shares i,
.dn-share-fab__views i { color: #9ca3af; }

.dn-share-fab__stat-num {
	color: #ffffff;
}

.dn-share-fab__toggle {
	position: relative;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--primary-color, #c8102e);
	color: #ffffff;
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
	-webkit-tap-highlight-color: transparent;
}

/* Both icons stacked; the button cross-fades between them. */
.dn-share-fab__toggle i {
	position: absolute;
	transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}
.dn-share-fab__toggle .dn-share-fab__toggle-close {
	opacity: 0;
	transform: rotate(-90deg) scale(.6);
}
.dn-share-fab.is-open .dn-share-fab__toggle i:first-child {
	opacity: 0;
	transform: rotate(90deg) scale(.6);
}
.dn-share-fab.is-open .dn-share-fab__toggle .dn-share-fab__toggle-close {
	opacity: 1;
	transform: rotate(0) scale(1);
}

.dn-share-fab__stack {
	position: absolute;
	right: 0;
	bottom: 62px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.dn-share-fab__item {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 17px;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
	opacity: 0;
	transform: translateY(14px) scale(.8);
	pointer-events: none;
	transition: opacity .18s ease, transform .26s cubic-bezier(.22, 1, .36, 1),
	            background-color .18s ease;
	-webkit-tap-highlight-color: transparent;
}

.dn-share-fab.is-open .dn-share-fab__item {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* Stagger: each item trails the one below it, so they rise in sequence. */
.dn-share-fab.is-open .dn-share-fab__item:nth-child(5) { transition-delay: .00s; }
.dn-share-fab.is-open .dn-share-fab__item:nth-child(4) { transition-delay: .045s; }
.dn-share-fab.is-open .dn-share-fab__item:nth-child(3) { transition-delay: .09s; }
.dn-share-fab.is-open .dn-share-fab__item:nth-child(2) { transition-delay: .135s; }
.dn-share-fab.is-open .dn-share-fab__item:nth-child(1) { transition-delay: .18s; }

/* On close, drop the stagger so it collapses as one motion. */
.dn-share-fab:not(.is-open) .dn-share-fab__item {
	transition-delay: 0s;
}

.dn-share-fab__item.is-facebook { background: #1877F2; }
.dn-share-fab__item.is-whatsapp { background: #25D366; }
.dn-share-fab__item.is-x        { background: #000000; }
.dn-share-fab__item.is-telegram { background: #229ED9; }
.dn-share-fab__item.is-copy     { background: #4B5563; }

/* Pin the brand color through every interaction state so nothing — a
   browser/WebView default focus ring, an :active press state, an in-app
   browser's own link styling, or (the one this list was missing) the
   browser's own default :visited-link color once a reader has actually
   tapped through to Facebook/etc once — can swap it out from under us. */
.dn-share-fab__item.is-facebook:active,
.dn-share-fab__item.is-facebook:focus,
.dn-share-fab__item.is-facebook:hover,
.dn-share-fab__item.is-facebook:visited { background: #1877F2; color: #ffffff; }
.dn-share-fab__item.is-whatsapp:active,
.dn-share-fab__item.is-whatsapp:focus,
.dn-share-fab__item.is-whatsapp:hover,
.dn-share-fab__item.is-whatsapp:visited { background: #25D366; color: #ffffff; }
.dn-share-fab__item.is-x:active,
.dn-share-fab__item.is-x:focus,
.dn-share-fab__item.is-x:hover,
.dn-share-fab__item.is-x:visited { background: #000000; color: #ffffff; }
.dn-share-fab__item.is-telegram:active,
.dn-share-fab__item.is-telegram:focus,
.dn-share-fab__item.is-telegram:hover,
.dn-share-fab__item.is-telegram:visited { background: #229ED9; color: #ffffff; }
.dn-share-fab__item.is-copy:active,
.dn-share-fab__item.is-copy:focus,
.dn-share-fab__item.is-copy:hover,
.dn-share-fab__item.is-copy:visited { background: #4B5563; color: #ffffff; }
.dn-share-fab__item:focus { outline: none; }

/* Copy confirmation: the icon becomes a tick (swapped in JS). */
.dn-share-fab__item.is-copied,
.dn-share-fab__item.is-copied:active,
.dn-share-fab__item.is-copied:focus,
.dn-share-fab__item.is-copied:hover {
	background: #15803D;
}

@media (max-width: 639px) {
	.dn-share-fab {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dn-share-fab,
	.dn-share-fab__item,
	.dn-share-fab__toggle i {
		transition: none;
	}
}

/* Desktop-only cursor-follower animation (Customizer "cursor_animation"): on
   touch devices there is no real cursor, but a tap still fires a synthetic
   mousemove, so the circle flashes at the tap point. Hide it wherever there's
   no fine pointer/hover, rather than by screen width, so a tablet or a
   narrowed desktop window aren't misjudged either way. */
@media (hover: none), (pointer: coarse) {
	.digital-newspaper-cursor {
		display: none !important;
	}
}

/* Share icons (mu-plugins/share-icons.php): inline SVG glyphs inside the
   existing <i> wrappers, replacing Font Awesome classes there so the
   share buttons never depend on that webfont loading. Sized at 1em so
   each <i>'s own font-size (already set per context - FAB item, FAB
   toggle, stat pill, or the wide "Share this Article" buttons) controls
   the glyph size exactly as the font icon used to.

   Centering: text-align/vertical-align on an inline glyph is fragile
   (the same lesson as the మెనూ label elsewhere in this file) - each
   wrapping <i> is made a flex box instead, so the SVG is centered by
   layout rather than by baseline/line-height guesswork. */
/* No `fill` here on purpose: each icon in share-icons.php already sets
   its own fill/stroke inline (fill="currentColor" for solid brand marks,
   fill="none" stroke="currentColor" for line icons) - a stylesheet rule
   forcing fill:currentColor overrides that fill="none" presentation
   attribute (stylesheet rules always beat presentation attributes), so
   every stroke-only icon rendered as a solid filled blob instead of a
   line drawing. That was the "completely black icon" bug. */
.dn-icon {
	width: 1em;
	height: 1em;
	display: block;
}

.dn-share-fab__item i,
.dn-share-fab__toggle i,
.dn-share-fab__shares i,
.dn-share-fab__views i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * ---------------------------------------------------------------------------
 * MOBILE HERO REDESIGN (<=768px) — desktop untouched
 *
 * Three stacked rows: (1) logo alone, centered, (2) the
 * "SOCIAL, ECONOMIC & POLITICAL NEWS" tagline, (3) hamburger + its label on
 * the left, search (and the 3-dot menu) grouped on the right.
 *
 * The theme's own "layout--three" header already renders the logo
 * (.site-branding) and the hamburger/search cluster (.header-smh-button-wrap)
 * as siblings inside one .row, in that exact DOM order, with the new
 * tagline (added via mu-plugins/mobile-hero-tagline.php) as a third sibling
 * in between them — so no reordering is needed, just stacking each one on
 * its own full-width line instead of the theme's normal side-by-side split.
 * ---------------------------------------------------------------------------
 */
.dn-mobile-hero-tagline {
	display: none; /* desktop: this element only exists for the mobile hero */
}

@media (max-width: 768px) {
	.top-header {
		display: none !important;
	}

	.site-header.layout--three .main-header .site-branding-section .row {
		display: flex;
		flex-direction: column;
		align-items: center;
		row-gap: 4px;
	}

	.site-header.layout--three .main-header .site-branding-section .site-branding {
		width: 100%;
		text-align: center;
		padding: 0;
	}

	.dn-mobile-hero-tagline {
		/* Flex + justify-content/align-items instead of text-align + line-height
		   — bulletproof horizontal AND vertical centering that doesn't depend
		   on font metrics or line-height math working out. */
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: stretch;   /* the parent's align-items:center otherwise
		                          shrink-wraps this to its content width
		                          before the 100vw breakout is applied */
		/* Full-bleed past the row's own container padding, to the actual
		   viewport edge — standard break-out trick, robust regardless of
		   the exact padding value (which can vary by breakpoint). */
		width: 100vw;
		margin-left: calc(-50vw + 50%);
		margin-right: calc(-50vw + 50%);
		min-height: 22px;   /* was 30px — thinner strip */
		/* Same total (6+2=8) as the earlier symmetric 4/4 — same overall
		   strip height — just shifted the ratio: 4/4 measured too high on
		   the real device, 14px/2px (sum 16) overshot too low. Splitting
		   the difference while keeping the sum fixed keeps the strip's
		   height exactly where it was already approved. */
		padding: 6px 12px 2px;
		box-sizing: border-box;
		text-align: center;
		/* This is plain English text, but the theme's global font-family
		   loads "Noto Sans Telugu" first — a font whose vertical metrics
		   reserve significant space below the baseline for Telugu vowel
		   signs. Browsers use that reserved space to position the
		   baseline even when rendering plain Latin text, visibly skewing
		   it off-center. A plain Latin font stack for this element uses
		   normal, symmetric metrics instead. */
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		font-size: 12px;
		line-height: 1;
		font-weight: 700;
		letter-spacing: .02em;
		text-transform: uppercase;
		background: var(--theme-color-red, #c8102e);
		color: #ffffff;
	}

	.site-header.layout--three .header-smh-button-wrap {
		width: 100% !important; /* the theme's own mobile override — keep it */
		display: flex;
		align-items: center;
	}

	/* Hamburger stays left; margin-right:auto pushes every sibling after it
	   (search) into a tight group on the right, without needing to touch
	   their DOM order. */
	.site-header.layout--three .header-smh-button-wrap nav#site-navigation {
		margin-right: auto;
	}

	/* Reinforce flex + vertical centering on the toggle itself, in case
	   anything upstream overrides it — the icon and the label must be
	   centered against each other on the same cross-axis, not just each
	   independently "look" centered. */
	.site-header.layout--three .header-smh-button-wrap .menu-toggle {
		display: flex;
		align-items: center;
	}

	/* The hamburger's text is relabeled "Sections" -> "మెనూ" via JS
	   (mu-plugins/mobile-hero-tagline.php), not a CSS pseudo-element —
	   transform:translateY(-50%) centering assumes symmetric font metrics,
	   which Telugu glyphs don't have the same way Latin text does, so a
	   pseudo-element swap can visually sit off-center in a way plain text
	   in normal flex flow doesn't. The JS also sets aria-label="Sections"
	   first, so the real text swap doesn't change what screen readers
	   announce. */
	.site-header.layout--three .header-smh-button-wrap .menu-toggle .menu_txt {
		display: flex;
		align-items: center;
		line-height: 1;
		position: relative;
		top: 2px;   /* Telugu script sits visually high in its line box even
		               when the box itself is geometrically centered — nudges
		               the actual glyph ink down to match the icon. */
		font-size: 23px;
		font-weight: 700;
		color: var(--theme-color-red);
		padding-left: 6px;
	}

	/* The 3-dot menu only ever held Disclaimer/Contact Us/Privacy Policy
	   (verified against the live widget content) — those now live in the
	   footer instead, so this trigger is redundant on mobile. */
	.site-header.layout--three .header-smh-button-wrap .sidebar-toggle-wrap {
		display: none;
	}

	/* Matches the larger menu label above. */
	.site-header.layout--three .header-smh-button-wrap .search-trigger {
		font-size: 20px;
	}

	/* The logo link is display:block filling the full 100% width of its
	   container (no intrinsic width), so margin:auto alone has nothing to
	   center - it needs an actual width narrower than its container first.
	   width:fit-content shrinks it to the image's own size, then
	   margin:auto centers that shrunk box. text-align:center on an
	   ancestor never affected this - that only centers inline content. */
	.site-header.layout--three .main-header .site-branding-section .site-branding .custom-logo-link {
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Footer utility links (Disclaimer / Contact Us / Privacy Policy), added
   right after the logo + about text in the brand column. */
.dn-footer-links {
	margin-top: 14px;
	gap: 10px !important;
}

.dn-footer-links .wp-block-button__link {
	border: 1.5px solid var(--theme-color-red);
	color: var(--theme-color-red);
	background: transparent;
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	transition: background-color .18s ease, color .18s ease;
}

.dn-footer-links .wp-block-button__link:hover,
.dn-footer-links .wp-block-button__link:focus {
	background: var(--theme-color-red);
	color: #ffffff;
}

/* "పేజీ" (page) label in front of the numbered pagination row
   (mu-plugins/sitewide-icon-fixes.php) - this site's audience skews
   older and may not read a bare row of numbers as a page-navigation
   convention on sight. */
.pagination {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.pagination .dn-pagination-label {
	/* This span sits inside .pagination, so it inherited the button
	   styling meant for the number/arrow buttons next to it (main.css
	   ".pagination span, .pagination a") - fixed box size, background,
	   shadow. It's a plain-language label, not a button, so all of that
	   is reset back off. */
	height: auto;
	width: auto;
	background-color: transparent;
	box-shadow: none;
	display: inline;
	font-size: 18px;
	font-weight: 600;
	color: var(--meta-text-color, #666);
}