/*
Theme Name: Khabar Har Ghante - Soft Cards
Theme URI: https://khabarharghante.com
Author: Khabar Har Ghante
Description: Soft cards Hindi news theme: light blue background, rounded corners, soft shadows. Ads always sit inside a black border.
Version: 3.1.0
Text Domain: khg
*/
:root{--bg:#eef2fb;--ink:#1d2540;--ac:#3b5bdb;--mut:#7a84a6;--line:#dfe5f6;--card:#fff;--soft:#eef2fb;--r:18px;--sh:0 4px 16px rgba(30,40,90,.09);--hb:#fff;--hs:0 2px 10px rgba(30,40,90,.07);--nb:#fff;--nf:#2c3a78;--np:#e6ebfb;--na:#3b5bdb;--naf:#fff;--ns:0 6px 14px rgba(30,40,90,.06)}
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Mukta','Noto Sans Devanagari',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%;padding-bottom:62px;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 14px}
/* header */
.mast{background:var(--hb);padding:10px 0;box-shadow:var(--hs,none)}
.mast .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.date{justify-self:start;font-size:11px;font-weight:700;color:var(--mut);white-space:nowrap}
.sbtn{justify-self:end;border:1.5px solid var(--ink);background:transparent;border-radius:99px;padding:3px 13px;font:700 14px inherit;cursor:pointer;color:var(--ink)}
.logo{justify-self:center;display:block;line-height:0}
.logo img{height:78px;width:auto;max-width:100%;image-rendering:-webkit-optimize-contrast}
.logo b{font-size:26px;color:#e2231a;line-height:1.2}
.searchbox{display:none;padding:8px 14px;background:var(--hb)}.searchbox.on{display:block}
.searchbox input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r);font-size:16px;background:var(--bg);color:var(--ink)}
/* menu */
.nav{background:var(--nb);border-bottom:var(--nbd);position:sticky;top:0;z-index:50;box-shadow:var(--ns,none)}
.nav ul{list-style:none;margin:0;padding:0}
.nav>ul,.nav .menu{display:flex;gap:6px;overflow-x:auto;padding:8px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav>ul::-webkit-scrollbar,.nav .menu::-webkit-scrollbar{display:none}
.nav li{flex:0 0 auto;position:relative}
.nav li a{display:block;color:var(--nf);background:var(--np,transparent);padding:3px 14px;font-weight:700;white-space:nowrap;font-size:15.5px;border-radius:99px}
.nav li.current-menu-item>a,.nav li.current-cat>a,.nav li a:hover{background:var(--na);color:var(--naf)}
.nav .sub-menu,.nav .children{display:none}
/* ticker */
.tick{display:flex;align-items:center;margin:14px 0;overflow:hidden;background:var(--card)}
.tick b{background:var(--ac);color:#fff;padding:3px 14px;font-weight:800;font-size:14px;white-space:nowrap}
.tick div{overflow:hidden;white-space:nowrap;flex:1;padding:3px 0;font-size:15px}
.tick span{display:inline-block;padding-left:100%;animation:mq 45s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}
/* trending + grids */
.trend{margin:14px 0 18px}
.trend .hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.trend h2{margin:0;font-size:20px;line-height:1.3}
.trend .hd small{color:var(--mut);font-size:14px}
.grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.card{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r);overflow:hidden;position:relative;min-width:0;border:var(--cbd,0);box-shadow:var(--sh,none);transition:transform .2s,box-shadow .2s}
.card:active{transform:scale(.985)}
.card .im{display:block;width:100%;aspect-ratio:16/10;background:#e9e4dc;overflow:hidden;flex:none;order:1}
.card .im img{width:100%;height:100%;object-fit:cover}
.card .im.ph{display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:var(--ac);background:linear-gradient(135deg,#f3f3f3,#e2e6f2)}
.card .tag{order:2}
.card h3{order:3;margin:0;font-size:18px;line-height:1.4;font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.card .cm{order:4;font-size:12.5px;color:var(--mut)}
.rank{position:absolute;right:10px;top:10px;background:var(--ink);color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;z-index:3}
.grid.t .card:not(.big){display:grid;grid-template-columns:116px minmax(0,1fr);grid-template-rows:1fr auto;column-gap:12px}
.grid.t .card:not(.big) .im{grid-row:1/3;grid-column:1;aspect-ratio:4/3;height:100%}
.grid.t .card:not(.big) h3{grid-column:2;grid-row:1;font-size:16px;padding:0 10px 0 0!important;align-self:start;-webkit-line-clamp:3}
.grid.t .card:not(.big) .cm{grid-column:2;grid-row:2;padding:0 10px 0 0!important}
.grid.t .card:not(.big) .tag{display:none}
.grid.t .card:not(.big) .rank{left:6px;right:auto;top:6px;width:24px;height:24px;font-size:12px}
.sec h2{margin:26px 0 12px;font-size:20px;line-height:1.3}
.sec h2 a{display:inline-block}
/* ads: always inside a black border */
.ad{margin:16px 0;max-width:100%;overflow:hidden;background:#fff;border:2px solid #000;border-radius:8px;position:relative;text-align:center;padding:20px 6px 8px;min-height:0}
.ad:empty{display:none}
.ad::before{content:"विज्ञापन";position:absolute;top:3px;left:10px;font-size:11px;color:#666}
.ad ins,.ad iframe,.ad img{max-width:100%!important}
/* article */
.post{margin:14px 0}
.post h1{font-size:28px;line-height:1.35;margin:0 0 8px}
.meta{font-size:13px;color:var(--mut);margin-bottom:8px}
.post .wp-post-image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:8px auto 12px;border-radius:var(--r)}
.entry{font-size:19px;line-height:1.85;overflow-wrap:anywhere}
.entry p{margin:0 0 1em}
.entry p,.entry li{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.entry h2,.entry h3,.entry h4{text-align:left;line-height:1.35;margin:1.2em 0 .5em}
.entry img,.entry video,.entry iframe{display:block;max-width:100%;height:auto;margin:14px auto;border-radius:var(--r)}
.entry figure,.entry .wp-caption,.entry .wp-block-image{margin:14px auto;max-width:100%;width:auto!important;text-align:center}
.entry figure img,.entry .wp-caption img{margin:0 auto}
.entry figcaption,.entry .wp-caption-text{font-size:14px;color:var(--mut);text-align:center;margin-top:6px}
.entry .alignleft,.entry .alignright,.entry .aligncenter,.entry .alignnone{float:none;display:block;margin:14px auto}
.entry table{display:block;max-width:100%;overflow-x:auto}
.entry blockquote{border-left:4px solid var(--ac);margin:1em 0;padding:6px 16px;background:var(--soft);border-radius:0 var(--r) var(--r) 0}
.tools{display:flex;gap:6px;align-items:center;margin:4px 0 8px;font-size:14px;color:var(--mut)}
.tools button{border:1px solid var(--line);background:var(--soft);border-radius:99px;padding:0 12px;font:700 14px inherit;cursor:pointer;color:var(--ink)}
.share{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.share a{border:1px solid var(--line);background:var(--soft);border-radius:99px;padding:5px 16px;font-weight:700;font-size:15px}
.wa{display:block;text-align:center;background:#25d366;color:#fff;border-radius:var(--r);padding:11px;font-weight:800;margin:16px 0}
.pager{text-align:center;margin:22px 0}.pager a,.pager span{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:3px 15px;margin:2px}
.pager .current{background:var(--ac);color:#fff;border-color:var(--ac)}
.rel{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rel .card h3{font-size:14px;-webkit-line-clamp:2}.rel .cm{display:none}
/* sidebar */
.lay{display:block}.main{min-width:0}.side{margin-top:18px}
.widget{background:var(--card);border-radius:var(--r);padding:12px 14px;margin-bottom:14px}
.widget h2{margin:0 0 8px;font-size:19px}
.widget ul,.widget ol{margin:0;padding-left:20px}.widget li{padding:6px 0;line-height:1.4}
.sl{list-style:none;margin:0;padding:0!important}
.sl li{padding:0!important;border-bottom:1px solid var(--line)}.sl li:last-child{border:0}
.sl a{display:flex;gap:10px;padding:9px 0;align-items:flex-start}
.sl .st{flex:none;width:92px;height:68px;border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,#f3f3f3,#e2e6f2);display:flex;align-items:center;justify-content:center;color:var(--ac);font-weight:800}
.sl .st img{width:100%;height:100%;object-fit:cover}
.sl .sx{min-width:0;display:flex;flex-direction:column;gap:2px}
.sl strong{font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sl em{font-style:normal;font-size:12px;color:var(--mut)}
/* footer + floating */
footer{margin-top:30px;padding:20px 0;text-align:center;font-size:14px;color:var(--mut);background:var(--hb);border-top:1px solid var(--line)}
footer ul{list-style:none;padding:0;margin:0 0 8px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
footer a{color:var(--ink);font-weight:700}
#khgp{position:fixed;top:0;left:0;height:3px;width:0;background:var(--ac);z-index:99}
#top{position:fixed;right:14px;bottom:76px;width:42px;height:42px;border-radius:50%;background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.12);font-size:20px;display:none;z-index:60}
.bn{position:fixed;left:0;right:0;bottom:0;background:var(--hb);border-top:1px solid var(--line);display:flex;z-index:70;padding-bottom:env(safe-area-inset-bottom,0)}
.bn a,.bn button{flex:1;color:var(--ink);background:none;border:0;text-align:center;padding:7px 0 5px;font:700 12px inherit;cursor:pointer}
.bn span{display:block;font-size:19px;line-height:1.1}
.tools+.wp-post-image{margin-top:0}
@media(min-width:768px){
 body{padding-bottom:0}.bn{display:none}#top{bottom:20px}.logo img{height:112px}
 .nav>ul,.nav .menu{justify-content:center;flex-wrap:wrap;overflow:visible}
 .nav li:hover>.sub-menu,.nav li:hover>.children{display:block;position:absolute;left:0;top:100%;background:var(--nb);border:1px solid var(--line);border-radius:var(--r);padding:6px;z-index:60;min-width:160px;box-shadow:0 8px 20px rgba(0,0,0,.12)}
 .nav .sub-menu li a{border-radius:8px;margin:2px 0}
 .grid.c{grid-template-columns:repeat(4,minmax(0,1fr))}
 .grid.t{grid-template-columns:1.6fr 1fr;grid-template-rows:repeat(3,auto)}.grid.t .big{grid-row:span 3}
 .grid.t .big .im{height:100%;aspect-ratio:auto;min-height:300px}
 .rel{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:992px){
 .khg-has-sb .lay{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}
 .khg-sb-left .lay{grid-template-columns:320px minmax(0,1fr)}.khg-sb-left .side{order:-1}
 .side{margin-top:14px;position:sticky;top:64px;max-height:calc(100vh - 80px);overflow-y:auto;scrollbar-width:thin}
 .khg-has-sb .grid.c{grid-template-columns:repeat(3,minmax(0,1fr))}
 .khg-has-sb .grid.c.rel{grid-template-columns:repeat(4,minmax(0,1fr))}
 .grid.t{grid-template-columns:1.7fr 1fr}
}
.nav li a:hover{background:#d4dcf8;color:#2c3a78}
.nav li.current-menu-item>a:hover{background:var(--na);color:var(--naf)}
.nav>ul,.nav .menu{padding:9px 14px}
.tick{background:#fff;border-radius:99px;box-shadow:var(--sh)}
.tick b{border-radius:99px;margin:3px;padding:2px 15px}
.trend h2{display:flex;align-items:center;gap:9px;font-size:21px}
.trend h2::before,.sec h2::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ac);flex:none}
.sec h2{display:flex;align-items:center;gap:9px}
.card .tag{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.96);color:var(--ac);border-radius:99px;padding:0 11px;font-size:12.5px;font-weight:800;z-index:2;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card h3{padding:11px 13px 3px}
.card .cm{padding:0 13px 13px}
@media(hover:hover){.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(30,40,90,.16)}}
.card.big{border-radius:22px;box-shadow:0 10px 26px rgba(30,40,90,.2)}
.card.big .im{aspect-ratio:4/3}
.card.big h3{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;font-size:23px;padding:64px 16px 16px;background:linear-gradient(transparent,rgba(10,15,40,.88));-webkit-line-clamp:3}
.card.big .cm{display:none}
.rank{background:#fff;color:var(--ac);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.grid.t .card:not(.big){padding:8px 8px 8px 8px}
.grid.t .card:not(.big) .im{border-radius:12px}
.grid.t .card:not(.big) h3{padding:2px 6px 0 0!important}
.grid.t .card:not(.big) .cm{padding:0 6px 2px 0!important}
.post{background:#fff;border-radius:22px;padding:16px;box-shadow:var(--sh)}
.post h1{font-size:27px;font-weight:800}
.widget{box-shadow:var(--sh)}
.widget h2{display:flex;align-items:center;gap:8px}.widget h2::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ac)}
.sl .st{border-radius:12px}
.share a{background:#e6ebfb;border:0;color:#2c3a78}
.tools button{background:#e6ebfb;border:0;color:#2c3a78}
footer{background:#fff}
@media(min-width:768px){.grid.t .big .im{min-height:320px}}