/*
 * tpl-siyaq.css — قالب واجهة «سياق24»
 *
 * مبنيّ على تصاميم PSD في psd/ بعد مواءمة الهوية (الشعار والاسم يأتيان من
 * yemal_settings) والأقسام (تصنيفات الموقع الستّة).
 *
 * CSS خالص بلا اعتماد خارجي — يُحمَّل بعد main.min.css و theme.css فيغلب عليهما
 * في ما يتقاطع. لا يُعدَّل theme.css إطلاقاً: هو بناء Tailwind مصغَّر فُقد إعداده،
 * وما زالت صفحات أخرى تعتمد على أدواته.
 *
 * التصميم فاتح بالكامل — لا وضع داكن (المصدر PSD فاتح، والموقع لم يكن يدعمه).
 *
 * الترتيب: 1) الرموز  2) الأساسات  3) الترويسة  4) الشريط العاجل  5) التخطيط
 *          6) العناوين  7) اللوحات الجانبية  8) الواجهة الرئيسية  9) صفحة الخبر
 *          10) صفحة القسم  11) التذييل
 *          13) الصفحات الداخلية  14) إعادة تلوين طبقة main.css القديمة
 */

/* ================================================================
   1. الرموز التصميمية — مستخرجة من الـPSD بأخذ عيّنات لونية
   ================================================================ */
:root {
    /* التصميم فاتح بالكامل. color-scheme يمنع أيضاً محاولة المتصفح فرض وضع
       داكن على الصفحة (force-dark)، وهو ما لا تمنعه استعلامات الوسائط وحدها. */
    color-scheme: light;

    /* الأحمر الأساسي: شريط عنوان الخبر الرئيسي ورؤوس الأقسام */
    --sq-red:          #bf1c14;
    --sq-red-text:     #bf1c14;   /* الأحمر حين يكون لون نصّ لا خلفية */
    --sq-red-deep:     #8c150f;   /* ذروة تدرّج الترويسة والتذييل */
    --sq-red-dark:     #6d1009;
    --sq-black:        #000000;
    --sq-band:         #151515;   /* شريط الأقسام الداكن */
    --sq-band-soft:    #232323;
    --sq-gray:         #9f9f9f;   /* شريط الأخبار العاجلة */

    --sq-page:         #ffffff;
    --sq-surface:      #ffffff;
    --sq-surface-alt:  #f4f4f4;
    --sq-rule:         #e3e3e3;
    --sq-rule-soft:    #efefef;

    --sq-ink:          #1a1a1a;
    --sq-ink-soft:     #5a5a5a;
    --sq-ink-muted:    #8a8a8a;
    --sq-on-dark:      #ffffff;
    --sq-on-dark-soft: rgba(255, 255, 255, .72);

    --sq-rail:         1200px;
    --sq-gap:          20px;
    --sq-radius:       2px;
    --sq-shadow:       0 1px 3px rgba(0, 0, 0, .07);
    --sq-shadow-lift:  0 6px 18px rgba(0, 0, 0, .12);

    /* لوحة رأس الخبر: نفس التدرّج لكن بأحمر أوضح في المنتصف (من الـPSD) */
    --sq-article-fade: linear-gradient(90deg,
        #050101 0%, #6d1009 26%, var(--sq-red) 50%, #6d1009 74%, #050101 100%);

    /* تدرّج الترويسة/التذييل: أسود عند الطرفين، أحمر غامق في المنتصف */
    --sq-brand-fade: linear-gradient(90deg,
        var(--sq-black) 0%,
        var(--sq-red-dark) 32%,
        var(--sq-red-deep) 50%,
        var(--sq-red-dark) 68%,
        var(--sq-black) 100%);
}

/* ================================================================
   2. الأساسات
   ================================================================ */
body.sq {
    background: var(--sq-page);
    color: var(--sq-ink);
    font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}

.sq-rail {
    width: 100%;
    max-width: var(--sq-rail);
    margin-inline: auto;
    padding-inline: 16px;
}

.sq a { color: inherit; text-decoration: none; }
.sq img { display: block; max-width: 100%; height: auto; }
.sq ul, .sq ol { list-style: none; margin: 0; padding: 0; }

/* أداة إخفاء بصري مع إبقاء النص لقارئات الشاشة */
.sq-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* صورة تملأ إطارها بنسبة ثابتة */
.sq-media { position: relative; overflow: hidden; background: var(--sq-surface-alt); }
.sq-media > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.sq-media--16x9 { aspect-ratio: 16 / 9; }
.sq-media--4x3  { aspect-ratio: 4 / 3; }
.sq-media--1x1  { aspect-ratio: 1 / 1; }
a:hover > .sq-media > img,
a:hover .sq-media > img { transform: scale(1.04); }

/* قصّ العنوان إلى عدد أسطر محدّد.
   .sq-flexfix يُلفّ به العنصر المقصوص داخل حاوية flex: بدون min-width:0 يرفض
   عنصر flex النزول تحت عرض محتواه الأدنى فيتجاوز البطاقة. */
.sq-flexfix { min-width: 0; }
.sq-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sq-clamp-1 { -webkit-line-clamp: 1; }
.sq-clamp-2 { -webkit-line-clamp: 2; }
.sq-clamp-3 { -webkit-line-clamp: 3; }

.sq-time {
    font-size: 11.5px;
    color: var(--sq-ink-muted);
    font-variant-numeric: tabular-nums;
}

/* ================================================================
   3. الترويسة
   ================================================================ */
.sq-strap { height: 4px; background: var(--sq-black); }

.sq-header {
    background: var(--sq-brand-fade);
    color: var(--sq-on-dark);
    position: relative;
    z-index: 30;
}
.sq-header__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    padding-block: 10px;
}

.sq-logo { flex-shrink: 0; }
.sq-logo img { height: 46px; width: auto; }

/* احتياطي: إن غابت النسخة الفاتحة من الشعار، يُعرض الأصل داخل رقعة بيضاء
   بدل أن يذوب في التدرّج الداكن. */
.sq-logo--raw img,
.sq-footer__logo.sq-logo--raw img {
    background: #fff;
    padding: 5px 9px;
    border-radius: var(--sq-radius);
}

/* التنقّل الأفقي — يظهر على الشاشات المتوسطة فأعلى */
.sq-nav { display: none; }
.sq-nav__link {
    display: inline-block;
    padding: 8px 11px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sq-on-dark);
    border-bottom: 2px solid transparent;
    transition: border-color .2s ease, color .2s ease;
}
.sq-nav__link:hover,
.sq-nav__link[aria-current="page"] { border-bottom-color: var(--sq-on-dark); }

.sq-header__tools {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
}
.sq-iconbtn {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    color: var(--sq-on-dark);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: opacity .2s ease;
}
.sq-iconbtn:hover { opacity: .75; }
.sq-iconbtn--fb:hover     { color: #1877f2; }
.sq-iconbtn--twitter:hover{ color: #ffffff; }
.sq-iconbtn--yt:hover     { color: #ff0000; }

.sq-burger { display: grid; }

/* حقل البحث المنسدل في الترويسة */
.sq-headsearch {
    display: none;
    background: rgba(0, 0, 0, .55);
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.sq-headsearch[data-open="true"] { display: block; }
.sq-headsearch form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-block: 12px;
}
.sq-headsearch input {
    flex: 1;
    height: 40px;
    padding-inline: 12px;
    font: inherit;
    font-size: 14px;
    color: var(--sq-ink);
    background: #fff;
    border: 0;
    border-radius: var(--sq-radius);
}
.sq-headsearch button {
    height: 40px;
    padding-inline: 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--sq-red);
    border: 0;
    border-radius: var(--sq-radius);
    cursor: pointer;
}
.sq-headsearch button:hover { background: var(--sq-red-deep); }

/* حقول البحث بيضاء في الوضعين عمداً (فوق تدرّج داكن)، فيُثبَّت لون النصّ داكناً
   ولا يتبع --sq-ink الذي ينقلب فاتحاً في الوضع الداكن فيختفي ما يكتبه الزائر. */
.sq-headsearch input,
.sq-footer__search input { color: #1a1a1a; }
.sq-headsearch input::placeholder,
.sq-footer__search input::placeholder { color: #6a6a6a; }

@media (min-width: 900px) {
    .sq-nav { display: flex; align-items: center; gap: 2px; }
    .sq-burger { display: none; }
    .sq-logo img { height: 52px; }
}

/* ── درج الجوال ────────────────────────────────────────────────
   كان يعتمد كلياً على أدوات Tailwind في theme.css، ومنها ‏md:hidden الذي يخفيه
   عند 768px — بينما التنقّل الأفقي هنا لا يظهر قبل 900px (سبعة أقسام + شعار +
   أدوات لا تتّسع في 768). فبقي النطاق 768–899 بزرّ قائمة يعمل بلا قائمة تظهر.
   يُعرَّف ظهور الدرج وانزلاقه هنا صراحةً بمحدِّد id فيغلب أصناف theme.css بلا
   !important، ويستقلّ عن بناء Tailwind غير القابل لإعادة التوليد.
   معرّفات العناصر التي يربطها assets/js/header.js لم تتغيّر. */
#mobile-drawer {
    display: flex;
    transform: translateX(100%);
}
#mobile-drawer[data-open="true"] { transform: translateX(0); }
#mobile-drawer-backdrop { display: block; }

/* أسطح الدرج من رموز القالب لا من أصناف Tailwind الفاتحة، وإلا ظهر نصّ فاتح
   على خلفية بيضاء في الوضع الداكن. */
#mobile-drawer { background: var(--sq-surface); color: var(--sq-ink); }
#mobile-drawer nav a { background: var(--sq-surface); color: var(--sq-ink); border-color: var(--sq-rule); }
#mobile-drawer nav a:hover { background: var(--sq-surface-alt); color: var(--sq-red-text); }
#mobile-drawer ul.grid { background: var(--sq-rule); }
#mobile-drawer .sq-share { color: var(--sq-ink-soft); border-color: var(--sq-rule); }
#mobile-drawer nav > span { color: var(--sq-red-text) !important; }

@media (min-width: 900px) {
    #mobile-drawer,
    #mobile-drawer-backdrop { display: none; }
}

/* ================================================================
   4. شريط الأخبار العاجلة
   ================================================================ */
.sq-breaking {
    background: var(--sq-gray);
    color: #111;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.sq-breaking__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
}
.sq-breaking__label {
    flex-shrink: 0;
    align-self: stretch;
    display: grid;
    place-items: center;
    padding-inline: 14px;
    margin-inline-start: -16px;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    background: var(--sq-red);
}
.sq-breaking__track {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.sq-breaking__item {
    display: block;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sq-breaking__item:hover { color: var(--sq-red-dark); }
/* قاعدة الصنف تغلب نمط المتصفح لسمة hidden، فتُعاد صراحةً */
.sq-breaking__item[hidden] { display: none; }

/* ================================================================
   5. التخطيط العام
   ================================================================ */
/* الشريط الداكن يمتدّ لعرض الشاشة بهوامش سالبة تعتمد vw، و vw تحسب شريط التمرير
   فينتج تجاوز أفقي بمقداره. القصّ هنا — على عنصر عادي بعرض الشاشة — يبتلع هذا
   التجاوز. لا يوضع على body/html: قيمة overflow عليهما تنتقل إلى الـviewport
   فتُعطّل التمرير الرأسي للصفحة كلها. */
.sq-main {
    display: block;
    padding-block: 22px 0;
    overflow-x: hidden;
}
@supports (overflow-x: clip) { .sq-main { overflow-x: clip; } }
.sq-section { margin-block-end: 28px; }

/* شبكة الواجهة الرئيسية: جانبي · قائمة · بطل */
.sq-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sq-gap);
}
/* الخبر الرئيسي مكتوب أخيراً في الترميز (ترتيب منطقي للقارئ الآلي)، لكنه يتصدّر
   العرض على الشاشات الضيقة والمتوسطة كما في التصميم. */
.sq-top__hero { order: -1; }
@media (min-width: 760px) {
    .sq-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sq-top__hero { grid-column: span 2; }
}
@media (min-width: 1080px) {
    .sq-top { grid-template-columns: 3fr 3.2fr 5.4fr; }
    .sq-top__hero { grid-column: auto; order: 0; }
}

/* بطاقتان تحت الخبر الرئيسي — تملآن الفراغ أسفل العمود العريض على سطح المكتب.
   العمود أضيق من شبكة «عناوين اليوم»، فالمصغّرة أصغر ليبقى للعنوان متّسع. */
.sq-hero-more {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-block-start: 14px;
}
@media (min-width: 620px) { .sq-hero-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sq-hero-more .sq-card__thumb { width: 84px; }

/* ================================================================
   6. العناوين
   ================================================================ */
/* رأس على هيئة لسان أسود فوق إطار — كما في «آخر الأخبار» بالتصميم */
.sq-tab {
    display: inline-block;
    padding: 7px 22px;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    background: var(--sq-black);
}

/* رأس قسم عريض: الاسم + رابط المزيد */
.sq-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 12px;
}
.sq-head__title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: var(--sq-ink);
}
.sq-head__more {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sq-ink-muted);
    white-space: nowrap;
}
.sq-head__more:hover { color: var(--sq-red-text); }

/* ================================================================
   7. اللوحات الجانبية
   ================================================================ */
.sq-panel {
    background: var(--sq-surface);
    border: 1px solid var(--sq-rule);
    margin-block-end: 18px;
}
.sq-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}
.sq-panel--ink  .sq-panel__head { background: var(--sq-black); }
.sq-panel--red  .sq-panel__head { background: var(--sq-red); }
.sq-panel__more {
    font-size: 12px;
    font-weight: 700;
    color: var(--sq-on-dark-soft);
}
.sq-panel__more:hover { color: #fff; }
.sq-panel__body { padding: 4px 0; }

/* صفوف اللوحة */
.sq-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-block-end: 1px solid var(--sq-rule-soft);
}
.sq-row:last-child { border-block-end: 0; }
.sq-row:hover { background: var(--sq-surface-alt); }
.sq-row__title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--sq-ink);
}
.sq-row:hover .sq-row__title { color: var(--sq-red-text); }
.sq-row__thumb { flex-shrink: 0; width: 74px; }

/* ترقيم الأكثر قراءة */
.sq-rank {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    font-size: 13px;
    font-weight: 800;
    color: var(--sq-red-text);
    background: var(--sq-surface-alt);
}
.sq-row:hover .sq-rank { color: #fff; background: var(--sq-red); }

/* ================================================================
   8. الواجهة الرئيسية
   ================================================================ */

/* ── 8.1 قائمة «آخر الأخبار» ─────────────────────────────────── */
.sq-latest { border: 1px solid var(--sq-rule); background: var(--sq-surface); }
.sq-latest__head { border-block-end: 1px solid var(--sq-rule); }
.sq-latest__item {
    display: block;
    padding: 13px 14px;
    border-block-end: 1px solid var(--sq-rule-soft);
    background: var(--sq-surface-alt);
}
.sq-latest__item:nth-child(even) { background: var(--sq-surface); }
.sq-latest__item:last-child { border-block-end: 0; }
.sq-latest__item:hover { background: #fff; }
.sq-latest__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.65;
    color: var(--sq-ink);
}
.sq-latest__item:hover .sq-latest__title { color: var(--sq-red-text); }
.sq-latest__meta { margin-block-start: 5px; }

/* ── 8.2 الخبر الرئيسي (خبر الساعة) ──────────────────────────── */
.sq-hero { display: block; background: var(--sq-black); }
.sq-hero__media { position: relative; }
.sq-hero__stamp {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-end: 14px;
    z-index: 2;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: rgba(0, 0, 0, .55);
}
.sq-hero__caption {
    padding: 16px 20px 18px;
    background: var(--sq-red);
    color: #fff;
}
.sq-hero__title {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.5;
}
.sq-hero__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-start: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, .82);
}
.sq-hero:hover .sq-hero__caption { background: var(--sq-red-deep); }
@media (min-width: 1080px) {
    .sq-hero__title { font-size: 24px; }
}

/* ── 8.3 شبكة البطاقات ───────────────────────────────────────── */
.sq-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 620px)  { .sq-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .sq-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sq-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--sq-surface);
    border: 1px solid var(--sq-rule);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.sq-card:hover { border-color: var(--sq-rule); box-shadow: var(--sq-shadow-lift); }
.sq-card__thumb { flex-shrink: 0; width: 104px; }
/* block لا flex: الابن المباشر لحاوية flex يفقد -webkit-box فيسقط قصّ العنوان */
.sq-card__body { min-width: 0; flex: 1 1 auto; }
.sq-card__title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.65;
    color: var(--sq-ink);
}
.sq-card:hover .sq-card__title { color: var(--sq-red-text); }
.sq-card__meta { display: block; padding-block-start: 8px; }

/* ── 8.4 الشريط الداكن للأقسام ───────────────────────────────── */
.sq-band {
    background: var(--sq-band);
    color: var(--sq-on-dark);
    padding-block: 30px 34px;
    margin-block-end: 28px;
    /* امتداد لعرض الشاشة رغم وجوده داخل حاوية محدودة العرض */
    margin-inline: calc(50% - 50vw);
}
.sq-band__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 26px;
}
@media (min-width: 760px)  { .sq-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .sq-band__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sq-band__title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}
.sq-band__title a:hover { color: var(--sq-red-text); }

.sq-band__lead { display: block; margin-block-end: 12px; }
.sq-band__leadcap {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .92), rgba(0, 0, 0, .25) 70%, transparent);
}
.sq-band__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-block-end: 1px solid rgba(255, 255, 255, .1);
}
.sq-band__item:last-child { border-block-end: 0; }
.sq-band__item .sq-clamp {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}
.sq-band__item:hover .sq-clamp { color: #fff; }
/* المربّع الأحمر الصغير — بديل زرّ التشغيل في التصميم الأصلي (لا حقل فيديو في النظام) */
.sq-band__mark {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    color: #fff;
    background: var(--sq-red);
}
.sq-band__item:hover .sq-band__mark { background: #fff; color: var(--sq-red-text); }

/* ── 8.5 كتل الأقسام البيضاء ─────────────────────────────────── */
.sq-blocks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 760px)  { .sq-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .sq-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sq-block { background: var(--sq-surface); border: 1px solid var(--sq-rule); }
.sq-block__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
}
.sq-block__name {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--sq-ink);
}
.sq-block__more { font-size: 12px; font-weight: 700; color: var(--sq-ink-muted); }
.sq-block__more:hover { color: var(--sq-red-text); }

.sq-block__lead { display: block; }
.sq-block__leadcap {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .2) 70%, transparent);
}

.sq-block__list { padding: 4px 14px 12px; }
.sq-block__item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 0;
    border-block-end: 1px solid var(--sq-rule-soft);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.65;
    color: var(--sq-ink);
}
.sq-block__item:last-child { border-block-end: 0; }
.sq-block__item::before {
    content: "";
    flex-shrink: 0;
    width: 8px; height: 2px;
    margin-block-start: 10px;
    background: var(--sq-red);
}
.sq-block__item:hover { color: var(--sq-red-text); }

/* ================================================================
   9. صفحة الخبر
   ================================================================ */
.sq-article { background: var(--sq-surface); border: 1px solid var(--sq-rule); }
.sq-article__media { padding: 14px 14px 0; }
.sq-article__head { padding: 16px 18px 18px; }
.sq-article__title {
    margin: 0 0 12px;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--sq-ink);
}
@media (min-width: 900px) { .sq-article__title { font-size: 28px; } }

.sq-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--sq-rule);
    font-size: 12.5px;
    color: var(--sq-ink-soft);
}
.sq-article__meta .sq-sep { color: var(--sq-rule); }
.sq-article__cat {
    padding: 3px 10px;
    font-weight: 800;
    color: #fff;
    background: var(--sq-red);
}
.sq-article__share { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.sq-share {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    color: var(--sq-ink-soft);
    border: 1px solid var(--sq-rule);
}
.sq-share:hover { color: #fff; background: var(--sq-red); border-color: var(--sq-red); }

.sq-article__body {
    padding: 4px 18px 22px;
    font-size: 16.5px;
    line-height: 2.05;
    color: var(--sq-ink);
}
.sq-article__body p { margin: 0 0 18px; }
.sq-article__body h2,
.sq-article__body h3 { font-weight: 800; line-height: 1.5; margin: 26px 0 12px; }
.sq-article__body h2 { font-size: 20px; }
.sq-article__body h3 { font-size: 18px; }
.sq-article__body a { color: var(--sq-red-text); text-decoration: underline; }
.sq-article__body img { margin: 18px auto; }
.sq-article__body blockquote {
    margin: 20px 0;
    padding: 12px 18px;
    border-inline-start: 3px solid var(--sq-red);
    background: var(--sq-surface-alt);
    font-weight: 600;
}
.sq-article__body ul,
.sq-article__body ol { margin: 0 0 18px; padding-inline-start: 22px; }
.sq-article__body ul li { list-style: disc; }
.sq-article__body ol li { list-style: decimal; }

/* رأس بخطّ أحمر ممتد — «اقرأ أيضاً» و«المتعلقات» */
.sq-rule-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-end: 12px;
}
.sq-rule-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--sq-ink);
}
.sq-rule-head::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--sq-red);
}

.sq-readalso { padding: 0 18px 20px; }
.sq-readalso li { padding: 9px 0; border-block-end: 1px solid var(--sq-rule-soft); }
.sq-readalso li:last-child { border-block-end: 0; }
.sq-readalso a {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.65;
    color: var(--sq-red-text);
}
.sq-readalso a:hover { color: var(--sq-red-dark); text-decoration: underline; }

/* ================================================================
   10. صفحة القسم والصفحات الداخلية
   ================================================================ */
.sq-pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block-end: 12px;
    margin-block-end: 18px;
    border-block-end: 2px solid var(--sq-red);
}
.sq-pagehead h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--sq-ink);
}
.sq-pagehead__count { font-size: 12.5px; color: var(--sq-ink-muted); }

.sq-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-block: 26px 8px;
}
.sq-pager a,
.sq-pager span {
    display: grid;
    place-items: center;
    min-width: 38px; height: 38px;
    padding-inline: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sq-ink);
    background: var(--sq-surface);
    border: 1px solid var(--sq-rule);
}
.sq-pager a:hover { color: #fff; background: var(--sq-red); border-color: var(--sq-red); }
.sq-pager [aria-current="page"] { color: #fff; background: var(--sq-black); border-color: var(--sq-black); }

/* ================================================================
   11. التذييل
   ================================================================ */
.sq-footer {
    margin-block-start: 34px;
    background: var(--sq-brand-fade);
    color: var(--sq-on-dark);
    text-align: center;
}
.sq-footer__inner { padding-block: 30px 26px; }

.sq-footer__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 22px;
    margin-block-end: 18px;
}
.sq-footer__nav a {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sq-on-dark);
    padding-block: 4px;
    border-block-end: 2px solid transparent;
}
.sq-footer__nav a:hover { border-block-end-color: var(--sq-on-dark); }

.sq-footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-block-end: 18px;
}

.sq-footer__search {
    display: flex;
    align-items: center;
    max-width: 420px;
    margin-inline: auto;
    margin-block-end: 22px;
    background: #fff;
    border-radius: var(--sq-radius);
    overflow: hidden;
}
.sq-footer__search input {
    flex: 1;
    height: 42px;
    padding-inline: 14px;
    font: inherit;
    font-size: 14px;
    /* الحقل أبيض في الوضعين (فوق تدرّج داكن) — انظر التعليق في القسم 3 */
    color: #1a1a1a;
    background: transparent;
    border: 0;
}
.sq-footer__search input:focus { outline: 2px solid var(--sq-red); outline-offset: -2px; }
.sq-footer__search button {
    display: grid;
    place-items: center;
    width: 46px; height: 42px;
    color: var(--sq-ink-soft);
    background: transparent;
    border: 0;
    cursor: pointer;
}
.sq-footer__search button:hover { color: var(--sq-red-text); }

.sq-footer__logo { display: inline-block; margin-block-end: 12px; }
.sq-footer__logo img { height: 44px; width: auto; margin-inline: auto; }
.sq-footer__legal {
    font-size: 12.5px;
    color: var(--sq-on-dark-soft);
    line-height: 1.9;
}
.sq-footer__legal a { color: #fff; text-decoration: underline; }



/* ================================================================
   13. الصفحات الداخلية — إعادة تنسيق أصناف main.css القائمة
   news.php · cat.php · search.php · author.php · content.php · 404.php
   تستعمل هذه الصفحات أصنافاً دلالية (article-*, cat-feed-item__*,
   pagination-*)، فيكفي تنسيقها هنا دون المساس بترميزها أو ببيانات schema.
   ================================================================ */

/* ── مسار التنقّل ─────────────────────────────────────────────── */
.sq .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sq-ink-soft);
}
.sq .breadcrumb a { display: inline-flex; align-items: center; gap: 5px; }
.sq .breadcrumb a:hover { color: var(--sq-red-text); }
.sq .breadcrumb-sep { display: inline-flex; color: var(--sq-ink-muted); }

/* ── لوحة رأس الخبر ───────────────────────────────────────────── */
.sq .sq-article-panel {
    background: var(--sq-article-fade);
    color: #fff;
    margin-block-end: 22px;
}
.sq .sq-article-panel .article-image {
    margin: 0;
    padding: 16px 16px 0;
}
.sq .sq-article-panel .article-image img { width: 100%; height: auto; }
.sq .sq-article-panel .article-image-caption {
    padding: 8px 2px 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .78);
}
.sq .sq-article-panel .article-title {
    margin: 0;
    padding: 16px 20px 6px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.5;
    color: #fff;
}
.sq .sq-article-panel .article-info-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin: 0;
    padding: 6px 20px 18px;
    background: transparent;
    border: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .82);
}
.sq .sq-article-panel .article-info-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: 0;
    padding: 0;
    border: 0;
}
.sq .sq-article-panel .article-info-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
}
.sq .sq-article-panel .article-info-author { color: #fff; font-weight: 700; }
.sq .sq-article-panel .article-info-author:hover { text-decoration: underline; }
.sq .sq-article-panel .article-info-sep {
    width: 1px; height: 13px;
    background: rgba(255, 255, 255, .35);
}
@media (min-width: 900px) {
    .sq .sq-article-panel .article-title { font-size: 27px; padding-inline: 26px; }
    .sq .sq-article-panel .article-info-box { padding-inline: 26px; }
    .sq .sq-article-panel .article-image { padding: 20px 20px 0; }
}

/* ── جسم الخبر ────────────────────────────────────────────────── */
.sq .article-source {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--sq-ink-soft);
}
.sq .article-source strong { color: var(--sq-ink); }

.sq .article-body {
    font-size: 16.5px;
    line-height: 2.05;
    color: var(--sq-ink);
}
.sq .article-body p { margin: 0 0 18px; }
.sq .article-body h2, .sq .article-body h3 { font-weight: 800; line-height: 1.5; margin: 26px 0 12px; }
.sq .article-body h2 { font-size: 20px; }
.sq .article-body h3 { font-size: 18px; }
.sq .article-body a { color: var(--sq-red-text); text-decoration: underline; }
.sq .article-body img { margin: 18px auto; }
.sq .article-body blockquote {
    margin: 20px 0;
    padding: 12px 18px;
    border-inline-start: 3px solid var(--sq-red);
    background: var(--sq-surface-alt);
    font-weight: 600;
}
.sq .article-body ul, .sq .article-body ol { margin: 0 0 18px; padding-inline-start: 22px; }
.sq .article-body ul li { list-style: disc; }
.sq .article-body ol li { list-style: decimal; }

/* «اقرأ أيضاً» المحقونة داخل النص */
.sq .read-also,
.sq .article-read-also {
    margin: 22px 0;
    padding: 14px 16px;
    background: var(--sq-surface-alt);
    border-inline-start: 3px solid var(--sq-red);
}
.sq .read-also a,
.sq .article-read-also a { color: var(--sq-red-text); font-weight: 700; }

/* صندوق تحليل المحرّر وتنويه الأسهم */
.sq .editor-analysis,
.sq .stock-disclaimer {
    margin: 22px 0;
    padding: 16px 18px;
    background: var(--sq-surface-alt);
    border: 1px solid var(--sq-rule);
    border-inline-start: 3px solid var(--sq-red);
    font-size: 15px;
    line-height: 1.9;
}

/* صندوق الكاتب */
.sq .author-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 26px 0;
    padding: 16px;
    background: var(--sq-surface);
    border: 1px solid var(--sq-rule);
}
.sq .author-avatar { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; }
.sq .author-name { font-size: 16px; font-weight: 800; margin-block-end: 4px; }
.sq .author-bio { font-size: 13.5px; color: var(--sq-ink-soft); line-height: 1.8; }

/* شريط المشاركة */
.sq .share-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 22px 0;
    padding-block: 14px;
    border-block: 1px solid var(--sq-rule);
}
.sq .share-label { font-size: 13px; font-weight: 800; margin-inline-end: 4px; }
.sq .share-bar a, .sq .share-bar button {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    color: var(--sq-ink-soft);
    background: transparent;
    border: 1px solid var(--sq-rule);
    cursor: pointer;
}
.sq .share-bar a:hover, .sq .share-bar button:hover {
    color: #fff;
    background: var(--sq-red);
    border-color: var(--sq-red);
}

/* «المتعلقات» */
.sq .related-section { margin-block-start: 30px; }
.sq .section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-end: 14px;
}
.sq .section-heading::after { content: ""; flex: 1; height: 2px; background: var(--sq-red); }
.sq .section-heading-title { margin: 0; font-size: 17px; font-weight: 800; }
.sq .related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
@media (min-width: 620px)  { .sq .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sq .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sq .related-card {
    background: var(--sq-surface);
    border: 1px solid var(--sq-rule);
    overflow: hidden;
}
.sq .related-card:hover { box-shadow: var(--sq-shadow-lift); }
.sq .related-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sq .related-card h3, .sq .related-card .related-card__title {
    margin: 0;
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.65;
}
.sq .related-card:hover h3 { color: var(--sq-red-text); }

/* ── صفحة القسم / البحث / الكاتب ──────────────────────────────── */
.sq .cat-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block-end: 12px;
    margin-block-end: 20px;
    border-block-end: 2px solid var(--sq-red);
}
.sq .cat-page-header__title { margin: 0; font-size: 22px; font-weight: 800; }
.sq .cat-page-header__desc { margin: 6px 0 0; font-size: 13.5px; color: var(--sq-ink-soft); }
.sq .cat-page-header__icon { color: var(--sq-red-text); }

.sq .cat-feed-item {
    display: flex;
    gap: 14px;
    padding: 14px;
    margin-block-end: 14px;
    background: var(--sq-surface);
    border: 1px solid var(--sq-rule);
}
.sq .cat-feed-item:hover { box-shadow: var(--sq-shadow-lift); }
.sq .cat-feed-item__thumb-link { flex-shrink: 0; }
.sq .cat-feed-item__thumb {
    width: 150px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--sq-surface-alt);
}
.sq .cat-feed-item__content { min-width: 0; }
.sq .cat-feed-item__badge {
    display: inline-block;
    padding: 2px 9px;
    margin-block-end: 6px;
    font-size: 11.5px;
    font-weight: 800;
    color: #fff;
    background: var(--sq-red);
}
.sq .cat-feed-item__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
}
.sq .cat-feed-item:hover .cat-feed-item__title { color: var(--sq-red-text); }
.sq .cat-feed-item__excerpt {
    margin: 0 0 8px;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--sq-ink-soft);
}
.sq .cat-feed-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 12px;
    color: var(--sq-ink-muted);
}
.sq .cat-feed-item__read-more { font-weight: 700; color: var(--sq-red-text); }
@media (max-width: 560px) {
    .sq .cat-feed-item { flex-direction: column; }
    .sq .cat-feed-item__thumb { width: 100%; aspect-ratio: 16 / 9; }
}

.sq .empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--sq-ink-soft);
    background: var(--sq-surface-alt);
    border: 1px dashed var(--sq-rule);
}

/* ── ترقيم الصفحات ────────────────────────────────────────────── */
.sq .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-block: 26px 8px;
}
.sq .pagination-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.sq .pagination a,
.sq .pagination span {
    display: grid;
    place-items: center;
    min-width: 38px; height: 38px;
    padding-inline: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--sq-ink);
    background: var(--sq-surface);
    border: 1px solid var(--sq-rule);
}
.sq .pagination a:hover { color: #fff; background: var(--sq-red); border-color: var(--sq-red); }
.sq .pagination .is-active,
.sq .pagination [aria-current="page"] { color: #fff; background: var(--sq-black); border-color: var(--sq-black); }
.sq .pagination .is-disabled { opacity: .45; }
.sq .pagination-ellipsis { border: 0; background: transparent; }

/* ── الصفحات الثابتة ──────────────────────────────────────────── */
.sq .static-page__title {
    margin: 0 0 16px;
    padding-block-end: 12px;
    font-size: 24px;
    font-weight: 800;
    border-block-end: 2px solid var(--sq-red);
}

/* ── الشريط الجانبي المشترك (footer.php) ──────────────────────── */
.sq .layout-sidebar { min-width: 0; }

/* ================================================================
   14. إعادة تلوين الطبقة القديمة (main.css)
   main.css هو ثيم «دليل السعودية» الأخضر، وما زال يخدم صفحات لم تُنقل بعد
   (الموسوعة · المقالات · الأسواق · النتائج · الصفحات الثابتة). وهو مبنيّ على
   متغيّرات CSS، فإعادة تعريفها هنا — والملف يُحمَّل أخيراً — تصبغ تلك الصفحات
   بهوية سياق24 دفعةً واحدة دون لمس main.css نفسه.
   ================================================================ */
:root {
    --color-primary:       #bf1c14;
    --color-primary-light: #d8241b;
    --color-primary-dark:  #8c150f;
    --color-primary-xdark: #4a0a06;

    --green-dark:   #151515;
    --green-medium: #2b0605;
    --green-light:  #6d1009;

    --gradient-primary:   linear-gradient(135deg, #4a0a06 0%, #8c150f 60%, #bf1c14 100%);
    --gradient-primary-h: linear-gradient(to left, #000000 0%, #8c150f 55%, #bf1c14 100%);
    --gradient-hero-overlay: linear-gradient(to top, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .7) 50%, transparent 100%);

    /* اللكنة: أزرق الشعار السماوي — العنصر الملوّن الوحيد في الهوية */
    --color-accent:       #1fc4e8;
    --color-accent-light: #5bd8f2;
    --color-accent-dark:  #0d94b3;

    --color-bg:          #ffffff;
    --color-bg-alt:      #f4f4f4;
    --color-bg-card:     #ffffff;
    --color-bg-topbar:   #000000;
    --color-bg-header:   #8c150f;
    --color-bg-footer:   #000000;
    --color-bg-footer2:  #1a0303;

    --color-text:          #1a1a1a;
    --color-text-secondary:#5a5a5a;
    --color-text-light:    #8a8a8a;

    --color-border:       #e3e3e3;
    --color-border-light: #efefef;

    --color-link:       #bf1c14;
    --color-link-hover: #8c150f;

    --shadow-card:  0 1px 3px rgba(0, 0, 0, .07);
    --shadow-hover: 0 6px 18px rgba(0, 0, 0, .12);
}

/* المواضع التي كُتب فيها الأخضر صراحةً بدل المتغيّر */
.sq .cat-page-header {
    background-color: var(--sq-red);
    background-image: var(--sq-brand-fade);
    color: #fff;
    border-block-end: 0;
}
.sq .cat-page-header__title { color: #fff; }
.sq .cat-page-header__desc,
.sq .cat-page-header__count { color: rgba(255, 255, 255, .8); }
.sq .cat-page-header__icon { background: rgba(255, 255, 255, .15); color: #fff; }

.sq .read-also__header,
.sq .read-also__cat,
.sq .read-also__link:hover .read-also__title,
.sq .search-result-cat,
.sq .opinion-cat-label,
.sq .article-body a,
.sq .cat-feed-item__title a:hover,
.sq .related-card__title a:hover { color: var(--sq-red-text); }
.sq .read-also__dot { background: var(--sq-red); }
.sq .read-also__link:hover,
.sq .cat-feed-item:hover { background: rgba(191, 28, 20, .04); }
/* رقع خضراء شفافة بقيت مكتوبة صراحةً في main.css */
.sq .search-result-cat,
.sq .opinion-cat-label,
.sq .read-also__cat { background: rgba(191, 28, 20, .08); }
.sq .search-result-cat:hover,
.sq .opinion-cat-label:hover { background: rgba(191, 28, 20, .16); }
.sq .static-page__divider,
.sq .search-form-large__btn { background: var(--sq-brand-fade); }
.sq .pagination-link:hover,
.sq .pagination-link.is-active { color: #fff; background: var(--sq-red); border-color: var(--sq-red); }
.sq .back-to-top:hover { background: var(--sq-red); }
.sq .wiki-infobox-title,
.sq .writer-bio-box__avatar { background: var(--sq-brand-fade); color: #fff; }

/* الشريط الجانبي المشترك — نفس لغة لوحات الواجهة الرئيسية */
.sq .sidebar-widget {
    background: var(--sq-surface);
    border: 1px solid var(--sq-rule);
    border-radius: 0;
    box-shadow: none;
    margin-block-end: 18px;
}
.sq .sidebar-widget-title {
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    background: var(--sq-black);
    border-radius: 0;
}
.sq .sidebar-widget:nth-of-type(even) .sidebar-widget-title { background: var(--sq-red); }

/* theme.css يفرض ستّ قواعد بـ!important لصبغ عناصر main.css بالكحلي، ولا تُقهر
   بالأسبقية وحدها. تُقابَل هنا بالمثل — ولا يُعدَّل theme.css نفسه لأن بناءه
   (Tailwind) غير قابل لإعادة التوليد. */
.sq .sq-article-panel .article-info-box { background: transparent !important; }
.sq .op-card__thumb--placeholder,
.sq .op-feed-item__thumb--placeholder,
.sq .op-related-card__thumb--placeholder,
.sq .profile-header,
.sq .search-empty__reset,
.sq .search-form-large__btn,
.sq .static-page__divider { background: var(--sq-brand-fade) !important; }
.sq .read-also__header { border-bottom-color: var(--sq-red) !important; color: var(--sq-red-text) !important; }
.sq .read-also__dot { background-color: var(--sq-red-text) !important; }
.sq .read-also__cat { color: var(--sq-red-text) !important; }
.sq .read-also__link:hover .read-also__title { color: var(--sq-red-deep) !important; }

/* عناصر الشريط الجانبي المشترك */
.sq .sidebar-widget-body { padding: 4px 0; }
.sq .sidebar-thumb-item,
.sq .sidebar-opinion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-block-end: 1px solid var(--sq-rule-soft);
}
.sq .sidebar-thumb-item:last-child,
.sq .sidebar-opinion-item:last-child { border-block-end: 0; }
.sq .sidebar-thumb-item:hover,
.sq .sidebar-opinion-item:hover { background: var(--sq-surface-alt); }
.sq .sidebar-thumb-item__img { width: 60px; height: 60px; object-fit: cover; flex-shrink: 0; }
.sq .sidebar-thumb-item__img--placeholder { background: var(--sq-surface-alt); }
.sq .sidebar-thumb-item__title,
.sq .sidebar-opinion-item__title {
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--sq-ink);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.sq .sidebar-thumb-item:hover .sidebar-thumb-item__title,
.sq .sidebar-opinion-item:hover .sidebar-opinion-item__title { color: var(--sq-red-text); }
.sq .sidebar-opinion-item__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sq .sidebar-opinion-item__author { display: block; font-size: 12px; font-weight: 700; color: var(--sq-ink-soft); }
.sq .sidebar-empty { padding: 16px 14px; font-size: 13px; color: var(--sq-ink-muted); }

/* تمييز كلمة البحث: main.css يثبّت خلفية صفراء فاتحة، وفي الوضع الداكن يبقى
   النصّ فاتحاً فوقها. يُثبَّت لون النصّ داكناً ما دامت الخلفية فاتحة. */
.sq .search-highlight,
.sq mark { color: #1a1a1a; }