/* ============================================================================
   KLOFFA — Opasartikkelien tyylit  (malli: kotisivut.fi + energiahanke.fi)
   Teema: petroli #045762 → vihreä #4e8d7c liukuvärit, Roboto.
   ----------------------------------------------------------------------------
   Toimitus: ladataan mu-pluginilla (wp-content/mu-plugins/kf-article-styles.*).
   Lähde + ainoa muokkauspaikka: repo blogi/laatikko-tyylit.css.
   Komponentit scopattu .kf-article:n alle; layout-osio (otsikko, sivupalkki,
   meta) on globaali mutta rajattu :has(.kf-article)- ja .category-oppaat
   -ehdoilla → ei vaikuta muuhun sivustoon.
   ============================================================================ */

/* ====== LAYOUT — vain artikkelisivuilla (otsikko + leipä samaan palstaan) === */
body.single-post:has(.kf-article) #sidebar,
body.single-post.category-oppaat #sidebar { display: none !important; }

/* Lukualue: työpöytä 80 %, tabletti/mobiili 90 %, max 1200px (energiahanke-malli) */
body.single-post:has(.kf-article) #main-content .container,
body.single-post.category-oppaat #main-content .container {
  width: 80% !important; max-width: 1000px !important;
}
@media (max-width: 1024px) {
  body.single-post:has(.kf-article) #main-content .container,
  body.single-post.category-oppaat #main-content .container { width: 90% !important; max-width: none !important; }
}
body.single-post:has(.kf-article) #left-area,
body.single-post.category-oppaat #left-area {
  width: 100% !important; max-width: none !important;
  margin: 0 auto !important; float: none !important; padding: 0 !important;
}

/* Kirjoittaja/päiväys/kategoria-meta pois (ajaton, ei henkilönimiä) */
body.single-post:has(.kf-article) .post-meta,
body.single-post.category-oppaat .post-meta { display: none !important; }

/* Pääotsikko (H1) liukuvärinä, samaan palstaan leivän kanssa */
body.single-post:has(.kf-article) .entry-title,
body.single-post.category-oppaat .entry-title {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 700; letter-spacing: -.022em; line-height: 1.16;
  font-size: clamp(1.8rem, 3.3vw, 2.5rem); margin: 0 0 14px !important;
  background: linear-gradient(120deg, #043e47 0%, #045762 45%, #4e8d7c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Divin otsikkokääreen ylimääräinen tila pois (meta piilotettu, padding jäi) */
body.single-post:has(.kf-article) .et_post_meta_wrapper,
body.single-post.category-oppaat .et_post_meta_wrapper { padding-bottom: 0 !important; margin-bottom: 0 !important; }
body.single-post:has(.kf-article) .entry-content,
body.single-post.category-oppaat .entry-content { padding-top: 0 !important; margin-top: 0 !important; }

/* ====== ARTIKKELIN SISÄLTÖ ================================================= */
.kf-article {
  --kf-primary:   #045762;
  --kf-primary-2: #06707f;
  --kf-green:     #4e8d7c;
  --kf-green-2:   #5fa78f;
  --kf-grad:      linear-gradient(135deg, #045762 0%, #4e8d7c 100%);
  --kf-grad-soft: linear-gradient(135deg, #06707f 0%, #5fa78f 100%);
  --kf-tint:      #eef5f2;
  --kf-tint-2:    #e4f0ec;
  --kf-surface:   #ffffff;
  --kf-border:    #d7e5df;
  --kf-text:      #36474a;
  --kf-heading:   #0d2f34;
  --kf-muted:     #5e6f6a;
  --kf-on-dark:   #cfe6e1;
  --kf-r:         12px;
  --kf-r-lg:      18px;
  --kf-pill:      999px;
  --kf-font:      'Roboto', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  max-width: none; margin: 0;
  font-family: var(--kf-font);
  font-size: 1.08rem; line-height: 1.74; color: var(--kf-text);
}

.kf-article p { margin: 0 0 1.25em; }
/* wpautop kääräisee FAQ-JSON-LD <script>:n <p>:hen → neutralisoidaan (ei näy, JSON-LD säilyy) */
.kf-article script { display: none !important; }
.kf-article p:has(> script) { margin: 0 !important; padding: 0 !important; }
.kf-article strong { color: var(--kf-heading); font-weight: 700; }
.kf-article a {
  color: var(--kf-primary); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(78,141,124,.55);
  text-underline-offset: 3px; text-decoration-thickness: 2px;
  transition: color .18s, text-decoration-color .18s;
}
.kf-article a:hover { color: var(--kf-green); text-decoration-color: var(--kf-green); }

/* ---- Yhtenäinen pystyrytmi: samat välit kaikkialla ---- */
.kf-article > * { margin: 0 0 30px !important; }
.kf-article > *:first-child { margin-top: 0 !important; }
.kf-article > *:last-child { margin-bottom: 0 !important; }
.kf-article > h2 { margin: 54px 0 16px !important; }
.kf-article > h2:first-child { margin-top: 0 !important; }
.kf-article > h3 { margin: 36px 0 12px !important; }
.kf-article .kf-faq > h2 { margin: 0 0 16px !important; }

/* Otsikot — H2 liukuväriteksti (ei irrallista palkkia) */
.kf-article h2 {
  font-family: var(--kf-font); font-weight: 700;
  font-size: clamp(1.55rem, 3vw, 2.05rem); line-height: 1.2; letter-spacing: -.02em;
  margin: 1.9em 0 .6em; scroll-margin-top: 100px;
  background: linear-gradient(120deg, #045762 0%, #4e8d7c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  width: fit-content; max-width: 100%; padding-bottom: .04em;
}
.kf-article h3 {
  font-family: var(--kf-font); font-weight: 700;
  font-size: clamp(1.18rem, 2vw, 1.42rem); line-height: 1.3;
  color: var(--kf-heading); margin: 1.5em 0 .5em;
  padding-left: 16px; position: relative;
}
.kf-article h3::before {
  content: ""; position: absolute; left: 0; top: .15em; bottom: .15em;
  width: 4px; border-radius: 2px; background: var(--kf-grad);
}

.kf-article .kf-meta { font-size: .86rem; color: var(--kf-muted); margin: 0 0 1.6em; }

/* Listat — Divin #left-area-tyylit kumotaan !importantilla */
.kf-article ul, .kf-article ol {
  margin: 0 0 1.5em !important; padding: 0 !important; list-style: none !important;
}
.kf-article ul > li, .kf-article ol > li {
  position: relative; list-style: none !important;
  padding: 13px 18px 13px 50px !important; margin: 0 0 9px !important;
  background: var(--kf-surface); border: 1px solid var(--kf-border); border-radius: var(--kf-r);
  box-shadow: 0 1px 2px rgba(4,87,98,.04), 0 6px 18px -8px rgba(4,87,98,.08);
}
.kf-article ul > li::before {
  content: ""; position: absolute; left: 18px; top: 19px;
  width: 10px; height: 10px; border-radius: 3px; background: var(--kf-grad);
}
.kf-article ol { counter-reset: kfli; }
.kf-article ol > li { counter-increment: kfli; }
.kf-article ol > li::before {
  content: counter(kfli); position: absolute; left: 14px; top: 13px;
  width: 26px; height: 26px; border-radius: 8px; background: var(--kf-grad); color: #fff;
  font-weight: 700; font-size: .82rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px -2px rgba(4,87,98,.5);
}

/* Numeroidut askeleet otsikolla */
.kf-article ol.kf-steps > li { padding: 15px 20px 15px 62px !important; }
.kf-article ol.kf-steps > li::before { top: 15px; width: 32px; height: 32px; border-radius: 9px; font-size: .9rem; }
.kf-article ol.kf-steps > li strong { display: block; margin-bottom: 2px; font-size: 1.05rem; }

/* TL;DR / "Lyhyesti" */
.kf-article .kf-tldr {
  background: linear-gradient(150deg, var(--kf-tint) 0%, var(--kf-tint-2) 100%);
  border: 1px solid rgba(78,141,124,.28);
  border-radius: var(--kf-r-lg); padding: 24px 28px; margin: 0 0 34px;
  box-shadow: 0 1px 3px rgba(4,87,98,.05), 0 10px 26px -14px rgba(4,87,98,.18);
}
.kf-article .kf-tldr-title {
  font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kf-primary); margin-bottom: 14px;
}
.kf-article .kf-tldr ul { margin: 0 !important; }
.kf-article .kf-tldr li {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; margin: 0 !important; padding: 6px 0 6px 28px !important;
}
.kf-article .kf-tldr li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 11px; height: 11px; border-radius: 50%; background: var(--kf-grad);
}

/* Vertailutaulukko */
.kf-article .kf-vertailu {
  width: 100%; border-collapse: collapse; margin: 0 0 34px;
  font-size: .97rem; border: 1px solid var(--kf-border);
  border-radius: var(--kf-r-lg); overflow: hidden;
  box-shadow: 0 1px 3px rgba(4,87,98,.05), 0 10px 26px -16px rgba(4,87,98,.18);
}
.kf-article .kf-vertailu th {
  background: var(--kf-grad); color: #fff; text-align: left; font-weight: 700; padding: 14px 16px;
}
.kf-article .kf-vertailu td { padding: 13px 16px; border-top: 1px solid var(--kf-border); vertical-align: top; }
.kf-article .kf-vertailu td.kf-hl { font-weight: 700; color: var(--kf-heading); }
.kf-article .kf-vertailu tbody tr:nth-child(even) { background: var(--kf-tint); }

/* Nostolaatikko */
.kf-article .kf-nosto {
  background: var(--kf-surface); border: 1px solid var(--kf-border);
  border-left: 5px solid transparent;
  border-image: var(--kf-grad) 1; /* gradient-reuna */
  border-radius: 0 var(--kf-r) var(--kf-r) 0; padding: 18px 22px; margin: 0 0 32px;
}
.kf-article .kf-nosto p { margin: 0; }

/* Mid-callout "Pyydä tarjous" (pehmeä, gradient-reuna) */
.kf-article .kf-callout {
  background: linear-gradient(150deg, var(--kf-tint) 0%, var(--kf-tint-2) 100%);
  border: 1px solid rgba(78,141,124,.3);
  border-radius: var(--kf-r-lg); padding: 28px 32px; margin: 40px 0;
  position: relative; overflow: hidden;
  box-shadow: 0 1px 3px rgba(4,87,98,.05), 0 14px 32px -18px rgba(4,87,98,.25);
}
.kf-article .kf-callout::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--kf-grad);
}
.kf-article .kf-callout-label {
  font-weight: 700; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kf-primary); margin-bottom: 8px;
}
.kf-article .kf-callout h3 { margin: 0 0 8px; padding: 0; color: var(--kf-heading); }
.kf-article .kf-callout h3::before { display: none; }
.kf-article .kf-callout p { margin: 0 0 18px; color: var(--kf-muted); }

/* Napit (mid + cta) — gradient */
.kf-article .kf-callout a,
.kf-article .kf-cta a.kf-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--kf-grad); background-size: 160% 160%; background-position: 0 0;
  color: #fff !important; font-weight: 700; font-size: .96rem;
  padding: 13px 26px; border-radius: var(--kf-pill); text-decoration: none;
  box-shadow: 0 6px 18px -6px rgba(4,87,98,.55);
  transition: background-position .45s ease, transform .18s, box-shadow .2s;
}
@media (hover: hover) {
  .kf-article .kf-callout a:hover,
  .kf-article .kf-cta a.kf-btn:hover { background-position: 100% 100%; transform: translateY(-2px); box-shadow: 0 10px 24px -6px rgba(4,87,98,.6); }
}

/* FAQ (näkyvä; schema erikseen JSON-LD:nä) — jokainen Q&A omassa kortissa */
.kf-article .kf-faq { margin: 0 0 8px; }
.kf-article .kf-faq-item {
  background: var(--kf-surface); border: 1px solid var(--kf-border);
  border-radius: var(--kf-r); padding: 18px 22px; margin: 0 0 12px;
  box-shadow: 0 1px 2px rgba(4,87,98,.04), 0 6px 18px -8px rgba(4,87,98,.08);
}
.kf-article .kf-faq-item:last-child { margin-bottom: 0; }
.kf-article .kf-faq-item h3 {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; margin: 0 0 6px !important;
  font-size: 1.1rem; font-weight: 700; color: var(--kf-primary);
}
.kf-article .kf-faq-item h3::before { display: none !important; }
.kf-article .kf-faq-item p { margin: 0 !important; padding: 0 !important; border: 0 !important; color: var(--kf-text); }

/* Lähteet */
.kf-article .kf-sources {
  background: var(--kf-tint); border: 1px solid var(--kf-border);
  border-radius: var(--kf-r-lg); padding: 20px 24px; margin: 36px 0 0;
}
.kf-article .kf-sources-title {
  font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--kf-muted); margin-bottom: 12px;
}
.kf-article .kf-sources ul { margin: 0 !important; }
.kf-article .kf-sources li {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 5px 0 !important; margin: 0 !important; font-size: .92rem;
}
.kf-article .kf-sources li::before { content: none !important; }

/* Loppu-CTA (tumma liukuväri) */
.kf-article .kf-cta {
  margin: 52px 0 0; padding: 44px 36px; text-align: center; border-radius: var(--kf-r-lg);
  background: linear-gradient(135deg, #043e47 0%, #045762 55%, #2f6b5d 100%);
  color: #fff; position: relative; overflow: hidden;
}
.kf-article .kf-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 20%, rgba(95,167,143,.35) 0%, transparent 45%);
}
.kf-article .kf-cta > * { position: relative; z-index: 1; }
.kf-article .kf-cta h2 {
  color: #fff; -webkit-text-fill-color: #fff; background: none; margin: 0 0 12px; width: auto;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.kf-article .kf-cta h2 span {
  background: linear-gradient(120deg, #7fd0b8, #aef0d9);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.kf-article .kf-cta, .kf-article .kf-cta p { text-align: center !important; }
.kf-article .kf-cta > p { color: var(--kf-on-dark); margin: 0 auto 24px; max-width: 52ch; }
.kf-article .kf-cta .kf-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.kf-article .kf-cta a.kf-btn { background: #fff; color: var(--kf-primary) !important; box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); }
@media (hover: hover) { .kf-article .kf-cta a.kf-btn:hover { background: var(--kf-tint); transform: translateY(-2px); } }
.kf-article .kf-cta a.kf-btn-secondary {
  background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.5); box-shadow: none;
}
@media (hover: hover) { .kf-article .kf-cta a.kf-btn-secondary:hover { background: rgba(255,255,255,.12); } }
.kf-article .kf-cta .kf-cta-note { font-size: .82rem; color: var(--kf-on-dark); margin: 18px auto 0; text-align: center !important; width: 100%; }

/* Mobiili */
@media (max-width: 560px) {
  body.single-post:has(.kf-article) #left-area,
  body.single-post.category-oppaat #left-area { padding: 0 16px !important; }
  .kf-article { font-size: 1.02rem; }
  .kf-article .kf-callout { padding: 22px 20px; }
  .kf-article .kf-cta { padding: 30px 22px; }
  .kf-article .kf-vertailu { font-size: .9rem; }
  .kf-article .kf-vertailu th, .kf-article .kf-vertailu td { padding: 10px 12px; }
  .kf-article .kf-cta .kf-cta-row { flex-direction: column; }
}