/*
Theme Name: Nabda Economic
Theme URI: https://example.com/nabda-economic
Author: Bolt
Author URI: https://bolt.new
Description: A modern Bloomberg-style Arabic news theme with a clean white canvas, strong black typography, sharp corners, no shadows, and a single red accent. RTL-ready, Cairo font, live clock, market ticker, and multi-column news layouts.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nabda
Tags: news, rtl-language-support, two-columns, right-sidebar, custom-menu, featured-images, translation-ready
*/

/* ==========================================
   1. توحيد الخط على Cairo في كل الموقع
   ملاحظة: تم حذف @import لأنه يعمل كطلب شبكة إضافي
   ومحمّل بشكل تسلسلي (render-blocking) ويبطئ ظهور
   الصفحة أمام الزوار وبوتات جوجل. الخط الآن يُحمّل
   مرة واحدة فقط عبر wp_enqueue_style في functions.php
   (مع preconnect لتسريع الاتصال بخوادم الخطوط).
   ========================================== */
html, body {
    font-family: 'Alexandria', sans-serif;
}
input, button, select, textarea {
    font-family: 'Alexandria', sans-serif;
}

:root {
    --bbg-bg: #ffffff;
    --bbg-text: #1a1a1a;
    --bbg-muted: #6e6e6e;
    --bbg-accent: #c8102e;
    --bbg-border: #e2e2e2;
    --bbg-dark: #111111;
}

/* ==========================================================
   Reset & base
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--bbg-bg);
    color: var(--bbg-text);
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--bbg-accent); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    line-height: 1.85;
    color: var(--bbg-text);
}

::selection { background-color: var(--bbg-accent); color: #fff; }

/* ==========================================================
   Layout helpers
   ========================================================== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }

.section-pad { padding: 2rem 0; }

.section-title {
    border-bottom: 2px solid var(--bbg-accent);
    padding-bottom: 0.5rem;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bbg-text);
    margin-bottom: 1.25rem;
    display: inline-block;
}

.cat-tag {
    color: var(--bbg-accent);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-line {
    font-size: 12px;
    color: var(--bbg-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.meta-dot { width: 4px; height: 4px; background: #cfcfcf; border-radius: 50%; display: inline-block; }

/* ==========================================================
   Header & Navigation
   ========================================================== */
.site-header { position: sticky; top: 0; z-index: 50; }

/* تصغير الهيدر تلقائياً أثناء السكرول */
.site-header,
.site-header .utility-bar,
.site-header .utility-bar .container {
    transition: all 0.25s ease;
}

.site-header.is-scrolled .utility-bar { height: 0 !important; overflow: hidden; }
.site-header.is-scrolled .utility-bar .container { height: 0 !important; padding: 0 !important; opacity: 0; }

.utility-bar {
    background: #000;
    color: #fff;
}
.utility-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 26px;
    font-size: 10px;
}
.utility-bar .date { font-weight: 600; color: #d0d0d0; letter-spacing: 0.5px; }
.utility-bar .clock { color: #9a9a9a; }
.utility-bar .links { display: flex; gap: 1rem; color: #9a9a9a; }

/* ضبط اللوجو والصف الهيدر */
.brand-row { background: #fff; border-bottom: 1px solid var(--bbg-border); }
.brand-row .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    direction: rtl !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.brand-row .logo {
    display: flex !important;
    align-items: center !important;
    order: 1 !important;
    margin-left: 30px !important;
    gap: 4px;
}
.brand-row .logo .a { font-size: 24px; font-weight: 800; color: #000; }
.brand-row .logo .b { font-size: 24px; font-weight: 300; color: var(--bbg-accent); }

.brand-row .logo img,
.brand-row .custom-logo {
    max-height: 55px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.brand-row .quick-links {
    order: 2 !important;
    display: none;
    gap: 20px !important;
    margin-left: auto !important;
}
.brand-row .quick-links a {
    text-decoration: none !important;
    font-weight: bold !important;
    color: inherit !important;
    font-size: 13px;
}
.brand-row .quick-links a:hover { color: var(--bbg-accent) !important; }

.brand-row .search-btn { order: 3 !important; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #444; cursor: pointer; background: none; border: none; }
.brand-row .search-btn:hover { color: var(--bbg-accent); }
.brand-row .menu-toggle { order: 4 !important; display: none; background: none; border: none; cursor: pointer; padding: 8px; color: #222; }

/* شريط القائمة الرئيسية بالأحمر */
.main-nav {
    background-color: #a80000 !important;
    border-bottom: 2px solid #800000 !important;
    display: none;
}

.main-nav .container { display: flex; align-items: center; min-height: 30px; gap: 4px; }
.main-nav .container ul {
    display: flex !important;
    align-items: center !important;
    gap: 25px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    direction: rtl !important;
}

.main-nav .container ul li a,
.main-nav a {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    display: block !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
}

.main-nav .container ul li a:hover,
.main-nav a:hover {
    background-color: #800000 !important;
    color: #ffffff !important;
}

/* الشريط الإخباري المميز */
.trending-strip { background: #000; border-top: 1px solid #2a2a2a; display: none; }
.trending-strip .container { display: flex; align-items: center; gap: 12px; padding-top: 6px; padding-bottom: 6px; }
.trending-strip .label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--bbg-accent); white-space: nowrap; border-top: none !important; box-shadow: none !important; }
.trending-strip .label::before, .trending-strip .label::after { display: none !important; content: none !important; }
.trending-strip .sep { width: 1px; height: 12px; background: #555; }
.trending-strip .items { display: flex; gap: 20px; overflow: hidden; flex: 1; }
.trending-strip .items a { white-space: nowrap; font-size: 12px; color: #c0c0c0; }
.trending-strip .items a:hover { color: #fff; }
.trending-strip .items .num { font-weight: 700; color: #777; }

@media (min-width: 1024px) {
    .main-nav { display: block; }
    .trending-strip { display: block; }
    .brand-row .quick-links { display: flex !important; }
    .brand-row .menu-toggle { display: none; }
}

.mobile-menu { background: #000; display: none; }
.mobile-menu a { display: block; padding: 12px 16px; font-size: 14px; font-weight: 600; color: #d0d0d0; border-bottom: 1px solid #2a2a2a; }
.mobile-menu a:hover, .mobile-menu .current-menu-item > a { color: #fff; }
.mobile-menu.open { display: block; }

/* ==========================================================
   Market ticker
   ========================================================== */
.ticker-bar { background: #fafafa; border-bottom: 1px solid var(--bbg-border); }
.ticker-bar .container { display: flex; align-items: center; gap: 24px; padding-top: 10px; padding-bottom: 10px; overflow-x: auto; }
.ticker-item { display: flex; align-items: center; gap: 8px; font-size: 12px; white-space: nowrap; }
.ticker-item .name { font-weight: 700; color: #111; }
.ticker-item .val { color: #444; }
.ticker-item .chg.up { color: #059669; font-weight: 600; }
.ticker-item .chg.down { color: var(--bbg-accent); font-weight: 600; }

/* ==========================================================
   Hero / featured
   ========================================================== */
.hero { border-bottom: 1px solid var(--bbg-border); }
.hero .container { display: grid; grid-template-columns: 1fr; gap: 0; padding-top: 24px; padding-bottom: 24px; }
@media (min-width: 1024px) {
    .hero .container { grid-template-columns: 2fr 1fr; }
    .hero-lead { border-right: 1px solid var(--bbg-border); padding-left: 24px; }
}
.hero-lead-img { aspect-ratio: 16/9; overflow: hidden; background: #f0f0f0; }
.hero-lead-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hero-lead:hover .hero-lead-img img { transform: scale(1.02); }
.hero-lead .cat-tag { display: inline-block; margin-top: 16px; }
.hero-lead h1 { margin-top: 8px; font-size: 24px; line-height: 1.85; }
@media (min-width: 640px) { .hero-lead h1 { font-size: 30px; } }
@media (min-width: 1024px) { .hero-lead h1 { font-size: 36px; } }
.hero-lead p { margin-top: 12px; max-width: 640px; font-size: 15px; line-height: 1.8; color: #555; }
.hero-lead .meta-line { margin-top: 12px; }

.hero-side h2 { border-bottom: 2px solid var(--bbg-accent); padding-bottom: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.hero-side .item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bbg-border); }
.hero-side .item:first-child { padding-top: 0; }
.hero-side .thumb { width: 96px; height: 64px; flex-shrink: 0; overflow: hidden; background: #f0f0f0; }
.hero-side .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hero-side .item:hover .thumb img { transform: scale(1.02); }
.hero-side .item h3 { font-size: 14px; font-weight: 700; line-height: 1.85; }
.hero-side .item:hover h3 { text-decoration: underline; }
.hero-side .item .meta-line { margin-top: 4px; }

/* ==========================================================
   Main grid + sidebar
   ========================================================== */
.body-grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 32px 0; }
@media (min-width: 1024px) {
    .body-grid { grid-template-columns: 2fr 1fr; }
    .body-main { border-right: 1px solid var(--bbg-border); padding-left: 32px; }
}

.cards-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 640px) { .cards-grid { grid-template-columns: 1fr 1fr; } }

/* Article card */
.card { display: block; }
.card-img { aspect-ratio: 16/10; overflow: hidden; background: #f0f0f0; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .card-img img { transform: scale(1.02); }
.card-body { padding-top: 12px; }
.card-body .cat-tag { display: inline-block; }
.card-body h3 { margin-top: 6px; font-size: 16px; font-weight: 700; line-height: 1.85; }
.card:hover .card-body h3 { text-decoration: underline; }
.card-body .excerpt { margin-top: 6px; font-size: 13px; line-height: 1.6; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-body .meta-line { margin-top: 8px; }

/* Horizontal card (editor picks) */
.card-h { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--bbg-border); }
.card-h:last-child { border-bottom: 0; }
.card-h .thumb { width: 112px; height: 80px; flex-shrink: 0; overflow: hidden; background: #f0f0f0; }
.card-h .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card-h:hover .thumb img { transform: scale(1.02); }
.card-h .cat-tag { display: inline-block; margin-bottom: 4px; }
.card-h h3 { font-size: 14px; font-weight: 700; line-height: 1.85; }
.card-h:hover h3 { text-decoration: underline; }
.card-h .meta-line { margin-top: 4px; }

/* Compact list item */
.card-compact { display: flex; gap: 12px; padding: 10px 0; }
.card-compact .bullet { margin-top: 4px; font-size: 18px; font-weight: 800; color: #ccc; }
.card-compact h3 { font-size: 13px; font-weight: 600; line-height: 1.85; }
.card-compact:hover h3 { text-decoration: underline; }
.card-compact .meta-line { margin-top: 2px; }

/* Most read numbered */
.most-read { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--bbg-border); }
.most-read:first-child { padding-top: 0; }
.most-read .rank { font-size: 22px; font-weight: 800; color: #ccc; line-height: 1; }
.most-read h3 { font-size: 14px; font-weight: 700; line-height: 1.85; }
.most-read:hover h3 { text-decoration: underline; }
.most-read .meta-line { margin-top: 4px; }

/* Live clock widget */
.live-clock { background: #000; color: #fff; padding: 20px; }
.live-clock .label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--bbg-accent); }
.live-clock .date { font-size: 13px; color: #c0c0c0; margin-top: 4px; }
.live-clock .time { font-size: 30px; font-weight: 700; margin-top: 4px; }
.live-clock .tz { font-size: 12px; color: #888; margin-top: 8px; }

/* ==========================================================
   Category banner
   ========================================================== */
.page-banner { background: #fafafa; border-bottom: 1px solid var(--bbg-border); }
.page-banner .container { padding-top: 32px; padding-bottom: 32px; }
.single .page-banner .container { padding-top: 14px; padding-bottom: 14px; }
.breadcrumb { font-size: 11px; color: #888; display: flex; gap: 8px; align-items: center; }
.breadcrumb a:hover { color: #111; }
.page-banner h1 { margin-top: 12px; font-size: 30px; }
@media (min-width: 640px) { .page-banner h1 { font-size: 36px; } }
.page-banner .desc { margin-top: 8px; font-size: 14px; color: #666; }

/* Category chips */
.chips-bar { border-bottom: 1px solid var(--bbg-border); }
.chips-bar .container { display: flex; gap: 8px; padding-top: 12px; padding-bottom: 12px; overflow-x: auto; }
.chip { flex-shrink: 0; border: 1px solid #ccc; padding: 4px 12px; font-size: 12px; font-weight: 600; color: #444; }
.chip:hover, .chip.active { border-color: var(--bbg-accent); color: var(--bbg-accent); }

/* Lead block on listing */
.lead-block { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--bbg-border); }
.lead-block .grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1024px) { .lead-block .grid { grid-template-columns: 1fr 1fr; } }
.lead-block .text .cat-tag { display: inline-block; }
.lead-block .text h2 { margin-top: 8px; font-size: 24px; font-weight: 800; line-height: 1.85; }
.lead-block .text p { margin-top: 12px; font-size: 15px; line-height: 1.8; color: #555; }
.lead-block .text .meta-line { margin-top: 16px; }

/* ==========================================================
   Single article
   ========================================================== */
.article-wrap { max-width: 800px; margin: 0 auto; padding: 32px 1rem; }
@media (min-width: 640px) { .article-wrap { padding: 32px 1.5rem; } }

.article-meta-top { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: #777; }
.article-meta-top .date { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #444; }

.article-wrap h1 { font-size: 30px; line-height: 1.85; }
@media (min-width: 640px) { .article-wrap h1 { font-size: 36px; } }

.article-excerpt { margin-top: 16px; border-right: 4px solid var(--bbg-accent); padding-right: 16px; font-size: 17px; font-weight: 500; line-height: 2; color: #444; }

.article-img { margin-top: 24px; }
.article-img .frame { aspect-ratio: 16/9; overflow: hidden; background: #f0f0f0; }
.article-img img { width: 100%; height: 100%; object-fit: cover; }
.article-img .caption { margin-top: 8px; font-size: 11px; color: #888; }

.article-body { margin-top: 32px; }
.article-body p { font-size: 17px; line-height: 2.25; color: #333; margin-bottom: 24px; }

/* إلغاء تكبير وأحمرار الحرف الأول في المقالات (Drop Cap) بالكامل */
.article-body p:first-child::first-letter,
.single-post .entry-content p:first-of-type::first-letter,
.entry-content p:first-of-type::first-letter,
.has-drop-cap:not(:focus)::first-letter,
p.has-drop-cap::first-letter {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

.article-actions { margin-top: 40px; padding: 16px 0; border-top: 1px solid var(--bbg-border); border-bottom: 1px solid var(--bbg-border); display: flex; align-items: center; justify-content: space-between; }
.article-actions a { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #444; }
.article-actions a:hover { color: var(--bbg-accent); }
.article-actions .acts { display: flex; gap: 16px; }
.article-actions .acts button { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #777; background: none; border: none; cursor: pointer; }
.article-actions .acts button:hover { color: #111; }

/* Related */
.related { border-top: 1px solid var(--bbg-border); background: #fafafa; }
.related .container { max-width: 1200px; padding: 40px 1rem; }
@media (min-width: 640px) { .related .container { padding: 40px 1.5rem; } }
.related .section-title { margin-bottom: 24px; }
.related .cards-grid { gap: 32px; }
@media (min-width: 640px) { .related .cards-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .related .cards-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* ==========================================================
   Pagination
   ========================================================== */
.pagination { display: flex; gap: 8px; margin-top: 40px; justify-content: center; }
.pagination .page-numbers {
    background: transparent; border: 1px solid var(--bbg-border); padding: 8px 14px;
    font-size: 13px; font-weight: 600; color: #333;
}
.pagination .page-numbers.current { background: var(--bbg-accent); border-color: var(--bbg-accent); color: #fff; }
.pagination .page-numbers:hover:not(.current) { border-color: #999; }

/* ==========================================================
   Footer
   ========================================================== */
.site-footer { border-top: 4px solid var(--bbg-accent); background: #000; color: #9a9a9a; margin-top: 64px; }
.site-footer .container { padding: 48px 1rem; }
@media (min-width: 640px) { .site-footer .container { padding: 48px 1.5rem; } }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-logo .a { font-size: 24px; font-weight: 800; color: #fff; }
.footer-logo .b { font-size: 24px; font-weight: 300; color: var(--bbg-accent); }
.footer-about { margin-top: 16px; max-width: 440px; font-size: 13px; line-height: 1.8; }
.footer-col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #fff; margin-bottom: 16px; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 13px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid #2a2a2a; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: space-between; }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; } }
.footer-bottom p { font-size: 12px; color: #666; }

/* ==========================================================
   404
   ========================================================== */
.error-404 { text-align: center; padding: 80px 1rem; }
.error-404 h1 { font-size: 72px; color: var(--bbg-accent); }
.error-404 p { margin-top: 16px; font-size: 18px; color: #555; }
.error-404 a { display: inline-block; margin-top: 24px; padding: 10px 24px; background: #000; color: #fff; font-size: 14px; font-weight: 600; }

/* ==========================================================
   WordPress core classes
   ========================================================== */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: left; margin: 0 0 16px 16px; }
.alignleft { float: right; margin: 0 16px 16px 0; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 12px; color: #888; margin-top: 4px; }
.screen-reader-text { clip: rect(1px,1px,1px,1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }
.sticky { display: block; }
.bypostauthor { display: block; }

/* ==========================================
   تنسيقات رأس قسم أسواق المال والمزيد
   ========================================== */
.section-header-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #a80000 !important;
    padding-bottom: 8px !important;
}
.section-header-flex .section-title {
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
}
.section-header-flex .view-all-link {
    color: #a80000 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
}
.section-header-flex .view-all-link:hover {
    opacity: 0.8 !important;
}

/* تنسيق قسم إنفوجرافيك لإظهار الصورة كاملة دون قص */
.infographic-section .cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.infographic-section .card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0f172a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.infographic-section .card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.infographic-section .card:hover .card-img img {
    transform: scale(1.015);
}

/* التجاوب مع الشاشات الصغيرة */
@media (max-width: 992px) {
    .infographic-section .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 576px) {
    .infographic-section .cards-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ضبط الحاوية الرئيسية للهيدر */
.brand-row .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

/* الشعار يمين */
.brand-row .logo {
    order: 1;
}

/* مجموعة أقصى اليسار */
.header-left-group {
    order: 2;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: auto;
    flex-shrink: 0;
}

/* مقاس إعلان الهيدر الجديد بعرض 650px */
.header-banner-ad {
    width: 650px;
    height: 80px;
    flex-shrink: 0;
}

.header-banner-ad a,
.header-banner-ad img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}

/* إخفاء الإعلان تماماً على الموبايل والشاشات الصغيرة */
@media (max-width: 992px) {
    .header-banner-ad {
        display: none !important;
    }
}
@media screen and (max-width: 992px) {
    .header-banner-ad {
        display: none !important;
    }
}

/* ==========================================================
   حل مشكلة تداخل أسطر العناوين والنقاط (لجميع الشاشات)
   ========================================================== */
h1, h2, h3, h4, h5, h6,
.article-wrap h1,
.hero-lead h1,
.card-body h3,
.card-h h3,
.hero-side .item h3,
.most-read h3 {
    line-height: 1.85 !important; /* مساحة تنفس كافية لمنع تداخل التشكيل والنقاط مع خط الإسكندرية */
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* ضبط إضافي مريح لعنوان المقال الرئيسي داخل صفحة المقال */
.article-wrap h1 {
    margin-bottom: 16px !important;
}
/* توحيد محاذاة وسوم التصنيفات والشارات */
.hero-lead div[style*="display: flex"],
.card-body div[style*="display: flex"],
.technology-section div[style*="display: flex"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* توحيد الشكل والارتفاع لعنصر الشارات والتصنيف */
.cat-tag, 
.badge,
.report-badge { 
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 22px !important; /* ارتفاع موحد للطرفين */
    line-height: 1 !important;
    padding: 0 8px !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}

/* تكبير البادجات (حصري / خاص / تقارير) بس، من غير ما تنزل سطر لوحدها */
.nabda-badges-container .badge {
    height: 26px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
}

/* ==========================================================
   كلاسات مساعدة (Utility classes) - المرحلة الأولى من تنظيف
   الـ inline styles في front-page.php. كل كلاس هنا بديل مباشر
   لنمط style="" كان متكرر أكتر من مرة، بنفس القيم بالظبط
   (منقولة زي ما هي، من غير أي تغيير في القيم أو التصميم).
   ========================================================== */
.nabda-mb-0 { margin-bottom: 0; }
.nabda-fill { width: 100%; height: 100%; }
.nabda-section-gap { margin-top: 34px; margin-bottom: 34px; }
.nabda-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.nabda-meta-row-sm {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.nabda-section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.nabda-fill-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}
.nabda-empty-state {
    text-align: center;
    margin: 40px 0;
}
.nabda-ad-slot-728 {
    display: inline-block;
    width: 100%;
    max-width: 728px;
    height: 90px;
}
.nabda-ad-label {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================================
   كلاسات مساعدة - الدفعة الثانية
   ========================================================== */
.nabda-empty-grid-msg { grid-column: 1 / -1; color: #777; }
.nabda-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nabda-empty-msg-full { width: 100%; text-align: center; color: #777; }
.nabda-mt-40 { margin-top: 40px; }
.nabda-cat-label-red { font-size: 12px; color: #dc2626; display: block; font-weight: 600; }
.nabda-flex-wrap-gap20 { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; box-sizing: border-box; }
.nabda-section-title-red { color: #dc2626; margin: 0; font-size: 22px; font-weight: bold; }
.nabda-muted-text { color: #777; font-size: 14px; }