:root {
  --color-primary: #2563eb;
  --color-text: #1e293b;
  --color-muted: #64748b;
  --color-bg: #fff;
  --font: system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  margin: 0;
  line-height: 1.7;
}

.container { max-width: 860px; margin: 0 auto; padding: 0 1.5rem; }

.site-header {
  border-bottom: 1px solid #e2e8f0;
  padding: 1rem 0;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-primary);
  text-decoration: none;
}
.site-nav a {
  margin-left: 1.5rem;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9375rem;
}
.site-nav a:hover { color: var(--color-primary); }

.site-main { padding: 3rem 0; }

.site-footer {
  border-top: 1px solid #e2e8f0;
  padding: 1.5rem 0;
  color: var(--color-muted);
  font-size: 0.875rem;
}

h1 { font-size: 2rem; font-weight: 700; margin: 0 0 1rem; }
h2 { font-size: 1.5rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }

a { color: var(--color-primary); }

.post-card { border-bottom: 1px solid #e2e8f0; padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.post-card h2 { margin: 0 0 0.25rem; }
.post-card h2 a { text-decoration: none; color: var(--color-text); }
.post-card h2 a:hover { color: var(--color-primary); }
.post-meta { color: var(--color-muted); font-size: 0.875rem; margin: 0 0 0.5rem; }

.blog-post h1 { margin-bottom: 0.5rem; }
.blog-post .post-body { margin-top: 2rem; }
.blog-post .post-body img { max-width: 100%; height: auto; }

.welcome, .not-found { text-align: center; padding: 4rem 0; }

/* Search */
.search-form         { display:flex; gap:.5rem; margin:1.5rem 0; }
.search-form input   { flex:1; padding:.6rem 1rem; border:1px solid #cbd5e1; border-radius:6px; font-size:1rem; }
.search-form button  { padding:.6rem 1.2rem; background:#2563eb; color:#fff; border:none; border-radius:6px; cursor:pointer; }
.search-form button:hover { background:#1d4ed8; }
.search-count        { color:#64748b; margin-bottom:1rem; }
.search-empty        { color:#64748b; margin-top:1rem; }
.search-results      { list-style:none; padding:0; }
.search-result       { border-bottom:1px solid #e2e8f0; padding:.75rem 0; display:flex; align-items:baseline; justify-content:space-between; }
.search-result a     { font-size:1.05rem; font-weight:500; text-decoration:none; color:#1e293b; }
.search-result a:hover { color:#2563eb; }
.search-type         { font-size:.75rem; background:#f1f5f9; color:#64748b; padding:.15em .5em; border-radius:9999px; }

/* Forms */
.form-page          { max-width:640px; margin:0 auto; }
.vcms-form          { background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:2rem; }
.form-field         { margin-bottom:1.25rem; }
.form-field label   { display:block; font-weight:500; margin-bottom:.35rem; }
.form-field input,
.form-field select,
.form-field textarea { width:100%; padding:.55rem .85rem; border:1px solid #cbd5e1; border-radius:6px; font-size:1rem; font-family:inherit; }
.form-field textarea { resize:vertical; }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color:#ef4444; }
.form-error         { color:#ef4444; font-size:.82rem; margin-top:.25rem; display:block; }
.required           { color:#ef4444; }
.form-checkbox,
.form-radio         { display:flex; align-items:center; gap:.5rem; margin:.25rem 0; }
.form-checkbox input,.form-radio input { width:auto; }
.form-submit        { display:inline-block; padding:.65rem 1.5rem; background:#2563eb; color:#fff; border:none; border-radius:6px; font-size:1rem; cursor:pointer; }
.form-submit:hover  { background:#1d4ed8; }
.form-success       { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; border-radius:8px; padding:1.5rem; text-align:center; }
.vcms-empty         { color:#94a3b8; text-align:center; padding:2rem; }