/* Blog pages (from the shared SEO kit starter). Adapt to the site: the variables
   below fall back to neutral values when the site does not define them. */
/* Blog: the index grid and the article page. Built on style.css tokens. */

.blog, .post { padding: 140px var(--gutter, 16px) 96px; }
.blog { max-width: var(--wrap, 1100px); 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, #6b7280); 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, 12px); background: rgb(3 53 55 / .45); transition: border-color .3s var(--ease, ease), transform .3s var(--ease, 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, #111827); }
.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(--accent, var(--turquoise, #0f766e)); 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, #6b7280); line-height: 1.8; }

.post { max-width: calc(760px + 2 * var(--gutter, 16px)); margin-inline: auto; }
.post__crumbs { display: flex; gap: .55rem; margin-bottom: 1.4rem; color: var(--muted, #6b7280); font-size: .92rem; }
.post__crumbs a { text-decoration: none; }
.post__crumbs a:hover { color: var(--accent, var(--turquoise, #0f766e)); }
.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, #6b7280); font-size: .95rem; }
.post__cover { display: block; width: 100%; height: auto; margin-top: 2.2rem; border-radius: var(--radius, 12px); }

.prose { margin-top: 2.4rem; color: var(--muted, #6b7280); font-size: 1.12rem; line-height: 2; }
.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, #ffffff); 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(--accent, var(--turquoise, #0f766e)); text-decoration: underline; text-underline-offset: 4px; }
.prose strong { color: var(--white, #ffffff); }
.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(--accent, var(--turquoise, #0f766e)); color: var(--white, #ffffff); }
.prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius, 12px); }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.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, #111827); 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, #ffffff); font-weight: 700; cursor: pointer; }
.post__faq details p { margin: 0 0 1.1rem; color: var(--muted, #6b7280); line-height: 1.9; }

.post__refs { margin-top: 3rem; }
.post__refs h2 { margin: 0; font-size: 1.65rem; }
.post__refs ol { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.35rem 0 0; padding: 0; list-style: none; counter-reset: source; }
.post__refs li { flex: none; margin: 0; counter-increment: source; }
.post__refs li + li { margin: 0; }
.post__refs a { display: grid; place-items: center; width: 3.65rem; height: 3.65rem; border: 1px solid currentColor; border-radius: 50%; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.post__refs a::before { content: counter(source); font-family: Georgia, serif; font-size: 1.45rem; line-height: 1; }
.post__refs a:hover { transform: translateY(-2px); }
.post__refs .post__ref-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.post__cta { margin-top: 3.6rem; padding: 2rem; border: 1px solid rgb(41 199 184 / .35); border-radius: var(--radius, 12px); 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, #6b7280); }
.post__related { margin-top: 4rem; }
.post__related > h2 { margin: 0 0 1.4rem; font-size: 1.5rem; }

/* Contents box and sidebar (seo.config.js blog.toc / blog.sidebar): sidebar at the
   start, article in the middle, contents at the end; stacked on narrow screens. */
.post--wide { max-width: calc(1240px + 2 * var(--gutter, 16px)); }
.post__layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; grid-template-areas: "aside main toc"; gap: 2.6rem; 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, #ffffff); font-size: 1rem; font-weight: 700; }
.post__box-title { margin: 0 0 .8rem; color: var(--white, #ffffff); 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, #6b7280); 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(--accent, var(--turquoise, #0f766e)); border-color: currentColor; }
/* The section being read (set by /seo-kit/toc.js). */
.post__toc a[aria-current] { color: var(--accent, var(--turquoise, #0f766e)); border-color: currentColor; }
.post__box { padding: 1.2rem 1.3rem; border: 1px solid rgb(159 196 194 / .16); border-radius: var(--radius, 12px); background: rgb(3 53 55 / .45); }
.post__box ul { margin: 0; padding: 0; list-style: none; }
.post__box li + li { margin-top: .2rem; border-top: 1px solid rgb(159 196 194 / .1); }
.post__box a { display: block; padding: .55rem 0 .15rem; color: var(--white, #ffffff); line-height: 1.6; text-decoration: none; }
.post__box a:hover { color: var(--accent, var(--turquoise, #0f766e)); }
.post__box li:not(:has(time)) a { padding-bottom: .55rem; }
.post__box time { display: block; padding-bottom: .55rem; color: var(--muted, #6b7280); font-size: .82rem; }
.post--wide [id] { scroll-margin-top: 110px; }
@media (prefers-reduced-motion: no-preference) { html:has(.post__toc) { scroll-behavior: smooth; } }
/* Only one of the two: no empty column for the missing one (wide screens only). */
@media (min-width: 1101px) {
  .post__layout:not(:has(.post__aside)) { grid-template-columns: minmax(0, 1fr) 220px; grid-template-areas: "main toc"; }
  .post__layout:not(:has(.post__toc)) { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "aside main"; }
  .post--wide:not(:has(.post__aside)), .post--wide:not(:has(.post__toc)) { max-width: calc(1040px + 2 * var(--gutter, 16px)); }
}
/* 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, 12px); }
  .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(--accent, var(--turquoise, #0f766e)); 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, ease), transform .25s var(--ease, 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, #ffffff); 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(--accent, var(--turquoise, #0f766e)); }
.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(--accent, var(--turquoise, #0f766e)); }
.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, #111827); transition: transform .2s var(--ease, ease); }
.toc-sheet[open] .toc-sheet__panel { animation: toc-sheet-in .3s var(--ease, 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, #ffffff); 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, #ffffff); 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, #6b7280); line-height: 1.6; text-decoration: none; }
.toc-sheet a[aria-current] { border-color: currentColor; background: rgb(41 199 184 / .07); color: var(--accent, var(--turquoise, #0f766e)); }
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; }
}

/* Tallah's dark and cream themes. The generic kit colors above are overridden here. */
.blog-page { --blog-copy: #e7e5da; --blog-muted: #c9d6ce; --blog-card: #194c45; --blog-border: #779a83; --blog-accent: #aed075; min-height: 100vh; }
.blog-page .blog, .blog-page .post { color: var(--blog-copy); }
.blog-page .blog__head p, .blog-page .post-card__body p, .blog-page .post__crumbs,
.blog-page .post__meta, .blog-page .prose, .blog-page .post__faq details p,
.blog-page .post__refs ol, .blog-page .post__cta p { color: var(--blog-muted); }
.blog-page .post-card__link { background: var(--blog-card); border-color: var(--blog-border); box-shadow: 0 12px 28px rgba(0,0,0,.13); }
.blog-page .post-card__link:hover { border-color: var(--blog-accent); box-shadow: 0 18px 34px rgba(0,0,0,.2); }
.blog-page .post-card__body time, .blog-page .post__crumbs a:hover,
.blog-page .prose a, .blog-page .post__refs a { color: var(--blog-accent); }
.blog-page .post__refs a { border-color: var(--blog-border); color: var(--blog-copy); }
.blog-page .post__refs a:hover { border-color: var(--blog-accent); background: var(--blog-accent); color: #103632; }
.blog-page .prose h2, .blog-page .prose h3, .blog-page .prose strong,
.blog-page .prose blockquote, .blog-page .post__faq summary { color: var(--blog-copy); }
.blog-page .prose code { background: rgba(0,0,0,.14); }
.blog-page .post__cta { border-color: var(--blog-border); background: var(--blog-card); }
.blog-page .blog-header .main-nav { display: flex; }
@media (max-width: 900px) { .blog-page .blog-header .main-nav { display: none; } .blog-page .blog-header .main-nav.is-open { display: flex; } }
:root[data-theme="light"] .blog-page { --blog-copy: #193f3c; --blog-muted: #435b53; --blog-card: #fbf7f0; --blog-border: #c5cdbf; --blog-accent: #2f6a57; }
:root[data-theme="light"] .blog-page .post__refs a:hover { color: #fff; }
:root[data-theme="light"] .blog-page .post-card__link { box-shadow: 0 10px 26px rgba(25,63,60,.12); }
/* Contents box, floating pill and sheet in Tallah's themes. */
.blog-page .post__toc h2, .blog-page .toc-sheet__title, .blog-page .toc-sheet__close { color: var(--blog-copy); }
.blog-page .post__toc ol { border-color: var(--blog-border); }
.blog-page .post__toc a, .blog-page .toc-sheet a { color: var(--blog-muted); }
.blog-page .post__toc a:hover, .blog-page .post__toc a:focus-visible, .blog-page .post__toc a[aria-current],
.blog-page .toc-sheet a[aria-current], .blog-page .toc-float__icon { color: var(--blog-accent); }
.blog-page .toc-sheet a[aria-current] { background: color-mix(in srgb, var(--blog-accent) 12%, transparent); }
.blog-page .toc-float__pill { border-color: var(--blog-border); background: color-mix(in srgb, var(--blog-card) 94%, transparent); color: var(--blog-copy); }
.blog-page .toc-float__pill::after { background: var(--blog-accent); }
.blog-page .toc-sheet__panel { border-color: var(--blog-border); background: var(--blog-card); }
.blog-page .toc-sheet__close { background: color-mix(in srgb, var(--blog-copy) 12%, transparent); }
@media (max-width: 1100px) {
  .blog-page .post__toc { border-color: var(--blog-border); background: var(--blog-card); }
  .blog-page .post__toc summary::after { color: var(--blog-accent); }
}