/**
 * File: assets/css/96-affordance.css
 * ================================================================
 *  «کہاں دبانا ہے» — کلک ہونے والی ہر چیز کی الگ پہچان
 *  ⚡ GLOBAL CORE — صرف وہ قاعدے جو ہر صفحے پر لگ سکتے ہیں
 * ================================================================
 *
 *  مسئلہ کیا تھا
 *  ─────────────
 *  سائٹ پر دو طرح کے ڈبے بالکل ایک جیسے لگتے تھے:
 *
 *      .smd-city-info-box   →  <article> — صرف پڑھنے کے لیے
 *      .smd-city-link-grid a→  <a>       — دبانے سے نیا صفحہ
 *
 *  دونوں سفید، دونوں کے گرد 1px لکیر، دونوں کے کونے گول، دونوں پر
 *  ہلکا سایہ۔ فرق صرف :hover پر تھا (اوپر اٹھنے والی حرکت) —
 *  اور موبائل پر :hover ہوتا ہی نہیں۔ یعنی جس صارف کے پاس ماؤس
 *  نہیں (ہمارے تقریباً سارے صارف) اُس کے لیے کوئی فرق نہیں تھا۔
 *
 *  اِسی طرح متن کے اندر کے لنک: 10-base.css میں
 *  «a{text-decoration:none}» ہے اور لکیر صرف :hover پر آتی ہے۔
 *  یعنی موبائل پر عام متن اور لنک ایک جیسے نیلے الفاظ۔
 *
 *  اور a:active{color:inherit} (نیلی چمک روکنے کے لیے) نے دبانے کا
 *  آخری اشارہ بھی ختم کر دیا تھا — انگلی رکھنے پر کچھ نہیں ہوتا تھا۔
 *
 *  حل — تین اشارے، پوری سائٹ پر ایک جیسے
 *  ──────────────────────────────────────
 *   ۱)  تیر  «‹»   — ہر دبانے والے ڈبے/بٹن کے کنارے پر ایک چھوٹا
 *                    تیر۔ یہی وہ نشان ہے جو ہر پاکستانی موبائل کی
 *                    سیٹنگز میں ہوتا ہے — پڑھنا ہی نہیں آتا تو بھی
 *                    سمجھ آ جاتا ہے کہ «آگے جائے گا»۔
 *
 *   ۲)  دبنے کا احساس — انگلی رکھتے ہی ڈبہ ہلکا سا نیچے دبتا ہے اور
 *     مدھم ہوتا ہے۔ :hover نہیں، :active — یعنی یہ
 *     موبائل پر بھی کام کرتا ہے۔
 *
 *   ۳)  متن کے لنک پر ہمیشہ لکیر — :hover کا انتظار نہیں۔
 *
 *  اور اُلٹا اشارہ بھی:
 *   ۴)  جو ڈبے صرف پڑھنے کے لیے ہیں اُن پر cursor:default۔
 *
 *  خوبصورتی کیوں خراب نہیں ہوتی
 *  ────────────────────────────
 *   • تیر CSS سے بنا ہے (border + rotate) — کوئی تصویر، کوئی فونٹ
 *     نہیں۔ اُس کا رنگ currentColor ہے، یعنی وہ ہمیشہ اُسی لنک کے
 *     اپنے رنگ میں ہوتا ہے۔ صحت کا سبز، ثقافت کا سنہری، شہر کا
 *     نیلا — ہر سیکشن کا اپنا مزاج قائم رہتا ہے۔
 *   • کسی کا background، border-radius یا سایہ نہیں بدلا جاتا۔
 *   • layout کو ہاتھ نہیں لگتا: تیر flex/inline میں متن کے ساتھ
 *     بیٹھ جاتا ہے، کسی کو دھکیلتا نہیں۔
 *
 *  زور کم/زیادہ کرنا (ایک لفظ سے)
 *  ──────────────────────────────
 *  wp-config.php میں:
 *
 *      define('SMD_AFFORDANCE', 'clear');   // طے شدہ — متوازن
 *      define('SMD_AFFORDANCE', 'soft');    // صرف لکیر + دباؤ، تیر نہیں
 *      define('SMD_AFFORDANCE', 'max');     // نئے صارف کے لیے سب سے واضح
 *      define('SMD_AFFORDANCE', 'off');     // بالکل بند (کوئی فائل نہیں لوڈ ہوگی)
 *
 *  ═══════════════════════════════════════════════════════════════
 *  ⚡ Phase 1 / C1 — یہ اب صرف GLOBAL CORE ہے
 *  ═══════════════════════════════════════════════════════════════
 *  پہلے یہ ایک ہی فائل تھی جس میں ہر سیکشن کے selectors (شہر،
 *  صحت، ثقافت، تعلیم، کاروبار، کھیل، یونین کونسل، گاؤں…) سب شامل
 *  تھے — اور وہ **ہر** صفحے پر لوڈ ہوتی تھی۔ یعنی گاؤں کا صفحہ
 *  `.doctor-list` اور `.karobar-faq-box` اور `.smd-sport-view` کے
 *  قاعدے بھی اپنے ساتھ اٹھاتا تھا، جبکہ وہاں وہ classes ہیں ہی نہیں۔
 *
 *  اب وہ selectors اپنی اپنی فائلوں میں ہیں:
 *
 *      assets/css/affordance/front.css       ہوم پیج
 *      assets/css/affordance/news.css        اخبار کا پورٹل
 *      assets/css/affordance/articles.css    انفرادی خبر / کالم
 *      assets/css/affordance/villages.css    گاؤں
 *      assets/css/affordance/education.css   تعلیم
 *      assets/css/affordance/health.css      صحت
 *      assets/css/affordance/culture.css     ثقافت
 *      assets/css/affordance/city.css        شہر اور علاقے
 *      assets/css/affordance/unions.css      یونین کونسل
 *      assets/css/affordance/sports.css      کھیل
 *      assets/css/affordance/karobar.css     کاروبار ڈائریکٹری
 *
 *  اُن کی لوڈنگ inc/core/assets.php میں ہے، اور ہر ایک اپنے
 *  سیکشن کی شرط پر — یہ فائل (اس کا handle «smd-affordance») اُن
 *  سب کا **پہلے** لوڈ ہوتا ہے۔
 *
 *  ⚠ ترتیب کیوں اہم ہے
 *  ─────────────────────
 *  ۱) 95-readability.css کے **بعد** — وہاں a[class*="tile"]::after
 *     میں «←» ہے؛ یہاں وہی «‹» بن جاتا ہے۔ ::after ایک ہی ہوتا ہے
 *     اور سیکشن والی فائلیں اس کے بعد آتی ہیں، اس لیے دو تیر
 *     کبھی نہیں بنتے۔ (اصل میں یہی ترتیب تھی۔)
 *  ۲) جب ایک ہی element پر دو قاعدے لگتے ہیں — مثلاً
 *     <a class="health-emergency-btn"> پر .health-emergency-btn::after
 *     اور a[class*="btn"]::after — تو دونوں کی declarations بالکل
 *     ایک جیسی ہیں، اس لیے کون پہلے آئے فرق نہیں دکھاتا۔ پہلے بھی
 *     دونوں ایک ہی rule میں تھے، اب سیکشن والی فائل کے بعد آنے کے
 *     باوجود نتیجہ بالکل وہی ہے۔
 *
 *  ⚠ نوٹ برائے ترمیم
 *  ──────────────────
 *   • ⚠⚠ اِس فائل میں نہ تو CSS کا «u r l» فنکشن لکھیں اور نہ
 *     «import» کا قاعدہ — تبصرے کے اندر بھی نہیں۔
 *     inc/core/css-combine.php پوری فائل کا متن جانچتا ہے (تبصرے
 *     ہٹانے سے پہلے)؛ اِن میں سے کوئی ایک بھی ملے تو وہ ساری CSS
 *     جوڑنے کی کارروائی منسوخ کر دیتا ہے اور سائٹ واپس 15 الگ
 *     requests پر چلی جاتی ہے (PageSpeed پر تقریباً 630ms کا نقصان)۔
 *     تصویر درکار ہو تو data URI استعمال کریں — یا بہتر یہ کہ
 *     نشان CSS کے border/transform سے بنائیں، جیسے نیچے تیر بنا ہے۔
 *   • یہی اصول affordance/ والی ہر فائل پر بھی لاگو ہے۔
 *   • :has() والے قاعدے الگ block میں رکھیں۔ پرانے اینڈرائیڈ براؤزر
 *     پورا block رد کر دیتے ہیں — اُس میں کوئی اور ضروری قاعدہ نہ ہو۔
 * ================================================================ */

/* ═══════════════════════════════════════════════════════════════
   0) درجے (levels) — ایک متغیر سے پورا زور بدل جاتا ہے
   ───────────────────────────────────────────────────────────────
   یہاں custom properties استعمال کی گئی ہیں تاکہ باقی فائلوں
   (اور affordance/ کی ہر سیکشن فائل) کی لمبی selector فہرست صرف
   *ایک* بار لکھنی پڑے۔ درجہ بدلنے پر وہی قاعدہ نئی قیمتیں
   اٹھا لیتا ہے۔
   ═══════════════════════════════════════════════════════════════ */
 :root{
    --aff-arrow-show: inline-block;   /* soft میں none */
    --aff-arrow-size: .42em;
    --aff-arrow-weight: 2px;
    --aff-arrow-fade: .6;
    --aff-tint: transparent;          /* max میں ہلکی رنگت */
    --aff-pad: 0px;                   /* max میں انگلی کے لیے جگہ */
    --aff-underline: #C9971C;         /* 95-readability جیسا سنہری */
    --aff-focus: #C9971C;
}

body.smd-aff-soft{
    --aff-arrow-show: none;
}

body.smd-aff-max{
    --aff-arrow-size: .48em;
    --aff-arrow-weight: 3px;
    --aff-arrow-fade: .85;
    --aff-tint: rgba(29,78,216,.045);
    --aff-pad: .28em;
}

/* ═══════════════════════════════════════════════════════════════
   1) ہاتھ کا اشارہ — ہر دبانے والی چیز پر
   ───────────────────────────────────────────────────────────────
   پہلے cursor:pointer صرف 15 فائلوں میں تھا، یعنی جگہ جگہ تیر
   والا cursor رہتا تھا۔ ڈیسک ٹاپ صارف کو یہی سب سے پہلا اشارہ
   ملتا ہے، اِس لیے اب ہر جگہ۔
   ═══════════════════════════════════════════════════════════════ */
a[href],
button,
summary,
label[for],
[role="button"],
[role="link"],
input[type="submit"],
input[type="button"],
select{
    cursor: pointer;
}

/* موبائل پر انگلی رکھنے کی جھلک — 10-base.css کے
   a:active{color:inherit} نے متن کی نیلی چمک بند کر دی تھی
   (درست فیصلہ تھا، وہ بدنما لگتی تھی)۔ اُس کی جگہ اب پس منظر کی
   ہلکی جھلک — یہی اصل میں «دب گیا» کا احساس دیتی ہے۔ */
a[href],
button,
summary,
[role="button"]{
    -webkit-tap-highlight-color: rgba(29,78,216,.16);
}

/* ═══════════════════════════════════════════════════════════════
   2) دبنے کا احساس (:active) — موبائل کا اصل اشارہ
   ───────────────────────────────────────────────────────────────
   :hover ٹچ اسکرین پر وجود ہی نہیں رکھتا۔ سارا فرق :hover پر رکھنا
   ہمارے صارف کے لیے «کوئی فرق نہیں» کے برابر تھا۔

   ⚡ یہاں صرف GENERIC selectors ہیں (a[class*=…], button,
   [role=button]) — جو ہر جگہ لگتے ہیں۔ ان سیکشن والے selectors
   (مثلاً .doctor-list a:active) اپنی فائلوں میں ہیں: اُن کی
   declarations بالکل یہی ہیں، اس لیے کون پہلے آئے فرق نہیں دکھاتا۔

   ⚠ .smd-home-fixed — اس کا اصل template کہیں نہیں ملا (0 ref)،
     اس لیے احتیاط کے طور پر یہاں ہی رکھا گیا ہے۔
   ═══════════════════════════════════════════════════════════════ */
a[class*="btn"]:active,
a[class*="button"]:active,
a[class*="tile"]:active,
a[class*="card"]:active,
a[class*="chip"]:active,
button:active,
[role="button"]:active,
.smd-home-fixed:active{
    transform: translateY(1px) scale(.99);
    filter: brightness(.96);
}

/* سادہ متن کے لنک — حرکت نہیں، صرف مدھم (متن اچھلنا نہیں چاہیے) */
main a[href]:active,
.footer-links a:active,
.footer-bottom-links a:active{
    opacity: .62;
}

/* حرکت سے تکلیف ہو تو بند — نظام کی ترتیب کا احترام */
@media (prefers-reduced-motion: reduce){
    a[class*="btn"]:active,
    a[class*="button"]:active,
    a[class*="tile"]:active,
    a[class*="card"]:active,
    button:active,
    [role="button"]:active{
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   3) تیر «‹» — «یہ دبانے سے آگے جائے گا»
   ───────────────────────────────────────────────────────────────
   ⚠ کیوں CSS سے بنایا، «←» لکھ کر کیوں نہیں:
     نستعلیق فونٹ میں تیر کا نشان یا تو موجود ہی نہیں ہوتا یا بہت
     چھوٹا/ٹیڑھا بنتا ہے، اور fallback فونٹ آنے پر سطر کی اونچائی
     بدل جاتی ہے۔ border سے بنا تیر ہر فونٹ، ہر آلے پر ایک جیسا ہے۔

   ⚠ رنگ currentColor ہے — یعنی ہر سیکشن کا اپنا رنگ خود بخود۔
     کوئی نیا رنگ متعارف نہیں ہوتا، اِسی لیے خوبصورتی خراب نہیں ہوتی۔

   ⚠ یہاں صرف GENERIC تین selectors ہیں۔ باقی تمام سیکشن والے
     selectors اپنی فائلوں میں ہیں (affordance/)۔

   ⚠ اِن تینوں میں «←» والی فہرست شامل نہیں کی گئی:
       a[class*="btn"], a[class*="tile"], a[class*="button"]
       ان کے علاوہ جو classes خود «btn/tile/button» لکھتے ہیں
       (جیسے health-emergency-btn، vpage-map-btn، cta-btn) وہ
       اسی generic قاعدے سے covered ہوتے ہیں — پہلے بھی ایسا ہی تھا۔
   ═══════════════════════════════════════════════════════════════ */
a[class*="tile"]::after,
a[class*="btn"]::after,
a[class*="button"]::after{
    content: "";
    display: var(--aff-arrow-show);
    flex: 0 0 auto;
    width: var(--aff-arrow-size);
    height: var(--aff-arrow-size);
    border-left: var(--aff-arrow-weight) solid currentColor;
    border-bottom: var(--aff-arrow-weight) solid currentColor;
    transform: rotate(45deg);
    opacity: var(--aff-arrow-fade);
    margin-inline-start: .55em;
    vertical-align: .08em;
    transition: transform .16s ease, opacity .16s ease;
}

/* انگریزی (LTR) ترتیب میں تیر دوسری طرف — سائٹ اردو ہے مگر
   language_attributes() کبھی en دے تو نشان اُلٹا نہ لگے */
html[dir="ltr"] a[class*="tile"]::after,
html[dir="ltr"] a[class*="btn"]::after,
html[dir="ltr"] a[class*="button"]::after{
    transform: rotate(-135deg);
}

/* ماؤس والے صارف کو مزید تصدیق — تیر تھوڑا آگے سرکتا ہے */
a[class*="tile"]:hover::after,
a[class*="btn"]:hover::after,
a[class*="button"]:hover::after{
    opacity: 1;
    transform: translateX(-3px) rotate(45deg);
}

@media (prefers-reduced-motion: reduce){
    a[class*="tile"]:hover::after,
    a[class*="btn"]:hover::after,
    a[class*="button"]:hover::after{
        transform: rotate(45deg);
    }
}

/* ═══════════════════════════════════════════════════════════════
   4) متن کے اندر کا لنک — لکیر ہمیشہ، :hover کا انتظار نہیں
   ───────────────────────────────────────────────────────────────
   95-readability.css صرف main/article کے <p> اور <li> پر لکیر
   لگاتی ہے۔ حقیقت میں تھیم کے بہت سے لنک سادہ <div> کے اندر ہیں
   یا جدول/تفصیل میں — اُن پر کچھ نہیں تھا۔ یہاں وہ خلا پُر ہوتا
   ہے، مگر اُنہی جگہوں پر جہاں لنک واقعی متن کے بیچ میں ہو۔
   ═══════════════════════════════════════════════════════════════ */
main td a:not([class]),
main dd a:not([class]),
main figcaption a:not([class]),
main blockquote a:not([class]),
.entry-content td a:not([class]),
.entry-content dd a:not([class]){
    text-decoration: underline;
    text-decoration-color: var(--aff-underline);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

/* ═══════════════════════════════════════════════════════════════
   5) کی بورڈ اور کم بینائی — واضح حلقہ
   ───────────────────────────────────────────────────────────────
   10-base.css میں 2px dashed تھا (مدھم)۔ 95-readability نے 3px
   solid کر دیا۔ یہاں صرف اتنا اضافہ کہ گول کونوں والے ڈبوں پر
   حلقہ بھی گول رہے — چوکور حلقہ گول پِل پر بھدا لگتا ہے۔
   ═══════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible{
    outline: 3px solid var(--aff-focus);
    outline-offset: 3px;
    border-radius: inherit;
}