/**
 * EC Promobalk
 * Locatie: wp-content/mu-plugins/ec/promo-balk/ec-promo-balk.css
 *
 * Subtiel en compact: 0.875rem, zachte groene verloop, witte tekst.
 * Kleuren staan als component-variabelen op .ec-promo (niet op :root),
 * zodat ze op één plek te wisselen zijn.
 *
 * Bewust zonder CSS nesting: iOS Safari onder 17.2 negeert geneste regels volledig.
 * @starting-style en text-wrap zijn progressief en breken niets in oudere browsers.
 */

.ec-promo {
	--ec-promo-bg-start: #859794;
	--ec-promo-bg-end: #7a918d;
	--ec-promo-text: #ffffff;

	display: grid;
	grid-template-rows: 1fr;
	background-color: var(--ec-promo-bg-end);
	background-image: linear-gradient(90deg, var(--ec-promo-bg-start), var(--ec-promo-bg-end));
	color: var(--ec-promo-text);
	opacity: 1;
	transition:
		grid-template-rows 0.28s ease,
		opacity 0.2s ease;
}

.ec-promo[hidden] {
	display: none;
}

.ec-promo.is-closing {
	grid-template-rows: 0fr;
	opacity: 0;
}

@starting-style {
	.ec-promo {
		opacity: 0;
	}
}

.ec-promo__clip {
	min-block-size: 0;
	overflow: hidden;
}

.ec-promo__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	max-inline-size: 1200px;
	min-block-size: 2.5rem;
	margin-inline: auto;
	padding-block: 0.375rem;
	padding-inline: 1rem 2.75rem;
	font-size: 0.875rem;
	line-height: 1.4;
	letter-spacing: 0.01em;
	text-align: center;
}

.ec-promo__text {
	margin: 0;
	font-size: inherit;
	text-wrap: balance;
}

.ec-promo__title {
	font-weight: 600;
	margin-inline-end: 0.4em;
}

.ec-promo__message {
	font-weight: 400;
	opacity: 0.92;
}

.ec-promo__close {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0.25rem;
	margin-block: auto;
	display: inline-grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	opacity: 0.8;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		opacity 0.15s ease;
}

.ec-promo__close:hover {
	background-color: rgb(255 255 255 / 0.15);
	color: inherit;
	opacity: 1;
}

.ec-promo__close:focus-visible {
	outline: 2px solid var(--ec-promo-text);
	outline-offset: 2px;
	opacity: 1;
}

.ec-promo__close-icon {
	display: block;
	inline-size: 16px;
	block-size: 16px;
}

@media (max-width: 600px) {
	.ec-promo__inner {
		padding-block: 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-promo,
	.ec-promo__close {
		transition: none;
	}
}