/* Smart Flow Services — Blog (body.blog standalone reading pages).
   Shares the site's design tokens (dark oklch theme, Heebo + JetBrains Mono).
   Uses logical properties throughout so Hebrew (rtl) renders correctly for free.
   This stylesheet is standalone — it does NOT depend on styles.css. */
:root {
  --bg: oklch(14% 0.02 250);
  --fg: oklch(95% 0.01 250);
  --muted: oklch(72% 0.02 250);
  --accent: oklch(80% 0.12 200);
  --accent-dim: oklch(80% 0.12 200 / 0.14);
  --line: oklch(95% 0.01 250 / 0.12);
  --card: oklch(19% 0.02 250 / 0.6);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Heebo", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.blog {
  margin: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 110%, var(--accent-dim), transparent 65%),
    var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  line-height: 1.75;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: var(--mono);
}

/* --- Header -------------------------------------------------------------- */
.blog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}

.blog-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--fg);
}

.blog-wordmark img {
  width: 30px;
  height: 30px;
}

.blog-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.lang-toggle {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45em 1em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.lang-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.blog-back {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45em 1em;
  transition: border-color 0.15s, color 0.15s;
}

.blog-back:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- Layout -------------------------------------------------------------- */
.blog-wrap {
  max-width: 760px;
  margin-inline: auto;
  padding: 40px clamp(16px, 4vw, 48px) 80px;
}

.kicker {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

.blog-wrap > h1 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1.3;
  margin: 0 0 12px;
}

.blog-lead {
  font-size: 1.08rem;
  color: var(--muted);
  margin: 0 0 8px;
}

/* --- Post list (blog.html) ---------------------------------------------- */
.post-list {
  display: grid;
  gap: 16px;
  margin-block-start: 30px;
}

.post-card {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  text-decoration: none;
  color: var(--fg);
  transition: border-color 0.15s, transform 0.15s;
}

.post-card:hover,
.post-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  outline: none;
}

.post-meta {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}

.post-card h2 {
  margin: 0 0 8px;
  font-size: 1.22rem;
  line-height: 1.45;
}

.post-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

/* --- Article (blog/posts/*.html) ---------------------------------------- */
.article h1 {
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  line-height: 1.3;
  margin: 0 0 10px;
}

.article .byline {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.article h2 {
  font-size: 1.32rem;
  line-height: 1.4;
  margin: 2.2rem 0 0.7rem;
}

.article h3 {
  font-size: 1.08rem;
  margin: 1.6rem 0 0.5rem;
}

.article p {
  color: oklch(88% 0.01 250);
  margin: 0 0 1.1em;
}

.article strong {
  color: var(--fg);
}

.article ul,
.article ol {
  color: oklch(88% 0.01 250);
  padding-inline-start: 1.4em;
  margin: 0 0 1.2em;
}

.article li {
  margin-block: 0.35em;
}

.article blockquote {
  border-inline-start: 3px solid var(--accent);
  margin-inline: 0;
  padding-inline-start: 1em;
  color: var(--muted);
}

.article code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--accent-dim);
  padding: 0.1em 0.4em;
  border-radius: 6px;
}

.article hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.4rem 0;
}

.article a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article a:hover {
  color: oklch(85% 0.12 200);
}

/* --- FAQ ----------------------------------------------------------------- */
details.faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  margin-block: 10px;
  overflow: hidden;
}

details.faq-item summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

details.faq-item summary::-webkit-details-marker {
  display: none;
}

details.faq-item summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--accent);
  font-size: 1.1rem;
  line-height: 1;
}

details.faq-item[open] summary::after {
  content: "−";
}

details.faq-item .faq-body {
  padding: 0 18px 16px;
  color: var(--muted);
}

details.faq-item .faq-body p:last-child {
  margin-bottom: 0;
}

/* --- CTA box ------------------------------------------------------------- */
.cta-box {
  margin-block: 2.6rem;
  padding: 28px 30px;
  border: 1px solid var(--accent-dim);
  border-radius: 14px;
  background: var(--accent-dim);
  text-align: center;
}

.cta-box h2 {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
}

.cta-box p {
  margin: 0 0 1.2rem;
  color: var(--muted);
}

.btn,
.cta-box .btn {
  display: inline-block;
  padding: 0.7em 1.7em;
  border-radius: 999px;
  background: var(--accent);
  color: oklch(18% 0.02 250);
  font-weight: 800;
  text-decoration: none;
  transition: filter 0.15s;
}

.cta-box .btn:hover {
  filter: brightness(1.12);
}

/* --- Footer -------------------------------------------------------------- */
.blog-footer {
  border-top: 1px solid var(--line);
  padding: 22px clamp(16px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.85rem;
}

.blog-footer a {
  color: var(--accent);
  text-decoration: none;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .blog-header {
    flex-wrap: wrap;
  }

  .article {
    font-size: 1.02rem;
  }

  .post-card {
    padding: 18px 20px;
  }
}