/**
 * Verhuur-extra's: opmaak die alleen de verhuursite nodig heeft.
 * Overgenomen uit het oude verhuurthema (custom-style.css en
 * custom-views.css), nu mobile-first en met de tokens uit tokens.css.
 *
 *   1. YouTube-video in de tekst (.yt-container), bijv. op de locatiepagina
 *   2. Tabbladen in pagina's (oude Bootstrap-markup .nav-tabs / .tab-content);
 *      wisselen doet js/base/tabbladen.js
 *   3. Beschikbaarheidskalender (FullCalendar, .fc)
 *   4. Fotoboek-overzicht (.field-content.fotoboek)
 */

/* ── 1. YouTube-video: altijd 16:9 over de volle breedte ───────────────── */
.yt-container {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.yt-container iframe,
.yt-container object,
.yt-container embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── 2. Tabbladen in pagina's ──────────────────────────────────────────── */
.zone-content .nav-tabs,
.zone-content .right-tabs .nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0 0 var(--s-4);
  padding: 0;
  list-style: none;
  border: 0;
}

.zone-content .nav-tabs > li {
  margin: 0;
}

.zone-content .nav-tabs > li > a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: var(--s-2) var(--s-4);
  color: inherit;
  border: 1px solid var(--c-groen);
  text-decoration: none;
  transition: background-color var(--overgang), color var(--overgang);
}

/* Specifieker dan ".paneel a:hover", anders groen op groen. */
.zone-content .nav-tabs > li > a:hover,
.zone-content .nav-tabs > li > a:focus-visible {
  color: var(--c-wit);
  background: var(--c-antraciet);
  border-color: var(--c-groen);
}

.zone-content .nav-tabs > li.active > a,
.zone-content .nav-tabs > li > a.active,
.zone-content .nav-tabs > li > a[aria-selected="true"],
.zone-content .nav-tabs > li > a[aria-current="page"] {
  color: var(--c-inkt);
  background: var(--c-groen);
  border-color: var(--c-groen);
}

/* Alleen het actieve tabblad tonen. Zonder JavaScript blijft alles zichtbaar
   (het script zet .js-tabbladen op de container). */
.js-tabbladen .tab-content > .tab-pane {
  display: none;
}

.js-tabbladen .tab-content > .tab-pane.active {
  display: block;
}

/* ── 3. Beschikbaarheidskalender (FullCalendar) ────────────────────────── */

/* FullCalendar 7 (module fullcalendar 4.x) brengt een eigen thema mee
   (bijv. "breezy", in te stellen in de view) met gehashte klassennamen.
   Het thema van de site mag daar niet doorheen praten: links in het donkere
   paneel zijn wit, en dat maakt dagnummers en afspraken onleesbaar op de
   witte kalender. .fullcalendar--wrapper staat in v6 én v7 om de kalender. */
.paneel .fullcalendar--wrapper a,
.paneel .fullcalendar--wrapper a:hover {
  color: inherit;
}

/* Net als in het oude verhuurthema valt de kalender mee in de kleur van het
   paneel (antraciet): geen witte kaart, witte tekst, lichte rasterlijnen,
   groene accenten. Dit zijn de variabelen van het FullCalendar-thema
   "breezy" (dist/themes/breezy); ze winnen van het gekozen palet. */
.paneel .fullcalendar--wrapper {
  --fc-breezy-background: transparent;
  --fc-breezy-popover: var(--c-antraciet);
  --fc-breezy-popover-border: rgb(255 255 255 / 0.35);

  --fc-breezy-foreground: var(--c-wit);
  --fc-breezy-strong-foreground: var(--c-wit);
  /* Op antraciet: 85% wit 8,2:1, 70% wit 5,4:1 (dagen van een andere
     maand). 50% haalde maar 3,9:1. */
  --fc-breezy-muted-foreground: rgb(255 255 255 / 0.85);
  --fc-breezy-faint-foreground: rgb(255 255 255 / 0.7);

  --fc-breezy-border: rgb(255 255 255 / 0.25);
  --fc-breezy-muted-border: rgb(255 255 255 / 0.15);
  --fc-breezy-strong-border: rgb(255 255 255 / 0.35);

  --fc-breezy-faint: rgb(255 255 255 / 0.04);
  --fc-breezy-muted: rgb(255 255 255 / 0.08);
  --fc-breezy-strong: rgb(255 255 255 / 0.12);
  --fc-breezy-stronger: rgb(255 255 255 / 0.16);
  --fc-breezy-strongest: rgb(255 255 255 / 0.2);

  --fc-breezy-primary: var(--c-groen);
  --fc-breezy-primary-over: var(--c-groen-licht);
  --fc-breezy-primary-foreground: var(--c-inkt);
  --fc-breezy-now: var(--c-groen);
  --fc-breezy-highlight: rgb(156 198 78 / 0.2);
  --fc-breezy-selected: rgb(156 198 78 / 0.3);
}

/* Afspraken in de kleur van hun locatie (De Hei blauw, De Damlaan rood),
   net zo vol als de legenda "Locaties" onder de kalender. Het thema breezy
   toont ze anders als een lichte tint. De kleur komt uit de view
   (Kleuren per taxonomie) via --fc-event-color. */
.paneel .fullcalendar--wrapper a[style*="--fc-event-color"] {
  color: var(--c-wit);
  background: var(--fc-event-color);
  border-color: var(--fc-event-color);
}

.paneel .fullcalendar--wrapper a[style*="--fc-event-color"] * {
  color: inherit;
  font-size: var(--fs-klein);   /* 14px i.p.v. 12px */
  line-height: 1.4;
}

/* Grotere dagnummers en dagnamen: het thema breezy gebruikt 12px. Ook in
   v7 zonder vaste klassen; wel met vaste rollen (cell, columnheader). */
.paneel .fullcalendar--wrapper [role="cell"][data-date] [role="presentation"] > [aria-hidden="true"],
.paneel .fullcalendar--wrapper [role="columnheader"] [aria-hidden="true"] {
  font-size: var(--fs-klein);
}

/* Telefoon: de maandnaam ("december 2026") op een eigen regel bovenaan,
   daaronder Vandaag links en vorige/volgende rechts op één regel. Anders
   komen de knoppen bij lange maandnamen onder elkaar te staan. */
@media (max-width: 37.49em) {
  .paneel .fullcalendar--wrapper > :first-child:has(button) {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
  }

  /* De view geeft de kalender een vaste verhouding (aspectRatio 1,35). Op
     een smal scherm worden de weken dan te laag en krijgt de kalender een
     eigen schuifbalk. Hoger maken, zodat alle weken zichtbaar zijn. */
  .paneel .fullcalendar--wrapper > [style*="aspect-ratio"] {
    aspect-ratio: 0.9 !important;
  }

  /* Korte afspraak in een smalle kolom: tekst afbreken i.p.v. afkappen. */
  .paneel .fullcalendar--wrapper a[style*="--fc-event-color"] * {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .paneel .fullcalendar--wrapper > :first-child:has(button) > :not(:has(button)) {
    order: -1;
    flex: 1 0 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Weeknummers bruin met witte tekst, zoals het oude verhuurthema. In v7
   hebben ze geen vaste klasse; wel een weekrij met aria-label "Week …". */
.paneel .fullcalendar--wrapper [role="row"][aria-label^="Week"] > [aria-hidden="true"] {
  font-size: var(--fs-klein);   /* 14px i.p.v. 12px */
  color: var(--c-wit);
  background: var(--c-bruin);
  border-color: var(--c-bruin);
}

/* Knoppen (Vandaag, vorige/volgende): verhuurgroen met donkere tekst,
   in plaats van de bruine paneelknop in Big John. */
.paneel .fullcalendar--wrapper button {
  min-height: var(--klik);
  font-family: var(--f-tekst);
  font-weight: 700;
  color: var(--c-inkt);
  background: var(--c-groen);
}

.paneel .fullcalendar--wrapper button:hover,
.paneel .fullcalendar--wrapper button:focus-visible {
  color: var(--c-inkt);
  background: var(--c-groen-licht);
}

/* Pijltjes (svg) krijgen van het FullCalendar-thema een lichtgrijze kleur:
   op groen onleesbaar. Zelfde donkere kleur als de tekst. */
.paneel .fullcalendar--wrapper button svg {
  color: inherit;
}

.paneel .fullcalendar--wrapper button:disabled {
  opacity: 0.6;
}

/* Hieronder: FullCalendar 6 (module fullcalendar 3.x), zoals nu nog op
   productie. In v7 bestaan deze klassen niet en doen deze regels niets. */

/* De tabelopmaak van het thema (geen lijnen, padding rechts; content.css en
   typography.css) geldt ook voor de tabellen van de kalender. Hier de
   eigen opmaak van FullCalendar terugzetten: rasterlijnen, geen padding. */
.zone-content__inhoud .fc {
  --fc-border-color: rgb(255 255 255 / 0.25);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: rgb(255 255 255 / 0.08);
}

.zone-content__inhoud .fc table {
  margin: 0;
}

.zone-content__inhoud .fc td,
.zone-content__inhoud .fc th {
  padding: 0;
  border: 1px solid var(--fc-border-color);
  vertical-align: top;
}

.zone-content__inhoud .fc .fc-col-header-cell {
  padding: var(--s-1) 0;
  text-align: center;
}

.zone-content__inhoud .fc .fc-daygrid-day-number {
  padding: var(--s-1);
}

/* Weeknummers en dagen buiten de maand: niet tegen de dagnummers aan. */
.zone-content__inhoud .fc .fc-day-other .fc-daygrid-day-number {
  opacity: 0.5;
}
.fc .fc-toolbar {
  flex-wrap: wrap;
  gap: var(--s-2);
}

.fc .fc-toolbar-title {
  font-size: 1.25em;
  margin: 0;
}

.fc .fc-daygrid-day.fc-day-today {
  background-color: var(--c-groen-licht);
  color: var(--c-inkt);
}

/* Dagnummer van vandaag: donker op lichtgroen (wit is daar onleesbaar). */
.paneel .fc .fc-day-today .fc-daygrid-day-number {
  color: var(--c-inkt);
}

.fc .fc-daygrid-week-number {
  min-width: 1.5em;
  padding: 2px;
  text-align: center;
  color: var(--c-wit);
  background-color: var(--c-bruin);
}

/* Knoppen: donkere tekst op groen (wit op groen is maar 2:1). */
.fc .fc-button-primary,
.fc .fc-button-primary:disabled {
  color: var(--c-inkt);
  background-color: var(--c-groen);
  border-color: var(--c-groen);
}

.fc .fc-button-primary:not(:disabled):hover,
.fc .fc-button-primary:not(:disabled):focus-visible,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  color: var(--c-wit);
  background-color: var(--c-bruin);
  border-color: var(--c-bruin);
}

.fc .fc-button {
  min-height: var(--klik);
}

/* ── 5. "Meer informatie >" in tekstblokken ────────────────────────────────
 * Redacteuren zetten in de editor <div><a class="more-link">…</a></div>
 * (bijv. "Bij ons huren", "Omgeving"). Zelfde knop rechtsonder als de
 * views-more-link (panelen.css), in de knopkleuren van het paneel.
 */
.paneel :is(p, div):has(> a.more-link:only-child) {
  display: flex;
  justify-content: flex-end;
  margin: var(--s-2) calc(-1 * var(--paneel-padding)) 0;
}

.paneel .block__inhoud :is(p, div):has(> a.more-link:only-child):last-child,
.paneel .block__inhoud > :last-child:has(a.more-link:last-child) {
  margin-bottom: 0;
}

/* margin: 0 — de regel ".paneel .more-link" (panelen.css, bedoeld voor de
   views-wrapper) geldt hier ook voor de link zelf en zou hem nog eens 15px
   buiten het paneel schuiven. */
.paneel a.more-link {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0.625rem;
  font-family: var(--f-kop);
  font-size: var(--fs-basis);
  color: var(--knop-tekst);
  background: var(--knop-bg);
  text-decoration: none;
  transition: background-color var(--overgang), color var(--overgang);
}

.paneel a.more-link:hover,
.paneel a.more-link:focus-visible {
  color: var(--knop-tekst-hover);
  background: var(--knop-bg-hover);
}

/* ── 7. Links in lopende tekst herkenbaar ──────────────────────────────────
 * Op een groen paneel hebben links dezelfde donkere kleur als de tekst
 * (groen op groen kan niet). Daarom krijgen links in alinea's, lijsten en
 * tabellen in panelen altijd een onderstreping, op elk paneel. Knoppen
 * (more-link) en de kalender doen niet mee.
 */
.paneel :is(p, li, td, dd) a:not(.more-link, .button, .fullcalendar--wrapper a) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.paneel :is(p, li, td, dd) a:not(.more-link, .button, .fullcalendar--wrapper a):hover,
.paneel :is(p, li, td, dd) a:not(.more-link, .button, .fullcalendar--wrapper a):focus-visible {
  text-decoration-thickness: 2px;
}

/* ── 6. Vaste kleur uit de editor (bruin #a0762c) ──────────────────────────
 * Haalt op geen enkel paneel voldoende contrast (op groen 2:1, op antraciet
 * 2,5:1). Toon die tekst in de linkkleur van het paneel. De donkere inhoud
 * van pagina's heeft een eigen, specifiekere regel in content.css.
 */
.paneel [style*="#a0762c" i],
.paneel [style*="rgb(160, 118, 44)"] {
  color: var(--c-link) !important;
}

/* ── 4. Fotoboek ───────────────────────────────────────────────────────── */
/* Fotorasters (views-grid, bijv. /fotos/de-hei): geen scheidingslijn onder
   elke rij. Die lijn (content.css) is voor lijsten met berichten. */
.zone-content__inhoud .views-view-grid .views-row {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Fotoraster: gelijke ruimte tussen alle foto's, ook op de telefoon. De
   view zet inline width: 33% op elke kolom; het raster neemt dat over. */
.zone-content__inhoud .views-view-grid {
  display: grid;
  gap: var(--s-2);
}

.zone-content__inhoud .views-view-grid .views-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}

.zone-content__inhoud .views-view-grid .views-col {
  width: auto !important;
}

@media (min-width: 37.5em) {
  .zone-content__inhoud .views-view-grid,
  .zone-content__inhoud .views-view-grid .views-row {
    gap: var(--s-3);
  }
}

.field-content.fotoboek a {
  display: block;
}

/* Subtiele groene rand (was 4px); alle foto's even groot. */
.field-content.fotoboek img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid var(--c-groen);
}