/* ==========================================================================
   NOCAF shared blog stylesheet — /assets/css/blog.css
   Loaded on every /blog/* post and /blog/category/* page (body.nc-blog).
   Gives older posts (several legacy templates) the same single-column,
   readable look as the newer .nc-post articles. Mobile-first.
   ========================================================================== */

body.nc-blog { background: #0a0a0a; color: #e8e8e8; }

/* ---- Page container (covers all legacy wrappers) ---- */
body.nc-blog main,
body.nc-blog > article {
  display: block;
  max-width: 820px;
  margin: 0 auto;
  padding: 104px 20px 60px;
  min-height: 0;
  background: none;
}
body.nc-blog.nc-category main { max-width: 1040px; }
body.nc-blog main .container,
body.nc-blog > article .container { max-width: none; padding: 0; margin: 0; }
body.nc-blog main article,
body.nc-blog .blog-article,
body.nc-blog .article-page,
body.nc-blog .blog-post {
  display: block; max-width: none; margin: 0; padding: 0; grid-template-columns: none;
}
body.nc-blog main > .blog-article,
body.nc-blog main > .blog-post { padding: 0; }

/* ---- Breadcrumb ---- */
body.nc-blog .breadcrumb { max-width: none; padding: 0 0 1.2rem; margin: 0; font-size: 0.88rem; color: #9a9a9a; }
body.nc-blog .breadcrumb a { color: #8ea2ff; text-decoration: none; }
body.nc-blog .breadcrumb span { color: #cfcfcf; }

/* ---- Article header ---- */
body.nc-blog .article-header,
body.nc-blog article .blog-header,
body.nc-blog .category-header {
  text-align: center; margin: 0 0 2rem; padding: 0; background: none; border: 0;
}
body.nc-blog .article-header h1,
body.nc-blog article .blog-header h1,
body.nc-blog .category-header h1,
body.nc-blog main h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.2; font-weight: 800;
  margin: 0 0 0.75rem; color: #fff; background: none; -webkit-text-fill-color: #fff;
}
body.nc-blog .article-subtitle,
body.nc-blog .category-description,
body.nc-blog .category-header p { color: #b5b5b5; font-size: 1.05rem; max-width: 680px; margin: 0 auto 0.75rem; }
body.nc-blog .article-meta,
body.nc-blog .blog-meta,
body.nc-blog .author-info {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; justify-content: center; align-items: center;
  color: #a0a0a0; font-size: 0.92rem; margin: 0.5rem 0; padding: 0; border: 0; background: none;
}
body.nc-blog .author-details { display: flex; flex-direction: column; align-items: center; }
body.nc-blog .author-details strong { color: #e8e8e8; }
body.nc-blog .article-meta .category,
body.nc-blog .article-category,
body.nc-blog .article-category-badge,
body.nc-blog .blog-categories a,
body.nc-blog .article-tags a,
body.nc-blog .tag {
  display: inline-block; background: rgba(76,110,245,0.15); color: #8ea2ff; padding: 4px 12px;
  border-radius: 999px; text-decoration: none; font-size: 0.82rem; font-weight: 600; text-transform: none; letter-spacing: 0;
}
body.nc-blog .blog-categories,
body.nc-blog .article-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0.75rem 0; }
body.nc-blog .article-hero-image img,
body.nc-blog main img { max-width: 100%; height: auto; border-radius: 14px; }

/* ---- Body typography ---- */
body.nc-blog .article-content,
body.nc-blog .article-body,
body.nc-blog .blog-content,
body.nc-blog .category-content { font-size: 1.07rem; line-height: 1.75; color: #e8e8e8; max-width: none; padding: 0; margin: 0; }
body.nc-blog main p,
body.nc-blog > article p { margin: 0 0 1.1rem; line-height: 1.75; color: #e0e0e0; }
body.nc-blog main h2,
body.nc-blog > article h2 {
  font-size: 1.6rem; line-height: 1.3; margin: 2.4rem 0 1rem; color: #fff; font-weight: 700; padding: 0; border: 0;
}
body.nc-blog .article-content h2::before { content: none; display: none; }
body.nc-blog main h3,
body.nc-blog > article h3 { font-size: 1.22rem; line-height: 1.35; margin: 1.6rem 0 0.7rem; color: #fff; font-weight: 700; }
body.nc-blog main h4,
body.nc-blog > article h4 { font-size: 1.05rem; margin: 1.2rem 0 0.5rem; color: #fff; font-weight: 700; }
body.nc-blog main ul, body.nc-blog main ol,
body.nc-blog > article ul, body.nc-blog > article ol { margin: 0 0 1.2rem 1.4rem; padding: 0; }
body.nc-blog main li,
body.nc-blog > article li { margin: 0 0 0.5rem; line-height: 1.7; color: #e0e0e0; }
body.nc-blog main li strong, body.nc-blog main p strong { color: #fff; }
body.nc-blog main a,
body.nc-blog > article a { color: #8ea2ff; text-underline-offset: 2px; }
body.nc-blog main a:hover { color: #b3c0ff; }
body.nc-blog main blockquote,
body.nc-blog > article blockquote {
  border-left: 4px solid #4c6ef5; background: rgba(76,110,245,0.08); padding: 0.9rem 1.2rem;
  margin: 1.2rem 0 1.4rem; border-radius: 0 10px 10px 0; color: #dfe4ff; font-style: italic;
}
body.nc-blog hr { border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 2rem 0; }
body.nc-blog .article-intro,
body.nc-blog .lead {
  font-size: 1.12rem; color: #e8e8e8; background: rgba(76,110,245,0.10); border: 1px solid rgba(76,110,245,0.35);
  border-radius: 14px; padding: 1.1rem 1.3rem; margin: 0 0 1.6rem;
}

/* ---- Tables (any table in the article becomes scrollable on mobile) ---- */
body.nc-blog main table,
body.nc-blog > article table {
  width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 0;
  display: table; background: none; border-radius: 0;
}
body.nc-blog .nc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0 1.4rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); }
body.nc-blog main th,
body.nc-blog > article th { background: #1c2340; color: #fff; text-align: left; padding: 10px 12px; font-weight: 600; }
body.nc-blog main td,
body.nc-blog > article td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); vertical-align: top; color: #e0e0e0; }
body.nc-blog main tbody tr:nth-child(even) td { background: rgba(255,255,255,0.03); }

/* ---- Callout / card components used by legacy templates ---- */
body.nc-blog .research-study, body.nc-blog .testimonial, body.nc-blog .faq-item,
body.nc-blog .timeline-item, body.nc-blog .benefit-item, body.nc-blog .tip-card,
body.nc-blog .method-card, body.nc-blog .method-box, body.nc-blog .factor-card,
body.nc-blog .stat-card, body.nc-blog .alternative-item, body.nc-blog .strategy-item,
body.nc-blog .symptom-item, body.nc-blog .sign-item, body.nc-blog .mistake-item,
body.nc-blog .step-item, body.nc-blog .key-takeaway, body.nc-blog .article-callout,
body.nc-blog .symptoms-box, body.nc-blog .warning-box, body.nc-blog .feature-highlight,
body.nc-blog .timeline-stage, body.nc-blog .content-section .highlight,
body.nc-blog [class*="-box"]:not(.nc-answer):not(.nc-disclaimer),
body.nc-blog .quick-facts, body.nc-blog .info-box, body.nc-blog .tip, body.nc-blog .warning,
body.nc-blog .success-box, body.nc-blog .article-card, body.nc-blog .category-card,
body.nc-blog .story-card, body.nc-blog .value-prop {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px;
  padding: 1.1rem 1.3rem; margin: 0 0 1rem; color: #e0e0e0; box-shadow: none;
}
body.nc-blog .warning, body.nc-blog .warning-box, body.nc-blog .danger-alert, body.nc-blog .addiction-alert {
  background: rgba(255,193,7,0.08); border: 1px solid rgba(255,193,7,0.35); border-left: 4px solid #ffc107;
  border-radius: 10px; padding: 0.9rem 1.1rem; margin: 0 0 1.2rem; color: #f3e3b0;
}
body.nc-blog .key-takeaway, body.nc-blog .article-callout, body.nc-blog .tip {
  background: rgba(76,110,245,0.10); border-color: rgba(76,110,245,0.40);
}
body.nc-blog .testimonial { border-left: 4px solid #4c6ef5; font-style: italic; }
body.nc-blog [class*="-box"] > *:last-child,
body.nc-blog .research-study > *:last-child, body.nc-blog .faq-item > *:last-child,
body.nc-blog .testimonial > *:last-child, body.nc-blog .timeline-item > *:last-child { margin-bottom: 0; }
body.nc-blog .faq-item h3, body.nc-blog .faq-item h4 { margin-top: 0; }

/* icon + text rows (benefit-item, step-item…) */
body.nc-blog .benefit-item, body.nc-blog .step-item, body.nc-blog .tip-card, body.nc-blog .timeline-item {
  display: flex; gap: 1rem; align-items: flex-start;
}
body.nc-blog .benefit-icon, body.nc-blog .step-number, body.nc-blog .tip-number, body.nc-blog .timeline-marker {
  flex: 0 0 auto; min-width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(76,110,245,0.2); color: #fff; border-radius: 10px; font-weight: 700; font-size: 1rem;
}
body.nc-blog .benefit-content, body.nc-blog .step-content, body.nc-blog .timeline-content { flex: 1 1 auto; min-width: 0; }
body.nc-blog .benefit-content h3, body.nc-blog .benefit-content h4,
body.nc-blog .step-content h3, body.nc-blog .step-content h4,
body.nc-blog .timeline-content h3, body.nc-blog .timeline-content h4 { margin-top: 0; }

/* grids of stats / cards */
body.nc-blog .stats-grid, body.nc-blog .method-stats, body.nc-blog .success-stats,
body.nc-blog .articles-grid, body.nc-blog .categories-grid, body.nc-blog .methods-grid,
body.nc-blog .alternatives-grid, body.nc-blog .health-benefits-grid, body.nc-blog .stories-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0 1.6rem;
}
body.nc-blog .stat-item, body.nc-blog .stat, body.nc-blog .metric {
  background: rgba(76,110,245,0.10); border: 1px solid rgba(76,110,245,0.3); border-radius: 12px; padding: 0.9rem; text-align: center;
}
body.nc-blog .stat-number, body.nc-blog .highlight-stat { display: block; font-size: 1.6rem; font-weight: 800; color: #8ea2ff; }
body.nc-blog .stat-label { display: block; font-size: 0.85rem; color: #b5b5b5; }
body.nc-blog .article-card h3, body.nc-blog .article-card h2 { margin-top: 0; font-size: 1.15rem; }
body.nc-blog .article-card a { text-decoration: none; }

/* ---- CTA blocks ---- */
body.nc-blog .cta-section, body.nc-blog .article-cta, body.nc-blog .app-cta {
  background: linear-gradient(135deg, rgba(76,110,245,0.22), rgba(76,110,245,0.06));
  border: 1px solid rgba(76,110,245,0.45); border-radius: 18px; padding: 1.6rem; margin: 2.4rem 0; text-align: center;
}
body.nc-blog .cta-section h2, body.nc-blog .cta-section h3 { margin-top: 0; }
body.nc-blog .cta-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1rem; }
body.nc-blog main .cta-btn, body.nc-blog main .cta-button, body.nc-blog main .download-btn,
body.nc-blog > article .cta-btn, body.nc-blog > article .cta-button {
  display: inline-block; padding: 0.75rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none;
  background: #4c6ef5; color: #fff; border: 1px solid #4c6ef5;
}
body.nc-blog main .cta-btn.secondary, body.nc-blog > article .cta-btn.secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
body.nc-blog main .cta-btn.primary, body.nc-blog > article .cta-btn.primary { background: #4c6ef5; color: #fff; }

/* ---- Sidebar / related posts: shown after the article as a box ---- */
body.nc-blog .sidebar, body.nc-blog aside, body.nc-blog .related-posts, body.nc-blog .related-articles {
  position: static; order: 0; width: auto; margin: 2.4rem 0 0; padding: 1.2rem 1.3rem;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; height: auto;
}
body.nc-blog .sidebar .related-posts, body.nc-blog aside .related-posts,
body.nc-blog .sidebar .sidebar-widget, body.nc-blog aside .sidebar-widget { margin: 0; padding: 0; border: 0; background: none; }
body.nc-blog .sidebar ul, body.nc-blog aside ul, body.nc-blog .related-posts ul { list-style: none; margin: 0; }
body.nc-blog .sidebar h3, body.nc-blog .sidebar h4, body.nc-blog aside h3, body.nc-blog aside h4,
body.nc-blog .related-posts h3, body.nc-blog .related-posts h4 { margin: 0 0 0.8rem; font-size: 1.1rem; color: #fff; padding: 0; border: 0; }
body.nc-blog .sidebar a, body.nc-blog aside a, body.nc-blog .related-posts a { display: inline-block; padding: 4px 0; color: #8ea2ff; }
body.nc-blog .article-footer, body.nc-blog .blog-footer-cta { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,0.1); }

/* ---- FAQ <details> support ---- */
body.nc-blog details { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 0.8rem 1.1rem; margin: 0 0 0.75rem; }
body.nc-blog summary { cursor: pointer; font-weight: 600; color: #fff; }

/* ---- Newsletter forms in legacy sidebars ---- */
body.nc-blog input[type="email"], body.nc-blog input[type="text"] {
  background: #111; color: #fff; border: 1px solid #333; border-radius: 8px; padding: 10px; font: inherit; width: 100%; margin: 0 0 0.6rem;
}
body.nc-blog main button, body.nc-blog .newsletter-btn { background: #4c6ef5; color: #fff; border: 0; border-radius: 999px; padding: 0.6rem 1.2rem; font-weight: 700; cursor: pointer; }

/* ---- Mobile ---- */
@media (max-width: 640px) {
  body.nc-blog main, body.nc-blog > article { padding: 88px 16px 48px; }
  body.nc-blog .article-content, body.nc-blog .article-body,
  body.nc-blog .blog-content, body.nc-blog .category-content { font-size: 1.02rem; }
  body.nc-blog main h2, body.nc-blog > article h2 { font-size: 1.38rem; margin-top: 2rem; }
  body.nc-blog main h3, body.nc-blog > article h3 { font-size: 1.12rem; }
  body.nc-blog .benefit-item, body.nc-blog .step-item, body.nc-blog .tip-card, body.nc-blog .timeline-item { gap: 0.75rem; }
  body.nc-blog main th, body.nc-blog main td { padding: 8px 10px; }
}

/* ---- Dark-theme overrides for light legacy components from styles.css ---- */
body.nc-blog div.comparison-table {
  display: block; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 1.1rem 1.3rem; grid-template-columns: none; overflow: visible;
}
body.nc-blog div.comparison-table h3 { margin-top: 0; }
body.nc-blog table.comparison-table { background: none; border-radius: 0; grid-template-columns: none; gap: 0; display: table; margin: 0; }
body.nc-blog .nocaf-vs-comparison, body.nc-blog .plan-vs-nocaf-comparison, body.nc-blog .method-comparison-section,
body.nc-blog .app-feature-showcase, body.nc-blog .final-comparison-cta, body.nc-blog .testimonial-card,
body.nc-blog .feature-explanation, body.nc-blog .cta-final, body.nc-blog .comparison-method,
body.nc-blog .manual-plan, body.nc-blog .going-alone, body.nc-blog .generic-apps, body.nc-blog .timeline-header {
  background: rgba(255,255,255,0.04) !important; color: #e0e0e0 !important; border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px; padding: 1.1rem 1.3rem; margin: 1rem 0 1.4rem; box-shadow: none;
}
body.nc-blog .nocaf-vs-comparison *, body.nc-blog .plan-vs-nocaf-comparison *, body.nc-blog .app-feature-showcase *,
body.nc-blog .final-comparison-cta *, body.nc-blog .manual-plan *, body.nc-blog .timeline-header * { color: inherit; }
body.nc-blog .comparison-row > div { background: rgba(255,255,255,0.03) !important; color: #e0e0e0 !important; border-bottom: 1px solid rgba(255,255,255,0.08); }
body.nc-blog .feature-name { background: rgba(255,255,255,0.06) !important; color: #fff !important; }
body.nc-blog .nocaf-value { background: rgba(76,175,80,0.14) !important; color: #a5d6a7 !important; }
body.nc-blog .other-value { background: rgba(244,67,54,0.12) !important; color: #ef9a9a !important; }
@media (max-width: 640px) {
  body.nc-blog .nocaf-vs-comparison .comparison-table { grid-template-columns: 1fr 1fr; }
}

/* ---- Shared header on small phones: keep Blog + Download visible ---- */
@media (max-width: 520px) {
  body.nc-blog .navbar .nav-menu { gap: 0.9rem; }
  body.nc-blog .navbar .nav-menu a[href="/index.html"],
  body.nc-blog .navbar .nav-menu a[href="/features.html"],
  body.nc-blog .navbar .nav-menu a[href="/support.html"] { display: none; }
}

/* Legacy light "inline promo" boxes -> dark */
body.nc-blog .nocaf-inline-promo{background:rgba(99,102,241,.10)!important;border:1px solid rgba(129,140,248,.35)!important;color:#e5e7eb!important}
body.nc-blog .nocaf-inline-promo strong{color:#a5b4fc!important}
body.nc-blog .nocaf-inline-promo p,body.nc-blog .nocaf-inline-promo .promo-text{color:#d1d5db!important}
body.nc-blog .nocaf-inline-promo a,body.nc-blog .nocaf-inline-promo .promo-btn,body.nc-blog .nocaf-inline-promo .btn{color:#fff!important}