/* ============================================================
   PAGE-KOSTEN.CSS: "Wat kost een uitvaart?"
   Bouwt voort op page-blog.css (blog long-read). Bevat:
   1) harmonisatie van de kostencalculator naar het linnen-palet
   2) tabel- en figuur-styling binnen .article
   3) TOC actief-status + kosten-specifieke tweaks
   Alle kleuren via tokens.css-variabelen.
   ============================================================ */

/* ---- Intro boven de calculator ---- */
.kosten-intro{max-width:75ch;margin:0 0 40px;}
.kosten-intro p{color:#33402f;margin-bottom:16px;}
.kosten-intro p:last-child{margin-bottom:0;}

/* ---- Calculator: layout binnen de contentbreedte ---- */
.calc-layout{margin:8px 0 8px;}

/* Sectiekoppen + totaalkop → Fraunces (blog display-font) */
.calc-section-title,
.calc-total-heading{font-family:var(--font-display);font-weight:var(--heading-weight);color:var(--color-ink);letter-spacing:-0.01em;}

/* Optie-kaarten → warme linnen-kaart met zachte lijn */
.calc-option{background:var(--color-surface-card);border-color:var(--color-line);border-radius:12px;}
.calc-option:hover{background:var(--color-surface-deep);}
.calc-option:focus-within{outline-color:var(--color-primary);}
.calc-option-label{color:var(--color-ink);}
.calc-option-sub,
.calc-option-price{color:var(--color-text-muted);}

/* Custom radio/checkbox → primair groen bij selectie */
.calc-option-radio,
.calc-option-check{border-color:var(--color-line);}
.calc-option input[type="radio"]:checked ~ .calc-option-radio,
.calc-option input[type="checkbox"]:checked ~ .calc-option-check{border-color:var(--color-primary);background:var(--color-primary);}
.calc-option:has(input[type="radio"]:checked),
.calc-option:has(input[type="checkbox"]:checked){border-color:var(--color-primary);background:var(--color-surface-card);}

/* Totaal-kaart */
.calc-total-card{background:var(--color-surface-card);border-color:var(--color-line);border-radius:var(--radius-lg);}
.calc-total-row{border-bottom-color:var(--color-line);color:var(--color-ink);}
.calc-total-divider{border-top-color:var(--color-ink);}
.calc-total-row--grand span:first-child{font-family:var(--font-display);color:var(--color-ink);}
.calc-total-amount{font-family:var(--font-display);color:var(--color-ink);}
.calc-total-amount.is-highlight{color:var(--color-accent);}
.calc-disclaimer{color:var(--color-text-muted);border-top-color:var(--color-line);}

/* CTA-knoppen in de calculator */
.calc-cta{background:var(--color-primary);border-radius:var(--radius);font-size:0.95rem;white-space:nowrap;margin-top:14px;}
.calc-cta:hover{background:var(--color-primary-hover);}
.calc-cta:focus-visible{outline-color:var(--color-accent);}
.calc-cta-secondary{display:block;text-align:center;margin-top:10px;font-size:0.9rem;color:var(--color-text-muted);text-decoration:none;}
.calc-cta-secondary:hover,
.calc-cta-secondary:focus-visible{color:var(--color-ink);text-decoration:underline;}

/* ---- Locatie-modal (klik op "Vergelijk uitvaartondernemers") ---- */
.kloc-overlay{position:fixed;inset:0;z-index:1200;background:rgba(30,36,32,0.45);display:flex;align-items:flex-start;justify-content:center;padding:18vh 20px 20px;}
.kloc-overlay[hidden]{display:none;}
.kloc-modal{position:relative;width:100%;max-width:440px;background:var(--color-surface-card);border-radius:var(--radius);box-shadow:0 20px 60px rgba(0,0,0,0.25);padding:28px 26px 22px;}
.kloc-close{position:absolute;top:10px;right:12px;border:0;background:none;font-size:1.5rem;line-height:1;color:var(--color-text-muted);cursor:pointer;padding:6px;border-radius:8px;}
.kloc-close:hover{color:var(--color-ink);}
.kloc-close:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.kloc-close:active{opacity:0.8;}
.kloc-title{font-family:var(--font-display);font-size:1.25rem;color:var(--color-ink);margin:0 0 6px;}
.kloc-sub{font-size:0.9rem;color:var(--color-text-muted);margin:0 0 14px;}
.kloc-input{width:100%;padding:12px 14px;font:inherit;font-size:1rem;color:var(--color-ink);background:var(--color-surface);border:1.5px solid var(--color-line);border-radius:12px;}
.kloc-input:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px;}
.kloc-list{margin-top:8px;max-height:260px;overflow-y:auto;}
.kloc-item{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;}
.kloc-item.is-active{background:var(--color-surface-deep);}
.kloc-item-naam{font-weight:600;color:var(--color-ink);}
.kloc-item-prov{font-size:0.85rem;color:var(--color-text-muted);}
.kloc-empty{padding:10px 12px;font-size:0.9rem;color:var(--color-text-muted);}

/* Mobiele sticky-balk in linnen-tint */
@media (max-width:1024px){
  .calc-mobile-bar-btn{background:var(--color-ink);}
  .calc-mobile-bar-amount.is-highlight{color:var(--color-accent);}
}

/* ---- Gastenveld (schaalt koffietafel en kaarten) ---- */
.calc-gasten-row{display:flex;align-items:center;gap:10px;}
#calc-gasten-input{width:110px;padding:11px 14px;font:inherit;font-size:1.05rem;font-weight:600;color:var(--color-ink);background:var(--color-surface-card);border:1.5px solid var(--color-line);border-radius:12px;}
#calc-gasten-input:hover{background:var(--color-surface-deep);}
#calc-gasten-input:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary);}
.calc-gasten-unit{color:var(--color-text-muted);font-size:0.95rem;}

/* ---- Info-knopje + tooltip in sectiekoppen ---- */
.calc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.calc-info-wrap{position:relative;display:inline-block;vertical-align:2px;margin-left:6px;}
.calc-info{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:1.5px solid var(--color-line);border-radius:50%;background:var(--color-surface-card);color:var(--color-text-muted);font-family:var(--font-body);font-size:0.62rem;font-style:normal;font-weight:700;letter-spacing:0;line-height:0;cursor:pointer;}
.calc-info span[aria-hidden]{display:block;line-height:1;transform:translateY(-0.5px);}
.calc-info:hover,
.calc-info:focus-visible{border-color:var(--color-primary);color:var(--color-primary);}
.calc-info:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
/* Bron-sterretje bij bedragen uit de eigen prijsdataset: zelfde tooltipgedrag,
   compacter en zonder cirkel, rechts naast het bedrag. */
.calc-info--bron{width:16px;height:16px;border:none;background:none;color:var(--color-primary);font-size:0.95rem;font-weight:700;}
.calc-info--bron span[aria-hidden]{transform:translateY(2px);}
.calc-info--bron:hover,.calc-info--bron:focus-visible{color:var(--color-ink);}
.calc-option-price .calc-info-wrap{margin-left:2px;vertical-align:0;}
.calc-option-price .calc-tip{left:auto;right:-6px;transform:none;text-align:left;white-space:normal;}
.calc-option-price .calc-tip::after{left:auto;right:10px;transform:none;}
.calc-tip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:min(260px,72vw);padding:10px 12px;background:var(--color-ink);color:var(--color-surface);font-family:var(--font-body);font-size:0.8rem;font-weight:400;letter-spacing:0;line-height:1.55;border-radius:10px;z-index:20;}
.calc-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--color-ink);}
.calc-info-wrap:hover .calc-tip,
.calc-info:focus-visible + .calc-tip,
.calc-info-wrap.is-open .calc-tip{display:block;}
/* Linker rand van de kolom: tooltip niet buiten beeld laten vallen */
@media (max-width:560px){
  .calc-tip{left:auto;right:-10px;transform:none;}
  .calc-tip::after{left:auto;right:14px;transform:none;}
  #calc-gasten-input{width:90px;padding:9px 12px;font-size:0.9rem;}
  .calc-gasten-unit{font-size:0.85rem;}
}

/* ---- Inhoudsopgave: actieve link ---- */
.toc a.is-active{color:var(--color-ink);border-left-color:var(--color-accent);background:var(--color-surface-deep);font-weight:600;}

/* ---- Tabellen binnen het artikel ---- */
.article .kosten-table-wrap{overflow-x:auto;margin:8px 0 26px;}
.article table{width:100%;border-collapse:collapse;font-size:0.98rem;}
.article th{font-family:var(--font-body);font-size:0.76rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--color-text-muted);text-align:left;padding:11px 14px;border-bottom:2px solid var(--color-line);background:var(--color-surface-deep);}
.article td{padding:11px 14px;border-bottom:1px solid var(--color-line);color:#33402f;}
.article tbody tr:last-child td{border-bottom:none;}
.article table a{color:var(--color-primary);font-weight:600;text-underline-offset:3px;}

/* ---- Figuren binnen het artikel ---- */
.article .article-image-block{margin:34px 0;}
.article .article-image-block--lead{margin-top:0;margin-bottom:32px;}
.article .article-image-block img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--color-line);}
.article .article-image-block figcaption{margin-top:10px;color:var(--color-text-muted);font-size:0.85rem;line-height:1.6;}

/* ---- Prijs-kaarten: 2×2 op desktop, 1 kolom op mobiel ---- */
@media (max-width:560px){.cost-cards{grid-template-columns:1fr;}}

/* ---- FAQ + bronnen: iets meer lucht boven CTA ---- */
.article .bl-calc-cta .bl-btn{margin-top:4px;}

/* Mobiele coverfoto: alleen op mobiel tonen (blogstijl), desktop onveranderd */
.kosten-cover-mobiel{display:none;}
@media (max-width:700px){
  .kosten-cover-mobiel{display:block;}
}

/* Mobiel: totaalbalk onderaan geplakt i.p.v. bovenaan */
@media (max-width:768px){
  .calc-mobile-bar{position:fixed;top:auto;bottom:0;left:0;right:0;}
  /* Balk is altijd zichtbaar: ruimte onderaan zodat de footer niet verstopt raakt */
  body{padding-bottom:48px;}
}

/* Mobiel: meer lucht tussen calculator en artikeltekst; foto's als blog-foto's (vol-breed, laag) */
@media (max-width:700px){
  .art-layout{padding-top:44px;}
  .article .article-image-block{margin:20px calc(50% - 50vw);height:clamp(120px,38vw,184px);overflow:hidden;}
  .article .article-image-block img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0;}
  .article .article-image-block figcaption{display:none;}
}

/* Auteursregel verbergen (desktop en mobiel), met wat lucht onder de h1 */
.art-head .art-meta{display:none;}
.art-head h1{margin-bottom:26px;}