/**
 * Suggestielijst van de adres-autocomplete.
 *
 * Nodig omdat de Places API (New) alleen data levert, geen kant-en-klaar dropdownmenu (de oude
 * Maps JS-API tekende zelf een `.pac-container`). We tekenen de lijst zelf, zodat het straatveld
 * zijn eigen opmaak, label en GF-validatiemelding houdt.
 *
 * ## Opmaak: GF's eigen Orbital-primitives, niet onze eigen waarden
 *
 * De lijst hangt onder een Gravity Forms-veld, dus hij hoort eruit te zien als een verlengstuk van
 * dat veld — niet als een los widget. Daarom leest élke waarde hieronder uit de `--gf-ctrl-*`- en
 * `--gf-font-*`-variabelen van het Orbital-theme (rand, radius, achtergrond, tekstkleur, padding,
 * lettertype). Zet het thema van MS Research die primitives om — en dat doet het, zie de
 * "Gravity Forms — Orbital theme override" in het thema — dan verandert deze lijst mee zonder dat
 * hier iets aangepast hoeft te worden.
 *
 * Elke `var()` heeft een terugval, zodat de lijst ook bruikbaar blijft op een formulier met het
 * oude "Gravity Forms 2.5"-theme (dat kent `.gform-theme--framework` en dus deze variabelen niet).
 *
 * Positionering: `absolute`, direct onder het invoerveld van de straatnaam.
 * `address-autocomplete.js` zet in `createList()` `position: relative` op het blokje om dát veld —
 * bij onze eigen velden de `.ginput_container`, bij een native GF Address-veld de
 * `.address_line_1`-span — zodat `top`/`left`/`right` hieronder daaraan tellen. Bewust niet het hele
 * adresblok: dan zou de lijst onder de wóonplaats uitkomen in plaats van onder de straatnaam.
 */

/*
 * Google's eigen overlay hard verbergen. Dit script gebruikt de Places API (New) rechtstreeks en
 * tekent zijn eigen lijst — er hoort dus nooit een `.pac-container` te verschijnen. Toch een
 * vangnet: laadt de Maps JavaScript API ooit alsnog (via de Gravity Forms Geolocation-add-on, of
 * een per ongeluk aangezette "Location Suggestions" op een native Address-veld), dan zou zijn
 * eigen, onstijlbare dropdown dubbel over onze lijst heen komen. `!important` omdat dat exact de
 * situatie is die we willen overrulen, niet een gewone cascade-regel.
 */
.pac-container {
	display: none !important;
}

/*
 * Zelfde vangnet voor de nieuwere variant: met "Enable the New Google Places API" aan gebruikt de
 * Geolocation-add-on Google's `PlaceAutocompleteElement` — een web component met een éigen
 * invoerveld, dat hij náást het GF-veld in de `.ginput_container` hangt. Zichtbaar zou dat twee
 * straatvelden onder elkaar geven, waarvan er één geen label en geen validatie heeft.
 * {@see AddressAutocomplete::silence_addon()} houdt die scripts normaal al buiten de pagina.
 */
gmp-place-autocomplete,
gmp-placeautocomplete,
.gform-geolocation-autocomplete-element {
	display: none !important;
}

.msr-addr-suggestions {
	position: absolute;
	/*
	 * Boven de rest van het formulier, maar niet boven een plakkende sitekop: 1000 is dezelfde
	 * hoogte die Google's eigen `.pac-container` gebruikt, dus wie daar ooit CSS voor had, klopt hier
	 * ook.
	 */
	z-index: 1000;
	/* Direct onder het veld, met de randdikte als tussenruimte — zo raken de twee randen elkaar
	   niet en oogt de lijst als een tweede laag ónder het veld. */
	top: 100%;
	left: 0;
	right: 0;
	margin: var(--gf-ctrl-border-width, 2px) 0 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;

	/* Meegroeien met de inhoud, maar nooit voorbij een halve viewport — daarna scrollen. */
	max-height: min(18rem, 50vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* iOS: zonder deze regel voelt scrollen in een absolute lijst hakkelig. */
	-webkit-overflow-scrolling: touch;

	/* Rand, radius en vulling exact zoals een GF-invoerveld. */
	background: var(--gf-ctrl-bg-color, #fff);
	border: var(--gf-ctrl-border-width, 2px) var(--gf-ctrl-border-style, solid)
		var(--gf-ctrl-border-color, #f0f0f0);
	border-radius: var(--gf-ctrl-radius, 8px);

	/* Typografie van het veld waar hij onder hangt. */
	font-family: var(--gf-ctrl-font-family, var(--gf-font-family-primary, inherit));
	font-size: var(--gf-font-size-primary, 1rem);
	line-height: 1.5;
	color: var(--gf-ctrl-color, inherit);
	text-align: left;

	/*
	 * Eén zachte schaduw, ondanks `--gf-ctrl-shadow: none` op de velden: dit blok zweeft over de
	 * inhoud eronder, en de lichte rand (#F0F0F0 in dit thema) is te subtiel om die scheiding alleen
	 * te dragen. Bewust laag gehouden zodat het niet losstaat van de vlakke stijl van het formulier.
	 */
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.msr-addr-suggestions[hidden] {
	display: none;
}

.msr-addr-suggestion {
	margin: 0;
	/* Horizontaal gelijk met de tekst ín het veld (zelfde `--gf-ctrl-padding-x`), verticaal iets
	   ruimer dan een veld zodat de rijen als aanklikbare regels lezen. */
	padding: calc(var(--gf-ctrl-padding-y, 0.5rem) + 2px) var(--gf-ctrl-padding-x, 1rem);
	cursor: pointer;
	color: inherit;
}

/* Scheidingslijntje in dezelfde kleur als de rand — geen extra tint erbij verzinnen. */
.msr-addr-suggestion + .msr-addr-suggestion {
	border-top: 1px solid var(--gf-ctrl-border-color, #f0f0f0);
}

/*
 * Aangewezen rij (muis of pijltjestoetsen): een lichte wash van de accentkleur van het formulier.
 * De eerste regel is de terugval voor browsers zonder `color-mix()`; die laten de tweede vallen.
 */
.msr-addr-suggestion:hover,
.msr-addr-suggestion.is-active {
	background: rgba(0, 0, 0, 0.05);
	background: color-mix(in srgb, var(--gf-color-primary, #6d2c58) 8%, transparent);
}

/*
 * Straat + huisnummer vet, woonplaats erachter in een lichtere tint: er zijn tientallen
 * "Kerkstraat 1" in Nederland, dus de woonplaats is hier het onderscheidende deel.
 */
.msr-addr-suggestion__main {
	font-weight: 700;
}

.msr-addr-suggestion__secondary {
	margin-left: 0.4em;
	font-size: var(--gf-font-size-secondary, 0.875rem);
	/* Dezelfde tint die GF voor velddescripties gebruikt. De `opacity` staat er los bij als
	   terugval voor een thema dat die variabele niet zet — dan is `currentColor` gelijk aan de
	   hoofdtekst en zou de woonplaats zonder die regel niet lichter zijn. */
	color: var(--gf-ctrl-desc-color, currentColor);
	opacity: 0.8;
}