/*
	Eigen css bestand om inmenging met de "newdesign" files te voorkomen
*/

.header {
    position: relative;
    z-index: 9999;
}

.modal__wrapper {
    z-index: 99999 !important;
}

.method h2 {
    margin-top: 20px;
}

.block__map {
	/* Er zat geen hoogte in het design dus het werd 0px hoog........ */
	height: 200px;
	width: 100%;
}

.lawyers__item-footer {
	justify-content: space-between;
}

/* 2025oktMH: kwam er nog later bij. Qua visual nog inner__header-text class maar met wat aanpassingen...*/
.inner__header-text.page_title_below_breadcrumb {
	font-size: 20px;
	margin-left: 0;
	margin-bottom: 16px;
}
@media screen and (width <= 768px) {
	.inner__header-text.page_title_below_breadcrumb {
		font-size: 16px;
	}
}

.inner__header-text {
	font-size: 16px;
}
@media screen and (width <= 768px) {
	.inner__header-text {
		font-size: 12px;
	}
}

.breadcrumbs__list-item {
	cursor: pointer;
}

/* 2025novMH: moest toch geopend gestart worden */
.filters__group {
}
@media screen and (width <= 992px) {
  .filters__group {
	display: flex;
	flex-direction: column;
	gap: 30px;
	/*display: flex !important;*/
	/*flex-direction: column !important;*/
	/*gap: 30px !important;*/
  }
}

#info__text_meer {
	display: none;
}
#lees_meer_knop {
	cursor: pointer;
}

.info {
	align-items: flex-start !important; /* 2025novMH: aangezien de tekst nu kan uitklappen is het mooier als de afbeelding dan (verticaal uitgelijnd) op z'n plek blijft staan... */
}

#info__text_meer > h3 {
	font-weight: 800;
	margin-top: 3rem;
	margin-bottom: 1.4rem;
}


#info__text_meer > p {
	margin-top: 2rem;
}

#info__text_meer > ul {
	list-style: circle;
}

#info__text_meer > ul > li {
	margin-left: 2rem;
	margin-top: 1.4rem;
}


#tekst-homepage {
	display: none;
}
#tekst-advocatenpagina {
	display: none;
}

.accordion__content-text > ul {
	padding-bottom:45px;
}
.accordion__content-text > ul > li {
	margin-left: 2rem;
	list-style: circle;
}
.faq .accordion__content-text > p {
  font-size: 26px;
  font-style: normal;
  font-weight: 500;
  line-height: 123%;
  padding-bottom: 45px;
  color: var(--color-blue-200);
}
.faq .accordion__content-text.small-text > p {
  font-size: 22px;
}
@media screen and (width <= 992px) {
  .faq .accordion__content-text.small-text > p {
    font-size: 18px;
  }
}
@media screen and (width <= 480px) {
  .faq .accordion__content-text.small-text > p {
    font-size: 13px;
  }
}
@media screen and (width <= 1440px) {
  .faq .accordion__content-text > p {
    padding-bottom: 35px;
    font-size: 22px;
  }
}
@media screen and (width <= 992px) {
  .faq .accordion__content-text > p {
    font-size: 18px;
    padding-bottom: 20px;
  }
}
@media screen and (width <= 480px) {
  .faq .accordion__content-text > p {
    font-size: 13px;
    padding-bottom: 15px;
  }
}


p {
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.section__subtitle-faq p:not(:last-child) {
	padding-bottom: 45px;	
}

.section__subtitle-faq ul {
	padding-bottom:45px;
}
.section__subtitle-faq > ul > li {
	margin-left: 2rem;
	list-style: circle;
}

.vacancies__item-badge:hover {
	color: var(--color-orange);
	cursor: pointer;
}

.vacancies__item-footer {
	flex-direction: column;
	padding-top: 30px;
	padding-bottom: 30px;
	align-items: normal;
}

.vacancies__item-footer--titel {
	font-weight: bold;
	color: var(--color-blue-200);
}

.vacancies__position:hover {
	color: initial;
}

.vacature__container {
	width: 100%;
}

.news__image {
	max-width: 500px;
}

.news__container {
	width: 100%;
}

/* 2026janMH: even bootstrap achtige css voor error berichtje kunnen weergeven */
.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}
.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}
.alert-danger .alert-link {
  color: #6a1a21;
}

.mobile__menu .accordion .accordion__item {
	/*margin-bottom: 1.6rem;*/ /*TODO MH: opruimen? */
}

/* 2026meiMH: zindex gaat niet goed... Header logo heeft 20, header tekst heeft 10, breadcrumbs 1. */
/*.filters.filters-drawer.active {*/
/*	z-index: 100;*/
/*}*/
.section.section__inner {
	z-index: 21; 
}

/*
	2026meiMH: heb een kleinere custom spacer nodig voor tekst in kaartjes...
	In main is de css class "space-y-10" een gap van 40px... Dus nu met 10px
	gedeeld door 4 is 2,5. Ik rond hem af naar: "space-y-3". 
*/
.space-y-3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.space-y-5 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}