/* ====================================================================
   CO₂-sektioner: nøgletal-ringe, case-kort og metode-fliser.
   Selvstændigt modul (som figurudforskeren) – bruges både på den
   publicerede CO₂-side og på designforslagene. Scopet til komponenternes
   egne klasser, ikke til body-klassen .ht-v2.
   ==================================================================== */

/* ── Nøgletal: ringe + tælleværk ────────────────────────────────── */
.ht-v2-kpis {
  --v2-ink: #0a1a13;
  --v2-muted: #4a6158;
  --v2-green: #095A42;
  --v2-bright: #3EBE81;
  --v2-pale: #e8f5ee;
  --v2-ease: cubic-bezier(.22, 1, .36, 1);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 2.2rem;
}
.ht-v2-kpi {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  padding: 1.5rem 1.6rem;
  background: #fff;
  border: 1px solid rgba(9,90,66,.07);
  border-radius: 22px;
  box-shadow: 0 10px 30px -22px rgba(9,90,66,.35);
  transition: transform .3s var(--v2-ease), box-shadow .3s var(--v2-ease);
}
.ht-v2-kpi:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(9,90,66,.4); }
.ht-v2-ring { position: relative; width: 106px; height: 106px; flex-shrink: 0; }
.ht-v2-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.ht-v2-ring circle { fill: none; stroke-width: 9; }
.ht-v2-ring-bg { stroke: var(--v2-pale); }
/* Uden script står ringen fuldt tegnet. Scriptet "spænder" komponenten
   (.is-armed), hvorefter ringen tegnes op, når kortet kommer i syne. */
.ht-v2-ring-fg {
  stroke: var(--v2-bright);
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: calc(326.7 * (1 - var(--v) / 100));
}
.ht-v2-kpis.is-armed .ht-v2-ring-fg { stroke-dashoffset: 326.7; }
.ht-v2-kpis.is-armed .ht-v2-kpi.is-in .ht-v2-ring-fg {
  stroke-dashoffset: calc(326.7 * (1 - var(--v) / 100));
  transition: stroke-dashoffset 1.7s var(--v2-ease) .15s;
}
.ht-v2-ring strong {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--v2-green);
  font-variant-numeric: tabular-nums;
}
.ht-v2-kpi--plain .ht-v2-kpi-fig {
  width: 106px; flex-shrink: 0; text-align: center;
  font-size: 1.75rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.05;
  color: var(--v2-green);
}
.ht-v2-kpi-fig span {
  display: block; margin-top: .2rem;
  font-size: .78rem; font-weight: 700; letter-spacing: 0; color: var(--v2-muted);
}
.ht-v2-kpi-l { font-size: 1.02rem; font-weight: 800; color: var(--v2-ink); margin: 0 0 .3rem; line-height: 1.25; }
.ht-v2-kpi-sub { font-size: .8rem; color: var(--v2-muted); line-height: 1.45; margin: 0; }

/* ── Case: "Det virker i praksis" ───────────────────────────────── */
/* Case-sektionen (#co2-case på CO₂-siden, .ht-case-sec på alle temasider) */
:is(#co2-case, .ht-case-sec) .ht-co2-case-shell { border: 1px solid rgba(9,90,66,.08); box-shadow: 0 24px 50px -30px rgba(9,90,66,.35); }
:is(#co2-case, .ht-case-sec) .ht-co2-case-text { background: #fff; }

/* ── Metode-fliser: "Sådan måler vi CO₂-tallene" ─────────────────── */
.ht-co2-grunde--tri .ht-co2-grund { border: 1px solid rgba(9,90,66,.08); }
.ht-co2-grunde--tri .ht-co2-grund-body { padding: 1.5rem 1.6rem 1.7rem; }
.ht-co2-grunde--tri .ht-co2-grund-title { font-size: 1.15rem !important; }

/* ── "På CO₂ er vi langt" (#vigtigste-indsigt) og de tilsvarende
      "Hvad kræver det …"-sektioner på de andre temasider (.ht-omstilling-sec) ── */
/* Bredere overskriftsspalte, så lange ord ikke brydes midt i ordet. */
:is(#vigtigste-indsigt, .ht-omstilling-sec) .ht-omht-formaal-cols { grid-template-columns: minmax(240px, 400px) 1fr; }
:is(#vigtigste-indsigt, .ht-omstilling-sec) .ht-omht-formaal-left h2 { overflow-wrap: normal; }
:is(#vigtigste-indsigt, .ht-omstilling-sec) .ht-omht-formaal-right > p:not(:last-child) { margin-bottom: 1.15rem; }
/* Mellemrubrikkerne adskilles med en tynd streg.
   Overstyrer CO₂-sidens generelle h3-regel (.page-id-1716 h3). */
:is(#vigtigste-indsigt, .ht-omstilling-sec) .ht-omht-formaal-right > h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
:is(#vigtigste-indsigt, .ht-omstilling-sec) .ht-omht-formaal-right h3 {
  margin: 2.4rem 0 .9rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(9,90,66,.10);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: #165542;
}
@media (max-width: 820px) {
  :is(#vigtigste-indsigt, .ht-omstilling-sec) .ht-omht-formaal-cols { grid-template-columns: 1fr; }
}

/* ── Affaldshierarkiet (Cirkulær økonomi): de fem trin som en trappe fra
      mest til mindst ønsket. Nummerfeltet går fra mørkegrønt til gråt, og en
      tynd linje binder trinene sammen. Listen er en almindelig nummereret
      liste i editoren (klassen ht-affaldshierarki); titlen er <strong>,
      forklaringen står efter <br>. Bevidst uden kortflader (brugerønske) –
      kun nummer, linje og tekst. ── */
.entry-content ol.ht-affaldshierarki {
  --ah-badge: 2.5rem;
  --ah-indent: 3.6rem;
  --ah-gap: 1.35rem;
  list-style: none;
  counter-reset: ah;
  margin: 1.7rem 0 1.9rem;
  padding: 0;
}
.entry-content ol.ht-affaldshierarki > li {
  --ah-bg: #095A42; --ah-fg: #fff;
  counter-increment: ah;
  position: relative;
  margin: 0 0 var(--ah-gap) var(--ah-indent);
  padding: .3rem 0 0;
  list-style: none;
  font-size: .95rem;
  line-height: 1.6;
  color: #4a6158;
}
.entry-content ol.ht-affaldshierarki > li:last-child { margin-bottom: 0; }
.entry-content ol.ht-affaldshierarki > li:nth-child(2) { --ah-bg: #1d7a58; }
.entry-content ol.ht-affaldshierarki > li:nth-child(3) { --ah-bg: #3EBE81; --ah-fg: #063d2d; }
.entry-content ol.ht-affaldshierarki > li:nth-child(4) { --ah-bg: #b5e0c8; --ah-fg: #0a2e21; }
.entry-content ol.ht-affaldshierarki > li:nth-child(5) { --ah-bg: #e4ebe7; --ah-fg: #4a6158; }
.entry-content ol.ht-affaldshierarki > li::before {
  content: counter(ah);
  position: absolute;
  left: calc(-1 * var(--ah-indent));
  top: 0;
  z-index: 1;
  width: var(--ah-badge);
  height: var(--ah-badge);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ah-bg);
  color: var(--ah-fg);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1;
}
/* Forbindelseslinje fra dette nummer ned til det næste */
.entry-content ol.ht-affaldshierarki > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--ah-indent) + var(--ah-badge) / 2 - 1px);
  top: calc(var(--ah-badge) + .3rem);
  bottom: calc(-1 * var(--ah-gap) + .3rem);
  width: 2px;
  background: rgba(9,90,66,.14);
}
.entry-content ol.ht-affaldshierarki > li > strong {
  display: block;
  margin-bottom: .2rem;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0a1a13;
}
.entry-content ol.ht-affaldshierarki > li > br { display: none; }
@media (max-width: 640px) {
  .entry-content ol.ht-affaldshierarki { --ah-badge: 2.2rem; --ah-indent: 3rem; --ah-gap: 1.15rem; }
  .entry-content ol.ht-affaldshierarki > li { padding-top: .15rem; }
  .entry-content ol.ht-affaldshierarki > li::before { font-size: .88rem; }
}

/* ── Entry-animationer ──────────────────────────────────────────── */
/* .ht-v2-reveal sættes af co2-sections.js og fjernes igen, når elementet
   er gledet ind – så kortenes egne hover-overgange ikke overskrives.
   html-præfikset løfter specificiteten over komponenternes egne
   transition-regler, som ellers ville æde fade-in'en. */
html .ht-v2-reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }
html .ht-v2-reveal.is-in {
  transition: opacity .75s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}

@media (max-width: 900px) {
  .ht-v2-kpis { grid-template-columns: 1fr; }
  .ht-v2-kpi { padding: 1.2rem 1.3rem; }
  .ht-v2-ring { width: 88px; height: 88px; }
  .ht-v2-ring strong { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ht-v2-kpis.is-armed .ht-v2-kpi .ht-v2-ring-fg { stroke-dashoffset: calc(326.7 * (1 - var(--v) / 100)); transition: none; }
  html .ht-v2-reveal:not(.is-in) { opacity: 1; transform: none; }
  html .ht-v2-reveal.is-in { transition: none; }
}