/*
 * Design tokens — "Clinical Journal" direction.
 * Source of truth: Novamira active design (novamira/get-active-design).
 * Keep this file in sync if the design is edited there.
 */
:root{
  --sh-bg:#F2F5F3;
  --sh-surface:#FFFFFF;
  --sh-ink:#16231F;
  --sh-ink-soft:#45564F;
  --sh-ink-faint:#728077;
  --sh-accent:#1F6F5C;
  --sh-accent-ink:#0E4A3D;
  --sh-accent-soft:#DCEAE5;
  --sh-flag:#A6441A;
  --sh-flag-soft:#F3E1D6;
  --sh-line:#D8DED9;
  --sh-radius-sm:6px;
  --sh-radius-md:10px;
  --sh-space-xs:8px;
  --sh-space-sm:16px;
  --sh-space-md:24px;
  --sh-space-lg:32px;
  --sh-space-xl:48px;
  --sh-font-heading:'Lora', Georgia, 'Times New Roman', serif;
  --sh-font-body:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sh-font-mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

/* Base typography — §6 long-form reading spec */
body.smart-healer{
  background:var(--sh-bg);
  color:var(--sh-ink);
  font-family:var(--sh-font-body);
  font-size:17px;
  line-height:1.65;
}
.sh-article-body{
  max-width:70ch;
}
.sh-article-body p{
  margin:0 0 1.25em;
}
.sh-article-body h2,
.sh-article-body h3{
  font-family:var(--sh-font-heading);
  line-height:1.25;
}
h1, h2, h3, .sh-heading{
  font-family:var(--sh-font-heading);
  font-weight:700;
  line-height:1.15;
  color:var(--sh-ink);
}

/* Accessibility — §8 WCAG 2.2 AA baseline */
a{ color:var(--sh-accent-ink); }
:focus-visible{
  outline:3px solid var(--sh-accent);
  outline-offset:2px;
}
.sh-tap-target{
  min-height:44px;
  min-width:44px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Shared components */
.sh-container{
  max-width:1120px;
  margin:0 auto;
  padding:0 20px;
}
.sh-breadcrumbs{
  font-size:.85rem;
  color:var(--sh-ink-faint);
  margin:16px 0;
}
.sh-breadcrumbs a{ color:var(--sh-ink-soft); text-decoration:none; }
.sh-breadcrumbs a:hover{ color:var(--sh-accent-ink); text-decoration:underline; }
.sh-breadcrumbs .sep{ margin:0 6px; color:var(--sh-line); }

.sh-pillar-nav{
  display:flex;
  gap:var(--sh-space-md);
  align-items:center;
}
.sh-pillar-nav a{
  color:var(--sh-ink);
  text-decoration:none;
  font-weight:600;
  padding:8px 4px;
}
.sh-pillar-nav a:hover,
.sh-pillar-nav a:focus-visible{ color:var(--sh-accent-ink); }

.sh-cluster-index{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:var(--sh-space-md);
  margin:var(--sh-space-lg) 0;
}
.sh-cluster-card{
  border:1px solid var(--sh-line);
  border-radius:var(--sh-radius-md);
  background:var(--sh-surface);
  padding:var(--sh-space-sm);
}
.sh-cluster-card h3{
  margin:0 0 8px;
  font-size:1.05rem;
}
.sh-spoke-list{
  list-style:none;
  margin:0;
  padding:0;
}
.sh-spoke-list li{
  border-top:1px solid var(--sh-line);
  padding:12px 0;
}
.sh-spoke-list li:first-child{ border-top:none; }
.sh-spoke-list a{
  color:var(--sh-ink);
  text-decoration:none;
  font-weight:600;
}
.sh-spoke-list a:hover{ color:var(--sh-accent-ink); }
.sh-empty-state{
  border:1px dashed var(--sh-line);
  border-radius:var(--sh-radius-md);
  padding:var(--sh-space-md);
  color:var(--sh-ink-faint);
  font-size:.9rem;
}

/* ---------- Article template (§5) ---------- */
.sh-disclosure,
.sh-disclaimer{
  background:var(--sh-flag-soft);
  color:var(--sh-flag);
  border-radius:var(--sh-radius-sm);
  padding:12px 16px;
  font-size:.9rem;
  margin:0 0 var(--sh-space-sm);
  max-width:70ch;
}
.sh-byline{
  font-size:.9rem;
  color:var(--sh-ink-soft);
  border-top:1px solid var(--sh-line);
  border-bottom:1px solid var(--sh-line);
  padding:10px 0;
  margin:0 0 var(--sh-space-sm);
  max-width:70ch;
}
.sh-takeaways{
  background:var(--sh-accent-soft);
  border-left:3px solid var(--sh-accent);
  border-radius:var(--sh-radius-sm);
  padding:14px 18px;
  margin:0 0 var(--sh-space-sm);
  max-width:70ch;
}
.sh-takeaways ul{ margin:8px 0 0; padding-left:1.1em; }
.sh-toc{
  border:1px solid var(--sh-line);
  border-radius:var(--sh-radius-md);
  padding:14px 18px;
  margin:0 0 var(--sh-space-md);
  max-width:70ch;
}
.sh-toc ul{ list-style:none; margin:8px 0 0; padding:0; }
.sh-toc li{ margin-bottom:4px; }
.sh-toc a{ color:var(--sh-accent-ink); text-decoration:none; }
.sh-toc-3{ padding-left:1.2em; font-size:.92em; }
.sh-faq details{
  border-top:1px solid var(--sh-line);
  padding:12px 0;
}
.sh-faq summary{ font-weight:600; cursor:pointer; }
.sh-citations ol{ padding-left:1.3em; }
.sh-citations a{ color:var(--sh-accent-ink); }

/* ---------- Comparison template (§5) ---------- */
.sh-table-wrap{ overflow-x:auto; margin:0 0 var(--sh-space-md); }
.sh-comparison-table{
  border-collapse:collapse;
  width:100%;
  min-width:520px;
}
.sh-comparison-table th,
.sh-comparison-table td{
  padding:10px 14px;
  border-bottom:1px solid var(--sh-line);
  text-align:left;
}
.sh-comparison-table thead th{
  background:var(--sh-accent-soft);
  color:var(--sh-accent-ink);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.sh-comparison-table td:first-child a{ font-weight:600; color:var(--sh-ink); text-decoration:none; }
.sh-product-card{
  border:1px solid var(--sh-line);
  border-radius:var(--sh-radius-md);
  background:var(--sh-surface);
  padding:var(--sh-space-sm);
  margin:0 0 var(--sh-space-sm);
}
.sh-product-positioning{ color:var(--sh-ink-soft); font-weight:600; }
.sh-affiliate-cta{
  display:inline-block;
  background:var(--sh-accent);
  color:#fff;
  padding:10px 18px;
  border-radius:var(--sh-radius-sm);
  text-decoration:none;
  font-weight:600;
  min-height:44px;
  line-height:24px;
}
.sh-methodology{
  border-top:1px solid var(--sh-line);
  padding-top:var(--sh-space-sm);
  margin-top:var(--sh-space-md);
}

/* ---------- Homepage design pass 2 ---------- */
.sh-hero{
  background:linear-gradient(180deg, var(--sh-accent-soft) 0%, var(--sh-bg) 100%);
  padding:64px 0 56px;
  text-align:center;
  border-bottom:1px solid var(--sh-line);
}
.sh-hero h1{
  font-size:clamp(2rem, 4.5vw, 2.9rem);
  max-width:16ch;
  margin:0 auto 20px;
  color:var(--sh-accent-ink);
}
.sh-hero-sub{
  max-width:52ch;
  margin:0 auto;
  font-size:1.08rem;
  color:var(--sh-ink-soft);
}
.sh-hero-stat{
  font-family:var(--sh-font-heading);
  font-weight:700;
  font-size:1.5em;
  color:var(--sh-accent-ink);
  font-variant-numeric:tabular-nums;
}

.sh-pillar-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:var(--sh-space-md);
  margin:56px 0;
}
.sh-pillar-card{
  display:block;
  background:var(--sh-surface);
  border:1px solid var(--sh-line);
  border-top:3px solid var(--sh-accent);
  border-radius:var(--sh-radius-md);
  padding:28px 26px;
  text-decoration:none;
  color:var(--sh-ink);
  transition:transform .15s ease, box-shadow .15s ease;
}
.sh-pillar-card:hover,
.sh-pillar-card:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 24px -12px rgb(14 74 61 / 25%);
}
.sh-pillar-icon{
  width:40px; height:40px;
  color:var(--sh-accent);
  margin-bottom:14px;
}
.sh-pillar-card h2{
  font-size:1.3rem;
  margin:0 0 8px;
}
.sh-pillar-card p{
  color:var(--sh-ink-soft);
  font-size:.95rem;
  margin:0 0 16px;
  max-width:none;
}
.sh-pillar-meta{
  font-size:.82rem;
  color:var(--sh-ink-faint);
  font-family:var(--sh-font-mono);
  margin-bottom:16px;
}
.sh-pillar-cta{
  font-weight:600;
  color:var(--sh-accent-ink);
}

.sh-trust-band{
  background:var(--sh-accent-ink);
  color:#fff;
  padding:22px 0;
}
.sh-trust-inner{
  display:flex;
  flex-wrap:wrap;
  gap:24px 40px;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.sh-trust-item{ font-size:.92rem; }
.sh-trust-item strong{
  font-family:var(--sh-font-heading);
  font-size:1.3rem;
  color:#fff;
  margin-right:6px;
}
.sh-trust-item a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.sh-trust-item a:hover{ color:var(--sh-accent-soft); }

.sh-newsletter{
  background:var(--sh-accent-soft);
  border-radius:var(--sh-radius-md);
  padding:32px 28px;
  margin:56px 0;
  display:grid;
  gap:16px;
}
@media (min-width:640px){
  .sh-newsletter{ grid-template-columns:1.1fr 1fr; align-items:center; }
  .sh-newsletter-form{ display:flex; gap:10px; }
  .sh-newsletter-form input{ flex:1; }
}
.sh-newsletter h3{ margin:0 0 6px; font-size:1.3rem; }
.sh-newsletter p{ margin:0 0 16px; color:var(--sh-ink-soft); }
.sh-newsletter-form input[type=email]{
  padding:11px 14px;
  border:1px solid var(--sh-line);
  border-radius:var(--sh-radius-sm);
  font-size:1rem;
  width:100%;
  margin-bottom:10px;
}
@media (min-width:640px){ .sh-newsletter-form input[type=email]{ margin-bottom:0; } }

/* ---------- Hub pages (pillar/cluster): full-width, no legacy sidebar ---------- */
.sh-hub-page #secondary{ display:none; }
.sh-hub-page #primary{ float:none; width:100%; max-width:840px; margin:0 auto; }
.sh-hub-page .entry-content,
.sh-hub-page .sh-container{ max-width:none; }
.sh-hub-page .entry-title{
  font-family:var(--sh-font-heading);
  font-size:clamp(1.7rem, 3.5vw, 2.3rem);
  color:var(--sh-accent-ink);
  margin-bottom:8px;
}
.sh-hub-page .entry-content > p:first-of-type{
  font-size:1.05rem;
  color:var(--sh-ink-soft);
  max-width:65ch;
  padding-bottom:20px;
  border-bottom:1px solid var(--sh-line);
  margin-bottom:24px;
}

/* Neutralize TimesNews' default red/orange widget accent sitewide so it
   never clashes with the brand teal, on any template that still shows
   a sidebar (e.g. legacy article pages not yet redesigned). */
.widget-title,
.widget-title a{
  background:var(--sh-accent-ink) !important;
  color:#fff !important;
}
.widget a{ color:var(--sh-accent-ink); }

/* Hide TimesNews' native category tags + byline on single posts — our own
   byline/takeaways/TOC block (injected via the_content filter) replaces
   both, and the old category taxonomy is retired from public display. */
.single-post .entry-meta{ display:none; }
.single-post .entry-title{
  font-family:var(--sh-font-heading);
  color:var(--sh-accent-ink);
  font-size:clamp(1.6rem, 3.2vw, 2.2rem);
}

/* Cluster index cards: same visual language as the homepage pillar cards */
.sh-cluster-card{
  border:1px solid var(--sh-line);
  border-top:3px solid var(--sh-accent);
  border-radius:var(--sh-radius-md);
  background:var(--sh-surface);
  padding:20px 22px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.sh-cluster-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px -14px rgb(14 74 61 / 25%);
}
.sh-cluster-card h3{
  font-size:1.08rem;
  margin:0 0 6px;
}
.sh-cluster-card h3 a{ color:var(--sh-ink); text-decoration:none; }
.sh-cluster-card h3 a:hover{ color:var(--sh-accent-ink); }
.sh-cluster-card p{
  color:var(--sh-ink-faint);
  font-size:.85rem;
  font-family:var(--sh-font-mono);
  margin:0;
}
