/**
 * Altus — onderdelen-megamenu + gescopeerde onderdelen-zoekbalk
 * (mu-plugins altus-onderdelen-megamenu.php + wp-content/fibosearch.php)
 *
 * Losstaand van het generieke megamenu (altus-megamenu-render.php): dit is het
 * kolommen-blok dat enkel op het hoofdmenu-item "Onderdelen" gebruikt wordt.
 *
 * Structuur (naar het voorbeeld van altrex-onderdelen.nl):
 *   __balk    — donkere balk, ALTIJD zichtbaar: trigger "Alle onderdelen" + zoekbalk.
 *   __paneel  — dropdown-paneel met de kolommen, standaard [hidden], wordt getoond
 *               door het scriptje in altus_onderdelen_megamenu_script().
 *
 * KLEUREN PER MERK (v2.0): elk merk (Altrex, Solide, Staltor, ...) kan zijn eigen
 * kleuren instellen (zie de repeater "Merkkleuren" op Producten > Merken, en
 * altus_om_merk_kleuren() in altus-onderdelen-megamenu.php). Sylvie kiest zelf per
 * kleur de rol; de shortcode zet de bijhorende CSS-variabele als inline style op dit
 * blok. Onderstaande drie variabelen zijn dus de "standaardkleuren" die gelden zolang
 * een merk een rol niet heeft ingevuld — bewust gelijk aan de oorspronkelijke Altrex-
 * huisstijl (rood/wit/zwart), zodat er zonder ingevulde merkkleuren niets verandert
 * t.o.v. de al goedgekeurde opmaak:
 *   --am-achtergrond — paneel- en zoeklabel-achtergrond (was vast rood)
 *   --am-tekst       — tekstkleur op die achtergrond (was vast wit)
 *   --am-accent      — balk-achtergrond + zoekknop (was vast --zwart, dezelfde
 *                      kleurvariabele als de omringende Bricks-Sectie, zodat er geen
 *                      zichtbaar kleurverschil met de sectie erachter ontstaat)
 * NIET de Altus-merkkleuren (--altus-oranje/--altus-navy uit altus-product.css) — dit
 * blok toont zich als "[merk]-onderdelen", niet als Altus zelf.
 *
 * GEEN 100vw-uitbreek-truc: die brak de rest van de Bricks-header (logo en hoofdmenu
 * verdwenen). Volledige breedte hoort in Bricks zelf geregeld te worden — zet de
 * sectie/container waarin dit shortcode-element staat op "Full Width" via Bricks'
 * eigen instelling.
 */

.altus-onderdelen-megamenu {
	--am-achtergrond: #d81f1a;
	--am-tekst: #fff;
	--am-accent: var(--zwart, #1a1a1a);

	width: 100%;
	box-sizing: border-box;
}

/* Vangnet: Bricks' eigen "Shortcode"-element genereert een wrapper-div
   (.brxe-shortcode) rond onze HTML, met zijn eigen breedte-instelling los van de
   Container eromheen. Als die wrapper zelf niet 100% breed staat, blijft dit blok
   smal ondanks width:100% hierboven (100% van een smalle ouder is nog smal). Deze
   regel forceert de breedte van precies dié ene wrapper — geraakt dus geen ander
   Shortcode-element op de site. :has() werkt niet in oudere browsers; voor die
   uitzondering blijft de Bricks-breedte-instelling zelf nodig. */
.brxe-shortcode:has(> .altus-onderdelen-megamenu) {
	width: 100% !important;
	max-width: 100% !important;
}

.altus-onderdelen-megamenu [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------- balk -- */

.altus-onderdelen-megamenu__balk {
	align-items: center;
	background: var(--am-accent);
	display: flex;
	flex-wrap: wrap;
	gap: 20px 32px;
	/* De balk-achtergrond is bewust 100vw breed, maar de INHOUD moet uitlijnen
	   met de content-containerbreedte van de rest van de site (Bricks' eigen
	   --container-max-width, hier 1140px op desktop — geverifieerd in Bricks'
	   style-manager-CSS, niet gegokt), niet met de volledige schermbreedte.
	   padding-right is daarom berekend: de afstand van de rand van het scherm
	   tot de rand van die gecentreerde content-container. max() voorkomt een
	   (te) kleine of negatieve waarde zodra het venster smaller is dan
	   --container-max-width. justify-content:space-between duwt de zoekbalk
	   dan tot precies die berekende rand — dus tot de content-rand, niet tot
	   de schermrand zoals eerder. */
	justify-content: space-between;
	/* Links 16px, niet 32px: dat is precies de linker-padding van de sectie
	   met het Altus-logo bovenaan (#brxe-zddcws, padding: 8px 16px !important —
	   geverifieerd in de server-CSS) — zo lijnt het Altrex-logo in deze balk
	   verticaal exact uit met het Altus-logo erboven. */
	padding: 18px max(16px, calc((100vw - var(--container-max-width, 1140px)) / 2)) 18px 16px;
}

.altus-onderdelen-megamenu__logo-link {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

.altus-onderdelen-megamenu__logo {
	height: 44px;
	width: auto;
}

.altus-onderdelen-megamenu__trigger {
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	color: var(--am-tekst);
	cursor: pointer;
	font-size: 19px;
	font-weight: 600;
	padding: 0 0 4px;
}

.altus-onderdelen-megamenu__trigger:hover {
	border-bottom-color: var(--am-tekst);
}

.altus-onderdelen-megamenu__pijl {
	display: inline-block;
	transition: transform 0.15s ease;
}

.altus-onderdelen-megamenu__trigger[aria-expanded="true"] .altus-onderdelen-megamenu__pijl {
	transform: rotate(180deg);
}

.altus-onderdelen-megamenu__zoekbalk {
	align-items: stretch;
	display: flex;
	/* Zonder dit drukt de balk (display:flex; justify-content:space-between) het
	   zoekveld samen zodra er niet genoeg ruimte overblijft naast de trigger —
	   flex-items krimpen standaard, max-width alleen voorkomt dat niet. */
	flex-shrink: 0;
}

.altus-onderdelen-megamenu__zoeklabel {
	align-items: center;
	background: var(--am-achtergrond);
	color: var(--am-tekst);
	display: flex;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 0 18px;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------------------------------------------------------------- paneel --
   Zelfde techniek als het bestaande hoofdnavigatie-megamenu (.altus-mega in
   altus-megamenu-render.php): position:fixed + left:0 + width:100vw haalt het
   paneel volledig uit de normale layout-flow, zodat het de flex-rij eromheen
   (met het logo) niet beïnvloedt — in tegenstelling tot de eerdere poging met
   position:relative + negatieve marge, die de header brak. De top-positie
   (net onder de balk) wordt door het scriptje hieronder berekend en gezet,
   net als bij het bestaande systeem. */

.altus-onderdelen-megamenu__paneel {
	background: var(--am-achtergrond);
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	left: 0;
	/* Zelfde links/rechts-padding als .altus-onderdelen-megamenu__balk (32px):
	   zo lijnt de inhoud van het paneel uit met "Alle onderdelen" in de balk
	   erboven, dus ook met het logo net daarvoor. */
	padding: 32px 32px;
	position: fixed;
	width: 100vw;
	z-index: 9999;
}

.altus-onderdelen-megamenu__kolom {
	color: var(--am-tekst);
	min-width: 180px;
}

.altus-onderdelen-megamenu__kolomtitel {
	color: var(--am-tekst);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 18px;
	text-transform: uppercase;
}

.altus-onderdelen-megamenu__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}

.altus-onderdelen-megamenu__lijst li {
	margin: 0 0 12px;
}

.altus-onderdelen-megamenu__lijst a {
	color: var(--am-tekst);
	font-size: 20px;
	text-decoration: none;
}

.altus-onderdelen-megamenu__lijst a:hover {
	text-decoration: underline;
}

/* De tak die je nu bekijkt (zie 'actief' in altus_onderdelen_megamenu_kolom_items()
   in altus-onderdelen-megamenu.php) — enkel van toepassing in "Per categorie". */
.altus-onderdelen-megamenu__lijst-actief {
	font-weight: 700;
	text-decoration: underline;
}

.altus-onderdelen-megamenu__toon-alle {
	margin: -4px 0 0;
}

.altus-onderdelen-megamenu__toon-alle a {
	color: var(--am-tekst);
	font-size: 17px;
	font-weight: 600;
	text-decoration: underline;
}

/* -------------------------------------------------- gescopeerde zoekbalk --
   Selectors matchen op [class*="dgwt-wcas-onderdelen"] i.p.v. de vroegere vaste
   ".dgwt-wcas-onderdelen-altrex": de marker-class bevat sinds v1.2 het merk-slug
   (bv. dgwt-wcas-onderdelen-altrex, dgwt-wcas-onderdelen-solide-made-in-belgium, ...),
   dus deze stijl werkt nu automatisch voor elk merk. */

[class*="dgwt-wcas-onderdelen"].dgwt-wcas-search-wrapp {
	/* Kleiner dan de eerdere 460px: samen met de balk (flex; justify-content:
	   space-between) en de flex-shrink:0-fix hierboven paste 460px niet meer op
	   het scherm zodra ook de trigger + het logo hun eigen ruimte innemen — dat
	   gaf een horizontale scrollbar i.p.v. netjes binnen de balk blijven. */
	max-width: 360px;
}

[class*="dgwt-wcas-onderdelen"] .dgwt-wcas-search-input {
	background: #fff;
	border: 0;
	color: var(--am-accent, #1a1a1a);
	font-size: 17px;
	height: 100%;
	padding: 10px 18px;
	width: 100%;
	/* Schakelt de browser-eigen decoraties van <input type="search"> uit (o.a.
	   een systeemkleurig driehoekje/clear-icoontje in sommige browsers) — dat is
	   geen onderdeel van FiboSearch's eigen SVG-iconen (die al zwart staan) en
	   was dus niet via fill te kleuren. */
	-webkit-appearance: none;
	appearance: none;
}

[class*="dgwt-wcas-onderdelen"] .dgwt-wcas-search-input::-webkit-search-decoration,
[class*="dgwt-wcas-onderdelen"] .dgwt-wcas-search-input::-webkit-search-cancel-button,
[class*="dgwt-wcas-onderdelen"] .dgwt-wcas-search-input::-webkit-search-results-button,
[class*="dgwt-wcas-onderdelen"] .dgwt-wcas-search-input::-webkit-search-results-decoration {
	-webkit-appearance: none;
}

[class*="dgwt-wcas-onderdelen"] .dgwt-wcas-search-input::placeholder {
	color: #8a8a8a;
}

[class*="dgwt-wcas-onderdelen"].dgwt-wcas-search-wrapp .dgwt-wcas-search-submit {
	/* FiboSearch's eigen CSS zet specifiek background-color (niet de shorthand
	   background) op #333 — die longhand-property hier expliciet zelf ook
	   overschrijven, matchend op dezelfde property-naam. */
	background: var(--am-accent, #1a1a1a) !important;
	background-color: var(--am-accent, #1a1a1a) !important;
	border-color: var(--am-accent, #1a1a1a) !important;
	color: var(--am-tekst, #fff) !important;
}

/* Het "driehoekje" is geen icoon maar dit ::before-pseudo-element van de
   zoekknop zelf — FiboSearch bouwt het met CSS-borders (border-color:
   transparent #333) als een wijzende pijl-decoratie naast de knop. */
[class*="dgwt-wcas-onderdelen"].dgwt-wcas-search-wrapp .dgwt-wcas-search-submit::before {
	border-color: transparent var(--am-accent, #1a1a1a) !important;
}

/* Deze site gebruikt FiboSearch's "icon-flexible"-layout: het klikbare
   vergrootglas-icoon vóór het invulveld heeft class dgwt-wcas-ico-magnifier-handler
   (met "-handler"), niet het "gewone" dgwt-wcas-ico-magnifier — geverifieerd in de
   server-gerenderde HTML, niet gegokt. Geen inline fill op de svg, dus fill via CSS
   werkt door naar de path erin. Beide selectors erin houden voor het geval het
   layout-type ooit wijzigt. */
[class*="dgwt-wcas-onderdelen"] .dgwt-wcas-ico-magnifier-handler,
[class*="dgwt-wcas-onderdelen"] .dgwt-wcas-ico-magnifier {
	fill: var(--am-accent, #1a1a1a) !important;
}

[class*="dgwt-wcas-onderdelen"] .dgwt-wcas-ico-magnifier-handler path,
[class*="dgwt-wcas-onderdelen"] .dgwt-wcas-ico-magnifier path {
	fill: var(--am-accent, #1a1a1a) !important;
}