/* =========================================================
   Pulse Bharat News — Mobile-First Stylesheet
   Base = mobile (jaisa screenshots mein hai), phir tablet/desktop
   media query se upgrade hota hai.
   ========================================================= */

:root {
	--pb-primary: #c8102e;
	--pb-dark: #1a1a1a;
	--pb-gray-bg: #f4f4f4;
	--pb-border: #e5e5e5;
	--pb-text: #222;
	--pb-text-light: #777;
	--pb-bottom-nav-height: 56px;
}

* { box-sizing: border-box; }

body {
	color: var(--pb-text);
	background: #fff;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	padding-bottom: var(--pb-bottom-nav-height); /* bottom nav ke liye jagah */
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.pb-page-wrap { max-width: 100%; overflow-x: hidden; }

/* ---------------- Top Utility Bar ---------------- */
.pb-top-bar {
	background: var(--pb-dark);
	color: #fff;
	font-size: 11px;
}
.pb-top-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 12px;
}
.pb-top-bar-left { display: flex; align-items: center; gap: 10px; }
.pb-lang-switcher { display: none; background: none; border: none; color: #fff; font-size: 11px; cursor: pointer; }
.pb-desktop-date { display: none; }
.pb-mobile-date { display: inline; }
.pb-top-bar-links { display: none; } /* desktop media query mein visible hoga */
.pb-caret { font-size: 9px; }

/* ---------------- Sticky Header ---------------- */
.pb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--pb-border);
}
.pb-header-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
}

.pb-hamburger-btn {
	background: none;
	border: none;
	width: 32px;
	height: 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	padding: 0;
}
.pb-hamburger-btn span {
	display: block;
	height: 2.5px;
	width: 100%;
	background: var(--pb-dark);
	border-radius: 2px;
}

.pb-logo {
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0; /* flex item ko shrink karne do, text overflow na ho */
}
.pb-logo img {
	max-height: 36px;
	width: auto !important;   /* WP ke HTML width/height attributes ko override karo taaki stretch na ho */
	height: auto;
	max-width: 100%;
	object-fit: contain;
}
.pb-logo a {
	font-size: 20px;
	font-weight: 800;
	color: var(--pb-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pb-header-right { display: flex; align-items: center; gap: 8px; }

.pb-subscribe-btn {
	background: var(--pb-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 20px;
	white-space: nowrap;
}

.pb-account-btn {
	display: none; /* mobile pe hide, desktop pe dikhega */
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--pb-gray-bg);
	align-items: center;
	justify-content: center;
}
.pb-icon-account { width: 16px; height: 16px; border: 2px solid var(--pb-text); border-radius: 50%; display: block; }

.pb-search-btn {
	background: #f2f2f2;
	border: none;
	border-radius: 50%;
	width: 34px;
	height: 34px;
	font-size: 14px;
	cursor: pointer;
}

/* Desktop-only category+icon nav row — hidden on mobile */
.pb-main-nav-row { display: none; }

.pb-search-bar {
	display: none;
	padding: 10px 12px;
	border-bottom: 1px solid var(--pb-border);
}
.pb-search-bar.pb-open { display: block; }
.pb-search-bar-inner { max-width: 700px; margin: 0 auto; }
.pb-search-form { display: flex; }
.pb-search-input { flex: 1; padding: 8px 12px; border: 1px solid var(--pb-border); border-radius: 20px 0 0 20px; }
.pb-search-submit { background: var(--pb-primary); color: #fff; border: none; padding: 0 16px; border-radius: 0 20px 20px 0; }

/* ---------------- Category Pills Row ---------------- */
.pb-pills-row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 10px 12px;
	scrollbar-width: none;
}
.pb-pills-row::-webkit-scrollbar { display: none; }
.pb-pill {
	flex-shrink: 0;
	background: var(--pb-gray-bg);
	border: 1px solid var(--pb-border);
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
}
.pb-pills-label { display: none; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--pb-text-light); align-items: center; gap: 3px; }

/* ---------------- Breaking News Ticker ---------------- */
.pb-breaking-ticker {
	display: flex;
	align-items: center;
	background: #fff5f5;
	border-top: 1px solid var(--pb-border);
	border-bottom: 1px solid var(--pb-border);
	overflow: hidden;
}
.pb-breaking-label {
	background: var(--pb-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	padding: 8px 12px;
	white-space: nowrap;
	flex-shrink: 0;
}
.pb-ticker-track { flex: 1; overflow: hidden; position: relative; height: 34px; }
.pb-ticker-list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	animation: pb-scroll-left 25s linear infinite;
}
.pb-ticker-list li { display: inline-block; padding: 8px 24px 8px 0; font-size: 13px; }
@keyframes pb-scroll-left {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

/* ---------------- Slide-out Hamburger Menu (Image 1) ---------------- */
.pb-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 199;
}
.pb-overlay.pb-open { display: block; }

.pb-slide-menu {
	position: fixed;
	top: 0;
	left: -85%;
	width: 85%;
	max-width: 340px;
	height: 100%;
	background: #fff;
	z-index: 200;
	overflow-y: auto;
	transition: left 0.25s ease;
}
.pb-slide-menu.pb-open { left: 0; }

.pb-slide-close {
	position: sticky;
	top: 0;
	background: #fff;
	width: 100%;
	text-align: right;
	border: none;
	font-size: 24px;
	padding: 14px 16px;
	cursor: pointer;
	border-bottom: 1px solid var(--pb-border);
}

.pb-slide-menu-list { list-style: none; margin: 0; padding: 0; }
.pb-menu-admin-tip {
	padding: 14px 18px;
	color: #888;
	font-size: 12px;
	line-height: 1.5;
	background: #fffbea;
	border-top: 1px dashed var(--pb-border);
	margin: 0;
}
.pb-menu-item > a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 18px;
	border-bottom: 1px solid var(--pb-border);
	font-size: 15px;
	font-weight: 600;
}
.pb-menu-item.pb-current > a { color: var(--pb-primary); }
.pb-toggle-icon {
	font-size: 18px;
	color: var(--pb-text-light);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.pb-submenu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 18px;
	max-height: 0;
	overflow: hidden;
	background: var(--pb-gray-bg);
	transition: max-height 0.3s ease;
}
.pb-submenu li a { display: block; padding: 10px 12px; font-size: 14px; }
.pb-has-children.pb-expanded > .pb-submenu { max-height: 800px; } /* generous cap taaki smooth transition ho, list chhoti hone ki wajah se safe hai */

/* ---------------- Main content ---------------- */
.pb-content-wrap { padding: 12px; }

.pb-hero-story { margin-bottom: 16px; }
.pb-hero-thumb { border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.pb-tag {
	display: inline-block;
	background: var(--pb-primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 4px;
	margin-bottom: 8px;
}
.pb-hero-title { font-size: 20px; line-height: 1.35; margin: 0 0 6px; font-weight: 800; }
.pb-post-meta { font-size: 12px; color: var(--pb-text-light); }

/* News card list */
.pb-news-list { display: flex; flex-direction: column; gap: 16px; }
.pb-news-card { border-bottom: 1px solid var(--pb-border); padding-bottom: 16px; }
.pb-card-link { display: flex; gap: 10px; }
.pb-card-thumb { flex-shrink: 0; width: 110px; height: 78px; border-radius: 6px; overflow: hidden; }
.pb-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pb-card-title { font-size: 15px; line-height: 1.35; margin: 0 0 6px; font-weight: 700; }
.pb-card-category { color: var(--pb-primary); font-weight: 700; }

.pb-pagination { text-align: center; margin: 20px 0; }
.pb-pagination .page-numbers { display: inline-block; padding: 8px 12px; margin: 0 3px; border: 1px solid var(--pb-border); border-radius: 4px; }
.pb-pagination .current { background: var(--pb-primary); color: #fff; }

/* Single article */
.pb-single-title { font-size: 22px; line-height: 1.35; margin: 10px 0; font-weight: 800; }
.pb-single-meta { font-size: 12px; color: var(--pb-text-light); margin-bottom: 12px; }
.pb-single-thumb { border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.pb-single-content { font-size: 16px; line-height: 1.8; }
.pb-single-content p { margin: 0 0 16px; }
.pb-share-row { display: flex; gap: 10px; align-items: center; margin: 20px 0; font-size: 13px; }
.pb-share-row a { background: var(--pb-gray-bg); padding: 6px 12px; border-radius: 16px; }
.pb-related-section { margin-top: 24px; }
.pb-related-section h3 { font-size: 17px; border-left: 4px solid var(--pb-primary); padding-left: 8px; }

/* Archive / 404 */
.pb-archive-title { font-size: 20px; font-weight: 800; margin-bottom: 14px; border-left: 4px solid var(--pb-primary); padding-left: 10px; }
.pb-404 { text-align: center; padding: 60px 20px; }
.pb-404 h1 { font-size: 60px; color: var(--pb-primary); margin: 0; }
.pb-btn { display: inline-block; margin-top: 16px; background: var(--pb-primary); color: #fff; padding: 10px 20px; border-radius: 20px; }

/* ---------------- Bottom Sticky Nav (Image 3) ---------------- */
.pb-bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--pb-bottom-nav-height);
	background: #fff;
	border-top: 1px solid var(--pb-border);
	display: flex;
	z-index: 150;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}
.pb-bottom-nav-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	font-size: 10px;
	color: var(--pb-text);
	font-weight: 600;
	background: none;
	border: none;
	font-family: inherit;
	cursor: pointer;
}
.pb-bottom-nav-item.pb-current { color: var(--pb-primary); }
.pb-icon { width: 20px; height: 20px; display: block; background: currentColor; opacity: 0.75; }
/* Simple icon shapes via CSS mask so no icon-font dependency is needed */
.pb-icon-home { -webkit-mask: radial-gradient(circle, transparent 0, transparent 0), none; clip-path: polygon(50% 0%, 100% 40%, 85% 40%, 85% 100%, 15% 100%, 15% 40%, 0% 40%); }
.pb-icon-star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pb-icon-play { clip-path: polygon(20% 0%, 100% 50%, 20% 100%); }
.pb-icon-doc { clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); }
.pb-icon-pin { clip-path: circle(40% at 50% 35%); }
.pb-icon-default { border-radius: 50%; }
.pb-icon-search { clip-path: polygon(0% 0%, 70% 0%, 70% 70%, 100% 70%, 100% 100%, 70% 100%, 70% 70%, 0% 70%); border-radius: 50%; }
.pb-icon-menu { clip-path: polygon(0 10%, 100% 10%, 100% 25%, 0 25%, 0 45%, 100% 45%, 100% 60%, 0 60%, 0 80%, 100% 80%, 100% 95%, 0 95%); }

/* Footer */
.pb-footer { padding: 20px 12px; background: var(--pb-gray-bg); margin-top: 20px; }
.pb-footer-bottom { text-align: center; font-size: 12px; color: var(--pb-text-light); padding-top: 12px; }

/* =========================================================
   TABLET UPGRADE (min-width 768px)
   ========================================================= */
@media (min-width: 768px) {
	.pb-content-wrap { max-width: 900px; margin: 0 auto; padding: 20px; }
	.pb-hero-title { font-size: 28px; }
	.pb-card-thumb { width: 160px; height: 110px; }
	.pb-card-title { font-size: 17px; }
	.pb-single-title { font-size: 30px; }
	.pb-slide-menu { left: -400px; width: 360px; }
}

/* =========================================================
   DESKTOP UPGRADE (min-width 1100px) — Jagran.com jaisa layout
   ========================================================= */
@media (min-width: 1100px) {

	body { padding-bottom: 0; } /* bottom mobile nav desktop pe nahi chahiye */

	/* ---- Top utility bar: language dropdown + sister-site links dikhao ---- */
	.pb-top-bar-inner { max-width: 1280px; margin: 0 auto; padding: 6px 20px; }
	.pb-mobile-date { display: none; }
	.pb-desktop-date { display: inline; }
	.pb-lang-switcher { display: inline-flex; align-items: center; gap: 3px; }
	.pb-top-bar-links { display: flex; gap: 16px; }
	.pb-top-bar-links a { color: #ccc; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; }
	.pb-top-bar-links a:hover { color: #fff; }

	/* ---- Main header: wider, hamburger hides, account+subscribe show ---- */
	.pb-header-inner { max-width: 1280px; margin: 0 auto; padding: 14px 20px; }
	.pb-hamburger-btn { display: none; }
	.pb-logo a, .pb-logo img { max-height: 52px; }
	.pb-logo img { width: auto !important; }
	.pb-logo a { font-size: 26px; }
	.pb-account-btn { display: flex; }
	.pb-search-btn { display: none; } /* desktop search icon nav-row mein hai */

	/* ---- Desktop nav row: categories (with dropdowns) + शहर/राशिफल/वीडियो/Search/Menu icons ---- */
	.pb-main-nav-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 20px;
		border-top: 1px solid var(--pb-border);
	}

	/* nav apne container ke andar hi rahe (flex:1) taaki overflow-detection JS ke liye
	   ek stable width mile — utilities column apni natural width leta hai */
	.pb-desktop-nav { flex: 1; min-width: 0; overflow: hidden; }

	.pb-desktop-nav-list {
		display: flex;
		align-items: center;
		gap: 22px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.pb-nav-item { position: relative; }
	.pb-nav-item > a {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 14px;
		font-weight: 700;
		padding: 14px 0;
		white-space: nowrap;
	}
	.pb-nav-item > a:hover { color: var(--pb-primary); }
	.pb-nav-item.current-menu-item > a { color: var(--pb-primary); }
	.pb-nav-item .pb-caret { font-size: 9px; padding: 6px 2px; cursor: pointer; }

	/* Dropdown panel — hover (mouse) ya .pb-open class (click/touch/keyboard) se khulta hai */
	.pb-dropdown-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 210px;
		background: #fff;
		border: 1px solid var(--pb-border);
		border-radius: 4px;
		box-shadow: 0 10px 24px rgba(0,0,0,0.1);
		list-style: none;
		margin: 0;
		padding: 6px 0;
		z-index: 130;
	}
	.pb-has-dropdown:hover > .pb-dropdown-menu,
	.pb-has-dropdown.pb-open > .pb-dropdown-menu { display: block; }
	.pb-dropdown-menu li { position: relative; }
	.pb-dropdown-menu li a {
		display: block;
		padding: 9px 16px;
		font-size: 13px;
		font-weight: 600;
		white-space: nowrap;
	}
	.pb-dropdown-menu li a:hover { background: var(--pb-gray-bg); color: var(--pb-primary); }
	/* teesra level (agar kabhi ho) — right side khulta hai taaki overlap na ho */
	.pb-dropdown-menu .pb-dropdown-menu { top: -6px; left: 100%; }

	/* "अन्य" (More) overflow button — jab categories row mein fit nahi hoti to JS unhe yahan move karta hai */
	.pb-nav-more { position: relative; }
	.pb-more-hidden { display: none; }
	.pb-more-toggle {
		background: none;
		border: none;
		font-family: inherit;
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 14px;
		font-weight: 700;
		padding: 14px 0;
		cursor: pointer;
		color: var(--pb-text);
		white-space: nowrap;
	}
	.pb-more-toggle:hover { color: var(--pb-primary); }
	.pb-more-toggle .pb-caret { font-size: 9px; }
	#pb-more-dropdown { left: auto; right: 0; } /* last item hone ki wajah se right-align, viewport se bahar na jaaye */

	.pb-nav-utilities { display: flex; align-items: center; gap: 18px; }
	.pb-nav-util-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		font-size: 10px;
		font-weight: 600;
		color: var(--pb-text-light);
		background: none;
		border: none;
		cursor: pointer;
		padding: 10px 0;
	}
	.pb-nav-util-item .pb-icon { width: 16px; height: 16px; }

	/* ---- Category pills row: "फोकस" label + pills, no horizontal scroll needed ---- */
	.pb-pills-row { max-width: 1280px; margin: 0 auto; padding: 10px 20px; overflow: visible; }
	.pb-pills-label { display: inline-flex; }

	/* ---- Mobile ticker hidden on desktop — replaced by right-column ब्रेकिंग box ---- */
	.pb-mobile-only-ticker { display: none; }

	/* ---- Slide menu becomes a right-side panel triggered by desktop "Menu" button ---- */
	.pb-slide-menu { left: auto; right: -400px; width: 360px; transition: right 0.25s ease; }
	.pb-slide-menu.pb-open { left: auto; right: 0; }

	/* ---- 3-column homepage layout ---- */
	.pb-home-layout {
		max-width: 1280px;
		margin: 0 auto;
		padding: 20px;
		display: grid;
		grid-template-columns: 240px 1fr 320px;
		gap: 24px;
		align-items: start;
	}
	.pb-home-left { display: block; }
	.pb-col-heading {
		font-size: 15px;
		font-weight: 800;
		border-bottom: 2px solid var(--pb-primary);
		padding-bottom: 8px;
		margin: 0 0 10px;
	}
	.pb-left-news-list { list-style: none; margin: 0; padding: 0; }
	.pb-left-news-list li { padding: 10px 0; border-bottom: 1px solid var(--pb-border); font-size: 13px; line-height: 1.4; }
	.pb-left-news-list li:first-child { padding-top: 0; }
	.pb-left-news-list a { font-weight: 600; }
	.pb-left-news-cat { display: block; color: var(--pb-primary); font-size: 11px; font-weight: 700; margin-top: 4px; }

	.pb-home-center .pb-hero-title { font-size: 26px; }
	.pb-load-more-btn { display: inline-block; }

	.pb-home-right { display: flex; flex-direction: column; gap: 20px; }
	.pb-ad-slot { background: var(--pb-gray-bg); border: 1px solid var(--pb-border); border-radius: 4px; padding: 10px; text-align: center; }
	.pb-ad-label { display: block; font-size: 10px; color: var(--pb-text-light); letter-spacing: 1px; margin-bottom: 8px; }
	.pb-ad-placeholder { height: 250px; display: flex; align-items: center; justify-content: center; color: var(--pb-text-light); font-size: 13px; background: #fff; }

	.pb-breaking-box { border: 1px solid var(--pb-border); border-radius: 4px; overflow: hidden; }
	.pb-breaking-box-title {
		background: var(--pb-primary);
		color: #fff;
		font-size: 14px;
		font-weight: 800;
		margin: 0;
		padding: 10px 14px;
	}
	.pb-breaking-box-list { list-style: none; margin: 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 12px; }
	.pb-breaking-box-list li { display: flex; gap: 10px; align-items: center; }
	.pb-breaking-box-thumb { flex-shrink: 0; width: 64px; height: 48px; border-radius: 4px; overflow: hidden; }
	.pb-breaking-box-thumb img { width: 100%; height: 100%; object-fit: cover; }
	.pb-breaking-box-link { font-size: 13px; font-weight: 600; line-height: 1.35; }

	/* ---- General content on non-home pages gets breathing room too ---- */
	.pb-content-wrap { max-width: 1280px; }
	.pb-news-list.pb-grid-desktop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (min-width: 1280px) {
	.pb-home-layout { grid-template-columns: 260px 1fr 340px; }
}