/*
 * Thema hrw: kop, zoekveld, USP-balk en kruimelpad (Wouter, 27 en 28 oktober 2026, naar het voorbeeld
 * van Omoda). Op staging bekeken als proef in de plugin (pull request #48); dit is dezelfde opmaak,
 * nu voor het thema. Liever in Tailwind-klassen in de blokken? Dan is dit de beschrijving.
 *
 * Kleuren: primary #02922b, secondary #d9efdf (variabelen van het thema waar ze er zijn).
 * Breekpunten: md = 48rem (768px), lg = 64rem (1024px).
 */

/* ---------- zoekformulier en zoekveld (hrw_thema_zoekformulier) ----------
 * Een ronde, lichtgrijs gevulde balk zonder zwarte rand, het vergrootglas links, rustige letter.
 * 16px voorkomt dat iOS inzoomt.
 *
 * Breedte en plaats van het formulier: precies wat het thema had voor .searchwp-form (live, 28 oktober
 * 2026). Op een telefoon als laatste in de rij (order 9999), over de hele breedte, zodat menu, logo en
 * iconen op één regel blijven; vanaf md naast het logo, rechts (margin-left: auto), 326 / 390 / 576 /
 * 776 px. Staan die regels in het thema al op .hrw-zoekformulier, dan kan dit blok weg.
 */

.hrw-zoekformulier {
	position: relative; /* De suggestielijst van de plugin hangt eronder. */
	display: flex;
	align-items: center;
	order: 9999;
	width: 100%;
	margin-bottom: 0;
	margin-left: auto;
}

@media (min-width: 48rem) {
	.hrw-zoekformulier {
		order: 0;
		width: 326px;
		padding-right: 4px;
	}
}

@media (min-width: 64rem) {
	.hrw-zoekformulier {
		width: 390px;
	}
}

@media (min-width: 80rem) {
	.hrw-zoekformulier {
		width: 576px;
	}
}

@media (min-width: 96rem) {
	.hrw-zoekformulier {
		width: 776px;
	}
}

.hrw-zoekveld {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px 0 46px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: #f1f3f2;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 16px 50%;
	background-size: 20px 20px;
	box-shadow: none;
	outline: none;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 48px;
	color: #000;
	text-overflow: ellipsis;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hrw-zoekveld::placeholder {
	color: #5f6662;
	opacity: 1;
}

.hrw-zoekveld:hover {
	background-color: #e8eceb;
}

.hrw-zoekveld:focus {
	background-color: #fff;
	border-color: #000;
}

.hrw-zoekveld:focus-visible {
	box-shadow: 0 0 0 3px rgba(2, 146, 43, 0.25);
}

.hrw-zoekveld::-webkit-search-decoration,
.hrw-zoekveld::-webkit-search-cancel-button {
	/* Het kruisje van Chrome houdt ruimte vrij, ook bij een leeg veld: dan past de tekst niet op een telefoon. */
	-webkit-appearance: none;
	display: none;
}

@media (min-width: 64rem) {
	/* In de kop naast het logo: iets lager, gelijk met de iconen. */
	.hrw-zoekveld {
		height: 44px;
		line-height: 44px;
	}
}

/* ---------- kop (blok hrw/nav-bar) onder lg ---------- */

@media (max-width: 63.99rem) {
	/* Menuknop: drie dunne lijntjes in plaats van fa-bars op een zwart blok; de lijntjes op de 16px-lijn. */
	.wp-block-hrw-nav-bar .js-mobile-menu-trigger.js-mobile-menu-trigger {
		position: relative;
		width: 44px;
		height: 44px;
		margin-left: -10px;
		background: transparent;
	}

	.wp-block-hrw-nav-bar .js-mobile-menu-trigger svg {
		display: none;
	}

	.wp-block-hrw-nav-bar .js-mobile-menu-trigger::before {
		content: "";
		position: absolute;
		left: 10px;
		top: 50%;
		width: 24px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
		color: #000;
		transform: translateY(-50%);
	}

	.wp-block-hrw-nav-bar .js-mobile-menu-trigger:hover::before {
		color: var(--color-primary, #02922b);
	}

	/* pt-3 in plaats van pt-6; menu, logo en iconen op één middenlijn. */
	.wp-block-hrw-nav-bar > .container {
		padding-top: 12px;
		padding-bottom: 0;
		row-gap: 12px;
	}
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
	/* Tablet: het veld staat naast het logo, dan wel ruimte onder de kop. */
	.wp-block-hrw-nav-bar > .container {
		padding-bottom: 12px;
	}
}

@media (max-width: 47.99rem) {
	/* Telefoon: de zoekbalk in een lichtgroene strook over de hele breedte, het veld wit. */
	.wp-block-hrw-nav-bar .hrw-zoekformulier {
		width: calc(100% + 32px);
		margin: 0 -16px;
		padding: 12px 16px;
		background: var(--color-secondary, #d9efdf);
	}

	.wp-block-hrw-nav-bar .hrw-zoekveld,
	.wp-block-hrw-nav-bar .hrw-zoekveld:hover {
		background-color: #fff;
	}
}

/* ---------- USP-balk (blok hrw/usp-bar) ----------
 * Swiper rekent de marge rechts (mr-5, bedoeld voor naast elkaar) niet mee: iedere volgende USP stond
 * 20px verder naar rechts. Op een telefoon 32px hoog in plaats van 44px.
 */
.wp-block-hrw-usp-bar .swiper-initialized .swiper-slide {
	margin-right: 0;
}

@media (max-width: 47.99rem) {
	.wp-block-hrw-usp-bar > .container {
		height: 32px;
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* ---------- kruimelpad (Yoast, .yoast-breadcrumbs), variant C ----------
 * Telefoon: niet zichtbaar (wel in de HTML, de BreadcrumbList van Yoast blijft). Vanaf md één regel,
 * opzij te vegen; het begint aan het eind en vervaagt links zolang daar iets verborgen is
 * (hrw-kruimelpad.js zet .is-lang en .is-begin).
 */
.yoast-breadcrumbs.yoast-breadcrumbs {
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.yoast-breadcrumbs::-webkit-scrollbar {
	display: none;
}

.yoast-breadcrumbs.is-lang:not(.is-begin) {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px);
	mask-image: linear-gradient(to right, transparent 0, #000 32px);
}

@media (max-width: 47.99rem) {
	.yoast-breadcrumbs.yoast-breadcrumbs {
		display: none;
	}
}