/* ========================================================================
   BASE STYLES
   ======================================================================== */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  background: #ffffff;
  color: #282b69;
  overflow: hidden;
}

/* ========================================================================
   HEADER
   ======================================================================== */
header {
  text-align: center;
  padding: 20px 0 10px;
  border-bottom: 2px solid #e0e0e0;
  background: white;
}

header h1 {
  font-family: 'Climate Crisis', sans-serif;
  font-size: 2.4rem;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

/* ========================================================================
   LOGOS
   ======================================================================== */
.logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.logo {
  object-fit: contain;
  width: auto;
}

.logo-esch {
  height: 60px;
}

.logo-vvo {
  height: 70px;
}

/* ========================================================================
   CALENDAR LAYOUT
   ======================================================================== */
#calendar {
  max-width: 90%;
  margin: 20px auto;
}

/* Vandaag (huidige dag) duidelijk markeren met donkerblauwe rand */
.fc .fc-daygrid-day.fc-day-today {
  background-color: #f0f4ff;          /* subtiel lichtblauw als achtergrond */
  border: 3px solid #282b69 !important; /* donkerblauwe rand */
  box-shadow: 0 0 6px rgba(40, 43, 105, 0.4); /* zachte gloed */
  z-index: 5;
  position: relative;
}

/* Zorg dat de datumtekst in de cel bovenop blijft */
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  color: #000000;        /* zwarte datumtekst */
  font-weight: bold;
  position: relative;
  z-index: 10;
}


/* ========================================================================
   HIGHLIGHT OVERLAY (ZVV De Esch stijl)
   ======================================================================== */

#highlight-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #1e215a 0%, #0f1136 80%);
  color: #FFD700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1000;
  transition: opacity 0.8s ease;
  padding: 40px;
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

.highlight-content {
  max-width: 800px;
  padding: 30px;
  animation: zoomIn 1s ease forwards;
}

/* Titel van het event */
#highlight-title {
  font-family: 'Climate Crisis', sans-serif;
  font-size: clamp(2.2rem, 6vw, 4rem);
  color: #FFD700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}

/* Datum (ondertitel) */
#highlight-date {
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 20px;
}

/* Extra beschrijving / info */
#highlight-description {
  font-family: 'Climate Crisis', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  color: #FFD700;
  line-height: 1.3;
  max-width: 700px;
  margin: 0 auto;
  white-space: pre-wrap;
  opacity: 0.95;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.2);
}

/* Animatie bij binnenkomst */
@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}



/* ========================================================================
   DAY CELL STYLING
   ======================================================================== */

/* Gekleurde cellen (meerdaagse events) */
.painted-day {
  position: relative;
  color: #000;
  font-weight: 700;
  text-align: center;
  transition: background 0.3s ease;
}

/* Titelvakje bovenin de cel bij meerdaagse events */
.cell-week-title {
  position: absolute;
  top: 25px;
  left: 6px;
  right: 6px;
  padding: 4px 6px;
  font-weight: 700;
  color: #000;
  text-align: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  border: none;
  outline: none;
  z-index: 10;

  /* ✅ Nieuwe regels hieronder */
  font-size: clamp(0.7rem, 1vw, 1rem); /* past zich aan schermgrootte aan */
  line-height: 1.1em;
  word-break: break-word;              /* breekt lange woorden */
  white-space: normal;                 /* laat meerdere regels toe */
  overflow-wrap: break-word;
}





/* ========================================================================
   CUSTOM EVENT THEMES
   ======================================================================== */
/* WINTERSTOP — icy look ❄️ */
.event-winterstop {
  background: linear-gradient(135deg, #b6e1f3 0%, #e1f4ff 100%) !important;
  border: 2px solid #8ec9e6 !important;
  color: #002244 !important;
}

/* TOERNOOI — sporty look ⚽ */
.event-toernooi {
  background: linear-gradient(135deg, #FFD700 0%, #ffec99 100%) !important;
  border: 2px solid #cfa400 !important;
  color: #000 !important;
}

/* FEEST — vibrant festive look 🍻 */
.event-feest {
  background: linear-gradient(135deg, #ff4e50 0%, #f9d423 100%) !important;
  border: 2px solid #b00020 !important;
  color: #ffffff !important;
}

/* VERGADERING — calm professional look 🧠 */
.event-vergadering {
  background: linear-gradient(135deg, #9ec9ff 0%, #cde4ff 100%) !important;
  border: 2px solid #3366cc !important;
  color: #001f3f !important;
}


/* ========================================================================
   MONTH TITLE STYLING (boven de kalender)
   ======================================================================== */

.fc-toolbar.fc-header-toolbar {
  position: relative;
  display: flex;
  justify-content: center;   /* Centreer titel */
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.fc-toolbar-title {
  font-family: 'Climate Crisis', sans-serif;
  font-size: 1.6rem;
  color: #282B69;
  text-transform: lowercase;
  letter-spacing: 1px;
}

/* Navigatieknoppen rechts vast */
.fc-toolbar-chunk:last-child {
  position: absolute;
  right: 5%;
  display: flex;
  gap: 8px;
}

.fc-prev-button, .fc-next-button {
  background: none !important;
  border: none !important;
  color: #282B69 !important;
  font-size: 1.2rem !important;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.fc-prev-button:hover, .fc-next-button:hover {
  transform: scale(1.2);
  color: #FFD700 !important;
}

/* Verberg de “vandaag”-knop (niet nodig) */
.fc-today-button {
  display: none !important;
}