/*
 * Zorgloket aanvraagbanner
 *
 * Plaats dit bestand in:
 * /wp-content/themes/oddworks-child/assets/css/zorg-archive-banner.css
 *
 * De bestaande .site-main, .site-sidebar en .archive-wrapper layouts
 * worden NIET overschreven.
 */

.zorgloket-aanvraagbanner {
	grid-column: 1 / -1;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.zorgloket-aanvraagbanner__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	width: 100%;
	box-sizing: border-box;
	padding: 26px 30px;
	background: #e6f0f7;
	border-radius: 8px;
	border: 1px solid #8bc34a;
}

.zorgloket-aanvraagbanner__text {
	flex: 1 1 auto;
	min-width: 0;
}

.zorgloket-aanvraagbanner__label {
	margin: 0 0 5px;
	color: #94c35a;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.zorgloket-aanvraagbanner h2 {
	margin: 0 0 7px;
	padding: 0;
	min-height: 0;
	color: #245066;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.25;
}

.zorgloket-aanvraagbanner p {
	max-width: 680px;
	margin: 0;
	padding: 0;
	color: #245066;
	font-size: 16px;
	line-height: 1.55;
}

.zorgloket-aanvraagbanner__button-wrap {
	flex: 0 0 auto;
}

.zorgloket-aanvraagbanner__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0;
	padding: 13px 21px;
	background: #94c35a;
	border-radius: 6px;
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
	white-space: nowrap;
	transition: opacity .2s ease, transform .2s ease;
}

.zorgloket-aanvraagbanner__button:hover,
.zorgloket-aanvraagbanner__button:focus {
	color: #fff !important;
	opacity: .9;
	transform: translateY(-1px);
	text-decoration: none !important;
}

.zorgloket-aanvraagbanner__button span {
	font-size: 20px;
	line-height: 1;
}

/*
 * Mobiel:
 * child.css zet .archive-wrapper al onder elkaar.
 * Wij hoeven daarom alleen de banner zelf compact te maken.
 */
@media (max-width: 767px) {

	.zorgloket-aanvraagbanner__content {
		display: block;
		padding: 21px 20px;
	}

	.zorgloket-aanvraagbanner__label {
		font-size: 18px;
	}

	.zorgloket-aanvraagbanner h2 {
		font-size: 1.25rem;
	}

	.zorgloket-aanvraagbanner p {
		font-size: 15px;
	}

	.zorgloket-aanvraagbanner__button-wrap {
		margin-top: 17px;
	}

	.zorgloket-aanvraagbanner__button {
		width: 100%;
		box-sizing: border-box;
	}
}