/* meesterbaan.org - portaalstijl
   Eigen aanvullingen op huisstijl.css (de uitgedunde site.css van
   meesterbaan.nl). Gedeeld door de vacaturepagina en /voorbereiden/.
-------------------------------------------------------------- */

html, body{
	overflow-x: hidden;
}

body{
	background-color: #ffffff;
}

/* Minimaal 16px in invoervelden, anders zoomt iOS Safari in zodra iemand
   een veld aantikt en lijkt de pagina breder dan het scherm. Vaste px en
   geen rem: site.css zet de basisgrootte op 14,5px, dus 1rem is hier te
   klein. Geldt op alle schermen, want ook iPads zoomen in. */
input.form-control,
select.form-select{
	font-size: 16px;
}

.vacature-item{
	min-width: 0;
}

.vacature-card-title,
.vacature-card-location{
	overflow-wrap: anywhere;
}

:root {
	--mb-creme: #fbf7f4;
	--mb-creme-rand: #ece5df;
	--mb-dark: #343433;
	--mb-grijs: #6b6966;
	--mb-blauw: #0063CC;
	--mb-blauw-donker: #004c9e;
	--mb-lichtblauw: #e9f1fe;
}

.bg-creme-40{
	background-color: var(--mb-creme);
}

h1{
	color: var(--mb-dark);
}

/* Knoppen: MeesterBaan-blauw, pilvorm
-------------------------------------------------------------- */

.mbo-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .625rem 1.375rem;
	border: 2px solid var(--mb-blauw);
	border-radius: 999px;
	background-color: var(--mb-blauw);
	color: #ffffff;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mbo-btn:hover{
	background-color: var(--mb-blauw-donker);
	border-color: var(--mb-blauw-donker);
	color: #ffffff;
}

.mbo-btn:focus-visible,
.mbo-eiland:focus-visible,
.mbo-header a:focus-visible,
.mbo-footer a:focus-visible{
	outline: 3px solid var(--mb-blauw);
	outline-offset: 3px;
}

.mbo-btn-licht{
	background-color: transparent;
	color: var(--mb-blauw);
}

.mbo-btn-licht:hover{
	background-color: var(--mb-blauw);
	color: #ffffff;
}

.mbo-btn svg{
	flex-shrink: 0;
}

/* Header
-------------------------------------------------------------- */

.mbo-header{
	background-color: #ffffff;
	border-bottom: 1px solid var(--mb-creme-rand);
	/* site.css zet header{max-height:70px!important}; het uitgeklapte
	   mobiele menu moet de header langer kunnen maken */
	max-height: none !important;
}

.mbo-header-inner{
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-height: 72px;
}

.mbo-logo{
	display: flex;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
	flex-shrink: 0;
}

/* Geen onderstreping of kleurwissel op logo en "sinds 1999" bij hover */
.mbo-logo:hover,
.mbo-logo:hover .mbo-sinds{
	text-decoration: none;
	color: var(--mb-dark);
}

.mbo-logo img{
	height: 32px;
	width: auto;
	display: block;
}

.mbo-sinds{
	font-size: .75rem;
	font-weight: 600;
	color: var(--mb-dark);
}

/* Menuknop voor mobiel, zoals op meesterbaan.nl: drie blauwe streepjes
   met het woord Menu eronder. Op grotere schermen verborgen. */
.mbo-menuknop{
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	padding: .25rem .25rem .25rem 0;
	border: 0;
	background: transparent;
	color: var(--mb-grijs);
	font: inherit;
	font-size: .6875rem;
	line-height: 1;
	cursor: pointer;
}

.mbo-balkjes{
	display: flex;
	flex-direction: column;
	gap: 4.5px;
	width: 22px;
}

.mbo-balkjes span{
	display: block;
	height: 2px;
	border-radius: 2px;
	background-color: var(--mb-blauw);
	transition: transform .2s ease, opacity .2s ease;
}

/* Open: de streepjes worden een kruis */
.mbo-menuknop[aria-expanded="true"] .mbo-balkjes span:nth-child(1){
	transform: translateY(6.5px) rotate(45deg);
}

.mbo-menuknop[aria-expanded="true"] .mbo-balkjes span:nth-child(2){
	opacity: 0;
}

.mbo-menuknop[aria-expanded="true"] .mbo-balkjes span:nth-child(3){
	transform: translateY(-6.5px) rotate(-45deg);
}

.mbo-menuknop:focus-visible{
	outline: 3px solid var(--mb-blauw);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Hoofdmenu, opgemaakt als het menu van meesterbaan.nl */
.mbo-menu{
	flex: 1;
	display: flex;
	justify-content: center;
	gap: .875rem;
}

/* Desktop: logo links, menu exact in het midden van de header. De lege
   derde kolom houdt het menu in balans nu er rechts geen knop meer staat. */
@media only screen and (min-width: 769px) {
	.mbo-header-inner{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
	}

	.mbo-logo{
		justify-self: start;
	}
}

.mbo-menu-link{
	padding: 0 .75rem;
	border-radius: 48px;
	font-size: 1.05rem;
	line-height: 32px;
	color: #1b202a;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.mbo-menu-link:hover{
	color: var(--mb-blauw);
}

.mbo-menu-link.actief{
	background-color: var(--mb-lichtblauw);
	color: var(--mb-blauw);
}

.mbo-menu-link:focus-visible{
	outline: 3px solid var(--mb-blauw);
	outline-offset: 2px;
}

/* Hero
-------------------------------------------------------------- */

.mbo-hero{
	padding: 2.5rem 0 3rem 0;
}

.mbo-hero h1{
	margin: 0 0 1rem 0;
}

.mbo-intro{
	max-width: 40rem;
	margin-bottom: 1.75rem;
	line-height: 1.65;
	color: var(--mb-dark);
}

.mbo-zoek{
	background-color: #ffffff;
	border: 1px solid var(--mb-creme-rand);
	border-radius: 24px;
	padding: 1rem;
}

.mbo-zoek .form-control{
	border-radius: 999px;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.mbo-zoek .btn-search{
	min-height: 100%;
}

.mbo-filters{
	margin-top: .75rem;
}

/* Eilandenpaneel
-------------------------------------------------------------- */

.mbo-eilanden{
	background-color: #ffffff;
	border: 1px solid var(--mb-creme-rand);
	border-radius: 24px;
	padding: 1.5rem;
}

.mbo-paneel-titel{
	margin: 0 0 .25rem 0;
	font-weight: 600;
	color: var(--mb-dark);
}

.mbo-paneel-uitleg{
	margin: 0 0 1rem 0;
	font-size: .875rem;
	color: var(--mb-grijs);
}

.mbo-kaart{
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 1rem;
	border-radius: 16px;
	background-color: var(--mb-lichtblauw);
}

.mbo-kaart .stip{
	fill: #ffffff;
	stroke: var(--mb-blauw);
	stroke-width: 2;
	transition: fill .15s ease;
}

.mbo-kaart .stip.heeft-vacatures{
	fill: var(--mb-blauw);
}

.mbo-kaart .stip.actief{
	fill: var(--mb-dark);
	stroke: var(--mb-dark);
}

.mbo-kaart text{
	font-family: 'Hanken Grotesk', sans-serif;
	font-size: 11px;
	fill: var(--mb-dark);
}

.mbo-kaart .afstand{
	font-size: 10px;
	fill: var(--mb-grijs);
}

.mbo-groep{
	margin: 0 0 .375rem 0;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mb-grijs);
}

.mbo-eilandlijst{
	list-style: none;
	margin: 0 0 1rem 0;
	padding: 0;
}

.mbo-eilandlijst:last-child{
	margin-bottom: 0;
}

.mbo-eiland{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .375rem .75rem;
	margin: 0 -.75rem;
	width: calc(100% + 1.5rem);
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--mb-dark);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color .15s ease;
}

.mbo-eiland:hover{
	background-color: var(--mb-creme);
}

.mbo-eiland[aria-pressed="true"]{
	background-color: var(--mb-lichtblauw);
}

.mbo-eiland[aria-pressed="true"] .mbo-eiland-naam{
	color: var(--mb-blauw);
}

.mbo-eiland:disabled{
	cursor: default;
	background: transparent;
	color: var(--mb-grijs);
}

.mbo-eiland-naam{
	font-weight: 600;
}

.mbo-eiland-aantal{
	font-size: .875rem;
	color: var(--mb-grijs);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Zijkolom naast vacatures en tekst
-------------------------------------------------------------- */

.mbo-zijkolom{
	position: sticky;
	top: 1.5rem;
	margin-top: 3rem;
}

.mbo-melding,
.mbo-zijblok{
	padding: 1.5rem;
	border-radius: 24px;
	line-height: 1.55;
	color: var(--mb-dark);
}

.mbo-melding{
	background-color: var(--mb-lichtblauw);
	margin-bottom: 1rem;
}

.mbo-zijblok{
	background-color: #ffffff;
	border: 1px solid var(--mb-creme-rand);
}

.mbo-melding-kop{
	margin: 0 0 .5rem 0;
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--mb-dark);
}

.mbo-melding p,
.mbo-zijblok p{
	margin: 0 0 1rem 0;
}

.mbo-zijblok ol{
	margin: 0 0 1rem 0;
	padding-left: 1.25rem;
}

.mbo-zijlink{
	font-weight: 600;
	color: var(--mb-blauw);
	text-decoration: none;
}

.mbo-zijlink:hover{
	text-decoration: underline;
}

.mbo-zijlink::after{
	content: " \2192";
}

.mbo-zijlink:focus-visible,
.mbo-eilandlinks a:focus-visible,
.mbo-direct a:focus-visible{
	outline: 3px solid var(--mb-blauw);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Zijkolom naast de tekst begint op de hoogte van de eerste kop */
.mbo-tekst-zij{
	margin-top: 2.5rem;
}

/* Eilandlinks in de zijkolom van de homepage */
.mbo-eilandlinks{
	list-style: none;
	padding: 0;
}

.mbo-eilandlinks li{
	padding: .5rem 0;
	border-top: 1px solid var(--mb-creme-rand);
}

.mbo-eilandlinks a{
	color: var(--mb-dark);
	font-weight: 600;
	text-decoration: none;
}

.mbo-eilandlinks a:hover{
	color: var(--mb-blauw);
	text-decoration: underline;
}

/* "Direct naar" op de pagina Voorbereiden */
.mbo-direct ol{
	list-style: none;
	margin: .75rem 0 0 0;
	padding: 0;
}

.mbo-direct li{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .625rem 0;
	border-top: 1px solid var(--mb-creme-rand);
}

.mbo-direct a{
	color: var(--mb-dark);
	font-weight: 600;
	text-decoration: none;
}

.mbo-direct a:hover{
	color: var(--mb-blauw);
	text-decoration: underline;
}

.mbo-direct span{
	font-size: .8125rem;
	color: var(--mb-grijs);
	text-align: right;
}

/* Pagina Voorbereiden: koppen per eiland binnen de blokken */
.mbo-voorbereiden .mbo-gids-blok h2{
	margin-top: 0;
}

.mbo-voorbereiden #alle-eilanden{
	margin-top: 2.5rem;
}

html{
	scroll-behavior: smooth;
}

[id]{
	scroll-margin-top: 1.5rem;
}

/* SEO content
-------------------------------------------------------------- */

.seo-content{
	padding: 2rem 0 3rem 0;
	color: var(--mb-dark);
	line-height: 1.65;
}

.seo-content h2{
	font-size: 1.15rem;
	font-weight: 600;
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.seo-content h3{
	font-size: 1.15rem;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 1rem;
}

.seo-content h4{
	font-size: .938rem;
	font-weight: 600;
	margin: 0 0 0.5rem 0;
}

.seo-card{
	background-color: #ffffff;
	border: 1px solid #e4e4e4;
	border-radius: 24px;
	padding: 1.5rem 2rem;
	margin: 2.5rem 0;
}

.seo-card h2{
	margin-top: 0;
}

.seo-card p{
	margin-bottom: 0;
}

.seo-faq{
	background-color: var(--mb-creme);
	border-radius: 24px;
	padding: 1.5rem 2rem;
	margin-top: 2.5rem;
}

.seo-faq-item{
	margin-bottom: 1.5rem;
}

.seo-faq-item:last-child{
	margin-bottom: 0;
}

/* FAQ-vraag als H3 (op Voorbereiden, onder een H2) oogt als de H4-vragen */
.seo-content .seo-faq-item h3{
	font-size: .938rem;
	font-weight: 600;
	margin: 0 0 .5rem 0;
}

.mbo-stand{
	margin: 0 0 2.5rem 0;
	font-size: .875rem;
	color: var(--mb-grijs);
}

.seo-faq-item p{
	margin-bottom: 0;
}

/* Voorbereiden: blokken per eiland
-------------------------------------------------------------- */

.mbo-gids{
	display: grid;
	gap: 1rem;
	margin: 1.5rem 0 2.5rem 0;
}

/* Witte kaart met dunne rand, zoals de vacaturekaarten, met het soort
   eiland als blauwe tag boven de kop */
.mbo-gids-blok{
	background-color: #ffffff;
	border: 1px solid #e4e4e4;
	border-radius: 24px;
	padding: 1.5rem 2rem;
}

.mbo-gids-tag{
	display: inline-block;
	margin-bottom: .75rem;
	text-transform: uppercase;
}

.mbo-gids ol,
.mbo-checklist{
	margin: 0;
	padding-left: 1.25rem;
}

.mbo-gids li,
.mbo-checklist li{
	margin-bottom: .75rem;
}

.mbo-gids li:last-child,
.mbo-checklist li:last-child{
	margin-bottom: 0;
}

.mbo-checklist{
	margin-bottom: 1.5rem;
}

.mbo-gids-blok{
	min-width: 0;
}

.mbo-bron{
	font-size: .8125rem;
	overflow-wrap: anywhere;
}

/* Footer
-------------------------------------------------------------- */

.mbo-footer{
	background-color: var(--mb-creme);
	padding: 3rem 0 0 0;
	color: var(--mb-dark);
	font-size: .9375rem;
}

.mbo-footer img{
	height: 32px;
	width: auto;
}

.mbo-tagline{
	margin: 1rem 0 .75rem 0;
	font-weight: 700;
}

.mbo-footer-tekst{
	max-width: 22rem;
	color: var(--mb-grijs);
	line-height: 1.6;
}

.mbo-footer-kop{
	margin: 0 0 .875rem 0;
	font-weight: 700;
}

.mbo-footer ul{
	list-style: none;
	margin: 0 0 2rem 0;
	padding: 0;
}

.mbo-footer li{
	margin-bottom: .625rem;
}

.mbo-footer a{
	color: var(--mb-dark);
	text-decoration: none;
}

.mbo-footer a:hover{
	color: var(--mb-blauw);
	text-decoration: underline;
}

.mbo-footer-onder{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 2rem;
	margin-top: 1rem;
	padding: 1.25rem 0 1.5rem 0;
	border-top: 1px solid var(--mb-creme-rand);
	font-size: .8125rem;
	color: var(--mb-grijs);
}

.mbo-footer-onder p{
	margin: 0;
}

.mbo-footer-onder nav{
	display: flex;
	gap: 1.25rem;
}

.mbo-footer-onder a{
	color: var(--mb-grijs);
}

/* Mobiel
-------------------------------------------------------------- */

/* Vanaf tablet: eilandgroepen naast elkaar, zodat het paneel laag blijft */
@media only screen and (min-width: 576px) {
	.mbo-groepen{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}

	.mbo-groepen .mbo-eilandlijst{
		margin-bottom: 0;
	}
}

@media only screen and (max-width: 991px) {
	.mbo-eilanden{
		margin-top: 1.5rem;
	}

	/* Zijkolom loopt niet mee en staat onder de vacatures */
	.mbo-zijkolom{
		position: static;
		margin-top: 0;
		margin-bottom: 2rem;
	}
}

@media only screen and (max-width: 768px) {
	h1{
		font-size: 1.75rem;
	}

	/* Zijmarge van 16px. site.css zet de basisgrootte op 14px, waardoor de
	   standaardmarge van de container op 11px uitkomt en tekst op een
	   telefoon met ronde hoeken tegen de rand lijkt te lopen. */
	.container{
		padding-left: 16px;
		padding-right: 16px;
	}

	/* Mobiele header zoals op meesterbaan.nl: menuknop links, logo in het
	   midden, knop rechts; het menu klapt eronder uit */
	.mbo-header-inner{
		min-height: 64px;
		gap: .75rem;
		flex-wrap: wrap;
		row-gap: 0;
	}

	.mbo-menuknop{
		display: flex;
	}

	.mbo-header-inner{
		position: relative;
	}

	/* Logo exact in het midden van de bovenste rij, los van de breedte
	   van de knoppen links en rechts */
	.mbo-logo{
		position: absolute;
		top: 0;
		left: 50%;
		height: 64px;
		transform: translateX(-50%);
	}

	/* Bovenste rij altijd 64px hoog, zodat het menu eronder begint */
	.mbo-menuknop{
		height: 64px;
		justify-content: center;
	}

	.mbo-logo img{
		height: 26px;
	}

	.mbo-menu{
		order: 3;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: .25rem;
		margin: 0 -.75rem;
		padding: .5rem 0 1rem 0;
		border-top: 1px solid var(--mb-creme-rand);
	}

	/* Met JavaScript dicht tot iemand op Menu tikt; zonder JavaScript open */
	.js .mbo-menu{
		display: none;
	}

	.js .mbo-header.menu-open .mbo-menu{
		display: flex;
	}

	.mbo-menu-link{
		padding: .625rem .75rem;
		line-height: 1.4;
		border-radius: 12px;
	}

	.mbo-hero{
		padding: 1.5rem 0 2rem 0;
	}

	.mbo-zoek,
	.mbo-eilanden{
		padding: 1rem;
		border-radius: 16px;
	}

	.mbo-melding,
	.mbo-zijblok{
		padding: 1.25rem;
		border-radius: 16px;
	}

	.seo-content{
		padding: 1rem 0 2rem 0;
	}

	.seo-card,
	.seo-faq,
	.mbo-gids-blok{
		padding: 1.25rem;
		border-radius: 16px;
	}

	.seo-content h2{
		margin-top: 2rem;
	}

	/* Filters onder elkaar op smalle schermen */
	.form-select{
		width: 100% !important;
	}


	/* Paginering compacter zodat hij op een regel past */
	.pagination .page-link{
		padding: .375rem .6rem;
		font-size: .875rem;
	}
}

/* Telefoon: kaart weg, zodat de vacatures sneller in beeld komen */
@media only screen and (max-width: 575px) {
	.mbo-kaart{
		display: none;
	}
}

@media only screen and (max-width: 400px) {
	.mbo-sinds{
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html{
		scroll-behavior: auto;
	}

	.mbo-btn,
	.mbo-menu-link,
	.mbo-balkjes span,
	.mbo-eiland,
	.mbo-kaart .stip{
		transition: none;
	}
}