/* ========================================================================== 
   Kirby iCal Calendar Plugin — v4.0.0
   Beschikbaarheid per datum en per ruimte: Zaal + Café.
   Alleen een gereserveerde ruimteregel krijgt een rustige rode markering.
   ========================================================================== */

:root {
    --ical-font-family:          inherit;
    --ical-font-size:            0.9rem;
    --ical-header-bg:            #2c2c2c;
    --ical-header-color:         #ffffff;
    --ical-dow-bg:               #f4f4f4;
    --ical-dow-color:            #555555;
    --ical-day-bg:               #ffffff;
    --ical-day-color:            #202020;
    --ical-day-border:           1px solid #dedede;
    --ical-empty-bg:             #fafafa;
    --ical-free-bg:              #ffffff;
    --ical-free-border:          #d1d1d1;
    --ical-free-color:           #454545;
    --ical-booked-bg:            #f9dddd;
    --ical-booked-border:        #a62b2b;
    --ical-booked-color:         #4a1111;
    --ical-today-outline:        2px solid #2b6cb0;
}

.ical-calendar-wrap { font-family: var(--ical-font-family); font-size: var(--ical-font-size); max-width: 100%; }
.ical-calendar-intro { max-width: 52rem; margin: 0 0 0.75rem; line-height: 1.45; }

/* ── Legend ─────────────────────────────────────────────────────────────── */
.ical-calendar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; margin: 0 0 1.25rem; color: #454545; font-size: 0.85rem; line-height: 1.3; }
.ical-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.ical-legend-free, .ical-legend-booked { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 2px; }
.ical-legend-free { border: 1px solid var(--ical-free-border); background: var(--ical-free-bg); }
.ical-legend-booked { border: 1px solid var(--ical-booked-border); background: var(--ical-booked-bg); }
.ical-legend-buurt, .ical-buurt-marker { display: inline-block; color: var(--ical-booked-color); font-weight: 800; line-height: 1; }
.ical-legend-buurt { min-width: 0.9rem; font-size: 1.15rem; text-align: center; }

/* ── Month grid ─────────────────────────────────────────────────────────── */
.ical-calendar-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.ical-calendar-month { overflow: hidden; border: var(--ical-day-border); border-radius: 4px; background: #fff; }
.ical-calendar-header { margin: 0; padding: 0.65rem 1rem; background: var(--ical-header-bg); color: var(--ical-header-color); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; text-align: center; }
.ical-calendar-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ical-calendar-table thead th { padding: 0.4rem 0; border-bottom: var(--ical-day-border); background: var(--ical-dow-bg); color: var(--ical-dow-color); font-size: 0.72rem; font-weight: 700; text-align: center; text-transform: uppercase; }

/* ── Day cells ──────────────────────────────────────────────────────────── */
.ical-day { min-width: 0; padding: 0.28rem 0.2rem 0.35rem; border: var(--ical-day-border); background: var(--ical-day-bg); color: var(--ical-day-color); text-align: left; vertical-align: top; }
.ical-day--empty { min-height: 6.2rem; background: var(--ical-empty-bg); }
.ical-day--today { outline: var(--ical-today-outline); outline-offset: -2px; }
.ical-day-number { display: block; margin: 0 0 0.22rem; font-size: 0.82rem; font-weight: 700; line-height: 1; text-align: right; }

/* ── Independent room rows ──────────────────────────────────────────────── */
.ical-day-resources { display: grid; gap: 0.16rem; }
.ical-resource { display: grid; grid-template-columns: auto 1fr auto; column-gap: 0.18rem; align-items: baseline; min-height: 1.8rem; padding: 0.18rem 0.2rem; border: 1px solid var(--ical-free-border); border-left-width: 3px; border-radius: 2px; background: var(--ical-free-bg); color: var(--ical-free-color); line-height: 1.12; }
.ical-resource--booked { border-color: var(--ical-booked-border); background: var(--ical-booked-bg); color: var(--ical-booked-color); }
.ical-resource-name { font-size: 0.66rem; font-weight: 700; }
.ical-resource-status { min-width: 0; font-size: 0.61rem; font-weight: 600; overflow-wrap: anywhere; }
.ical-status-short { display: none; }
.ical-resource-time { grid-column: 1 / -1; margin-top: 0.04rem; font-size: 0.56rem; font-weight: 400; letter-spacing: 0; }
.ical-buurt-marker { font-size: 0.9rem; }

/* Other recognised locations, e.g. Wijngilde, stay separate from Zaal/Café. */
.ical-day-other { display: grid; gap: 0.14rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.ical-other-label { padding: 0.17rem 0.2rem; border-left: 3px solid #777; background: #f1f1f1; color: #333; font-size: 0.58rem; line-height: 1.15; overflow-wrap: anywhere; }
.ical-other-time { display: block; margin-top: 0.06rem; font-size: 0.55rem; }

/* ── Error ──────────────────────────────────────────────────────────────── */
.ical-calendar-error { padding: 1rem; border: 1px solid #b94a48; border-radius: 4px; background: #fff5f5; color: #8a1f1f; font-size: 0.9rem; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 52rem) { .ical-calendar-months { grid-template-columns: 1fr; } }
@media (max-width: 32rem) {
    .ical-calendar-wrap { font-size: 0.82rem; }
    .ical-calendar-legend { gap: 0.45rem 0.8rem; font-size: 0.76rem; }
    .ical-day { padding: 0.2rem 0.09rem 0.25rem; }
    .ical-day-number { margin-bottom: 0.15rem; font-size: 0.72rem; }
    .ical-resource { grid-template-columns: 1fr auto; row-gap: 0.05rem; min-height: 1.7rem; padding: 0.14rem 0.12rem; border-left-width: 2px; }
    .ical-resource-name { font-size: 0.50rem; }
    .ical-resource-status { font-size: 0.43rem; text-align: right; white-space: nowrap; overflow-wrap: normal; }
    .ical-status-long { display: none; }
    .ical-status-short { display: inline; }
    .ical-resource-time { font-size: 0.48rem; }
    .ical-buurt-marker { font-size: 0.68rem; }
    .ical-other-label, .ical-other-time { font-size: 0.48rem; }
}

/* ==========================================================================
   Verhuurpagina — tekstinhoud, ruimtelijst en documentlinks
   ========================================================================== */

.verhuur-page {
  max-width: 70rem;
}

.verhuur-page__header {
  max-width: 42rem;
  margin-bottom: 4rem;
}

.verhuur-page__eyebrow {
  margin: 0 0 .5rem;
  color: var(--color-text-grey);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.verhuur-page__title {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: .95;
}

.verhuur-page__content {
  max-width: 42rem;
}

.verhuur-page__content h2 {
  margin-top: 4rem;
  margin-bottom: 1.25rem;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.05;
}

.verhuur-page__content h2:first-child {
  margin-top: 0;
}

.verhuur-page__content h3 {
  margin-top: 2rem;
  margin-bottom: .75rem;
  font-size: 1rem;
  font-weight: 600;
}

.verhuur-page__content p {
  max-width: 38rem;
}

/* Ruimtes en documenten worden als duidelijke linklijst getoond */
.verhuur-page__content ul {
  display: grid;
  gap: 0;
  margin: 1.5rem 0 3rem;
  padding: 0;
  border-top: 2px solid var(--color-black);
}

.verhuur-page__content ul li {
  list-style: none;
  margin: 0;
  border-bottom: 1px solid var(--color-black);
}

.verhuur-page__content ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
}

.verhuur-page__content ul li a::after {
  content: "→";
  flex: 0 0 auto;
  font-size: 1.35em;
  font-weight: 400;
}

.verhuur-page__content ul li a:hover {
  padding-right: .5rem;
  text-decoration: underline;
}

.verhuur-page__content ul li a:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 4px;
}

/* Wanneer een lijstitem geen link bevat, blijft het leesbaar */
.verhuur-page__content ul li:not(:has(a)) {
  padding: .9rem 0;
  font-size: 1.1rem;
}

/* Duidelijke overgang naar de kalender */
.verhuur-page__calendar {
  margin-top: 6rem;
  padding-top: 3rem;
  border-top: 2px solid var(--color-black);
}

.verhuur-page__calendar-header {
  max-width: 42rem;
  margin-bottom: 2rem;
}

.verhuur-page__calendar-header h2 {
  margin: 0 0 1rem;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.05;
}

.verhuur-page__calendar-header p:last-child {
  max-width: 38rem;
  margin-bottom: 0;
}

/* De iCal-kalender zelf blijft volledig behouden */
.verhuur-page__calendar .ical-calendar-wrap {
  margin-top: 2rem;
}

@media (max-width: 600px) {
  .verhuur-page__header {
    margin-bottom: 3rem;
  }

  .verhuur-page__content h2 {
    margin-top: 3rem;
  }

  .verhuur-page__calendar {
    margin-top: 4rem;
    padding-top: 2rem;
  }
}