/* TV De Blauwe Reiger: kalender, activiteitkaarten en detailpagina. Bouwt voort op site.css. */

:root {
  /* Accentkleur op donkere (navy) achtergronden; een thema zet hier een leesbare themakleur. */
  --theme-on-dark: var(--lime);
}

[hidden] {
  display: none !important;
}
section[id] {
  scroll-margin-top: 72px;
}

.hero--compact {
  padding: 22px 0 84px;
}
.hero--compact h1 {
  font-size: clamp(2.3rem, 9.5vw, 4.4rem);
}
/* Op mobiel staat het logo al in de kopbalk; de kalender moet snel in beeld zijn. */
.hero--compact .hero-logo {
  display: none;
}
@media (min-width: 760px) {
  .hero--compact .hero-logo {
    display: block;
  }
  .hero--compact {
    padding: 40px 0 120px;
  }
  .hero--compact .hero-logo {
    width: min(220px, 100%);
  }
}

/* Typelabel met eigen kleur (kleur + tekstkleur komen uit de API, contrast gecontroleerd) */
.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font: 700 0.75rem/1.4 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--type-color, var(--blue));
  color: var(--type-ink, var(--white));
  white-space: nowrap;
}
.state-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--sky);
  color: var(--navy);
}
.state-badge--open {
  background: #e3f2c1;
  color: #2f4a05;
}
.state-badge--full {
  background: #fff1cc;
  color: #6b4a00;
}
.state-badge--cancelled {
  background: #fdecec;
  color: #7a1013;
}
.state-badge--ended {
  background: #eceff4;
  color: #4b5671;
}

/* ---------- Kalenderbalk ---------- */
.cal-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.seg {
  display: inline-flex;
  padding: 4px;
  background: var(--sky);
  border-radius: 999px;
  gap: 2px;
}
.seg button {
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--navy);
  font: 700 0.92rem var(--font-body);
  cursor: pointer;
}
.seg button[aria-pressed='true'] {
  background: var(--navy);
  color: var(--white);
}
.cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-nav h2 {
  font-size: clamp(1.4rem, 5.5vw, 2.1rem);
  min-width: 8ch;
  text-align: center;
}
.round-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--white);
  color: var(--navy);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
}
.round-btn:hover {
  border-color: var(--blue);
}
.link-btn {
  border: 0;
  background: none;
  color: var(--blue);
  font: 700 0.92rem var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 8px 4px;
}

.type-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px 6px 10px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font: 600 0.9rem var(--font-body);
  cursor: pointer;
}
.filter-chip .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--type-color);
  box-shadow: 0 0 0 2px var(--white);
}
.filter-chip[aria-pressed='true'] {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}
.filter-chip[aria-pressed='true'] .dot {
  box-shadow: 0 0 0 2px var(--navy), 0 0 0 3px rgb(255 255 255 / 0.7);
}

.cal-loading {
  opacity: 0.55;
  transition: opacity 0.2s;
}

/* ---------- Maandweergave ---------- */
table.month {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  margin: 0 -4px;
  width: calc(100% + 8px);
}
table.month th {
  font: 700 0.75rem var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 4px 0;
}
table.month td {
  vertical-align: top;
  padding: 0;
}
.day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 56px;
  padding: 5px 3px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--sky);
  color: var(--navy);
}
.day.other {
  background: #f7f9fd;
  color: #6b7a99;
}
.day.selected {
  border-color: var(--blue);
  background: var(--white);
}
/* De dagknop beslaat de hele cel (groot tikvlak op mobiel); de links erboven blijven klikbaar. */
.day .num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font: 700 0.9rem var(--font-body);
  cursor: pointer;
}
.day .num::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
}
.day .num:focus-visible {
  outline: none;
}
.day .num:focus-visible::after {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
}
.day.today .num {
  background: var(--lime);
  color: var(--navy);
}
.day .dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding-left: 3px;
}
.day .dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--type-color);
}
.day .pills {
  display: none;
}
.day-list {
  margin-top: 18px;
}
.day-list h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}
@media (min-width: 820px) {
  .day {
    min-height: 118px;
    padding: 6px;
  }
  .day .dots {
    display: none;
  }
  .day .pills {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 3px;
    width: 100%;
  }
  .pill {
    display: block;
    text-decoration: none;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--type-color);
    color: var(--type-ink);
    font: 600 0.78rem/1.25 var(--font-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pill.is-cancelled {
    text-decoration: line-through;
    opacity: 0.75;
  }
  .pill-more {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    padding-left: 4px;
  }
}

/* ---------- Activiteitkaarten (lijst, week, dag, widget) ---------- */
.ev-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ev {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: start;
  padding: 14px 16px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-left: 6px solid var(--type-color);
}
.ev.is-cancelled h4 a {
  text-decoration: line-through;
}
.ev.is-ended {
  opacity: 0.72;
}
.ev-date {
  grid-row: span 3;
  display: grid;
  place-items: center;
  width: 58px;
  padding: 7px 0 6px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--white);
  text-align: center;
  line-height: 1;
}
.ev-date b {
  font: 400 1.6rem var(--font-head);
}
.ev-date small {
  font: 700 0.68rem var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}
.ev h4 {
  margin: 0;
  font: 400 1.35rem/1.1 var(--font-head);
  text-transform: uppercase;
}
.ev h4 a {
  color: var(--navy);
  text-decoration: none;
}
/* Hele kaart klikbaar via de titellink */
.ev h4 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
.ev h4 a:focus-visible {
  outline: none;
}
.ev h4 a:focus-visible::after {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.ev:hover {
  box-shadow: 0 1px 2px rgb(11 31 77 / 0.08), 0 12px 28px rgb(11 31 77 / 0.14);
}
.ev-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.ev-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ev--compact {
  grid-template-columns: 1fr;
  padding: 10px 12px;
}
.ev--compact .ev-date {
  display: none;
}
.ev--compact h4 {
  font-size: 1.1rem;
}

.month-head {
  font-size: 1.6rem;
  margin: 26px 0 10px;
}
.month-head:first-child {
  margin-top: 0;
}

/* ---------- Weekweergave ---------- */
.week {
  display: grid;
  gap: 10px;
}
.week-day {
  background: var(--sky);
  border-radius: var(--radius);
  padding: 10px;
}
.week-day h3 {
  font: 700 0.85rem var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  color: var(--muted);
}
.week-day.today {
  box-shadow: inset 0 0 0 3px var(--lime);
}
.week-day .none {
  margin: 0;
  color: #6b7a99;
  font-size: 0.85rem;
}
@media (min-width: 980px) {
  .week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
  }
  .week-day {
    min-height: 240px;
  }
}

/* ---------- Jaarweergave ---------- */
.year {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.mini {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
}
.mini h3 {
  margin: 0 0 6px;
}
.mini h3 button {
  border: 0;
  background: none;
  padding: 4px 0;
  font: 400 1.3rem var(--font-head);
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
}
.mini h3 button:hover {
  color: var(--blue);
}
.mini table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}
.mini th {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 700;
  padding-bottom: 2px;
}
.mini td {
  padding: 1px;
}
.mini td button {
  position: relative;
  width: 100%;
  max-width: 34px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: none;
  font: 600 0.78rem var(--font-body);
  color: var(--navy);
  cursor: pointer;
}
.mini td button.has {
  background: var(--type-color);
  color: var(--type-ink);
}
.mini td button.today {
  box-shadow: inset 0 0 0 2px var(--lime);
}
.mini td button:disabled {
  cursor: default;
  color: #6b7a99;
}
.mini-count {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.subscribe {
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--sky);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
}
.subscribe p {
  margin: 0;
}

/* ---------- Detailpagina (alleen hier geldt een thema) ---------- */
.event-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, #15327a 100%);
  color: var(--white);
  padding: 20px 0 34px;
}
body.has-theme-hero .event-hero {
  background: linear-gradient(180deg, rgb(11 31 77 / 0.5), rgb(11 31 77 / 0.88)), var(--theme-hero) center / cover no-repeat;
}
.event-hero .back {
  color: #dbe5fa;
}
.event-hero .back:hover {
  color: var(--white);
}
.event-hero h1 {
  font-size: clamp(2.3rem, 10vw, 4.6rem);
  margin: 12px 0 8px;
  max-width: 20ch;
  overflow-wrap: anywhere;
}
.event-hero .marker {
  display: block;
  font-size: clamp(1.1rem, 4vw, 1.45rem);
  color: var(--theme-on-dark);
  transform: rotate(-1.5deg);
  transform-origin: left;
}
.event-facts {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 1.05rem;
}
.event-facts li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.event-facts svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--theme-on-dark);
  transform: translateY(3px);
}
.event-cancelled {
  margin-top: 14px;
}

.event-layout {
  display: grid;
  gap: 24px;
  padding-top: 24px;
  padding-bottom: 56px;
}
@media (min-width: 900px) {
  .event-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
  }
  .event-layout > aside {
    position: sticky;
    top: 84px;
  }
}
.event-desc {
  white-space: pre-line;
  font-size: 1.05rem;
  color: #23345c;
  margin: 0 0 20px;
  overflow-wrap: anywhere;
}
.flyer {
  margin: 0 0 20px;
}
.flyer img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 640px;
}
.flyer-pdf {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  max-width: 520px;
  text-decoration: none;
  color: var(--navy);
}
.flyer-pdf b {
  display: block;
}
.flyer-pdf small {
  color: var(--muted);
}
.flyer-pdf .pdf-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--red);
  color: var(--white);
  font: 800 0.8rem var(--font-body);
}
.share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.btn--whatsapp {
  --btn-bg: #1d6f46;
  --btn-ink: var(--white);
}
.btn svg {
  width: 20px;
  height: 20px;
}

.signup-panel {
  border-top: 6px solid var(--theme-1);
}
.signup-panel h2 {
  font-size: 1.7rem;
  margin-bottom: 10px;
}
.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  margin: 0 0 16px;
}
.facts dt {
  font-weight: 700;
}
.facts dd {
  margin: 0;
}
.places {
  margin: 0 0 16px;
}
.places p {
  margin: 0 0 6px;
  font-weight: 600;
}
.meter {
  height: 10px;
  border-radius: 999px;
  background: var(--sky-2);
  overflow: hidden;
}
.meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--lime), #8fc01a);
  border-radius: inherit;
}
.meter.is-low span {
  background: linear-gradient(90deg, #f29a2e, var(--red));
}

.signup-form {
  scroll-margin-top: 84px;
}
.form-grid {
  display: grid;
  gap: 0 14px;
}
@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid .full {
    grid-column: 1 / -1;
  }
}
.form-block {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-top: 4px;
}
.form-block h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
}
.form-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  border-top: 2px solid var(--line);
  margin-top: 8px;
}
.form-total strong {
  font: 400 1.7rem var(--font-head);
}
.req {
  color: #b3141a;
}
.v-stack {
  display: grid;
  gap: 12px;
}

/* ---------- Widget (iframe) ---------- */
body.widget {
  background: transparent;
  min-height: 0;
}
.widget-wrap {
  padding: 8px;
}
.widget .ev {
  box-shadow: 0 1px 2px rgb(11 31 77 / 0.08), 0 2px 10px rgb(11 31 77 / 0.08);
}
.widget-foot {
  margin: 12px 4px 4px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Bevestigingsvenster (afmelden) */
.confirm-dialog {
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  width: min(480px, calc(100vw - 24px));
  box-shadow: 0 20px 60px rgb(11 31 77 / 0.35);
  color: var(--navy);
}
.confirm-dialog::backdrop {
  background: rgb(11 31 77 / 0.55);
}
.confirm-dialog .dialog-body {
  padding: 20px;
}
.confirm-dialog h2 {
  font-size: 1.6rem;
  margin-bottom: 8px;
}