@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap'); @font-face{ font-family:'AlJazeeraArabic'; src:url('fonts/Al-Jazeera-Arabic-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; } @font-face{ font-family:'AlJazeeraArabic'; src:url('fonts/Al-Jazeera-Arabic-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'AlJazeeraArabic'; src:url('fonts/Al-Jazeera-Arabic-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:'AlJazeeraArabic'; src:url('fonts/Al-Jazeera-Arabic-Heavy.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; } :root{ --ink:#1c2321; --ink-soft:#4a5551; --paper:#faf7f0; --paper-raised:#ffffff; --line:#e2ddd0; --teal:#1d3f72; --teal-deep:#0a1d42; --gold:#c99a4a; --gold-soft:#f3e6c9; --maroon:#7a2e2a; --radius:2px; --font-aj:'AlJazeeraArabic','Tajawal',sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-aj); font-weight:400; direction:rtl; line-height:1.9; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1{font-family:var(--font-aj);font-weight:900;margin:0 0 .5em;color:var(--teal-deep)} h2,h3,h4{font-family:var(--font-aj);font-weight:700;margin:0 0 .5em;color:var(--teal-deep)} .wrap{max-width:1180px;margin:0 auto;padding:0 20px} /* هوامش الموبايل العامة (البند 2، مراجعة حية 2026-07-17): .wrap هي الحاوية العامة الوحيدة المسؤولة عن الهامش الأفقي بكل صفحة تقريبًا، وكانت 20px ثابتة على كل الأعراض بلا استثناء — واسعة نسبيًا على شاشات الموبايل الصغيرة (تُضيّق مساحة المحتوى الفعلية بنسبة أكبر من الأعراض الكبيرة). لا تُلغى هذي الـ20px إن كانت الشاشة كافية، فقط تضيق تحديدًا تحت 640px.*/ @media (max-width:640px){.wrap{padding:0 12px}} /* المحتوى الأساسي (نص المادة) بالوزن العادي، والمواد الثانوية/المرتبطة بوزن خفيف */ .article-body{font-weight:400} .related-chip, .tag-chip, .card .date, .row .meta, .count-line, .site-footer, .badge{font-weight:300} .brand, .card .title, .row a.title{font-weight:700} /* header */ .site-header{background:#fff;color:var(--ink);border-bottom:4px solid var(--gold)} /* padding-top/bottom فقط (لا شورت-هاند "padding:14px 0") — إصلاح 2026-07-17 (البند 2): الشورت-هاند القديم كان يصفّر padding-left/right للعنصر رغم أنه يحمل كلاس .wrap أيضًا (نفس العنصر بكلاسين "wrap top")، فيُلغي هامش .wrap الأفقي (20px، أو 12px بالموبايل) بتخصيص أعلى (.site-header .top أدق من .wrap وحدها) — الهيدر كان بلا أي هامش جانبي فعليًا على كل الأعراض، لا الموبايل فقط. */ .site-header .top{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;gap:16px;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-aj);font-size:1.5rem;font-weight:700;color:var(--teal-deep)} .brand-logo-home{height:52px;width:auto;display:block} .brand-logo-sub{height:40px;width:auto;display:block} .brand small{display:block;font-family:var(--font-aj);font-size:.62rem;letter-spacing:.12em;color:var(--ink-soft);font-weight:500;margin-top:2px} .brand-badge{width:38px;height:38px;border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--gold);flex-shrink:0} .search-box{flex:1 1 240px;max-width:420px;min-width:160px;display:flex;align-items:center;gap:8px} .search-box input{flex:1;min-width:0;padding:9px 14px;border:1px solid var(--line);border-radius:20px;font-family:inherit;font-size:.9rem} .advanced-search-link{flex-shrink:0;font-size:.78rem;color:var(--teal-deep);white-space:nowrap;text-decoration:underline;text-decoration-style:dotted} .internal-tag{font-size:.68rem;background:var(--maroon);color:#fff;padding:3px 10px;border-radius:12px;letter-spacing:.04em;white-space:nowrap} .search-box{position:relative} .search-results-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;left:0;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 26px rgba(0,0,0,.15);max-height:420px;overflow-y:auto;z-index:50} .search-result-item{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:.86rem;color:var(--ink)} .search-result-item:last-child{border-bottom:none} .search-result-item:hover{background:var(--paper)} .search-result-section{font-size:.72rem;color:var(--gold);white-space:nowrap;flex-shrink:0} .search-no-results{padding:14px;font-size:.85rem;color:var(--ink-soft);text-align:center} @media (max-width:640px){ .site-header .top{gap:10px} .brand{order:1} .internal-tag{order:2} .auth-logout{order:3} .search-box{order:4;flex:1 1 100%;max-width:none;min-width:0} } /* top nav strip */ .subnav{background:var(--teal);border-top:1px solid rgba(255,255,255,.08)} .subnav .wrap{display:flex;gap:22px;padding-top:9px;padding-bottom:9px;font-size:.85rem;flex-wrap:wrap;align-items:center} .subnav a{color:#e9ede9;opacity:.9} .subnav a:hover{opacity:1;text-decoration:underline} .subnav .nav-divider{width:1px;height:16px;background:rgba(255,255,255,.28);display:inline-block} .subnav .nav-dropdown{position:relative} .subnav .nav-dropdown summary{list-style:none;cursor:pointer;color:#e9ede9;opacity:.9} .subnav .nav-dropdown summary::-webkit-details-marker{display:none} .subnav .nav-dropdown summary::after{content:" ▾"} /* «في مثل هذا اليوم» وحده يحمل رابطًا داخل الـsummary: نصّه ينتقل مباشرة لصفحة اليوم المجمَّعة، والسهم وحده يفتح القائمة الفرعية — فيُوسَّع السهم قليلًا ليكون هدف نقر معقولًا. */ .subnav .otd-nav-dropdown summary{display:inline-flex;align-items:center;gap:2px} .subnav .otd-nav-dropdown summary a{color:inherit;opacity:1} .subnav .otd-nav-dropdown summary a:hover{text-decoration:underline} .subnav .otd-nav-dropdown summary::after{padding:0 6px;font-size:.9em} .subnav .nav-dropdown[open] summary{opacity:1;text-decoration:underline} .subnav .nav-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--teal-deep);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);min-width:170px;padding:6px;z-index:20;box-shadow:0 8px 20px rgba(0,0,0,.25)} .subnav .nav-dropdown-menu a{display:block;padding:8px 10px;font-size:.86rem;border-radius:var(--radius)} .subnav .nav-dropdown-menu a:hover{background:rgba(255,255,255,.08);text-decoration:none} /* على الشاشات الضيقة كانت القائمة المنسدلة تُرسى بـright:0 على عنصرها، فأي عنصر يقع قرب حافة الصف تخرج قائمته عن الشاشة (33px بقائمة «إحصائيات» قبل هذا التعديل، ثم انتقل الخلل لعنصر «في مثل هذا اليوم» بعد إضافته لأنه صار يشغل ذلك الموضع). الحل العام: على الجوال تُرسى كل القوائم لعرض شريط التنقّل كاملًا بدل عنصرها، فلا تخرج أي منها عن الشاشة. */ @media (max-width:640px){ .subnav .wrap{position:relative} .subnav .nav-dropdown{position:static} .subnav .nav-dropdown-menu{right:0;left:0;min-width:0} } /* layout */ .layout{display:grid;grid-template-columns:220px 1fr 240px;gap:26px;padding-top:28px;padding-bottom:60px;align-items:start} @media (max-width:940px){ .layout{grid-template-columns:1fr;display:flex;flex-direction:column} /* .main{order:1} وحدها لا تكفي: عمود flex بمحتوى واسع بطبيعته (جدول بيانات بلا table-layout: fixed) يتمدَّد لعرض محتواه الطبيعي رغم align-items:stretch الافتراضي، فيطفح كل الصفحة أفقيًا (اكتُشف فعليًا ببند 8، جولة 2026-07-18: صفحة جدول البيانات تحديدًا، عرض .main قِيس 836px على شاشة 390px). width:100% صريح يجبر العرض على عرض الحاوية الفعلي بدل عرض المحتوى. */ /* عُمِّم width:100% من .main وحدها لكل أبناء .layout (إصلاح 2026-08-21): نفس العلة الموصوفة أعلاه بالضبط، لكنها تصيب أعمدة السايدبار أيضًا لا .main فقط. .layout هنا عمود flex و align-items:start موروثة من القاعدة الأساسية، فأي ابن يُقاس بعرض محتواه لا بعرض الحاوية: .home-right-stack بالرئيسية قِيس 364px ثابتة على شاشات 360px و320px (بطاقة «المنصات والارتباطات» بداخله لا تتقلّص)، فطفحت الصفحة أفقيًا 16px و56px تباعًا. min-width:0 يسمح لعنصر الـflex بالنزول تحت عرض محتواه الأدنى. */ .layout > *{width:100%;min-width:0} .layout > .main{order:1} /* *:first-child/*:last-child لا .panel:first-child/.panel:last-child (تعميم 2026-07-25): الابن الأول/الأخير بـ.layout هو دومًا نفس عمودي السايدبار بصرف النظر عن الوسم — كانت الرئيسية تحتاج غلاف
واحدًا (لا