/* Common styles for static blog pages to match site layout */
:root {
  --bg: #FFFFFF;
  --card: #F5F5F5;
  --border: #E5E7EB;
  --accent: #1E3A8A;
  --accent-10: rgba(30,58,138,0.10);
  --text: #111827;
  --muted: #6B7280;
}

* { box-sizing: border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:var(--bg); color:var(--text); font-family: Inter, system-ui, Avenir, Helvetica, Arial, "PingFang SC", "Microsoft Yahei", sans-serif; line-height:1.6; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Container */
.container { max-width: 1080px; margin: 0 auto; padding: 24px; }

/* Navbar (matches app NavBar.vue) */
.navbar { position: sticky; top: 0; background:#fff; border-bottom:1px solid var(--border); z-index:10; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; max-width:1080px; margin:0 auto; padding:12px 24px; }
.brand { font-weight:700; cursor:pointer; color:var(--accent); display:flex; align-items:center; gap:8px; }
.brand .logo { width:24px; height:24px; }
.links { display:flex; gap:16px; align-items:center; }
.link { color: var(--text); text-decoration:none; }
.link-active, .link:hover { color: var(--accent); }

/* Blog list (index) */
h1 { margin: 8px 0 24px; }
.post-list { display: flex; flex-direction: column; gap: 14px; }
.post-item { padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: #fff; transition: box-shadow .2s ease, transform .1s ease, border-color .2s ease; }
.post-item:hover { box-shadow: 0 4px 14px rgba(17,24,39,0.08); transform: translateY(-1px); border-color: var(--accent-10); }
.post-item > a { color: var(--accent); font-weight: 600; font-size: 18px; line-height: 1.4; text-decoration: none; }
.post-item > a:hover { text-decoration: underline; }
.post-item p { color: var(--muted); margin: 6px 0 8px; font-size: 14px; }
.post-item .meta { color: var(--muted); font-size: 13px; font-weight: 600; }

/* Footer (matches app footer) */
.footer { border-top: 1px solid var(--border); background: transparent; }
.footer-inner { max-width: 1080px; margin: 0 auto; padding: 12px 0 24px; }
.site-links { background: transparent; padding: 18px 12px; }
.links-grid { display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; align-items:flex-start; }
.logo-col { display:flex; align-items:center; }
.sf-logo { width:48px; height:48px; opacity:0.9; }
.col-title { font-weight:700; color: var(--text); margin-bottom: 8px; }
.link-list { list-style:none; padding:0; margin:0; }
.link-list li { margin: 6px 0; }
.footer-link { color:#1f2937; text-decoration:none; }
.footer-link:hover { text-decoration:underline; }
.copyright { text-align:center; color: var(--muted); font-size:12px; margin-top: 8px; }

@media (max-width: 900px) {
  .links-grid { grid-template-columns: 1fr 1fr; }
}

/* Content tables (used in technical blog articles) */
.table-wrap { width: 100%; overflow-x: auto; margin: 12px 0 16px; }
.content-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; }
.content-table th, .content-table td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.content-table thead th { background: #f9fafb; font-weight: 600; }
.content-table tbody tr:nth-child(even) { background: #fcfcfc; }
.content-table code { background: var(--accent-10); padding: 2px 4px; border-radius: 3px; }

@media (max-width: 640px) {
  .content-table th, .content-table td { padding: 8px 10px; }
  .post-item > a { font-size: 16px; }
  .post-item p { font-size: 13px; }
}