/* =========================================================================
   Onlinekleding — Header redesign (losse override-stylesheet)
   Laadt NÁ dist/styles/app.css (zie STYLESHEETS in functions.php).
   Raakt app.css / de SCSS-bron NIET aan. Alleen .header wordt gestyled.
   Kleuren: navy = #1A1A43 ($color-primary)
   Breakpoint desktop = min-width 992px (thema-tablet = 991px)
   Versie: 2.0.3  — v2.0.3: dropdown-pijltjes verborgen op desktop (ontwerptrouw)
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Layout: USP-balk bovenaan, daaronder de logo/menu/zoek-rij
   ------------------------------------------------------------------------- */
.header {
	display: flex;
	flex-direction: column;
}
.header .usp          { order: 0; }  /* USP-balk bovenaan */
.header__main         { order: 1; }
.header .header__card { order: 2; }

/* -------------------------------------------------------------------------
   2. USP-balk: navy, full-bleed en op desktop netjes verdeeld (space-between)
   ------------------------------------------------------------------------- */
.header .usp {
	position: relative;
	background-color: transparent;
	z-index: 0;
}
.header .usp::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 100vw;
	height: 100%;
	transform: translateX(-50%);
	background-color: #1A1A43;
	z-index: -1;
}
.header .usp__list { justify-content: center; }
.header .usp__item { color: #ffffff; }
.header .usp__item::after { color: #ffffff; font-weight: 300; }
@media (min-width: 992px) {
	.header .usp__list { justify-content: space-between; }
	.header .usp__item { margin-left: 0; }
}

/* -------------------------------------------------------------------------
   3. Onderste rij: logo LINKS, menu ernaast, zoekbalk + icons RECHTS (1 regel)
   Fix t.o.v. v1: geen auto-centrering meer (die liet de zoekbalk wrappen).
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.header__main {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
	.header__menu   { margin-left: 44px; }          /* kleine ruimte na het logo */
	.header__search { margin-left: auto; margin-right: 26px; } /* duwt zoek+icons naar rechts */
	.header__menu-nav > ul > li { margin-right: 40px; }        /* iets strakkere menu-spacing */
}

/* Actief menu-item (bijv. Home) krijgt een kort onderstreepje */
@media (min-width: 992px) {
	.header__menu-nav > ul > li.current-menu-item > a,
	.header__menu-nav > ul > li.current_page_item > a,
	.header__menu-nav > ul > li.current-menu-ancestor > a {
		box-shadow: 0 3px 0 0 #1A1A43;
		padding-bottom: 4px;
	}
}

/* -------------------------------------------------------------------------
   4. Logo (nieuw horizontaal logo, 1128x300) — passend maken in de balk
   ------------------------------------------------------------------------- */
.header__logo { width: auto; }
.header__logo img {
	height: 46px;
	width: auto;
	max-width: none;
}
@media (max-width: 991px) {
	.header__logo img { height: 34px; }
}

/* -------------------------------------------------------------------------
   5. Zoekbalk (FiboSearch / dgwt-wcas): afgeronde "pill" met icoon links
   ------------------------------------------------------------------------- */
.header__search .dgwt-wcas-search-wrapp { width: 100%; }
.header__search .dgwt-wcas-sf-wrapp { position: relative; }
.header__search .dgwt-wcas-search-input {
	height: 46px !important;
	border: 1px solid transparent !important;
	border-radius: 100px !important;
	background-color: #f3f3f5 !important;
	padding: 0 20px 0 46px !important;
	font-size: 14px !important;
	color: #1A1A43 !important;
	box-shadow: none !important;
}
@media (min-width: 992px)  { .header__search .dgwt-wcas-search-input { width: 320px !important; } }
@media (min-width: 1200px) { .header__search .dgwt-wcas-search-input { width: 360px !important; } }
@media (max-width: 991px)  { .header__search .dgwt-wcas-search-input { width: 100%  !important; } }
.header__search .dgwt-wcas-search-input:focus {
	border-color: #1A1A43 !important;
	background-color: #ffffff !important;
	outline: none !important;
}
.header__search .dgwt-wcas-ico-magnifier {
	position: absolute;
	left: 18px;
	right: auto;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 15px;
	margin: 0;
}
.header__search .dgwt-wcas-ico-magnifier path { fill: #9a9aa5; }

/* -------------------------------------------------------------------------
   6. Icons rechts: kaal hart (zonder tellertje) + account, in navy
   ------------------------------------------------------------------------- */
.header__info-link { color: #1A1A43; font-size: 26px; }
.header__info-link--star { color: #1A1A43; font-size: 26px; }
.header__info-link--star .fa-star::before,
.header__info-link--star i::before { content: "\f004"; } /* hart (outline via .fal) */
.header__info-link--star span { display: none; }         /* verwijder "0"-tellertje */

/* -------------------------------------------------------------------------
   7. NIEUW-badge bij een menu-item (CSS-class "new-badge", wp-admin-beheerd)
   ------------------------------------------------------------------------- */
.header__menu-nav li.new-badge > a { position: relative; }
.header__menu-nav li.new-badge > a::before {
	content: "NIEUW";
	order: 5;
	margin-left: 8px;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #ffffff;
	background-color: #1A1A43;
	border-radius: 100px;
	white-space: nowrap;
}
@media (min-width: 992px) {
	.header__menu-nav > ul > li.new-badge > a::after { display: none; }
	/* Ontwerptrouw: dropdown-pijltjes op desktop verbergen (mobiel blijven ze) */
	.header__menu-nav > ul > li.menu-item-has-children > a::after { display: none; }
}

/* -------------------------------------------------------------------------
   8. Dames mega-menu: bredere kolommen zodat het (met momenteel 2 kolommen)
   niet halfleeg oogt. Scoped op het Dames-item (class new-badge).
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.header__menu-nav > ul > li.new-badge.mega-menu > .sub-menu > li { width: 30%; }
}

/* -------------------------------------------------------------------------
   9. FIX uitlijning: het mega-menu-paneel moet ONDER de hele header vallen.
   Origineel: top: calc(100% - 45px) t.o.v. .header — afgestemd op de oude
   volgorde (USP onder de rij). Nu de USP-balk (35px) bovenaan staat, is de
   hoofdrij 35px gezakt en overlapte het paneel de balk. We laten het paneel
   nu net onder de hoofdrij beginnen (USP 35px + hoofdrij 85px = 120px).
   De bestaande ::before-brug (20px) houdt de hover intact.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.header .mega-menu > .sub-menu { top: 120px; }
}

/* -------------------------------------------------------------------------
   10. Per-item mega-menu card (.mega-card-slot) — zelfde look als de
   bestaande promo-card. Breedte als kolom in het mega-menu.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.header .mega-menu > .sub-menu > li.mega-card-slot { width: 28%; }
}
.header .mega-menu .mega-card { width: 100%; }