/* ===========================================================
   NationNama — نیشن نامہ
   Urdu RTL news portal — maroon / black / white
   Font: Nafees Web Naskh (self-hosted, same face express.pk uses),
         Noto Naskh Arabic as fallback. Bold headlines come from the
         browser's synthetic bold at weight 700 — the font ships one
         regular master, exactly as express serves it.
   =========================================================== */

/* local brand font — bold weights are synthesised by the browser */
@font-face {
  font-family:"Nafees Web Naskh";
  src:url("../fonts/NafeesWeb.woff") format("woff");
  font-weight:normal;   /* single master — the browser must SYNTHESISE bold at 700 (same as express) */
  font-style:normal;
  font-display:swap;
}

:root {
  --red:#5c0632; --red-dark:#420424; --black:#000;
  --ink:#212529; --muted:#777; --line:#e5e5e5; --soft:#f7f7f7;
  --maxw:1200px;
  /* type scale */
  --fs-base:15px; --fs-head:18px; --fs-section:20px;
  --fs-lead:clamp(24px,3vw,32px); --fs-title:clamp(26px,3.4vw,36px); --fs-lead2:clamp(20px,2.6vw,27px);
  /* spacing / rhythm */
  --gap:16px; --gap-sm:12px; --block:20px;
  --ease:.18s cubic-bezier(.4,0,.2,1);
  --urdu:"Nafees Web Naskh","Noto Naskh Arabic","Jameel Noori Nastaleeq",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--urdu);
  font-size:var(--fs-base);line-height:1.55;direction:rtl;text-align:right}
a{color:inherit;text-decoration:none;transition:color var(--ease)}
a:hover{color:var(--red)}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
.container{max-width:min(var(--maxw),96vw);margin:0 auto;padding:0 14px}

/* a11y: skip link + visible keyboard focus */
.skip-link{position:absolute;top:-60px;right:8px;z-index:200;background:var(--red);color:#fff;padding:10px 16px;font-weight:700;transition:top var(--ease)}
.skip-link:focus{top:8px}
a:focus-visible,button:focus-visible,input:focus-visible,label:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* placeholder image boxes — show the NationNama logo (branded placeholder) */
.ph{position:relative;background:#f6eef0 url('../img/placeholder-logo.png') center center / auto 56% no-repeat;overflow:hidden;aspect-ratio:16/9}
.ph::after{content:none}
/* real uploaded images cover the box; the logo shows behind only while loading */
img.ph{object-fit:cover}
.ph.sq{aspect-ratio:1/1}
.ph.wide{aspect-ratio:16/9}
.ph.vid{aspect-ratio:16/9}
/* cap large featured images to keep the page compact */
.hero .big .ph{max-height:360px}
.mh-feat .ph{max-height:250px}
.feat .ph{max-height:260px}
.vplayer .ph{max-height:320px}

/* ---------- top utility bar (black) ---------- */
.topbar{background:var(--red);font-size:12px}
.topbar .container{display:flex;align-items:center;justify-content:space-between;min-height:34px;gap:10px}
.topbar .t-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.3px}
.topbar .t-links a{color:#fff;font-weight:600}
.topbar .t-links a:hover{color:#e9c7d2}

/* news ticker (scrolling headlines below nav) */
.ticker{background:#f3f3f3;border-top:2px solid var(--red);border-bottom:1px solid var(--line)}
.ticker .container{display:flex;align-items:stretch;overflow:hidden;padding:0 14px}
.ticker-label{background:var(--red);color:#fff;font-weight:700;font-size:14px;padding:9px 16px;white-space:nowrap;flex:none;display:flex;align-items:center}
.ticker-wrap{flex:1;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
/* 4 copies in the track; shift by exactly one copy (-25%) → seamless loop, never blanks.
   `reverse` makes it scroll RIGHT-to-LEFT (correct for Urdu/RTL). */
.ticker-track{display:inline-flex;align-items:center;white-space:nowrap;padding:9px 0;animation:ticker 60s linear infinite;will-change:transform}
.ticker-wrap:hover .ticker-track{animation-play-state:paused}
.ticker-track a{font-size:14px;color:var(--ink);font-weight:700;padding:0 6px}
.ticker-track a:hover{color:var(--red)}
.ticker-track .t-sep{color:var(--red);margin:0 12px;font-size:9px}
/* RTL: the track overflows LEFT, so shift RIGHT (+25% = one of the 4 copies).
   This keeps content inside the visible window the whole cycle — a -25%/reverse
   shift pushed the track off-screen left (blank), worst on narrow mobile. */
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(25%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ===== Prize Bond ===== */
.pb-crumbs{font-size:13px;color:var(--muted);margin:2px 0 14px}
.pb-crumbs a{color:var(--red);font-weight:700}
.pb-check{background:#f6eef0;border:1px solid var(--line);border-radius:10px;padding:14px}
.pb-checkform{display:flex;gap:8px;flex-wrap:wrap}
.pb-checkform select,.pb-checkform input{height:44px;border:1px solid #ccc;border-radius:8px;padding:0 12px;font-family:var(--urdu);font-size:16px}
.pb-checkform input{flex:1;min-width:180px;direction:ltr;text-align:left}
.pb-checkform button{height:44px;padding:0 24px;border:0;border-radius:8px;background:var(--red);color:#fff;font-family:var(--urdu);font-size:16px;font-weight:700;cursor:pointer}
.pb-checkform button:hover{background:var(--red-dark)}
.pb-result{margin-top:12px;padding:12px 14px;border-radius:8px;font-size:16px;line-height:1.8}
.pb-result.win{background:#e7f6ec;border:1px solid #27ae60;color:#1a5e34}
.pb-result.lose{background:#fdecea;border:1px solid #e74c3c;color:#9b2c22}
.pb-result ul{margin:8px 0 0;padding:0 18px 0 0;list-style:disc}
.pb-result a{color:var(--red);font-weight:700;margin-right:6px}
.pb-denoms{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:600px){.pb-denoms{grid-template-columns:repeat(2,1fr)}}
.pb-denom{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 8px;transition:all var(--ease)}
.pb-denom:hover{border-color:var(--red);box-shadow:0 5px 14px rgba(0,0,0,.08);transform:translateY(-2px)}
.pb-denom .pb-rs{font-size:13px;color:var(--muted);font-family:Arial}
.pb-denom .pb-amt{font-size:26px;font-weight:800;color:var(--red);font-family:Arial}
.pb-denom .pb-prem{font-size:11px;background:var(--red);color:#fff;border-radius:10px;padding:1px 8px}
.pb-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pb-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--line);font-size:15px}
.pb-row:first-child{border-top:0}
.pb-row:hover{background:#f6eef0}
.pb-row .pb-no{font-weight:700;color:var(--ink);flex:1}
.pb-row .pb-dt{font-size:13px;color:var(--muted)}
.pb-row .pb-go{font-size:13px;color:var(--red);font-weight:700}
.pb-row.pdf .pb-go{color:#555}
.pb-meta{color:#555;font-size:14px;margin:0 0 14px}
.pb-prize{margin:0 0 18px}
.pb-prize h3{font-size:18px;margin:0 0 8px;color:#fff;background:var(--red);display:inline-block;padding:4px 14px;border-radius:4px}
.pb-prize.first h3{background:#b8860b}.pb-prize.second h3{background:#555}
.pb-prize .pb-cnt{font-size:12px;font-weight:400;opacity:.85}
.pb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:4px;direction:ltr}
.pb-grid span{background:#f5f5f5;border:1px solid #eee;border-radius:4px;padding:5px 2px;text-align:center;font-family:Arial,monospace;font-size:14px;letter-spacing:.5px}
.pb-prize.first .pb-grid span,.pb-prize.second .pb-grid span{background:#fff4d6;border-color:#e8d08a;font-weight:700;font-size:18px}
.pb-src{font-size:12px;color:var(--muted);margin-top:10px}
.pb-none{color:var(--muted);padding:10px 0}
/* homepage prize-bond widget */
.pb-widget{background:#f6eef0;border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center}
.pb-widget .pbw-head{font-size:17px;font-weight:800;color:var(--red);margin-bottom:10px}
.pb-widget .pbw-form{display:flex;gap:6px}
.pb-widget .pbw-form input{flex:1;min-width:0;height:40px;border:1px solid #ccc;border-radius:7px;padding:0 10px;font-family:var(--urdu);font-size:15px;direction:ltr;text-align:left}
.pb-widget .pbw-form button{height:40px;padding:0 14px;border:0;border-radius:7px;background:var(--red);color:#fff;font-family:var(--urdu);font-weight:700;white-space:nowrap;cursor:pointer}
.pb-widget .pbw-form button:hover{background:var(--red-dark)}
.pb-widget .pbw-all{display:inline-block;margin-top:10px;font-size:13px;color:var(--red);font-weight:700}
.topbar .t-links a.t-admin{background:rgba(255,255,255,.16);padding:2px 10px;border-radius:12px;font-weight:700}
.topbar .t-links a.t-admin:hover{background:rgba(255,255,255,.28);color:#fff}

.topbar .t-social{display:flex;align-items:center;gap:10px}
.topbar .t-social a{color:#fff;display:inline-flex;align-items:center}
.topbar .t-social a svg{width:15px;height:15px}
.topbar .t-social a:hover{color:#e9c7d2}
.topbar .t-social span{color:#fff;font-size:12px;font-weight:700}

/* ---------- logo band ---------- */
.logoband{background:#fff}
.logoband .container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:12px 14px 8px}
.logoband .side-left{justify-self:start;font-size:12px;color:var(--muted)}
.logoband .side-left a{color:#000;font-weight:700}
.logoband .side-right{justify-self:end;font-size:12px;color:var(--muted);text-align:left}
.brand{justify-self:center;display:flex;align-items:center;gap:12px}
.brand-logo{height:66px;width:auto;max-width:100%;display:block}
@media(max-width:600px){.brand-logo{height:44px}}
.brand .mark{background:var(--red);color:#fff;font-family:Arial,sans-serif;font-weight:800;font-size:28px;line-height:1;padding:9px 15px 7px;letter-spacing:1px;border-radius:2px;text-align:center}
.brand .mark small{display:block;font-family:var(--urdu);font-size:13px;font-weight:400;margin-top:2px}
.brand .name{font-size:38px;color:var(--ink);line-height:1.1}
.brand .tag{font-size:11px;color:var(--muted)}

/* ---------- main nav (white, black items) + mobile hamburger ---------- */
.mainnav{background:#fff;border-top:2px solid #000;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.mainnav .container{display:flex;align-items:stretch}
.nav-items{flex:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;row-gap:0}
.mainnav a{color:#212529;padding:9px 11px;font-size:15px;white-space:nowrap;font-weight:700;line-height:1.4}
.mainnav a:hover{color:var(--red);background:transparent}
.mainnav a.nav-pb{color:#fff;background:#b8860b;border-radius:4px;padding:5px 12px;margin:0 4px}
.mainnav a.nav-pb:hover{background:#9c7209;color:#fff}
.mainnav a.active{color:#000;background:transparent}
.nav-items a:last-child{color:#000}
/* مزید dropdown (click to open) */
.nav-more{position:relative}
.more-toggle{color:#212529;padding:9px 11px;font-size:15px;font-weight:700;line-height:1.4;background:none;border:0;cursor:pointer;font-family:inherit;white-space:nowrap}
.more-toggle:hover,.nav-more.open .more-toggle{color:var(--red)}
.more-toggle .caret{font-size:11px}
.more-menu{position:absolute;top:100%;right:0;min-width:210px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,.14);border-radius:8px;padding:6px;display:none;z-index:130;text-align:right}
.nav-more.open .more-menu{display:block}
.more-menu a{display:block;padding:9px 12px;border-radius:6px;color:var(--ink);font-size:14px;font-weight:700;white-space:nowrap}
.more-menu a:hover{background:var(--soft);color:var(--red)}
.more-menu .nav-pb-sub{color:#b8860b;border-top:1px solid var(--line);margin-top:4px;padding-top:11px}
.nav-tog{position:absolute;opacity:0;pointer-events:none}
.nav-toggle{display:none;cursor:pointer;padding:11px 14px;font-weight:700;color:var(--ink);font-size:var(--fs-head);user-select:none}
@media(max-width:820px){
  .nav-toggle{display:flex;align-items:center;gap:8px}
  .nav-items{display:none;flex-direction:column;width:100%}
  .nav-tog:checked ~ .container .nav-items{display:flex}
  .nav-items a{border-top:1px solid var(--line);padding:11px 14px}
  .nav-more{width:100%}
  .more-toggle{width:100%;text-align:right;border-top:1px solid var(--line);padding:11px 14px}
  .more-menu{position:static;box-shadow:none;border:0;border-radius:0;min-width:0;padding:0}
  .more-menu a{border-top:1px solid var(--line);padding:11px 24px 11px 14px}
}

/* ---------- section heading ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:2px solid var(--line);margin:0 0 8px;padding-bottom:0}
.sec-head h2{margin:0;font-size:var(--fs-section);color:#fff;background:var(--red);padding:3px 14px 1px}
.sec-head .more{font-size:12px;color:var(--muted);padding-bottom:5px}
.sec-head .more:hover{color:var(--red)}
.cat{display:inline-block;background:var(--red);color:#fff;font-size:11px;padding:1px 7px;margin-bottom:3px}

/* ---------- hero (express-style) ----------
   Full-width bold headline on top, then a half/half row:
   featured image (right, RTL) + live-updates list (left), the image
   stretched to match the list height. */
main{padding:12px 0 20px}
.hero{margin-bottom:16px}
.hero .lead-head h1.lh{font-size:var(--fs-lead);line-height:1.3;margin:0 0 4px;color:var(--ink);font-weight:700}
.hero .lead-head:hover h1{color:var(--red)}
.hero .live{display:inline-flex;align-items:center;gap:7px;color:#000;font-size:13px;font-weight:700;letter-spacing:.5px;margin:0 0 10px;font-family:Arial,sans-serif}
.hero .live::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red);animation:blink 1.1s infinite}
@keyframes blink{50%{opacity:.25}}
.hero-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
@media(max-width:820px){.hero-row{grid-template-columns:1fr}}
.hero-row .big{display:flex}
.hero-row .big a{display:block;width:100%}
.hero-row .big .ph{width:100%;height:100%;min-height:300px;object-fit:cover}
.hero-row .upd{align-self:stretch;max-height:320px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--red) #eee}
.hero-row .upd::-webkit-scrollbar{width:6px}
.hero-row .upd::-webkit-scrollbar-thumb{background:var(--red);border-radius:3px}
.hero-row .upd::-webkit-scrollbar-track{background:#eee;border-radius:3px}
.hero-row .upd li{border-top:1px solid var(--line);padding:10px 0}
.hero-row .upd li:first-child{border-top:0;padding-top:0}
.hero-row .upd .badge{display:inline-block;direction:ltr;background:#e8e8e8;color:#000;font-size:10px;padding:1px 8px;border-radius:9px;margin-bottom:5px;font-family:Arial,sans-serif;letter-spacing:.2px}
.hero-row .upd a{display:block;font-size:var(--fs-head);line-height:1.35;font-weight:700;color:var(--ink)}
.hero-row .upd a:hover{color:var(--red)}

/* ---------- master 2-col layout ---------- */
.wrap{display:grid;grid-template-columns:2.55fr 1fr;gap:20px}
@media(max-width:900px){.wrap{grid-template-columns:1fr}}
.block{margin-bottom:var(--block)}

/* ---------- masthead (featured + khas) ---------- */
.masthead{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
@media(max-width:700px){.masthead{grid-template-columns:1fr}}
.mh-lead .ph{aspect-ratio:16/9;max-height:250px;margin-bottom:6px}
.mh-lead h3{margin:0 0 4px;font-size:var(--fs-lead2);line-height:1.35;color:var(--ink)}
.mh-lead:hover h3{color:var(--red)}
.mh-feat p{margin:0 0 8px;color:#555;font-size:var(--fs-head)}
.mh-sub{margin-top:8px;border-top:2px solid var(--line);padding-top:4px}
.mh-sub a{grid-template-columns:1fr 108px;font-size:var(--fs-head)}
/* masthead sub-items with excerpts (fills the featured column) */
.mh-sub2{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.mh-sub-item{display:grid;grid-template-columns:1fr 120px;gap:10px;align-items:start;padding-top:12px;border-top:1px solid var(--line)}
.mh-sub-item:first-child{border-top:0;padding-top:0}
.mh-sub-item .ph{aspect-ratio:4/3;border-radius:6px}
.mh-sub-item h4{margin:0 0 4px;font-size:var(--fs-head);line-height:1.4;color:var(--ink);font-weight:700}
.mh-sub-item:hover h4{color:var(--red)}
.mh-sub-item p{margin:0;font-size:14px;line-height:1.55;color:#555;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mh-khas .hlist a{grid-template-columns:1fr 104px;font-size:var(--fs-head)}

/* ---------- category section: featured(right) + grid(left) ---------- */
.catsec-row{display:grid;grid-template-columns:1fr 1.35fr;gap:16px;align-items:start}
@media(max-width:700px){.catsec-row{grid-template-columns:1fr}}
.cs-feat .ph{aspect-ratio:16/9;max-height:230px;margin-bottom:6px}
.cs-feat h3{margin:0 0 4px;font-size:var(--fs-head);line-height:1.5}
.cs-feat p{margin:0 0 4px;color:#555;font-size:var(--fs-head)}
.cs-feat .meta{font-size:12px;color:var(--muted)}

/* پاکستان 4-col grid: featured spans 2x2 */
.pk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:700px){.pk-grid{grid-template-columns:repeat(2,1fr)}}
.pk-grid .cs-feat{grid-column:span 2;grid-row:span 2;margin:0}
.pk-grid .cs-feat .ph{aspect-ratio:16/11;max-height:none}
@media(max-width:700px){.pk-grid .cs-feat{grid-column:span 2;grid-row:auto}}

/* ---------- featured + grid patterns (half sections) ---------- */
.feat .ph{aspect-ratio:16/9;margin-bottom:6px}
.feat h3{margin:0 0 4px;font-size:var(--fs-head);line-height:1.5}
.feat p{margin:0;color:#555;font-size:var(--fs-head)}

.grid{display:grid;gap:12px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.g4,.g3,.g2{grid-template-columns:1fr}}
.icard{transition:transform var(--ease),box-shadow var(--ease)}
.icard:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(0,0,0,.09)}
.icard .ph{aspect-ratio:16/9}
.icard .ph::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background var(--ease);z-index:1}
.icard:hover .ph::before{background:rgba(0,0,0,.06)}
.icard h3{margin:4px 0 0;font-size:var(--fs-head);line-height:1.5}
.icard:hover h3{color:var(--red)}

/* headline list with thumb */
.hlist li{padding:7px 0;border-top:1px solid var(--line)}
.hlist li:first-child{border-top:0}
.hlist a{display:grid;grid-template-columns:1fr 108px;gap:10px;align-items:start;font-size:var(--fs-head);line-height:1.5}
.hlist .ph{aspect-ratio:4/3}
.hlist .time{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.hlist.notimg a{display:block}

/* two half sections side by side */
.halves{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.halves:empty{display:none}
@media(max-width:700px){.halves{grid-template-columns:1fr}}

/* grey background band for select sections */
.band{background:#f6eef0;padding:12px 14px 16px}

/* ---------- videos ---------- */
.vid-sec{background:#f6eef0;padding:12px 14px 16px}
.videos-row{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
@media(max-width:700px){.videos-row{grid-template-columns:1fr}}
.vplayer{position:relative}
.vplayer .ph{aspect-ratio:16/9;max-height:300px;background:#1c1c1c}
.vplayer .ph::after{content:"ویڈیو";color:#666}
.vplayer .play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:20px}
.vlist li{padding:7px 0;border-top:1px solid var(--line)}
.vlist li:first-child{border-top:0}
.vlist a{display:grid;grid-template-columns:1fr 104px;gap:10px;align-items:center;font-size:var(--fs-head);line-height:1.5}
.vthumb{position:relative}
.vthumb .ph{aspect-ratio:16/9}
.vthumb .play{position:absolute;inset:0;margin:auto;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:10px}

/* ---------- SIDEBAR ---------- */
.side .promo .ph{aspect-ratio:16/9}
.side .block{margin-bottom:16px}
/* ---------- عوامی سہولیات utilities card grid ---------- */
.util-wrap{margin-bottom:16px}
.util-head{background:var(--red);color:#fff;border-radius:10px;padding:10px 14px;margin-bottom:10px}
.util-head h3{margin:0;font-size:16px;font-weight:700}
.util-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.util-card{position:relative;border-radius:14px;padding:16px 10px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;color:#000;min-height:138px;border:1px solid rgba(0,0,0,.05)}
a.util-card{transition:transform var(--ease)}
a.util-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.1)}
.util-card .uc-ic{font-size:28px;line-height:1;width:56px;height:56px;display:grid;place-items:center;background:rgba(255,255,255,.8);border-radius:50%;box-shadow:0 2px 7px rgba(0,0,0,.09);margin-bottom:9px}
.util-card .uc-t{font-weight:700;font-size:14px;line-height:1.3}
.util-card .uc-v{font-weight:800;font-size:16px;margin-top:4px}
.util-card .uc-s{font-size:11px;color:#555;margin-top:2px;line-height:1.35}
.util-card .uc-go{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);color:#bbb;font-weight:700;font-size:16px}
.util-card.c-wx{background:#e8f1fb}.util-card.c-pr{background:#fdf2e0}.util-card.c-pb{background:#fbeaf0}
.util-card.c-gold{background:#fbf3dd}.util-card.c-cur{background:#e9f5ec}.util-card.c-pet{background:#fdeaea}
.util-card.c-qr{background:#eef4e4}.util-card.c-isl{background:#fbeaf0}
/* WhatsApp "send your news" sidebar banner */
.news-wa{display:block;background:#0f8a3c;color:#fff;border-radius:14px;padding:18px 14px;margin-bottom:16px;text-align:center;transition:transform var(--ease)}
.news-wa:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.16)}
.news-wa .nw-ic{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;margin:0 auto 10px}
.news-wa .nw-ic svg{width:30px;height:30px}
.news-wa .nw-h{font-size:17px;font-weight:800;line-height:1.35;margin-bottom:7px}
.news-wa .nw-p{font-size:12.5px;line-height:1.65;opacity:.96;margin-bottom:13px}
.news-wa .nw-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#0f8a3c;font-weight:800;font-size:13px;padding:10px 18px;border-radius:24px}
.news-wa .nw-btn svg{width:16px;height:16px}
/* rates page */
.rl-head{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.rl-badge{background:var(--red);color:#fff;font-size:12px;font-weight:700;padding:3px 12px;border-radius:20px}
.rates-date{color:#555}
.rates-fig{margin:0}.rates-fig img{width:100%;border:1px solid var(--line);border-radius:8px;display:block}
.rates-prev{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.rp-item{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;text-align:center;background:#fff;transition:transform var(--ease)}
.rp-item:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(0,0,0,.08)}
.rp-item img{width:100%;height:150px;object-fit:cover;object-position:top;display:block;background:#f6f6f6}
.rp-item .rp-date{display:block;padding:7px 4px;font-size:12px;color:#555;font-weight:700}
.rates-src{font-size:13px;color:#888;margin:14px 0 0}
.infocards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ic{border:1px solid var(--line);border-radius:4px;padding:14px 6px;text-align:center;background:var(--soft)}
.ic .ico{width:44px;height:44px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;font-size:19px;color:#fff;background:var(--red)}
.ic .ico.g{background:#e0a800}.ic .ico.p{background:#c0392b}.ic .ico.w{background:#2980b9}.ic .ico.n{background:#16a085}
.ic span{font-size:14px}

/* live sidebar widgets (prayer, weather, rates) */
.wdg{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:16px}
.wdg-head{background:var(--red);color:#fff;font-size:15px;padding:8px 12px}
.wdg-head i{font-style:normal;margin-left:4px}
.wdg-body{padding:4px 12px 8px}
.wdg-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:15px}
.wdg-row:last-child{border-bottom:0}
.wdg-row b{color:#000;font-weight:700}
.wdg-weather{text-align:center;padding:14px 12px 18px;background:var(--soft)}
.wdg-weather .temp{font-size:36px;font-weight:800;color:#000;line-height:1}
.wdg-weather .cond{color:var(--muted);font-size:15px;margin-top:4px}

.mr-lead .ph{aspect-ratio:16/9;margin-bottom:6px}
.mr-lead h3{margin:0;font-size:var(--fs-head);line-height:1.5}
/* مقبول خبریں (popular): larger thumbnails + more legible headlines */
.popnews .hlist a{grid-template-columns:1fr 104px;gap:10px}
.popnews .hlist .ph{aspect-ratio:4/3}
.popnews .hlist li{padding:11px 0}
.op-row{display:grid;grid-template-columns:1fr 50px;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.op-row:first-child{border-top:0}
.op-row .ph{aspect-ratio:1/1;border-radius:50%}
.op-row h4{margin:0;font-size:15px;line-height:1.45}
.op-row .author{font-size:12px;color:#000}

/* 6-up grid (related strip) */
.g6{grid-template-columns:repeat(6,1fr)}
@media(max-width:860px){.g6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.g6{grid-template-columns:repeat(2,1fr)}}
.icard .meta{display:block;font-size:12px;color:var(--muted);margin-top:3px}

/* ========== STORY / ARTICLE PAGE ========== */
.story-wrap{max-width:760px;margin:6px auto 0}
.story-title{font-size:var(--fs-title);line-height:1.5;margin:0 0 10px;color:#000}
.story-sub{font-size:20px;line-height:1.55;color:#000;margin:0 0 14px}
.story-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0;margin-bottom:16px;flex-wrap:wrap}
.story-meta .date{font-size:13px;color:var(--muted)}
.share{display:flex;gap:8px}
.share a{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:#555}
.share a.wa{background:#25d366}.share a.x{background:#000}.share a.fb{background:#1877f2}.share a.in{background:#0a66c2}.share a.em{background:#777}
.share a svg{width:15px;height:15px}
.story-img{margin:0 0 16px}
.story-img .si-media{position:relative;display:block}
.story-img .si-media img{display:block}
.story-img:not(.inline) .si-media img{width:100%}            /* featured image fills the column (centred) */
.story-img.inline{text-align:center}                          /* inline images centre between right & left */
.story-img.inline .si-media{display:inline-block}
/* "AI Generated" disclosure badge — dark pill, bottom-left */
.ai-badge{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;background:rgba(0,0,0,.62);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;z-index:3;font-family:Arial,sans-serif;direction:ltr;letter-spacing:.2px;line-height:1.4}
.ai-badge svg{width:13px;height:13px;flex:none}
/* Breaking news (بریکنگ) — red image-corner label (auto-off after 2h, handled server-side) */
.pic-brk{position:relative;display:block}
.pic-brk>img,.pic-brk>.ph{display:block;width:100%}
.hero-row .big .pic-brk,.hero-row .big .pic-brk>.ph,.hero-row .big .pic-brk>img{height:100%}
.brk-badge{position:absolute;right:8px;top:8px;background:#e21e26;color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:5px;display:inline-flex;align-items:center;gap:5px;z-index:4;font-family:Arial,sans-serif;line-height:1.4;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.brk-badge .bdot{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.1s infinite}
.story-img .ph{aspect-ratio:16/9}
.story-img figcaption{font-size:13px;color:#555;padding:8px 12px;background:var(--soft);border-right:3px solid var(--red);line-height:1.6}
.story-body p{font-size:22px;line-height:1.5;margin:0 0 15px;color:#000}
/* rich-text formatting from the WYSIWYG editor */
.story-body h2{font-size:26px;font-weight:700;color:#000;margin:20px 0 10px;line-height:1.35}
.story-body h3{font-size:22px;font-weight:700;color:#000;margin:16px 0 8px;line-height:1.4}
.story-body ul,.story-body ol{margin:0 20px 16px 0;padding-right:20px;font-size:20px;line-height:1.8;color:#000}
.story-body li{margin-bottom:7px}
.story-body a{color:var(--red);text-decoration:underline}
.story-body strong,.story-body b{font-weight:700}
.story-body u{text-decoration:underline}
.story-body .ql-align-center{text-align:center}
.story-body .ql-align-right{text-align:right}
.story-body .ql-align-left{text-align:left}
.story-body .ql-align-justify{text-align:justify}
/* inline media inside article body */
.story-img.inline{margin:18px auto;text-align:center}
.story-img.inline img{max-width:100%;height:auto;max-height:560px;border-radius:6px;display:inline-block}
.story-video{margin:18px 0}
.story-video iframe,.story-video video{width:100%;aspect-ratio:16/9;border:0;display:block;border-radius:6px;background:#000}
/* embedded social posts */
.embed-wrap{margin:18px auto;max-width:560px;display:flex;justify-content:center}
.embed-wrap iframe,.embed-wrap blockquote{max-width:100%!important}
.embed-link{word-break:break-all}
.story-video figcaption,.story-img figcaption{font-size:13px;color:#555;padding:8px 12px;background:var(--soft);border-right:3px solid var(--red);line-height:1.6}
/* Opinion columnist byline (photo + name) */
.columnist{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:12px 14px;background:var(--soft);border-radius:10px;border-right:4px solid var(--red)}
.columnist .col-photo{width:74px;height:74px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.14);flex:none}
.columnist .col-by{display:flex;flex-direction:column;gap:2px}
.columnist .col-label{font-size:12px;color:var(--red);font-weight:700}
.columnist .col-name{font-size:20px;font-weight:700;color:#000;line-height:1.3}
/* Opinion category: columnist cards (round photo + name) */
.op-card{text-align:center;display:flex;flex-direction:column;align-items:center;padding:16px 12px;background:var(--soft);border-radius:12px}
.op-card .opc-face{width:92px;height:92px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.15);margin-bottom:10px;aspect-ratio:1/1}
.op-card h3{margin:0 0 4px;font-size:var(--fs-head);line-height:1.4;color:#000}
.op-card .opc-name{color:var(--red);font-weight:700;font-size:13px;margin-bottom:2px}
.op-card .meta{color:#999;font-size:12px}
/* columnist byline on the Opinion lead */
.cl-writer{display:flex;align-items:center;gap:10px;margin:8px 0}
.cl-writer img{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.16)}
.cl-writer .cl-by{display:flex;flex-direction:column;line-height:1.3}
.cl-writer .cl-label{font-size:11px;color:var(--red);font-weight:700}
.cl-writer .cl-by b{font-size:16px;color:#000}
/* multiple category tags */
.story-tags a{margin-left:6px}
.story-body blockquote{margin:0 0 16px;padding:10px 16px;border-right:4px solid var(--red);background:var(--soft);font-size:19px;color:#333}
.story-tags{margin:18px 0;padding-top:12px;border-top:1px solid var(--line);font-size:14px}
.story-tags span{color:var(--muted);margin-left:8px}
.story-tags a{display:inline-block;background:var(--soft);padding:3px 12px;margin:0 0 6px 6px;border-radius:3px;font-size:14px}
.story-share-bottom{display:flex;align-items:center;gap:12px;background:var(--soft);padding:12px 14px;margin-bottom:10px}
.story-share-bottom span{font-size:15px}
.related{max-width:1000px;margin:24px auto 0}

/* ========== CENTERED PAGE TITLE (Latest etc.) ========== */
.page-title{text-align:center;border-bottom:2px solid var(--line);margin:6px 0 16px}
.page-title h1{display:inline-block;margin:0 0 -2px;font-size:var(--fs-section);color:var(--ink);border-bottom:3px solid var(--red);padding-bottom:8px}

/* ========== تازہ ترین FEED ========== */
.feed-item{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.feed-item:first-child{padding-top:0}
.feed-item .ph{aspect-ratio:16/10}
.feed-txt h2{margin:0 0 6px;font-size:21px;line-height:1.4;color:var(--ink)}
.feed-item:hover h2{color:var(--red)}
.feed-txt p{margin:0 0 8px;color:#555;font-size:14px;line-height:1.8}
.feed-txt .meta{font-size:12px;color:var(--muted)}
@media(max-width:520px){.feed-item{grid-template-columns:120px 1fr;gap:10px}.feed-txt p{display:none}}

/* ========== CATEGORY PAGE ========== */
.cat-title{border-bottom:2px solid var(--red);margin:6px 0 16px}
.cat-title h1{display:inline-block;margin:0;background:var(--red);color:#fff;font-size:24px;padding:5px 22px 3px}
.cat-lead{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:center;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:18px}
@media(max-width:620px){.cat-lead{grid-template-columns:1fr}}
.cat-lead .ph{aspect-ratio:16/9}
.cat-lead h2{margin:0 0 6px;font-size:20px;line-height:1.5;color:var(--ink)}
.cat-lead:hover h2{color:var(--red)}
.cat-lead p{margin:0 0 6px;color:#555;font-size:var(--fs-head)}
.cat-lead .meta{font-size:12px;color:var(--muted)}
.cat-grid.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.cat-grid.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.cat-grid.g3{grid-template-columns:1fr}}
.cat-loader{display:flex;align-items:center;justify-content:center;gap:9px;padding:20px;color:#777;font-size:14px}
.cat-loader[hidden],.cat-end[hidden]{display:none}
.cat-loader .spin{width:20px;height:20px;border:2px solid #ddd;border-top-color:var(--red);border-radius:50%;animation:catspin .7s linear infinite}
@keyframes catspin{to{transform:rotate(360deg)}}
.cat-end{text-align:center;padding:16px;color:#aaa;font-size:13px}
.pagination{display:flex;gap:6px;justify-content:center;margin:24px 0 6px;direction:ltr;flex-wrap:wrap}
.pagination .gap{display:grid;place-items:center;min-width:20px;color:#999}
.pagination a{min-width:34px;height:34px;padding:0 8px;display:grid;place-items:center;border:1px solid var(--line);font-size:14px;color:#333}
.pagination a:hover,.pagination a.active{background:var(--red);color:#fff;border-color:var(--red)}
.follow-box .follow-icons{display:flex;gap:10px;padding:10px 0;flex-wrap:wrap}
.follow-box .follow-icons a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#555;transition:transform var(--ease)}
.follow-box .follow-icons a:hover{transform:translateY(-2px)}
.follow-box .follow-icons a svg{width:20px;height:20px}
.follow-box .follow-icons a.facebook{background:#1877f2}
.follow-box .follow-icons a.x{background:#111}
.follow-box .follow-icons a.youtube{background:#ff0000}
.follow-box .follow-icons a.linkedin{background:#0a66c2}
.follow-box .follow-icons a.whatsapp{background:#25d366}
.follow-box .follow-icons a.email{background:#777}

/* ad */
.ad-slot{border:1px dashed #cfcfcf;color:#b4b4b4;font-size:12px;display:grid;place-items:center;background:#fafafa}
.ad-slot.full{width:100%;height:90px;margin:14px 0}
/* masthead ad box — fills the featured column (medium-rectangle sized) */
.mh-ad{width:100%;min-height:250px;margin-top:16px;border-radius:8px;gap:4px;flex-direction:column}
.mh-ad span{font-size:12px;color:#c4c4c4}

/* ---------- footer ---------- */
.footer{background:#333;color:#cfcfcf;margin-top:24px}
.footer .f-top{padding:30px 0;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;align-items:start}
@media(max-width:820px){.footer .f-top{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer .f-top{grid-template-columns:1fr}}
.footer .f-brand .name{font-size:26px;color:#fff;margin:8px 0 4px}
.footer .f-logo-img{height:46px;width:auto;max-width:100%;display:block;margin:0 0 12px;filter:brightness(0) invert(1)}
.footer .f-brand p{font-size:13px;line-height:1.9;color:#aaa;max-width:340px;margin:0 0 10px}
.footer a{color:#cfcfcf;display:block;padding:3px 0;font-size:13px}
.footer a:hover{color:#fff}
.footer .badges a{display:inline-block;border:1px solid #666;border-radius:5px;padding:7px 12px;margin-bottom:8px;font-size:12px;color:#ddd}
.footer .f-cats{columns:2;column-gap:20px}
.footer .f-right{text-align:left}
.footer .f-logo{background:var(--red);color:#fff;font-family:Arial;font-weight:800;font-size:22px;padding:6px 12px;display:inline-block;border-radius:2px;margin-bottom:10px}
.footer .f-social{display:flex;gap:8px;justify-content:flex-start;margin:8px 0}
.footer .f-social a,.footer .f-social span{width:30px;height:30px;border-radius:50%;background:#555;display:grid;place-items:center;font-weight:700;color:#fff}
.footer .f-social a svg{width:16px;height:16px}
.footer .f-social a.facebook{background:#1877f2}
.footer .f-social a.x{background:#111}
.footer .f-social a.whatsapp{background:#25d366}
.footer .f-social a.youtube{background:#ff0000}
.footer .f-social a.linkedin{background:#0a66c2}
.footer .f-social a.email{background:#777}
.footer .f-links2 a{display:inline-block;margin-left:14px}
.footer .f-bar{background:var(--red);color:#fff;text-align:center;padding:9px;font-size:13px}

/* floating PWA install button (brand style) */
.pwa-install{position:fixed;left:16px;bottom:16px;z-index:300;background:var(--red);color:#fff;border:0;
  border-radius:30px;padding:12px 22px;font-family:var(--urdu);font-size:17px;font-weight:700;
  box-shadow:0 5px 18px rgba(0,0,0,.28);cursor:pointer;transition:background var(--ease),transform var(--ease)}
.pwa-install:hover{background:var(--red-dark);transform:translateY(-1px)}
.pwa-install[hidden]{display:none}
@media(max-width:600px){.pwa-install{left:12px;bottom:12px;font-size:15px;padding:10px 18px}}

/* ===========================================================
   HEADLINE WEIGHT & RHYTHM — match express.pk
   Nafees Web Naskh ships one regular master; the browser
   synthesises bold at 700, exactly as express does. Headlines
   also use express's tight line-height (~1.2–1.3) so they read
   as dense newspaper headlines instead of loose paragraphs.
   Kept as one block at the end so it overrides the defaults above.
   =========================================================== */
.hero .lead-head h1.lh{font-weight:700;line-height:1.3}
.hero-row .upd a{font-weight:700;line-height:1.35}
.mh-lead h3,.cs-feat h3,.feat h3,.icard h3,.mr-lead h3{font-weight:700;line-height:1.3}
.hlist a,.mh-sub a,.mh-khas .hlist a,.vlist a{font-weight:700;line-height:1.35}
.feed-txt h2,.cat-lead h2{font-weight:700;line-height:1.3}
.op-row h4{font-weight:700;line-height:1.35}
.story-title{font-weight:700;line-height:1.3}
.sec-head h2{font-weight:700}