/* report.css — document-style layout for individual market-report pages
   (e.g. market-report-nuts-2026-07.html).

   Load this IN ADDITION to bluestar.css, after it:
     <link rel="stylesheet" href="bluestar.css?v=62">
     <link rel="stylesheet" href="report.css?v=1">

   It reuses bluestar.css's own color/spacing tokens (--navy, --blue, --line,
   --text-1, --text-2, --bg-2, --shadow-*, --gut) and its real .ed-table /
   .ed-table-wrap component for any tabular content. It does NOT redefine
   header, nav, footer, hero, or button styles — those stay exactly as on the
   rest of the site. Keep this file limited to the classes below; do not add
   new decorative boxes/eyebrows/callouts beyond what's already here. */

/* breadcrumb line */
.doc-crumbs{
  max-width:760px;margin:0 auto;padding:28px var(--gut,24px) 0;
  font-size:13px;color:var(--text-2);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.doc-crumbs a{color:var(--text-2);text-decoration:none}
.doc-crumbs a:hover{color:var(--blue)}
.doc-crumbs .sep{opacity:.5}
.doc-crumbs .cur{color:var(--navy);font-weight:600}

/* hero banner image */
.doc-hero{max-width:960px;margin:18px auto 0;padding:0 var(--gut,24px)}
.doc-hero img{
  width:100%;max-height:300px;object-fit:cover;border-radius:8px;display:block;
}

/* title block */
.doc-head{max-width:760px;margin:26px auto 0;padding:0 var(--gut,24px);text-align:center}
.doc-head h1{
  font-size:clamp(28px,3.6vw,42px);font-weight:800;color:var(--navy);
  line-height:1.2;letter-spacing:-.01em;margin:0 0 12px;
}
.byline{font-size:14px;color:var(--text-2)}
.byline strong{color:var(--navy);font-weight:700}

/* reading column */
.doc-body{max-width:760px;margin:0 auto;padding:8px var(--gut,24px) 12px}

.doc-chapter{margin-top:44px;scroll-margin-top:100px}
.doc-chapter:first-of-type{margin-top:34px}
.doc-chapter h2{
  font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.01em;
  padding-bottom:12px;margin:0 0 16px;border-bottom:1px solid var(--line);
}
.doc-chapter p{font-size:16px;line-height:1.85;color:var(--text-2);margin:0 0 16px}
.doc-chapter p:last-child{margin-bottom:0}
.doc-chapter ul{margin:0 0 16px;padding-inline-start:20px;color:var(--text-2);font-size:15.5px;line-height:1.8}
.doc-chapter li{margin-bottom:6px}

/* table — reuses the site's real .ed-table / .ed-table-wrap (defined in
   bluestar.css); this just constrains it to the reading column */
.doc-chapter .ed-table-wrap{margin:20px 0;max-width:100%}

/* per-product positive/negative trends — plain two-column list, no cards */
.doc-trends{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
  margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line);
}
.doc-trends h4{
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);margin:0 0 10px;
}
.doc-trends ul{margin:0;padding-inline-start:18px;font-size:14.5px;line-height:1.7;color:var(--text-2)}
.doc-trends li{margin-bottom:6px}
@media(max-width:640px){.doc-trends{grid-template-columns:1fr}}

/* recommendation / payoff line — plain, no card/border */
.bold-stmt{
  text-align:center;font-size:19px;font-weight:700;color:var(--navy);
  line-height:1.6;max-width:640px;margin:28px auto;
}

/* closing actions (e.g. PDF download) */
.doc-actions{
  max-width:760px;margin:38px auto 0;padding:24px var(--gut,24px) 0;
  border-top:1px solid var(--line);text-align:center;
}
/* solid navy CTA button for use on this page's white background
   (site's .btn-primary/.btn-ghost are built for dark hero sections and
   would be illegible here — this matches the navy/white pattern already
   used by bluestar.css for buttons on light backgrounds, e.g. .cform button) */
.doc-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--navy);color:#fff;font-weight:700;font-size:15px;
  padding:13px 28px;border-radius:10px;text-decoration:none;
  transition:background .15s,transform .15s;
}
.doc-cta:hover{background:var(--blue-dark);transform:translateY(-2px);}

@media(max-width:760px){
  .doc-hero img{max-height:210px}
  .doc-head h1{font-size:26px}
}