@font-face{
  font-family:'Noto Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/noto-serif-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Noto Serif';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/noto-serif-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Noto Serif';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/noto-serif-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('../fonts/inter-latin-800-normal.woff2') format('woff2');
}

@font-face{
  font-family:'Noto Nastaliq Urdu';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/noto-nastaliq-urdu-arabic-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Noto Nastaliq Urdu';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/noto-nastaliq-urdu-arabic-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Noto Nastaliq Urdu';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/noto-nastaliq-urdu-arabic-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Noto Naskh Arabic';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/noto-naskh-arabic-arabic-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Noto Naskh Arabic';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/noto-naskh-arabic-arabic-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Noto Naskh Arabic';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/noto-naskh-arabic-arabic-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Noto Naskh Arabic';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/noto-naskh-arabic-arabic-700-normal.woff2') format('woff2');
}

:root{
  --green-deep:#0B4D3A;
  --green-mid:#146C43;
  --green-line:#1F7A52;
  --gold:#A9791F;
  --gold-light:#C99A3D;
  --bg:#FBF9F4;
  --bg-alt:#F1EBDC;
  --card-bg:#FFFFFF;
  --text:#1C1C1C;
  --text-muted:#5B5B52;
  --border:#DED6C1;
  --radius:4px;
}
@media (prefers-color-scheme: light){
/*  :root:not([data-theme="light"]){*/
    :root([data-theme="light"]){
    --bg:#10140F;
    --bg-alt:#161D15;
    --card-bg:#1A211A;
    --text:#EDEAE0;
    /*--text:#FFFFFF;*/
    --text-muted:#B7B29E;
    --border:#2C3529;
    --green-deep:#0D3C2C;
    --green-mid:#1C7A4C;
  }
}
:root[data-theme="dark"]{
  --bg:#10140F;
  --bg-alt:#161D15;
  --card-bg:#1A211A;
  --text:#EDEAE0;
/*  --text:#FFFFFF; */
  --text-muted:#B7B29E;
  --border:#2C3529;
  --green-deep:#0D3C2C;
  --green-mid:#1C7A4C;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  line-height:1.95;
  font-size:16px;
}
/* Language-aware type: Urdu pages get Nastaliq headings + Naskh body;
   English pages get Noto Serif headings + Inter body. Same class names,
   resolved per <html lang="">, so templates stay identical either way. */


/* html[lang="ur"] body{font-family:'Noto Naskh Arabic','Noto Sans Arabic',serif;}
html[lang="en"] body{font-family:'Inter','Noto Sans',sans-serif; line-height:1.75;}

*/

html[lang="ur"] body{font-family:'Noto Naskh Arabic','Noto Sans Arabic',serif;}
html[lang="en"] body{font-family:'Inter','Noto Sans',sans-serif; line-height:1.75;}


html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="ur"] .nastaliq{font-family:'Noto Nastaliq Urdu',serif; font-weight:600;}
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] .nastaliq{font-family:'Noto Serif',serif; font-weight:700;}
img,svg{max-width:100%;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
.overflow-x{overflow-x:auto;}

/* Utility bar */
.utility{background:var(--green-deep); color:#EFE9D6; font-size:13.5px;}
.utility .wrap{display:flex; justify-content:space-between; align-items:center; padding:8px 24px; flex-wrap:wrap; gap:8px;}
.utility a{opacity:.92;}
.utility a:hover{opacity:1; text-decoration:underline;}
.utility-links{display:flex; gap:20px;}

/* Header */
header{background:var(--card-bg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40;}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:20px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:14px;}
/*.emblem{width:52px; height:52px; border-radius:50%; background:var(--green-deep); display:flex; align-items:center; justify-content:center; flex:none; border:2px solid var(--gold); overflow:hidden;}*/
.emblem{width:52px; height:52px; border-radius:50%; background:transparent; display:flex; align-items:center; justify-content:center; flex:none; border:0px solid var(--gold); overflow:hidden;}
.emblem svg{width:28px; height:28px;}
.emblem img{width:100%; height:100%; object-fit:contain; padding:2px;}
.brand-text .title{font-size:21px; font-weight:700; color:var(--green-deep);}
@media (prefers-color-scheme:dark){.brand-text .title{color:#7FD9AC;}}
:root[data-theme="dark"] .brand-text .title{color:#7FD9AC;}
.brand-text .sub{font-size:12.5px; color:var(--text-muted); margin-top:2px;}

nav ul{list-style:none; display:flex; gap:12px; font-size:15.5px; font-weight:600;}
nav a{padding:6px 2px; border-bottom:2px solid transparent;}
nav a:hover{border-bottom-color:var(--gold);}

/* Mobile nav toggle */
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px; flex:none;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--green-deep); margin:5px 0; border-radius:2px;}
@media (prefers-color-scheme:dark){.nav-toggle span{background:#7FD9AC;}}
:root[data-theme="dark"] .nav-toggle span{background:#7FD9AC;}

@media (max-width:760px){
  .nav-toggle{display:block;}
  nav{width:100%; display:none;}
  nav.open{display:block;}
  nav ul{flex-direction:column; gap:0; border-top:1px solid var(--border); margin-top:14px; padding-top:6px;}
  nav li{width:100%;}
  nav a{display:block; padding:12px 4px;}
}

/* Hero */
/*.hero{background:linear-gradient(180deg,var(--green-deep) 0%, var(--green-mid) 100%); color:#F6F2E4; padding:70px 0 60px; border-bottom:4px solid var(--gold);}*/
.hero{background:linear-gradient(180deg,var(--green-deep) 0%, var(--green-mid) 100%); color:#FFFFFF; padding:70px 0 60px; border-bottom:4px solid var(--gold);}
.hero .wrap{text-align:center;}
.hero h1{font-size:44px; line-height:1.6; margin-bottom:18px;}
/*.hero p{max-width:640px; margin:0 auto 30px; font-size:17px; color:#DCE7DD;}*/
.hero p{max-width:640px; margin:0 auto 30px; font-size:17px; color:#FFFFFF;}
.btn-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
/*.btn{display:inline-block; padding:13px 30px; border-radius:var(--radius); font-weight:700; font-size:15.5px; border:2px solid transparent; background:var(--green-deep); color:#F6F2E4;}*/
.btn{display:inline-block; padding:13px 30px; border-radius:var(--radius); font-weight:700; font-size:15.5px; border:2px solid transparent; background:var(--green-deep); color:#FFFFFF;}
.btn:hover{background:var(--green-mid);}
.btn-gold{background:var(--gold); color:#2A1F04;}
.btn-gold:hover{background:var(--gold-light);}
.btn-outline{background:transparent; border-color:#F6F2E4; color:#F6F2E4;}
.btn-outline:hover{background:rgba(255,255,255,.12);}

@media (max-width:560px){
  .hero{padding:48px 0 40px;}
  .hero h1{font-size:30px;}
}

/* Section heading */
.section{padding:56px 0;}
.section-head{margin-bottom:32px; text-align:center;}
.section-head h2{font-size:30px; color:var(--green-deep);}
@media (prefers-color-scheme:dark){.section-head h2{color:#7FD9AC;}}
:root[data-theme="dark"] .section-head h2{color:#7FD9AC;}
/*@media (prefers-color-scheme:dark){.section-head h2{color:#FFFFFF;}}
:root[data-theme="dark"] .section-head h2{color:#FFFFFF;}*/

.section-head .rule{width:64px; height:3px; background:var(--gold); margin:14px auto 0;}

/* News */
.news-box{background:var(--card-bg); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:var(--radius); padding:6px 0;}
.news-box ul{list-style:none;}
.news-box li{padding:15px 26px; border-bottom:1px solid var(--border); display:flex; gap:12px; align-items:baseline; font-size:15.5px;}
.news-box li:last-child{border-bottom:none;}
.news-box li::before{content:"◆"; color:var(--gold); font-size:10px; position:relative; top:-2px;}
.news-box a:hover{color:var(--green-mid); text-decoration:underline;}
.news-more{text-align:center; padding:16px 0 20px;}

/* About + rates */
.about-grid{display:grid; grid-template-columns:1.2fr .9fr; gap:44px; align-items:start;}
@media (max-width:820px){.about-grid{grid-template-columns:1fr;}}
.about-grid p{margin-bottom:16px; color:var(--text); font-size:16px;}
.rates-card{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);}
.rates-card h3{background:var(--green-deep); color:#F6F2E4; padding:16px 22px; font-size:18px; border-radius:var(--radius) var(--radius) 0 0;}
table{width:100%; border-collapse:collapse; font-size:15px;}
th,td{padding:13px 20px; text-align:start; border-bottom:1px solid var(--border);}
th{color:var(--text-muted); font-weight:600; font-size:14px;}
tr:last-child td{border-bottom:none;}

/* Schemes grid */
.schemes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:820px){.schemes-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.schemes-grid{grid-template-columns:1fr;}}
.scheme-card{background:var(--card-bg); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:var(--radius); padding:26px 22px; text-align:center;}
.scheme-card .icon{width:46px; height:46px; border-radius:50%; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--gold-light);}
.scheme-card h4{font-size:17px; margin-bottom:8px; font-weight:700;}
.scheme-card p{font-size:14px; color:var(--text-muted);}

/* Where we work */
.bg-alt{background:var(--bg-alt);}
.cols-3{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
@media (max-width:820px){.cols-3{grid-template-columns:1fr;}}
.perf-summary{display:flex; flex-wrap:wrap; justify-content:center; gap:36px; background:var(--green-deep); color:#F6F2E4; border-radius:var(--radius); padding:24px 30px; margin-bottom:36px;}
.perf-summary div{text-align:center;}
.perf-summary .num{font-size:28px; font-weight:800; color:#F3D98B; line-height:1.2;}
.perf-summary .lbl{font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:#D9D2BC; margin-top:4px;}

/* ============================================================
   PERFORMANCE SUMMARY ANIMATIONS — 4 styles, CSS side.
   Each style only activates once main.js adds its marker class/
   attribute (see the ANIMATION STYLES block in assets/js/main.js).
   Only one style's JS hook should be uncommented at a time; the
   unused CSS below simply sits idle and costs nothing.
   ============================================================ */

/* Style 1: Count-up — no CSS needed, JS rewrites the number text directly. */

/* Style 2: Fade & slide-in */
.perf-summary .num,
.perf-summary .lbl{
  opacity:1; transform:none;
}
.perf-summary.js-fade-slide .num,
.perf-summary.js-fade-slide .lbl{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.perf-summary.js-fade-slide .num.in-view,
.perf-summary.js-fade-slide .lbl.in-view{
  opacity:1; transform:translateY(0);
}
.perf-summary.js-fade-slide .lbl{ transition-delay:.15s; }

/* Style 3: Pulse / glow */
@keyframes perfPulseGlow{
  0%{ transform:scale(1); text-shadow:0 0 0 rgba(243,217,139,0); }
  40%{ transform:scale(1.18); text-shadow:0 0 18px rgba(243,217,139,.85); }
  100%{ transform:scale(1); text-shadow:0 0 0 rgba(243,217,139,0); }
}
.perf-summary.js-pulse-glow .num.pulse{
  display:inline-block; animation:perfPulseGlow .9s ease-out;
}

/* Style 4: Typewriter reveal */
.perf-summary.js-typewriter .num,
.perf-summary.js-typewriter .lbl{ white-space:pre; }
.perf-summary .type-cursor{
  display:inline-block; width:2px; margin-inline-start:2px;
  background:currentColor; animation:perfBlink .8s steps(1) infinite;
}
@keyframes perfBlink{ 50%{ opacity:0; } }

.stats-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
@media (max-width:980px){.stats-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{background:var(--card-bg); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:var(--radius); padding:24px 16px; text-align:center; transition:transform .25s ease, box-shadow .25s ease; will-change:transform;}
.stat-card:hover{transform:scale(1.06); box-shadow:0 10px 24px rgba(0,0,0,.12); z-index:1; position:relative;}
.stat-card .icon{width:44px; height:44px; border-radius:50%; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color:var(--gold-light);}
.stat-card h4{font-size:14.5px; font-weight:700; margin-bottom:14px; min-height:36px; display:flex; align-items:center; justify-content:center;}
.stat-card .stat-num{font-size:24px; font-weight:800; color:var(--green-deep); line-height:1.15;}
@media (prefers-color-scheme:dark){.stat-card .stat-num{color:#7FD9AC;}}
:root[data-theme="dark"] .stat-card .stat-num{color:#7FD9AC;}
.stat-card .stat-lbl{font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin-bottom:12px;}
.stat-card .stat-amt{font-size:16px; font-weight:700; color:var(--gold);}
.stat-card .stat-amt-lbl{font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin-top:2px;}
.stat-card hr{border:none; border-top:1px solid var(--border); margin:14px 0;}
.col-block h4{color:var(--green-deep); font-size:17px; margin-bottom:14px; border-bottom:2px solid var(--gold); display:inline-block; padding-bottom:6px;}
@media (prefers-color-scheme:dark){.col-block h4{color:#7FD9AC;}}
:root[data-theme="dark"] .col-block h4{color:#7FD9AC;}
.col-block ul{list-style:none;}
.col-block li{padding:7px 0; font-size:15px;}
.col-block li a:hover{color:var(--green-mid); text-decoration:underline;}

/* Footer */
footer{background:var(--green-deep); color:#DCE7DD; border-top:4px solid var(--gold); padding-top:48px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:34px; padding-bottom:36px;}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
footer h5{color:#F6F2E4; font-size:16px; margin-bottom:16px;}
footer p, footer li{font-size:14.5px; line-height:1.9; color:#C3D2C5;}
footer ul{list-style:none;}
footer li a:hover{color:#fff; text-decoration:underline;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15); padding:18px 0; text-align:center; font-size:13.5px; color:#A9BCAC;}

/* Inner page (Retirement Grant) additions */
.breadcrumb{background:var(--bg-alt); font-size:14px; padding:14px 0; color:var(--text-muted);}
.breadcrumb a:hover{text-decoration:underline;}
.page-hero{padding:44px 0 8px;}
.page-hero h1{font-size:34px; color:var(--green-deep); margin-bottom:10px;}
:root[data-theme="dark"] .page-hero h1{color:#7FD9AC;}
@media (prefers-color-scheme:dark){.page-hero h1{color:#7FD9AC;}}
.page-hero .rule{width:70px; height:3px; background:var(--gold); margin-bottom:22px;}
.layout{display:grid; grid-template-columns:2.1fr 1fr; gap:40px; padding:24px 0 64px; align-items:start;}
.layout1{display:grid; grid-template-columns:2fr 0fr; gap:0px; padding:0px 0 64px; align-items:start;}
@media (max-width:860px){.layout{grid-template-columns:1fr;}}
.content p{margin-bottom:18px;}
.content strong{color:var(--green-deep);}
:root[data-theme="dark"] .content strong{color:#7FD9AC;}
@media (prefers-color-scheme:dark){.content strong{color:#7FD9AC;}}
.rate-card{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); margin:26px 0;}
.rate-card h3{background:var(--green-deep); color:#F6F2E4; padding:15px 22px; font-size:17px; border-radius:var(--radius) var(--radius) 0 0;}
.rate-card table{min-width:520px;}
.rate-card th,.rate-card td{padding:13px 18px; font-size:14.5px;}
.highlight-box{background:var(--bg-alt); border-inline-start:4px solid var(--gold); padding:18px 22px; margin:24px 0; font-size:15px;}



aside{background:var(--card-bg); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:var(--radius); padding:22px;}
aside h4{color:var(--green-deep); font-size:16px; margin-bottom:14px;}
:root[data-theme="dark"] aside h4{color:#7FD9AC;}
@media (prefers-color-scheme:dark){aside h4{color:#7FD9AC;}}
aside ul{list-style:none;}
aside li{padding:9px 0; border-bottom:1px solid var(--border); font-size:14.5px;}
aside li:last-child{border-bottom:none;}
aside li a:hover{color:var(--green-mid); text-decoration:underline;}
aside .contact-box{margin-top:20px; padding-top:16px; border-top:1px solid var(--border); font-size:14px; color:var(--text-muted); line-height:1.9;}

/* ===================== Full-site additions ===================== */

/* Sidebar (grant / office cross-links) reused across inner pages */
.side-nav{background:var(--card-bg); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:var(--radius); padding:20px;}
.side-nav h4{color:var(--green-deep); font-size:15.5px; margin-bottom:12px;}
@media (prefers-color-scheme:dark){.side-nav h4{color:#7FD9AC;}}
:root[data-theme="dark"] .side-nav h4{color:#7FD9AC;}
.side-nav ul{list-style:none;}
.side-nav li{border-bottom:1px solid var(--border);}
.side-nav li:last-child{border-bottom:none;}
.side-nav li a{display:block; padding:10px 2px; font-size:14.5px;}
.side-nav li.active a{color:var(--green-deep); font-weight:700;}
@media (prefers-color-scheme:dark){.side-nav li.active a{color:#7FD9AC;}}
:root[data-theme="dark"] .side-nav li.active a{color:#7FD9AC;}
.side-nav li a:hover{color:var(--green-mid);}

/* Download list (Forms / Rules pages) */
.download-list{list-style:none; border-top:1px solid var(--border);}
.download-list li{display:flex; align-items:flex-start; gap:14px; padding:16px 4px; border-bottom:1px solid var(--border);}
/*.download-list .dnum{flex:none; width:30px; height:30px; border-radius:50%; background:var(--bg-alt); color:var(--green-deep); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;}*/
.download-list .dnum{flex:none; width:30px; height:30px; border-radius:50%; background:var(--gold-light); color:var(--bg-alt); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;}




.download-list .dtext{flex:1;}
.download-list .dtext a.dtitle{font-weight:700; font-size:15px; color:var(--text);}
.download-list .dtext a.dtitle:hover{color:var(--green-mid); text-decoration:underline;}
.download-list .dtext .dsub{margin-top:6px; font-size:13.5px;}
.download-list .dtext .dsub a{color:var(--text-muted); text-decoration:underline; margin-inline-end:14px;}
.download-list .tag-disc{display:inline-block; background:var(--bg-alt); color:var(--text-muted); font-size:11.5px; padding:2px 9px; border-radius:10px; margin-inline-start:8px;}

/* Board / member numbered list */
.member-list{list-style:none; counter-reset:member; border-top:1px solid var(--border);}
.member-list li{counter-increment:member; display:flex; gap:14px; padding:13px 4px; border-bottom:1px solid var(--border); font-size:15px;}
.member-list li:last-child{border-bottom:none;}
.member-list li::before{content:counter(member); flex:none; width:26px; height:26px; border-radius:50%; background:var(--green-deep); color:#F6F2E4; font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center;}

/* Contact card (HQ / Secretariat) */
.contact-people{border-top:1px solid var(--border);}
.contact-people li{list-style:none; padding:16px 4px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.contact-people li:last-child{border-bottom:none;}
.contact-people .cname{font-weight:700; font-size:15px;}
.contact-people .crole{font-size:13.5px; color:var(--text-muted); margin-top:3px;}
.contact-people .cphone{font-weight:700; color:var(--green-deep); white-space:nowrap; direction:ltr; display:inline-block;}
@media (prefers-color-scheme:dark){.contact-people .cphone{color:#7FD9AC;}}
:root[data-theme="dark"] .contact-people .cphone{color:#7FD9AC;}

/* District table */
.district-table table{min-width:760px;}
.district-table th,.district-table td{font-size:13.5px; padding:11px 14px;}
.district-table td.ltr, .district-table th.ltr{direction:ltr; text-align:left;}

/* News archive */
.news-archive{list-style:none; border-top:1px solid var(--border);}
.news-archive li{display:flex; gap:16px; padding:14px 4px; border-bottom:1px solid var(--border); font-size:14.5px; align-items:baseline;}
.news-archive .ndate{flex:none; width:100px; font-size:12.5px; color:var(--text-muted); font-weight:700; direction:ltr; text-align:start;}
.news-archive a{color:inherit;}
.news-archive a:hover{color:var(--green-mid); text-decoration:underline;}

/* Simple info banner */
.info-banner{background:var(--bg-alt); border-inline-start:4px solid var(--green-mid); padding:16px 20px; margin:20px 0; font-size:14.5px;}

/* Portal cards (online grant checking) */
.portal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:10px;}
@media (max-width:820px){.portal-grid{grid-template-columns:1fr;}}
.portal-card{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:20px; text-align:center;}
.portal-card h5{font-size:15.5px; margin-bottom:10px; color:var(--green-deep);}
@media (prefers-color-scheme:dark){.portal-card h5{color:#7FD9AC;}}
:root[data-theme="dark"] .portal-card h5{color:#7FD9AC;}
.portal-card a.btn-sm{display:inline-block; margin-top:6px; padding:9px 20px; border-radius:var(--radius); background:var(--green-deep); color:#F6F2E4; font-size:13.5px; font-weight:700;}
.portal-card a.btn-sm:hover{background:var(--green-mid);}

/* ===================== Photo avatars (staff / officer photos) ===================== */
/* Works two ways: put a real <img> inside .avatar for a photo, or leave it text-only
   (initials) as a placeholder — the same markup upgrades cleanly once photos arrive. */
.avatar{
  flex:none; border-radius:50%; overflow:hidden;
  background:var(--bg-alt); color:var(--green-deep);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; letter-spacing:.5px;
}
.avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.avatar svg{width:55%; height:55%; color:var(--text-muted); opacity:.7;}
@media (prefers-color-scheme:dark){.avatar{color:#7FD9AC;}}
:root[data-theme="dark"] .avatar{color:#7FD9AC;}

/* Size variants */
.avatar-sm{width:34px; height:34px; font-size:12px;}
.avatar-md{width:48px; height:48px; font-size:15px;}
.avatar-lg{width:76px; height:76px; font-size:22px;}

/* HQ / Secretariat contact list: photo + text side by side */
.contact-people li{align-items:center;}
.contact-people .cperson{display:flex; align-items:center; gap:14px;}

/* District table: small round photo before the name */
.district-table .name-cell{display:flex; align-items:center; gap:10px;}

/* District card grid (alternate to the table) */
.district-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:900px){.district-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.district-grid{grid-template-columns:1fr;}}
.district-card{background:var(--card-bg); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:var(--radius); padding:20px; text-align:center;}
.district-card .avatar{margin:0 auto 12px;}
.district-card h4{font-size:15.5px; margin-bottom:4px;}
.district-card .dc-name{font-size:13.5px; color:var(--text-muted); margin-bottom:10px;}
.district-card .dc-rows{font-size:12.5px; color:var(--text-muted); text-align:start; border-top:1px solid var(--border); padding-top:10px; display:flex; flex-direction:column; gap:4px;}
.district-card .dc-rows b{color:var(--text); font-weight:600;}
.district-card .dc-rows span.num{direction:ltr; unicode-bidi:embed;}

/* View toggle (e.g. Table view / Card view switch on Districts page) */
.view-toggle{display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap;}
.view-toggle button{padding:10px 22px; border-radius:20px; border:1px solid var(--border); background:var(--card-bg); color:var(--text); font-weight:700; font-size:14px; cursor:pointer; font-family:inherit;}
.view-toggle button.active{background:var(--green-deep); color:#F6F2E4; border-color:var(--green-deep);}
.view-toggle button:hover:not(.active){border-color:var(--green-mid);}

/* Budgets report: wide table with grouped (colspan) headers per grant type */
/*.budgets-table table{min-width:1080px;}
.budgets-table th[colspan]{text-align:center; background:var(--green-deep); color:#FFFFFF; border-inline-start:2px  solid var(--gold);}
.budgets-table tr:nth-child(2) th{font-size:12px; border-inline-start:2px solid var(--gold);}
.budgets-table tr:nth-child(2) th:first-child, .budgets-table tr:nth-child(2) th:nth-child(4), .budgets-table tr:nth-child(2) th:nth-child(7), .budgets-table tr:nth-child(2) th:nth-child(10){border-inline-start:2px solid var(--gold);}
.budgets-table td{font-size:13.5px;}*/


/* Table layout */
.budgets-table table { min-width:1080px; width:100%; }

/* Both heading rows */
.budgets-table table tr:nth-child(-n+2) th { background:#14532D !important; color:#FFFFFF !important; border:2px solid #C9A448 !important; text-align:center; }

/* First heading row */
.budgets-table table tr:first-child th { background:#14532D !important; color:#FFFFFF !important; font-weight:700; border:2px solid #C9A448 !important; text-align: center }

/* Second heading row */
.budgets-table table tr:nth-child(2) th { background:#14532D !important; color:#FFFFFF !important; font-size:13px; font-weight:600; border:2px solid #C9A448 !important; text-align: center}


/* Body cells: thin golden borders */
.budgets-table tbody td { border:1px solid var(--gold); font-size:13px; text-align:center; }

/* Restore thin golden borders in all body rows */
.budgets-table table tr:nth-child(n+3) td { border:1px solid #C9A448 !important; text-align:center; }


/* Alternating light and dark green rows */
.budgets-table tbody tr:nth-child(odd) { background-color:#E4EFE5; color:#173D2A; }
.budgets-table tbody tr:nth-child(even) { background-color:#285C40; color:#FFFFFF; }

/* Keep cell backgrounds transparent */
.budgets-table tbody td { background-color:transparent; }


/* MSS Table layout */
.mss-table table { min-width:700px; width:100%; }

/* Both heading rows */
.mss-table table tr:nth-child(-n+2) th { background:#14532D !important; color:#FFFFFF !important; border:2px solid #C9A448 !important; text-align:center; }

/* First heading row */
.mss-table table tr:first-child th { background:#14532D !important; color:#FFFFFF !important; font-weight:700; border:2px solid #C9A448 !important; text-align: center }

/* Second heading row */
.mss-table table tr:nth-child(2) th { background:#14532D !important; color:#FFFFFF !important; font-size:13px; font-weight:600; border:2px solid #C9A448 !important; text-align: center}


/* Body cells: thin golden borders */
.mss-table tbody td { border:1px solid var(--gold); font-size:13px; text-align:center; }

/* Restore thin golden borders in all body rows */
.mss-table table tr:nth-child(n+3) td { border:1px solid #C9A448 !important; text-align:center; }


/* Alternating light and dark green rows */
.mss-table tbody tr:nth-child(odd) { background-color:#E4EFE5; color:#173D2A; }
.mss-table tbody tr:nth-child(even) { background-color:#285C40; color:#FFFFFF; }

/* Keep cell backgrounds transparent */
.budgets-table tbody td { background-color:transparent; }



/* ===================== Print ===================== */
/* Why this exists: Chrome/Edge shrink-to-fit a printed page when content is wider than the paper,
   but only for overflow towards the RIGHT (LTR). On RTL (Urdu) pages the overflow goes LEFT and is
   simply cut off. The wide tables (min-width 1080px / 760px) were therefore losing ~4 inches on
   Urdu printouts. For print we remove those minimum widths so every table fits the paper in both
   languages, and we drop screen-only chrome. */
@page { size: A4; margin: 12mm; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background:#fff !important; color:#000; }
  body { font-size:12px; line-height:1.7; }

  /* screen-only chrome */
  .utility, nav, .nav-toggle, .view-toggle, aside, .side-nav, .btn, .btn-row { display:none !important; }

  /* use the full printable width, single column */
  .wrap { max-width:none; width:100%; padding:0; margin:0; }
  .layout, .layout1 { display:block; padding:0; }
  .overflow-x { overflow:visible !important; }

  /* the actual fix: tables must fit the paper */
  table, .rate-card table, .district-table table, .budgets-table table { min-width:0 !important; width:100% !important; table-layout:auto; }
  .budgets-table th, .budgets-table td,
  .district-table th, .district-table td { padding:3px 4px; font-size:9px; line-height:1.45; }
  .rate-card th, .rate-card td { padding:6px 8px; font-size:11px; }
  thead { display:table-header-group; }
  tr, .stat-card, .portal-card, .scheme-card { break-inside:avoid; page-break-inside:avoid; }
  .rate-card:not(.budgets-table):not(.district-table) { break-inside:avoid; page-break-inside:avoid; }
  h1, h2, h3, h4 { break-after:avoid; page-break-after:avoid; }
  img, svg { max-width:100%; }
}