/* Harouga Pro — single article. Logical properties throughout: RTL (ar) and LTR (fr/en). */
.hb-article{--hb-orange:#F97316;--hb-orange-d:#EA580C;--hb-orange-dd:#C2410C;--hb-ink:#0F172A;--hb-muted:#475569;--hb-line:#E2E8F0;--hb-soft:#F8FAFC;--hb-cream:#FFF1E6;
  background:#fff;color:var(--hb-ink);font-family:"IBM Plex Sans Arabic",system-ui,sans-serif}
.hb-article *,.hb-article *::before,.hb-article *::after{box-sizing:border-box}
.hb-article a{text-decoration:none}
.hb-article .screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hb-article a:focus-visible,.hb-toc__toggle:focus-visible,.hb-table-wrap:focus-visible{outline:3px solid var(--hb-ink);outline-offset:3px;border-radius:6px}
.hb-article__inner{max-width:1240px;margin-inline:auto;padding:28px 50px 64px}

/* Head */
.hb-bc ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 22px;padding:0;list-style:none;font-size:14px;color:#64748B}
.hb-bc li{display:inline-flex;align-items:center;gap:6px}
.hb-bc a{display:inline-flex;align-items:center;gap:6px;color:#64748B}
.hb-bc a:hover{color:var(--hb-orange-dd)}
.hb-bc__sep{color:#CBD5E1}
.hb-article__cat{margin-bottom:12px}
.hb-article__title{margin:0 0 12px;font-size:clamp(28px,3.4vw,40px);line-height:1.3;font-weight:700;color:var(--hb-ink)}
.hb-article__lead{margin:0 0 22px;font-size:clamp(17px,1.6vw,20px);line-height:1.7;color:var(--hb-muted)}
.hb-article__meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;padding-block:14px;border-block:1px solid var(--hb-line);margin-bottom:28px}
.hb-article__facts{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;font-size:14.5px;color:var(--hb-muted)}
.hb-fact{display:inline-flex;align-items:center;gap:7px}
.hb-fact--author{color:var(--hb-ink);font-weight:600}
.hb-fact--draft{padding:3px 10px;border-radius:6px;background:#FEF3C7;color:#92400E;font-weight:600;font-size:13px}
.hb-avatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#E2E8F0;color:#64748B}
.hb-avatar--lg{width:56px;height:56px;flex:0 0 auto}
.hb-share{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--hb-muted)}
.hb-share ul{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.hb-share a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--hb-line);border-radius:8px;color:var(--hb-ink);transition:border-color .2s,color .2s}
.hb-share a:hover{border-color:var(--hb-orange);color:var(--hb-orange-dd)}

/* Layout: content + one sticky sidebar column (TOC above CTA). The column is the sticky box, so the TOC
   can never slide over the CTA, and it stops at the end of the layout (never over related posts/footer).
   --hh-sticky-h = sticky header height + fixed admin bar, maintained by the header script. */
.hb-article__layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"main side";gap:24px 36px;align-items:start}
.hb-article__main{grid-area:main;min-width:0}
.hb-side{grid-area:side;position:sticky;top:calc(var(--hh-sticky-h,80px) + 16px);display:flex;flex-direction:column;gap:24px;
  max-height:calc(100vh - var(--hh-sticky-h,80px) - 32px);max-height:calc(100dvh - var(--hh-sticky-h,80px) - 32px)}
.hb-toc{display:flex;flex-direction:column;flex:0 1 auto;min-height:0;overflow:hidden;border:1px solid var(--hb-line);border-radius:12px;background:#fff;box-shadow:0 14px 30px -26px rgba(15,23,42,.45)}
.hb-cta{flex:none}

/* TOC */
.hb-toc__toggle{display:flex;flex:none;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:0;padding:16px 18px;border:0;border-radius:12px;background:transparent;color:var(--hb-ink);font:inherit;font-size:18px;font-weight:700;text-align:start;cursor:pointer}
.hb-toc__toggle:hover{color:var(--hb-orange-dd)}
.hb-toc__chev{transition:transform .2s ease;flex:0 0 auto}
.hb-toc__toggle[aria-expanded="true"] .hb-toc__chev{transform:rotate(180deg)}
/* the list is a real flex child: it shrinks and scrolls inside the sticky column when space is short */
.hb-toc__nav{flex:0 1 auto;min-height:0;padding:0 10px 12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.hb-toc__nav[hidden]{display:none}
.hb-toc ol{margin:0;padding:0;list-style:none}
.hb-toc li{margin:0;border-top:1px solid var(--hb-soft)}
.hb-toc li:first-child{border-top:0}
.hb-toc a{display:block;padding:9px 12px;border-inline-start:3px solid transparent;border-radius:6px;color:var(--hb-ink);font-size:14.5px;line-height:1.5;overflow-wrap:anywhere}
.hb-toc .hb-toc__l3 a{padding-inline-start:26px;font-size:13.5px;color:var(--hb-muted)}
.hb-toc a:hover{background:var(--hb-soft);color:var(--hb-orange-dd)}
.hb-toc a.is-current{background:var(--hb-cream);border-inline-start-color:var(--hb-orange);color:var(--hb-orange-dd);font-weight:700}

/* CTA box */
.hb-cta{padding:26px 22px;border-radius:12px;background:linear-gradient(160deg,#0F172A,#1E293B);color:#E2E8F0;text-align:center}
.hb-cta__icon{display:inline-grid;place-items:center;width:56px;height:56px;margin-bottom:10px;border:2px solid var(--hb-orange);border-radius:10px;color:var(--hb-orange)}
.hb-cta__title{margin:0 0 8px;color:#fff;font-size:19px;font-weight:700}
.hb-cta p{margin:0 0 16px;font-size:14.5px;line-height:1.7}
.hb-cta .hb-btn{width:100%}

/* Cover */
.hb-article__cover{margin:0 0 26px;border-radius:14px;overflow:hidden;background:var(--hb-ink)}
.hb-article__cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* Prose */
.hb-prose{font-size:17.5px;line-height:1.9;color:#1E293B;overflow-wrap:break-word}
.hb-article[dir=ltr] .hb-prose{line-height:1.75}
.hb-prose>*:first-child{margin-top:0}
.hb-prose p{margin:0 0 1.1em}
/* anchor offset comes from html scroll-padding-top (header script); no extra scroll-margin here */
.hb-prose h2,.hb-prose h3{color:var(--hb-ink);font-weight:700}
.hb-prose h2{margin:1.8em 0 .7em;padding-inline-start:14px;border-inline-start:4px solid var(--hb-orange);font-size:clamp(22px,2.2vw,27px);line-height:1.4}
.hb-prose h3{margin:1.5em 0 .5em;font-size:clamp(19px,1.8vw,21px);line-height:1.45}
.hb-prose a{color:var(--hb-orange-dd);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hb-prose a:hover{color:var(--hb-orange)}
.hb-prose ul,.hb-prose ol{margin:0 0 1.2em;padding-inline-start:1.4em}
.hb-prose li{margin-bottom:.45em}
.hb-prose ul li::marker{color:var(--hb-orange)}
.hb-prose ol li::marker{color:var(--hb-orange-dd);font-weight:700}
.hb-prose strong{color:var(--hb-ink)}
.hb-prose code{padding:2px 8px;border-radius:6px;background:var(--hb-cream);color:var(--hb-orange-dd);font-size:.88em;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.hb-prose blockquote,.hb-prose .hb-callout{margin:1.4em 0;padding:16px 20px;border:1px solid #FED7AA;border-inline-start:4px solid var(--hb-orange);border-radius:10px;background:#FFF7ED;color:var(--hb-ink)}
.hb-prose blockquote p:last-child{margin-bottom:0}
.hb-prose img{max-width:100%;height:auto;border-radius:10px}
.hb-table-wrap{margin:1.4em 0;overflow-x:auto;border:1px solid var(--hb-line);border-radius:12px;-webkit-overflow-scrolling:touch}
.hb-prose table{width:100%;min-width:480px;margin:0;border-collapse:collapse;font-size:15.5px;line-height:1.6}
.hb-prose th,.hb-prose td{padding:12px 16px;border-bottom:1px solid var(--hb-line);text-align:start;vertical-align:top}
.hb-prose thead th{background:var(--hb-cream);color:var(--hb-ink);font-weight:700}
.hb-prose tbody tr:last-child td{border-bottom:0}
.hb-prose tbody td:first-child{font-weight:600;color:var(--hb-ink)}
.hb-prose tbody tr:nth-child(even) td{background:var(--hb-soft)}

/* Author box */
.hb-author{display:flex;gap:16px;align-items:flex-start;margin-top:32px;padding:20px;border:1px solid var(--hb-line);border-radius:12px;background:var(--hb-soft)}
.hb-author p{margin:0;font-size:15px;line-height:1.7;color:var(--hb-muted)}
.hb-author .hb-author__name{margin-bottom:4px;color:var(--hb-ink);font-weight:700;font-size:17px}

/* Related posts (re-uses the blog card styles) */
.hb-related.hb-blog{max-width:none;margin-top:48px;padding:0}

/* Tablet & mobile: one column, collapsible TOC first, CTA after the article */
@media (max-width:1024px){
  .hb-article__inner{padding:22px 24px 52px}
  .hb-article__layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"toc" "main" "cta"}
  .hb-side{display:contents}
  .hb-toc{grid-area:toc;overflow:visible}
  .hb-toc__nav{overflow:visible}
  .hb-cta{grid-area:cta}
}
@media (max-width:767px){
  .hb-article__inner{padding:16px 16px 44px}
  .hb-article__meta{flex-direction:column;align-items:flex-start}
  .hb-prose{font-size:16.5px}
  .hb-prose table{font-size:14.5px}
  .hb-prose code{white-space:normal}
}
/* Desktop window too short for a useful sticky column: let the sidebar scroll with the page */
@media (min-width:1025px) and (max-height:560px){
  .hb-side{position:static;max-height:none}
  .hb-toc__nav{overflow:visible}
}
@media (prefers-reduced-motion:reduce){.hb-toc__chev{transition:none}}