:root{
  /* ClearSky palette */
  --sky:#0EA5E9;--sky-bright:#38BDF8;--sky-soft:#7DD3FC;--sky-deep:#0284C7;--sky-ink:#075985;
  --navy:#0C2A45;--navy-dark:#08213A;--navy-mid:#14415F;
  --amber:#F59E0B;--amber-light:#FBBF24;--amber-dark:#D97706;
  --bg:#F4FAFE;--bg2:#FFFFFF;--bg3:#EAF5FC;
  --sky-pale:#E4F3FD;--sky-pale2:#D0EAFB;--sky-wash:#F7FCFF;
  --text-dark:#0C2A45;--text-mid:#52708A;--text-light:#93AAC0;
  --border:#DCEAF5;--border-soft:#E9F3FA;--white:#FFFFFF;
  --green:#15A34A;--green-soft:#DCFCE7;--red:#EF4444;--red-soft:#FEE2E2;--amber-soft:#FEF3C7;
  /* backward-compat aliases: old class names now ride the ClearSky palette */
  --steel:var(--navy);--steel-dark:var(--navy-dark);--steel-mid:var(--navy-mid);
  --orange:var(--sky);--orange-light:var(--sky-deep);--orange-pale:var(--sky-pale);--orange-pale2:var(--sky-pale2);
  --radius:12px;--radius-lg:20px;
  --shadow-xs:0 1px 3px rgba(12,42,69,0.05);--shadow-sm:0 4px 16px rgba(12,42,69,0.05);
  --shadow:0 10px 34px rgba(12,42,69,0.07);--shadow-lg:0 24px 64px rgba(12,42,69,0.10);--shadow-sky:0 18px 48px rgba(14,165,233,0.16);
  --max-w:760px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans Arabic',sans-serif;background:var(--bg);color:var(--text-dark);direction:rtl;line-height:1.8;font-size:1rem}

/* SITE NAV */
.site-nav{background:var(--steel-dark);padding:14px 5%;display:flex;align-items:center;justify-content:space-between}
.site-nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.snl-icon{width:32px;height:32px;background:var(--orange);display:flex;align-items:center;justify-content:center;clip-path:polygon(0 0,82% 0,100% 50%,82% 100%,0 100%)}
.snl-icon svg{width:16px;height:16px;fill:white}
.snl-text{font-family:'Readex Pro',sans-serif;font-size:.95rem;font-weight:800;color:white}
.site-nav-links{display:flex;gap:20px}
.site-nav-links a{font-size:.82rem;color:rgba(255,255,255,.60);text-decoration:none;transition:color .2s}
.site-nav-links a:hover{color:var(--orange-light)}
.site-nav-cta{background:var(--orange);color:white!important;padding:7px 16px;border-radius:var(--radius);font-weight:700!important}

/* LAYOUT */
.page-wrap{max-width:1100px;margin:0 auto;padding:48px 5%;display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}
@media(max-width:880px){.page-wrap{grid-template-columns:1fr}.sidebar{display:none}}

/* ARTICLE */
article{background:var(--bg2);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 16px rgba(12,42,69,.06)}

/* ARTICLE HEADER */
.art-header{background:var(--steel);padding:40px 40px 36px}
.art-breadcrumb{font-size:.75rem;color:rgba(255,255,255,.45);margin-bottom:14px}
.art-breadcrumb a{color:rgba(255,255,255,.55);text-decoration:none}
.art-breadcrumb span{margin:0 6px;opacity:.4}
.art-category{display:inline-flex;align-items:center;gap:6px;background:rgba(14,165,233,.2);border:1px solid rgba(14,165,233,.35);color:var(--orange-light);font-size:.72rem;font-weight:700;padding:4px 11px;border-radius:3px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.08em}
.art-h1{font-family:'Readex Pro',sans-serif;font-size:1.95rem;font-weight:900;color:white;line-height:1.35;margin-bottom:16px}
.art-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.art-meta-item{display:flex;align-items:center;gap:6px;font-size:.78rem;color:rgba(255,255,255,.50)}
.art-meta-dot{font-size:.5rem;opacity:.35}
.art-intro-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);padding:16px 18px;margin-top:20px}
.art-intro-box p{font-size:.88rem;color:rgba(255,255,255,.72);line-height:1.78}

/* ARTICLE BODY */
.art-body{padding:40px}

/* Typography */
.art-body h2{font-family:'Readex Pro',sans-serif;font-size:1.45rem;font-weight:800;color:var(--steel);margin:36px 0 14px;padding-bottom:10px;border-bottom:2px solid var(--orange-pale)}
.art-body h3{font-family:'Readex Pro',sans-serif;font-size:1.15rem;font-weight:700;color:var(--steel);margin:26px 0 10px}
.art-body p{font-size:.95rem;color:var(--text-mid);line-height:1.88;margin-bottom:18px}
.art-body p:last-child{margin-bottom:0}
.art-body strong{color:var(--steel);font-weight:700}
.art-body a{color:var(--orange);text-decoration:none;border-bottom:1px solid rgba(14,165,233,.3)}
.art-body a:hover{border-bottom-color:var(--orange)}

/* Lists */
.art-body ul,.art-body ol{margin:14px 0 20px 20px;display:flex;flex-direction:column;gap:8px}
.art-body li{font-size:.93rem;color:var(--text-mid);line-height:1.7;padding-right:8px}
.art-body ul li::marker{color:var(--orange);font-size:.8rem}
.art-body ol li::marker{color:var(--orange);font-weight:700}

/* Callout boxes */
.callout{border-radius:var(--radius-lg);padding:20px 22px;margin:28px 0}
.callout-problem{background:#fef2f2;border-right:4px solid #ef4444}
.callout-solution{background:var(--orange-pale);border-right:4px solid var(--orange)}
.callout-info{background:#eff6ff;border-right:4px solid #3b82f6}
.callout-tip{background:#f0fdf4;border-right:4px solid var(--green)}
.callout-title{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px}
.callout-problem .callout-title{color:#ef4444}
.callout-solution .callout-title{color:var(--orange)}
.callout-info .callout-title{color:#3b82f6}
.callout-tip .callout-title{color:var(--green)}
.callout p{font-size:.88rem;margin-bottom:0;color:var(--text-dark)}

/* Comparison table */
.compare-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.87rem;overflow:hidden;border-radius:var(--radius-lg)}
.compare-table thead tr{background:var(--steel)}
.compare-table th{padding:12px 16px;text-align:right;font-weight:700;color:white;font-size:.82rem}
.compare-table td{padding:11px 16px;border-bottom:1px solid var(--border);color:var(--text-mid)}
.compare-table tr:nth-child(even) td{background:var(--bg3)}
.compare-table tr:hover td{background:var(--orange-pale)}
.td-good{color:var(--green);font-weight:600}
.td-bad{color:#ef4444;font-weight:600}

/* Number cards */
.num-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}
.num-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 16px;text-align:center;transition:all .2s}
.num-card:hover{border-color:var(--orange);background:var(--orange-pale)}
.nc-num{font-family:'Readex Pro',sans-serif;font-size:1.8rem;font-weight:900;color:var(--orange);display:block;line-height:1;margin-bottom:6px}
.nc-label{font-size:.78rem;color:var(--text-mid);line-height:1.5}

/* Module cards */
.module-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0}
.module-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;gap:10px;align-items:flex-start;transition:all .2s}
.module-card:hover{border-color:var(--orange);background:var(--orange-pale)}
.mc-icon{font-size:1.2rem;flex-shrink:0;margin-top:1px}
.mc-title{font-size:.85rem;font-weight:700;color:var(--steel);margin-bottom:3px}
.mc-desc{font-size:.76rem;color:var(--text-mid);line-height:1.55}

/* FAQ section */
.faq-item{border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:10px;overflow:hidden}
.faq-q{padding:14px 18px;font-size:.9rem;font-weight:700;color:var(--steel);cursor:pointer;user-select:none;display:flex;justify-content:space-between;align-items:center;background:var(--bg3)}
.faq-q:hover{background:var(--orange-pale)}
.faq-a{padding:14px 18px;font-size:.88rem;color:var(--text-mid);line-height:1.78;border-top:1px solid var(--border)}

/* CTA block */
.art-cta{background:var(--steel);border-radius:var(--radius-lg);padding:32px;text-align:center;margin:40px 0 0}
.art-cta h3{font-family:'Readex Pro',sans-serif;font-size:1.3rem;font-weight:800;color:white;margin-bottom:10px}
.art-cta p{font-size:.88rem;color:rgba(255,255,255,.60);margin-bottom:20px;line-height:1.7}
.cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:white;color:var(--orange);padding:14px 36px;border-radius:var(--radius);font-weight:800;text-decoration:none;font-size:1rem;transition:all .2s;border:2px solid white;letter-spacing:.02em}
.cta-btn:hover{background:var(--orange-light);transform:translateY(-2px)}

/* SIDEBAR */
.sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:24px}
.sidebar-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.sc-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-light);padding:12px 16px;background:var(--bg3);border-bottom:1px solid var(--border)}
.sc-body{padding:14px 16px}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.toc-list a{font-size:.82rem;color:var(--text-mid);text-decoration:none;padding:5px 8px;border-radius:var(--radius);display:block;border-right:2px solid transparent;transition:all .2s;line-height:1.4}
.toc-list a:hover{background:var(--orange-pale);border-right-color:var(--orange);color:var(--steel)}
.related-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.related-item{border-bottom:1px solid var(--border);padding-bottom:8px}
.related-item:last-child{border-bottom:none;padding-bottom:0}
.related-item a{font-size:.8rem;color:var(--text-mid);text-decoration:none;line-height:1.5;display:block}
.related-item a:hover{color:var(--orange)}
.related-item span{font-size:.7rem;color:var(--text-light);margin-top:3px;display:block}
.sidebar-cta{background:var(--orange);border-radius:var(--radius-lg);padding:20px 16px;text-align:center}
.sidebar-cta h4{font-family:'Readex Pro',sans-serif;font-size:1rem;font-weight:800;color:white;margin-bottom:8px}
.sidebar-cta p{font-size:.78rem;color:rgba(255,255,255,.70);margin-bottom:14px;line-height:1.6}
.sidebar-cta a{display:block;background:white;color:var(--orange);padding:10px;border-radius:var(--radius);font-weight:700;font-size:.85rem;text-decoration:none}

/* FOOTER */
.site-footer{background:var(--steel-dark);padding:32px 5%;margin-top:56px}
.sf-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.sf-copy{font-size:.75rem;color:rgba(255,255,255,.35)}
.sf-links{display:flex;gap:16px}
.sf-links a{font-size:.75rem;color:rgba(255,255,255,.40);text-decoration:none}

::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--orange);border-radius:2px}

/* ===== القائمة العلوية الموحدة ===== */
.site-nav-links{display:flex;gap:2px;align-items:center}
.snl-link{font-size:.82rem;color:rgba(255,255,255,.6);text-decoration:none;padding:7px 11px;border-radius:var(--radius);transition:all .2s;white-space:nowrap}
.snl-link:hover{color:var(--orange-light)}
.snl-dropdown{position:relative}
.snl-dropdown-toggle{font-size:.82rem;color:rgba(255,255,255,.6)!important;text-decoration:none;padding:7px 11px;border-radius:var(--radius);cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:all .2s;border-bottom:none!important}
.snl-dropdown-toggle::after{content:"▾";font-size:.65rem;opacity:.65}
.snl-dropdown:hover .snl-dropdown-toggle,.snl-dropdown:focus-within .snl-dropdown-toggle{color:var(--orange-light)!important}
.snl-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--steel);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:8px;min-width:240px;box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(6px);transition:all .2s;z-index:200}
.snl-dropdown:hover .snl-menu,.snl-dropdown:focus-within .snl-menu{opacity:1;visibility:visible;transform:translateY(0)}
.snl-menu a{display:block;font-size:.81rem;color:rgba(255,255,255,.7)!important;text-decoration:none;padding:9px 12px;border-radius:var(--radius);transition:all .2s;line-height:1.4;border-bottom:none!important}
.snl-menu a:hover{background:rgba(14,165,233,.15);color:var(--orange-light)!important}
@media(max-width:920px){.snl-mobile-hide{display:none}}
@media(max-width:680px){.snl-mobile-hide-2{display:none}.site-nav-links{gap:0}.snl-link,.snl-dropdown-toggle{padding:7px 8px;font-size:.78rem}.snl-menu{min-width:200px}}

/* ══════════════════════════════════════
   MEGA MENU (الحلول) + BLOG CATS — added for WP unified nav
══════════════════════════════════════ */
.snl-mega .snl-menu{
  min-width:560px; padding:16px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px 22px;
}
.snl-mega-col{display:flex;flex-direction:column;gap:2px}
.snl-mega-label{
  font-size:.66rem; font-weight:700; letter-spacing:.02em;
  color:var(--orange-light); padding:6px 12px 4px; opacity:.85;
  text-transform:none;
}
.snl-mega .snl-menu a{padding:7px 12px}
.snl-blog .snl-menu{min-width:260px}
.snl-blog .snl-menu a .snl-emoji{margin-inline-end:7px}
/* current-page highlight */
.snl-link.current, .snl-dropdown-toggle.current{color:var(--orange-light)!important}
.snl-menu a.current{background:rgba(14,165,233,.15);color:var(--orange-light)!important}
@media(max-width:920px){
  .snl-mega .snl-menu{min-width:280px;grid-template-columns:1fr}
}

/* ClearSky: heading font */
h1,h2,h3,.art-h1,.display{font-family:'Readex Pro','IBM Plex Sans Arabic',sans-serif;} /* builderp-heading-font */

/* ═══ ClearSky: light article chrome (applies to all 60 posts) ═══ */
.art-header{ background:linear-gradient(170deg,#FFFFFF 0%,var(--sky-wash) 100%) !important; border-bottom:1px solid var(--border-soft); }
.art-breadcrumb{ color:var(--text-light) !important; }
.art-breadcrumb a{ color:var(--text-mid) !important; }
.art-category{ background:var(--sky-pale) !important; border-color:var(--sky-pale2) !important; color:var(--sky-deep) !important; }
.art-h1{ color:var(--navy) !important; }
.art-meta-item{ color:var(--text-mid) !important; }
.art-intro-box{ background:var(--sky-wash) !important; border:1px solid var(--border-soft) !important; }
.art-intro-box p{ color:var(--text-mid) !important; }
.art-cta{ background:linear-gradient(160deg,var(--sky-wash) 0%,var(--sky-pale) 55%,#CFEBFB 100%) !important; border:1px solid var(--border-soft); }
.art-cta h3{ color:var(--navy) !important; }
.art-cta p{ color:var(--text-mid) !important; }
.compare-table thead tr{ background:linear-gradient(120deg,var(--sky-deep),var(--sky)) !important; }