/**
 * Minimale FUNCTIONELE CSS voor de HIZ-blokken.
 *
 * Het ontwerp (kleuren, typografie, ritme, kaarten) komt uit hiz-theme. Hier staat
 * alleen wat nodig is om de blokken zonder theme bruikbaar en toegankelijk te houden:
 * screenreader-tekst, geen layoutsprong bij het zoekresultaat, en een sheet die
 * niet over de hele pagina valt. Voeg hier geen merkstijl toe.
 */

.hiz-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Plaatszoeker: het resultaatvak houdt zijn hoogte, ook als het leeg is. */
.hiz-plaatszoeker__result {
	min-height: 3.5rem;
}

.hiz-plaatszoeker__suggesties {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-plaatszoeker__suggesties[hidden] {
	display: none;
}

.hiz-plaatszoeker__suggestie {
	cursor: pointer;
	padding: 0.5rem 0.25rem;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.hiz-plaatszoeker__suggestie.is-actief,
.hiz-plaatszoeker__suggestie:hover {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* Filters: zonder theme-CSS blijft de dialog een normale, bruikbare laag. */
.hiz-filters__sheet:not([open]) {
	display: none;
}

.hiz-filters__group {
	border: 0;
	margin: 0 0 1rem;
	padding: 0;
}

.hiz-filters__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
}

/* Grids en formulieren: één kolom als basis; het theme maakt er meer van. */
.hiz-grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.hiz-card__media img {
	display: block;
	width: 100%;
	height: auto;
}

.hiz-field {
	margin-bottom: 1rem;
}

.hiz-field__label {
	display: block;
}

.hiz-field__input {
	min-height: 48px;
	width: 100%;
	box-sizing: border-box;
}

.hiz-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1rem;
	text-decoration: none;
	cursor: pointer;
}

@media (min-width: 600px) {
	.hiz-plaatszoeker__row {
		display: flex;
		gap: 0.5rem;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hiz-plaatszoeker__result,
	.hiz-filters__sheet {
		transition: none !important;
		animation: none !important;
	}
}

/*
 * Plaatspagina: lijsten die semantisch een lijst moeten zijn (kruimelpad, chiprijen)
 * maar visueel geen opsomming. Zonder deze regels rendert een kruimelpad als een
 * verticale opsomming met bolletjes — dat is een functioneel probleem, geen merkstijl.
 * Kleur, ritme en typografie blijven uit hiz-theme komen.
 */
.hiz-kruimels__lijst,
.hiz-plaats-soorten__lijst,
.hiz-plaats-buren__lijst {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hiz-kruimels__lijst {
	gap: 0;
}

.hiz-kruimels__item {
	display: inline-flex;
	align-items: center;
}

/* Een chip is een knop, geen zin: de standaard onderstreping van een link hoort er niet bij. */
.hiz-plaats-soorten__chip,
.hiz-plaats-buren__link {
	text-decoration: none;
}