/* Shared styles for the Masar PMP blog. Same colours and fonts as the main page. */
:root{
  --bg:#F3F6F4;--surface:#FFFFFF;--ink:#10202C;--muted:#516270;--line:#D6E0DB;
  --accent:#0A6E53;--accent-ink:#FFFFFF;--accent-soft:#E1F0EA;--gold:#B8871F;--gold-soft:#F6ECD6;
  --people:#0A6E53;--process:#2C5D8A;--business:#B8871F;
  --font-display:"Reem Kufi","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --font-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1419;--surface:#122029;--ink:#E5EEF0;--muted:#9DB0B9;--line:#24363F;
    --accent:#3CC59A;--accent-ink:#06231A;--accent-soft:#143B31;--gold:#E2B654;--gold-soft:#3A3020;
    --people:#3CC59A;--process:#6FA7DA;--business:#E2B654;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1419;--surface:#122029;--ink:#E5EEF0;--muted:#9DB0B9;--line:#24363F;
  --accent:#3CC59A;--accent-ink:#06231A;--accent-soft:#143B31;--gold:#E2B654;--gold-soft:#3A3020;
  --people:#3CC59A;--process:#6FA7DA;--business:#E2B654;color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.9;direction:rtl}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--font-display);line-height:1.35;text-wrap:balance;margin:0}
p{margin:0}
.en{font-family:var(--font-body);direction:ltr;unicode-bidi:isolate}
.eyebrow{font-size:.85rem;font-weight:600;color:var(--accent)}

header.site{border-bottom:1px solid var(--line);background:var(--bg)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink)}
.brand b{font-family:var(--font-display);font-size:1.6rem;font-weight:700}
.brand span{font-size:.85rem;color:var(--muted);font-weight:600}
nav.top{display:flex;gap:18px;flex-wrap:wrap}
nav.top a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.95rem}
nav.top a:hover,nav.top a:focus-visible,nav.top a[aria-current]{color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;border-radius:999px;padding:12px 22px;border:1.5px solid transparent;cursor:pointer;text-decoration:none}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}

/* blog list */
.blog-head{padding-block:48px 24px;display:grid;gap:10px;max-width:44em}
.blog-head h1{font-size:clamp(1.9rem,4.5vw,2.8rem)}
.blog-head p{color:var(--muted)}
.posts{display:grid;gap:16px;max-width:820px;padding-bottom:56px}
.post-card{display:grid;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;text-decoration:none;color:var(--ink)}
.post-card:hover,.post-card:focus-visible{border-color:var(--accent)}
.post-card h2{font-size:1.3rem}
.post-card p{color:var(--muted)}
.post-card .meta{font-size:.85rem;color:var(--muted)}
.post-card .more{color:var(--accent);font-weight:600;font-size:.95rem}

/* article */
article.post{max-width:760px;margin:0 auto;padding-block:40px 56px}
.crumbs{font-size:.88rem;color:var(--muted)}
.crumbs a{color:var(--muted)}
article.post h1{font-size:clamp(1.8rem,4.6vw,2.7rem);margin-top:14px}
.post-meta{margin-top:12px;font-size:.88rem;color:var(--muted)}
.summary{margin-top:24px;padding:18px 20px;border-radius:var(--radius);background:var(--accent-soft)}
.summary b{display:block;margin-bottom:6px}
.summary ul{margin:0;padding-inline-start:1.2em}
article.post h2{font-size:1.5rem;margin-top:40px;padding-top:16px;border-top:2px solid var(--ink)}
article.post h3{font-size:1.15rem;margin-top:24px}
article.post p{margin-top:14px}
article.post ul,article.post ol{margin:14px 0 0;padding-inline-start:1.3em}
article.post li{margin-top:6px}
.table-scroll{overflow-x:auto;margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{padding:10px 14px;text-align:start;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
th{font-weight:600;background:var(--bg)}
tr:last-child td{border-bottom:0}
td.up{color:var(--accent);font-weight:700}
.bar{display:flex;height:14px;border-radius:999px;overflow:hidden;margin-top:18px}
.bar i{display:block;height:100%}
.bar-key{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:.88rem;color:var(--muted)}
.bar-key span{display:inline-flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:3px;flex:none}
.note{margin-top:18px;padding:14px 16px;border-radius:var(--radius);background:var(--gold-soft);font-size:.95rem}
.cta{margin-top:40px;padding:24px;border-radius:14px;background:var(--surface);border:2px solid var(--accent);display:grid;gap:12px}
.cta h2{border:0;margin:0;padding:0;font-size:1.35rem}
.cta p{margin:0;color:var(--muted)}
.cta .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.related{margin-top:40px}
.related h2{font-size:1.2rem}
.related ul{list-style:none;padding:0;display:grid;gap:8px}
.related li{margin:0}
.related a{font-weight:600}
.sources{margin-top:32px;font-size:.88rem;color:var(--muted)}

footer{border-top:1px solid var(--line);padding-block:28px;font-size:.85rem;color:var(--muted);line-height:1.75}
footer .wrap{display:grid;gap:8px}
@media (max-width:520px){nav.top{gap:12px}body{font-size:16px}table{font-size:.88rem}th,td{padding:9px 8px}}