/*
 * Kostencalculator, welcometomankind.nl
 *
 * Leunt op de Blocksy-palet-variabelen van het thema, met de echte waarden als
 * terugval zodat de tool ook los van het thema klopt. Er wordt geen lettertype
 * geladen: alles erft van de site.
 *
 * Net als verlofcalculator.css is dit bestand bewust zelfstandig: de gedeelde
 * basis staat er gewoon in, zodat je de shortcode los kunt inzetten zonder een
 * tweede stylesheet mee te sturen. Staan beide tools op één pagina, dan
 * schrijven ze exact dezelfde regels en kost dat niets extra's. Wijzig je hier
 * iets aan de basis, doe het daar dan ook.
 */

.mk-tool {
  --mk-tekst: var(--theme-palette-color-1, #ffffff);
  --mk-accent: var(--theme-palette-color-2, #e78f87);
  --mk-zacht: var(--theme-palette-color-3, #d4d4d4);
  --mk-lijn: var(--theme-palette-color-5, rgba(255, 255, 255, 0.15));
  --mk-diep: var(--theme-palette-color-6, #111111);
  --mk-vlak: var(--theme-palette-color-7, #161616);
  --mk-op: var(--theme-palette-color-8, #282828);
  --mk-ruimte: clamp(1.25rem, 4vw, 2.25rem);

  box-sizing: border-box;
  margin: 2.5rem 0;
  padding: var(--mk-ruimte);
  border: 1px solid var(--mk-lijn);
  border-radius: 3px;
  background: var(--mk-vlak);
  color: var(--mk-tekst);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
}

.mk-tool *,
.mk-tool *::before,
.mk-tool *::after {
  box-sizing: inherit;
}

.mk-tool h3,
.mk-tool h4 {
  color: var(--mk-tekst);
  font-family: inherit;
  line-height: 1.25;
}

.mk-tool p {
  margin: 0 0 0.75em;
}

.mk-tool p:last-child {
  margin-bottom: 0;
}

.mk-tool a {
  color: var(--mk-accent);
  text-underline-offset: 0.2em;
}

.mk-tool a:focus-visible,
.mk-tool button:focus-visible,
.mk-tool input:focus-visible,
.mk-tool summary:focus-visible {
  outline: 2px solid var(--mk-accent);
  outline-offset: 2px;
}

/* De kop en de inleiding die de plugin serverkant al neerzet, zodat een crawler
   en een bezoeker zonder javascript geen leeg blok zien. */

.mk-titel {
  margin: 0 0 0.6rem;
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  line-height: 1.2;
}

.mk-intro {
  margin: 0 0 2rem;
  max-width: 66ch;
  color: var(--mk-zacht);
  font-size: 0.95rem;
}

.mk-noscript {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  border-left: 2px solid var(--mk-accent);
  background: var(--mk-op);
  font-size: 0.9rem;
}

/* De titel en de inleiding komen uit de plugin en blijven staan als het script
   de tool eromheen opbouwt. De statische tabellen eronder verdwijnen dan wel. */
.mk-tool.mk-actief .mk-titel,
.mk-tool.mk-actief .mk-intro {
  display: block;
}

.mk-statisch h4 {
  margin: 2rem 0 0.75rem;
  font-size: 0.95rem;
}

.mk-statisch ul {
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--mk-zacht);
}

.mk-statisch li {
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------------ formulier */

.mk-form {
  margin: 0;
}

.mk-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.mk-legend {
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mk-zacht);
}

.mk-tool .mk-fieldset {
  display: grid;
  gap: 1.5rem 1.75rem;
  grid-template-columns: 1fr;
}

.mk-legend {
  grid-column: 1 / -1;
}

@media (min-width: 40em) {
  .mk-tool .mk-fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mk-veld {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.mk-veld > label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mk-tekst);
}

.mk-input {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--mk-lijn);
  border-radius: 2px;
  background: var(--mk-diep);
  color: var(--mk-tekst);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  appearance: none;
}

.mk-input::placeholder {
  color: var(--mk-zacht);
  opacity: 0.5;
}

.mk-input:hover {
  border-color: rgba(231, 143, 135, 0.45);
}

.mk-input[aria-invalid="true"] {
  border-color: var(--mk-accent);
}

.mk-hulp {
  margin: 0;
  font-size: 0.85rem;
  color: var(--mk-zacht);
}

.mk-fout {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mk-accent);
}

/* ------------------------------------------------------------ keuze uit twee */

/* Een fieldset binnen een fieldset. De browser geeft die standaard een rand en
   een inspringing; die halen we weg zodat hij zich als een gewoon veld gedraagt. */
.mk-keuze {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.mk-keuze-legend {
  padding: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mk-tekst);
}

.mk-keuze-opties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.mk-keuze-optie {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--mk-lijn);
  border-radius: 2px;
  background: var(--mk-diep);
  font-size: 0.92rem;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.mk-keuze-optie:hover {
  border-color: rgba(231, 143, 135, 0.45);
}

.mk-keuze-optie:has(.mk-radio:checked) {
  border-color: var(--mk-accent);
}

.mk-radio {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--mk-accent);
  cursor: pointer;
}

.mk-keuze[aria-invalid="true"] .mk-keuze-optie {
  border-color: var(--mk-accent);
}

.mk-knoppen {
  margin-top: 1.75rem;
}

.mk-knop {
  min-height: 48px;
  min-width: 44px;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--mk-accent);
  border-radius: 2px;
  background: transparent;
  color: var(--mk-accent);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mk-knop:hover {
  background: var(--mk-accent);
  color: var(--mk-diep);
}

/* ------------------------------------------------------------------- uitkomst */

.mk-uitkomst:not(:empty) {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--mk-lijn);
}

.mk-melding,
.mk-leeg {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  border-left: 2px solid var(--mk-accent);
  background: var(--mk-op);
  font-size: 0.9rem;
  color: var(--mk-zacht);
}

.mk-totaal {
  margin-bottom: 2.25rem;
}

.mk-totaal-label {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mk-zacht);
}

.mk-totaal-bedrag {
  margin: 0 0 0.5rem;
  font-size: clamp(2.25rem, 8vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--mk-accent);
  font-variant-numeric: tabular-nums;
}

.mk-totaal-uitleg {
  margin: 0;
  max-width: 46ch;
  color: var(--mk-zacht);
  font-size: 0.95rem;
}

.mk-tweede-totaal {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mk-lijn);
}

.mk-tweede-label {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mk-zacht);
}

.mk-tweede-bedrag {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--mk-tekst);
  font-variant-numeric: tabular-nums;
}

.mk-tweede-uitleg {
  margin: 0;
  max-width: 60ch;
  color: var(--mk-zacht);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------- twee helften */

.mk-helften {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2.25rem;
  align-items: start;
}

@media (min-width: 52em) {
  .mk-helften {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mk-helft {
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--mk-lijn);
  border-radius: 2px;
  background: var(--mk-diep);
}

.mk-helft-terug {
  border-left: 3px solid var(--mk-accent);
}

.mk-helft-kop {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mk-zacht);
}

.mk-helft-noot {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  color: var(--mk-zacht);
}

.mk-blok {
  margin-bottom: 2.25rem;
}

.mk-blok-intro {
  max-width: 66ch;
  font-size: 0.93rem;
  color: var(--mk-zacht);
}

.mk-blok-noot {
  margin-top: 1rem;
  max-width: 70ch;
  font-size: 0.85rem;
  color: var(--mk-zacht);
}

.mk-cap {
  margin-bottom: 2.25rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--mk-lijn);
  border-radius: 2px;
  background: var(--mk-diep);
}

.mk-cap-raakt {
  border-left: 3px solid var(--mk-accent);
}

.mk-cap h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.mk-cap p {
  margin: 0 0 0.6rem;
  font-size: 0.93rem;
  color: var(--mk-zacht);
}

.mk-cap-tip {
  margin-bottom: 0 !important;
  color: var(--mk-tekst) !important;
}

.mk-kop {
  margin: 2.5rem 0 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mk-zacht);
}

/* -------------------------------------------------------------------- tabellen */

.mk-details {
  margin-bottom: 0.5rem;
  border-top: 1px solid var(--mk-lijn);
  border-bottom: 1px solid var(--mk-lijn);
}

.mk-details + .mk-details {
  border-top: 0;
}

.mk-details summary {
  padding: 1rem 0;
  min-height: 44px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mk-details summary::-webkit-details-marker {
  display: none;
}

.mk-details summary::before {
  content: "+";
  display: inline-block;
  width: 1ch;
  color: var(--mk-accent);
  font-weight: 400;
}

.mk-details[open] summary::before {
  content: "\2212";
}

.mk-details > .mk-tabel {
  margin-bottom: 1.25rem;
}

.mk-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  display: block;
  overflow-x: auto;
}

@media (min-width: 40em) {
  .mk-tabel {
    display: table;
    overflow-x: visible;
  }
}

.mk-tabel th,
.mk-tabel td {
  padding: 0.7rem 0.9rem 0.7rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--mk-lijn);
}

.mk-tabel thead th {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-zacht);
  white-space: nowrap;
}

.mk-tabel tbody th {
  font-weight: 500;
  color: var(--mk-tekst);
}

.mk-tabel tfoot th,
.mk-tabel tfoot td {
  border-bottom: 0;
  padding-top: 1rem;
  font-weight: 700;
}

.mk-tabel .mk-som {
  color: var(--mk-zacht);
  font-variant-numeric: tabular-nums;
}

.mk-tabel .mk-getal,
.mk-tabel .mk-bedrag {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mk-tabel .mk-bedrag {
  font-weight: 600;
}

/* De herkomstkolom: staat er een cijfer van de bron, of hebben wij het zelf
   uitgerekend? Dat verschil is het halve punt van deze tool, dus het staat er
   bij elke regel en niet alleen onderaan in een voetnoot. */
.mk-tabel .mk-herkomst {
  font-size: 0.78rem;
  color: var(--mk-zacht);
  white-space: nowrap;
}

.mk-groeprij th {
  padding-top: 1.25rem;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-zacht) !important;
}

.mk-aannames {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--mk-zacht);
}

.mk-aannames li {
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------------ voetnoten */

.mk-voorbehoud {
  margin-top: 2.5rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--mk-lijn);
  border-radius: 2px;
  background: var(--mk-op);
}

.mk-voorbehoud h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.mk-voorbehoud p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--mk-zacht);
}

.mk-voet {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mk-lijn);
}

.mk-voet-datum {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  color: var(--mk-zacht);
}

.mk-bronnen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

.mk-bronnen a {
  color: var(--mk-zacht);
  text-decoration: underline;
}

.mk-bronnen a:hover {
  color: var(--mk-accent);
}

/* --------------------------------------------------------- terugval en gedrag */

/* Zonder JavaScript blijft de statische inhoud van de plugin staan. */
.mk-tool .mk-statisch {
  font-size: 0.95rem;
}

.mk-tool.mk-actief .mk-statisch {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .mk-tool *,
  .mk-tool *::before,
  .mk-tool *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .mk-tool {
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    color: #000;
  }

  .mk-tool a {
    color: #000;
  }

  .mk-form,
  .mk-knoppen {
    display: none;
  }

  .mk-uitkomst:not(:empty) {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .mk-details[open] > .mk-tabel,
  .mk-details > .mk-tabel {
    display: table;
  }

  .mk-helft,
  .mk-cap,
  .mk-voorbehoud {
    background: #fff;
    border-color: #bbb;
    break-inside: avoid;
  }

  .mk-totaal-bedrag,
  .mk-tweede-bedrag {
    color: #000;
  }
}