/* ════════════════════════════════════════════════════════════════════
   TaxRatesByCountry — site02.css
   Brand-s2 overrides on top of v4.css (design system v5)
   Brand color: green --s2 (#065f46)
   Depends on : v4.css (loaded first, must precede this file)
   ════════════════════════════════════════════════════════════════════ */

/* ── 0. LEGACY COMPAT ───────────────────────────────────────────────── */
:root {
  --s2-color: #059669;
  --s2-light: #ecfdf5;
  --s2-mid:   #a7f3d0;
}
.s2-logo, .s2-kicker, .s2-accent { color: var(--s2-color); }
.s2-explore { border-color: var(--s2-mid); }
.s2-explore:hover { border-color: var(--s2-color); color: var(--s2-color); }
.stat-box:hover { border-top-color: var(--s2-color); }
.page-hero { border-left: 4px solid var(--s2-color); padding-left: 1.25rem; border-bottom: none; margin-bottom: .5rem; }
.data-table thead th { background: var(--s2-color); }

/* ── 1. BRAND SCOPE (reinforce v4.css mapping) ──────────────────────── */
.brand-s2 {
  --brand:   var(--s2);
  --brandm:  var(--s2m);
  --brandd:  var(--s2d);
  --brandl:  var(--s2l);
  --brandb:  var(--s2b);
}

/* ── 2. SCARD HERO — replace hard-coded blue gradient ───────────────── */
/* v4.css uses cyan->blue gradient; site02 needs green tones. */
.brand-s2 .scard-hero-meter-fill {
  background: linear-gradient(90deg,#34d399 0%,#059669 100%);
}
.brand-s2 .scard-hero-meter-fill.tier-cheap { background: linear-gradient(90deg,#6ee7b7 0%,#10b981 100%) }
.brand-s2 .scard-hero-meter-fill.tier-mod   { background: linear-gradient(90deg,#34d399 0%,#059669 100%) }
.brand-s2 .scard-hero-meter-fill.tier-exp   { background: linear-gradient(90deg,#fbbf24 0%,#b45309 100%) }
.brand-s2 .scard-hero-meter-fill.tier-vexp  { background: linear-gradient(90deg,#fb7185 0%,#b91c1c 100%) }

/* ── 3. SCARDS — primary value emphasis ─────────────────────────────── */
.brand-s2 .scard-primary .scard-val { color: var(--s2); }
.brand-s2 .scard:hover { border-color: var(--s2); }

/* ── 4. CALLOUT — green tonal background ────────────────────────────── */
.brand-s2 .callout {
  background: linear-gradient(90deg, var(--s2l) 0%, #f0fdf4 100%);
  border-color: var(--s2b);
  border-left-color: var(--s2);
}
.brand-s2 .callout-tag {
  color: var(--s2);
  border-color: var(--s2b);
  background: rgba(255,255,255,.7);
}
.brand-s2 .callout-body .num { color: var(--s2d); }
.brand-s2 .callout-cta { color: var(--s2); }

/* ── 5. HEADER & NAV — brand-s2 ─────────────────────────────────────── */
.siteheader.brand-s2 .logo { color: var(--s2); }
.siteheader.brand-s2 .mainnav>li>a:hover,
.siteheader.brand-s2 .mainnav>li>a.on {
  color: var(--ink);
  border-bottom-color: var(--s2);
}
.siteheader.brand-s2 .header-cta { background: var(--s2); }
.siteheader.brand-s2 .header-cta:hover { background: var(--s2m); }

/* ── 6. PAGE OVER (kicker) — brand-s2 ───────────────────────────────── */
.brand-s2 .page-over { color: var(--s2); }
.brand-s2 .page-over::before { background: var(--s2); }

/* ── 7. SECTION HEADER source-badge dot ─────────────────────────────── */
.brand-s2 .sh-src::before { background: var(--s2); }

/* ── 8. ASIDE TOC — green active state ──────────────────────────────── */
.brand-s2 .aside-toc a:hover,
.brand-s2 .aside-toc a.on {
  color: var(--s2);
  border-left-color: var(--s2);
  background: #f0fdf4;
}
.brand-s2 .aside-chip:hover {
  border-color: var(--s2);
  color: var(--s2);
  background: var(--s2l);
}

/* ── 9. INSIGHT block radial accent ─────────────────────────────────── */
.brand-s2 .insight::before { background: radial-gradient(var(--s2), transparent 65%); }
.brand-s2 .insight-label::before { background: var(--s2); }

/* ── 10. LEAD CAPTURE — brand-s2 button & accents ───────────────────── */
.brand-s2 .lead::before { background: radial-gradient(var(--s2), transparent 65%); }
.brand-s2 .lead-btn { background: var(--s2); }
.brand-s2 .lead-btn:hover { background: var(--s2m); }
.brand-s2 .lead-inp:focus { border-color: var(--s2); }

/* ── 11. EF CHIPS, ILINKS — brand-s2 hover ──────────────────────────── */
.brand-s2 .ef-chip:hover {
  border-color: var(--s2);
  color: var(--s2);
  background: var(--s2l);
}
.brand-s2 .ilinks-col a:hover { color: var(--s2); }

/* ── 12. BAR FILLS — fall back to brand-s2 when no tier ─────────────── */
.brand-s2 .bar-fill:not(.tier-cheap):not(.tier-mod):not(.tier-exp):not(.tier-vexp):not(.tier-na):not(.t-power) {
  background: var(--s2);
}

/* ── 13. TIER badges — re-tone "low tax" as brand green ─────────────── */
/* For fiscal pages, tier-cheap means "low taxes = good for taxpayer".
   We override the cost-of-living teal with a brand-s2 green. */
.brand-s2 .tier-cheap {
  background: var(--s2l);
  color: var(--s2);
}
.brand-s2 .tier-cheap::before { background: var(--s2); }

/* ── 14. BACK-TO-TOP hover ──────────────────────────────────────────── */
.back-to-top:hover { background: var(--s2); }

/* ── 15. EDITORIAL CONTENT BLOCKS (HTML cache injection) ────────────── */
/* Wrap for {{*_BLOCK}} placeholders that ship raw HTML from Claude.
   The cache blocks ship their own h2 — we hide it because the
   surrounding .sh already provides the section title. */
.ed-block {
  margin: 1rem 0 1.5rem;
  font-size: .92rem;
  color: var(--ink2);
  line-height: 1.7;
}
.ed-block h2 { display: none; }
.ed-block h3 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 1.25rem 0 .5rem;
}
.ed-block p { margin: .5rem 0 .75rem; }
.ed-block ul { padding-left: 1.25rem; margin: .5rem 0 1rem; }
.ed-block li { margin: .25rem 0; line-height: 1.65; }
.ed-block strong { color: var(--ink); font-weight: 600; }
.ed-block .bracket-detail {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--s2);
  border-radius: var(--r);
  padding: 8px 14px;
  margin: 6px 0;
  font-size: .88rem;
}
.ed-block .bracket-detail strong {
  font-family: var(--mono);
  color: var(--s2d);
  margin-right: 6px;
}
.ed-block .highlight,
.ed-block .key-insight {
  background: var(--bg);
  border-left: 3px solid var(--s2);
  border-radius: 0 var(--r) var(--r) 0;
  padding: .85rem 1.1rem;
  margin: 1rem 0;
  font-size: .9rem;
  color: var(--ink2);
  line-height: 1.6;
}
.ed-block .source {
  font-size: .7rem;
  color: var(--faint);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .4rem 0 0;
  border-top: 1px solid var(--hairline);
  margin-top: .75rem;
}
.ed-block table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  margin: 1rem 0 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r2);
  overflow: hidden;
}
.ed-block table thead { background: var(--ink); }
.ed-block table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: .62rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ed-block table tbody tr { border-bottom: 1px solid var(--hairline); }
.ed-block table tbody tr:last-child { border-bottom: none; }
.ed-block table tbody tr:hover { background: var(--bg); }
.ed-block table td {
  padding: 10px 14px;
  color: var(--ink2);
  vertical-align: middle;
  line-height: 1.4;
}
.ed-block table td:first-child {
  font-weight: 600;
  color: var(--ink);
}

/* ── 16. RESPONSIVE FINE-TUNES ──────────────────────────────────────── */
@media (max-width: 640px) {
  .ed-block h3 { font-size: 1rem; }
  .ed-block { font-size: .88rem; }
}