/* =============================== */
/* 📅 AGENDA – BASISLAYOUT         */
/* =============================== */

.agenda {
  padding: 20px;
}

.agenda-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.agenda-left {
  flex: 2 1 60%;
}

.sidebar {
  flex: 1 1 30%;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* =============================== */
/* 📆 JAAR & MAAND STRUCTUUR       */
/* =============================== */

.agenda-year {
  margin: 25px 0;
}

.agenda-year-title {
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 10px;
  color: #5a3e9b;
  visibility: hidden;
}

/* Maandblok */
.agenda-month {
  border: 1px solid #ccc;
  border-radius: 6px;
  margin: 8px 0;
  background: #f5f5ff;
  overflow: hidden;
}

/* Header van de maand */
.agenda-month-header {
  padding: 10px 12px;
  cursor: pointer;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #6a4da6;
  color: white;
  border-bottom: 1px solid #ccc;
}

.agenda-month-header .arrow {
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.25s ease;
  font-size: 1.1em;
}

.agenda-month.open .agenda-month-header .arrow {
  transform: rotate(90deg);
}

.agenda-month-header:hover {
  background: #ffa500;
}

.agenda-month-header .label {
  font-size: 1.1em;
}

.agenda-month-header .count {
  font-size: 0.9em;
  color: white;
}

/* Body van de maand */
.agenda-month-body {
  display: none;
  padding: 10px;
}

.agenda-month.open .agenda-month-body {
  display: block;
}

/* =============================== */
/* 🎉 EVENT BLOKKEN                */
/* =============================== */

.event {
  background-color: #fff8dc;
  border-left: 8px solid #ffa500;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  transition: transform 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.event:hover {
  transform: scale(1.02);
}

/* Event types */
.event.feestavond { border-left-color: #2598DA; background-color: #C2E2F5; }
.event.country { border-left-color: #ff6600; background-color: #fdf5e6; }
.event.workshop { border-left-color: #138B33; background-color: #CBFABD; }
.event.verzoekjesdansen { border-left-color: #4b0082; background-color: #DCBDFA; }
.event.meerdaags { border-left-color: #20b2aa; background-color: #C2F4F2; }

.event h3 {
  margin-top: 0;
  color: #8b0000;
}

/* Flyer */
.event-flyer img {
  width: 100px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* =============================== */
/* 🕒 COUNTDOWN / WEETJE / RAAD    */
/* =============================== */

.countdown-blok,
.weetje-blok {
  background-color: #fff3cd;
  border-left: 5px solid #ffa500;
  padding: 15px;
  border-radius: 8px;
  font-family: sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-top: -50px;
}

.countdown-blok h4,
.weetje-blok h4 {
  margin-top: 0;
  font-size: 1.2em;
}

.countdown-blok:hover,
.weetje-blok:hover,
.throwback-blok:hover {
  transform: scale(1.02);
}

.raad-de-dans {
  border-left: 5px solid #ffa500;
  padding: 12px 16px;
  font-size: 1em;
  color: #333;
}

.raad-de-dans h4 {
  margin-bottom: 8px;
  margin-top: 0;
  font-size: 1.2em;
}

.raad-de-dans button {
  background-color: #ffa500;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  margin-top: 8px;
}

/* =============================== */
/* 🧩 LESROOSTER BLOKKEN           */
/* =============================== */

.lesrooster-breed {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center;
}

.lesblok,
.lesblok-workshop {
  background-color: #fff8dc;
  border-left: 6px solid #ffa500;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  flex: 1 1 220px;
  max-width: 300px;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.lesblok:hover,
.lesblok-workshop:hover {
  transform: scale(1.02);
}

.lesblok-workshop h3 {
  margin-bottom: 6px;
}

/* Beginnerscursus */
.beginnerscursus {
  background-color: #E7CAFC;
  border-left: 6px solid #4b0082;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  flex: 1 1 220px;
  max-width: 300px;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.beginnerscursus:hover {
  transform: scale(1.05);
}

.beginnerscursus h3 {
  margin-top: 0;
  color: #4b0082;
}

/* =============================== */
/* 📢 LOCATIE BANNER               */
/* =============================== */

.locatie-banner-container {
  width: 100%;
  overflow: hidden;
  background-color: #6a4da6;
  border-radius: 6px;
  margin-top: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.locatie-banner-tekst {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: scrollLocatie 18s linear infinite;
  font-size: 0.95em;
  color: #fff;
  font-weight: bold;
}

@keyframes scrollLocatie {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* =============================== */
/* 🔽 SECTIE OVERGANG              */
/* =============================== */

.sectie-overgang h2 {
  border-bottom: 2px solid #ffa500;
  padding-bottom: 4px;
  margin-top: 30px;
  margin-bottom: 10px;
  color: #4b0082;
  font-size: 1.8em;
}

.agenda-wrapper p:first-of-type {
  margin-top: 0;
}

/* =============================== */
/* 🟪 SIDEBAR BLOKKEN              */
/* =============================== */

.sidebar div {
  background-color: #f9f0ff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* =============================== */
/* 📱 RESPONSIVE AGENDA            */
/* =============================== */

@media (max-width: 600px) {
  .event {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .event-flyer img {
    margin-top: 10px;
  }
}