/* Blog posts and the /blog/ index. blog.py copies this file to site/blog.css
   and links it (after style.css) only on the pages it renders, so the guides
   and the translated pages never load it. Tokens come from style.css. */

.post-wrap {
  width: min(64rem, calc(100% - 2 * var(--pad)));
  margin: 0 auto;
}
@media (max-width: 1099px) {
  .post-wrap { width: min(44rem, calc(100% - 2 * var(--pad))); }
}
.post { padding: 0 0 4.4rem; }

/* ---------------------------------------------------------------- header */
.post-head { padding: clamp(1.6rem, 4vw, 3.2rem) 0 clamp(1.4rem, 3vw, 2.2rem); }
.post-head .crumb { margin: 0 0 clamp(1.2rem, 3vw, 2rem); }
.post-head .crumb span { color: var(--line); margin: 0 0.15rem; }
/* a 44px tap area without moving the text */
.post-head .crumb a { display: inline-block; padding: 0.7rem 0.4rem; margin: -0.7rem -0.4rem; }
.post-head .kicker { margin: 0 0 0.8rem; }
.post-head h1 {
  font-size: clamp(1.75rem, 1.1rem + 3.3vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 21em;
  margin: 0 0 0.45em;
  text-wrap: balance;
}
/* below 1100px the column is fixed at 44rem, so stop growing with the viewport */
@media (max-width: 1099px) {
  .post-head h1 { font-size: clamp(1.75rem, 1.1rem + 3.3vw, 2.75rem); }
}
.post-head .lede {
  font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.32rem);
  line-height: 1.6;
  max-width: 40rem;
  margin: 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.35rem 1.7rem;
  overflow: hidden; overflow: clip;
  margin: clamp(1.2rem, 3vw, 1.8rem) 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem; letter-spacing: 0.02em; line-height: 1.5;
  color: var(--ink-soft);
}
/* the diamond sits in the gap, so a wrapped line never starts with one (it is clipped) */
.post-meta > * { position: relative; }
.post-meta > * + *::before {
  content: "";
  position: absolute; inset-inline-start: calc(-0.85rem - 2.5px); top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------- lead image */
.post-figure { margin: 0 0 clamp(2rem, 5vw, 3.2rem); }
.post-figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--paper-2);
  box-shadow: var(--shadow);
}
@media (min-width: 800px) {
  .post-figure img { aspect-ratio: 16 / 9; }
}

/* ---------------------------------------------------------------- body + rail */
.post-body { min-width: 0; max-width: 44rem; }
.post-rail { display: none; }
@media (min-width: 1100px) {
  .post-grid.has-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14.5rem;
    gap: 4.5rem;
  }
  /* the rail comes first in the source (tab order), second on screen */
  .post-grid.has-rail > .post-rail {
    display: block; grid-column: 2; grid-row: 1;
    position: sticky; top: 5.5rem; align-self: start;
    max-height: calc(100vh - 6rem); overflow-y: auto;
  }
  .post-grid.has-rail > .post-body { grid-column: 1; grid-row: 1; }
  .post .toc[data-toc="inline"] { display: none; }
}

.post-body > h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2rem);
  margin: 2.3em 0 0.5em;
  scroll-margin-top: 5.5rem;
}
.post-body > h2 + p, .post-body > h2 + ul, .post-body > h2 + ol { margin-top: 0; }
.post .answer {
  margin: 0 0 1rem;
  padding: 1.1rem 1.3rem;
  box-shadow: none;
  background: var(--card);
  border: 1px solid #e8d7bd;
  border-inline-start: 3px solid var(--gold);
}
.post .reviewed { margin: 0 0 1.6rem; }
.post-body ul.checklist { list-style: none; padding-inline-start: 0; }
.post-body ul.checklist > li { position: relative; padding-inline-start: 1.4rem; }
.post-body ul.checklist > li::before {
  content: ""; position: absolute; inset-inline-start: 0.15rem; top: 0.72em;
  width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg);
}
.post .steps li { padding-block: 0.85rem; }
@media (max-width: 480px) { .post .steps li { padding-inline-start: 2.6rem; } }

/* tables: framed on wider screens; on phones every row becomes a labelled block */
.post .table-wrap { border: 1px solid var(--line); background: var(--card); }
.post .page table, .post table { margin: 0; }
.post th, .post td { padding: 0.7rem 0.85rem; }
.post .table-wrap tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 560px) {
  .post .table-wrap.stack { overflow: visible; border: 0; background: none; }
  .post .stack table, .post .stack tbody, .post .stack tr, .post .stack td { display: block; width: 100%; }
  .post .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .post .stack tr { margin: 0 0 0.75rem; border: 1px solid var(--line); background: var(--card); }
  .post .stack tr:last-child { margin-bottom: 0; }
  .post .stack td { padding: 0.55rem 0.9rem; border-bottom: 0; line-height: 1.55; }
  .post .stack td[data-label] { display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); gap: 0.8rem; align-items: baseline; }
  .post .stack td[data-label]::before { content: attr(data-label); color: var(--gold-deep); font-weight: 650; font-size: 0.82rem; line-height: 1.6; }
  .post .stack td:first-child { display: block; background: var(--paper-2); font-weight: 650; color: var(--ink); }
  .post .stack td:first-child::before { content: none; }
}

/* "On this page": collapsible on phones and tablets, a sticky rail on desktop */
.post .toc { background: none; border: 0; padding: 0; margin: 0; }
.post .toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.post .toc li { counter-increment: toc; margin: 0; }
.post .toc a { text-decoration: none; }

.post .toc[data-toc="inline"] {
  margin: 0 0 2rem;
  border: 1px solid var(--line);
  background: var(--card);
}
.toc[data-toc="inline"] summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 3rem; padding: 0.6rem 1.1rem;
  cursor: pointer; list-style: none;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 650;
}
.toc[data-toc="inline"] summary::-webkit-details-marker { display: none; }
.toc[data-toc="inline"] summary::after {
  content: ""; width: 0.55rem; height: 0.55rem; margin-inline-end: 0.2rem;
  border-right: 1.5px solid var(--gold-deep); border-bottom: 1.5px solid var(--gold-deep);
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.2s ease;
}
.toc[data-toc="inline"] details[open] summary::after { transform: translateY(20%) rotate(-135deg); }
.toc[data-toc="inline"] ol { padding: 0 1.1rem 0.7rem; }
.toc[data-toc="inline"] li { border-top: 1px solid var(--line); }
.toc[data-toc="inline"] a {
  display: grid; grid-template-columns: 2rem 1fr;
  padding: 0.7rem 0; line-height: 1.4;
  color: var(--ink); font-size: 0.97rem;
}
.toc[data-toc="inline"] a::before,
.toc[data-toc="rail"] a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--display); font-style: italic; color: var(--gold-deep);
}
.toc[data-toc="inline"] a:hover { color: var(--gold-deep); }

.toc[data-toc="rail"] > p {
  margin: 0 0 0.7rem;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 650;
}
.toc[data-toc="rail"] ol { border-inline-start: 1px solid var(--line); }
.toc[data-toc="rail"] a {
  display: grid; grid-template-columns: 1.7rem 1fr;
  margin-inline-start: -1px;
  padding: 0.42rem 0 0.42rem 0.9rem;
  border-inline-start: 2px solid transparent;
  font-size: 0.86rem; line-height: 1.4; color: var(--ink-soft);
}
.toc[data-toc="rail"] a::before { font-size: 0.82rem; }
.toc[data-toc="rail"] a:hover { color: var(--ink); }
.toc[data-toc="rail"] a[aria-current] { color: var(--ink); border-inline-start-color: var(--gold); font-weight: 600; }
/* the rail scrolls, which would clip an outside focus ring */
.toc[data-toc="rail"] a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -2px; }

/* ---------------------------------------------------------------- questions */
.post .faq { margin: 3rem 0 0; }
.post .faq h2 { margin: 0 0 0.5em; font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2rem); }
.post .faq dl { margin: 0; border-bottom: 1px solid var(--line); }
.post .faq dt {
  margin: 0; padding: 1.1rem 0 0;
  border-top: 1px solid var(--line);
  font-size: 1.14rem; line-height: 1.35; font-weight: 600;
}
.post .faq dd { margin: 0.45rem 0 0; padding-bottom: 1.1rem; }

/* ---------------------------------------------------------------- sources (after the questions) */
.sources { margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.post .faq + .sources { border-top: 0; padding-top: 0; }
.post-body > .sources h2 { font-size: 1.35rem; margin: 0 0 0.4rem; }
.post .source {
  display: block;
  margin: 0; padding: 0.95rem 0;
  background: none; border: 0; border-bottom: 1px solid var(--line);
}
.post .source:last-child { border-bottom: 0; }
.post .source strong { display: block; color: var(--ink); font-size: 1rem; line-height: 1.45; }
.post .source a {
  display: block; position: relative;
  padding-block: 0.67rem; margin: -0.47rem 0 -0.67rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.84rem;
}
.post .source p { margin: 0.3rem 0 0; font-size: 0.93rem; line-height: 1.6; color: var(--ink-soft); }

/* ---------------------------------------------------------------- related + contact */
.post .related { margin: 3rem 0 0; padding: 0; border: 0; }
.post .related h2 { font-size: 1.35rem; margin: 0 0 0.6rem; }
.post .related ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem;
  border-top: 1px solid var(--line);
}
.post .related li { margin: 0; border-bottom: 1px solid var(--line); }
.post .related li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.post .related a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3rem; padding: 0.6rem 0;
  color: var(--ink); font-weight: 550; line-height: 1.4; text-decoration: none;
}
.post .related a::after { content: "\2192"; content: "\2192" / ""; color: var(--gold); flex: none; transition: transform 0.2s ease; }
.post .related a:hover { color: var(--gold-deep); }
.post .related a:hover::after { transform: translateX(3px); }
@media (max-width: 640px) { .post .related ul { grid-template-columns: 1fr; } }

.post .page-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem;
  margin: 3rem 0 0; padding: clamp(1.4rem, 4vw, 2rem);
  border: 0; background: var(--paper-2);
}
.post .page-cta p { margin: 0; }
.post .page-cta p:first-child {
  font-family: var(--display); font-weight: 650; letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); line-height: 1.2; color: var(--ink);
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .toc[data-toc="inline"] summary::after, .post .related a::after { transition: none; }
}

/* ---------------------------------------------------------------- /blog/ index */
.blog-index .post-wrap { width: min(var(--max), calc(100% - 2 * var(--pad))); }
.blog-index .post-head h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4rem); }
.blog-index .intro { max-width: 44rem; margin: 1rem 0 2rem; font-size: 0.95rem; color: var(--ink-soft); }
.blog-index .cards { margin-bottom: 1rem; }
.blog-index a.card .card-body h2 { font-size: 1.28rem; margin: 0 0 0.35em; color: var(--ink); }
.blog-index a.card:hover .card-body h2 { color: var(--blush); }