/**
 * File: assets/css/95-readability.css
 * ================================================================
 *  پڑھنے میں آسانی + بٹن/لنک کی پہچان — پوری ویب سائٹ کے لیے
 * ================================================================
 *  مقصد: اردو متن بڑا اور صاف نظر آئے، اور جس چیز پر کلک ہو سکتا ہے
 *  وہ صارف کو فوراً پہچان آ جائے (urdupoint جیسا آسان تجربہ)۔
 *
 *  یہ فائل سب سے آخر میں لوڈ ہوتی ہے، اس لیے یہ باقی CSS کے
 *  اوپر اپنی ترتیب لگاتی ہے۔ کسی پرانی فائل کو بدلنے کی ضرورت نہیں۔
 *
 *  نوٹ: نستعلیق فونٹ میں مصنوعی bold بدنما لگتا ہے، اس لیے
 *  متن کو "موٹا" کرنے کے بجائے سائز، سطروں کا فاصلہ اور
 *  رنگ کا گہرا پن بڑھایا گیا ہے — یہی اصل میں پڑھنے کو آسان بناتا ہے۔
 */

/* ═══════════ 1) متن کا سائز بڑا ═══════════ */
:root{
    --fs-sm: 15.5px;
    --fs-md: 18px;
    --fs-lg: 21px;
    --fs-xl: 24px;
    --fs-2xl: 28px;
    --fs-3xl: 34px;
    --lh: 2.05;
}

/* موبائل پر اور بھی کھلا — یہیں سب سے زیادہ مسئلہ ہوتا ہے */
@media (max-width: 640px){
    :root{
        --fs-sm: 15.5px;
        --fs-md: 18.5px;
        --fs-lg: 21px;
        --fs-xl: 23px;
        --fs-2xl: 26px;
        --fs-3xl: 29px;
        --lh: 2.1;
    }
}

/* متن کا رنگ گہرا — ہلکا سرمئی متن پڑھنے میں تھکا دیتا ہے */
body{
    color: #23201a;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

/* پیراگراف اور فہرستیں کھلی کھلی */
p, li{
    line-height: var(--lh);
}
p{ margin-block: 0 0.9em; }

/* عنوان نمایاں */
h1, h2, h3, h4{
    color: #0E1B33;
    line-height: 1.55;
}

/* ═══════════ 2) لنک صاف پہچانا جائے ═══════════ */
/* عام متن کے اندر لنک: سنہری underline — واضح کہ کلک ہو سکتا ہے */
/* سنہری underline صرف متن (پیراگراف/فہرست) کے لنکس پر — عنوانات/کارڈز پر نہیں */
main p a:not([class]),
main li a:not([class]),
.entry-content p a:not([class]),
article p a:not([class]){
    color: #0E1B33;
    text-decoration: underline;
    text-decoration-color: #C9971C;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
main p a:not([class]):hover,
main li a:not([class]):hover,
.entry-content p a:not([class]):hover,
article p a:not([class]):hover{
    color: #8a6a0d;
    text-decoration-thickness: 3px;
}

/* ═══════════ 3) ٹائل/کارڈ/بٹن — نیا صفحہ کھلنے کا اشارہ ═══════════ */
/* جن لنکس کی کلاس میں tile / card / button / btn ہے، اُن پر
   ہاتھ کا اشارہ، ہلکی حرکت اور "←" کا نشان — تاکہ صارف سمجھے
   کہ یہ دبانے سے نیا صفحہ کھلے گا۔ */
a[class*="tile"],
a[class*="card"],
a[class*="button"],
a[class*="btn"],
.tile a,
.card a,
.uc-button,
.culture-quick-nav a{
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    min-height: 44px;                 /* انگلی سے دبانے کے لیے مناسب سائز */
}
a[class*="tile"]:hover,
a[class*="card"]:hover,
a[class*="button"]:hover,
a[class*="btn"]:hover,
.tile a:hover,
.card a:hover,
.uc-button:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(14,27,51,.16);
}

/* ٹائل/بٹن کے متن کے آخر میں تیر — "یہاں دبائیں" کا اشارہ */
a[class*="tile"]::after,
a[class*="button"]::after,
.uc-button::after{
    content: " ←";
    color:var(--gold-ink,#8a6a0d);
    font-weight: 800;
}

/* ═══════════ 4) کی بورڈ اور رسائی (accessibility) ═══════════ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible{
    outline: 3px solid #C9971C;
    outline-offset: 3px;
    border-radius: 6px;
}

/* ═══════════ 5) تصاویر کبھی باہر نہ نکلیں ═══════════ */
img{ max-width: 100%; height: auto; }

/* ═══════════ 6) فہرستوں میں سانس ═══════════ */
ul, ol{ line-height: var(--lh); }
li{ margin-bottom: .35em; }

/* ═══════════ 7) ٹیبل موبائل پر سکرول ہو، ٹوٹے نہیں ═══════════ */
table{ display: block; overflow-x: auto; max-width: 100%; }

/* ═══════════ خبروں کے عنوانات — کوئی underline نہیں ═══════════
   صارف کی درخواست: news titles کے نیچے لکیر professional نہیں لگتی۔
   جس لنک کے اندر heading ہو، یا جو news/کارڈ والے حصوں میں ہو —
   اس پر underline ختم۔ (عام متن کے اندر والے لنکس پر بدستور رہے گی
   تاکہ پڑھنے والے کو کلک کا پتہ چلے) */
/* ⚠ :has() والے قاعدے الگ block میں ہیں (نیچے)۔ CSS کا اصول یہ ہے
   کہ اگر فہرست میں ایک بھی selector براؤزر نہ سمجھے تو وہ *پورا*
   block رد کر دیتا ہے۔ :has() اینڈرائیڈ کے پرانے براؤزروں (Chrome
   105 سے پہلے) میں نہیں چلتا — اور ہمارے صارفین اکثر انہی پر ہیں۔
   پہلے یہ سب ایک ہی block میں تھے، اِس لیے اُن فونوں پر خبروں کے
   عنوانات کے نیچے لکیر آ جاتی تھی۔ اب نہیں آتی۔ */
.snp-layout a, .snp-layout a:hover,
.smd-related a, .smd-related a:hover,
.smd-art-links a, .smd-art-links a:hover,
.smd-art-nav a, .smd-art-nav a:hover,
main .smd-art-body a:not([class]),
main .smd-art-body a:not([class]):hover {
    text-decoration: none;
}

/* :has() والا حصہ — بالکل الگ block، تاکہ نہ سمجھنے والا براؤزر
   صرف اِسی کو چھوڑے، اوپر والے قاعدوں کو نہیں */
main a:not([class]):has(h1,h2,h3,h4,h5,h6),
article a:not([class]):has(h1,h2,h3,h4,h5,h6),
main a:has(h1,h2,h3,h4,h5,h6) {
    text-decoration: none;
}

/* پرانے browsers جن میں :has نہیں چلتا — headings خود بھی صاف */
main a:not([class]) h1, main a:not([class]) h2, main a:not([class]) h3,
main a:not([class]) h4, main a:not([class]) h5 {
    text-decoration: none;
}

/* v14.0.9 — mobile: faster text paint (Nastaliq) */
@media (max-width: 768px) {
    body { text-rendering: auto; }
}