/*
 * Footer Marcotte Style: inkt en goud, zelfde palet en dezelfde letters als
 * de header. Alles staat onder .mcs-vt zodat het thema niets in de weg zit.
 */

.mcs-vt {
  --bg: #121110;
  --bg-2: #191816;
  --tekst: #ded7ca;
  --zacht: #8b8478;
  --goud: #c9a96e;
  --rand: rgba(201, 169, 110, .18);
  --rand-zwak: rgba(201, 169, 110, .1);

  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  background: var(--bg);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
}

.mcs-vt a { color: inherit; text-decoration: none; }
.mcs-vt a:focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; }

.mcs-vt-binnen {
  max-width: 1560px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 52px);
}

/* ---------- bovenste band ---------- */
.mcs-vt > .mcs-vt-binnen {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr) 1.2fr;
  gap: clamp(26px, 3vw, 56px);
  padding-block: clamp(48px, 6vw, 84px) clamp(34px, 4vw, 52px);
}

.mcs-vt-merk { display: grid; gap: 18px; align-content: start; max-width: 380px; }
.mcs-vt-logo img { display: block; width: auto; height: 34px; opacity: .95; }
.mcs-vt-zin { margin: 0; color: var(--zacht); font-size: 13px; }

.mcs-vt-eer { display: grid; gap: 6px; margin: 0; font-size: 11.5px; letter-spacing: .06em; }
.mcs-vt-eer span { color: var(--goud); }
.mcs-vt-eer a { color: var(--zacht); border-bottom: 1px solid var(--rand); width: max-content; padding-bottom: 2px; transition: color .35s ease, border-color .35s ease; }
.mcs-vt-eer a:hover { color: var(--goud); border-color: var(--goud); }

/* ---------- kolommen ---------- */
.mcs-vt-kolom h2 {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 10px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--goud);
}
.mcs-vt-kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mcs-vt-kolom li a {
  position: relative;
  color: var(--tekst);
  transition: color .35s ease, padding-left .35s ease;
}
.mcs-vt-kolom li a::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 0; height: 1px; background: var(--goud);
  transition: width .35s ease;
}
.mcs-vt-kolom li a:hover { color: var(--goud); padding-left: 16px; }
.mcs-vt-kolom li a:hover::before { width: 10px; }

.mcs-vt-contact address { font-style: normal; color: var(--tekst); }
.mcs-vt-lijn { display: grid; gap: 4px; margin: 14px 0 10px; }
.mcs-vt-lijn a { color: var(--goud); width: max-content; border-bottom: 1px solid var(--rand-zwak); padding-bottom: 2px; transition: border-color .35s ease; }
.mcs-vt-lijn a:hover { border-color: var(--goud); }
.mcs-vt-uren { margin: 0; color: var(--zacht); font-size: 12px; }

/* ---------- toonzalen ---------- */
.mcs-vt-toonzalen { border-top: 1px solid var(--rand-zwak); background: var(--bg-2); }
.mcs-vt-toonzalen .mcs-vt-binnen { padding-block: clamp(26px, 3vw, 38px); }
.mcs-vt-toonzalen h2 {
  margin: 0 0 16px;
  font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--goud);
}
.mcs-vt-toonzalen ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px;
  background: var(--rand-zwak);
  border: 1px solid var(--rand-zwak);
}
.mcs-vt-toonzalen li {
  display: grid; gap: 3px; padding: 14px 14px 16px;
  background: var(--bg-2);
  transition: background-color .4s ease;
}
.mcs-vt-toonzalen li:hover { background: #201e1a; }
.mcs-vt-plaats { font-family: var(--serif); font-size: 16px; color: #f2ead8; }
.mcs-vt-toonzalen li a { font-size: 12px; color: var(--zacht); transition: color .35s ease; }
.mcs-vt-toonzalen li a:hover { color: var(--goud); }

/* ---------- staart ---------- */
.mcs-vt-staart { border-top: 1px solid var(--rand-zwak); }
.mcs-vt-staart .mcs-vt-binnen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
  padding-block: 20px 24px;
  font-size: 11.5px; color: var(--zacht);
}
.mcs-vt-recht { margin: 0; }
.mcs-vt-klein { display: flex; flex-wrap: wrap; gap: 18px; margin-right: auto; }
.mcs-vt-klein a { transition: color .35s ease; }
.mcs-vt-klein a:hover { color: var(--goud); }
.mcs-vt-talen { display: flex; gap: 12px; }
.mcs-vt-talen a { letter-spacing: .14em; transition: color .35s ease; }
.mcs-vt-talen a:hover { color: var(--goud); }
.mcs-vt-talen a.actief { color: var(--goud); }

/* ---------- smaller ---------- */
@media (max-width: 1200px) {
  .mcs-vt > .mcs-vt-binnen { grid-template-columns: 1fr 1fr 1fr; }
  .mcs-vt-merk { grid-column: 1 / -1; max-width: 520px; }
  .mcs-vt-toonzalen ul { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 700px) {
  .mcs-vt > .mcs-vt-binnen { grid-template-columns: 1fr 1fr; gap: 28px; }
  .mcs-vt-toonzalen ul { grid-template-columns: 1fr 1fr; }
  .mcs-vt-staart .mcs-vt-binnen { gap: 12px; }
  .mcs-vt-klein { margin-right: 0; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mcs-vt * { transition-duration: .01ms !important; }
}

/* de lege widgetstrook van het thema boven de footer verdwijnt; die kop staat nu hierboven */
footer.prefooter { display: none; }

.mcs-vt-titel {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px; line-height: 1.35; color: #f2ead8;
}
/* kolommen mogen niet uit balans raken door een lange link erin */
@media (max-width: 700px) {
  .mcs-vt > .mcs-vt-binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcs-vt-toonzalen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .mcs-vt > .mcs-vt-binnen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mcs-vt-toonzalen ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* volgorde telt: de smalste regel hoort onderaan te staan */
@media (max-width: 700px) {
  .mcs-vt > .mcs-vt-binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcs-vt-toonzalen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcs-vt-merk { grid-column: 1 / -1; }
}

/* ---------- compacter, en inklapbaar op klein scherm ---------- */
/*
 * Op desktop staat elke kolom gewoon open en is er niets te zien van het
 * mechanisme. Vanaf tablet klappen ze dicht: de footer was daar bijna
 * een volledig scherm hoog.
 */
.mcs-vt-kolom details { border: 0; }
.mcs-vt-kolom summary { list-style: none; cursor: default; }
.mcs-vt-kolom summary::-webkit-details-marker { display: none; }
.mcs-vt-kolom summary h2 { margin: 0 0 14px; }

.mcs-vt > .mcs-vt-binnen { padding-block: clamp(40px, 4.5vw, 68px) clamp(26px, 3vw, 40px); }
.mcs-vt-merk { gap: 12px; }
.mcs-vt-zin { font-size: 12.5px; }

@media (max-width: 900px) {
  .mcs-vt > .mcs-vt-binnen { grid-template-columns: 1fr; gap: 0; }
  .mcs-vt-merk { padding-bottom: 22px; }

  .mcs-vt-kolom { border-top: 1px solid var(--rand-zwak); }
  .mcs-vt-kolom details { padding: 2px 0; }
  .mcs-vt-kolom summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 0; cursor: pointer;
  }
  .mcs-vt-kolom summary h2 { margin: 0; }
  .mcs-vt-kolom summary::after {
    content: ""; width: 8px; height: 8px; margin-right: 4px;
    border-right: 1px solid var(--goud); border-bottom: 1px solid var(--goud);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .3s ease;
  }
  .mcs-vt-kolom details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
  .mcs-vt-kolom ul { padding-bottom: 16px; }
  .mcs-vt-contact address, .mcs-vt-lijn, .mcs-vt-uren { padding-bottom: 4px; }

  /* de toonzalen worden een eenvoudige lijst met nummers */
  .mcs-vt-toonzalen ul { grid-template-columns: 1fr 1fr; }
  .mcs-vt-toonzalen li { padding: 11px 12px 12px; }
  .mcs-vt-plaats { font-size: 14px; }
  .mcs-vt-toonzalen li a { font-size: 11.5px; }
}

/* op desktop mag het paneel nooit dichtklappen */
@media (min-width: 901px) {
  .mcs-vt-kolom details > ul,
  .mcs-vt-kolom details > address { display: block; }
}
/* de toonzalen krijgen dezelfde inklapbehandeling */
.mcs-vt-zalen summary { list-style: none; cursor: default; }
.mcs-vt-zalen summary::-webkit-details-marker { display: none; }
@media (max-width: 900px) {
  .mcs-vt-zalen summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; cursor: pointer;
  }
  .mcs-vt-zalen summary h2 { margin: 0; }
  .mcs-vt-zalen summary::after {
    content: ""; width: 8px; height: 8px; margin-right: 4px;
    border-right: 1px solid var(--goud); border-bottom: 1px solid var(--goud);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .3s ease;
  }
  .mcs-vt-zalen[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
  .mcs-vt-toonzalen .mcs-vt-binnen { padding-block: 0 14px; }
}