/* Blog-only additions on top of legal.css (which carries the tokens, the
   header and the body type). Kept separate so the legal pages don't ship
   list styling they never use. */

.post-list { list-style: none; padding: 0; margin: 32px 0 0; }

.post-card {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.post-card:first-child { border-top: 0; padding-top: 0; }

.post-title {
  display: block;
  font-size: 1.2rem; font-weight: 700; line-height: 1.5;
  color: var(--heading); text-decoration: none;
}
.post-title:hover { color: var(--ai-blue); }

.post-desc { margin: 8px 0 0; color: var(--muted); font-size: .9375rem; line-height: 1.75; }

.post-meta {
  margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  color: var(--muted); font-size: .8125rem;
}
/* Dates and durations read left-to-right even inside this RTL page. */
.post-meta time { direction: ltr; unicode-bidi: isolate; }

.tag {
  padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); font-size: .75rem;
}

/* Article body: the posts use ol/ul heavily, and the default list marker sits
   too close to the text at this line-height. */
article ol, article ul { padding-inline-start: 1.5rem; }
article li { margin-bottom: 10px; }
article p + h2 { margin-top: 40px; }

/* FAQ accordion. <details>/<summary> rather than a scripted widget: this shell
   loads no JS, and a crawler (or an AI assistant quoting us) reads the answer
   whether or not the item is open. */
.faq-list { margin: 16px 0 32px; }

.faq-item {
  border-top: 1px solid var(--border);
  padding: 4px 0;
}
.faq-item:first-child { border-top: 0; }

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  font-weight: 600;
  color: var(--heading);
  display: flex; align-items: flex-start; gap: 10px;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* The marker is drawn rather than inherited, so it points the right way in
   both directions without a separate LTR rule. */
.faq-item summary::before {
  content: "+";
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--ai-blue);
  line-height: 1.6;
}
.faq-item[open] summary::before { content: "\2212"; }
.faq-item summary:hover { color: var(--ai-blue); }

.faq-answer { padding: 0 0 16px 0; color: var(--body); }
.faq-answer p { margin: 0 0 10px; line-height: 1.85; }
.faq-answer ul, .faq-answer ol { padding-inline-start: 1.5rem; margin: 0 0 10px; }