/* =============================================================
   Legal pages  (page-legal.php: algemene voorwaarden, privacyverklaring)
   Page title · sticky table of contents · text card · contact prompt.
   ============================================================= */

/* ---------- Page title ---------- */
.mk-legal-head { padding-block: 112px 0; }
.mk-legal-title { margin: 0 0 8px; font-size: clamp(1.9rem, 3.4vw, 2.5rem); color: var(--mk-primary); }
.mk-legal-meta { margin: 0; font-size: 15px; color: var(--mk-ink-soft); }

/* ---------- Table of contents + text ---------- */
.mk-legal-body { background: var(--mk-bg-soft); }
.mk-legal-body__inner {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  align-items: start;
  gap: 32px;
  padding-block: 28px 140px;
}
.mk-legal-body__inner.is-single { grid-template-columns: minmax(0, 880px); justify-content: center; }

.mk-legal-toc { position: sticky; top: calc(var(--mk-sticky-top) + 20px); }
.mk-legal-toc__box {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: 12px;
}
.mk-legal-toc__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-family: var(--mk-font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--mk-primary);
  list-style: none;
  pointer-events: none;           /* always open on desktop */
}
.mk-legal-toc__title::-webkit-details-marker { display: none; }
/* "Inhoud (15)" with the site's heading underline: title width + 24px, navy → teal */
.mk-legal-toc__label {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding-bottom: 10px;
}
.mk-legal-toc__label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% + 24px);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mk-primary), var(--mk-secondary));
}
.mk-legal-toc__count { font-family: var(--mk-font-body); font-size: 14px; font-weight: 500; color: var(--mk-ink-soft); }
.mk-legal-toc__list {
  max-height: calc(100vh - var(--mk-sticky-top) - 150px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  counter-reset: none;
}
.mk-legal-toc__list li + li { border-top: 1px solid var(--mk-line); }
.mk-legal-toc__list a {
  display: block;
  padding: 12px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--mk-ink);
}
.mk-legal-toc__list a:hover { color: var(--mk-primary); }

/* text card */
.mk-legal-article {
  padding: 36px 40px;
  background: #fff;
  border: 1px solid var(--mk-line);
  border-radius: 12px;
  color: var(--mk-ink);
  font-size: 16px;
  line-height: 1.75;
}
.mk-legal-intro {
  margin: 0 0 28px;
  padding: 18px 22px;
  border-left: 4px solid var(--mk-secondary);
  border-radius: 0 10px 10px 0;
  background: #f3f5fb;
  font-size: 16.5px;
}
.mk-legal-intro p { margin: 0; }
.mk-legal-intro p + p { margin-top: .8em; }

.mk-legal-section { scroll-margin-top: calc(var(--mk-sticky-top) + 20px); }
.mk-legal-section + .mk-legal-section { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--mk-line); }
.mk-legal-section__title {
  position: relative;
  width: fit-content;
  max-width: calc(100% - 24px);   /* room for the underline overhang */
  margin: 0 0 16px;
  padding: 0 0 10px 20px;
  font-size: 1.35rem;
  line-height: 1.3;
}
.mk-legal-section__title::after {           /* site heading underline: title width + 24px */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% + 24px);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mk-primary), var(--mk-secondary));
}
.mk-legal-section__title::before {          /* square bullet, like the section headings */
  content: "";
  position: absolute;
  left: 0;
  top: calc((1.3em - 9px) / 2);
  width: 9px;
  height: 9px;
  background: currentColor;
}
.mk-legal-section__text > :first-child { margin-top: 0; }
.mk-legal-section__text > :last-child { margin-bottom: 0; }
/* justified text; hyphens keep the word spacing even in narrow columns */
.mk-legal-section__text,
.mk-legal-intro { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.mk-legal-section__text p { margin: 0 0 1em; }
.mk-legal-section__text ul,
.mk-legal-section__text ol { margin: 0 0 1em; padding-left: 0; list-style: none; }
.mk-legal-section__text li { position: relative; margin: 0 0 .55em; padding-left: 22px; }
.mk-legal-section__text li::before {        /* teal dot */
  content: "";
  position: absolute;
  left: 4px;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mk-secondary);
}
.mk-legal-section__text strong { color: var(--mk-primary); }
.mk-legal-section__text a { color: var(--mk-primary); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.mk-legal-section__text a:hover { color: var(--mk-secondary); }

/* contact prompt */
.mk-legal-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 36px;
  padding: 22px 24px;
  border-radius: 12px;
  background: #f3f5fb;
}
.mk-legal-help__title { margin: 0 0 2px; font-size: 1.2rem; }
.mk-legal-help p { margin: 0; font-size: 15px; color: var(--mk-ink-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .mk-legal-body__inner { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; }
  .mk-legal-article { padding: 30px 28px; }
}
/* tablet/phone: table of contents becomes a fold-out box above the text */
@media (max-width: 900px) {
  .mk-legal-head { padding-block: 64px 0; }
  .mk-legal-body__inner { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 24px 64px; }
  .mk-legal-toc { position: static; }
  .mk-legal-toc__box { padding: 0; }
  .mk-legal-toc__title {
    position: relative;
    margin: 0;
    padding: 16px 48px 16px 20px;
    cursor: pointer;
    pointer-events: auto;
  }
  .mk-legal-toc__title::after {             /* chevron */
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -7px;
    border-right: 2px solid var(--mk-primary);
    border-bottom: 2px solid var(--mk-primary);
    transform: rotate(45deg);
    transition: transform .15s ease, margin-top .15s ease;
  }
  .mk-legal-toc__box[open] .mk-legal-toc__title::after { margin-top: -2px; transform: rotate(-135deg); }
  .mk-legal-toc__list { max-height: none; padding: 4px 20px 10px; border-top: 1px solid var(--mk-line); }
}
@media (max-width: 680px) {
  .mk-legal-body__inner { padding-block: 20px 64px; }
  .mk-legal-article { padding: 24px 18px; font-size: 15px; line-height: 1.7; }
  .mk-legal-intro { margin-bottom: 22px; padding: 14px 16px; font-size: 15px; }
  .mk-legal-section + .mk-legal-section { margin-top: 22px; padding-top: 22px; }
  .mk-legal-section__title { margin-bottom: 14px; padding: 0 0 8px 17px; font-size: 1.15rem; }
  .mk-legal-section__title::before { width: 8px; height: 8px; top: calc((1.3em - 8px) / 2); }
  .mk-legal-help { padding: 18px; }
  .mk-legal-help .mk-btn { width: 100%; }
}