/*==================================================================================

	MODERN BLOG  —  SUPERBLOGGER WEB TEMPLATE
	Prefix: .wiz-*


	NAAM RAKHNE KA USOOL
	--------------------

	Har class "wiz-" se shuru hoti hai, taake Bootstrap ki apni classes se
	kabhi na takraye (.btn, .card, .badge, .text-primary sab Bootstrap ke
	hain — hamare wiz-btn, wiz-card, wiz-badge, wiz-text-primary alag).

	Do qism ki classes hain:

	1  GLOBAL — jo poori site me baar baar lagti hain. Naam Bootstrap ke
	   andaz par: base class + variant.

	       wiz-btn   wiz-btn-primary   wiz-btn-outline-primary   wiz-btn-sm
	       wiz-badge wiz-badge-primary
	       wiz-text-primary  wiz-bg-primary  wiz-border-primary
	       wiz-card  wiz-card-title  wiz-card-excerpt
	       wiz-thumb wiz-thumb-inner wiz-thumb-wide

	2  SECTION — jo sirf ek hisse ki hain. Naam me "section" aata hai aur
	   uske andar ki cheezein usi naam se aage barhti hain.

	       wiz-section-header      wiz-section-header-actions
	       wiz-section-hero        wiz-section-hero-title
	       wiz-section-footer      wiz-section-footer-main
	       wiz-section-widget      wiz-section-widget-title
	       wiz-section-comment     wiz-section-comment-body


	RANG
	----

	Panel se sirf DO rang aate hain: primary aur secondary. Un ki hex aur
	RGB dono shaklein tokens me hain (include/header.php bharta hai), is
	liye opacity badal kar aur bhi rang bana lete hain — misal ke taur par
	wiz-bg-primary-soft (12%) aur wiz-bg-primary-subtle (6%). Panel me rang
	badalte hi ye sab uske sath badal jate hain.


	FILE KI TARTEEB
	---------------

	01–03   tokens, base, utilities
	04–07   header, drawer, search
	08–10   global components (button, media, card)
	11–20   sections (hero, article, sidebar, footer …)
	21      responsive + print
	22–25   sections jo baad me aate hain
	26–27   overrides

	22 se 27 tak wale block JAAN BOOJH KAR aakhir me hain. Wo pehle likhe
	hue rules ko dabate hain (misal: header/footer ke layout variants, aur
	solid button ke matn ka rang). CSS me baad wala jeetta hai, is liye
	inhe upar le jana design badal dega — chahe rule bilkul wahi ho.

==================================================================================*/


/*----------------------------------------------------------------
	01  TOKENS  —  rang, naap, font, saya
----------------------------------------------------------------*/

:root{
	--wiz-accent:		#111827;

	/*
		DO DYNAMIC RANG — primary aur secondary.

		--wiz-link aur --wiz-link-hover purane naam hain jo poori file me
		chal rahe hain; --wiz-primary / --wiz-secondary unhi ke naye,
		saaf naam hain. header.php chaaron ko panel se bharta hai, is liye
		dono shaklein hamesha ek hi rang par rehti hain.

		-rgb wali shakl laazmi hai: neeche ke tamam halke shade
		"rgba(var(--wiz-primary-rgb), .12)" ki tarah bante hain, aur hex
		ko rgba() me nahi daala ja sakta.
	*/
	--wiz-link:			#1d4ed8;
	--wiz-link-hover:	#1e40af;

	--wiz-primary:			#1d4ed8;
	--wiz-primary-rgb:		29, 78, 216;
	--wiz-secondary:		#1e40af;
	--wiz-secondary-rgb:	30, 64, 175;

	--wiz-body:			#ffffff;
	--wiz-soft:			#f7f7f8;
	--wiz-card:			#ffffff;

	--wiz-text:			#16181d;
	--wiz-text-soft:		#3f444e;
	--wiz-text-muted:			#6b7280;
	--wiz-text-faint:			#9ca3af;

	--wiz-border:		#e6e7eb;
	--wiz-border-strong:	#d4d6dc;

	--wiz-radius:		10px;
	--wiz-radius-lg:		16px;

	--wiz-shadow-sm:		0 1px 2px rgba(16,24,40,.05);
	--wiz-shadow-md:		0 6px 20px rgba(16,24,40,.08);

	--wiz-ui:			"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wiz-serif:			"Source Serif 4", Georgia, "Times New Roman", serif;

	--wiz-container:			1240px;
	--wiz-reading:			720px;
	--wiz-section-header-h:		66px;

	--wiz-ease:			180ms cubic-bezier(.4,0,.2,1);
}

[data-wiz-theme="dark"]{
	--wiz-accent:		#f3f4f6;
	--wiz-link:			#93b4ff;
	--wiz-link-hover:	#bfd0ff;

	--wiz-body:			#0d0f14;
	--wiz-soft:			#14171f;
	--wiz-card:			#14171f;

	--wiz-text:			#e8eaef;
	--wiz-text-soft:		#c3c7d1;
	--wiz-text-muted:			#9aa1ad;
	--wiz-text-faint:			#6b7280;

	--wiz-border:		#242833;
	--wiz-border-strong:	#333a49;

	--wiz-shadow-sm:		0 1px 2px rgba(0,0,0,.5);
	--wiz-shadow-md:		0 6px 20px rgba(0,0,0,.55);
}


/*----------------------------------------------------------------
	02  BASE  —  body, link, container, reading column
----------------------------------------------------------------*/

body.wiz-body{
	background:var(--wiz-body);
	color:var(--wiz-text);
	font-family:var(--wiz-ui);
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
body.wiz-body a{color:var(--wiz-link);text-decoration:none;}
body.wiz-body a:hover{color:var(--wiz-link-hover);text-decoration:underline;}
body.wiz-body img{max-width:100%;height:auto;}
body.wiz-body :focus-visible{outline:2px solid var(--wiz-link);outline-offset:3px;border-radius:4px;}
body.wiz-body ::selection{background:#dbeafe;color:#111827;}

.wiz-container{max-width:var(--wiz-container);margin:0 auto;padding:0 20px;}
.wiz-reading{max-width:var(--wiz-reading);margin:0 auto;}

/*
	Full-width page layout (superadmin > Pages > Page Layout).

	wiz-reading ka 720px parhne ke liye behtareen hai, magar landing page par
	tang lagta hai — wahan content ko poori chaurai milti hai (wiz-container ki
	apni had ke andar).
*/
.wiz-reading-wide{max-width:100%;margin:0 auto;}


/*
	Contact layout ke cards — email aur phone, wahi jo Schema settings me
	likhe hain. Ek hi jagah se aane ki wajah se safha aur structured data
	kabhi alag baat nahi kehte.
*/
.wiz-contact-grid{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;
	margin:28px 0 0;
}
.wiz-contact-card{
	display:flex;align-items:center;gap:12px;
	padding:14px 16px;border:1px solid var(--wiz-border);border-radius:12px;
	color:var(--wiz-text);text-decoration:none;
	transition:border-color var(--wiz-ease), box-shadow var(--wiz-ease);
}
.wiz-contact-card:hover{border-color:var(--wiz-link);text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.05);}
.wiz-contact-icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:38px;height:38px;flex:0 0 38px;border-radius:50%;
	background:var(--wiz-soft);color:var(--wiz-link);font-size:15px;
}
.wiz-contact-label{display:block;font-size:12px;color:var(--wiz-text-soft);}
.wiz-contact-text{display:block;font-size:14.5px;font-weight:600;word-break:break-word;}

.wiz-eyebrow{
	font-size:11.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
	color:var(--wiz-text-muted);margin:0 0 10px;
}
.wiz-text-muted{color:var(--wiz-text-muted)!important;}
.wiz-text-faint{color:var(--wiz-text-faint)!important;}
.wiz-text-sm{font-size:13px;}

.wiz-skip-link{
	position:absolute;left:-9999px;top:0;z-index:1200;
	background:var(--wiz-text);color:var(--wiz-body);padding:10px 16px;border-radius:0 0 var(--wiz-radius) 0;
}
.wiz-skip-link:focus{left:0;color:var(--wiz-body);}


/*================================================================
	03  UTILITIES  —  rang (primary / secondary ke shade)

	Template ke pass sirf DO rang hain — primary aur secondary. Un se
	aur rang banane ke liye opacity badalte hain: wahi rang, halka ya
	gehra. Is tarah nayi setting maange baghair poori range mil jati hai,
	aur jab panel me rang badalta hai to ye sab uske sath badal jate hain.

	Naam Bootstrap ke andaz par hain, magar prefix wiz- hai — is liye
	Bootstrap ki apni classes se kabhi nahi takrate.

		wiz-text-primary        wiz-text-secondary
		wiz-bg-primary          wiz-bg-secondary
		wiz-bg-primary-soft     wiz-bg-secondary-soft      (12%)
		wiz-bg-primary-subtle   wiz-bg-secondary-subtle    (6%)
		wiz-border-primary      wiz-border-secondary
		wiz-border-primary-soft wiz-border-secondary-soft  (28%)

	Ye sab NAYI classes hain — abhi kisi safhe par lagi hui nahi. Is liye
	inhe shamil karne se maujooda design me ek pixel ka farq bhi nahi
	parta; ye aage ke kaam ke liye tayar padi hain.
================================================================*/

/* matn */
.wiz-text-primary		{ color:var(--wiz-primary) !important; }
.wiz-text-secondary		{ color:var(--wiz-secondary) !important; }

/* bhara hua pas-manzar — us par matn hamesha safed */
.wiz-bg-primary			{ background-color:var(--wiz-primary); color:#fff; }
.wiz-bg-secondary		{ background-color:var(--wiz-secondary); color:#fff; }

/* halke shade — matn apna hi rang rakhta hai */
.wiz-bg-primary-soft	{ background-color:rgba(var(--wiz-primary-rgb), .12); }
.wiz-bg-secondary-soft	{ background-color:rgba(var(--wiz-secondary-rgb), .12); }
.wiz-bg-primary-subtle	{ background-color:rgba(var(--wiz-primary-rgb), .06); }
.wiz-bg-secondary-subtle{ background-color:rgba(var(--wiz-secondary-rgb), .06); }

/* kinare */
.wiz-border-primary			{ border-color:var(--wiz-primary) !important; }
.wiz-border-secondary		{ border-color:var(--wiz-secondary) !important; }
.wiz-border-primary-soft	{ border-color:rgba(var(--wiz-primary-rgb), .28) !important; }
.wiz-border-secondary-soft	{ border-color:rgba(var(--wiz-secondary-rgb), .28) !important; }


/*----------------------------------------------------------------
	04  SECTION  —  header + navbar
----------------------------------------------------------------*/

.wiz-section-header{
	position:sticky;top:0;z-index:1030;
	background:color-mix(in srgb, var(--wiz-body) 88%, transparent);
	backdrop-filter:saturate(180%) blur(12px);
	border-bottom:1px solid var(--wiz-border);
}
.wiz-section-header-inner{
	height:var(--wiz-section-header-h);
	display:flex;align-items:center;gap:20px;
}
.wiz-brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto;}
.wiz-brand:hover{text-decoration:none;}
.wiz-brand-mark{
	width:32px;height:32px;border-radius:8px;flex:0 0 32px;
	background:var(--wiz-accent);color:var(--wiz-body);
	display:flex;align-items:center;justify-content:center;
	font-weight:700;font-size:14px;letter-spacing:-.5px;
}
.wiz-brand-name{font-size:16px;font-weight:650;letter-spacing:-.02em;color:var(--wiz-text);line-height:0.5;margin-top:6px;margin-bottom:5px;display:block;}
.wiz-brand-tag{font-size:11px;color:var(--wiz-text-faint); white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display:block;width:150px;}

.wiz-nav{display:flex;align-items:center;gap:2px;margin-left:8px;}
.wiz-nav a{
	padding:7px 11px;border-radius:8px;
	font-size:14px;font-weight:500;color:var(--wiz-text-soft);text-decoration:none;
	transition:background var(--wiz-ease), color var(--wiz-ease);
}
.wiz-nav a:hover{background:var(--wiz-soft);color:var(--wiz-text);text-decoration:none;}
.wiz-nav a.is-active{color:var(--wiz-text);font-weight:650;}

/* parent category ka dropdown — children categories table se aate hain */
.wiz-nav-drop{position:relative;display:inline-flex;}
.wiz-nav-drop-link i{font-size:11px;margin-left:3px;opacity:.6;}
.wiz-nav-sub{
	position:absolute;top:100%;left:0;z-index:60;min-width:190px;padding:6px;
	background:var(--wiz-card);border:1px solid var(--wiz-border);border-radius:11px;
	box-shadow:0 12px 32px rgba(16,24,40,.14);
	display:none;flex-direction:column;
}
.wiz-nav-drop:hover .wiz-nav-sub,
.wiz-nav-drop:focus-within .wiz-nav-sub{display:flex;}
.wiz-nav-sub a{
	display:flex;align-items:center;justify-content:space-between;gap:14px;
	padding:8px 10px;border-radius:7px;font-size:13.5px;white-space:nowrap;
}
.wiz-nav-sub a.is-active{background:var(--wiz-soft);color:var(--wiz-text);font-weight:650;}

/* dropdown ka pehla item — parent ka apna archive */
.wiz-nav-sub-all{
	font-weight:600;color:var(--wiz-text) !important;
	border-bottom:1px solid var(--wiz-border);border-radius:7px 7px 0 0 !important;margin-bottom:4px;
}

/* har item ke sath uski post count */
.wiz-nav-sub-count{
	font-size:11.5px;font-weight:500;color:var(--wiz-text-faint);
	background:var(--wiz-soft);border-radius:20px;padding:1px 7px;min-width:22px;text-align:center;
}
.wiz-nav-drop-link.is-active{color:var(--wiz-text);font-weight:650;}

.wiz-section-header-actions{display:flex;align-items:center;gap:6px;margin-left:auto;}
.wiz-btn-icon{
	width:36px;height:36px;border-radius:9px;border:1px solid transparent;background:transparent;
	display:inline-flex;align-items:center;justify-content:center;
	color:var(--wiz-text-muted);transition:background var(--wiz-ease), color var(--wiz-ease);
}
.wiz-btn-icon:hover{background:var(--wiz-soft);color:var(--wiz-text);}
.wiz-btn-icon i{font-size:16px;min-width:auto;}

/*----------------------------------------------------------------
	05  SECTION  —  mobile drawer

	Pehle ye menu header ke neeche khul kar safhe ko dhakel deta tha.
	Ab wo parde ke bayen kinare se sarak kar aata hai:

		phone (<576px)	poori chaurai
		tablet (>=576)	350px

	Chalne ka tareeqa transform se hai, left/width se nahi. transform
	GPU par chalta hai aur us se safha dobara nahi napa jata (layout
	reflow nahi hota), is liye purane phone par bhi jhatka nahi lagta.

	visibility isi transition me shamil hai taake band halat me drawer
	keyboard aur screen reader dono ki pahunch se bahar rahe — sirf
	transform se wo parde ke bahar to chala jata hai magar "maujood"
	rehta hai aur Tab dabane par cursor us ke andar chala jata tha.
----------------------------------------------------------------*/

.wiz-drawer{
	/* 1210 — .wiz-skip-link 1200 par hai, aur khule drawer ke upar us ka
	   nikal aana theek nahi (focus wahin phans jata hai) */
	position:fixed;top:0;bottom:0;left:0;z-index:1210;
	width:100%;
	display:flex;flex-direction:column;
	background:var(--wiz-body);
	border-right:1px solid var(--wiz-border);
	box-shadow:0 0 40px rgba(16,24,40,.18);

	/* sarakne ki asal cheez */
	transform:translateX(-100%);
	visibility:hidden;
	transition:transform 320ms cubic-bezier(.4,0,.2,1), visibility 320ms;

	/* dayen bayen kabhi nahi khisakta — sirf upar neeche (body par) */
	overflow:hidden;
}

/* tablet aur us se upar — 350px */
@media (min-width: 576px){
	.wiz-drawer{width:350px;}
}

body.wiz-drawer-open .wiz-drawer{
	transform:translateX(0);
	visibility:visible;
}

/* [hidden] JS hatata hai; us se pehle drawer HTML me hota hi nahi ke barabar */
.wiz-drawer[hidden],
.wiz-drawer-backdrop[hidden]{display:none;}


/* upar ka hissa — naam aur band karne ka button */
.wiz-drawer-head{
	flex:0 0 auto;
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	min-height:var(--wiz-section-header-h);padding:10px 16px;
	border-bottom:1px solid var(--wiz-border);
}
.wiz-drawer-title{
	font-size:15px;font-weight:650;color:var(--wiz-text);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}


/*
	Beech ka hissa — sirf yahi scroll hota hai.

	overflow-y:auto		lambi fehrist (bohat si categories) par vertical
	overflow-x:hidden	horizontal kabhi nahi
	overscroll-behavior	drawer ka scroll khatam hone par peeche wala
						safha khisakna shuru nahi karta (scroll chaining)
*/
.wiz-drawer-body{
	flex:1 1 auto;
	overflow-y:auto;
	overflow-x:hidden;
	overscroll-behavior:contain;
	-webkit-overflow-scrolling:touch;
	padding:6px 16px 16px;
}

.wiz-drawer-body a{
	display:flex;align-items:center;gap:9px;
	padding:12px 0;border-bottom:1px solid var(--wiz-border);
	font-size:15px;font-weight:500;color:var(--wiz-text);text-decoration:none;

	/* lamba naam bina space ke ho to bhi bahar nahi nikalta */
	overflow-wrap:anywhere;
}
.wiz-drawer-body a:last-child{border-bottom:0;}
.wiz-drawer-body a:hover{color:var(--wiz-link);text-decoration:none;}
.wiz-drawer-body a.is-active{color:var(--wiz-text);font-weight:650;}

.wiz-drawer-body a.wiz-drawer-child{
	justify-content:space-between;
	padding-left:14px;font-size:14px;font-weight:400;color:var(--wiz-text-soft);
}
.wiz-drawer-body a.wiz-drawer-child > span:first-child::before{
	content:"— ";color:var(--wiz-text-faint);
}

/* chhota sa unwan — Pages / Account */
.wiz-drawer-sep{
	display:block;margin-top:18px;padding-bottom:6px;
	font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
	color:var(--wiz-text-faint);
}

/* neeche social icons */
.wiz-drawer-foot{
	flex:0 0 auto;
	display:flex;align-items:center;gap:8px;flex-wrap:wrap;
	padding:14px 16px;border-top:1px solid var(--wiz-border);
}
.wiz-drawer-foot a{
	width:34px;height:34px;border-radius:9px;
	display:inline-flex;align-items:center;justify-content:center;
	border:1px solid var(--wiz-border);color:var(--wiz-text-muted);
}
.wiz-drawer-foot a:hover{border-color:var(--wiz-border-strong);color:var(--wiz-text);text-decoration:none;}


/*
	Peeche ki kali chaadar.

	z-index drawer se ek kam — chaadar peeche, drawer aage.
*/
.wiz-drawer-backdrop{
	position:fixed;inset:0;z-index:1205;
	background:rgba(16,24,40,.5);
	opacity:0;visibility:hidden;
	transition:opacity 320ms cubic-bezier(.4,0,.2,1), visibility 320ms;
}
body.wiz-drawer-open .wiz-drawer-backdrop{opacity:1;visibility:visible;}

/*
	PEECHE KA SAFHA JAMA

	overflow:hidden akela kaafi nahi — iOS Safari us ko manta hi nahi.
	position:fixed use sach much jama deta hai. Us se safha upar kood
	jata hai, is liye JS maujooda muqam ko top par manfi qeemat me laga
	deta hai (aur band karte waqt wapas laga deta hai).

	width:100% laazmi hai — position:fixed body apni chaurai kho deti hai.
*/
body.wiz-drawer-open{
	position:fixed;
	left:0;right:0;
	width:100%;
	overflow:hidden;
}

/*
	Jise harkat se takleef hoti hai (Windows/iOS ki "Reduce motion"
	setting) us ke liye drawer sarakta nahi, seedha aa jata hai.
*/
@media (prefers-reduced-motion: reduce){

	.wiz-drawer,
	.wiz-drawer-backdrop{transition:none;}
}

/*
	992px se upar poora menu header me nazar aata hai — wahan drawer ka
	koi kaam nahi. JS resize par use band kar deta hai; ye rule us ka
	sath dene wali ehtiyat hai.
*/
@media (min-width: 992px){

	.wiz-drawer,
	.wiz-drawer-backdrop{display:none;}
}


/*----------------------------------------------------------------
	06  SECTION  —  search bar
----------------------------------------------------------------*/

.wiz-section-search{display:none;border-top:1px solid var(--wiz-border);background:var(--wiz-body);padding:14px 0;}
body.wiz-search-open .wiz-section-search{display:block;}
.wiz-search-field{
	display:flex;align-items:center;gap:10px;
	border:1px solid var(--wiz-border-strong);border-radius:var(--wiz-radius);
	background:var(--wiz-soft);padding:0 12px;
}
.wiz-search-field input{
	flex:1;border:0;outline:0;background:transparent;color:var(--wiz-text);
	height:44px;font-size:15px;font-family:inherit;
}
.wiz-search-field i{color:var(--wiz-text-faint);}


/*----------------------------------------------------------------
	07  SECTION  —  search suggestions

	Search bar me likhte hi neeche khulne wali fehrist. Har qatar me post
	ka unwan aur us ke neeche us ki category.

	.wiz-search-wrap par position:relative laazmi hai — fehrist usi ke
	hisab se latakti hai, is liye wo apni jagah lene ke bajaye safhe ke
	upar aati hai aur neeche ka content hilta nahi.
----------------------------------------------------------------*/

.wiz-search-wrap{position:relative;}

.wiz-suggest{
	position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:1040;
	max-height:min(60vh, 420px);
	overflow-y:auto;overflow-x:hidden;
	overscroll-behavior:contain;
	background:var(--wiz-card);
	border:1px solid var(--wiz-border);border-radius:var(--wiz-radius);
	box-shadow:var(--wiz-shadow-md);
	padding:6px;
}
.wiz-suggest[hidden]{display:none;}

.wiz-suggest-item{
	display:block;width:100%;text-align:left;
	padding:9px 11px;border:0;border-radius:8px;background:transparent;
	color:var(--wiz-text);font-family:inherit;font-size:14.5px;line-height:1.35;
	cursor:pointer;
}

/*
	is-on hover aur keyboard dono ke liye ek hi shakl — warna teer se
	chalne wale ko pata hi nahi chalta ke wo kis qatar par khara hai.
*/
.wiz-suggest-item:hover,
.wiz-suggest-item.is-on{background:var(--wiz-soft);}

.wiz-suggest-item b{font-weight:700;color:var(--wiz-link);}

.wiz-suggest-title{
	display:block;font-weight:550;
	/* lamba unwan do qatar tak — us se aage teen nuqte */
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	overflow-wrap:anywhere;
}
.wiz-suggest-cat{
	display:block;margin-top:2px;
	font-size:12px;color:var(--wiz-text-faint);
}

/* "kuch nahi mila" aur "dhoond raha hai" — dono sirf khabar hain */
.wiz-suggest-note{
	padding:11px;font-size:13.5px;color:var(--wiz-text-muted);text-align:center;
}


/*----------------------------------------------------------------
	08  GLOBAL  —  buttons + badges
----------------------------------------------------------------*/

.wiz-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:7px;
	height:42px;padding:0 18px;border-radius:var(--wiz-radius);
	font-size:14.5px;font-weight:600;line-height:1;white-space:nowrap;
	border:1px solid transparent;cursor:pointer;text-decoration:none;
	transition:background var(--wiz-ease), border-color var(--wiz-ease), color var(--wiz-ease);
}
.wiz-btn:hover{text-decoration:none;}
.wiz-btn-sm{height:34px;padding:0 13px;font-size:13.5px;}
.wiz-btn-block{width:100%;}
.wiz-btn-primary{background:var(--wiz-accent);border-color:var(--wiz-accent);color:var(--wiz-body);}
.wiz-btn-primary:hover{opacity:.88;color:var(--wiz-body);}
.wiz-btn-outline-primary{background:transparent;border-color:var(--wiz-border-strong);color:var(--wiz-text);}
.wiz-btn-outline-primary:hover{background:var(--wiz-soft);color:var(--wiz-text);}

.wiz-badge{
	display:inline-flex;align-items:center;gap:5px;
	height:26px;padding:0 10px;border-radius:20px;
	background:var(--wiz-soft);border:1px solid var(--wiz-border);
	font-size:12px;font-weight:600;color:var(--wiz-text-soft);text-decoration:none;
	transition:border-color var(--wiz-ease), color var(--wiz-ease);
}
a.wiz-badge:hover{border-color:var(--wiz-border-strong);color:var(--wiz-text);text-decoration:none;}
.wiz-badge-primary{background:var(--wiz-accent);border-color:var(--wiz-accent);color:var(--wiz-body);}

.wiz-dot{width:3px;height:3px;border-radius:50%;background:var(--wiz-text-faint);display:inline-block;flex:0 0 3px;}


/*----------------------------------------------------------------
	09  GLOBAL  —  thumbnail / media
----------------------------------------------------------------*/

.wiz-thumb{
	position:relative;display:block;overflow:hidden;
	border-radius:var(--wiz-radius);background:var(--wiz-soft);
	border:1px solid var(--wiz-border);
}
.wiz-thumb:before{content:"";display:block;padding-top:56.25%;}
.wiz-thumb-inner{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	font-size:26px;color:var(--wiz-text-faint);
	transition:transform 400ms cubic-bezier(.4,0,.2,1);
}
.wiz-thumb:hover .wiz-thumb-inner{transform:scale(1.04);}
.wiz-thumb-1x1:before{padding-top:100%;}
.wiz-thumb-wide:before{padding-top:42%;}

.wiz-tint-primary	.wiz-thumb-inner{background:linear-gradient(135deg,#e0e7ff,#c7d2fe);color:#4f46e5;}
.wiz-tint-success	.wiz-thumb-inner{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#16a34a;}
.wiz-tint-warning	.wiz-thumb-inner{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#b45309;}
.wiz-tint-info		.wiz-thumb-inner{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1d4ed8;}
.wiz-tint-danger		.wiz-thumb-inner{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#dc2626;}


/*----------------------------------------------------------------
	10  GLOBAL  —  card, list item, meta
----------------------------------------------------------------*/

.wiz-card{display:flex;flex-direction:column;gap:12px;}
.wiz-card-title{
	font-size:18px;font-weight:650;letter-spacing:-.015em;line-height:1.35;margin:0;
}
.wiz-card-title a{color:var(--wiz-text);text-decoration:none;}
.wiz-card-title a:hover{color:var(--wiz-link);text-decoration:none;}
.wiz-card-excerpt{font-size:14.5px;color:var(--wiz-text-muted);margin:0;}
.wiz-meta{
	display:flex;align-items:center;flex-wrap:wrap;gap:7px;
	font-size:12.5px;color:var(--wiz-text-muted);
}
.wiz-meta a{color:var(--wiz-text-muted);}
.wiz-meta a:hover{color:var(--wiz-text);}

.wiz-card-row{display:flex;gap:16px;align-items:flex-start;}
.wiz-card-row .wiz-thumb{width:250px;flex:0 0 250px;}
.wiz-card-row .wiz-thumb:before{padding-top:66%;}

.wiz-list-item{padding:22px 0;border-bottom:1px solid var(--wiz-border);}
.wiz-list-item:first-child{padding-top:0;}
.wiz-list-item:last-child{border-bottom:0;}

.wiz-rank{
	font-size:20px;font-weight:700;color:var(--wiz-border-strong);
	line-height:1;flex:0 0 30px;letter-spacing:-.03em;
}


/*----------------------------------------------------------------
	11  SECTION  —  hero
----------------------------------------------------------------*/

.wiz-section-hero{padding:52px 0 44px;border-bottom:1px solid var(--wiz-border);}
.wiz-section-hero-title{
	font-size:40px;font-weight:700;letter-spacing:-.035em;line-height:1.12;margin:0 0 14px;
	color:var(--wiz-text);
}
.wiz-section-hero-title a{color:inherit;text-decoration:none;}
.wiz-section-hero-title a:hover{color:var(--wiz-link);text-decoration:none;}
.wiz-section-hero-text{font-size:17px;color:var(--wiz-text-muted);margin:0 0 20px;max-width:640px;}


/*----------------------------------------------------------------
	12  GLOBAL  —  section shell (heading, band)
----------------------------------------------------------------*/

.wiz-section{padding:44px 0;}
.wiz-section-alt{background:var(--wiz-soft);}

/*
	Category ki qatarein — pas-manzar safed.

	Home par tarteeb ye hai: Latest halke (soft) rang par, aur uske neeche
	har category ki qatar safed par. Is se ek ke baad ek aati hui qatarein
	nazar me alag alag rehti hain, warna sab ek hi lambi fehrist lagti hai.

	--wiz-card is liye ke dark mode me "safed" ka matlab safed nahi —
	wahan card ka apna gehra rang chahiye. Ye token dono halaton me theek
	rang deta hai.
*/

.wiz-section-head{
	display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
	margin-bottom:26px;padding-bottom:14px;border-bottom:1px solid var(--wiz-border);
}
.wiz-section-title{font-size:20px;font-weight:650;letter-spacing:-.02em;margin:0;}
.wiz-section-link{font-size:13.5px;font-weight:600;}


/*----------------------------------------------------------------
	13  SECTION  —  article (byline, prose)
----------------------------------------------------------------*/

.wiz-section-article-head{}
.wiz-section-article-title{
	font-size:38px;font-weight:700;letter-spacing:-.035em;line-height:1.14;
	margin:0 0 16px;color:var(--wiz-text);
}
.wiz-section-article-lead{font-size:18px;color:var(--wiz-text-muted);margin:0 0 22px;}

.wiz-byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.wiz-avatar{
	width:40px;height:40px;flex:0 0 40px;border-radius:50%;
	background:var(--wiz-accent);color:var(--wiz-body);
	display:flex;align-items:center;justify-content:center;
	font-size:13.5px;font-weight:700;
}
.wiz-avatar-lg{width:72px;height:72px;flex:0 0 72px;font-size:22px;}

.wiz-prose{font-family:var(--wiz-serif);font-size:18.5px;line-height:1.78;color:var(--wiz-text-soft);}
.wiz-prose > *:first-child{margin-top:0;}
.wiz-prose p{margin:0 0 24px;}
.wiz-prose h2{
	font-family:var(--wiz-ui);font-size:25px;font-weight:650;letter-spacing:-.025em;
	color:var(--wiz-text);margin:44px 0 14px;scroll-margin-top:calc(var(--wiz-section-header-h) + 20px);
}
.wiz-prose h3{
	font-family:var(--wiz-ui);font-size:19px;font-weight:650;
	color:var(--wiz-text);margin:32px 0 10px;scroll-margin-top:calc(var(--wiz-section-header-h) + 20px);
}
.wiz-prose ul,.wiz-prose ol{margin:0 0 24px;padding-left:24px;}
.wiz-prose li{margin-bottom:9px;}
.wiz-prose blockquote{
	margin:32px 0;padding:4px 0 4px 22px;
	border-left:3px solid var(--wiz-accent);
	font-size:20px;font-style:italic;color:var(--wiz-text);
}
.wiz-prose img{border-radius:var(--wiz-radius);margin:32px 0;}
.wiz-prose figure{margin:32px 0;}
.wiz-prose figcaption{font-family:var(--wiz-ui);font-size:13px;color:var(--wiz-text-faint);text-align:center;margin-top:10px;}
.wiz-prose code{
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;
	background:var(--wiz-soft);border:1px solid var(--wiz-border);border-radius:5px;padding:2px 5px;
}
.wiz-prose pre{
	background:#0f1420;color:#d7dce8;border-radius:var(--wiz-radius);
	padding:18px;overflow-x:auto;margin:32px 0;
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.65;
}
.wiz-prose pre code{background:transparent;border:0;padding:0;color:inherit;}
.wiz-prose table{width:100%;border-collapse:collapse;margin:32px 0;font-family:var(--wiz-ui);font-size:15px;}
.wiz-prose th,.wiz-prose td{padding:10px 12px;border:1px solid var(--wiz-border);text-align:left;}
.wiz-prose th{background:var(--wiz-soft);font-weight:650;}
.wiz-prose hr{border:0;border-top:1px solid var(--wiz-border);margin:44px 0;}


/*----------------------------------------------------------------
	14  SECTION  —  table of contents
----------------------------------------------------------------*/

.wiz-toc{position:sticky;top:calc(var(--wiz-section-header-h) + 24px);}
.wiz-toc-title{
	font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
	color:var(--wiz-text-faint);margin:0 0 12px;
}
.wiz-toc a{
	display:block;padding:6px 0 6px 13px;
	border-left:2px solid var(--wiz-border);
	font-size:13.5px;line-height:1.45;color:var(--wiz-text-muted);text-decoration:none;
	transition:color var(--wiz-ease), border-color var(--wiz-ease);
}
.wiz-toc a:hover{color:var(--wiz-text);text-decoration:none;}
.wiz-toc a.is-active{color:var(--wiz-text);border-left-color:var(--wiz-accent);font-weight:600;}
.wiz-toc a.is-sub{padding-left:26px;font-size:13px;}


/*----------------------------------------------------------------
	15  SECTION  —  share + reading progress
----------------------------------------------------------------*/

/*
	READING PROGRESS

	Ye ab header ke NEECHE wale kinare par chalti hai, viewport ke bilkul
	upar nahi.

	Pehle "position:fixed; top:0" thi — us waqt theek tha, magar ab upar
	primary color ki top bar lag chuki hai aur patti ka rang bhi wahi
	primary hai. Yani safhe ke shuru me wo apne hi jaise rang par pari
	rehti thi aur bilkul nazar nahi aati thi.

	Header ke andar absolute rakhne se do faide: header safed (ya dark me
	gehra) hota hai, is liye primary patti har haal me saaf nazar aati
	hai — aur sticky header ke sath sath niche upar chalti hai.

	.wiz-section-header par "position:sticky" hai, is liye wahi is patti ka
	containing block ban jata hai; alag se position:relative ki zarurat
	nahi.
*/
.wiz-progress{
	/*
		Ye normal flow me hai — navbar ki qatar ke FORAN baad, search bar
		aur drawer se pehle. Isi liye markup me bhi wahin para hai.

		"position:absolute; bottom:0" nahi rakha ja sakta tha: uska
		anchor poora .wiz-section-header banta hai, aur search bar ya mobile
		drawer khulte hi header lamba ho jata — patti unke bhi neeche
		khisak jati.

		"top:var(--wiz-section-header-h)" bhi nahi chalta: centered layout me
		header-inner ki height auto hoti hai (brand upar, menu neeche).

		Flow me rehne se patti har layout me aur har haalat me thik
		navbar ke kinare par rehti hai. margin-bottom manfi is liye hai
		ke ye 3px header ki apni oonchai me na jurein — patti border ke
		upar baith jati hai, header neeche nahi sarakta.
	*/
	position:relative;z-index:2;
	height:3px;width:0;margin-bottom:-3px;
	background:var(--wiz-link);border-radius:0 3px 3px 0;
	transition:width 90ms linear;
}
.wiz-share{display:flex;align-items:center;gap:8px;}
.wiz-share a,.wiz-share button{
	width:38px;height:38px;border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;
	border:1px solid var(--wiz-border);background:var(--wiz-card);color:var(--wiz-text-muted);
	transition:border-color var(--wiz-ease), color var(--wiz-ease);
}
.wiz-share a:hover,.wiz-share button:hover{border-color:var(--wiz-border-strong);color:var(--wiz-text);text-decoration:none;}


/*----------------------------------------------------------------
	16  SECTION  —  related posts

	Compact list — tasveer chhoti, unwan bara, aur neeche ek chhoti
	wajah ke ye post kyun dikhai ja rahi hai. Wajah is liye ke reader
	ko andaza ho ke click kis taraf le jayega; YouTube bhi "same
	channel" / "related" jaisi chhoti wajah dikhata hai.
----------------------------------------------------------------*/

.wiz-section-related{
	/* padhte waqt sath chalti rahe — lambi post par bhi hamesha nazar me */
	/* position:sticky;top:calc(var(--wiz-section-header-h) + 16px);*/
}

.wiz-section-related-item{
	display:flex;gap:11px;align-items:flex-start;
	padding:11px 0;border-bottom:1px solid var(--wiz-border);
	text-decoration:none;color:inherit;
}
.wiz-section-related-item:last-child{border-bottom:none;}
.wiz-section-related-item:hover{text-decoration:none;}

.wiz-section-related-thumb{
	flex:0 0 72px;width:72px;height:54px;overflow:hidden;
	border-radius:var(--wiz-radius);display:block;
}
.wiz-section-related-thumb .wiz-thumb-inner{
	display:flex;align-items:center;justify-content:center;
	width:100%;height:100%;
}

.wiz-section-related-text{display:block;min-width:0;}

.wiz-section-related-title{
	font-size:12px;font-weight:600;line-height:1.35;color:var(--wiz-text);
	/* teen qatar se zyada nahi — warna list ka toaazun toot jata hai */
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.wiz-section-related-item:hover .wiz-section-related-title{color:var(--wiz-link);}

.wiz-section-related-meta{
	display:block;font-size:11.5px;color:var(--wiz-text-faint);margin-top:3px;
}

.wiz-section-related-why{
	display:inline-block;margin-top:2px;padding:0px 5px;
	border-radius:20px;background:var(--wiz-soft);border:1px solid var(--wiz-border);
	font-size:9px;font-weight:100;color:var(--wiz-text-muted);
	max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

@media (max-width: 991.98px){
	/* chhoti screen par ye fehrist post ke neeche aati hai — wahan
	   chipakna bekar hai aur scroll me rukawat banta hai */
	
	/*.wiz-section-related{position:static;}*/
}


/*----------------------------------------------------------------
	17  GLOBAL  —  panel (author box, CTA)
----------------------------------------------------------------*/

.wiz-panel{
	background:var(--wiz-soft);border:1px solid var(--wiz-border);
	border-radius:var(--wiz-radius-lg);padding:24px;
}
.wiz-panel-plain{background:var(--wiz-card);}



/*----------------------------------------------------------------
	18  SECTION  —  sidebar widgets
----------------------------------------------------------------*/

.wiz-section-widget{margin-bottom:34px;}
.wiz-section-widget:last-child{margin-bottom:0;}
.wiz-section-widget-title{
	font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
	color:var(--wiz-text-faint);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--wiz-border);
}
.wiz-section-taxo{display:flex;flex-direction:column;}
.wiz-section-taxo a{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	padding:8px 0;border-bottom:1px solid var(--wiz-border);
	font-size:14px;color:var(--wiz-text-soft);text-decoration:none;
}
.wiz-section-taxo a:last-child{border-bottom:0;}
.wiz-section-taxo a:hover{color:var(--wiz-link);text-decoration:none;}
.wiz-section-taxo span{font-size:12px;color:var(--wiz-text-faint);}

/* category ki apni image — superadmin > Categories > Image */
.wiz-section-taxo a > span:first-child{font-size:14px;color:inherit;}
.wiz-section-taxo-thumb{
	width:26px;height:26px !important;flex:0 0 26px;border-radius:6px;
	object-fit:cover;background:var(--wiz-border);
}

/* child category — apne parent ke foran neeche, thora andar */
.wiz-section-taxo a.is-child{padding-left:16px;font-size:13.5px;}
.wiz-section-taxo-arrow{
	transform:rotate(90deg);display:inline-block;
	font-size:11px;color:var(--wiz-text-faint);
}

/* Quick Links — superadmin > Navigation > Sidebar Menu */

/*----------------------------------------------------------------
	19  GLOBAL  —  pagination + empty state
----------------------------------------------------------------*/

.wiz-pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:38px;}
.wiz-pagination a,.wiz-pagination span{
	min-width:38px;height:38px;padding:0 11px;border-radius:9px;
	display:inline-flex;align-items:center;justify-content:center;
	border:1px solid var(--wiz-border);background:var(--wiz-card);
	font-size:14px;font-weight:600;color:var(--wiz-text-soft);text-decoration:none;
}
.wiz-pagination a:hover{border-color:var(--wiz-border-strong);color:var(--wiz-text);text-decoration:none;}
.wiz-pagination .is-active{background:var(--wiz-accent);border-color:var(--wiz-accent);color:var(--wiz-body);}

.wiz-empty{text-align:center;padding:70px 20px;}
.wiz-empty-icon{
	width:60px;height:60px;margin:0 auto 18px;border-radius:var(--wiz-radius-lg);
	display:flex;align-items:center;justify-content:center;font-size:24px;
	background:var(--wiz-soft);color:var(--wiz-text-faint);
}
.wiz-empty h1,.wiz-empty h2{font-size:22px;font-weight:650;letter-spacing:-.02em;margin:0 0 8px;}
.wiz-empty p{font-size:15px;color:var(--wiz-text-muted);margin:0 auto 20px;max-width:400px;}
.wiz-section-error-code{font-size:72px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--wiz-border-strong);margin:0 0 6px;}


/*----------------------------------------------------------------
	20  SECTION  —  footer
----------------------------------------------------------------*/

.wiz-section-footer{border-top:1px solid var(--wiz-border);background:var(--wiz-soft);margin-top:60px;}
.wiz-section-footer-main{padding:10px 0 10px;}
.wiz-section-footer-title{
	font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
	color:var(--wiz-text-faint);margin:0 0 14px;
}
.wiz-section-footer a{display:block;padding:5px 0;font-size:14px;color:var(--wiz-text-soft);text-decoration:none;}
.wiz-section-footer a:hover{color:var(--wiz-link);text-decoration:none;}
.wiz-section-footer-bottom{
	border-top:1px solid var(--wiz-border);padding:18px 0;
	align-items:center;justify-content:space-between;gap:10px;
	font-size:13px;color:var(--wiz-text-muted);
}
.wiz-social{display:flex;gap:8px;}
.wiz-social a{
	width:34px;height:34px;padding:0;border-radius:50%;
	display:inline-flex;align-items:center;justify-content:center;
	border:1px solid var(--wiz-border);background:var(--wiz-card);color:var(--wiz-text-muted);
}
.wiz-social a:hover{border-color:var(--wiz-border-strong);color:var(--wiz-text);}


/*----------------------------------------------------------------
	21  RESPONSIVE  —  chhoti screen + print
----------------------------------------------------------------*/

@media (max-width:991.98px){
	.wiz-nav,.wiz-toc{display:none;}
	.wiz-section-hero-title{font-size:32px;}
	.wiz-section-article-title{font-size:30px;}
	.wiz-prose{font-size:17.5px;}
}

@media (max-width:767.98px){
	.wiz-container{padding:0 16px;}
	.wiz-section-hero{padding:34px 0 30px;}
	.wiz-section-hero-title{font-size:27px;}
	.wiz-section-hero-text{font-size:15.5px;}
	.wiz-section{padding:32px 0;}
	.wiz-section-article-head{}
	.wiz-section-article-title{font-size:25px;}
	.wiz-section-article-lead{font-size:16px;}
	.wiz-prose{font-size:17px;}
	.wiz-prose h2{font-size:21px;margin-top:34px;}
	.wiz-card-row{gap:12px;}
	.wiz-card-row .wiz-thumb{width:200px;flex:0 0 200px;}
	.wiz-card-title{font-size:16px;}
	.wiz-section-footer-main{padding:10px 0 10px;}
}
@media (max-width:575.5px){
	.wiz-card-row .wiz-thumb{width:100px;flex:0 0 100px;}
	.wiz-card-title{font-size:14px;}
}

@media print{
	.wiz-section-header,.wiz-section-footer,.wiz-toc,.wiz-share,.wiz-progress{display:none!important;}
	.wiz-prose{font-size:12pt;}
}


/*----------------------------------------------------------------
	22  SECTION  —  comments
----------------------------------------------------------------*/

.wiz-section-comment{display:flex;gap:14px;padding:20px 0;border-top:1px solid var(--wiz-border);}
.wiz-section-comment:first-of-type{border-top:0;}

.wiz-section-comment-avatar{
	width:40px;height:40px;flex:0 0 40px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:var(--wiz-soft);color:var(--wiz-text-soft);
	font-size:15px;font-weight:650;
}

.wiz-section-comment-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px;font-size:14.5px;}
.wiz-section-comment-head a{color:var(--wiz-text);font-weight:650;text-decoration:none;}
.wiz-section-comment-head a:hover{color:var(--wiz-link);}
.wiz-section-comment-date{font-size:12.5px;color:var(--wiz-text-faint);font-weight:400;}

.wiz-section-comment-body{
	font-size:15px;line-height:1.75;color:var(--wiz-text-soft);
	white-space:pre-wrap;word-break:break-word;
}

.wiz-section-comment-reply{
	margin-top:8px;padding:0;border:0;background:none;
	font-size:13px;font-weight:600;color:var(--wiz-link);cursor:pointer;
}
.wiz-section-comment-reply:hover{text-decoration:underline;}

.wiz-section-comment.is-reply{
	margin-top:16px;padding:16px 0 0 0;border-top:1px solid var(--wiz-border);
	padding-left:18px;border-left:2px solid var(--wiz-border);
}
.wiz-section-comment.is-reply .wiz-section-comment-avatar{width:32px;height:32px;flex:0 0 32px;font-size:13px;}

/* photo wala avatar — <img> bhi wahi dabba bharta hai jo <span> bharta tha */
img.wiz-section-comment-avatar,
img.wiz-account-initial{object-fit:cover;padding:0;}

/* "Commenting as ..." line — photo aur text ek qatar me */
.wiz-section-commenting-as{display:flex;align-items:center;gap:8px;}
.wiz-section-commenting-as .wiz-section-comment-avatar{width:28px;height:28px;flex:0 0 28px;font-size:13px;}

.wiz-section-comment-note{
	display:flex;align-items:flex-start;gap:9px;
	padding:12px 14px;border-radius:11px;margin:22px 0 0;
	font-size:14px;line-height:1.6;
}
.wiz-section-comment-note.is-success{background:rgba(22,163,74,.1);color:#15803d;}
.wiz-section-comment-note.is-error{background:rgba(220,38,38,.1);color:#b91c1c;}

.wiz-section-comment-form{margin-top:34px;padding-top:28px;border-top:1px solid var(--wiz-border);}
.wiz-field-label{display:block;margin-bottom:6px;font-size:13.5px;font-weight:600;color:var(--wiz-text);}
.wiz-field-label span{color:#dc2626;}

.wiz-section-comment-form input[type="text"],
.wiz-section-comment-form input[type="email"],
.wiz-section-comment-form textarea{
	width:100%;padding:11px 13px;border-radius:10px;
	border:1px solid var(--wiz-border);background:var(--wiz-card);color:var(--wiz-text);
	font-family:inherit;font-size:14.5px;line-height:1.6;
	transition:border-color var(--wiz-ease);
}
.wiz-section-comment-form input:focus,
.wiz-section-comment-form textarea:focus{outline:none;border-color:var(--wiz-link);}
.wiz-section-comment-form textarea{resize:vertical;min-height:120px;}

/* honeypot — screen se bahar, sirf bots ise bharte hain */
.wiz-honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}


/*----------------------------------------------------------------
	23  VARIANTS  —  header / footer layout (panel se)
	(superadmin > Settings > Header  aur  > Footer)
----------------------------------------------------------------*/

/* announcement line — header ke bilkul upar */
.wiz-section-announce{
	background:var(--wiz-accent);color:var(--wiz-body);
	font-size:13.5px;font-weight:500;text-align:center;padding:9px 0;
}

/* sticky off */
.wiz-section-header.is-static{position:static;}

/*
	layout: centered — upar wali qatar me logo left aur actions (search,
	theme, account) right; menu un ke neeche beech me.

	Grid is liye ke HTML me tarteeb brand → nav → actions hai, magar
	dikhana brand → actions → nav hai. Grid areas se markup chhue baghair
	tarteeb badal jati hai (flex order use karte to keyboard tab ka
	silsila theek rehta magar screen reader ke liye grid zyada saaf hai,
	aur teeno cheezein waise bhi apne apne landmark me hain).
*/
.wiz-section-header-centered .wiz-section-header-inner{
	display:grid;
	grid-template-columns:minmax(0,1fr) auto;
	grid-template-areas:"brand actions"
						"nav   nav";
	align-items:center;
	height:auto;gap:6px 16px;padding:14px 0;
}
.wiz-section-header-centered .wiz-brand{grid-area:brand;justify-self:start;}
.wiz-section-header-centered .wiz-section-header-actions{grid-area:actions;justify-self:end;margin-left:0;}
.wiz-section-header-centered .wiz-nav{
	grid-area:nav;margin-left:0;justify-content:center;flex-wrap:wrap;
}

/* layout: minimal — sirf brand aur zaroori buttons */
.wiz-section-header-minimal .wiz-nav{display:none;}
.wiz-section-header-minimal .wiz-brand-tag{display:none;}

/* footer layouts */
.wiz-section-footer-centered .wiz-section-footer-main,
.wiz-section-footer-centered .wiz-section-footer-bottom{text-align:center;justify-content:center;}
.wiz-section-footer-minimal .wiz-section-footer-main{display:none;}

.wiz-section-footer-search{max-width:520px;margin:0 auto 26px;}

@media (max-width: 991.98px){

	/* chhoti screen par menu drawer me chala jata hai, is liye grid ki
	   zarurat nahi — wahi ek qatar wala classic header */
	.wiz-section-header-centered .wiz-section-header-inner{
		display:flex;flex-direction:row;height:var(--wiz-section-header-h);padding:0;gap:0;
	}
	.wiz-section-header-centered .wiz-section-header-actions{margin-left:auto;}
}


/*----------------------------------------------------------------
	24  SECTION  —  user account (navbar ka hissa)

	Module web-templates/user-account/ me hai; yahan sirf utna style
	hai jitna is template ke header me chahiye.
----------------------------------------------------------------*/

.wiz-account-drop{margin-left:2px;}

.wiz-account-btn{
	display:inline-flex;align-items:center;gap:5px;
	padding:4px 8px 4px 4px;border-radius:22px;border:1px solid var(--wiz-border);
	color:var(--wiz-text-muted);text-decoration:none;background:transparent;
}
.wiz-account-btn:hover{border-color:var(--wiz-link);color:var(--wiz-text);text-decoration:none;}
.wiz-account-btn i{font-size:11px;opacity:.6;}

.wiz-account-initial{
	display:inline-flex;align-items:center;justify-content:center;
	width:28px;height:28px;border-radius:50%;
	background:var(--wiz-link);color:#fff;font-size:13px;font-weight:700;
}

.wiz-account-sub{right:0;left:auto;min-width:210px;}
.wiz-account-sub a{justify-content:flex-start;gap:9px;}
.wiz-account-sub a i{font-size:14px;width:16px;text-align:center;opacity:.7;}

.wiz-account-name{
	display:block;padding:6px 10px 9px;margin-bottom:4px;
	border-bottom:1px solid var(--wiz-border);
	font-size:13px;font-weight:650;color:var(--wiz-text);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;
}

.wiz-account-logout{margin-top:4px;padding-top:4px;border-top:1px solid var(--wiz-border);}
.wiz-account-logout button{
	display:flex;align-items:center;gap:9px;width:100%;
	padding:8px 10px;border:0;border-radius:7px;background:transparent;
	font-size:13.5px;font-family:inherit;color:#dc2626;text-align:left;cursor:pointer;
}
.wiz-account-logout button:hover{background:var(--wiz-soft);}
.wiz-account-logout button i{font-size:14px;width:16px;text-align:center;opacity:.8;}


/*----------------------------------------------------------------
	25  SECTION  —  top bar

	Navbar ke upar patli patti, primary color par. Left me chhote page
	(About / Contact / Terms), right me social icons.

	Rang --wiz-link se aata hai — wahi variable jo Settings > Branding ke
	primary color se bharta hai. Yani rang badalne par patti khud badal
	jati hai, yahan kuch chhune ki zarurat nahi.

	Patti par sab kuch safed hai. Text par halki si shaffafiyat rakhi hai
	taake hover par farq mehsoos ho — safed par safed hover nazar nahi
	aata.

	Markup me "d-none d-md-block" laga hai, is liye mobile par ye patti
	nahi aati. Uske links drawer me pehle se mojood hote hain.
----------------------------------------------------------------*/

.wiz-section-topbar{
	background:var(--wiz-link);
	color:#fff;
	font-size:13px;
	line-height:1.4;
}

.wiz-section-topbar-inner{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	min-height:38px;
}

/* left — pages */
.wiz-section-topbar-links{display:flex;align-items:center;flex-wrap:wrap;gap:2px;min-width:0;}

.wiz-section-topbar-links a{
	display:inline-block;padding:4px 9px;border-radius:6px;
	color:rgba(255,255,255,.86);text-decoration:none;
	white-space:nowrap;
	transition:background var(--wiz-ease), color var(--wiz-ease);
}

/* right — social */
.wiz-section-topbar-social{display:flex;align-items:center;gap:1px;flex:0 0 auto;}

.wiz-section-topbar-social a{
	display:inline-flex;align-items:center;justify-content:center;
	width:28px;height:28px;border-radius:6px;
	color:rgba(255,255,255,.86);text-decoration:none;
	transition:background var(--wiz-ease), color var(--wiz-ease);
}
.wiz-section-topbar-social a i{font-size:14px;min-width:auto;}

/*
	Hover / focus dono taraf ek jaisa. body.wiz-body a:hover ka underline
	yahan nahi chahiye, is liye usay saaf hataya gaya hai.
*/
body.wiz-body .wiz-section-topbar a{color:rgba(255,255,255,.86);}

body.wiz-body .wiz-section-topbar a:hover,
body.wiz-body .wiz-section-topbar a:focus-visible{
	background:rgba(255,255,255,.16);
	color:#fff;
	text-decoration:none;
}

body.wiz-body .wiz-section-topbar :focus-visible{outline-color:#fff;}

/* dark mode me primary rang halka ho jata hai — us par safed nahi parhta */
[data-wiz-theme="dark"] .wiz-section-topbar{background:var(--wiz-soft);border-bottom:1px solid var(--wiz-border);}
[data-wiz-theme="dark"] body.wiz-body .wiz-section-topbar a{color:var(--wiz-text-soft);}
[data-wiz-theme="dark"] body.wiz-body .wiz-section-topbar a:hover,
[data-wiz-theme="dark"] body.wiz-body .wiz-section-topbar a:focus-visible{background:var(--wiz-border);color:var(--wiz-text);}


/*----------------------------------------------------------------
	26  OVERRIDE  —  solid button ka matn (specificity fix)

	.wiz-btn-primary par "color:var(--wiz-body)" pehle se likha hai, magar
	base rule "body.wiz-body a{color:var(--wiz-link)}" us se zyada wazni
	hai (0,0,1,2 vs 0,0,1,0). Nateeja: har solid button JO ANCHOR HO
	uska matn safed ki jagah link ke rang ka nikalta tha — "Sign up"
	aur purana "Read the blog" dono isi wajah se neele the.

	Button ke andar ka <i> bhi sath rakha hai, warna icon apne rang par
	reh jata hai.
----------------------------------------------------------------*/

body.wiz-body a.wiz-btn-primary,
body.wiz-body a.wiz-btn-primary:hover,
body.wiz-body a.wiz-btn-primary:focus,
body.wiz-body a.wiz-btn-primary i{
	color:var(--wiz-body);
}

body.wiz-body a.wiz-btn-outline-primary,
body.wiz-body a.wiz-btn-outline-primary:hover,
body.wiz-body a.wiz-btn-outline-primary:focus{
	color:var(--wiz-text);
}

/* login + sign up ka joRa — icons se thora sa alag */
.wiz-account-buttons{display:inline-flex;align-items:center;gap:6px;margin-left:4px;}

/*==============================================================
	27  OVERRIDE  —  dark logo (Settings > Branding)

	Dono logo HTML me hote hain aur CSS ek chhupa deti hai. Aisa is
	liye ke page cache sab visitors ko ek hi HTML deta hai — theme ka
	faisla server par nahi ho sakta.
===============================================================*/

.sb-logo-dark{display:none;}

[data-wiz-theme="dark"] .sb-logo-light{display:none;}
[data-wiz-theme="dark"] .sb-logo-dark{display:inline-block;}