/* usaindiacfo.com blog + admin stylesheet
 * Hand-written subset of the design tokens in docs/design-system/MASTER.md
 * (dev repo). The marketing pages get their CSS from the Next.js export;
 * this file exists only because the PHP blog/admin pages are outside that
 * build. Light mode only for v1 — dark-mode parity is a documented fast-follow,
 * not implemented here (see build repo README).
 */

:root {
  --cfo-navy-900: #0f2040;
  --cfo-teal-500: #0ea5c9;
  --cfo-teal-400: #38bdf8;
  --cfo-gold-500: #c9960e;
  --cfo-blue-500: #3b7dd8;

  --cfo-bg: #ffffff;
  --cfo-bg-subtle: #f8fafc;
  --cfo-bg-navy: #0f2040;
  --cfo-fg: #0f172a;
  --cfo-fg-muted: #64748b;
  --cfo-border: #e2e8f0;
  --cfo-action: #0ea5c9;
  --cfo-action-hover: #38bdf8;
  --cfo-secondary: #2d5da0;
  --cfo-accent-hni: #c9960e;

  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.625;
  color: var(--cfo-fg);
  background: var(--cfo-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--cfo-navy-900);
  line-height: 1.25;
  margin: 0 0 0.5em;
}

a { color: var(--cfo-action); text-decoration: none; }
a:hover { color: var(--cfo-action-hover); text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* Site header — links back to the main (Next.js) site */
.site-header {
  background: var(--cfo-bg-navy);
  padding: 1rem 0;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.site-header a.brand { color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; }
.site-header nav a { color: #cbd5e1; margin-left: 1.5rem; font-size: 0.9rem; }
.site-header nav a:hover { color: #fff; }

/* Eyebrow / category label */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cfo-action);
  margin-bottom: 0.5rem;
}

/* Blog index grid */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}
.post-card {
  border: 1px solid var(--cfo-border);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--cfo-bg);
  transition: box-shadow 0.2s, transform 0.2s;
}
.post-card:hover { box-shadow: 0 4px 24px rgba(10,22,40,0.08); transform: translateY(-2px); }
.post-card .thumb { height: 11rem; background: var(--cfo-bg-subtle); }
.post-card .body { padding: 1.25rem; }
.post-card h3 { font-size: 1rem; margin: 0.5rem 0; }
.post-card p { color: var(--cfo-fg-muted); font-size: 0.9rem; margin: 0.5rem 0; }
.post-card .meta { font-size: 0.75rem; color: var(--cfo-fg-muted); }

/* Single post */
.post-article { max-width: 720px; margin: 0 auto; padding: 2.5rem 1.25rem; }
.post-article .meta { color: var(--cfo-fg-muted); font-size: 0.875rem; margin-bottom: 2rem; }
.post-article .body { font-size: 1.05rem; }
.post-article .body h2 { margin-top: 2rem; font-size: 1.5rem; }
.post-article .body p { margin: 1rem 0; }
.post-article .body ul, .post-article .body ol { margin: 1rem 0; padding-left: 1.5rem; }
.post-article .body img { max-width: 100%; border-radius: 0.75rem; }
.author-box {
  display: flex; gap: 1rem; align-items: center;
  border-top: 1px solid var(--cfo-border); margin-top: 2.5rem; padding-top: 1.5rem;
}
.author-box img { width: 3rem; height: 3rem; border-radius: 999px; object-fit: cover; background: var(--cfo-bg-subtle); }
.author-box .credentials { color: var(--cfo-action); font-size: 0.8rem; font-weight: 600; }

/* Category pills */
.category-pills { display: flex; gap: 0.5rem; overflow-x: auto; margin: 1.5rem 0; }
.category-pills a {
  padding: 0.35rem 1rem; border-radius: 999px; border: 1px solid var(--cfo-border);
  color: var(--cfo-fg); font-size: 0.875rem; white-space: nowrap;
}
.category-pills a.active, .category-pills a:hover {
  background: var(--cfo-action); border-color: var(--cfo-action); color: #fff; text-decoration: none;
}

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 0.5rem; margin: 2rem 0; }
.pagination a, .pagination span {
  padding: 0.5rem 0.9rem; border: 1px solid var(--cfo-border); border-radius: 0.5rem; font-size: 0.875rem;
}
.pagination span.current { background: var(--cfo-action); color: #fff; border-color: var(--cfo-action); }

/* Forms (admin login, post editor) */
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.35rem; }
.form-field input[type=text],
.form-field input[type=password],
.form-field input[type=email],
.form-field input[type=file],
.form-field select,
.form-field textarea {
  width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--cfo-border); border-radius: 0.5rem;
  font-family: var(--font-body); font-size: 0.95rem; color: var(--cfo-fg); background: var(--cfo-bg);
}
.form-field textarea { min-height: 260px; font-family: ui-monospace, monospace; font-size: 0.85rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem; border: none; border-radius: 0.5rem;
  padding: 0.65rem 1.25rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--cfo-action); color: #fff;
}
.btn:hover { background: var(--cfo-action-hover); color: #fff; text-decoration: none; }
.btn.btn-danger { background: #dc2626; }
.btn.btn-secondary { background: var(--cfo-bg-subtle); color: var(--cfo-fg); border: 1px solid var(--cfo-border); }

.alert { padding: 0.75rem 1rem; border-radius: 0.5rem; margin-bottom: 1.25rem; font-size: 0.9rem; }
.alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

/* Admin dashboard table */
.admin-shell { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem; }
.admin-shell .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.admin-table th, table.admin-table td {
  text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--cfo-border);
}
table.admin-table th { color: var(--cfo-fg-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }
.badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-draft { background: #f1f5f9; color: #64748b; }
.badge-published { background: #f0fdf4; color: #15803d; }