/* SupplementAI — blog/index.html page-specific styles */

/* Nav */
.site-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--sh-xs);
}
.nav-logo { font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--green);text-decoration:none;padding:16px 0;flex-shrink:0; }
.nav-links { display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none; }
.nav-links::-webkit-scrollbar { display:none; }
.nav-link { padding:8px 14px;border-radius:var(--r-xs);font-size:.8rem;font-weight:600;color:var(--text-2);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s; }
.nav-link:hover { background:var(--surface2);color:var(--text); }
.nav-link.active { background:var(--green-light);color:var(--green); }
.nav-cta { padding:8px 16px;border-radius:var(--r-xs);background:var(--green);color:#fff;font-size:.8rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .15s;flex-shrink:0; }
.nav-cta:hover { background:var(--green-mid); }
.nav-toggle { display:none;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:10px;color:var(--text);border-radius:var(--r-xs);transition:background .15s;flex-shrink:0;-webkit-tap-highlight-color:transparent; }
.nav-toggle:hover { background:var(--surface2); }
@media (max-width: 768px) {
  .nav-toggle { display:flex; }
  .nav-cta { display:none; }
  .nav-links { display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1.5px solid var(--border);flex-direction:column;padding:8px 12px 14px;box-shadow:0 6px 30px rgba(10,24,16,.11);gap:2px;z-index:99; }
  .nav-links.open { display:flex; }
  .nav-link { padding:13px 16px;font-size:.9rem; }
}

/* Hero */
.blog-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 56px 24px 48px;
  text-align: center;
}
.eyebrow { display:flex;align-items:center;justify-content:center;gap:8px;font-size:.63rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--green-mid);margin-bottom:8px; }
.eyebrow::before,.eyebrow::after { content:'';width:18px;height:2px;background:var(--green-mid);border-radius:2px; }
.blog-hero h1 { font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.015em;color:var(--text);line-height:1.18;max-width:560px;margin:0 auto 14px; }
.blog-hero h1 em { font-style:italic;color:var(--green); }
.blog-hero p { color:var(--text-2);font-size:.95rem;max-width:420px;margin:0 auto; }

/* Main */
main { max-width: 960px; margin: 0 auto; padding: 48px 24px 100px; }

/* Category filter */
.category-bar { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px; }
.cat-btn { padding:7px 16px;border-radius:99px;border:1.5px solid var(--border);background:var(--surface);font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .16s; }
.cat-btn:hover { border-color:var(--border-focus); }
.cat-btn.active { background:var(--green);border-color:var(--green);color:#fff; }

/* Article grid */
.articles-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px; }

/* Article card */
.article-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.article-card:hover { border-color:var(--green-border);transform:translateY(-4px);box-shadow:var(--sh-md); }

.card-accent { height: 4px; }
.accent-green  { background: linear-gradient(90deg, var(--green), var(--green-mid)); }
.accent-amber  { background: linear-gradient(90deg, var(--amber), #d08020); }
.accent-blue   { background: linear-gradient(90deg, #1e4a8a, #2e6cbf); }

.card-content { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 12px; }

.card-meta { display:flex;align-items:center;gap:10px;font-size:.71rem;font-weight:600; }
.card-cat { color:var(--green-mid);text-transform:uppercase;letter-spacing:.1em; }
.card-dot { color:var(--border); }
.card-read { color:var(--muted); }

.card-title { font-family:'Playfair Display',Georgia,serif;font-size:1.1rem;font-weight:700;color:var(--text);line-height:1.3; }
.card-excerpt { font-size:.85rem;color:var(--text-2);line-height:1.7;flex:1; }

.card-footer-row { display:flex;align-items:center;justify-content:space-between;margin-top:4px; }
.card-date { font-size:.71rem;color:var(--muted); }
.card-arrow { font-size:.85rem;font-weight:700;color:var(--green);transition:transform .2s; }
.article-card:hover .card-arrow { transform:translateX(4px); }

/* Featured card */
.article-card.featured { grid-column: 1 / -1; flex-direction: row; }
.article-card.featured .card-content { padding: 32px; }
.article-card.featured .card-accent { width: 4px; height: auto; flex-shrink: 0; }
.article-card.featured .card-title { font-size: 1.4rem; }
.article-card.featured .card-excerpt { font-size: .9rem; }
@media (max-width: 640px) {
  .article-card.featured { flex-direction: column; }
  .article-card.featured .card-accent { width: auto; height: 4px; }
}

/* Footer */
footer { text-align:center;padding:24px;color:var(--muted);font-size:.71rem;border-top:1px solid var(--border);line-height:1.7; }
.affiliate-bar { background: var(--amber-light); border-bottom: 1px solid var(--amber-border); padding: 9px 24px; font-size: .74rem; font-weight: 500; color: var(--amber); display: flex; align-items: center; justify-content: center; gap: 7px; line-height: 1.5; }
.affiliate-bar svg { flex-shrink: 0; }