/*
 * Verlofcalculator, 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.
 *
 * Dit bestand is bewust zelfstandig. Het bevat de basis die de regeltijdlijn ook
 * gebruikt, zodat je de twee shortcodes los van elkaar kunt inzetten zonder dat
 * je een derde stylesheet moet meesturen. Staan beide tools op één pagina, dan
 * schrijven ze exact dezelfde regels en kost dat niets extra's.
 */

.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;
}

/* ------------------------------------------------------------------ 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);
}

/* Twee dingen gaan hier mis zonder deze regels.
   De datumprikker van de browser is standaard onleesbaar op een donkere
   achtergrond; color-scheme lost dat op.
   En de appearance:none hierboven, die de nette vormgeving van de gewone
   velden mogelijk maakt, haalt bij een datumveld in sommige browsers de knop
   weg waarmee je de kalender opent. Dan blijft alleen tikken over, in losse
   stukjes dag-maand-jaar, en daar lopen mensen op vast. */
.mk-input[type="date"] {
  color-scheme: dark;
  appearance: auto;
  cursor: pointer;
}

/* Groter aanraakvlak: op een telefoon is het standaardicoontje te klein. */
.mk-input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 0.4rem;
  margin-left: 0.25rem;
  opacity: 0.9;
}

.mk-input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.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);
}

.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-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 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;
}

.mk-som-uitleg {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--mk-zacht);
}

/* --------------------------------------------------------------------- kaarten */

.mk-kaarten {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: start;
}

/* Pas twee naast elkaar als een kaart daar echt breed genoeg voor is. Eerder
   wordt de labelkolom binnenin te smal en breekt elke waarde over drie regels. */
@media (min-width: 64em) {
  .mk-kaarten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.mk-kaart-onbetaald {
  background: transparent;
}

.mk-kaart-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.85rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--mk-lijn);
}

.mk-kaart-kop h4 {
  margin: 0;
  font-size: 1.05rem;
}

.mk-badge {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mk-accent);
  white-space: nowrap;
}

.mk-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem 1rem;
  font-size: 0.9rem;
}

@media (min-width: 30em) {
  .mk-dl {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  }
}

.mk-dl dt {
  color: var(--mk-zacht);
  font-size: 0.82rem;
  padding: 0.45rem 0 0;
}

.mk-dl dd {
  margin: 0;
  padding: 0.45rem 0;
}

@media (max-width: 29.99em) {
  .mk-dl dd {
    padding-top: 0;
    padding-bottom: 0.85rem;
  }
}

.mk-dl .mk-nadruk {
  font-weight: 600;
}

.mk-dl .mk-datum {
  color: var(--mk-tekst);
}

.mk-dl .mk-mis {
  color: var(--mk-accent);
  font-weight: 600;
}

.mk-bron {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.25rem 0;
  min-height: 24px;
  font-size: 0.82rem;
  color: var(--mk-zacht);
  text-decoration: underline;
}

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

/* ------------------------------------------------------------------ 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-kaart,
  .mk-cap,
  .mk-voorbehoud {
    background: #fff;
    border-color: #bbb;
    break-inside: avoid;
  }

  .mk-totaal-bedrag,
  .mk-badge,
  .mk-dl .mk-mis {
    color: #000;
  }
}