/*
Theme Name:     freetrialchild
Theme URI:      n/a
Template:       kadence
Author:         Janak
Author URI:     n/a
Description:    Child theme for kostenpromonat.de, carrying the "Editorial Preisguide" design system.
Version:        1.1
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ==========================================================================
   kostenpromonat.de - Editorial Preisguide
   --------------------------------------------------------------------------
   Realization of the active Novamira design system for the reading templates
   (single post, page, archive) plus the cost calculator.

   Colour tokens resolve through the Kadence global palette, so the Customizer
   remains the single source of truth. Hex fallbacks match DESIGN.md exactly.

   Everything is scoped to kpm- prefixed classes injected by functions.php.
   Nothing here targets bare .entry-content, so the Kadence-built front page
   (page 376) is untouched by design.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  --kpm-verm:         var(--global-palette1, #D23D24);
  --kpm-verm-deep:    var(--global-palette2, #A32514);
  --kpm-ink:          var(--global-palette3, #221710);
  --kpm-ink-2:        var(--global-palette4, #52473F);
  --kpm-ink-3:        var(--global-palette5, #7E746B);
  --kpm-rule-strong:  var(--global-palette6, #C0B6A7);
  --kpm-paper-sunk:   var(--global-palette7, #F3ECE0);
  --kpm-paper:        var(--global-palette8, #FBF6EE);
  --kpm-paper-raised: var(--global-palette9, #FEFBF5);

  /* Declared in DESIGN.md but outside the nine palette slots. */
  --kpm-rule:         #DDD5C8;
  --kpm-clay:         #F1DCCA;
  --kpm-verm-wash:    #FFE6DD;
  --kpm-weight:       #3C182A;
  --kpm-weight-2:     #562B40;
  --kpm-good:         #337A46;
  --kpm-warn:         #C48218;
  --kpm-bad:          #B63039;

  --kpm-serif: "Fraunces", ui-serif, Georgia, serif;
  --kpm-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kpm-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --kpm-t-xs: .75rem;
  --kpm-t-sm: .875rem;
  --kpm-t-base: 1.0625rem;
  --kpm-t-lg: 1.375rem;
  --kpm-t-xl: 1.9375rem;
  --kpm-t-2xl: 2.625rem;

  --kpm-s-1: 4px;  --kpm-s-2: 8px;  --kpm-s-3: 12px; --kpm-s-4: 16px;
  --kpm-s-5: 24px; --kpm-s-6: 32px; --kpm-s-7: 48px; --kpm-s-8: 64px;
  --kpm-s-9: 96px;

  --kpm-measure: 68ch;
  --kpm-r-sm: 6px;
  --kpm-r-md: 8px;
  --kpm-r-lg: 12px;

  --kpm-e-out: cubic-bezier(.22, 1, .36, 1);
  --kpm-e-out-expo: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------ 2. UTILITIES */
.kpm-eyebrow {
  display: block;
  font: 500 var(--kpm-t-xs)/1 var(--kpm-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--kpm-ink-3);
}

.kpm-num,
.kpm-prose .kpm-num {
  font-family: var(--kpm-mono);
  font-variant-numeric: tabular-nums;
}

.kpm-tag {
  display: inline-block;
  font: 500 var(--kpm-t-xs)/1 var(--kpm-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--kpm-verm-deep);
  background: var(--kpm-verm-wash);
  border-radius: var(--kpm-r-sm);
  padding: 6px 8px;
  text-decoration: none;
}

.kpm-tag--good { color: var(--kpm-good); background: #E4F0E7; }
.kpm-tag--warn { color: var(--kpm-warn); background: #FBEFD8; }
.kpm-tag--bad  { color: var(--kpm-bad);  background: #F8E2E4; }

/* Underline that thickens on hover, no colour drift. */
.kpm-link {
  color: var(--kpm-verm-deep);
  font-weight: 500;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(210, 61, 36, .4);
  transition: box-shadow .15s var(--kpm-e-out);
}
.kpm-link:hover,
.kpm-link:focus-visible { box-shadow: inset 0 -2px 0 var(--kpm-verm); }

/* Focus ring, system-wide. */
.kpm-prose a:focus-visible,
.kpm-toc a:focus-visible,
.kpm-row-item:focus-visible,
.kpm-chip:focus-visible,
.kpm-calc :focus-visible {
  outline: 2.5px solid var(--kpm-verm);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ----------------------------------------------- 3. PROSE (post + page body) */
.kpm-prose {
  max-width: var(--kpm-measure);
  font-family: var(--kpm-sans);
  color: var(--kpm-ink);
}

.kpm-prose > * + * { margin-top: var(--kpm-s-5); }

.kpm-prose p {
  font-size: 1.09375rem;
  line-height: 1.68;
  color: var(--kpm-ink);
  text-wrap: pretty;
}

.kpm-prose h2,
.kpm-prose h3,
.kpm-prose h4 {
  font-family: var(--kpm-serif);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.1;
  color: var(--kpm-ink);
  text-wrap: balance;
}

.kpm-prose h2 {
  font-size: var(--kpm-t-xl);
  margin-top: var(--kpm-s-8);
  scroll-margin-top: 120px;
}
.kpm-prose h3 { font-size: var(--kpm-t-lg); margin-top: var(--kpm-s-6); }
.kpm-prose h4 { font-size: 1.125rem; margin-top: var(--kpm-s-5); }

.kpm-prose strong { font-weight: 600; color: var(--kpm-ink); }

.kpm-prose a:not(.kpm-btn):not(.kpm-tag) {
  color: var(--kpm-verm-deep);
  font-weight: 500;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(210, 61, 36, .4);
  transition: box-shadow .15s var(--kpm-e-out);
}
.kpm-prose a:not(.kpm-btn):not(.kpm-tag):hover { box-shadow: inset 0 -2px 0 var(--kpm-verm); }

/* Arrow bullets replace discs. Numbered lists keep mono counters. */
.kpm-prose ul {
  margin-block: var(--kpm-s-5);
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--kpm-s-3);
}
.kpm-prose ul li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--kpm-s-2);
  color: var(--kpm-ink-2);
}
.kpm-prose ul li::before {
  content: "\2192";
  color: var(--kpm-verm);
  font-family: var(--kpm-mono);
}
.kpm-prose ul li > ul { margin-block: var(--kpm-s-3); grid-column: 1 / -1; }

.kpm-prose ol {
  margin-block: var(--kpm-s-5);
  padding-left: 0;
  list-style: none;
  counter-reset: kpmol;
  display: flex;
  flex-direction: column;
  gap: var(--kpm-s-3);
}
.kpm-prose ol > li {
  counter-increment: kpmol;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--kpm-s-2);
  color: var(--kpm-ink-2);
}
.kpm-prose ol > li::before {
  content: counter(kpmol, decimal-leading-zero);
  font: 500 var(--kpm-t-sm)/1.6 var(--kpm-mono);
  color: var(--kpm-ink-3);
}

/* Blockquote reads as the mockup pull quote. */
.kpm-prose blockquote {
  border: 0;
  border-block: 1px solid var(--kpm-ink);
  padding: var(--kpm-s-6) 0;
  margin-block: var(--kpm-s-7);
  background: none;
}
.kpm-prose blockquote p {
  font-family: var(--kpm-serif);
  font-size: 1.75rem;
  line-height: 1.25;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.015em;
}
.kpm-prose blockquote cite,
.kpm-prose blockquote .wp-block-quote__citation {
  display: block;
  font: 400 var(--kpm-t-xs)/1 var(--kpm-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kpm-ink-3);
  margin-top: var(--kpm-s-4);
  font-style: normal;
}

.kpm-prose hr,
.kpm-prose .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--kpm-rule);
  margin-block: var(--kpm-s-7);
  display: block !important;
}

.kpm-prose figcaption {
  font: 400 var(--kpm-t-xs)/1.5 var(--kpm-sans);
  color: var(--kpm-ink-3);
  margin-top: var(--kpm-s-3);
}

.kpm-prose img,
.kpm-prose .wp-block-image img { border-radius: var(--kpm-r-lg); }

/* -------------------------------------------------------------- 4. TABLES */
.kpm-prose table,
.kpm-data table,
table.kpm-data {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  background: none;
}

.kpm-prose figure.wp-block-table,
.kpm-data {
  overflow-x: auto;
  border-block: 1px solid var(--kpm-rule-strong);
  margin-block: var(--kpm-s-6);
}

.kpm-prose table th,
.kpm-prose table td,
table.kpm-data th,
table.kpm-data td {
  text-align: right;
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid var(--kpm-rule);
}

.kpm-prose table th:first-child,
.kpm-prose table td:first-child,
table.kpm-data th:first-child,
table.kpm-data td:first-child {
  text-align: left;
  padding-left: 2px;
}

.kpm-prose table thead th,
table.kpm-data thead th {
  font: 500 var(--kpm-t-xs)/1.2 var(--kpm-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--kpm-ink-3);
  background: none;
  border-bottom: 1px solid var(--kpm-rule-strong);
  vertical-align: bottom;
}

.kpm-prose table tbody th,
table.kpm-data tbody th {
  font: 600 1.0625rem/1.3 var(--kpm-sans);
  color: var(--kpm-ink);
}

.kpm-prose table tbody td,
table.kpm-data tbody td {
  font-family: var(--kpm-mono);
  font-size: .9375rem;
  color: var(--kpm-ink-2);
}

.kpm-prose table tbody tr:last-child th,
.kpm-prose table tbody tr:last-child td { border-bottom: 0; }

/* Recommended row gets the vermillion wash, never a second accent. */
.kpm-prose table tr.kpm-pick,
table.kpm-data tr[data-pick] { background: var(--kpm-verm-wash); }
.kpm-prose table tr.kpm-pick td { color: var(--kpm-ink); }

.kpm-cell-note {
  display: block;
  font: 400 var(--kpm-t-xs)/1.4 var(--kpm-sans);
  color: var(--kpm-ink-3);
  margin-top: 3px;
  text-transform: none;
  letter-spacing: 0;
}

/* ------------------------------------------------------- 5. FAQ ACCORDION */
.kpm-prose details,
.kpm-faq details {
  border-bottom: 1px solid var(--kpm-rule);
  margin: 0;
  padding: 0;
  background: none;
}
.kpm-faq { margin-top: var(--kpm-s-6); border-top: 1px solid var(--kpm-rule-strong); }

.kpm-prose details > summary,
.kpm-faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--kpm-s-4);
  font: 600 var(--kpm-t-base)/1.4 var(--kpm-sans);
  color: var(--kpm-ink);
  display: flex;
  justify-content: space-between;
  gap: var(--kpm-s-4);
  align-items: center;
}
.kpm-prose details > summary::-webkit-details-marker,
.kpm-faq summary::-webkit-details-marker { display: none; }
.kpm-prose details > summary::marker,
.kpm-faq summary::marker { content: ""; }

.kpm-prose details > summary::after,
.kpm-faq summary::after {
  content: "+";
  font-family: var(--kpm-mono);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--kpm-verm);
  transition: transform .2s var(--kpm-e-out);
  flex: none;
}
.kpm-prose details[open] > summary::after,
.kpm-faq details[open] summary::after { transform: rotate(45deg); }

.kpm-prose details > *:not(summary) { margin-top: 0; }
.kpm-prose details > p:last-child,
.kpm-faq details p {
  padding-bottom: var(--kpm-s-5);
  color: var(--kpm-ink-2);
  font-size: 1rem;
  max-width: 64ch;
}

/* ------------------------------------------------------- 6. PROMO / CALLOUT */
.kpm-promo {
  border: 1px solid var(--kpm-verm);
  background: var(--kpm-verm-wash);
  border-radius: var(--kpm-r-lg);
  padding: var(--kpm-s-5);
  margin-block: var(--kpm-s-7);
}
.kpm-promo h3 { font-size: var(--kpm-t-lg); margin-top: var(--kpm-s-3); }
.kpm-promo p {
  font-size: .9375rem;
  color: var(--kpm-ink-2);
  margin-top: var(--kpm-s-2);
  max-width: 56ch;
}
.kpm-promo .kpm-eyebrow { color: var(--kpm-verm-deep); }
.kpm-promo .kpm-btn { margin-top: var(--kpm-s-4); }

/* --------------------------------------------------------- 7. BUTTONS (own) */
.kpm-btn {
  --kpm-bg: var(--kpm-verm);
  --kpm-fg: #FEFBF5;
  --kpm-bd: var(--kpm-verm);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--kpm-bg);
  color: var(--kpm-fg);
  border: 1px solid var(--kpm-bd);
  font: 600 .9375rem/1 var(--kpm-sans);
  padding: 13px 20px;
  border-radius: var(--kpm-r-md);
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: transform .12s var(--kpm-e-out), background .16s var(--kpm-e-out),
              border-color .16s var(--kpm-e-out);
}
.kpm-btn:hover { --kpm-bg: var(--kpm-verm-deep); --kpm-bd: var(--kpm-verm-deep); color: #FEFBF5; }
.kpm-btn:active { transform: translateY(1px); }
.kpm-btn--ghost { --kpm-bg: transparent; --kpm-fg: var(--kpm-ink); --kpm-bd: var(--kpm-rule-strong); }
.kpm-btn--ghost:hover { --kpm-bg: var(--kpm-paper-sunk); --kpm-fg: var(--kpm-ink); --kpm-bd: var(--kpm-ink-3); color: var(--kpm-ink); }
.kpm-btn--ink { --kpm-bg: var(--kpm-ink); --kpm-bd: var(--kpm-ink); }
.kpm-btn--ink:hover { --kpm-bg: var(--kpm-weight); --kpm-bd: var(--kpm-weight); }
.kpm-btn--sm { font-size: var(--kpm-t-sm); padding: 10px 14px; }

/* -------------------------------------------------- 8. POST HEAD & BYLINE */
.kpm-post-head {
  padding-block: var(--kpm-s-7) var(--kpm-s-6);
  border-bottom: 1px solid var(--kpm-rule);
}
.kpm-crumbs {
  font: 400 var(--kpm-t-xs)/1 var(--kpm-mono);
  color: var(--kpm-ink-3);
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
}
.kpm-crumbs a { text-decoration: none; color: inherit; }
.kpm-crumbs a:hover { color: var(--kpm-verm-deep); }

.kpm-post-head h1 {
  font-family: var(--kpm-serif);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  margin-top: var(--kpm-s-5);
  max-width: 24ch;
  color: var(--kpm-ink);
  text-wrap: balance;
}

.kpm-standfirst {
  font-size: var(--kpm-t-lg);
  color: var(--kpm-ink-2);
  line-height: 1.5;
  max-width: 60ch;
  margin-top: var(--kpm-s-5);
}

.kpm-byline {
  display: flex;
  gap: var(--kpm-s-5);
  align-items: center;
  margin-top: var(--kpm-s-6);
  flex-wrap: wrap;
  font-size: var(--kpm-t-sm);
  color: var(--kpm-ink-3);
}
.kpm-byline b { color: var(--kpm-ink); font-weight: 600; }
.kpm-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--kpm-clay);
  display: grid;
  place-items: center;
  font: 600 var(--kpm-t-sm)/1 var(--kpm-sans);
  color: var(--kpm-ink);
  flex: none;
}

/* ------------------------------------------------ 9. POST BODY + STICKY TOC */
.kpm-post-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--kpm-s-9);
  padding-block: var(--kpm-s-7);
  align-items: start;
}

.kpm-toc {
  position: sticky;
  top: 120px;
  align-self: start;
  font-size: .9375rem;
}
.kpm-toc h2,
.kpm-toc .kpm-toc-title {
  font: 500 var(--kpm-t-xs)/1 var(--kpm-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--kpm-ink-3);
  padding-bottom: var(--kpm-s-3);
  border-bottom: 1px solid var(--kpm-rule);
  margin: 0;
}
.kpm-toc ol {
  list-style: none;
  margin: var(--kpm-s-3) 0 0;
  padding: 0;
  counter-reset: kpmtoc;
}
.kpm-toc li { counter-increment: kpmtoc; margin: 0; }
.kpm-toc a {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  gap: 4px;
  text-decoration: none;
  color: var(--kpm-ink-2);
  padding-block: 8px;
  box-shadow: none;
  transition: color .14s var(--kpm-e-out);
}
.kpm-toc a::before {
  content: counter(kpmtoc, decimal-leading-zero);
  font-family: var(--kpm-mono);
  font-size: var(--kpm-t-xs);
  color: var(--kpm-ink-3);
}
.kpm-toc a:hover,
.kpm-toc a[data-active] { color: var(--kpm-ink); font-weight: 500; }
.kpm-toc a[data-active]::before { color: var(--kpm-verm); }

/* ---------------------------------------------------------- 10. AUTHOR BOX */
.kpm-author {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--kpm-s-5);
  border: 1px solid var(--kpm-rule-strong);
  border-radius: var(--kpm-r-lg);
  padding: var(--kpm-s-5);
  margin-top: var(--kpm-s-8);
}
.kpm-author .kpm-avatar { width: 56px; height: 56px; font-size: var(--kpm-t-base); }
.kpm-author b { font-weight: 600; color: var(--kpm-ink); }
.kpm-author p {
  font-size: .9375rem;
  color: var(--kpm-ink-2);
  margin-top: var(--kpm-s-2);
  max-width: 58ch;
  line-height: 1.6;
}

/* --------------------------------------------------------- 11. PAGE HEADER */
.kpm-page-head { padding-block: var(--kpm-s-9) var(--kpm-s-6); }
.kpm-page-head h1 {
  font-family: var(--kpm-serif);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--kpm-ink);
  margin: var(--kpm-s-4) 0 0;
}
.kpm-page-head p {
  font-size: var(--kpm-t-lg);
  color: var(--kpm-ink-2);
  max-width: 52ch;
  margin-top: var(--kpm-s-5);
  line-height: 1.5;
}

.kpm-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--kpm-s-6) var(--kpm-s-7);
  margin-top: var(--kpm-s-7);
  border-top: 1px solid var(--kpm-rule-strong);
  padding-top: var(--kpm-s-6);
}
.kpm-dl dt {
  font-family: var(--kpm-serif);
  font-size: var(--kpm-t-lg);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--kpm-ink);
}
.kpm-dl dd { margin: var(--kpm-s-2) 0 0; color: var(--kpm-ink-2); font-size: .9375rem; }

/* -------------------------------------------------------- 12. ARCHIVE LIST */
.kpm-arch-head {
  padding-block: var(--kpm-s-8) var(--kpm-s-6);
  border-bottom: 1px solid var(--kpm-rule);
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: var(--kpm-s-8);
  align-items: end;
}
.kpm-arch-head h1 {
  font-family: var(--kpm-serif);
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  margin-top: var(--kpm-s-4);
  color: var(--kpm-ink);
}
.kpm-arch-head p { color: var(--kpm-ink-2); margin-top: var(--kpm-s-4); max-width: 50ch; }
.kpm-arch-count { font: 400 var(--kpm-t-sm)/1 var(--kpm-mono); color: var(--kpm-ink-3); }

.kpm-filters {
  display: flex;
  gap: var(--kpm-s-2);
  flex-wrap: wrap;
  padding-block: var(--kpm-s-5);
  border-bottom: 1px solid var(--kpm-rule);
  align-items: center;
}

.kpm-chip {
  appearance: none;
  cursor: pointer;
  background: none;
  border: 1px solid var(--kpm-rule-strong);
  border-radius: 999px;
  font: 450 var(--kpm-t-sm)/1 var(--kpm-sans);
  color: var(--kpm-ink-2);
  padding: 9px 15px;
  text-decoration: none;
  transition: background .14s var(--kpm-e-out), color .14s var(--kpm-e-out),
              border-color .14s var(--kpm-e-out);
}
.kpm-chip:hover { border-color: var(--kpm-ink-3); color: var(--kpm-ink); }
.kpm-chip[aria-pressed="true"],
.kpm-chip.is-active {
  background: var(--kpm-ink);
  border-color: var(--kpm-ink);
  color: var(--kpm-paper);
  font-weight: 500;
}

.kpm-rows { margin-top: var(--kpm-s-5); }
.kpm-row-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--kpm-s-5);
  align-items: baseline;
  padding-block: var(--kpm-s-5);
  padding-inline: var(--kpm-s-2);
  border-bottom: 1px solid var(--kpm-rule);
  text-decoration: none;
  box-shadow: none;
  transition: background .15s var(--kpm-e-out);
}
.kpm-row-item:hover { background: var(--kpm-paper-sunk); }
.kpm-row-item:hover h3,
.kpm-row-item:hover h4 { color: var(--kpm-verm-deep); }
.kpm-row-item .kpm-date {
  font: 400 var(--kpm-t-xs)/1.6 var(--kpm-mono);
  color: var(--kpm-ink-3);
  white-space: nowrap;
  text-transform: uppercase;
}
.kpm-row-item h3,
.kpm-row-item h4 {
  font-family: var(--kpm-serif);
  font-weight: 600;
  font-size: var(--kpm-t-lg);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--kpm-ink);
  margin: 0;
  transition: color .15s var(--kpm-e-out);
}
.kpm-row-item p {
  font-size: .9375rem;
  color: var(--kpm-ink-2);
  margin-top: 6px;
  max-width: 62ch;
  line-height: 1.55;
}
.kpm-row-item .kpm-read {
  font: 400 var(--kpm-t-xs)/1.6 var(--kpm-mono);
  color: var(--kpm-ink-3);
  white-space: nowrap;
}

.kpm-empty {
  text-align: center;
  padding-block: var(--kpm-s-9);
  max-width: 44ch;
  margin-inline: auto;
}
.kpm-empty h2 { font-family: var(--kpm-serif); font-size: var(--kpm-t-xl); font-weight: 600; }
.kpm-empty p { color: var(--kpm-ink-2); margin-top: var(--kpm-s-3); }
.kpm-empty .kpm-btn { margin-top: var(--kpm-s-5); }

/* Kadence pagination, retuned to the mockup pager. */
.kpm-archive .pagination .nav-links,
.kpm-pager {
  display: flex;
  gap: var(--kpm-s-2);
  align-items: center;
  padding-block: var(--kpm-s-7);
  justify-content: center;
}
.kpm-archive .pagination .page-numbers,
.kpm-pager a,
.kpm-pager span {
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--kpm-r-md);
  text-decoration: none;
  font: 500 .9375rem/1 var(--kpm-mono);
  color: var(--kpm-ink-2);
  border: 1px solid transparent;
  background: none;
}
.kpm-archive .pagination .page-numbers:hover,
.kpm-pager a:hover { background: var(--kpm-paper-sunk); }
.kpm-archive .pagination .page-numbers.current,
.kpm-pager [aria-current] { background: var(--kpm-ink); color: var(--kpm-paper); }

/* --------------------------------------------------------- 13. CALCULATOR */
.kpm-calc {
  background: var(--kpm-paper-sunk);
  border-radius: 16px;
  padding: var(--kpm-s-7);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--kpm-s-8);
  margin-block: var(--kpm-s-7);
  font-family: var(--kpm-sans);
}
.kpm-calc h2 {
  font-family: var(--kpm-serif);
  font-size: var(--kpm-t-xl);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.1;
  margin: var(--kpm-s-3) 0 0;
  color: var(--kpm-ink);
}
.kpm-calc-plans { display: flex; gap: var(--kpm-s-2); flex-wrap: wrap; margin-top: var(--kpm-s-3); }
.kpm-calc-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kpm-s-4);
  margin-top: var(--kpm-s-5);
}

.kpm-field { display: flex; flex-direction: column; gap: 7px; }
.kpm-field label { font: 500 var(--kpm-t-sm)/1 var(--kpm-sans); color: var(--kpm-ink-2); }
.kpm-input {
  font: 400 var(--kpm-t-base)/1.2 var(--kpm-sans);
  color: var(--kpm-ink);
  background: var(--kpm-paper-raised);
  border: 1px solid var(--kpm-rule-strong);
  border-radius: var(--kpm-r-md);
  padding: 12px 14px;
  width: 100%;
  transition: border-color .15s var(--kpm-e-out);
}
.kpm-input:hover { border-color: var(--kpm-ink-3); }
.kpm-input:focus { outline: 2.5px solid var(--kpm-verm); outline-offset: 1px; border-color: var(--kpm-verm); }
.kpm-input[aria-invalid="true"] { border-color: var(--kpm-bad); background: #FBEEEF; }

.kpm-hint { font: 400 var(--kpm-t-xs)/1.45 var(--kpm-sans); color: var(--kpm-ink-3); }
.kpm-hint--err { color: var(--kpm-bad); font-weight: 500; }

.kpm-calc-out {
  background: var(--kpm-ink);
  color: #EFE7DC;
  border-radius: var(--kpm-r-lg);
  padding: var(--kpm-s-5);
  display: flex;
  flex-direction: column;
}
.kpm-calc-out .kpm-eyebrow { color: #B9AEA2; }
.kpm-calc-total {
  font-family: var(--kpm-mono);
  font-size: 2.5rem;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--kpm-paper);
  margin-top: var(--kpm-s-2);
  display: block;
  line-height: 1.1;
}
.kpm-calc-line {
  display: flex;
  justify-content: space-between;
  gap: var(--kpm-s-3);
  font-size: var(--kpm-t-sm);
  padding-block: 9px;
  border-bottom: 1px solid #3D2F26;
}
.kpm-calc-line:last-of-type { border-bottom: 0; }
.kpm-calc-line span:last-child { font-family: var(--kpm-mono); font-variant-numeric: tabular-nums; }
.kpm-calc-note {
  font-size: var(--kpm-t-xs);
  color: #B9AEA2;
  margin-top: auto;
  padding-top: var(--kpm-s-4);
  line-height: 1.5;
}
.kpm-calc-note b { color: var(--kpm-paper); font-family: var(--kpm-mono); }

/* --------------------------------------------------------- 14. RESPONSIVE */
@media (max-width: 1024px) {
  .kpm-post-body { grid-template-columns: 1fr; gap: var(--kpm-s-6); }
  .kpm-toc {
    position: static;
    border: 1px solid var(--kpm-rule-strong);
    border-radius: var(--kpm-r-lg);
    padding: var(--kpm-s-4) var(--kpm-s-5);
  }
  .kpm-toc h2,
  .kpm-toc .kpm-toc-title { border-bottom: 0; padding-bottom: 0; }
  .kpm-arch-head { grid-template-columns: 1fr; gap: var(--kpm-s-5); }
  .kpm-calc { grid-template-columns: 1fr; gap: var(--kpm-s-6); padding: var(--kpm-s-5); }
}

@media (max-width: 760px) {
  .kpm-row-item { grid-template-columns: 1fr; gap: var(--kpm-s-2); }
  .kpm-row-item .kpm-read { display: none; }
  .kpm-author { grid-template-columns: 1fr; }
  .kpm-calc-fields { grid-template-columns: 1fr; }
  .kpm-calc { border-radius: 14px; }
  .kpm-prose blockquote p { font-size: 1.375rem; }
  .kpm-post-head { padding-block: var(--kpm-s-6) var(--kpm-s-5); }
  .kpm-page-head { padding-block: var(--kpm-s-7) var(--kpm-s-5); }
}

/* ------------------------------------------------------ 15. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .kpm-btn,
  .kpm-chip,
  .kpm-row-item,
  .kpm-toc a,
  .kpm-input,
  .kpm-prose details > summary::after { transition: none; }
  .kpm-archive .loop-entry,
  .kpm-single .post-navigation a { transition: none; }
}

/* ==========================================================================
   16. KADENCE BRIDGE - SINGLE POST
   Kadence renders the post header, author box, post navigation and related
   carousel itself. These rules retune that real markup to the design system
   instead of replacing the templates.
   ========================================================================== */
body.kpm-single,
body.kpm-page,
body.kpm-archive { background: var(--kpm-paper); }

/* One continuous sheet: the design forbids cards and shadows. */
.kpm-single .entry.content-bg,
.kpm-page .entry.content-bg,
.kpm-archive .content-bg {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.kpm-single .entry-content-wrap,
.kpm-page .entry-content-wrap { padding-inline: 0; }

.kpm-single .entry-hero-container-inner,
.kpm-single .entry-hero .hero-section-overlay,
.kpm-page .entry-hero-container-inner,
.kpm-page .entry-hero .hero-section-overlay { background: var(--kpm-paper); }

/* Mockup order: breadcrumbs, tag, headline, byline. */
.kpm-single .entry-hero .entry-header,
.kpm-page .entry-hero .entry-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kpm-s-4);
  text-align: left;
  padding-block: var(--kpm-s-8) var(--kpm-s-6);
  border-bottom: 1px solid var(--kpm-rule);
}
.kpm-single .entry-hero .kadence-breadcrumbs,
.kpm-page .entry-hero .kadence-breadcrumbs { order: 1; margin: 0; }
.kpm-single .entry-hero .entry-taxonomies { order: 2; margin: 0; }
.kpm-single .entry-hero .entry-title,
.kpm-page .entry-hero .entry-title { order: 3; margin: 0; max-width: 26ch; text-wrap: balance; }
.kpm-single .entry-hero .entry-meta,
.kpm-page .entry-hero .entry-meta {
  order: 4;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kpm-s-2) var(--kpm-s-4);
}

.kpm-single .entry-hero .kadence-breadcrumbs,
.kpm-page .entry-hero .kadence-breadcrumbs {
  font-family: var(--kpm-mono);
  font-size: var(--kpm-t-xs);
}
.kpm-single .entry-hero .kadence-breadcrumbs a,
.kpm-page .entry-hero .kadence-breadcrumbs a { text-decoration: none; }
.kpm-single .entry-hero .kadence-breadcrumbs a:hover { color: var(--kpm-verm-deep); }

.kpm-single .entry-hero .entry-meta .author a,
.kpm-single .entry-hero .entry-meta .posted-by a { color: var(--kpm-ink); font-weight: 600; text-decoration: none; }
.kpm-single .entry-hero .entry-meta time { font-family: var(--kpm-mono); font-variant-numeric: tabular-nums; }

.kpm-single .entry-taxonomies .category-links a {
  display: inline-block;
  font: 500 var(--kpm-t-xs)/1 var(--kpm-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--kpm-verm-deep);
  background: var(--kpm-verm-wash);
  border-radius: var(--kpm-r-sm);
  padding: 6px 8px;
  text-decoration: none;
}
.kpm-single .entry-taxonomies .category-links a:hover { background: var(--kpm-clay); }

/* Author box: left aligned, hairline top, no card. */
.kpm-single .entry-author {
  border-top: 1px solid var(--kpm-rule-strong);
  margin-top: var(--kpm-s-8);
  padding-top: var(--kpm-s-6);
  background: transparent;
  box-shadow: none;
  text-align: left;
}
.kpm-single .entry-author-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--kpm-s-5);
  align-items: start;
  text-align: left;
  max-width: none;
}
.kpm-single .entry-author-avatar { margin: 0; }
.kpm-single .entry-author-avatar img { border-radius: 50%; width: 56px; height: 56px; }
.kpm-single .entry-author-name,
.kpm-single .entry-author-description .entry-author-name {
  font-family: var(--kpm-serif);
  font-weight: 600;
  font-size: var(--kpm-t-lg);
  letter-spacing: -.015em;
  color: var(--kpm-ink);
}
.kpm-single .entry-author-description p {
  color: var(--kpm-ink-2);
  font-size: .9375rem;
  line-height: 1.6;
  max-width: 58ch;
}

/* Prev / next as a hairline pair. */
.kpm-single .post-navigation {
  border-top: 1px solid var(--kpm-rule);
  margin-top: var(--kpm-s-7);
}
.kpm-single .post-navigation .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kpm-s-6);
  padding-top: var(--kpm-s-5);
}
.kpm-single .post-navigation .nav-next { text-align: right; }
.kpm-single .post-navigation .post-navigation-sub {
  font: 400 var(--kpm-t-xs)/1 var(--kpm-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--kpm-ink-3);
  margin-bottom: var(--kpm-s-2);
}
.kpm-single .post-navigation a {
  font-family: var(--kpm-serif);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--kpm-ink);
  text-decoration: none;
  transition: color .15s var(--kpm-e-out);
}
.kpm-single .post-navigation a:hover { color: var(--kpm-verm-deep); }

/* Related guides: mono eyebrow, hairline rows, no shadow. */
.kpm-single .entry-related {
  border-top: 1px solid var(--kpm-rule-strong);
  margin-top: var(--kpm-s-8);
  padding-top: var(--kpm-s-6);
  background: transparent;
}
.kpm-single .entry-related-title {
  font: 500 var(--kpm-t-xs)/1 var(--kpm-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--kpm-ink-3);
  margin-bottom: var(--kpm-s-5);
}
.kpm-single .entry-related .entry {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
}
.kpm-single .entry-related .entry-title {
  font-family: var(--kpm-serif);
  font-weight: 600;
  font-size: var(--kpm-t-lg);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.kpm-single .entry-related .entry-title a { color: var(--kpm-ink); text-decoration: none; }
.kpm-single .entry-related .entry-title a:hover { color: var(--kpm-verm-deep); }

/* The calculator stacks when it sits inside the narrow prose column. */
.kpm-prose .kpm-calc { grid-template-columns: 1fr; padding: var(--kpm-s-5); }


/* ==========================================================================
   16b. KADENCE BRIDGE - LAYOUT WIDTH + LOOP CARD FLATTENING
   ========================================================================== */

/* Kadence forces content-width-narrow (842px) which is too tight for the
   250px TOC rail + 68ch measure. Widen the single/page container so the
   two-column reading layout has room; .kpm-prose still caps the measure. */
body.kpm-single .content-container.site-container,
body.kpm-single .hero-container.site-container,
body.kpm-page .content-container.site-container,
body.kpm-page .hero-container.site-container {
  max-width: 1040px;
}
body.kpm-single .wp-site-blocks .content-container .alignwide,
body.kpm-page .wp-site-blocks .content-container .alignwide {
  margin-left: 0;
  margin-right: 0;
  width: auto;
  max-width: 100%;
}

/* Kadence prints time.updated even with dateUpdated disabled, so the same
   date appears twice in the byline. */
.kpm-single .entry-meta .posted-on .updated,
.kpm-archive .entry-meta .posted-on .updated {
  display: none;
}
.kpm-single .entry-meta .posted-on .entry-date,
.kpm-archive .entry-meta .posted-on .entry-date {
  font-family: var(--kpm-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375em;
}

/* No drop shadows anywhere: flatten Kadence loop cards (used by the related
   carousel on single posts and by every archive loop). */
.entry.loop-entry,
.entry-related .entry.loop-entry,
.kpm-archive .entry.loop-entry {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--kpm-rule);
  padding-top: var(--kpm-s-4);
}
.entry.loop-entry .entry-content-wrap {
  padding: 0;
}
.entry-related .entry.loop-entry .entry-title {
  font-family: var(--kpm-serif);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: var(--kpm-s-2) 0 var(--kpm-s-2);
}
.entry-related .entry.loop-entry .entry-title a {
  color: var(--kpm-ink);
  text-decoration: none;
}
.entry-related .entry.loop-entry .entry-title a:hover {
  color: var(--kpm-verm);
}
.entry-related .entry.loop-entry .entry-summary p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--kpm-ink-3);
}
.entry-related .entry.loop-entry .entry-footer .post-more-link {
  font-family: var(--kpm-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kpm-verm);
  text-decoration: none;
}
.entry-related .splide__pagination__page.is-active {
  background: var(--kpm-verm);
}


/* ==========================================================================
   17. KADENCE BRIDGE - ARCHIVE / CATEGORY / BLOG LOOP
   ========================================================================== */

body.kpm-archive .post-archive-hero-section .entry-hero-container-inner,
body.kpm-archive .entry-hero .hero-section-overlay {
  background: var(--kpm-paper);
}
body.kpm-archive .post-archive-title,
body.kpm-archive .entry-hero .entry-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kpm-s-3);
  text-align: left;
  padding-block: var(--kpm-s-8) var(--kpm-s-5);
  border-bottom: 1px solid var(--kpm-rule-strong);
}
body.kpm-archive .entry-hero .entry-header .kadence-breadcrumbs { order: 1; margin: 0; }
body.kpm-archive .entry-hero h1 {
  order: 2;
  margin: 0;
  font-family: var(--kpm-serif);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--kpm-ink);
  max-width: 24ch;
  text-wrap: balance;
}
body.kpm-archive .entry-hero .archive-description,
body.kpm-archive .entry-hero .taxonomy-description {
  order: 3;
  margin: 0;
  max-width: 58ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--kpm-ink-2);
}

/* Loop: hairline rows, no cards. */
body.kpm-archive .content-area { margin-top: 0; }
body.kpm-archive .site-main .content-wrap {
  display: block;
  border-top: 0;
}
body.kpm-archive .entry.loop-entry {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  border-bottom: 1px solid var(--kpm-rule);
  margin: 0;
}
body.kpm-archive .loop-entry .entry-content-wrap {
  padding: var(--kpm-s-6) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kpm-s-2);
}
body.kpm-archive .loop-entry .entry-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kpm-s-2);
}
body.kpm-archive .loop-entry .entry-taxonomies { order: 1; margin: 0; }
body.kpm-archive .loop-entry .entry-title  { order: 2; margin: 0; max-width: 34ch; }
body.kpm-archive .loop-entry .entry-meta   { order: 3; margin: 0; }
body.kpm-archive .loop-entry .entry-title a {
  color: var(--kpm-ink);
  text-decoration: none;
}
body.kpm-archive .loop-entry .entry-title a:hover { color: var(--kpm-verm); }
body.kpm-archive .loop-entry .entry-summary p {
  margin: 0;
  max-width: 66ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--kpm-ink-3);
}
body.kpm-archive .loop-entry .entry-meta,
body.kpm-archive .loop-entry .entry-meta a {
  color: var(--kpm-ink-3);
  font-family: var(--kpm-mono);
  font-variant-numeric: tabular-nums;
}
body.kpm-archive .loop-entry .entry-taxonomies .category-links a {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--kpm-r-sm);
  background: var(--kpm-verm-wash);
  color: var(--kpm-verm-deep);
  text-decoration: none;
}
body.kpm-archive .loop-entry .entry-footer { margin: 0; padding: 0; border: 0; }
body.kpm-archive .loop-entry .more-link-wrap { margin: 0; }
body.kpm-archive .loop-entry .post-more-link {
  font-family: var(--kpm-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kpm-verm);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--kpm-e-out);
}
body.kpm-archive .loop-entry .post-more-link:hover { border-bottom-color: var(--kpm-verm); }
body.kpm-archive .loop-entry .post-thumbnail { display: none; }

/* Pagination */
body.kpm-archive .navigation.pagination .nav-links {
  display: flex;
  gap: var(--kpm-s-2);
  padding-top: var(--kpm-s-6);
}
body.kpm-archive .navigation.pagination .page-numbers {
  font-family: var(--kpm-mono);
  font-size: 0.8125rem;
  padding: 6px 12px;
  border: 1px solid var(--kpm-rule);
  border-radius: var(--kpm-r-sm);
  color: var(--kpm-ink-2);
  text-decoration: none;
  background: transparent;
}
body.kpm-archive .navigation.pagination .page-numbers.current,
body.kpm-archive .navigation.pagination .page-numbers:hover {
  border-color: var(--kpm-verm);
  color: var(--kpm-verm);
}


/* ------------- 17b. CALCULATOR INSIDE A KADENCE COLUMN -------------
   The homepage places [kpm_calculator] in a 52% column, which is too narrow
   for the 1fr + 340px split. Stack it based on the column's own width. */
.kt-inside-inner-col:has(> .kpm-calc) { container-type: inline-size; }
.kt-inside-inner-col > .kpm-calc {
  margin-block: 0;
  padding: var(--kpm-s-6);
}
@container (max-width: 760px) {
  .kt-inside-inner-col > .kpm-calc { grid-template-columns: 1fr; gap: var(--kpm-s-5); }
}
@supports not (container-type: inline-size) {
  .kt-inside-inner-col > .kpm-calc { grid-template-columns: 1fr; }
}


/* ==========================================================================
   18. HOMEPAGE - GUIDES SECTION ([kpm_guides])
   ========================================================================== */
.kpm-sec-title {
  font-family: var(--kpm-serif);
  font-weight: 600;
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--kpm-ink);
  margin: 0 0 var(--kpm-s-6);
  max-width: 26ch;
  text-wrap: balance;
}
.kpm-rows {
  border-top: 1px solid var(--kpm-rule-strong);
}
.kpm-rows .kpm-row-item:last-child {
  border-bottom: 1px solid var(--kpm-rule-strong);
}
.kpm-rows-more {
  margin: var(--kpm-s-5) 0 0;
  font-family: var(--kpm-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
@media (max-width: 700px) {
  .kpm-rows .kpm-row-item {
    grid-template-columns: 1fr;
    gap: var(--kpm-s-2);
  }
  .kpm-rows .kpm-row-item .kpm-read { display: none; }
}