/* HPC Grafimedia - zoekfunctie (v1.0, 21-10-2026) - hoort bij js/hpc-zoeken.js */

/* vergrootglas-knop in het menu */
.hpc-zoek-knop {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: #f4eee6; color: #078587; cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}
.hpc-zoek-knop:hover, .hpc-zoek-knop:focus-visible { background: #078587; color: #fff; }
.hpc-zoek-knop:focus { outline: none; }
.hpc-zoek-knop:focus-visible { box-shadow: 0 0 0 3px rgba(7, 133, 135, 0.3); }
.hpc-zoek-knop svg { width: 19px; height: 19px; }
.header .menu > ul > li.hpc-zoek-li { margin-left: 8px; }
.hpc-zoek-knop--mobiel { width: 46px; height: 46px; }
.header .item-right .item-right { display: flex; align-items: center; }
@media (max-width: 991px) { .header .menu > ul > li.hpc-zoek-li { display: none !important; } }
@media (min-width: 992px) { .hpc-zoek-knop--mobiel { display: none !important; } }

/* zoekvenster */
.hpc-zoek {
	position: fixed; inset: 0; z-index: 10001; display: none;
	align-items: flex-start; justify-content: center;
	padding: 9vh 16px 16px;
	background: rgba(22, 46, 50, 0.45);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	font-family: "Open Sans", Arial, sans-serif;
}
.hpc-zoek.is-open { display: flex; animation: hpcZoekIn 0.16s ease-out; }
body.hpc-zoek-open { overflow: hidden; }
@keyframes hpcZoekIn { from { opacity: 0; } to { opacity: 1; } }

.hpc-zoek__paneel {
	width: 100%; max-width: 680px; max-height: 80vh;
	display: flex; flex-direction: column;
	background: #fff; border-radius: 18px; overflow: hidden;
	box-shadow: 0 30px 70px -25px rgba(22, 46, 50, 0.55), 0 0 0 1px rgba(22, 46, 50, 0.05);
	position: relative;
}
.hpc-zoek__paneel::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, #078587, #3fb3b0);
}
.hpc-zoek__balk {
	display: flex; align-items: center; gap: 12px;
	padding: 18px 16px 14px 22px; border-bottom: 1px solid #ece4da;
}
.hpc-zoek__balk > svg { flex: 0 0 22px; width: 22px; height: 22px; color: #078587; }
.hpc-zoek__invoer {
	flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
	font-family: inherit; font-size: 18px; color: #2d3a3e; padding: 6px 0;
	-webkit-appearance: none; appearance: none;
}
.hpc-zoek__invoer::placeholder { color: #9aa3a6; }
.hpc-zoek__invoer::-webkit-search-cancel-button { -webkit-appearance: none; }
.hpc-zoek__sluit {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	height: 34px; padding: 0 10px; border: 1px solid #e3d9cc; border-radius: 8px;
	background: #faf7f3; color: #5d6a6e; font-size: 12px; font-weight: 600; cursor: pointer;
}
.hpc-zoek__sluit:hover { background: #f4eee6; color: #2d3a3e; }
.hpc-zoek__sluit svg { display: none; width: 18px; height: 18px; }

.hpc-zoek__status { padding: 0 22px; font-size: 12px; color: #8b8279; letter-spacing: 0.04em; }
.hpc-zoek__status:not(:empty) { padding: 10px 22px 2px; }

.hpc-zoek__lijst {
	list-style: none; margin: 0; padding: 8px 10px 12px;
	overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.hpc-zoek__item { margin: 0; }
.hpc-zoek__link, .hpc-zoek__link:visited {
	display: block; padding: 12px 14px; border-radius: 12px;
	color: #3d4b50; text-decoration: none !important;
}
.hpc-zoek__item.is-gekozen .hpc-zoek__link { background: #f4eee6; }
.hpc-zoek__kop { display: flex; align-items: baseline; gap: 10px; }
.hpc-zoek__titel { font-weight: 600; font-size: 16px; color: #2d3a3e; line-height: 1.35; }
.hpc-zoek__item.is-gekozen .hpc-zoek__titel { color: #078587; }
.hpc-zoek__label {
	flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
	color: #078587; background: #e6f3f3; border-radius: 4px; padding: 2px 6px; line-height: 1.4;
	position: relative; top: -1px;
}
.hpc-zoek__label--pdf { color: #8b8279; background: #f3ede6; }
.hpc-zoek__label--actueel, .hpc-zoek__label--duurzaam { color: #7a5b2e; background: #f6ecdc; }
.hpc-zoek__tekst {
	display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: #5d6a6e;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hpc-zoek mark { background: #fff1a8; color: inherit; padding: 0 1px; border-radius: 2px; }

.hpc-zoek__tips { padding: 10px 12px 6px; }
.hpc-zoek__tipkop {
	display: block; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
	text-transform: uppercase; color: #078587;
}
.hpc-zoek__chip {
	display: inline-block; margin: 0 6px 8px 0; padding: 7px 14px; border-radius: 999px;
	border: 1px solid rgba(7, 133, 135, 0.3); background: #fff; color: #2d3a3e;
	font-family: inherit; font-size: 14px; cursor: pointer;
}
.hpc-zoek__chip:hover, .hpc-zoek__chip:focus-visible { background: #078587; color: #fff; outline: none; }
.hpc-zoek__geen { padding: 18px 14px; color: #5d6a6e; font-size: 15px; line-height: 1.55; }
.hpc-zoek__geen strong { display: block; color: #2d3a3e; margin-bottom: 4px; }
.hpc-zoek__geen a { color: #078587; font-weight: 600; }

/* mobiel: venster vult het scherm */
@media (max-width: 767px) {
	.hpc-zoek { padding: 0; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.hpc-zoek__paneel { max-width: none; max-height: none; height: 100%; border-radius: 0; box-shadow: none; }
	.hpc-zoek__balk { padding: 14px 12px 12px 16px; }
	.hpc-zoek__invoer { font-size: 17px; }   /* >= 16px: iPhone zoomt dan niet in */
	.hpc-zoek__sluit { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; background: #f4eee6; color: #2d3a3e; }
	.hpc-zoek__sluit .hpc-zoek__esc { display: none; }
	.hpc-zoek__sluit svg { display: block; }
	.hpc-zoek__lijst { padding: 6px 6px 30px; }
	.hpc-zoek__tekst { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .hpc-zoek.is-open { animation: none; } }