/* ==========================================================================
   UrduTube Refine SG — v2.0.19
   Premium redesign of the ORIGINAL UrduTube theme for shahidghumman.com.
   The site stays light. Palette (per brief, 2026-11-08):
   dark navy blue #102A4C, Dunya red #D71920, white #FFFFFF,
   black titles #111111, pale yellow title bands #FFF9E6,
   black ticker text #000000, gold #D5A021 kept as the accent.
   Nastaliq fonts and RTL come from the parent theme, unchanged.
   Header (v2.0.2): centred logo row 112px + topnav 46px + ticker 36px
   + 3px gold border = 197px desktop; mobile: logo 112px + hamburger
   bar 48px + ticker 36px + border = 199px. The header stays fixed,
   so body padding-top matches. (v2.0.3: nav links slimmed to fit one
   row — the 9-item primary menu + search wrapped and clipped at
   17px/18px padding; now 16px/12px, nowrap, 130px search.)
   Ticker: headlines enter from the LEFT and travel LEFT to RIGHT
   (track -50% to 0), 60s, each item RTL inside, black text on white,
   pause on hover, static when reduced motion is preferred.
   Home (v2.0.6): a "ہوم" item with a home icon is prepended to the
   primary menu by functions.php — first on the right in RTL.
   Video titles (v2.0.8): solid BLACK #111111, no fill, no outline,
   no stroke, no shadow — clean Nastaliq, normal weight, two lines
   max below the thumbnails. (v2.0.7's white text with a black
   outline looked distorted, so it was removed entirely.)
   Title background (v2.0.9): a pale yellow #FFF9E6 band behind the
   headline text only (the .blokpost-title area), not the whole card.
   Full titles (v2.0.10): the parent cut small-card headlines to
   8 words (6 in related videos) with "…", so only one line ever
   showed. The child now overrides videos-block, videos-recent,
   videos-archive and videos-related to print the FULL headline;
   the CSS two-line clamp does the limiting, so up to two complete
   lines show per card.
   Full titles everywhere (v2.0.11): the homepage renders blocks
   2, 4 and 6 (Russia news, Embassy, Interviews) through
   videos-grid, not videos-block, so those three sections were
   still one-line in v2.0.10. The child now also overrides
   videos-grid, videos-viewed, videos-liked, template-liked,
   content-search and posts-404, and the footer latest-videos list
   prints the full title too. (A headline longer than two lines is
   still cut at the second line by the clamp — that is the two-line
   cap itself, not a truncation bug.)
   Contact form (v2.0.12): [sg_contact_form] shortcode in
   functions.php for the ہم سے رابطہ page — nonce, honeypot and a
   minimum-time check against spam, server-side validation, mail
   via wp_mail() to the address the owner gave, Reply-To set to
   the visitor, Urdu success message. Styled in section 8 below.
   (v2.0.13: recipient corrected to shahidghummanofficial@gmail.com.)
   Categories, homepage sections and the navigation menu are the
   ORIGINAL ones (parent Redux blocks + primary menu) — unchanged.
   ========================================================================== */

:root {
	--sg-navy: #102A4C;
	--sg-navy-deep: #0B1E38;
	--sg-navy-soft: #1B3A5F;
	--sg-red: #D71920;
	--sg-red-dark: #B3121A;
	--sg-gold: #D5A021;
	--sg-gold-soft: #E3C766;
	--sg-white: #FFFFFF;
	--sg-bg: #F5F7FA;
	--sg-line: #E3E8EF;
	--sg-ink: #1C2733;
	--sg-muted: #5A6572;
}

/* ---------- Page base ---------- */
body {
	background: var(--sg-bg);
	padding-top: 197px;
	overflow-x: hidden;
}
@media (max-width: 991px) {
	body { padding-top: 199px; }
}

/* ==========================================================================
   1. HEADER — centred logo, navy topnav bar, breaking ticker
   ========================================================================== */
.site-header {
	height: auto;
	background: #fff;
	border-bottom: 3px solid var(--sg-gold);
	box-shadow: inset 0 4px 0 var(--sg-navy), 0 2px 14px rgba(16, 42, 76, .10);
}
/* Centred logo row: the original logo, larger, proportions kept. */
.sg-branding {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 112px;
	padding: 12px 0;
}
.sg-logo {
	width: 260px;
	height: auto;
}
.sg-logo img {
	width: 260px;
	max-width: 260px;
	height: auto;
	max-height: none;
}
/* Mobile hamburger bar (mobile only, below the logo). */
.sg-mobilebar {
	display: none;
}
@media (max-width: 991px) {
	.sg-mobilebar {
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--sg-navy);
		height: 48px;
	}
	.sg-mobilebar a {
		color: #fff;
		font-size: 24px;
		line-height: 1;
		padding: 8px 24px;
		text-decoration: none;
	}
	.sg-mobilebar a:hover { color: var(--sg-gold-soft); }
}

/* Full-width navy navigation bar: the EXISTING primary menu, rendered
   unchanged by wp_nav_menu, plus a compact search at the left end.
   Hidden on mobile, where the hamburger + slide-in panel take over. */
.sg-topnav {
	background: var(--sg-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 46px;
	padding: 0 10px;
}
.sg-topnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
}
.sg-topnav li { margin: 0; position: relative; }
.sg-topnav li a {
	display: block;
	color: #fff;
	padding: 10px 12px;
	font-size: 16px;
	line-height: 1.5;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: inset 0 -3px 0 transparent;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
/* Home item (v2.0.6, prepended by functions.php): small home icon
   before the "ہوم" label. In RTL the icon sits at the right of the
   label, so margin-left opens the gap between them. */
.sg-topnav li.menu-item-home .fa {
	font-size: 15px;
	margin-left: 6px;
}
.sg-topnav li a:hover {
	background: rgba(255, 255, 255, .08);
	color: var(--sg-gold-soft);
	box-shadow: inset 0 -3px 0 var(--sg-gold);
}
.sg-topnav li.current-menu-item > a,
.sg-topnav li.current_page_item > a {
	color: var(--sg-gold);
	box-shadow: inset 0 -3px 0 var(--sg-gold);
}
/* Sub-menus drop down from the navy bar. */
.sg-topnav li .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background: var(--sg-navy);
	min-width: 200px;
	flex-direction: column;
	box-shadow: 0 12px 24px rgba(0, 0, 0, .25);
	z-index: 99999;
}
.sg-topnav li:hover > .sub-menu,
.sg-topnav li.hover > .sub-menu { display: flex; }
.sg-topnav li .sub-menu li a { padding: 10px 16px; font-size: 16px; }
.sg-topnav li .sub-menu li a:hover { background: var(--sg-navy-soft); }
/* Compact search inside the nav bar. */
.sg-nav-search {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}
.sg-nav-search input[type="search"] {
	width: 130px;
	height: 32px;
	padding: 0 12px;
	font-size: 14px;
	color: #fff;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
}
.sg-nav-search input[type="search"]::placeholder { color: rgba(255, 255, 255, .75); }
.sg-nav-search button {
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: var(--sg-gold);
	color: var(--sg-navy);
	font-size: 14px;
	line-height: 32px;
	text-align: center;
	cursor: pointer;
	padding: 0;
}
.sg-nav-search button:hover { background: var(--sg-red); color: #fff; }
@media (max-width: 991px) {
	.sg-topnav { display: none; }
}

/* Breaking-news ticker: red label, scrolling latest headlines. */
.sg-ticker {
	display: flex;
	align-items: stretch;
	background: #fff;
	border-bottom: 1px solid var(--sg-line);
	height: 36px;
	overflow: hidden;
}
.sg-ticker-label {
	background: var(--sg-red);
	color: #fff;
	display: flex;
	align-items: center;
	padding: 0 16px;
	font-size: 15px;
	white-space: nowrap;
}
.sg-ticker-viewport {
	flex: 1;
	overflow: hidden;
	position: relative;
	direction: ltr;
}
.sg-ticker-track {
	display: inline-flex;
	align-items: center;
	height: 36px;
	white-space: nowrap;
	direction: ltr;
	/* Left-to-right travel: the track starts one copy-width to the
	   left and glides right, so headlines enter from the LEFT edge.
	   60s — slow enough to read a whole headline. */
	animation: sg-ticker-scroll 60s linear infinite;
	will-change: transform;
}
.sg-ticker:hover .sg-ticker-track { animation-play-state: paused; }
.sg-ticker-item { display: inline-flex; align-items: center; direction: rtl; }
.sg-ticker-item a {
	color: #000000;
	padding: 0 10px;
	font-size: 15px;
	text-decoration: none;
}
.sg-ticker-item a:hover { color: var(--sg-red); }
.sg-ticker-dot { color: var(--sg-gold); }
@keyframes sg-ticker-scroll {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}
/* Reduced motion: the ticker stands still, showing the first
   headlines — no movement at all. */
@media (prefers-reduced-motion: reduce) {
	.sg-ticker-track { animation: none; }
}
@media (max-width: 767px) {
	.sg-ticker-label { padding: 0 10px; font-size: 14px; }
}

/* Slide-in panel drops from below the taller fixed header. */
.sidebar-absolute {
	top: 197px;
	border-top: 3px solid var(--sg-gold);
	box-shadow: 0 12px 30px rgba(16, 42, 76, .18);
}
@media (max-width: 991px) {
	.sidebar-absolute { top: 199px; }
}
.custom-nav { border-bottom: 2px solid var(--sg-gold); }
.main-navigation ul li a,
.custom-nav ul li a {
	color: var(--sg-navy);
	border-bottom: 1px solid #F1EFE9;
	border-right: 3px solid transparent;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.main-navigation ul li a:hover,
.custom-nav ul li a:hover {
	background: var(--sg-navy);
	color: #fff;
	border-right-color: var(--sg-gold);
}
.main-navigation ul li.current-menu-item > a,
.custom-nav ul li.current-menu-item > a {
	background: var(--sg-bg);
	color: var(--sg-red);
	border-right-color: var(--sg-red);
}
.main-navigation .sub-menu { background: var(--sg-navy); }
.main-navigation .hover .sub-menu a:hover {
	background: var(--sg-navy-soft);
	color: var(--sg-gold-soft);
}

/* ==========================================================================
   2. HOMEPAGE — navy section titles, less whitespace, titles BELOW thumbs
   ========================================================================== */
#homeContent { padding-top: 8px; }
.videos-row { margin-bottom: 18px; }
.videos-row .block-head { margin-bottom: 12px; }
.videos-row .block-head h2 { border-bottom: 2px solid var(--sg-gold); margin-top: 0; }
.videos-row .block-head h2 > span.pull-right {
	background: var(--sg-navy);
	color: #fff;
	border-radius: 8px 8px 0 0;
	padding: 6px 22px;
}
.videos-row .block-head .more-button { background: transparent; padding: 0; }
.block-head .more-icon { color: var(--sg-gold); }
.videos-row .block-head .more-button:hover .more-icon { color: var(--sg-red); }
.videos-row .block-head .more-text a { color: var(--sg-navy); }
.videos-row .block-head .more-text a:hover { color: var(--sg-red); }

/* Featured first section: a slightly larger lead title. */
.sg-featured .block-post-first .blokpost-title a { font-size: 22px; }

/* ---------- Video cards ---------- */
.block-post-first .post-content,
.block-post-smallrow .post-content,
.block-post-grid .post-content {
	background: #fff;
	border: 1px solid var(--sg-line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(16, 42, 76, .06);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.block-post-first .post-content:hover,
.block-post-smallrow .post-content:hover,
.block-post-grid .post-content:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(16, 42, 76, .13);
	border-color: var(--sg-gold);
}

/* Thumbnails: the link wraps only the image, so the play icon stays
   centred on the picture and the title sits below it. */
.thumbnail-row > a,
.thumbnail-row-small > a,
.block-post-grid .post-thumbnail > a {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--sg-navy);
}
.thumbnail-row img,
.thumbnail-row-small img { display: block; transition: transform .35s ease; }
.thumbnail-row > a:hover img,
.thumbnail-row-small > a:hover img { transform: scale(1.04); }

/* Headlines BELOW thumbnails (parent overlays them on the picture). */
.thumbnail-row .blokpost-title,
.thumbnail-row-small .blokpost-title,
.block-post-grid .post-thumbnail .blokpost-title {
	position: static;
	/* Pale yellow band behind the headline text only — not the
	   whole card. Comfortable padding on all sides. */
	background: #FFF9E6;
	padding: 10px 12px 12px;
	margin: 0;
}
.thumbnail-row .blokpost-title a,
.thumbnail-row-small .blokpost-title a,
.block-post-grid .post-thumbnail .blokpost-title a {
	/* Solid black Nastaliq, normal weight, no outline or shadow. */
	color: #111111;
	font-weight: normal;
	text-shadow: none;
	line-height: 1.9;
	/* Two full readable lines, cleanly cut — never a clipped half-line. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sg-featured .block-post-first .blokpost-title {
	background: #FFF9E6;
	padding: 10px 12px 12px;
}
.sg-featured .block-post-first .blokpost-title a {
	-webkit-line-clamp: 3;
	color: #111111;
	font-weight: normal;
	text-shadow: none;
}
.thumbnail-row .blokpost-title a:hover,
.thumbnail-row-small .blokpost-title a:hover,
.block-post-grid .post-thumbnail .blokpost-title a:hover { color: var(--sg-red); }

/* Play buttons: small, proportional red discs — never covering faces. */
.play-icon-small,
.play-icon-medium,
.play-icon-large {
	color: #fff;
	background: rgba(215, 25, 32, .92);
	border: 2px solid rgba(255, 255, 255, .9);
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.play-icon-small i,
.play-icon-medium i,
.play-icon-large i { text-shadow: none; }
.play-icon-large {
	width: 56px; height: 56px;
	font-size: 46px; line-height: 52px;
	margin: -28px 0 0 -28px;
}
.play-icon-medium {
	width: 44px; height: 44px;
	font-size: 36px; line-height: 40px;
	margin: -22px 0 0 -22px;
}
.play-icon-small {
	width: 34px; height: 34px;
	font-size: 26px; line-height: 30px;
	margin: -17px 0 0 -17px;
}

/* Meta strip under each card: light, with gold icons and visible views.
   The site hides view counts with a pre-existing !important rule; the
   owner asked for real view counts to show, so these rules outrank it.
   Date, comments and views sit in one aligned flex row. */
.block-post-row .post-info,
.block-post-smallrow .post-info,
.block-post-grid .post-info {
	background: var(--sg-bg);
	border-top: 1px solid var(--sg-line);
	color: var(--sg-muted);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2px 10px;
}
.post-info i { color: var(--sg-gold); }
.post-info .posted-on a {
	color: var(--sg-navy);
	font-weight: 600;
	text-decoration: none;
}
.post-info .post-comments { font-weight: 600; }
.post-info .post-views small { font-weight: 700; color: var(--sg-navy); }
.post-info .post-views { display: inline !important; }

/* ==========================================================================
   3. SINGLE VIDEO PAGE — premium 16:9 player, title, meta, related grid
   ========================================================================== */
.sg-player-wrap {
	background: #fff;
	border: 1px solid var(--sg-line);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(16, 42, 76, .10);
}
.sg-player-wrap .embed-container { border-radius: 12px; }
.entry-header .entry-title {
	color: #111111;
	font-weight: normal;
	text-shadow: none;
	line-height: 2.0;
}
.entry-header {
	border-bottom: 2px solid var(--sg-gold);
	padding-bottom: 10px;
	margin-bottom: 15px;
}
.sg-cat-chips { margin: 8px 0 2px; }
.sg-cat-chips a {
	display: inline-block;
	background: var(--sg-navy);
	color: #fff;
	border-radius: 999px;
	padding: 2px 14px;
	font-size: 14px;
	margin: 0 0 0 8px;
	text-decoration: none;
}
.sg-cat-chips a:hover { background: var(--sg-red); color: #fff; }
.entry-content { line-height: 2.1; }
.entry-content p { line-height: 2.1; }

/* Views on the single page: same un-hide as the cards. */
.entry-meta .video-views-info {
	display: flex !important;
	position: static;
	height: auto;
	align-items: center;
	gap: 8px;
}
.entry-meta .video-views-info p {
	position: static;
	font-size: 1rem;
	color: var(--sg-ink);
	margin: 0;
}
.entry-meta .video-views-info .fa { color: var(--sg-gold); }
.video-author-name { color: var(--sg-ink); }

.related-posts-header h2 { color: var(--sg-navy); }
#comment-toggle {
	background: var(--sg-navy);
	color: #fff;
	border-radius: 999px;
	padding: 10px 22px;
	transition: background .2s ease;
}
#comment-toggle:hover { background: var(--sg-red); color: #fff; }

/* Description card (shown only when the post has text — video posts
   usually carry just the reporter-credit lines; nothing invented). */
.sg-desc {
	background: #fff;
	border: 1px solid var(--sg-line);
	border-radius: 10px;
	padding: 16px 18px;
	margin: 15px 0;
}
.sg-desc h3 {
	color: var(--sg-navy);
	border-bottom: 2px solid var(--sg-gold);
	padding-bottom: 6px;
	margin: 0 0 10px;
	display: inline-block;
}
.sg-desc .entry-content { line-height: 2.1; }

/* Sharing buttons: round brand-coloured buttons. */
#sharing-row ul.sg-share-list {
	list-style: none;
	margin: 0;
	padding: 10px 0;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
#sharing-row ul.sg-share-list li { margin: 0; }
#sharing-row ul.sg-share-list a {
	display: inline-flex;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
#sharing-row ul.sg-share-list a:hover { transform: translateY(-2px); opacity: .92; }
#sharing-row ul.sg-share-list #fb { background: #1877F2; }
#sharing-row ul.sg-share-list #tw { background: #000000; }
#sharing-row ul.sg-share-list #tg { background: #229ED9; }
#sharing-row ul.sg-share-list #wa { background: #25D366; }
#sharing-row ul.sg-share-list #li { background: #0A66C2; }
#sharing-row ul.sg-share-list #sg-copy-link { background: var(--sg-navy); }
#sharing-row ul.sg-share-list #sg-copy-link.sg-copied { background: var(--sg-gold); }

/* Search form inside the slide-in mobile panel. */
.sg-panel-search { padding: 12px 14px; border-bottom: 1px solid var(--sg-line); }
.sg-panel-search form { display: flex; gap: 6px; }
.sg-panel-search input[type="search"] {
	flex: 1;
	height: 36px;
	padding: 0 12px;
	font-size: 15px;
	border: 1px solid #ddd;
	border-radius: 999px;
}
.sg-panel-search button {
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: var(--sg-red);
	color: #fff;
	font-size: 15px;
	cursor: pointer;
	padding: 0;
}

/* ==========================================================================
   4. CATEGORY / ARCHIVE PAGES — navy banner, clean grid, styled pages
   ========================================================================== */
.archive-header {
	background: var(--sg-navy);
	border-radius: 10px;
	padding: 18px 22px;
	margin-bottom: 16px;
}
.archive-header .page-title { color: #fff; margin: 0; line-height: 2.0; }
.archive-header .page-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	background: var(--sg-gold);
	margin-top: 8px;
}
.archive-listings {
	background: #fff;
	border: 1px solid var(--sg-line);
	border-radius: 10px;
	padding: 16px;
}
.pagination ul li a {
	background: #fff;
	border: 1px solid var(--sg-line);
	color: var(--sg-navy);
	border-radius: 6px;
}
.pagination ul li .current,
.pagination ul li a:hover {
	background: var(--sg-red);
	border-color: var(--sg-red);
	color: #fff;
}

/* ==========================================================================
   5. TYPOGRAPHY — Nastaliq-friendly spacing, aligned Latin dates
   ========================================================================== */
.blokpost-title,
.block-head h2,
.archive-header .page-title { line-height: 2.0; }
.post-info { line-height: 1.8; }
.post-info small { font-family: inherit; }

/* ==========================================================================
   6. SIDEBAR + FOOTER
   ========================================================================== */
.sidebar-main .widget-title {
	color: var(--sg-navy);
	border-bottom: 2px solid var(--sg-gold);
	padding-bottom: 8px;
}

/* Navy footer: brand + intro, links, categories, latest videos.
   v2.0.16 — consistent typography. The child previously set no
   footer font sizes, so the parent theme leaked through: headings
   26px, menu links 20px in a different font ("Alkatib"), and
   category, latest-video and intro text at 10px. Every footer
   size is now set explicitly in the site's own Nastaliq stack,
   and the brand logo is given the heading's height so the intro
   text lines up with the other columns' lists. */
.sg-footer {
	background: var(--sg-navy);
	color: #D7E0EC;
	margin-top: 40px;
	border-top: 3px solid var(--sg-gold);
	font-family: 'nafeesnastaleeq', 'Fajar Nastaleeq', sans-serif;
}
.sg-footer-top {
	max-width: 1320px;
	margin: 0 auto;
	padding: 36px 20px 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	align-items: flex-start;
}
.sg-footer-col { flex: 1 1 220px; min-width: 0; }
.sg-footer-col h4 {
	color: #fff;
	font-size: 22px;
	line-height: 1.8;
	font-family: 'nafeesnastaleeq', 'Fajar Nastaleeq', sans-serif;
	border-bottom: 2px solid var(--sg-gold);
	padding-bottom: 8px;
	margin: 0 0 12px;
	display: inline-block;
}
.sg-footer-col p {
	font-size: 15px;
	line-height: 2.0;
	margin: 0 0 10px;
}
.sg-footer-col ul { list-style: none; margin: 0; padding: 0; }
.sg-footer-col ul li { margin-bottom: 6px; line-height: 1.9; }
.sg-footer-col ul li a {
	color: #D7E0EC;
	text-decoration: none;
	font-size: 16px;
	line-height: 1.9;
	font-family: 'nafeesnastaleeq', 'Fajar Nastaleeq', sans-serif;
}
.sg-footer-col ul li a:hover { color: var(--sg-gold-soft); }
/* Latest videos (4th column): long titles read better one step smaller. */
.sg-footer-col:nth-child(4) ul li a { font-size: 15px; }
.sg-footer-logo {
	max-width: 210px;
	height: 50px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
}
.sg-footer-logo img { max-height: 100%; width: auto; max-width: 100%; }
.sg-footer-social { margin-top: 14px; }
.sg-footer-social a {
	display: inline-flex;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	align-items: center;
	justify-content: center;
	margin-left: 8px;
	text-decoration: none;
	transition: background .2s ease;
}
.sg-footer-social a:hover { background: var(--sg-red); color: #fff; }
.sg-footer-bottom {
	background: var(--sg-navy-deep);
	color: #AEBDD0;
	text-align: center;
	padding: 12px 16px;
	font-size: 13px;
	line-height: 1.8;
	font-family: 'nafeesnastaleeq', 'Fajar Nastaleeq', sans-serif;
}
.sg-footer-bottom a { color: var(--sg-gold-soft); }

/* Back-to-top button (shown by the footer script). */
#sg-top {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 99999;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: var(--sg-red);
	color: #fff;
	font-size: 18px;
	line-height: 44px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
	display: none;
	padding: 0;
}
#sg-top:hover { background: var(--sg-navy); }

/* ==========================================================================
   7. MOBILE — topnav hides (hamburger takes over), grids stack via
   Bootstrap, player stays full-width, no horizontal scrolling.
   ========================================================================== */
@media (max-width: 767px) {
	.sg-footer-top { flex-direction: column; gap: 24px; padding: 28px 16px 12px; }
	.sg-footer-col h4 { font-size: 20px; }
	.sg-footer-col ul li a { font-size: 16px; }
	.sg-footer-col p { font-size: 15px; }
	.sg-footer-bottom { font-size: 13px; }
	.videos-row .block-head h2 > span.pull-right { padding: 4px 14px; }
	.sg-featured .block-post-first .blokpost-title a { font-size: 19px; }
	#sg-top { bottom: 16px; left: 16px; }
}

/* ==========================================================================
   8. CONTACT FORM (v2.0.12) — [sg_contact_form] on the ہم سے رابطہ
   page. Professional Urdu RTL form: white card, dark navy headings,
   clearly labelled fields, red submit button. The honeypot line
   (.sg-hp) is moved off-screen rather than display:none, so bots
   still see and fill it.
   ========================================================================== */
.sg-contact-form {
	direction: rtl;
	text-align: right;
	background: #ffffff;
	border: 1px solid #dfe5ec;
	border-radius: 10px;
	max-width: 640px;
	margin: 24px auto;
	padding: 24px 26px;
	box-shadow: 0 2px 10px rgba(16, 42, 76, .08);
}
.sg-contact-form h3 {
	color: var(--sg-navy);
	font-size: 24px;
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--sg-navy);
}
.sg-contact-form .sg-field { margin: 0 0 16px; }
.sg-contact-form label {
	display: block;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 6px;
}
.sg-contact-form .sg-required { color: var(--sg-red); }
.sg-contact-form input[type="text"],
.sg-contact-form input[type="email"],
.sg-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: 16px;
	line-height: 1.7;
	color: #111111;
	background: #ffffff;
	border: 1px solid #c9d2dc;
	border-radius: 6px;
}
.sg-contact-form textarea { min-height: 140px; resize: vertical; }
.sg-contact-form input:focus,
.sg-contact-form textarea:focus {
	border-color: var(--sg-navy);
	outline: none;
	box-shadow: 0 0 0 2px rgba(16, 42, 76, .15);
}
.sg-contact-form .sg-submit { margin-bottom: 0; }
.sg-contact-form button[type="submit"] {
	background: var(--sg-red);
	color: #ffffff;
	border: none;
	border-radius: 6px;
	padding: 12px 30px;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
}
.sg-contact-form button[type="submit"]:hover { background: var(--sg-red-dark); }
.sg-contact-form .sg-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}
.sg-contact-success {
	background: #e8f5e9;
	border: 1px solid #a5d6a7;
	color: #1b5e20;
	border-radius: 6px;
	padding: 14px 16px;
	margin: 24px auto;
	max-width: 640px;
}
.sg-contact-errors {
	background: #fdecea;
	border: 1px solid #f5c6cb;
	color: #721c24;
	border-radius: 6px;
	padding: 14px 16px;
	margin: 0 0 16px;
}
.sg-contact-errors ul { margin: 8px 0 0; padding-right: 18px; }
@media (max-width: 767px) {
	.sg-contact-form { padding: 18px 16px; margin: 16px 0; }
	.sg-contact-form h3 { font-size: 21px; }
}

/* ==========================================================================
   9. HOMEPAGE VIDEO-GRID REPAIR (v2.0.17) — CSS only, no markup change.
   Root cause: the parent theme's equal-height hack
   (.block-post-first { margin-bottom: -9999px; padding-bottom: 9999px; })
   makes every featured card's box about 10,500px tall. The floated small
   cards then snag on uneven card heights, so the 4th small card drops
   below the big video and leaves a large white gap (seen in the
   Pakistani Community and Live Reports sections). The fix replaces the
   float layout with a real grid on the homepage only (body.home), so
   rows are always aligned and no card can drift into the wrong column.
   Colours, titles, play buttons, header, footer and menu are untouched.
   ========================================================================== */

/* Kill the -9999px hack on homepage featured cards. */
body.home .videos-row .block-post-first {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Homepage sections: 4-column grid. In RTL the first column is on the
   right, so the featured card (first in the markup) lands on the right,
   spanning two rows, and the four small cards form the 2x2 on the left.
   Grid-only sections (8 small cards) fill 4 per row automatically. */
body.home .videos-row .block-body {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}
body.home .videos-row .block-body > .block-post-first,
body.home .videos-row .block-body > .block-post-smallrow {
	float: none;
	width: auto;
	margin-bottom: 0;
	padding: 0;
}
body.home .videos-row .block-body > .block-post-first {
	grid-column: span 2;
	grid-row: span 2;
}

/* Thumbnails keep a true 16:9 ratio (overrides the parent's fixed
   190px / 410px heights on YouTube-thumbnail images). */
body.home .videos-row .thumbnail-row img,
body.home .videos-row .thumbnail-row-small img {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Tablet (768-991px): same as the parent's old sm breakpoint — featured
   card full-width on top, small cards 2 per row. */
@media (min-width: 768px) and (max-width: 991px) {
	body.home .videos-row .block-body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.home .videos-row .block-body > .block-post-first {
		grid-column: span 2;
		grid-row: auto;
	}
}

/* Mobile (up to 767px): one stacked column, featured card first. */
@media (max-width: 767px) {
	body.home .videos-row .block-body {
		grid-template-columns: minmax(0, 1fr);
	}
	body.home .videos-row .block-body > .block-post-first {
		grid-column: auto;
		grid-row: auto;
	}
}

/* ==========================================================================
   10. SCREEN-READER-ONLY H1 (v2.0.18) — AdSense/SEO preparation.
   The homepage had no H1 at all. header.php now prints a visually
   hidden H1 on the front page only (site name + role). This class
   hides it from sighted visitors while keeping it readable for
   search engines and screen readers. No visual change anywhere.
   ========================================================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}