/* ============================================================
   Blog — shared styles for the server-rendered index and post pages.
   Extracted from the old inline <style> block so both pages share one
   cacheable file. Uses the design-system tokens from /styles.css.
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page, #fbfcf8);
  color: var(--text-heading, #10163b);
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[dir='rtl'] { font-family: var(--font-body-ar, 'Cairo', sans-serif); }

a { color: var(--text-link, #0a86c4); }

.wrap { max-width: 760px; margin: 0 auto; padding: 20px 20px 80px; }

/* ---- header / footer ---- */
header.site {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 8px 0 28px;
}
header.site .home {
  font-weight: 700; text-decoration: none; font-size: 18px;
  color: var(--text-heading, #10163b); font-family: var(--font-display, inherit);
}
header.site .home span { color: var(--text-brand, #6fa32c); }
header.site nav { display: flex; gap: 18px; font-size: 15px; }

.site-footer {
  display: flex; gap: 18px; justify-content: space-between;
  margin-top: 64px; padding-top: 20px;
  border-top: 1px solid var(--border-default, #e7e8ef);
  font-size: 14px;
}

/* ---- index ---- */
.page-title {
  font-family: var(--font-display, inherit);
  font-size: clamp(30px, 6vw, 46px); margin: 8px 0 6px; line-height: 1.1;
}
.page-sub { color: var(--text-body, #4a5170); margin: 0 0 36px; }

.posts-list { display: flex; flex-direction: column; }

.card {
  display: block; text-decoration: none; color: inherit;
  padding: 22px 0; border-top: 1px solid var(--border-default, #e7e8ef);
}
/* Grid columns already follow the card's own dir, so an RTL card puts the
   thumbnail on the right with no extra rules. Overriding the order here as well
   would flip it twice and land it back on the left. */
.card.has-thumb {
  display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: start;
}

.card-thumb {
  aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: var(--line-100, #f1f2f6);
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card-date {
  font-size: 13px; color: var(--text-muted, #8b90a8);
  text-transform: uppercase; letter-spacing: .04em;
}
.card-title {
  font-family: var(--font-display, inherit); font-size: 24px;
  margin: 6px 0 8px; line-height: 1.25; transition: color .15s;
}
.card:hover .card-title { color: var(--text-brand, #6fa32c); }
.card-excerpt { color: var(--text-body, #4a5170); margin: 0; }

@media (max-width: 560px) {
  .card.has-thumb { grid-template-columns: 1fr; }
  .card-thumb { aspect-ratio: 16 / 9; }
}

/* ---- article ---- */
.post .meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  color: var(--text-muted, #8b90a8); font-size: 14px; margin: 0 0 4px;
}
.post .meta .crumb { margin-inline-end: auto; }
.post-title {
  font-family: var(--font-display, inherit);
  font-size: clamp(28px, 6vw, 44px); line-height: 1.12; margin: 6px 0 20px;
}
[dir='rtl'] .post-title { font-family: var(--font-display-ar, inherit); }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 20px; }
.tags li {
  font-size: 13px; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-green, #eaf6d8); color: var(--text-brand, #6fa32c);
}

.cover { margin: 0 0 28px; }
.cover img { width: 100%; height: auto; border-radius: 14px; display: block; }

.draft-banner {
  background: var(--surface-sun, #fff2cf); border: 1px solid var(--accent-sun, #feb818);
  color: #6b4c00; padding: 10px 14px; border-radius: 10px; font-size: 14px;
}

/* rich content — mirrors the editor so what she writes is what she sees */
.content { font-size: 18px; line-height: 1.75; }
.content h1 { font-size: 2em; }
.content h2 { font-size: 1.6em; }
.content h3 { font-size: 1.3em; }
.content h4 { font-size: 1.1em; }
.content h1, .content h2, .content h3, .content h4 {
  font-family: var(--font-display, inherit); line-height: 1.25; margin: 1.2em 0 .4em;
}
[dir='rtl'] .content h1, [dir='rtl'] .content h2,
[dir='rtl'] .content h3, [dir='rtl'] .content h4 {
  font-family: var(--font-display-ar, inherit);
}
.content p { margin: 0 0 1.1em; }
.content a { color: var(--text-link, #0a86c4); }
.content ul, .content ol { padding-inline-start: 1.4em; margin: 0 0 1.1em; }
.content blockquote {
  margin: 1.2em 0; padding: .5em 1.2em;
  border-inline-start: 4px solid var(--action-primary, #90c541);
  color: var(--text-body, #4a5170); background: var(--surface-green, #eaf6d8);
  border-radius: 6px;
}
.content img { max-width: 100%; height: auto; border-radius: 12px; margin: .5em 0; }
.content figure { margin: 1.4em 0; }
.content figcaption {
  font-size: 14px; color: var(--text-muted, #8b90a8); text-align: center; margin-top: .5em;
}
.content table { width: 100%; border-collapse: collapse; margin: 0 0 1.1em; }
.content th, .content td {
  border: 1px solid var(--border-default, #e7e8ef); padding: 8px 10px; text-align: start;
}
.content pre {
  background: var(--line-100, #f1f2f6); padding: 14px 16px;
  border-radius: 10px; overflow-x: auto;
}

/* ---- share + prev/next ---- */
.share {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--border-default, #e7e8ef); font-size: 14px;
}
.share-label { color: var(--text-muted, #8b90a8); font-weight: 600; }

.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.prevnext .pn {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--border-default, #e7e8ef); border-radius: 12px;
  padding: 14px 16px; background: var(--surface-card, #fff); font-weight: 600;
}
.prevnext .pn:hover { border-color: var(--border-strong, #8b90a8); }
.prevnext .pn small {
  display: block; font-weight: 400; color: var(--text-muted, #8b90a8);
  text-transform: uppercase; letter-spacing: .04em; font-size: 12px; margin-bottom: 4px;
}
@media (max-width: 560px) { .prevnext { grid-template-columns: 1fr; } }

/* ---- comments ---- */
.comments { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--border-default, #e7e8ef); }
.comments-title {
  font-family: var(--font-display, inherit); font-size: 22px;
  margin: 0 0 20px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
[dir='rtl'] .comments-title { font-family: var(--font-display-ar, inherit); }
.comments-count { font-family: var(--font-body, inherit); font-size: 14px; font-weight: 400; color: var(--text-muted, #8b90a8); }

.comment-list { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 18px; }
.comment {
  background: var(--surface-card, #fff); border: 1px solid var(--border-default, #e7e8ef);
  border-radius: 12px; padding: 16px 18px;
}
.comment-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.comment-author { font-weight: 700; }
.comment-head time { font-size: 13px; color: var(--text-muted, #8b90a8); }
.comment-body { font-size: 16px; line-height: 1.65; }
.comment-body p { margin: 0 0 .7em; }
.comment-body p:last-child { margin-bottom: 0; }

.comment-form {
  background: var(--surface-card, #fff); border: 1px solid var(--border-default, #e7e8ef);
  border-radius: 14px; padding: 20px;
}
.comment-form h3 {
  margin: 0 0 16px; font-family: var(--font-display, inherit); font-size: 18px;
}
[dir='rtl'] .comment-form h3 { font-family: var(--font-display-ar, inherit); }
.comment-form label { display: block; margin-bottom: 14px; }
.comment-form label > span {
  display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px;
  color: var(--text-body, #4a5170);
}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form textarea {
  width: 100%; padding: 10px 12px; font: inherit; color: inherit;
  border: 1px solid var(--border-default, #e7e8ef); border-radius: 9px;
  background: var(--surface-page, #fbfcf8);
}
.comment-form textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.comment-form input:focus, .comment-form textarea:focus {
  outline: 2px solid var(--focus-ring, #02aef0); outline-offset: 1px;
  background: var(--surface-card, #fff);
}
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .cf-row { grid-template-columns: 1fr; gap: 0; } }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cf-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.cf-submit {
  background: var(--action-primary, #90c541); border: 1px solid var(--action-primary-press, #6fa32c);
  color: #14330a; font: inherit; font-weight: 700; padding: 10px 20px;
  border-radius: 10px; cursor: pointer;
}
.cf-submit:hover { background: var(--action-primary-hover, #a6d65f); }
.cf-submit:disabled { opacity: .55; cursor: not-allowed; }
.cf-note { font-size: 13px; color: var(--text-muted, #8b90a8); }
.cf-msg { font-size: 14px; margin: 12px 0 0; min-height: 1em; }
.cf-msg.ok { color: var(--text-brand, #6fa32c); font-weight: 600; }
.cf-msg.err { color: var(--coral-500, #ef4136); }

.comments-closed {
  color: var(--text-muted, #8b90a8); font-size: 14px; background: var(--line-100, #f1f2f6);
  padding: 14px 16px; border-radius: 10px;
}

.state { color: var(--text-muted, #8b90a8); padding: 40px 0; text-align: center; }