/* ==========================================================================
   KeeStage Buurttheater - stylesheet
   --------------------------------------------------------------------------
   Alle kleuren staan hieronder bij :root. Verander je daar iets,
   dan verandert het meteen op de hele site.
   ========================================================================== */

:root {
  --donker: #1b1319;        /* donkere achtergrond (hero, auditie) */
  --paars: #714b67;         /* paars van de knoppen en de spelers-balk */
  --paars-donker: #5d3d55;  /* paars als je met de muis op een knop staat */
  --licht: #f6f5f4;         /* lichte achtergrond */
  --tekst: #212529;         /* gewone tekstkleur */
  --goud: #d6b25e;          /* goud van het logo */
  --wit: #ffffff;
  --max-breedte: 1140px;    /* hoe breed de site maximaal wordt */
}

/* --- basis ---------------------------------------------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--paars); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.3rem; }

.container {
  max-width: var(--max-breedte);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- knoppen -------------------------------------------------------------- */

.knop {
  display: inline-block;
  background: var(--paars);
  color: var(--wit);
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 7px;
  font-size: .95rem;
  font-weight: 500;
  border: 1px solid var(--paars);
  transition: background .2s, transform .2s;
}
.knop:hover { background: var(--paars-donker); transform: translateY(-2px); }

.knop-licht {
  background: transparent;
  border-color: rgba(255,255,255,.5);
  color: var(--wit);
}
.knop-licht:hover { background: rgba(255,255,255,.15); }

/* --- menu bovenaan -------------------------------------------------------- */

header.menubalk {
  background: var(--wit);
  border-bottom: 1px solid #e7e5e4;
  position: sticky;
  top: 0;
  z-index: 50;
}

.menubalk .container {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 62px;
  flex-wrap: wrap;
}

.menu-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tekst);
  font-weight: 600;
}
.menu-logo img { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; }

.menu-links {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  flex-wrap: wrap;
}
.menu-links a {
  text-decoration: none;
  color: var(--tekst);
  font-size: .92rem;
}
.menu-links a:hover { color: var(--paars); }
/* de knop in de menubalk houdt zijn eigen, witte letters */
.menu-links a.knop { color: var(--wit); }
.menu-links a.knop:hover { color: var(--wit); }
.menu-telefoon { color: #6b6b6b !important; font-size: .85rem !important; }

/* --- hero (bovenste donkere vlak) ---------------------------------------- */

.hero {
  background: var(--donker);
  color: var(--wit);
  padding: 70px 0 80px;
}

.hero-boven {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}
.hero-boven img { margin: 0 auto; max-width: 380px; }

.hero-tickets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  margin-top: 70px;
}
.hero-tickets img { max-width: 400px; margin: 0 auto; }
.auditie img, .hero-tickets img, .hero-boven img { filter: drop-shadow(0 8px 22px rgba(0,0,0,.35)); }
.hero p { color: rgba(255,255,255,.88); }
.hero .let-op { font-weight: 700; color: var(--wit); }

/* --- show-kaarten (de gekleurde blokken) --------------------------------- */

.shows { background: var(--licht); padding: 56px 0 60px; }
.shows.op-wit { background: var(--wit); }

/* kopje boven een groep shows */
.sectiekop { margin-bottom: 26px; }
.sectiekop h2 {
  margin: 0 0 4px;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  letter-spacing: -.01em;
}
.sectiekop h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  margin-top: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--paars), var(--goud));
}
.sectiekop p {
  margin: 14px 0 0;
  color: #6b6b6b;
  font-size: .96rem;
  max-width: 60ch;
}

.showkaart {
  display: grid;
  grid-template-columns: 1fr 205px;
  gap: 0;
  min-height: 230px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 26px;
  text-decoration: none;
  color: var(--wit);
  transition: transform .2s, box-shadow .2s;
}
.showkaart:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }

.showkaart .tekst { padding: 22px 26px; }
.showkaart.lichte-letters .tekst { text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.showkaart h3 { font-size: 1.5rem; margin-bottom: .35em; }
.showkaart p { margin: 0; font-size: .9rem; max-width: 640px; }
.showkaart .meer { display: inline-block; margin-top: 14px; font-size: .85rem; font-weight: 600; }
.showkaart img { width: 100%; height: 100%; object-fit: cover; }


/* --- over het theater (donkere balk met schuine rand) -------------------- */

.overtheater {
  background: var(--donker);
  color: var(--wit);
  padding: 30px 0 60px;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
}
.overtheater h2 { text-align: center; }
.overtheater .logokaart { max-width: 270px; border-radius: 6px; margin-top: 24px; }

.spelers {
  background: var(--paars);
  color: var(--wit);
  padding: 40px 0 70px;
  margin-top: -60px;
  text-align: center;
}
.spelers h2 { margin-top: 40px; }
.spelerlijst {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.speler img {
  width: 135px;
  height: 135px;
  object-fit: cover;
  border-radius: 12px;
}
.speler p { margin: 10px 0 0; font-size: .95rem; }

/* --- auditie -------------------------------------------------------------- */

.auditie {
  background: var(--donker);
  color: var(--wit);
  padding: 60px 0;
}
.auditie .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.auditie img { max-width: 260px; margin: 0 auto; }
.auditie p { color: rgba(255,255,255,.88); font-size: .95rem; }

/* --- gewone tekstpagina's (musical- en contactpagina) -------------------- */

.paginakop {
  background: var(--donker);
  color: var(--wit);
  padding: 55px 0;
}
.paginakop p { color: rgba(255,255,255,.85); margin: 0; }

.inhoud { padding: 55px 0; }

.show-detail {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 45px;
  align-items: start;
}
.show-detail img { border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }

.infoblok {
  background: var(--licht);
  border-left: 4px solid var(--paars);
  padding: 18px 22px;
  border-radius: 4px;
  margin: 26px 0;
}
.infoblok h3 { margin-top: 0; font-size: 1.05rem; }
.infoblok ol { margin: 0; padding-left: 20px; }

.leeftijd {
  display: inline-block;
  background: var(--paars);
  color: var(--wit);
  border-radius: 100px;
  padding: 3px 13px;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.kaartjes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.kaartje {
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  padding: 20px;
  text-decoration: none;
  color: var(--tekst);
  transition: border-color .2s, transform .2s;
}
.kaartje:hover { border-color: var(--paars); transform: translateY(-3px); }
/* kaartjes die alleen informatie tonen en dus niet aanklikbaar zijn */
.kaartje.vast { cursor: default; }
.kaartje.vast:hover { border-color: #e7e5e4; transform: none; }
.kaartje h3 { font-size: 1.05rem; margin-bottom: .3em; }
.kaartje p { margin: 0; font-size: .88rem; color: #5a5a5a; }

/* --- footer --------------------------------------------------------------- */

footer.voet {
  background: var(--licht);
  padding: 45px 0 20px;
  font-size: .9rem;
}
.voet-kolommen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 35px;
}
.voet h3 { font-size: 1rem; margin-bottom: .6em; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet ul li { margin-bottom: 5px; }
.voet a { color: var(--paars); text-decoration: none; }
.voet a:hover { text-decoration: underline; }
.voet-onder {
  border-top: 1px solid #e0dedd;
  margin-top: 30px;
  padding-top: 15px;
  font-size: .82rem;
  color: #6b6b6b;
}

/* --- mobiel (smalle schermen) -------------------------------------------- */

@media (max-width: 820px) {
  .hero { padding: 45px 0 55px; }
  .hero-boven,
  .hero-tickets,
  .auditie .container,
  .show-detail {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .hero-tickets { margin-top: 45px; }
  .hero-boven img, .hero-tickets img { max-width: 260px; }

  .showkaart { grid-template-columns: 1fr; }
  /* op mobiel de hele poster laten zien in plaats van een uitsnede */
  .showkaart img { height: auto; max-height: 400px; object-fit: contain; padding: 0 16px 18px; }

  .overtheater { clip-path: none; padding-bottom: 40px; }
  .spelers { margin-top: 0; }
  .spelers h2 { margin-top: 10px; }

  .menubalk .container { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
  .menu-links { gap: 12px; }
  .menu-telefoon { display: none; }
}

/* ==========================================================================
   Extra onderdelen die bij de beheerversie horen
   ========================================================================== */

/* --- speeldata / agenda --- */

.agenda { background: var(--licht); padding: 55px 0; }
.agenda h2 { text-align: center; margin-bottom: 28px; }

.agendalijst { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; }
.agendalijst li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  background: var(--wit);
  border: 1px solid #e7e5e4;
  border-left: 4px solid var(--paars);
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 10px;
}
.agendalijst .datum { font-weight: 600; min-width: 250px; }
.agendalijst .show { color: var(--paars); font-weight: 600; text-decoration: none; }
.agendalijst .show:hover { text-decoration: underline; }
.agendalijst .extra { color: #6b6b6b; font-size: .9rem; }
.agenda .leeg { text-align: center; color: #6b6b6b; }

.showkaart .datumtip {
  display: inline-block;
  margin-top: 10px;
  font-size: .82rem;
  background: rgba(255,255,255,.22);
  border-radius: 100px;
  padding: 3px 12px;
}

/* --- als een show nog geen poster heeft --- */
.geen-poster {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.75);
  font-size: .85rem;
  text-align: center;
  padding: 20px;
}

.knopbalk { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ==========================================================================
   Kaarten reserveren (op de pagina van een show)
   ========================================================================== */

.reserveren {
  background: var(--donker);
  color: var(--wit);
  padding: 60px 0 70px;
}

.reserveervak {
  position: relative;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 36px 38px 38px;
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
}
/* dun gouden randje bovenlangs */
.reserveervak::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--goud), var(--paars));
}
.reserveervak h2 { margin-top: 0; }
.reserveervak p { color: rgba(255, 255, 255, .88); }
.reserveervak .voor-show { margin-top: -6px; color: var(--goud); }
.reserveervak.gelukt { border-color: rgba(155, 220, 180, .5); background: rgba(120, 220, 170, .1); }

.reserveerformulier {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.veldrij { display: flex; gap: 18px; flex-wrap: wrap; }
.veldrij > .veld { flex: 1 1 240px; }
.veldrij > .veld.smal { flex: 0 1 170px; }

.reserveerformulier .veld { margin-bottom: 20px; }
.reserveerformulier label {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: 6px;
}
.reserveerformulier .verplicht { color: var(--goud); }
.reserveerformulier .bijschrift { font-weight: 400; color: rgba(255,255,255,.6); }

.reserveerformulier input,
.reserveerformulier textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: #fff;
  color: var(--tekst);
  font: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}
.reserveerformulier input::placeholder { color: #9a9490; }
.reserveerformulier input[type=number] { max-width: 110px; text-align: center; }
.reserveerformulier input:focus,
.reserveerformulier textarea:focus {
  outline: 2px solid var(--goud);
  outline-offset: 1px;
}
.reserveerformulier textarea { resize: vertical; }

.knop.groot {
  padding: 14px 30px;
  font-size: 1.02rem;
  border-radius: 9px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

.melding-fout {
  background: rgba(255, 120, 110, .16);
  border: 1px solid rgba(255, 150, 140, .5);
  border-radius: 8px;
  padding: 12px 16px;
  color: #ffd9d5 !important;
}

.kleine-letters {
  font-size: .82rem;
  color: rgba(255, 255, 255, .6) !important;
  margin-top: 18px;
  margin-bottom: 0;
}

/* het onzichtbare vakje tegen spamrobots */
.vangnet {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 620px) {
  .reserveervak { padding: 26px 20px 30px; }
  .veldrij > .veld.smal { flex: 1 1 130px; }
  .knop.groot { display: block; width: 100%; text-align: center; }
}