/* Convergent blog — self-contained stylesheet, no web fonts (privacy + speed).
   Light theme aligned with the main convergent.tn brand (IBM-blue / navy / gold).
   Code blocks stay dark (github-dark) for contrast — set via inline styles by Hugo. */
:root {
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --surface: #f1f5f9;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --fg: #0f1923;            /* near-black navy text */
  --fg-muted: #64748b;
  --navy: #0b1526;
  --accent: #0052cc;        /* IBM-blue authority — matches main site --primary */
  --accent-dim: #003d99;
  --gold: #c9922a;          /* warm amber accent — matches main site */
  --link: #0052cc;
  --code-bg: #0d1117;       /* github-dark — matches inline-highlighted blocks */
  --code-fg: #e6edf3;
  --maxw: 46rem;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

/* ---- Header ---- */
.site-header {
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .92);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(6px);
}
.header-inner { display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding-top: .85rem; padding-bottom: .85rem; flex-wrap: wrap; }
.brand { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--navy); text-decoration: none; }
.brand-dot { color: var(--gold); }
.brand-sub { color: var(--fg-muted); font-weight: 400; }

/* main-site navigation — links the blog back into convergent.tn (cohesion + SEO) */
.site-nav { display: flex; gap: .25rem; flex: 1 1 auto; flex-wrap: wrap; }
.site-nav a { font-size: .82rem; color: var(--fg-muted); text-decoration: none; padding: .2rem .5rem; border-radius: 5px; }
.site-nav a:hover { color: var(--accent); background: var(--surface); }

.lang-nav { display: flex; gap: .25rem; }
.lang-nav a { font-family: var(--mono); font-size: .8rem; color: var(--fg-muted); text-decoration: none; padding: .2rem .45rem; border-radius: 5px; }
.lang-nav a.active { color: #fff; background: var(--accent); }
.lang-nav a:not(.active):hover { color: var(--fg); background: var(--surface); }

/* ---- Layout rhythm ---- */
main.container { padding-top: 2.5rem; padding-bottom: 4rem; }
.intro h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.02em; color: var(--navy); }
.intro { margin-bottom: 2.5rem; }

/* ---- Post list ---- */
.post-list { display: grid; gap: 1.25rem; }
.post-card { border: 1px solid var(--border); border-radius: 10px; padding: 1.2rem 1.4rem; background: var(--bg-soft); transition: border-color .15s, box-shadow .15s, transform .15s; }
.post-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,82,204,.10); transform: translateY(-1px); }
.post-card h2 { margin: 0 0 .25rem; font-size: 1.25rem; }
.post-card h2 a { color: var(--navy); text-decoration: none; }
.post-card h2 a:hover { color: var(--accent); }
.excerpt { color: var(--fg-muted); margin: .4rem 0 0; font-size: .95rem; }
.meta { color: var(--fg-muted); font-family: var(--mono); font-size: .8rem; margin: 0; }
.muted { color: var(--fg-muted); }

/* ---- Article ---- */
.post-head h1 { font-size: 2.1rem; line-height: 1.18; letter-spacing: -.02em; margin: 0 0 .6rem; color: var(--navy); }
.post-head { margin-bottom: 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.post-body { font-size: 1.02rem; }
.post-body h2 { margin-top: 2.6rem; font-size: 1.5rem; letter-spacing: -.01em; padding-top: .4rem; color: var(--navy); }
.post-body h3 { margin-top: 1.8rem; font-size: 1.18rem; color: var(--navy); }
.post-body h2, .post-body h3 { scroll-margin-top: 4.5rem; }
.post-body a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; }
.post-body a:hover { border-bottom-color: var(--link); }
.post-body img { max-width: 100%; border-radius: 8px; }
.post-body hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }

/* blockquotes — used for chapô and ⚠️ callouts */
.post-body blockquote {
  margin: 1.5rem 0; padding: .2rem 1.2rem; border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: 0 8px 8px 0; color: var(--fg);
}
.post-body blockquote h3 { margin-top: 1rem; color: var(--accent-dim); }

/* code — inline */
.post-body :not(pre) > code {
  font-family: var(--mono); font-size: .88em; background: var(--surface);
  color: var(--accent-dim);
  padding: .12em .4em; border-radius: 4px; border: 1px solid var(--border);
  /* long URLs/paths in prose and table cells must wrap, not widen the page */
  overflow-wrap: anywhere;
}
/* code — blocks: dark for contrast, matching Hugo's inline-highlighted fences */
.post-body pre {
  font-family: var(--mono); font-size: .85rem; line-height: 1.55;
  padding: 1rem 1.1rem; border-radius: 8px; overflow-x: auto;
  border: 1px solid var(--border-strong); color: var(--code-fg); background: var(--code-bg) !important;
}
.post-body pre code { background: none; border: none; padding: 0; color: inherit; }

/* tables */
.post-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .92rem; }
.post-body th, .post-body td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.post-body th { color: var(--navy); font-weight: 600; border-bottom: 2px solid var(--border-strong); }
.post-body td:first-child { white-space: nowrap; }

/* checklists */
.post-body input[type="checkbox"] { accent-color: var(--accent); margin-right: .4rem; }
.post-body ul li::marker { color: var(--accent); }

/* tags */
.post-tags { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.tag { font-family: var(--mono); font-size: .78rem; color: var(--fg-muted); text-decoration: none; }
.tag:hover { color: var(--accent); }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--border); padding: 2rem 0; margin-top: 3rem; color: var(--fg-muted); font-size: .88rem; background: var(--bg-soft); }
.site-footer a { color: var(--link); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .muted { font-size: .8rem; margin-top: .3rem; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .intro h1, .post-head h1 { font-size: 1.6rem; }
  .post-body td:first-child { white-space: normal; }
  /* a wide table scrolls inside its own box; the page itself never does */
  .post-body table { display: block; overflow-x: auto; }
  .site-nav { order: 3; flex-basis: 100%; }
}