/* MIHHAR — «المعرفة المهنية» (4.19.0). Blog screens only. Mobile-first, RTL.
   Tokens mirror the platform's tokens.css (same values), scoped to the blog. */

body.mihhar-blog { background: #080b12; }

/* The theme's wrappers around the blog root: full width, no side padding
   (same technique as the platform's owned pages). */
body.mihhar-blog :has(#mihhar-blog-root) {
  max-width: none; width: auto; min-width: 0; padding-inline: 0; margin-inline: 0; float: none;
}
@supports not selector(:has(*)) {
  body.mihhar-blog :is(#content, #primary, #main, .site-content, .ast-container, .site-main, .content-area) {
    max-width: none; width: auto; padding-inline: 0; margin-inline: 0; float: none;
  }
}

.mh-blog {
  --b-bg: #080b12; --b-surface: #0f131c; --b-raise: #151b26; --b-line: rgba(255,255,255,.08);
  --b-text: #eef2f8; --b-text-2: #a9b4c7; --b-text-3: #7c889c;
  --b-accent: #4f8cff; --b-gold: #ebb824; --b-r: 16px; --b-r-sm: 10px;
  font-family: "Tajawal", "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  color: var(--b-text); background: var(--b-bg); direction: rtl; text-align: start;
  line-height: 1.85; -webkit-font-smoothing: antialiased;
}
.mh-blog *, .mh-blog *::before, .mh-blog *::after { box-sizing: border-box; }
.mh-blog a { color: inherit; text-decoration: none; }
/* The theme colours every heading; on the blog they follow the dark palette. */
.mh-blog :is(h1, h2, h3, h4, h5, h6) { color: var(--b-text); font-family: inherit; }
.mh-blog img { max-width: 100%; height: auto; display: block; }
.mh-blog__wrap { max-width: 1120px; margin: 0 auto; padding: 24px 16px 64px; }
.mh-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Breadcrumbs */
.mh-bcrumbs ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--b-text-3); }
.mh-bcrumbs li + li::before { content: "/"; margin-inline-end: 6px; opacity: .6; }
.mh-bcrumbs a:hover { color: var(--b-text); }

/* Heads */
.mh-bhead { margin-bottom: 28px; }
.mh-bkicker { margin: 0 0 6px; color: var(--b-gold); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.mh-bhead__title { margin: 0 0 12px; font-size: clamp(26px, 6vw, 42px); line-height: 1.35; font-weight: 800; color: var(--b-text); }
.mh-bhead__lead { margin: 0 0 18px; color: var(--b-text-2); font-size: 17px; max-width: 760px; }
.mh-bsection { margin: 36px 0 16px; font-size: 20px; font-weight: 700; }
.mh-bintro { color: var(--b-text-2); max-width: 780px; }
.mh-bintro p { margin: 0 0 10px; }

/* Search + topics */
.mh-bsearch { display: flex; gap: 8px; max-width: 560px; margin: 0 0 18px; }
.mh-bsearch input[type=search] {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--b-line);
  background: var(--b-surface); color: var(--b-text); font: inherit; font-size: 15px;
}
.mh-bsearch input[type=search]:focus { outline: 2px solid var(--b-accent); outline-offset: 1px; }
.mh-bsearch button {
  height: 46px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--b-accent); color: #fff;
  font: inherit; font-weight: 700; cursor: pointer;
}
.mh-btopics ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mh-btopics a, .mh-chip {
  display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--b-line);
  background: var(--b-surface); color: var(--b-text-2); font-size: 13px; font-weight: 500; line-height: 1.6;
}
.mh-btopics a:hover, .mh-btopics a[aria-current] { color: var(--b-text); border-color: var(--b-accent); }
.mh-chip { color: var(--b-accent); }

/* Cards */
.mh-bgrid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.mh-bcard {
  display: flex; flex-direction: column; background: var(--b-surface); border: 1px solid var(--b-line);
  border-radius: var(--b-r); overflow: hidden; transition: border-color .2s ease;
}
.mh-bcard:hover { border-color: rgba(79,140,255,.45); }
.mh-bcard__media { display: block; aspect-ratio: 16 / 9; background: var(--b-raise); }
.mh-bcard__img { width: 100%; height: 100%; object-fit: cover; }
.mh-bcard__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; flex: 1; }
.mh-bcard__body .mh-chip { align-self: flex-start; }
.mh-bcard__title { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 700; }
.mh-bcard__title a:hover { color: var(--b-accent); }
.mh-bcard__excerpt { margin: 0; color: var(--b-text-2); font-size: 15px; }
.mh-bcard__meta { margin: auto 0 0; display: flex; gap: 6px; color: var(--b-text-3); font-size: 13px; }
.mh-bcard__more { color: var(--b-accent); font-size: 14px; font-weight: 700; }
.mh-bfeatured { margin-bottom: 8px; }
.mh-bcard--featured .mh-bcard__title { font-size: clamp(20px, 4vw, 28px); }

/* Pagination */
.mh-bpages ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 32px 0 0; padding: 0; }
.mh-bpages a, .mh-bpages span {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--b-line); color: var(--b-text-2);
}
.mh-bpages span[aria-current] { background: var(--b-accent); border-color: var(--b-accent); color: #fff; }

/* Article */
.mh-barticle { max-width: 760px; margin: 0 auto; }
.mh-bhead--article .mh-chip { margin-bottom: 10px; }
.mh-bmeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 0;
  border-top: 1px solid var(--b-line); border-bottom: 1px solid var(--b-line); color: var(--b-text-2); font-size: 14px;
}
.mh-bmeta__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mh-bmeta__text { display: flex; flex-direction: column; line-height: 1.4; }
.mh-bmeta__name { color: var(--b-text); font-weight: 700; }
.mh-bmeta__role { font-size: 13px; }
.mh-bmeta__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mh-bhero { margin: 22px 0; border-radius: var(--b-r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--b-raise); }
.mh-bhero__img { width: 100%; height: 100%; object-fit: cover; }

.mh-btoc { margin: 0 0 26px; padding: 14px 16px; border: 1px solid var(--b-line); border-radius: var(--b-r-sm); background: var(--b-surface); }
.mh-btoc summary { cursor: pointer; font-weight: 700; }
.mh-btoc ol { margin: 10px 0 0; padding-inline-start: 20px; color: var(--b-text-2); }
.mh-btoc a:hover { color: var(--b-accent); }

.mh-bprose { font-size: 17.5px; color: #dfe5ee; }
.mh-bprose > * { margin: 0 0 18px; }
.mh-bprose h2 { margin: 38px 0 14px; font-size: 24px; line-height: 1.45; color: var(--b-text); scroll-margin-top: 90px; }
.mh-bprose h3 { margin: 28px 0 10px; font-size: 19px; color: var(--b-text); }
.mh-bprose a { color: var(--b-accent); text-decoration: underline; text-underline-offset: 3px; }
.mh-bprose ul, .mh-bprose ol { padding-inline-start: 24px; }
.mh-bprose li { margin-bottom: 6px; }
.mh-bprose strong { color: var(--b-text); }
.mh-bprose blockquote { margin: 22px 0; padding: 4px 16px; border-inline-start: 3px solid var(--b-accent); color: var(--b-text-2); }
.mh-bprose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.mh-bprose th, .mh-bprose td { padding: 10px; border: 1px solid var(--b-line); text-align: start; }
.mh-bprose figure { margin: 22px 0; }
.mh-bprose figcaption { color: var(--b-text-3); font-size: 13px; margin-top: 6px; }
.mh-bprose code { background: var(--b-raise); padding: 1px 6px; border-radius: 6px; font-size: .92em; }

/* Editor patterns */
.mh-bprose .mh-note, .mh-bprose .mh-example, .mh-bprose .mh-faq {
  padding: 14px 16px; border-radius: var(--b-r-sm); border: 1px solid var(--b-line); background: var(--b-surface);
}
.mh-bprose .mh-note { border-inline-start: 3px solid var(--b-accent); }
.mh-bprose .mh-example { border-inline-start: 3px solid var(--b-gold); background: rgba(235,184,36,.06); }
.mh-bprose .mh-note > :last-child, .mh-bprose .mh-example > :last-child { margin-bottom: 0; }
.mh-bprose .mh-faq h2 { margin-top: 0; }
.mh-bprose details { border-top: 1px solid var(--b-line); padding: 10px 0; }
.mh-bprose details summary { cursor: pointer; font-weight: 700; color: var(--b-text); }
.mh-bprose details > :not(summary) { margin: 8px 0 0; color: var(--b-text-2); }

/* CTA */
.mh-bcta {
  display: flex; flex-direction: column; gap: 14px; margin: 30px 0; padding: 20px;
  border-radius: var(--b-r); border: 1px solid rgba(79,140,255,.35);
  background: linear-gradient(135deg, rgba(79,140,255,.12), rgba(79,140,255,.03)) var(--b-surface);
}
.mh-bcta__title { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: var(--b-text); }
.mh-bcta__desc { margin: 0; color: var(--b-text-2); font-size: 15px; }
.mh-bcta__btn {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px;
  border-radius: 12px; background: var(--b-accent); color: #fff !important; font-weight: 700; text-decoration: none !important;
}
.mh-bsecondary, .mh-bpillar { margin: 0 0 16px; color: var(--b-text-2); font-size: 15px; }
.mh-bsecondary a, .mh-bpillar a { color: var(--b-accent); font-weight: 700; }

/* Author */
.mh-bauthor { display: flex; gap: 14px; align-items: flex-start; margin: 30px 0 0; padding: 18px; border-radius: var(--b-r); background: var(--b-surface); border: 1px solid var(--b-line); }
.mh-bauthor img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.mh-bauthor p { margin: 0; }
.mh-bauthor__name { font-weight: 800; }
.mh-bauthor__role { color: var(--b-gold); font-size: 14px; }
.mh-bauthor__bio { color: var(--b-text-2); font-size: 15px; margin-top: 6px !important; }

/* Related */
.mh-brelated { margin-top: 48px; }
.mh-brelated h2 { font-size: 20px; margin: 0 0 16px; }

.mh-bempty { padding: 26px 18px; border: 1px dashed var(--b-line); border-radius: var(--b-r); color: var(--b-text-2); text-align: center; }
.mh-bempty .mh-bcta { text-align: start; }

/* Tablet / desktop */
@media (min-width: 640px) {
  .mh-bgrid { grid-template-columns: repeat(2, 1fr); }
  .mh-bcta { flex-direction: row; align-items: center; justify-content: space-between; }
  .mh-bcta__btn { align-self: center; flex: 0 0 auto; }
}
@media (min-width: 960px) {
  .mh-blog__wrap { padding: 40px 24px 80px; }
  .mh-bgrid { grid-template-columns: repeat(3, 1fr); }
  .mh-bcard--featured { flex-direction: row; }
  .mh-bcard--featured .mh-bcard__media { flex: 0 0 56%; aspect-ratio: auto; min-height: 320px; }
  .mh-bcard--featured .mh-bcard__body { padding: 28px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .mh-bcard { transition: none; } }