:host {
	/* Can be overriden from the outside, e.g. in stikcy button */
	--jbm-footer-bottom-spacing: 0px;

	--jbm-footer-max-width: none;

	@media (min-width: 47.5em) {
		--jbm-footer-max-width: 724px;
	}
	@media (min-width: 62.5em) {
		--jbm-footer-max-width: 940px;
	}
	@media (min-width: 80em) {
		--jbm-footer-max-width: 1200px;
	}

	font-family: var(--jbm-font-family-base);
	font-size: 14px;
	line-height: 1.85;
	display: block;
	margin-block-start: 70px;
}

a {
	transition: var(--jbm-transition);
	transition-property: background, color;
}

select {
	appearance: none;
	border: 0;
	font: inherit;
	font-weight: bold;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><path d="m1.938.421 4.013 4.317 4.1-4.318c.407-.413 1.102-.644 1.644-.104s.267 1.311-.077 1.667L6.07 7.609a.167.167 0 0 1-.238 0L.285 1.983C.039 1.735-.21.888.285.42.78-.047 1.564.035 1.938.421z" fill="white"/></svg>')
		no-repeat;
	background-position: right 14px center;
	background-color: var(--jbm-color-blue);
	background-size: 12px;
	border-radius: var(--jbm-border-radius);
	color: var(--jbm-color-white);
	cursor: pointer;
	padding: 10px 36px 10px 14px;
	text-overflow: ellipsis;
	width: 100%;
	transition: background-color var(--jbm-transition);

	&:hover,
	&:focus,
	&:active {
		background-color: var(--jbm-color-blue-light);
	}
}

.wrapper {
	background: var(--jbm-color-gray-light);
}

.container {
	max-width: var(--jbm-footer-max-width);
	margin-inline: auto;
}

.sections {
	list-style: none;
	margin: 0;
	padding-inline: 0;

	@media (min-width: 62.5em) {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 40px 18px;
		padding-block: 70px;
	}
}

details {
	border-block-end: 1px solid var(--jbm-color-white);

	.content {
		border-block-start: 1px solid var(--jbm-color-gray);
		margin-inline: 40px;
		padding-block: 24px;
	}
}

.title {
	font-stretch: condensed;
	font-size: 18px;
	text-transform: uppercase;
	padding-block-end: 20px;
	border-block-end: 1px solid var(--jbm-color-gray);
	margin-block-end: 30px;
	margin-block-start: 0;

	@media (max-width: 62.5em) {
		font-size: 16px;
		border-block-end: none;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		padding: 24px 40px;
		margin: 0;
		transition: var(--jbm-transition);
		transition-property: background, color;

		&::after {
			content: '';
			display: block;
			width: 14px;
			height: 14px;
			margin-inline-start: 24px;
			mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M8 6V1.007C8 .45 7.552 0 7 0c-.556 0-1 .45-1 1.007V6H1.007C.45 6 0 6.448 0 7c0 .556.45 1 1.007 1H6v4.993C6 13.55 6.448 14 7 14c.556 0 1-.45 1-1.007V8h4.993C13.55 8 14 7.552 14 7c0-.556-.45-1-1.007-1H8Z"/></svg>');
			background: currentColor;
		}

		&:hover,
		&:focus,
		&:active {
			background-color: var(--jbm-color-white);
			color: var(--jbm-color-blue-light);
		}

		details[open] &::after {
			background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M0 7c0-.552.45-1 1.007-1h11.986C13.55 6 14 6.444 14 7c0 .552-.45 1-1.007 1H1.007A1.001 1.001 0 0 1 0 7Z"/></svg>');
		}
	}
}

.links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.link {
	display: block;
	text-decoration: none;

	img {
		display: block;
	}
}

.meta {
	--jbm-footer-meta-padding-block: 20px;

	background: var(--jbm-color-blue);
	color: var(--jbm-color-white);
	padding-block-start: var(--jbm-footer-meta-padding-block);
	padding-block-end: calc(var(--jbm-footer-bottom-spacing) + var(--jbm-footer-meta-padding-block));
	text-align: end;

	.links {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
	}

	.link-item {
		display: flex;
		gap: 10px;

		&:not(:last-child) {
			&::after {
				content: '|';
			}
		}
	}

	.link {
		font-weight: inherit;
	}

	@media (max-width: 62.5em) {
		--jbm-footer-meta-padding-block: 30px;

		font-size: 13px;
		text-align: start;
		padding-inline: 40px;

		.links {
			gap: 5px 10px;
			margin-block-start: 5px;
		}
	}

	@media (min-width: 62.5em) {
		.container {
			display: flex;
			gap: 10px;
			justify-content: flex-end;
			flex-wrap: wrap;
		}

		.links {
			&::before {
				content: '|';
			}
		}
	}
}

.section[data-jbm-footer-displayhint='newsletter'] {
	.link {
		width: max-content;
		font-weight: bold;
		background: var(--jbm-color-blue);
		border-radius: var(--jbm-border-radius);
		color: var(--jbm-color-white);
		padding: 10px 36px 10px 14px;
		margin-block-start: 10px;

		&:hover,
		&:focus,
		&:active {
			background: var(--jbm-color-blue-light);
		}
	}
}

.section[data-jbm-footer-displayhint='social'] {
	.links {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
	}

	.link {
		display: block;
		padding: 10px;
		background-color: var(--jbm-color-blue);
		border-radius: 22px;

		@container not style(--square: true) {
			background-color: var(--jbm-color-white);
		}

		img {
			height: 24px;
		}

		&:hover,
		&:focus,
		&:active {
			background-color: var(--jbm-color-blue-light);
		}
	}
}

.section[data-jbm-footer-displayhint='partners'] {
	grid-column: 1 / -1;

	.links {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px 40px;
		align-items: center;
	}
}

.ai-search-overlay-trigger {
	position: relative;
	display: block;
	width: 100%;
	padding: 10px 14px;
	margin-bottom: 4px;
	font: inherit;
	font-weight: bold;
	color: var(--jbm-color-white);
	text-align: left;
	cursor: pointer;
	background-color: var(--jbm-color-blue);
	border: 0;
	border-radius: var(--jbm-border-radius);
	transition: background-color var(--jbm-transition);

	&:is(:hover, :focus-visible) {
		background-color: var(--jbm-color-blue-light);
	}

	.badge {
		position: absolute;
		inset: 7px 10px auto auto;
		padding: 0 4px;
		font-size: 7px;
		font-weight: 700;
		line-height: normal;
		color: var(--jbm-color-blue);
		text-transform: uppercase;
		background-color: var(--jbm-color-yellow);
		border-radius: 10px;
	}

	.icon {
		position: absolute;
		inset: auto 10px 7px auto;
		width: 24px;
		height: 24px;
	}
}