/**
 * VVT kopbalk.
 *
 * Alles staat binnen .masthead, zodat de mobiele kopbalk (.dt-mobile-header)
 * zijn eigen gedrag houdt.
 */

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

/*
 * De links stonden vet en in het felle groen, door ".top-bar * { color:
 * #129e6e; font-weight: bold }" in style.css. Dat is een regel op alles
 * binnen de balk, dus hij raakt ook de span in elke link - een selector op
 * enkel de a-tag greep er niet in. Vandaar dat hieronder telkens "a" én
 * "a *" staan.
 *
 * The7 stuurt diezelfde links aan met
 *   .masthead .top-bar .mini-nav > ul:not(.mini-sub-nav) > li > a
 * dus .right-widgets erbij tilt deze regels er net boven.
 */

.masthead .top-bar {
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * De tweede selector met #top-menu is nodig, niet dubbelop: style.css bevat
 * "#top-menu { padding-top: 10px }" en een ID wint van elke klasse. Die 10px
 * duwde de inhoud naar beneden, waardoor de accountpil 11px ruimte had boven
 * en 1px onder - hij plakte tegen de donkere balk. Met de padding op nul en
 * een hoogte van 48px staat hij symmetrisch, met 8px aan beide kanten.
 *
 * De eerste selector blijft staan voor de kloon in #phantom, waar het id niet
 * per se meekomt.
 */
.masthead .top-bar .right-widgets .mini-nav > ul,
.masthead .top-bar .right-widgets .mini-nav > ul#top-menu {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 48px;
	margin: 0;
	padding: 0;
}

.masthead .top-bar .right-widgets .mini-nav > ul:not(.mini-sub-nav) > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.masthead .top-bar .right-widgets .mini-nav > ul:not(.mini-sub-nav) > li > a,
.masthead .top-bar .right-widgets .mini-nav > ul:not(.mini-sub-nav) > li > a * {
	font-size: 12.5px;
	line-height: 18px;
	font-weight: 500;
	letter-spacing: .04em;
	color: #3f6f70;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.masthead .top-bar .right-widgets .mini-nav > ul:not(.mini-sub-nav) > li > a:hover,
.masthead .top-bar .right-widgets .mini-nav > ul:not(.mini-sub-nav) > li > a:hover *,
.masthead .top-bar .right-widgets .mini-nav > ul:not(.mini-sub-nav) > li > a:focus-visible,
.masthead .top-bar .right-widgets .mini-nav > ul:not(.mini-sub-nav) > li > a:focus-visible * {
	color: #129e6e;
}

/* Het account is de enige echte actie in deze balk en krijgt daarom een pil. */
.masthead .top-bar .right-widgets .mini-nav > ul:not(.mini-sub-nav) > li:last-child > a {
	padding: 6px 14px;
	background: rgba(255, 255, 255, .65);
	border: 1px solid rgba(11, 78, 91, .18);
	border-radius: 100px;
}

.masthead .top-bar .right-widgets .mini-nav > ul:not(.mini-sub-nav) > li:last-child > a:hover,
.masthead .top-bar .right-widgets .mini-nav > ul:not(.mini-sub-nav) > li:last-child > a:focus-visible {
	background: #fff;
	border-color: #129e6e;
}

.masthead .top-bar-bg {
	background: #eef5f1;
	box-shadow: inset 0 -1px 0 rgba(11, 78, 91, .08);
}

@media (prefers-reduced-motion: reduce) {
	.masthead .top-bar .right-widgets .mini-nav > ul:not(.mini-sub-nav) > li > a,
	.masthead .top-bar .right-widgets .mini-nav > ul:not(.mini-sub-nav) > li > a * {
		transition: none;
	}
}

/* ---------- dropdowns ---------- */

/*
 * De haarlijn zit in de box-shadow en niet in een border, en dat is geen
 * schoonheidsfoutje: The7 rekent de kolommen van een mega-menu uit op een vaste
 * breedte (mega-column-2 = 2 x 260px in een kaartje van 540px). Een rand van
 * 1px eet 2px van de binnenruimte, en dan past de laatste kolom net niet meer -
 * Mijn VVT viel daardoor terug naar één kolom, Praktijkvoering en Lokaal van
 * vier naar drie. Een shadow-ring van 0 0 0 1px ziet er hetzelfde uit maar
 * neemt geen ruimte in.
 */
.masthead .dt-mega-menu-wrap {
	border-radius: 12px;
	box-shadow:
		0 0 0 1px rgba(11, 78, 91, .07),
		0 18px 38px -14px rgba(11, 78, 91, .30),
		0 2px 6px rgba(11, 78, 91, .07);
}

/*
 * The7 zet de ruimte op de li en dwingt padding:0 op de link af met
 * .main-nav .sub-nav > li.dt-mega-parent:not(.empty-title) > a. Daardoor was
 * het hovervlak 240px breed maar amper 22px hoog - een platte balk waarop een
 * afronding niet eens opvalt. Hieronder verhuist de ruimte naar de link zelf,
 * met selectors die net zwaar genoeg wegen om die twee te overrulen.
 */
.masthead:not(.sub-downwards) .dt-mega-menu .dt-mega-menu-wrap .sub-nav > li.dt-mega-parent {
	padding: 0;
}

.masthead .main-nav .sub-nav > li.dt-mega-parent:not(.empty-title) > a {
	position: relative;
	padding: 11px 14px 11px 18px;
	border-radius: 9px;
	transition: background-color .18s ease, padding-left .18s ease;
}

/* Het accentbalkje links groeit vanuit het midden open. */
.masthead .main-nav .sub-nav > li.dt-mega-parent:not(.empty-title) > a::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 50%;
	width: 3px;
	height: 0;
	border-radius: 99px;
	background: #3d8f6a;
	transform: translateY(-50%);
	transition: height .2s cubic-bezier(.2, .8, .2, 1);
}

.masthead .main-nav .sub-nav > li.dt-mega-parent:not(.empty-title) > a:hover,
.masthead .main-nav .sub-nav > li.dt-mega-parent:not(.empty-title) > a:focus-visible {
	background: rgba(61, 143, 106, .09);
	padding-left: 22px;
}

.masthead .main-nav .sub-nav > li.dt-mega-parent:not(.empty-title) > a:hover::before,
.masthead .main-nav .sub-nav > li.dt-mega-parent:not(.empty-title) > a:focus-visible::before {
	height: 16px;
}

.masthead .dt-mega-menu-wrap .sub-nav > li > a .menu-text {
	font-size: 15px;
	line-height: 20px;
	color: #123c46;
	transition: color .15s ease;
}

.masthead .dt-mega-menu-wrap .sub-nav > li > a:hover .menu-text,
.masthead .dt-mega-menu-wrap .sub-nav > li > a:focus-visible .menu-text {
	color: #0b4e5b;
}

@media (prefers-reduced-motion: reduce) {
	.masthead .main-nav .sub-nav > li.dt-mega-parent:not(.empty-title) > a,
	.masthead .main-nav .sub-nav > li.dt-mega-parent:not(.empty-title) > a::before,
	.masthead .dt-mega-menu-wrap .sub-nav > li > a .menu-text {
		transition: none;
	}

	.masthead .main-nav .sub-nav > li.dt-mega-parent:not(.empty-title) > a:hover {
		padding-left: 18px;
	}
}

/* ---------- onderstreping bij hover ---------- */

/*
 * The7 tekent het streepje als .menu-item-text::before: 2px hoog, rechthoekig,
 * dat vanaf 10px lager omhoog schuift. Hier wordt het 3px, volledig afgerond,
 * en groeit het tegelijk vanuit het midden open. De kleur laat ik met rust, die
 * komt uit de thema-instellingen.
 */
.masthead .main-nav.upwards-line > li > a .menu-item-text::before {
	bottom: -7px;
	height: 3px;
	border-radius: 99px;
	opacity: 0;
	transform: translateY(8px) scaleX(.35);
	transform-origin: center;
	transition:
		opacity .2s ease,
		transform .3s cubic-bezier(.2, .8, .2, 1);
}

/* .dt-hovered zet The7 zelf bij hover, .act staat op de huidige pagina. */
.masthead .main-nav.upwards-line > li.dt-hovered > a .menu-item-text::before,
.masthead .main-nav.upwards-line > li.act > a .menu-item-text::before,
.masthead .main-nav.upwards-line > li > a:focus-visible .menu-item-text::before {
	opacity: 1;
	transform: translateY(0) scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.masthead .main-nav.upwards-line > li > a .menu-item-text::before {
		transform: translateY(0) scaleX(1);
		transition: opacity .15s linear;
	}
}

/* ---------- uitlijning van de zoekwidget ---------- */

/*
 * Twee correcties op de plaatsing, allebei met een reden:
 *
 * marginBottom - The7 geeft het menu zelf "margin: 0 0 17px 120px", waardoor
 *   het 17px hoger staat dan het midden van de balk. De zoekwidget kreeg die
 *   marge niet en stond daardoor 9px lager dan de menu-items. Dezelfde waarde
 *   overnemen zet beide op exact dezelfde hoogte.
 *
 * marginRight - de bovenste balk is 1300px breed, de menubalk 1200px. Zonder
 *   correctie eindigt de zoekpil 50px vóór FAQ / CONTACT / Login erboven.
 *   Wil je de pil liever binnen het raster van de menubalk houden, verwijder
 *   dan enkel deze regel.
 */
/*
 * Twee selectors, want The7 heeft twee kopbalken: de gewone, en een kloon in
 * #phantom die bij het scrollen tevoorschijn komt. Die kloon heeft dezelfde
 * maten maar een andere opbouw - .ph-wrap > .widget-box > .mini-widgets in
 * plaats van .header-bar > .mini-widgets - waardoor deze correctie er eerst
 * niet in greep. Gevolg: bij het scrollen kreeg het menu die 50px niet terug
 * en sprong het alsnog naar twee regels.
 */
.masthead .header-bar > .mini-widgets,
.masthead .ph-wrap .widget-box > .mini-widgets {
	margin-bottom: 17px;
	margin-right: -50px;
}

/* ---------- zoekveld ---------- */

/*
 * De breedte is krap gekozen en dat is met opzet: de kopbalk is 1200px, het
 * menu heeft daar 771px van nodig en de rest gaat naar het logo. Boven de
 * ~135px begint "Lokaal" naar een tweede regel te springen.
 */
.masthead .mini-search.classic-search .searchform {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 132px;
	height: 40px;
	padding: 0 4px 0 14px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 100px;
	transition: background-color .18s ease, border-color .18s ease;
}

.masthead .mini-search.classic-search .searchform:hover {
	background: rgba(255, 255, 255, .16);
}

.masthead .mini-search.classic-search .searchform:focus-within {
	background: rgba(255, 255, 255, .20);
	border-color: rgba(255, 255, 255, .55);
}

.masthead .mini-search.classic-search input.field,
.masthead .mini-search.classic-search input[type="text"].field {
	flex: 1 1 auto;
	min-width: 0;
	height: 38px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #fff;
	font-size: 14px;
	line-height: 38px;
}

.masthead .mini-search.classic-search input.field:focus {
	outline: none;
	box-shadow: none;
}

.masthead .mini-search.classic-search input.field::placeholder {
	color: rgba(255, 255, 255, .62);
	opacity: 1;
}

.masthead .mini-search.classic-search .search-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #fff;
	opacity: .85;
	transition: background-color .15s ease, opacity .15s ease;
}

.masthead .mini-search.classic-search .search-icon:hover,
.masthead .mini-search.classic-search .search-icon:focus-visible {
	background: rgba(255, 255, 255, .18);
	opacity: 1;
}

.masthead .mini-search.classic-search .search-icon i {
	font-size: 15px;
}

/*
 * Tussen ongeveer 1070 en 1150px wordt het lastig: de kopbalk is dan smaller
 * dan zijn maximum van 1200px, maar The7 toont nog altijd het volledige menu -
 * de mobiele kop neemt het pas onder ~1070px over. In die band kwam het menu
 * 20 tot 40px tekort en sprong "Lokaal" naar een tweede regel.
 *
 * Opgelost door in die band twee dingen in te korten: de tussenruimte van de
 * menu-items van 14 naar 10px, en het zoekveld nog wat verder. Nagemeten op
 * 1400, 1200, 1150 en 1100px: overal één regel.
 */
@media (max-width: 1250px) {
	.masthead .mini-search.classic-search .searchform {
		width: 112px;
		padding-left: 12px;
	}

	.masthead .main-nav > li > a {
		margin-left: 10px;
		margin-right: 10px;
	}
}

@media (max-width: 1100px) {
	.masthead .mini-search.classic-search .searchform {
		width: 92px;
	}
}