/* =========================================================
   Samundri Smart Top Bar — Ink & Brass Premium (FIXED)
   (IDs/JS hooks barqarar: #smd-day-name, #smd-eng-date,
    #smd-hijri-date, #smd-desi-date, #smd-weather-*)

   Mobile fix (reference file se liya gaya approach):
   1. Pehle mobile par overflow: hidden + nowrap tha — items
      kat jate thay. Ab flex-wrap: wrap + center — sab kuch
      araam se do lines mein fit ho jata hai, kuch nahi katta.
   2. nth-child se dates chhupana khatam — saari dates (Eng,
      Hijri, Desi) har view mein nazar aati hain.
   3. Numbers par direction: ltr + unicode-bidi: isolate —
      RTL context mein tareekh ke hindsay ulat nahi hote.
   ========================================================= */

#smd-top-bar,
#smd-top-bar * {
    box-sizing: border-box;
}

#smd-top-bar {
    width: 100%;
    min-height: 42px;
    color: #DCD6C6;
    background: linear-gradient(90deg, #0A1426 0%, #101F3D 50%, #0A1426 100%);
    font-family: 'MehrNastaliqCustom', var(--smd-font-urdu, serif), serif;
    direction: rtl;
    /* FIX: ab smart bar bhi header ki tarah sticky hai — scroll par ghaib
       nahi hota. z-index header (9999) se thoda upar taake اوپر chipka rahe. */
    position: sticky;
    top: 0;
    z-index: 10001;
    border-bottom: 1px solid rgba(201, 151, 28, 0.30);
}

#smd-top-bar .smd-top-bar-inner {
    width: min(1120px, calc(100% - 24px));
    min-height: 42px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

#smd-top-bar .smd-tb-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    white-space: nowrap;
    /* FIX: overflow: hidden hata diya — desktop par bhi
       kisi item ko katne ki ijazat nahi */
}

#smd-top-bar .smd-tb-left {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

#smd-top-bar .smd-tb-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.9;
    color: #CFC8B4;
    letter-spacing: 0 !important;
    white-space: nowrap;
}

/* Din ka naam — bara, bold, bighair round pill ke (gold) */
#smd-top-bar .smd-tb-day {
    color: #F7DF98;
    font-size: 21px;
    font-weight: 700;
    padding: 0 4px 2px;
    background: none;
    border: 0;
    border-radius: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Separator — brass diamond */
#smd-top-bar .smd-tb-sep {
    width: auto;
    height: auto;
    background: none;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

#smd-top-bar .smd-tb-sep::before {
    content: "◆";
    font-size: 6px;
    color: rgba(201, 151, 28, 0.65);
}

/* FIX 3: numbers hamesha LTR aur isolated — mixed RTL/LTR
   text mein hindsay apni jagah barqarar rehte hain */
#smd-top-bar .smd-roman,
#smd-top-bar .smd-date-num {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12.5px;
    letter-spacing: 0.2px !important;
}

#smd-top-bar .smd-date-mix {
    direction: rtl;
    unicode-bidi: isolate;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

#smd-top-bar .smd-date-month {
    direction: rtl;
    unicode-bidi: isolate;
    display: inline-block;
    font-size: 13px;
}

/* ---------- Weather ----------
 * ⚠ 2026-09-01 — یہاں سے سنہری کنارہ جان بوجھ کر ہٹایا گیا ہے
 * ───────────────────────────────────────────────────────────
 * پہلے یہ گولی بالکل ہوم کے بٹن جیسی تھی — حرف بہ حرف وہی دو قیمتیں:
 *
 *      background: rgba(255,255,255,.05)
 *      border:     1px solid rgba(201,151,28,.45)
 *
 * (دیکھیں assets/header/header.css → .smd-home-fixed, .smd-menu-toggle)
 *
 * فرق صرف اتنا ہے کہ ہوم کا بٹن صفحہ کھولتا ہے اور یہ <div> کچھ نہیں
 * کرتا۔ نیا صارف اِسے دباتا تھا اور کچھ نہ ہونے پر سمجھتا تھا کہ سائٹ
 * خراب ہے۔ اب یہ دوسری طرف کی تاریخوں جیسی سادہ معلومات ہے، اور پوری
 * سائٹ پر ایک اصول قائم ہو جاتا ہے:
 *
 *      سنہری کنارہ  =  یہ دبایا جا سکتا ہے
 *
 * ⚠ اگر کبھی موسم کو واقعی کوئی کام دیں (مثلاً دبانے پر آج کا زیادہ
 *   سے کم درجہ حرارت کھلے) تو اُس وقت کنارہ واپس لگا دیجیے — اُس وقت
 *   وہ سچا ہو گا۔ مگر بغیر کام کے کنارہ واپس نہ لگائیں۔
 *
 * ⚠ border ہٹایا نہیں، «transparent» کیا گیا ہے — تاکہ گولی کی
 *   اونچائی اور تاریخوں کے ساتھ عمودی سیدھ بالکل ویسی ہی رہے۔
 */
#smd-top-bar .smd-weather-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 1px 4px 3px;
    color: #F3D98B;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 20px;
    white-space: nowrap;
}

#smd-top-bar .smd-w-icon { font-size: 14px; line-height: 1; }

#smd-top-bar .smd-w-temp {
    font-weight: 700;
    color: #FFFFFF;
}

#smd-top-bar .smd-w-desc {
    font-size: 12.5px;
    color: #CFC8B4;
}

/* =========================================================
   RESPONSIVE — FIX 1 & 2:
   wrap + center, kuch nahi chhupta, kuch nahi katta
   ========================================================= */

@media (max-width: 760px) {

    #smd-top-bar {
        min-height: 44px;
        padding: 4px 0;
    }

    #smd-top-bar .smd-top-bar-inner {
        min-height: 36px;
        width: calc(100% - 14px);
        flex-wrap: nowrap; /* single line */
        justify-content: center;
        gap: 6px;
    }

    #smd-top-bar .smd-tb-right {
        justify-content: center;
        flex-wrap: nowrap;
        white-space: normal;
        gap: 7px;
    }

    #smd-top-bar .smd-tb-left {
        justify-content: center;
    }

    #smd-top-bar .smd-tb-item {
        font-size: 12.5px;
        min-height: 26px;
    }

    #smd-top-bar .smd-roman,
    #smd-top-bar .smd-date-num { font-size: 11.5px; }

    #smd-top-bar .smd-date-month { font-size: 12px; }

    #smd-top-bar .smd-tb-day { padding: 0 4px 2px; font-size: 19px; font-weight: 700; }

    #smd-top-bar .smd-weather-pill {
        min-height: 28px;
        padding: 1px 11px 3px;
        gap: 5px;
    }

    #smd-top-bar .smd-w-temp,
    #smd-top-bar .smd-w-desc { font-size: 12px; }
}

@media (max-width: 480px) {

    #smd-top-bar .smd-tb-item { font-size: 11.5px; }

    #smd-top-bar .smd-roman,
    #smd-top-bar .smd-date-num { font-size: 11px; }

    #smd-top-bar .smd-date-mix { gap: 3px; }

    #smd-top-bar .smd-tb-right { gap: 6px; }

    #smd-top-bar .smd-tb-day {
        padding: 0 4px 2px;
        font-size: 18px;
        font-weight: 700;
    }

    #smd-top-bar .smd-tb-sep::before {
        font-size: 5px;
        color: rgba(201, 151, 28, 0.5);
    }
}

/* ═══ v9.9.5: Desktop پر smart bar پکی طرح چپکی رہے ═══
   کچھ browsers میں sticky ٹوٹ رہی تھی — desktop پر fixed کر دیا،
   body کو اتنی جگہ دے دی (43px) تاکہ مواد نیچے نہ دبے۔
   موبائل پر پہلے والا sticky نظام برقرار (وہ ٹھیک چل رہا ہے)۔

   FIX (v9.9.5) — admin-bar کے ساتھ سفید خلا:
   WordPress خود <html> پر margin-top:32px لگاتا ہے۔
   پہلے یہاں body کو 75px (32+43) دیا گیا تھا، یعنی 32px
   دو بار گِنے گئے — اسی لیے bar اور nav کے درمیان 32px کا
   سفید خلا بنتا تھا (صرف لاگ اِن حالت میں نظر آتا تھا)۔
   body کو صرف bar کی اپنی اونچائی (43px) درکار ہے۔ */
    /* ⚠ FIX (2026-10-11): `!important` added deliberately.
       WordPress emits, LATER in <head>:
           body{padding-top:0px;padding-right:0px;...}
       from `global-styles-inline-css`. That rule has the SAME specificity as
       `body` (0,0,1) but comes later, so it silently cancelled this 43px.

       Consequence: #smd-top-bar is position:fixed (desktop, >=761px) so it
       reserves no flow space; with padding gone the sticky header was pulled
       up over the first section and the news carousel's top ~40px sat hidden
       underneath it. `!important` is what beats the later global rule.
       This file already uses !important in 40+ places, so it is in keeping
       with the file's own style. */
@media (min-width: 761px) {
    #smd-top-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    body { padding-top: 43px !important; }

    /* admin bar موجود ہو تو bar اُس کے نیچے چپکے */
    body.admin-bar #smd-top-bar { top: 32px; }

    /* body کی padding وہی 43px رہے — html کا margin-top:32px
       WordPress خود سنبھال چکا ہوتا ہے */
    body.admin-bar { padding-top: 43px !important; }
}


/* =========================================================
   SINGLE LINE ALWAYS — never wrap, never side-clip hard cut
   Small screens: shrink type + gaps; optional soft scroll
   ========================================================= */
#smd-top-bar .smd-top-bar-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(4px, 1.2vw, 14px) !important;
    width: min(1120px, calc(100% - 12px)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap !important;
}
#smd-top-bar .smd-top-bar-inner::-webkit-scrollbar {
    display: none;
    height: 0;
}

#smd-top-bar .smd-tb-right,
#smd-top-bar .smd-tb-left {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
}

#smd-top-bar .smd-tb-item,
#smd-top-bar .smd-weather-pill {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Progressive size — still one line
 * FIX (2026-08-21): pehle 480px se neeche text 9.5–10.5px aur bar
 * 30px tak simat jata tha — parhna mushkil ho jata tha. overflow-x:
 * auto pehle se hi scroll sambhal leta hai, is liye itna zyada
 * shrink karne ki zarurat nahi thi. Ab har breakpoint par ek
 * "standard", parhne laiq minimum size rakha gaya hai. */
@media (max-width: 900px) {
    #smd-top-bar { min-height: 40px; }
    #smd-top-bar .smd-tb-item { font-size: 13px !important; min-height: 28px; }
    #smd-top-bar .smd-tb-day { font-size: 18px !important; }
    #smd-top-bar .smd-roman,
    #smd-top-bar .smd-date-num { font-size: 12px !important; }
    #smd-top-bar .smd-date-month { font-size: 12.5px !important; }
    #smd-top-bar .smd-w-temp,
    #smd-top-bar .smd-w-desc { font-size: 12.5px !important; }
}

@media (max-width: 700px) {
    #smd-top-bar { min-height: 38px; }
    #smd-top-bar .smd-top-bar-inner { gap: 8px !important; }
    #smd-top-bar .smd-tb-right { gap: 7px !important; }
    #smd-top-bar .smd-tb-item { font-size: 12.5px !important; min-height: 27px; }
    #smd-top-bar .smd-tb-day { font-size: 17px !important; }
    #smd-top-bar .smd-roman,
    #smd-top-bar .smd-date-num { font-size: 11.5px !important; }
    #smd-top-bar .smd-date-month { font-size: 12px !important; }
    #smd-top-bar .smd-tb-sep::before { font-size: 5px !important; }
    #smd-top-bar .smd-weather-pill { padding: 1px 10px 3px !important; min-height: 27px; }
    #smd-top-bar .smd-w-temp,
    #smd-top-bar .smd-w-desc { font-size: 12px !important; }
}

@media (max-width: 480px) {
    #smd-top-bar { min-height: 36px; }
    #smd-top-bar .smd-top-bar-inner { gap: 6px !important; width: calc(100% - 8px) !important; }
    #smd-top-bar .smd-tb-item { font-size: 12px !important; min-height: 26px; }
    #smd-top-bar .smd-tb-day { font-size: 16px !important; }
    #smd-top-bar .smd-roman,
    #smd-top-bar .smd-date-num { font-size: 11px !important; }
    #smd-top-bar .smd-date-month { font-size: 11.5px !important; }
    #smd-top-bar .smd-w-icon { font-size: 13px !important; }
    #smd-top-bar .smd-w-temp,
    #smd-top-bar .smd-w-desc { font-size: 11.5px !important; }
}

/* Override older wrap rules in this file */
@media (max-width: 760px) {
    #smd-top-bar .smd-top-bar-inner,
    #smd-top-bar .smd-tb-right,
    #smd-top-bar .smd-tb-left {
        flex-wrap: nowrap !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ⚡ CLS FIX (2026-08-21) — «Layout shift culprits» / CLS 0.115
   ───────────────────────────────────────────────────────────────
   Masla: bar ki height sirf min-height se tay hoti thi, is liye
   uski asal height us baat par thi ke andar ka Urdu (Nastaliq)
   font kitni jagah leta hai. Font network se der se aata hai —
   pehle fallback font se bar ek height par bunti thi, phir asli
   font aane par height thori badal jati thi. Bar sticky hai aur
   header uske neeche chipka hua hai, is liye poora safha ek dam
   khisak jata tha → yehi CLS (0.115) tha.

   Hal: har breakpoint par height PAKKI kar di gayi hai. Ab font
   pehle aaye ya baad mein, bar ki jagah bilkul waisi hi rehti hai
   — kuch nahi khiskta. Andar ka content pehle se bich mein
   (align-items:center) aur overflow-y:hidden hai, is liye kuch
   katta bhi nahi.

   NOTE: yeh values upar wale min-height se hu-ba-hu milti hain,
   is liye dikhne mein koi farq nahi parta — sirf pakka ho jata hai.
   ═══════════════════════════════════════════════════════════════ */
#smd-top-bar { height: 42px; }
#smd-top-bar .smd-top-bar-inner { height: 100%; }

@media (max-width: 900px) { #smd-top-bar { height: 40px; } }
@media (max-width: 700px) { #smd-top-bar { height: 38px; } }
@media (max-width: 480px) { #smd-top-bar { height: 36px; } }

/* موبائل والا پرانا padding height ke sath tazad na kare */
@media (max-width: 760px) {
    #smd-top-bar { padding: 0; }
}