/* Blog: the index grid and the article page. Built on style.css tokens. */

/* Post body font: Scheherazade New (SIL, Open Font License), Arabic characters only;
   Latin characters fall back to Athr. */
@font-face { font-family: "Scheherazade New"; src: url("../fonts/scheherazade-new-regular.woff2?v=b344c349d5") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }
@font-face { font-family: "Scheherazade New"; src: url("../fonts/scheherazade-new-bold.woff2?v=8fa3c74680") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; }

.blog, .post { padding: 140px var(--gutter) 96px; }
.blog { max-width: var(--wrap); margin-inline: auto; }
.blog__head { max-width: 46rem; margin: 0 auto 3.4rem; text-align: center; }
.blog__head h1 { margin: 0; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.8rem); line-height: 1.3; }
.blog__head p { margin: 1rem 0 0; color: var(--muted); font-size: 1.1rem; line-height: 1.9; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }
.post-card__link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid rgb(159 196 194 / .16); border-radius: var(--radius); background: rgb(3 53 55 / .45); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.post-card__link:hover { border-color: rgb(41 199 184 / .6); transform: translateY(-4px); }
.post-card__cover { aspect-ratio: 1200 / 630; overflow: hidden; background: var(--ink-deep); }
.post-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.post-card__placeholder { display: grid; place-items: center; height: 100%; color: rgb(41 199 184 / .35); font-size: 3.5rem; font-weight: 700; }
.post-card__body { padding: 1.3rem 1.4rem 1.5rem; }
.post-card__body time { color: var(--turquoise); font-size: .88rem; }
.post-card__body h2 { margin: .5rem 0 0; font-size: 1.3rem; line-height: 1.55; }
.post-card__body p { margin: .6rem 0 0; color: var(--muted); line-height: 1.8; }

.post { max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; }
.post__crumbs { display: flex; gap: .55rem; margin-bottom: 1.4rem; color: var(--muted); font-size: .92rem; }
.post__crumbs a { text-decoration: none; }
.post__crumbs a:hover { color: var(--turquoise); }
.post__head h1 { margin: 0; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); line-height: 1.4; text-wrap: balance; }
.post__meta { display: flex; flex-wrap: wrap; gap: .3rem .7rem; margin: 1rem 0 0; color: var(--muted); font-size: .95rem; }
.post__cover { display: block; width: 100%; height: auto; margin-top: 2.2rem; border-radius: var(--radius); }

.prose { margin-top: 2.4rem; color: var(--muted); font-family: "Scheherazade New", "Athr", system-ui, sans-serif; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.4rem); line-height: 1.9; }
.prose > * + * { margin-top: 1.2rem; }
/* Justified paragraphs; an alignment chosen in the editor (inline style) still wins. */
.prose p, .prose li, .post__faq details p { text-align: justify; }
/* Each extra Enter in the editor saves an empty paragraph: show it as a blank line. */
.prose p:empty::before { content: "\00a0"; }
.prose h2, .prose h3 { color: var(--white); font-family: "Athr", system-ui, sans-serif; line-height: 1.5; }
.prose h2 { margin-top: 2.6rem; font-size: 1.65rem; }
.prose h3 { margin-top: 2rem; font-size: 1.3rem; }
.prose a { color: var(--turquoise); text-decoration: underline; text-underline-offset: 4px; }
.prose strong { color: var(--white); }
.prose ul, .prose ol { padding-inline-start: 1.4rem; }
.prose li + li { margin-top: .4rem; }
.prose blockquote { margin-inline: 0; padding: .4rem 1.2rem; border-inline-start: 3px solid var(--turquoise); color: var(--white); }
.prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; font-size: 1.2rem; }
.prose th, .prose td { padding: .6rem .8rem; border: 1px solid rgb(159 196 194 / .2); text-align: start; }
.prose code { padding: .1rem .35rem; border-radius: 5px; background: var(--ink-deep); font-size: .92em; direction: ltr; unicode-bidi: isolate; }

.post__faq { margin-top: 3rem; }
.post__faq h2 { font-size: 1.65rem; }
.post__faq details { border-bottom: 1px solid rgb(159 196 194 / .18); }
.post__faq summary { padding: 1.1rem 0; color: var(--white); font-weight: 700; cursor: pointer; }
.post__faq details p { margin: 0 0 1.1rem; color: var(--muted); font-family: "Scheherazade New", "Athr", system-ui, sans-serif; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.4rem); line-height: 1.9; }

.post__cta { margin-top: 3.6rem; padding: 2rem; border: 1px solid rgb(41 199 184 / .35); border-radius: var(--radius); background: rgb(41 199 184 / .06); text-align: center; }
.post__cta h2 { margin: 0; font-size: 1.5rem; }
.post__cta p { margin: .6rem 0 1.4rem; color: var(--muted); }
.post__refs { margin-top: 3rem; }
.post__refs h2 { font-size: 1.65rem; }
.post__refs ol { margin: 1rem 0 0; padding-inline-start: 1.6rem; color: var(--muted); line-height: 1.8; }
.post__refs li + li { margin-top: .5rem; }
.post__refs a { color: var(--turquoise); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }

.post__related { margin-top: 4rem; }
.post__related > h2 { margin: 0 0 1.4rem; font-size: 1.5rem; }

/* Contents box (left) and sidebar (right), from seo.config.js blog.toc / blog.sidebar;
   stacked on narrow screens: contents, article, sidebar. */
.post--wide { max-width: calc(1240px + 2 * var(--gutter)); }
.post__layout { display: grid; grid-template-columns: 250px minmax(0, 1fr) 220px; grid-template-areas: "aside main toc"; gap: 2.8rem; align-items: start; }
.post__main { grid-area: main; min-width: 0; width: 100%; max-width: 760px; margin-inline: auto; }
.post__toc { grid-area: toc; position: sticky; top: 110px; max-height: calc(100vh - 130px); overflow-y: auto; }
.post__aside { grid-area: aside; display: grid; gap: 1.4rem; }
.post__toc h2 { margin: 0; color: var(--white); font-size: 1rem; font-weight: 700; }
.post__box-title { margin: 0 0 .8rem; color: var(--white); font-size: 1rem; font-weight: 700; }
.post__toc summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; cursor: default; }
.post__toc summary::-webkit-details-marker { display: none; }
.post__toc ol { margin: .8rem 0 0; padding: 0; list-style: none; border-inline-start: 2px solid rgb(159 196 194 / .18); }
.post__toc a { display: block; margin-inline-start: -2px; padding: .4rem .9rem; border-inline-start: 2px solid transparent; color: var(--muted); font-size: .95rem; line-height: 1.6; text-decoration: none; transition: color .2s, border-color .2s; }
.post__toc a:hover, .post__toc a:focus-visible { color: var(--turquoise); border-color: currentColor; }
/* The section being read (set by /seo-kit/toc.js). */
.post__toc a[aria-current] { color: var(--turquoise); border-color: currentColor; }
.post__box { padding: 1.2rem 1.3rem; border: 1px solid rgb(159 196 194 / .16); border-radius: var(--radius); background: rgb(3 53 55 / .45); }
.post__box ul { margin: 0; padding: 0; list-style: none; }
.post__box li + li { border-top: 1px solid rgb(159 196 194 / .1); }
.post__box a { display: block; padding: .6rem 0 .15rem; color: var(--white); line-height: 1.6; text-decoration: none; transition: color .2s; }
.post__box a:hover { color: var(--turquoise); }
.post__box li:not(:has(time)) a { padding-bottom: .6rem; }
.post__box time { display: block; padding-bottom: .6rem; color: var(--muted); font-size: .82rem; }
.post--wide [id] { scroll-margin-top: 110px; }
@media (prefers-reduced-motion: no-preference) { html:has(.post__toc) { scroll-behavior: smooth; } }
/* Narrow screens: one column, the contents box right under the post title. The
   article's parts join the grid (display: contents) so the box can sit between them. */
@media (max-width: 1100px) {
  .post__layout { grid-template-columns: minmax(0, 760px); grid-template-areas: none; justify-content: center; gap: 0; }
  .post__main, .post__main > article { display: contents; }
  .post__layout > *, .post__main > *, .post__main > article > * { grid-area: auto; }
  .post__head { order: -2; }
  /* Folded until tapped (/seo-kit/toc.js reads --toc-collapsible); the whole title row is the button. */
  .post__toc { --toc-collapsible: 1; --toc-float: 1; order: -1; position: static; max-height: none; margin-top: 2rem; border: 1px solid rgb(159 196 194 / .16); border-radius: var(--radius); }
  .post__toc summary { padding: 1rem 1.3rem; cursor: pointer; }
  .post__toc summary::after { content: ""; width: .55rem; height: .55rem; border: solid currentColor; border-width: 0 2px 2px 0; color: var(--turquoise); transform: translateY(-25%) rotate(45deg); transition: transform .2s; }
  .post__toc details[open] summary::after { transform: translateY(25%) rotate(-135deg); }
  .post__toc ol { margin: 0 1.3rem 1.1rem; }
  .post__aside { margin-top: 3rem; }
}

/* Floating contents pill and its bottom sheet, built by /seo-kit/toc.js where
   .post__toc sets --toc-float: 1 (phones, below). */
.toc-float { position: fixed; inset-inline: 0; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 80; display: flex; justify-content: center; padding-inline: 1rem; pointer-events: none; opacity: 0; transform: translateY(1.5rem); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.toc-float.is-shown { opacity: 1; transform: none; }
.toc-float.is-shown .toc-float__pill { pointer-events: auto; }
.toc-float__pill { position: relative; display: flex; align-items: center; gap: .65rem; min-width: 0; max-width: 22rem; padding: .7rem 1.15rem; overflow: hidden; border: 1px solid rgb(41 199 184 / .35); border-radius: 999px; background: rgb(3 40 42 / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgb(0 0 0 / .35); color: var(--white); font: inherit; font-size: .92rem; line-height: 1.4; cursor: pointer; }
.toc-float__pill::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: calc(var(--toc-progress, 0) * 100%); height: 2px; background: var(--turquoise); }
.toc-float__icon { flex: none; width: 1rem; height: .75rem; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; color: var(--turquoise); }
.toc-float__label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.toc-sheet { width: 100%; max-width: 100%; max-height: none; margin: auto 0 0; padding: 0; border: 0; background: transparent; color: inherit; }
.toc-sheet::backdrop { background: rgb(0 0 0 / .55); }
.toc-sheet__panel { display: flex; flex-direction: column; max-height: 75vh; padding: .5rem 1.3rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid rgb(41 199 184 / .3); border-radius: 20px 20px 0 0; background: var(--ink-deep); transition: transform .2s var(--ease); }
.toc-sheet[open] .toc-sheet__panel { animation: toc-sheet-in .3s var(--ease); }
.toc-sheet__panel:focus { outline: none; }
@keyframes toc-sheet-in { from { transform: translateY(100%); } }
.toc-sheet__head { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: .3rem 0 .9rem; touch-action: none; }
.toc-sheet__grip { grid-column: 1 / -1; justify-self: center; width: 2.6rem; height: 4px; margin-bottom: .8rem; border-radius: 4px; background: rgb(159 196 194 / .35); }
.toc-sheet__title { margin: 0; color: var(--white); font-weight: 700; }
.toc-sheet__close { position: relative; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 50%; background: rgb(159 196 194 / .12); color: var(--white); cursor: pointer; }
.toc-sheet__close::before, .toc-sheet__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: .9rem; height: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.toc-sheet__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.toc-sheet ol { margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.toc-sheet a { display: block; padding: .75rem .9rem; border-inline-start: 2px solid transparent; border-radius: 4px; color: var(--muted); line-height: 1.6; text-decoration: none; }
.toc-sheet a[aria-current] { border-color: currentColor; background: rgb(41 199 184 / .07); color: var(--turquoise); }
html:has(.toc-sheet[open]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .toc-float, .toc-sheet__panel { transition: none; }
  .toc-sheet[open] .toc-sheet__panel { animation: none; }
}
/* Not while the cookie banner is up: they would sit on top of each other. */
body:has(.consent:not([hidden])) .toc-float { display: none; }