elementen
* zijn data-only templates voor maps.js (de innerHTML wordt in de
* Google Maps InfoWindow gerendered bij marker-click). Ze staan in
* de DOM als siblings van .acf-map, dus moeten we ze hier hard
* verbergen — anders ziet de gebruiker alle infoboxen onder de kaart
* staan. Idem voor de JSON-latlng container.
* ------------------------------------------------------------------ */
[id^="location-marker-"],
#pjListingLocationsLatLng {
display: none !important;
}
/* ------------------------------------------------------------------ *
* Custom map-marker (.ae-pin) — vervangt de default Google-pin door
* een oranje teardrop-speldje met het peg-nummer
* (location_pin_number ACF) of sequentiële index als fallback.
* Gebouwd in maps.js bij AdvancedMarkerElement-init en meegegeven
* als content-DOM.
*
* Vorm: ronde cirkel met één vierkante hoek (border-radius 50/50/
* 50/0) + 45° rotatie zodat die hoek als pin-punt naar beneden
* wijst. Eén CSS-shape met doorlopende oranje achtergrond + witte
* border rondom alles — geen aparte ::after triangle meer waardoor
* de border halverwege de pin werd afgekapt.
*
* Het ::__num kindje counter-roteert met +45° zodat het cijfer
* rechtop in de pin staat.
* ------------------------------------------------------------------ */
.ae-pin {
position: relative;
width: 30px;
height: 30px;
background: #ff7900;
color: #fff;
border: 2px solid #fff;
border-radius: 50% 50% 50% 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
cursor: pointer;
transition: transform 0.15s ease, background 0.15s ease;
/* -45° rotatie zet de vierkante border-radius-hoek als punt
naar beneden. translateY houdt de tip exact boven de
lat/lng-coordinate (Google's default anchor zit bottom-
center, voor de geroteerde shape ligt die tip net iets onder
het bounding-box-midden). */
transform: rotate(-45deg) translate(2px, -2px);
transform-origin: 50% 50%;
}
.ae-pin:hover,
.ae-pin:focus-visible {
background: #d96400;
transform: rotate(-45deg) translate(2px, -6px) scale(1.1);
outline: none;
}
.ae-pin__num {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(45deg);
font-size: 12px;
font-weight: 700;
line-height: 1;
/* Lange peg-namen (bv "A12") worden ingekort */
overflow: hidden;
padding: 0 2px;
box-sizing: border-box;
}
/* ------------------------------------------------------------------ *
* Read-more pattern voor .about-vacation .description / .description2.
* Pure CSS via een hidden checkbox +