/* ============================================================================
   BRUYST — LOCATIESECTIE
   ----------------------------------------------------------------------------
   Geldt voor beide varianten:
     - de sectie die je in Elementor bouwt   (.card-locaties…)
     - de sectie uit [bruyst_locaties]       (.bruyst-locaties…)

   Regels van dit bestand:
     - GEEN font-family en GEEN hex-kleuren. Kleuren komen uit --bruyst-*,
       lettertypes erven van Elementor.
     - De maten die je waarschijnlijk wilt bijstellen staan bovenaan in :root.
     - !important staat er alleen waar Elementor/Hello anders overheen walst
       (koppen, knoppen, lijsten). Niet zomaar weghalen.
   ============================================================================ */

:root {
  /* Maten overgenomen van het homepage-ontwerp. */
  --bruyst-loc-nav-breedte:   330px;  /* de groene kaart met de plaatsnamen  */
  --bruyst-loc-card-breedte:  300px;  /* het lichte contactkaartje           */
  --bruyst-loc-overlap:       128px;  /* hoeveel het contactkaartje overlapt */
  --bruyst-loc-radius:         24px;
  --bruyst-loc-kaart-max:     440px;
}


/* ============================================================
   1. Contactkaartje — gevuld door bruyst-locaties.js
   Gebruikt in BEIDE varianten.
   ============================================================ */
.card-locaties-contact .clc-item,
.bruyst-locatie-card .clc-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  line-height: 1.5;
}

.card-locaties-contact .clc-item:last-child,
.bruyst-locatie-card .clc-item:last-child {
  margin-bottom: 0;
}

.card-locaties-contact .clc-icon,
.bruyst-locatie-card .clc-icon {
  flex-shrink: 0;
  width: 18px;
  margin-top: 3px;
  color: var(--bruyst-teal-light);
  text-align: center;
  line-height: 0;
}

.card-locaties-contact .clc-icon svg,
.bruyst-locatie-card .clc-icon svg {
  width: 15px;
  height: 15px;
  display: inline-block;
  fill: currentColor;
}

.card-locaties-contact .clc-link,
.bruyst-locatie-card .clc-link {
  color: var(--bruyst-secondary);
  text-decoration: none;
}

.card-locaties-contact .clc-link:hover,
.bruyst-locatie-card .clc-link:hover {
  color: var(--bruyst-teal-light);
  text-decoration: underline;
}


/* ============================================================
   2. Elementor-variant — de icoonlijst met locatienamen
   ============================================================ */
.card-locaties .elementor-icon-list-item {
  cursor: pointer;
  transition: opacity .15s;
}

.card-locaties .elementor-icon-list-item:hover {
  opacity: .8;
}

/* Oplichten bij hover/klik op een kaartstip. De pill is een pseudo-element
   met een vaste hoogte, altijd verticaal gecentreerd op de regel — het
   li-blok zelf is hoger (Elementor zet de ruimte tussen items als padding op
   het item), dus een achtergrond op het hele item wordt een log, scheef
   vlak. Geen transform: niets verschuift, de uitlijning blijft strak. */
/* Het anker (.bruyst-locatie-pill, gezet door bruyst-locaties.js) is de
   regel zelf — de bestaande <a> of een wrapper om de inhoud. Zo staat de
   naam EXACT verticaal in het midden van de pill, ongeacht hoe Elementor
   zijn tussenruimte als (soms eenzijdige) padding op het item zet. */
.bruyst-locatie-pill {
  position: relative;
  display: flex;        /* volle breedte — zelfde pill-breedte als de
                           [bruyst_locaties]-variant, waar de knop de hele
                           kolom beslaat. inline-flex kromp om de naam heen
                           en dan verschilden de twee varianten. */
  align-items: center;
  width: 100%;
}
.bruyst-locatie-pill > * {
  position: relative;   /* inhoud boven de pill houden */
}
.bruyst-locatie-pill::before {
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  top: 50%;
  height: 2.4em;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .18);
  border-radius: 10px;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.card-locaties .elementor-icon-list-item.is-active {
  opacity: 1;
  font-weight: 700;
}
.card-locaties .elementor-icon-list-item.is-active .bruyst-locatie-pill::before {
  opacity: 1;
}

/* Weggefilterd door het dienstfilter van de pagina. */
.card-locaties .elementor-icon-list-item.bruyst-locatie--verborgen {
  display: none !important;
}


/* ============================================================
   3. Eigen variant — [bruyst_locaties]
   ============================================================ */
/* Twee kolommen, twee regels:
     regel 1  kop + onderschrift (alleen links)
     regel 2  de groene lijst links, de plattegrond rechts
   Daardoor beginnen de lijst en de kaart op DEZELFDE hoogte; de kaart
   schuift dus niet omhoog naar de kop. */
.bruyst-locaties__inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 48px !important;
  row-gap: 28px !important;
  align-items: start !important;
}

.bruyst-locaties__kop   { grid-column: 1 !important; grid-row: 1 !important; }
.bruyst-locaties__cards { grid-column: 1 !important; grid-row: 2 !important; }
.bruyst-locaties__inner > .bruyst-map { grid-column: 2 !important; grid-row: 2 !important; }

/* LET OP — min-width:0 is hier essentieel (v3.34).
   Een grid-kolom is standaard minstens zo breed als zijn INHOUD. De rij met
   de groene lijst en het contactkaartje is samen breder dan de halve kolom,
   dus blies de kolom zichzelf op: op smalle schermen stak de hele sectie
   (kop, onderschrift én kaartjes) buiten beeld. Met min-width:0 mag de kolom
   wél smaller worden dan zijn inhoud, en pas dán krijgt het krimpen van het
   kaartje hieronder de kans om te werken. */
.bruyst-locaties__inner > * {
  min-width: 0;
}

.bruyst-locaties__title {
  color: var(--bruyst-groen) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

.bruyst-locaties__sub {
  margin: 0 0 28px !important;
  padding: 0 !important;
}

/* Wrapper: overflow zichtbaar zodat het detailkaartje over de nav heen mag. */
/* flex-end: het contactkaartje sluit onderaan gelijk met de groene kaart af,
   precies zoals op de homepage. Wordt de groene kaart korter doordat er
   locaties zijn weggefilterd, dan schuift het kaartje vanzelf mee omhoog. */
.bruyst-locaties__cards {
  display: flex !important;
  align-items: flex-end !important;
  position: relative !important;
  overflow: visible !important;
}

/* --- Linker navigatiekaart --- */
.bruyst-locatie-nav {
  background: var(--bruyst-groen) !important;
  border-radius: var(--bruyst-loc-radius) !important;
  padding: 20px 0 !important;
  width: var(--bruyst-loc-nav-breedte) !important;
  flex-shrink: 0 !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

.bruyst-locatie-nav__item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 13px 26px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  color: #fff !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  transition: background .15s !important;
}

/* Het ontwerp heeft geen gekleurde balk achter de actieve plaats — die wordt
   vet, net als in de Elementor-variant. Hoveren geeft wel een lichte zweem,
   zodat je ziet dat er iets te klikken valt. */
.bruyst-locatie-nav__item:hover     { background: rgba(255,255,255,.12) !important; }
.bruyst-locatie-nav__item {
  position: relative;
}
.bruyst-locatie-nav__item > * {
  position: relative;
}
.bruyst-locatie-nav__item::before {
  content: "";
  position: absolute;
  /* Binnen de knop blijven: de shortcode-knop is al vol-breed in een kaart
     zonder zijpadding — met -14px stak de pill buiten de groene kaart. */
  left: 12px;
  right: 12px;
  top: 50%;
  height: 2.4em;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .18);
  border-radius: 10px;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.bruyst-locatie-nav__item.is-active {
  background: none !important;
  font-weight: 700 !important;
}
.bruyst-locatie-nav__item.is-active::before {
  opacity: 1;
}

.bruyst-locatie-nav__item-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* De speld is donkerblauw, niet wit — dat is het onderscheid in het ontwerp. */
.bruyst-locatie-nav__pin {
  width: 12px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  fill: var(--bruyst-primary) !important;
  display: inline-block !important;
}

/* Het ontwerp op de homepage heeft geen pijltje achter de plaatsnaam.
   Hij blijft in de HTML staan voor schermlezers, maar is niet zichtbaar. */
.bruyst-locatie-nav__chevron {
  display: none !important;
}

/* --- Rechter detailkaart --- */
.bruyst-locatie-card {
  background: var(--bruyst-wolk) !important;
  border-radius: var(--bruyst-loc-radius) !important;
  padding: 28px 32px !important;
  width: var(--bruyst-loc-card-breedte) !important;
  flex-shrink: 0 !important;
  box-shadow: 0 6px 28px rgba(21,20,62,.07) !important;
  position: relative !important;
  z-index: 3 !important;
  margin-left: calc(-1 * var(--bruyst-loc-overlap)) !important;
  min-height: 80px !important;
  height: auto !important;
  color: var(--bruyst-primary) !important;
}

/* --- Kaart rechts --- */
.bruyst-map {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bruyst-map object,
.bruyst-map svg {
  width: 100% !important;
  max-width: var(--bruyst-loc-kaart-max) !important;
  height: auto !important;
}


/* ============================================================
   4. Behandelingenlijst op een locatiepagina
   [bruyst_behandelingen]
   ----------------------------------------------------------------------------
   Opmaak zit hier, niet in de Elementor-widget. Pas je dit aan, dan veranderen
   alle locatiepagina's mee — ook de bestaande.
   ============================================================ */
.bruyst-behandelingen__titel {
  margin: 0 0 12px;
}

.bruyst-behandelingen__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bruyst-behandelingen__item {
  margin: 0;
  padding: 0;
}

.bruyst-behandelingen__link {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: var(--bruyst-primary);
  text-decoration: none;
  transition: color .15s;
}

.bruyst-behandelingen__link:hover {
  color: var(--bruyst-secondary);
}

.bruyst-behandelingen__pijl {
  width: 6px;
  height: 10px;
  flex-shrink: 0;
  fill: var(--bruyst-secondary);
}

.bruyst-behandelingen__link--geen {
  cursor: default;
}

/* Losse zin-variant: weergave="tekst" */
.bruyst-behandelingen--tekst a {
  color: var(--bruyst-secondary);
  text-decoration: underline;
}


/* ============================================================
   5. Responsive
   ============================================================ */
@media (max-width: 1024px) {
  /* Eén kolom: de vaste rij/kolom-plaatsing hierboven weer loslaten, anders
     zou de lijst op regel 2 blijven staan met een gat erboven. */
  .bruyst-locaties__inner {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 32px !important;
  }
  .bruyst-locaties__kop,
  .bruyst-locaties__cards,
  .bruyst-locaties__inner > .bruyst-map {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .bruyst-map { display: none !important; }
}

@media (max-width: 767px) {
  :root {
    --bruyst-loc-nav-breedte:  190px;
    --bruyst-loc-card-breedte: 200px;
    --bruyst-loc-overlap:       40px;
  }
  .bruyst-locatie-card      { padding: 20px !important; }
  .bruyst-locatie-nav__item { padding: 10px 16px !important; }

  /* Op heel smalle telefoons (nav 190px + kaart 200px > schermbreedte)
     mag het kaartje meebuigen in plaats van rechts uit beeld te vallen.
     box-sizing hoort daar bij: zonder border-box telt de padding (2×20px)
     BOVENOP de 200px breedte, en dan valt het kaartje er alsnog uit. */
  .bruyst-locatie-card {
    flex-shrink: 1 !important;
    min-width: 0;
    box-sizing: border-box !important;
  }
}