/* ================================================================
   cannreports.css  v1.0
   CannBus Market Reports — Unified Stylesheet
   www.cannbus.org · March 2026

   Covers: All report pages for US States, Canada, Mexico,
           Puerto Rico — production, sales & revenue statistics.

   SECTIONS
   ─────────────────────────────────────────────────────────────
   §  1  Design Tokens (CSS Custom Properties)
   §  2  Country Theme Overrides  (data-theme attribute)
   §  3  Reset & Base
   §  4  Layout — Container & Grid Utilities
   §  5  Site Top Bar
   §  6  Breadcrumb
   §  7  Hero / Site Header
   §  8  Sticky Table-of-Contents Nav  (toc-block NOT needed)
   §  9  Report Sections — numbered content blocks
   § 10  Key-Point Highlight Boxes  (revenue / tax / quantity)
   § 11  KPI / Insight / Stat Cards
   § 12  Chart Containers & Grid
   § 13  Data Tables
   § 14  Progress Bars / Bar Charts
   § 15  Factor / Driver Cards
   § 16  Product-Type Cards
   § 17  Timeline (vertical + horizontal)
   § 18  Province / State / Region Cards  (index pages)
   § 19  Overview / Status Grids  (index pages)
   § 20  Filter Bar (index pages)
   § 21  Callout & Legal-Alert Boxes
   § 22  Flag Stripe Decorators
   § 23  Accent Tags & Badges
   § 24  Back-Link & Navigation Helpers
   § 25  Buttons
   § 26  Warnings, Disclaimers & References
   § 27  Disclaimer Strip & Footer
   § 28  Utility Classes & Animations
   § 29  Responsive Breakpoints
   ================================================================ */


/* ================================================================
   § 1  DESIGN TOKENS
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ── Primary Teal (default / US theme) ── */
  --t9:  #002828;   /* darkest */
  --t8:  #003d3d;
  --t7:  #005f5f;
  --t6:  #007a7a;
  --t5:  #009999;
  --t4:  #00bfbf;
  --t3:  #4dd8d8;
  --t2:  #9aeaea;
  --t1:  #d6f5f5;
  --t0:  #f0fafa;

  /* ── Semantic theme aliases (remapped per country) ── */
  --deep:        var(--t8);
  --mid:         var(--t6);
  --bright:      var(--t5);
  --light:       var(--t3);
  --accent:      var(--t4);
  --pale:        var(--t1);
  --xpale:       var(--t0);

  /* ── Amber / Gold accent ── */
  --amber:       #c8943a;
  --amber-2:     #e8b85a;
  --amber-pale:  #fef9e7;

  /* ── Backgrounds ── */
  --bg:          #ffffff;
  --bg-soft:     #f4fafa;
  --bg-card:     #ffffff;
  --surface:     #edf8f8;
  --surface-md:  #d5efef;
  --off-white:   #f7fdfd;

  /* ── Neutral greys (teal-tinted) ── */
  --gray-50:     #f5f9f9;
  --gray-100:    #eaf2f2;
  --gray-200:    #d0e6e6;
  --gray-300:    #a8cccc;
  --gray-500:    #6b9898;
  --gray-700:    #2e5050;

  /* ── Text ── */
  --ink:         #0c2424;
  --ink-2:       #1e3e3e;
  --ink-3:       #3a5e5e;
  --ink-4:       #6a8888;
  --text-muted:  var(--ink-3);
  --text-faint:  var(--ink-4);

  /* ── Semantic status ── */
  --clr-legal:   #27ae60;
  --clr-warn:    #e67e22;
  --clr-danger:  #c0392b;
  --clr-info:    var(--t5);

  /* ── Highlight box colours ── */
  --hl-rev-bg:     #e8f5e9;
  --hl-rev-border: #27ae60;
  --hl-rev-text:   #1a4a2a;

  --hl-tax-bg:     #fff3cd;
  --hl-tax-border: #e6a817;
  --hl-tax-text:   #6b3f00;

  --hl-qty-bg:     #fffde7;
  --hl-qty-border: #d4b800;
  --hl-qty-text:   #4a3b00;

  --hl-warn-bg:    #fff8e1;
  --hl-warn-border:#f9a825;
  --hl-warn-text:  #6b3f00;

  --hl-danger-bg:  #fdecea;
  --hl-danger-border:#c0392b;
  --hl-danger-text:#7b1c1c;

  --hl-info-bg:    var(--xpale);
  --hl-info-border:var(--t5);
  --hl-info-text:  var(--t8);

  /* ── Borders & Shadows ── */
  --border:      rgba(0,122,122,.14);
  --border-md:   rgba(0,122,122,.26);
  --border-dk:   rgba(0,122,122,.44);
  --shadow-sm:   0 1px  8px rgba(0,64,64,.07);
  --shadow:      0 4px 22px rgba(0,64,64,.11);
  --shadow-lg:   0 12px 48px rgba(0,64,64,.16);
  --shadow-hov:  0 16px 52px rgba(0,64,64,.20), 0 0 0 1.5px var(--bright);

  /* ── Radii ── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r:     12px;
  --r-lg:  20px;
  --r-xl:  30px;
  --r-full:999px;

  /* ── Typography ── */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:  'DM Mono', 'Courier New', monospace;

  /* ── Layout ── */
  --gutter:    1.5rem;
  --container: 1180px;

  /* ── Motion ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  0.26s;
}


/* ================================================================
   § 2  COUNTRY THEME OVERRIDES
   Apply via  <body data-theme="ca|mx|pr|us">  or any ancestor.
   ================================================================ */

/* ── Canada — Deep navy / maple blue ── */
[data-theme="ca"] {
  --deep:   #0d2137;
  --mid:    #1a3a5c;
  --bright: #2e6da4;
  --light:  #4a9fd4;
  --accent: #4a9fd4;
  --pale:   #d6eaf8;
  --xpale:  #eaf4fb;
  --amber:  #c8401b;
  --amber-2:#e8603a;
  --border: rgba(46,109,164,.18);
  --shadow: 0 4px 32px rgba(13,33,55,.10);
  --shadow-lg: 0 12px 60px rgba(13,33,55,.16);
}

/* ── Mexico — Forest green / warm orange ── */
[data-theme="mx"] {
  --deep:   #0f3329;
  --mid:    #1a5c3a;
  --bright: #2e8b57;
  --light:  #4ab87a;
  --accent: #4ab87a;
  --pale:   #d5f0e2;
  --xpale:  #eef9f3;
  --amber:  #c8401b;
  --amber-2:#e8603a;
  --border: rgba(46,139,87,.18);
  --shadow: 0 4px 32px rgba(15,51,41,.10);
  --shadow-lg: 0 12px 60px rgba(15,51,41,.16);
}

/* ── Puerto Rico — Indigo / crimson ── */
[data-theme="pr"] {
  --deep:   #0d2b4e;
  --mid:    #1a4a7a;
  --bright: #2271b3;
  --light:  #4a9fd4;
  --accent: #4a9fd4;
  --pale:   #d6e8f8;
  --xpale:  #eaf3fb;
  --amber:  #c8401b;
  --amber-2:#e8603a;
  --border: rgba(34,113,179,.18);
  --shadow: 0 4px 32px rgba(13,43,78,.10);
  --shadow-lg: 0 12px 60px rgba(13,43,78,.16);
}

/* ── US (default teal — already set in :root) ── */
[data-theme="us"] { /* inherits :root */ }

/* ── State-specific palette overrides ──
   Add  data-state="nv|il|or|wa|co|ma|mi|ny"  for per-state colour. */
[data-state="nv"] {
  --deep:   #1c1430;
  --mid:    #2e1f50;
  --bright: #7b52ab;
  --light:  #a67dd4;
  --amber:  #c8942a;
  --amber-2:#e8b84a;
}
[data-state="il"], [data-state="ma"] {
  --deep:   #1a2640;
  --mid:    #203560;
  --bright: #3a6db5;
  --light:  #5b90d4;
}
[data-state="or"], [data-state="wa"] {
  --deep:   #1a2e1a;
  --mid:    #244824;
  --bright: #3d7a3d;
  --light:  #5daa5d;
}


/* ================================================================
   § 3  RESET & BASE
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink-2);
  line-height: 1.72;
  overflow-x: hidden;
}

a {
  color: var(--bright);
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--deep); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  line-height: 1.18;
  color: var(--deep);
}

p { margin-bottom: .9rem; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }


/* ================================================================
   § 4  LAYOUT — Container & Grid Utilities
   ================================================================ */
.hw,
.container,
.page-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-wrap {
  padding-top: 40px;
  padding-bottom: 72px;
}

/* Two-column layouts */
.col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.col-2-3 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

@media (max-width: 780px) {
  .col-2, .col-3, .col-2-3 { grid-template-columns: 1fr; }
}


/* ================================================================
   § 5  SITE TOP BAR — Thin announcement strip
   ================================================================ */
.site-top {
  background: var(--t9);
  padding: 7px 0;
  text-align: center;
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.site-top a { color: var(--t4); text-decoration: none; }
.site-top a:hover { text-decoration: underline; }
.site-top .sep { margin: 0 .6rem; opacity: .25; }


/* ================================================================
   § 6  BREADCRUMB
   ================================================================ */
.cr-bar {                          /* container bar */
  width: 100%;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--gray-200);
  position: relative;
  z-index: 50;
}

.cr-inner {                        /* inner max-width wrapper */
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Bootstrap 5 breadcrumb resets */
.cr-bar .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: .58rem 0;
  margin: 0;
  list-style: none;
  background: transparent;
  font-size: .78rem;
  font-family: var(--font-sans);
}
.cr-bar .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  padding: 0 .42rem;
  color: var(--t4);
  font-size: .9rem;
  font-weight: 700;
  float: none;
  line-height: 1;
}
.cr-bar .breadcrumb-item a {
  color: var(--bright);
  font-weight: 600;
  text-decoration: none;
}
.cr-bar .breadcrumb-item a:hover {
  color: var(--deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cr-bar .breadcrumb-item.active { color: var(--ink-3); font-weight: 500; }

@media (max-width: 575px) {
  .cr-bar .breadcrumb { font-size: .71rem; padding: .42rem 0; }
  .cr-inner { padding: 0 1rem; }
  .cr-bar .breadcrumb-item + .breadcrumb-item::before { padding: 0 .26rem; }
}


/* ================================================================
   § 7  HERO / SITE HEADER
   ================================================================ */
.hero,
.site-header {
  background: linear-gradient(155deg,
    var(--t9)   0%,
    var(--deep) 35%,
    var(--mid)  72%,
    var(--bright) 100%
  );
  position: relative;
  overflow: hidden;
  padding: 80px 0 72px;
  text-align: center;
  color: #fff;
}

/* Subtle dot-grid pattern */
.hero::before,
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Soft radial glow */
.hero::after,
.site-header::after {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0,220,220,.12) 0%,
    transparent 65%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Country-specific hero gradients */
[data-theme="ca"] .hero,
[data-theme="ca"] .site-header {
  background: linear-gradient(158deg,
    #060f1e 0%,
    var(--deep) 55%,
    var(--mid) 100%
  );
}
[data-theme="mx"] .hero,
[data-theme="mx"] .site-header {
  background: linear-gradient(155deg,
    #051c10 0%,
    var(--deep) 45%,
    var(--mid) 100%
  );
}
[data-theme="pr"] .hero,
[data-theme="pr"] .site-header {
  background: linear-gradient(155deg,
    #060d1e 0%,
    var(--deep) 50%,
    var(--mid) 100%
  );
}
[data-state="nv"] .hero,
[data-state="nv"] .site-header {
  background: linear-gradient(158deg, #0d0b1a 0%, var(--deep) 50%, #140e24 100%);
}

/* Hero inner content wrapper — min 80%, centred */
.hero-inner {
  position: relative;
  z-index: 1;
  width: min(85%, 1020px);
  min-width: min(80%, 700px);
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}

/* Eyebrow badge */
.hero-eyebrow,
.header-tag,
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.88);
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: var(--r-full);
  margin-bottom: 22px;
}

/* Pulsing dot inside eyebrow */
.hero-eyebrow .pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--t4);
  animation: pulse 2s ease-in-out infinite;
}

/* Hero leaf / background icon element */
.hero-leaf {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.3));
}

/* Optional decorative background images */
.leaf-bg,
.maple-bg,
.desert-bg,
.skyline-bg,
.mountain-bg,
.forest-bg,
.lakes-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.leaf-bg svg,
.maple-bg svg { position: absolute; opacity: .06; }
.leaf-bg svg:nth-child(1),
.maple-bg svg:nth-child(1) { top:-40px; left:-40px; width:320px; transform:rotate(-15deg); }
.leaf-bg svg:nth-child(2),
.maple-bg svg:nth-child(2) { bottom:-60px; right:-60px; width:400px; transform:rotate(20deg) scaleX(-1); }
.leaf-bg svg:nth-child(3),
.maple-bg svg:nth-child(3) { top:30%; left:60%; width:200px; transform:rotate(45deg); opacity:.04; }

.desert-bg { bottom:0; top:auto; height:180px; }
.desert-bg svg { width:100%; height:100%; }

/* H1 */
.hero h1,
.site-header h1,
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: 14px;
  text-shadow: 0 4px 22px rgba(0,0,0,.28);
}
.hero h1 em,
.hero-title em { color: var(--amber-2); font-style: italic; }

/* Tagline (secondary italic line) */
.hero-tagline {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-style: italic;
  color: rgba(255,255,255,.78);
  margin-bottom: 18px;
}

/* Subtitle / description */
.hero-subtitle,
.header-sub,
.hero-sub,
.hero-desc {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,.78);
  max-width: 580px;
  margin: 0 auto 28px;
  line-height: 1.72;
}

/* Hero meta pills row */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
}
.hero-meta span {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.84);
  font-size: .76rem;
  font-weight: 600;
  padding: 4px 13px;
  border-radius: var(--r-full);
}

/* Hero KPI strip */
.hero-stats,
.header-stats,
.stats-strip {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  margin: 36px auto 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 880px;
}

.hero-stat,
.hstat,
.hero-stats .stat-item {
  flex: 1;
  min-width: 110px;
  padding: 18px 16px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.12);
}
.hero-stat:last-child,
.hstat:last-child,
.hero-stats .stat-item:last-child { border-right: none; }

.hero-stat .num,
.hstat-num { font-family:var(--font-serif); font-size:1.9rem; font-weight:700; color:var(--amber-2); line-height:1; display:block; margin-bottom:4px; }
.hero-stat .lbl,
.hstat-label { font-size:.67rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.52); display:block; }


/* ── SECTION WRAP ────────────────────────────────────────────────── */


/* ── FEATURED CARD ───────────────────────────────────────────────── */
/* ============================================================
   SECTION LAYOUT — .section, .section.alt
   Generic padded page sections with optional alt background
   ============================================================ */

.section {
  padding: 52px 0;
}

.section.alt {
  background: var(--white);
}

/* ── Section Intro Header (number circle + title block) ──── */
/* NOTE: This is the page-section intro layout, separate from  */
/* .section-header which is the collapsible card toggle bar.   */
/* Works because this .section-header has different children.  */
/* If there is a specificity conflict, use .section > .section-header */
.section > .container > .section-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 28px;
}

.section-num {
  min-width: 44px;
  height: 44px;
  background: var(--teal);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  flex-shrink: 0;
}

.section-title-wrap h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  color: var(--teal-dark);
  margin-bottom: 5px;
  line-height: 1.2;
}

.section-title-wrap p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   FEATURED COUNTRY CARDS — .featured-row / .featured-card
   Used in the Countries section of index pages
   ============================================================ */

.featured-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 28px 0;
}

.featured-card {
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  transition: transform 0.18s, box-shadow 0.2s;
  min-height: 140px;
}

.featured-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  color: #fff;
  text-decoration: none;
}

/* Flag/emoji watermark from data-emoji attribute */
.featured-card::after {
  content: attr(data-emoji);
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 3rem;
  opacity: 0.18;
  line-height: 1;
  pointer-events: none;
}

/* Country colour gradients */
.featured-card.fc-us { background: linear-gradient(135deg, #1a3c6e, #2a5298); }
.featured-card.fc-ca { background: linear-gradient(135deg, #1b5e20, #2e7d32); }
.featured-card.fc-mx { background: linear-gradient(135deg, #b71c1c, #c62828); }
.featured-card.fc-pr { background: linear-gradient(135deg, #4a148c, #0d2d6b); }

/* Inner text elements */
.fc-eyebrow {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.80;
}

.fc-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.15;
}

.fc-count {
  font-size: 0.82rem;
  opacity: 0.85;
}

.fc-arrow {
  margin-top: auto;
  font-size: 0.82rem;
  font-weight: 700;
  opacity: 0.90;
}

.fc-arrow::after {
  content: ' →';
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .featured-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
  .featured-row { grid-template-columns: 1fr; }
  .section { padding: 36px 0; }
}





/* ================================================================
   § 8  STICKY TABLE-OF-CONTENTS NAV
   (toc-block / TOC block elements are NOT required when this is used)
   ================================================================ */
.toc-nav,
.sticky-nav,
.toc-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--deep);
  border-bottom: 2.5px solid var(--accent);
  overflow-x: auto;
  scrollbar-width: none;
}
.toc-nav::-webkit-scrollbar,
.sticky-nav::-webkit-scrollbar { display: none; }

.toc-nav ul,
.sticky-nav ul {
  list-style: none;
  display: flex;
  gap: 0;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  white-space: nowrap;
  justify-content: center;
  flex-wrap: wrap;
}

.toc-nav ul li a,
.sticky-nav ul li a,
.toc-bar a,
.toc-inner a {
  display: block;
  padding: 13px 15px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
  white-space: nowrap;
}

.toc-nav ul li a:hover,
.sticky-nav ul li a:hover,
.toc-bar a:hover,
.toc-inner a:hover {
  color: var(--amber-2);
  border-bottom-color: var(--amber);
  background: rgba(255,255,255,.05);
}

.toc-nav ul li a.active,
.sticky-nav ul li a.active {
  color: var(--amber-2);
  border-bottom-color: var(--amber-2);
}

@media (max-width: 768px) {
  .toc-nav ul { justify-content: flex-start; flex-wrap: nowrap; }
  .toc-nav ul li a { padding: 11px 11px; font-size: .69rem; }
}


/* ================================================================
   § 9  REPORT SECTIONS — Numbered content blocks
   ================================================================ */
.section,
.report-section {
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}
.section:last-child,
.report-section:last-child { border-bottom: none; }

/* Alternate section background */
.section.alt,
.report-section.alt { background: var(--bg-soft); }

/* Section header with numbered badge */
.section-header {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 46px;
}

.section-num {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--mid);
  color: var(--amber-2);
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  flex-shrink: 0;
}

.section-title-wrap {}

.section-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bright);
  margin-bottom: 6px;
  display: block;
}

.section-title-wrap h2,
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--deep);
  line-height: 1.2;
  margin-bottom: 6px;
}
.section-title em { font-style: italic; color: var(--bright); }

.section-title-wrap p,
.section-desc {
  font-size: .95rem;
  color: var(--text-muted);
  font-weight: 300;
  max-width: 640px;
}


/* ================================================================
   § 10  KEY-POINT HIGHLIGHT BOXES
   Revenue, Tax Rate, Quantity, Warning, Info
   ================================================================ */
.hl-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 18px;
  border-radius: var(--r);
  border-left: 5px solid;
  margin: 18px 0;
}

.hl-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.hl-body { flex: 1; }
.hl-label {
  font-size: .70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  opacity: .75;
  display: block;
  margin-bottom: 3px;
}
.hl-value {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  display: block;
}
.hl-note {
  font-size: .82rem;
  opacity: .78;
  margin-top: 3px;
  display: block;
}

/* Revenue highlight — green */
.hl-box.revenue,
.hl-box.hl-rev {
  background: var(--hl-rev-bg);
  border-color: var(--hl-rev-border);
  color: var(--hl-rev-text);
}
/* Tax highlight — amber */
.hl-box.tax,
.hl-box.hl-tax {
  background: var(--hl-tax-bg);
  border-color: var(--hl-tax-border);
  color: var(--hl-tax-text);
}
/* Quantity / possession highlight — yellow */
.hl-box.qty,
.hl-box.hl-qty {
  background: var(--hl-qty-bg);
  border-color: var(--hl-qty-border);
  color: var(--hl-qty-text);
}
/* Warning highlight */
.hl-box.warn,
.hl-box.hl-warn {
  background: var(--hl-warn-bg);
  border-color: var(--hl-warn-border);
  color: var(--hl-warn-text);
}
/* Danger highlight */
.hl-box.danger,
.hl-box.hl-danger {
  background: var(--hl-danger-bg);
  border-color: var(--hl-danger-border);
  color: var(--hl-danger-text);
}
/* Info highlight — teal */
.hl-box.info,
.hl-box.hl-info {
  background: var(--hl-info-bg);
  border-color: var(--hl-info-border);
  color: var(--hl-info-text);
}

/* Rate grid — large % display */
.rate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.rate-card {
  background: var(--bg-card);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r);
  padding: 18px 14px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: var(--dur) var(--ease);
}
.rate-card:hover {
  border-color: var(--bright);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.rate-label { font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); margin-bottom:6px; display:block; }
.rate-value { font-family:var(--font-serif); font-size:1.8rem; font-weight:700; color:var(--deep); line-height:1; margin-bottom:4px; display:block; }
.rate-sub   { font-size:.72rem; color:var(--text-faint); line-height:1.35; }


/* ================================================================
   § 11  KPI / INSIGHT / STAT CARDS
   ================================================================ */
.insight-grid,
.kpi-grid,
.card-grid,
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin: 18px 0 32px;
}

.insight-card,
.kpi-card,
.stat-card {
  background: var(--bg-card);
  border: 1.5px solid var(--gray-200);
  border-top: 3.5px solid var(--bright);
  border-radius: var(--r);
  padding: 24px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur), transform var(--dur);
}
.insight-card:hover,
.kpi-card:hover,
.stat-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: var(--bright);
}

.card-icon { font-size: 1.55rem; margin-bottom: 10px; }

.card-val,
.kpi-num,
.insight-card .card-val {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--deep);
  line-height: 1;
  margin-bottom: 4px;
  display: block;
}

.card-label,
.kpi-label,
.insight-card .card-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
  margin-bottom: 7px;
  display: block;
}

.card-note,
.kpi-note { font-size: .83rem; color: var(--text-faint); line-height: 1.5; }

/* Trend badge */
.card-badge,
.change {
  display: inline-block;
  font-size: .70rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--r-full);
  margin-bottom: 6px;
}
.badge-up,  .change.up { background: #e8f5e9; color: #1b5e20; }
.badge-down,.change.dn { background: var(--hl-danger-bg); color: #b71c1c; }
.badge-peak            { background: var(--amber-pale); color: #7b5900; }

/* Overview / status-stat card (country index pages) */
.overview-grid,
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 32px 0;
}

.ov-card,
.status-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px 18px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.ov-num,
.s-num { font-family:var(--font-serif); font-size:1.9rem; font-weight:700; color:var(--deep); line-height:1; margin-bottom:5px; display:block; }
.ov-label,
.s-label { font-size:.73rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); display:block; }
.ov-note,
.s-note { font-size:.79rem; color:var(--text-faint); margin-top:5px; line-height:1.4; }


/* ================================================================
   § 12  CHART CONTAINERS & GRID
   ================================================================ */
.chart-card {
  background: var(--bg-card);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 28px 24px 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}

.chart-card h3 {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  color: var(--deep);
  margin-bottom: 4px;
}

.chart-sub {
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.chart-area {
  position: relative;
  height: 300px;
  width: 100%;
}

.chart-area-lg {
  position: relative;
  height: 370px;
  width: 100%;
}

.chart-grid,
.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 22px;
}

/* Data panel — side-by-side text stat blocks */
.data-panel {
  background: var(--bg-soft);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r);
  padding: 20px 18px;
}

.data-panel h4 {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--deep);
  margin-bottom: 14px;
}

@media (max-width: 700px) {
  .chart-grid, .chart-row { grid-template-columns: 1fr; }
}


/* ================================================================
   § 13  DATA TABLES
   ================================================================ */
.data-table-wrap {
  overflow-x: auto;
  border-radius: var(--r);
  border: 1.5px solid var(--gray-200);
  margin: 14px 0 24px;
  box-shadow: var(--shadow-sm);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  font-size: .88rem;
  min-width: 480px;
}

.data-table thead {
  background: var(--deep);
  color: #fff;
}

.data-table thead th {
  padding: 12px 18px;
  text-align: left;
  font-size: .70rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--dur);
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--xpale); }
.data-table tbody tr:nth-child(even) td { background: var(--gray-50); }
.data-table tbody tr.highlight-row td { background: rgba(0,122,122,.07); font-weight: 600; }
.data-table tbody tr.peak-row td     { background: rgba(200,148,58,.09); }

.data-table tbody td {
  padding: 10px 18px;
  color: var(--ink-2);
  vertical-align: middle;
}
.data-table tbody td:first-child { font-weight: 600; }

/* Rank badge inside table */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: .74rem;
  font-weight: 700;
  background: var(--bright);
  color: #fff;
}

.trend-up   { color: var(--clr-legal);  font-size: .76rem; font-weight: 700; }
.trend-down { color: var(--clr-danger); font-size: .76rem; font-weight: 700; }


/* ================================================================
   § 14  PROGRESS BARS / BAR CHARTS
   ================================================================ */
.bar-list,
.bar-chart {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 14px 0;
}

.bar-meta,
.bar-label { display: flex; justify-content: space-between; margin-bottom: 5px; }
.bar-name  { font-size: .87rem; font-weight: 600; color: var(--ink-2); }
.bar-pct   { font-size: .82rem; color: var(--text-muted); font-weight: 600; }

.bar-track {
  height: 9px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--mid), var(--light));
  width: 0%;
  transition: width 1.2s cubic-bezier(.22, 1, .36, 1);
}

/* Per-country bar fill tints */
[data-theme="ca"] .bar-fill { background: linear-gradient(90deg, var(--mid), var(--light)); }
[data-theme="mx"] .bar-fill { background: linear-gradient(90deg, var(--mid), var(--light)); }
[data-theme="pr"] .bar-fill { background: linear-gradient(90deg, var(--mid), var(--light)); }


/* ================================================================
   § 15  FACTOR / DRIVER CARDS
   ================================================================ */
.factor-grid,
.factors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
  margin: 14px 0;
}

.factor-card {
  background: var(--bg-card);
  border: 1.5px solid var(--gray-200);
  border-left: 4px solid var(--bright);
  border-radius: var(--r);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur), transform var(--dur);
}
.factor-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.factor-card.negative { border-left-color: var(--clr-danger); }
.factor-card.neutral  { border-left-color: var(--amber); }

.factor-card h4 {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--deep);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.factor-card p { font-size: .87rem; color: var(--text-muted); line-height: 1.6; }

.factor-icon {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--pale);
  color: var(--deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

/* Dark gradient callout / summary box */
.callout {
  background: linear-gradient(135deg, var(--deep) 0%, var(--mid) 100%);
  border-radius: var(--r-lg);
  padding: 32px 38px;
  color: #fff;
  margin: 28px 0;
  position: relative;
  overflow: hidden;
}
.callout::after {
  content: '🌿';
  position: absolute;
  right: 22px; bottom: 8px;
  font-size: 4.5rem;
  opacity: .10;
  transform: rotate(20deg);
}
.callout h3 {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  margin-bottom: 10px;
  color: var(--amber-2);
}
.callout p { font-size: .92rem; opacity: .82; line-height: 1.68; max-width: 680px; }


/* ================================================================
   § 16  PRODUCT-TYPE CARDS
   ================================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin: 14px 0 26px;
}

.product-card {
  background: var(--bg-card);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 20px 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur), box-shadow var(--dur);
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.product-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 12px;
}
.product-card h4 { font-family:var(--font-serif); font-size:.96rem; color:var(--deep); margin-bottom:6px; }
.product-card .share { font-family:var(--font-serif); font-size:1.4rem; font-weight:700; color:var(--mid); }
.product-card .share-label { font-size:.74rem; color:var(--text-muted); }
.product-card .rev { font-size:.80rem; color:var(--text-faint); margin-top:5px; }


/* ================================================================
   § 17  TIMELINE  (vertical & horizontal)
   ================================================================ */

/* ── Vertical timeline ── */
.timeline {
  position: relative;
  padding-left: 34px;
  margin: 16px 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 10px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--bright), var(--border));
}
.timeline-item {
  position: relative;
  margin-bottom: 28px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -28px; top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bright);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(0,153,153,.2);
}
.timeline-year {
  font-size: .70rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 3px;
}
.timeline-title {
  font-family: var(--font-serif);
  font-size: .98rem;
  color: var(--deep);
  margin-bottom: 3px;
}
.timeline-desc { font-size: .85rem; color: var(--text-muted); line-height: 1.52; }

/* ── Horizontal timeline (index pages) ── */
.timeline-h {
  display: flex;
  gap: 0;
  align-items: flex-start;
  min-width: 480px;
}
.tl-item {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 0 6px;
}
.tl-item::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 50%;
  right: -50%;
  height: 3px;
  background: var(--pale);
  z-index: 0;
}
.tl-item:last-child::before { display: none; }
.tl-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bright);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--bright);
  margin: 0 auto 8px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  color: #fff;
  font-weight: 700;
}
.tl-year { font-weight:800; font-size:.80rem; color:var(--deep); display:block; }
.tl-desc { font-size:.72rem; color:var(--text-muted); line-height:1.35; display:block; margin-top:2px; }

/* Horizontal wrapper card */
.timeline-bar {
  background: var(--bg-card);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 24px;
  overflow-x: auto;
}
.timeline-bar h3 { font-family:var(--font-serif); font-size:1.04rem; color:var(--deep); margin-bottom:16px; }


/* ================================================================
   § 18  PROVINCE / STATE / REGION INDEX CARDS
   ================================================================ */

/* Grid */
.province-grid,
.state-grid,
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
  margin: 40px 0;
}

/* Card shell */
.province-card,
.state-card,
.region-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--bright);
  border-radius: var(--r);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: box-shadow var(--dur), transform var(--dur);
}
.province-card:hover,
.state-card:hover,
.region-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--bright);
  text-decoration: none;
  color: inherit;
}
.province-card.alt-border,
.state-card.alt-border,
.region-card.alt { border-top-color: var(--amber); }

/* Card elements */
.prov-flag,
.sc-icon,
.rc-icon { font-size: 2.1rem; line-height: 1; }

.prov-name,
.sc-name,
.rc-name {
  font-family: var(--font-serif);
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--deep);
}

.sc-tag,
.rc-tag {
  font-size: .70rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
}

.prov-tagline,
.sc-desc,
.rc-desc { font-size: .83rem; color: var(--text-muted); line-height: 1.58; }

/* Mini-stats row inside card */
.prov-stats,
.sc-stats,
.rc-stats { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; }

.pstat,
.rc-stats > div { text-align: center; }

.pstat-num,
.ss-num,
.rs-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--deep);
  line-height: 1;
  margin-bottom: 2px;
}

.pstat-label,
.ss-label,
.rs-label {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.prov-cta,
.sc-cta,
.rc-cta {
  margin-top: auto;
  font-size: .80rem;
  font-weight: 700;
  color: var(--bright);
  letter-spacing: .04em;
}
.province-card:hover .prov-cta,
.state-card:hover .sc-cta,
.region-card:hover .rc-cta { text-decoration: underline; }

/* Province sub-cards (e.g. Atlantic provinces page) */
.province-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.province-sub-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--bright);
  border-radius: var(--r-sm);
  padding: 22px 18px;
  box-shadow: var(--shadow-sm);
}
.province-sub-card h4 { font-family:var(--font-serif); font-size:1rem; color:var(--deep); margin-bottom:8px; }
.province-sub-card .sub-num { font-family:var(--font-serif); font-size:1.5rem; font-weight:700; color:var(--deep); }
.province-sub-card p { font-size:.82rem; color:var(--text-muted); line-height:1.52; margin-top:6px; }

/* Disc grid (index.html) */
.disc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.disc-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px 20px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow var(--dur), transform var(--dur);
}
.disc-card:hover { box-shadow:var(--shadow); transform:translateY(-3px); text-decoration:none; color:inherit; }
.disc-ico { font-size: 2rem; }
.disc-name { font-family:var(--font-serif); font-size:1.18rem; font-weight:700; color:var(--deep); }
.disc-meta { font-size:.80rem; color:var(--text-muted); }
.disc-cta  { font-size:.78rem; font-weight:700; color:var(--bright); margin-top:auto; }
.disc-card:hover .disc-cta { text-decoration:underline; }


/* ================================================================
   § 19  OVERVIEW / STATUS GRIDS — Index pages
   ================================================================ */
/* See § 11 for .overview-grid / .status-grid / .ov-card / .s-num etc. */

/* Note box (informational inline callout) */
.note-box {
  background: var(--xpale);
  border: 1px solid var(--pale);
  border-left: 4px solid var(--bright);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  font-size: .88rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 16px 0;
}
.note-box strong { color: var(--deep); }

/* Legal alert (Mexico index) */
.legal-alert {
  background: linear-gradient(135deg, #fff8f0, #fff0e6);
  border: 1px solid rgba(200,64,27,.28);
  border-left: 5px solid var(--amber);
  border-radius: var(--r);
  padding: 20px 24px;
  margin-bottom: 30px;
  font-size: .88rem;
  color: var(--ink-2);
  line-height: 1.65;
}
.legal-alert strong { color: var(--amber); }

/* Legal note (PR index) */
.legal-note {
  background: linear-gradient(135deg, #f0f7ff, #e6f0ff);
  border: 1px solid rgba(34,113,179,.28);
  border-left: 5px solid var(--bright);
  border-radius: var(--r);
  padding: 20px 24px;
  margin-bottom: 30px;
  font-size: .88rem;
  color: var(--ink-2);
  line-height: 1.65;
}

/* Info-alert — general teal tinted */
.info-alert {
  background: var(--xpale);
  border: 1px solid var(--pale);
  border-left: 4px solid var(--bright);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  font-size: .90rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 14px 0;
}
.info-alert strong { color: var(--deep); }

/* Accent column dividers for country sections */
.accent-us { border-left: 4px solid var(--t5); }
.accent-ca { border-left: 4px solid var(--mid); }   /* resolved per theme */
.accent-mx { border-left: 4px solid #2e8b57; }
.accent-pr { border-left: 4px solid #2271b3; }


/* ================================================================
   § 20  FILTER BAR — Index page search/filter
   ================================================================ */
.filter-bar {
  background: var(--bg-card);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-lg);
  padding: 15px 18px;
  margin-bottom: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

/* Left teal accent stripe */
.filter-bar::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--deep), var(--accent));
  border-radius: 4px 0 0 4px;
}

.filter-bar-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--deep);
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  flex-shrink: 0;
  padding-left: 8px;
}
.flbl-icon { font-size: 1rem; opacity: .85; }

.filter-divider {
  width: 1px;
  height: 26px;
  background: var(--gray-200);
  flex-shrink: 0;
  align-self: center;
}

.filter-btn-group { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--ink-2);
  font-size: .81rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  font-family: var(--font-sans);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
/* Shimmer effect on hover */
.filter-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform: translateX(-100%);
  transition: transform .42s ease;
  pointer-events: none;
}
.filter-btn:hover::before { transform: translateX(100%); }
.filter-btn:hover {
  background: var(--bright);
  color: #fff;
  border-color: var(--bright);
  box-shadow: 0 3px 12px rgba(0,128,128,.28);
  transform: translateY(-1px);
}
.filter-btn.active {
  background: linear-gradient(135deg, var(--mid), var(--bright));
  color: #fff;
  border-color: var(--mid);
  box-shadow: 0 4px 14px rgba(0,109,109,.35);
  transform: translateY(-1px);
}
.filter-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 40%; height: 2.5px;
  background: var(--accent);
  border-radius: 2px;
}

.fbtn-count {
  background: var(--gray-200);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: .70rem;
  font-weight: 700;
  line-height: 1.4;
  transition: background .2s, color .2s;
}
.filter-btn:hover .fbtn-count,
.filter-btn.active .fbtn-count {
  background: rgba(255,255,255,.22);
  color: rgba(255,255,255,.95);
}

.filter-result-count {
  margin-left: auto;
  font-size: .77rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  align-self: center;
}

/* Search input inside filter bar */
.search-box {
  position: relative;
  flex: 1;
  max-width: 340px;
}
.search-box input {
  width: 100%;
  background: var(--bg-card);
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-sm);
  padding: 10px 18px 10px 40px;
  font-family: var(--font-sans);
  font-size: .85rem;
  color: var(--ink-2);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.search-box input::placeholder { color: var(--text-faint); }
.search-box input:focus {
  border-color: var(--bright);
  box-shadow: 0 0 0 3px rgba(0,153,153,.12);
}
.search-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 1rem;
  pointer-events: none;
}

[data-theme="border-md"] { --border-md: rgba(0,122,122,.26); }


/* ================================================================
   § 21  CALLOUT & LEGAL ALERT BOXES  (see §15 .callout and §19)
   ================================================================ */
/* Already defined above. Additional variant: */
.key-callout {
  background: linear-gradient(120deg, var(--pale) 0%, var(--xpale) 100%);
  border: 1px solid var(--pale);
  border-left: 5px solid var(--bright);
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 20px 0;
  font-size: .93rem;
  color: var(--ink-2);
  line-height: 1.68;
}
.key-callout h4 { font-family:var(--font-serif); font-size:1rem; color:var(--deep); margin-bottom:8px; }
.key-callout strong { color: var(--deep); }


/* ================================================================
   § 22  FLAG STRIPE DECORATORS
   ================================================================ */
/* Mexico tricolour */
.mx-flag-bar {
  display: flex;
  height: 6px;
  overflow: hidden;
}
.mx-flag-bar span { flex: 1; }
.mx-flag-bar span:nth-child(1) { background: #006847; }
.mx-flag-bar span:nth-child(2) { background: #ffffff; }
.mx-flag-bar span:nth-child(3) { background: #ce1126; }

/* Puerto Rico stripes */
.pr-flag-bar {
  display: flex;
  height: 6px;
  overflow: hidden;
}
.pr-flag-bar span { flex: 1; }
.pr-flag-bar span:nth-child(odd)  { background: #ed0000; }
.pr-flag-bar span:nth-child(even) { background: #ffffff; }

/* Canada red bars */
.ca-flag-bar {
  display: flex;
  height: 6px;
  overflow: hidden;
}
.ca-flag-bar span:nth-child(1) { flex: 1; background: #d52b1e; }
.ca-flag-bar span:nth-child(2) { flex: 4; background: #ffffff; }
.ca-flag-bar span:nth-child(3) { flex: 1; background: #d52b1e; }


/* ================================================================
   § 23  ACCENT TAGS & BADGES
   ================================================================ */
/* General state / province badge */
.region-badge,
.prov-badge,
.state-badge,
.nv-badge,
.il-badge,
.or-badge,
.wa-badge,
.co-badge,
.ma-badge,
.mi-badge,
.ca-badge,
.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.90);
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r-xs);
  margin-bottom: 12px;
}

/* Canada-specific badge (blue tint) */
.ca-badge,
.prov-badge {
  background: rgba(46,109,164,.22);
  border-color: rgba(46,109,164,.5);
  color: #9ec6f5;
}

/* Small inline tags */
.mini-tag,
.tourist-tag,
.equity-tag,
.warn-tag,
.first-tag,
.pioneer-tag,
.record-tag,
.fast-tag,
.nascent-tag {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-full);
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

.tourist-tag { background: #fef6e7; color: #8a5c08; }
.equity-tag  { background: #ede7f6; color: #4a2480; }
.warn-tag    { background: var(--hl-danger-bg); color: #c0392b; }
.first-tag   { background: #e8f5e9; color: #1b5e20; }
.pioneer-tag { background: var(--amber-pale); color: #7b5900; }
.record-tag  { background: #e3f2fd; color: #0d47a1; }
.fast-tag    { background: #f3e5f5; color: #6a1b9a; }
.nascent-tag { background: #fff3e0; color: #e65100; }


/* ================================================================
   § 24  BACK LINK & NAVIGATION HELPERS
   ================================================================ */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.64);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 22px;
  transition: color var(--dur);
}
.back-link:hover { color: var(--amber-2); }

/* Accent count / report-count label */
.report-count {
  font-size: .70rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

/* Country navigation pills (hero btns area) */
.disc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}


/* ================================================================
   § 25  BUTTONS
   ================================================================ */
.btn-teal {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 12px 26px;
  background: var(--mid);
  color: #fff;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--r-xs);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--dur), transform var(--dur), box-shadow var(--dur);
  font-family: var(--font-sans);
}
.btn-teal:hover {
  background: var(--deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0,64,64,.26);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 11px 24px;
  background: transparent;
  color: var(--mid);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--r-xs);
  border: 1.5px solid var(--border-md);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  font-family: var(--font-sans);
}
.btn-outline:hover {
  background: var(--xpale);
  border-color: var(--bright);
  color: var(--deep);
}


/* ================================================================
   § 26  WARNINGS, DISCLAIMERS & REFERENCES
   ================================================================ */

/* Adult-use / product warning */
.warning-section {
  background: linear-gradient(to right, var(--hl-warn-bg), #fffde7);
  border: 1.5px solid var(--hl-warn-border);
  border-left: 5px solid #e65100;
  border-radius: var(--r);
  padding: 22px 24px;
  margin: 28px 0 18px;
}
.warning-section h3 {
  font-family: var(--font-serif);
  font-size: 1.04rem;
  color: #6b3000;
  margin-bottom: 12px;
}
.warning-section ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.warning-section ul li {
  padding-left: 20px;
  position: relative;
  font-size: .88rem;
  color: #4a2800;
  line-height: 1.6;
}
.warning-section ul li::before {
  content: '⚠';
  position: absolute;
  left: 0;
  font-size: .8rem;
}

/* Legal disclaimer */
.disclaimer-box {
  background: var(--hl-danger-bg);
  border: 1.5px solid #ef9a9a;
  border-left: 5px solid #c62828;
  border-radius: var(--r);
  padding: 20px 24px;
  margin: 18px 0;
}
.disclaimer-box h3 { font-family:var(--font-serif); font-size:1rem; color:#7b1c1c; margin-bottom:10px; }
.disclaimer-box p  { font-size:.88rem; color:#5a1414; line-height:1.65; margin-bottom:10px; }
.disclaimer-box ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:5px; }
.disclaimer-box ul li { padding-left:18px; position:relative; font-size:.85rem; color:#5a1414; line-height:1.55; }
.disclaimer-box ul li::before { content:'•'; position:absolute; left:0; color:#c62828; font-weight:700; }

/* References */
.references {
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r);
  padding: 22px 24px;
  margin: 18px 0;
}
.references h3 { font-family:var(--font-serif); font-size:1rem; color:var(--deep); margin-bottom:14px; }
.references ol { padding-left:20px; display:flex; flex-direction:column; gap:7px; }
.references ol li { font-size:.86rem; color:var(--ink-2); line-height:1.55; }
.references ol li a { color:var(--bright); text-decoration:underline; text-underline-offset:2px; }
.doc-updated {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
  font-size: .79rem;
  color: var(--text-muted);
}
.doc-updated a { color:var(--bright); font-weight:600; text-decoration:none; }


/* ================================================================
   § 27  DISCLAIMER STRIP & FOOTER
   ================================================================ */
.disclaimer-strip,
.disclaimer {
  background: var(--t9);
  color: rgba(255,255,255,.68);
  text-align: center;
  padding: 20px var(--gutter);
  font-size: .83rem;
  line-height: 1.65;
}
.disclaimer-strip h4,
.disclaimer h4 {
  font-family: var(--font-serif);
  font-size: .95rem;
  color: var(--amber-2);
  margin-bottom: 6px;
}
.disclaimer-strip a,
.disclaimer a { color: var(--t4); text-decoration: none; }
.disclaimer-strip a:hover,
.disclaimer a:hover { text-decoration: underline; }

.site-.report-footer,
.report-footer {
  background: var(--t9);
  border-top: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.46);
  text-align: center;
  padding: 28px var(--gutter);
  font-size: .82rem;
  line-height: 1.72;
}
.site-footer strong,
footer strong { color: rgba(255,255,255,.78); }
.site-footer a,
footer a { color: var(--t4); text-decoration: none; font-weight: 500; }
.site-footer a:hover,
footer a:hover { text-decoration: underline; }
.footer-note { font-size:.68rem; color:rgba(255,255,255,.34); line-height:1.6; }


/* ================================================================
   § 28  UTILITY CLASSES & ANIMATIONS
   ================================================================ */

/* Fade-in on scroll (add .visible via JS IntersectionObserver) */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
}
.fade-in.visible { opacity: 1; transform: none; }

/* Stagger delays */
.delay-1 { transition-delay: .10s; }
.delay-2 { transition-delay: .20s; }
.delay-3 { transition-delay: .30s; }
.delay-4 { transition-delay: .40s; }

/* Keyframes */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .35; transform: scale(.55); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes barGrow {
  to { transform: scaleX(1); }
}

/* Text utilities */
.text-teal   { color: var(--bright) !important; }
.text-amber  { color: var(--amber) !important; }
.text-muted  { color: var(--text-muted) !important; }
.text-deep   { color: var(--deep) !important; }
.fw-700      { font-weight: 700; }
.font-serif  { font-family: var(--font-serif); }

/* Spacing utilities */
.mt-0  { margin-top:    0; }
.mt-1  { margin-top:  .5rem; }
.mt-2  { margin-top: 1rem; }
.mt-3  { margin-top: 1.5rem; }
.mb-2  { margin-bottom: 1rem; }
.mb-3  { margin-bottom: 1.5rem; }

/* Divider rule */
.section-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pale), transparent);
  border: none;
  margin: 28px 0;
}


/* ================================================================
   § 29  RESPONSIVE BREAKPOINTS
   ================================================================ */

/* ── Tablet landscape  ≤ 1024px ── */
@media (max-width: 1024px) {
  .province-grid,
  .state-grid,
  .region-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* ── Tablet  ≤ 900px ── */
@media (max-width: 900px) {
  .chart-grid, .chart-row { grid-template-columns: 1fr; }
  .col-2-3 { grid-template-columns: 1fr; }
  .hero-inner { width: min(92%, 820px); }
}

/* ── Small tablet  ≤ 768px ── */
@media (max-width: 768px) {
  :root { --gutter: 1.1rem; }

  .hero, .site-header { padding: 56px 0 50px; }
  .hero h1, .site-header h1 { font-size: clamp(1.85rem, 6.5vw, 2.8rem); }
  .hero-inner { min-width: 88%; }

  .toc-nav ul { justify-content: flex-start; flex-wrap: nowrap; }
  .toc-nav ul li a { padding: 11px 11px; font-size: .68rem; }

  .section, .report-section { padding: 52px 0; }
  .section-header { gap: 14px; margin-bottom: 34px; }

  .province-grid,
  .state-grid,
  .region-grid { grid-template-columns: 1fr; gap: 16px; }

  .insight-grid, .kpi-grid,
  .card-grid, .stat-grid,
  .overview-grid, .status-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

  .rate-grid { grid-template-columns: repeat(2, 1fr); }

  .factor-grid, .factors-grid { grid-template-columns: 1fr; }

  .product-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

  .filter-bar { padding: 12px 14px; }
  .filter-divider { display: none; }
  .filter-result-count { display: none; }
  .filter-btn { padding: 6px 11px; font-size: .77rem; }

  .hero-stats, .stats-strip {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .hero-stat, .hstat {
    flex: 1 1 40%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .hero-stat:last-child, .hstat:last-child { border-bottom: none; }

  .col-2, .col-3 { grid-template-columns: 1fr; }

  .callout { padding: 24px 22px; }
  .chart-card { padding: 20px 16px 16px; }
  .disc-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ── Mobile  ≤ 540px ── */
@media (max-width: 540px) {
  .hero h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .hero-inner { min-width: 93%; }

  .section-num { width: 40px; height: 40px; font-size: 1rem; }

  .insight-grid, .kpi-grid,
  .card-grid, .stat-grid { grid-template-columns: 1fr; }

  .overview-grid, .status-grid { grid-template-columns: 1fr 1fr; }

  .province-sub-grid { grid-template-columns: 1fr; }

  .rate-grid { grid-template-columns: 1fr 1fr; }

  .hero-stats, .stats-strip { flex-direction: column; }
  .hero-stat, .hstat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); flex: unset; width: 100%; }
  .hero-stat:last-child, .hstat:last-child { border-bottom: none; }

  .toc-nav ul li a { font-size: .64rem; padding: 10px 9px; }

  .warning-section,
  .disclaimer-box,
  .references { padding: 15px 15px; }

  .callout { padding: 20px 16px; }

  .report-.report-footer, .site-.report-footer, .disclaimer { padding: 20px var(--gutter); font-size: .78rem; }

  .filter-btn { padding: 5px 10px; font-size: .74rem; }

  .disc-grid { grid-template-columns: 1fr; }

  .product-grid { grid-template-columns: 1fr 1fr; }
}

/* ================================================================
   END  cannreports.css v1.0
   CannBus Market Reports · www.cannbus.org · March 2026
   ================================================================ */