/* =====================================================================
   SITE KA DESIGN (rang yahin se badlo)
   ===================================================================== */
@font-face{font-family:'Scheherazade New';font-weight:700;src:url('/assets/fonts/scheherazade.new-bold.ttf') format('truetype')}
:root{
  --ink:#1c2a22;          /* normal text */
  --bg:#e7ebe8;           /* page ka peeche ka rang */
  --gold:#e0bc57;         /* gold */
  --gold-head:#e5d6aa;    /* upar ki patti */
  --gold-soft:#f9f2da;    /* halka gold */
  --maroon:#6d1212;       /* maroon */
  --green:#2e7d32;        /* hara */
  --red:#c0392b;          /* sawal ki lakeer */
  --line:#d8ddd4;
  --field:#f7f8f5;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
     line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* ----- Upar ki patti ----- */
.head{background:var(--gold-head);border-bottom:3px solid var(--maroon);text-align:center;padding:10px 12px 8px}
.bismillah{font-family:"Scheherazade New","Amiri",serif;font-weight:bold;font-size:17px;color:#770000;line-height:1.5}
.logo{width:230px;max-width:70%;height:auto;display:block;margin:4px auto 0}   /* logo ki chaudai yahan se */
.tagline{font-size:12px;font-weight:600;color:#1a1a1a;margin-top:4px}

/* ----- Beech ka dabba ----- */
.wrap{max-width:820px;margin:0 auto;padding:16px 14px 28px}

/* ----- Search ----- */
.search{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.search input{flex:1;min-width:0;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--ink);
     background:#fff;border:1.5px solid grey;border-radius:10px}
.search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(46,125,50,.16)}
.search button{height:46px;padding:0 18px;font-size:15px;font-weight:700;font-family:inherit;
     background:var(--green);color:#fff;border:0;border-radius:10px;cursor:pointer}
.search button:hover{background:#1f6a2a}
.search .clr{font-size:13px;font-weight:700;color:var(--maroon);text-decoration:none;padding:0 4px}
.count{font-size:13px;color:#555;margin:0 0 10px}
.empty{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;text-align:center;color:#555}

/* ----- List ka ek jawab ----- */
.item{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:12px;
     padding:10px 14px;margin-bottom:10px;font-size:14px;transition:border-color .15s,box-shadow .15s}
.item:hover{border-color:var(--green);box-shadow:0 4px 14px -6px rgba(20,40,28,.3)}
.item span{display:block}
.item .rn{font-size:12px;color:#555;margin-bottom:3px}
.item .tp{background:#e1e6df;border-radius:5px;padding:1px 8px;margin-bottom:4px;font-weight:700;color:var(--maroon);
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis}                                  /* Topic: 1 line */
.item .q,.item .a{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}   /* sawal/jawab 2-2 line */
.item .q{color:#444;margin-bottom:2px}
mark{background:#ffc107;color:inherit;border-radius:2px;padding:0}                                /* search ka peela rang */

/* ----- Page badalna ----- */
.pager{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:14px;font-size:14px}
.pager a{background:var(--gold);color:#3b3520;font-weight:700;text-decoration:none;padding:8px 14px;border-radius:8px}

/* ----- Ek jawab ka page ----- */
.back{display:inline-block;font-weight:700;color:var(--maroon);text-decoration:none}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;margin:6px 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.meta b{color:#8a6d00}
.topic{font-size:18px;color:var(--maroon);background:#e1e6df;border-radius:8px;padding:6px 12px;margin:0 0 12px}
.lbl{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:12px 0 6px}
.lbl.q{color:#b02a2a}
.lbl.a{color:var(--green)}
.box{padding:10px 16px;font-size:16px;line-height:1.6;word-wrap:break-word;overflow-wrap:break-word}
.qbox{background:#fdf6f6;border-left:4px solid var(--red)}
.abox{background:#f5faf6;border-left:4px solid var(--green)}

/* ----- Neeche ki patti ----- */
.foot{background:var(--gold-head);border-top:3px solid var(--maroon);text-align:center;padding:12px 14px;font-size:12px;color:#1a1a1a}
.foot p{margin:4px 0}
.foot .disc{max-width:640px;margin:0 auto 6px}

@media (max-width:520px){ .wrap{padding:12px 10px 24px} .box{font-size:15px} }
.pager{flex-wrap:wrap;gap:6px}
.pager a,.pager .cur{min-width:36px;text-align:center;padding:8px 10px}
.pager .cur{background:var(--green);color:#fff;font-weight:700;border-radius:8px}
.pager .dots{padding:0 2px;color:#777}