/* headings */
.h1 {
	--weight-pt: 300;
	--size-pt: 80;
	--leading-pt: 80;
	--tracking-pt: -3;

	font-family: var(--font-display);
	font-style: normal;
	font-size: calc(
		clamp(
			var(--size-pt) * var(--text-px),
			(var(--size-pt) / var(--vw-pt)) * 100lvw,
			(var(--size-pt) / var(--vh-pt)) * 100lvh
		)
	);
	line-height: calc(var(--leading-pt) / var(--size-pt));
	font-weight: calc(var(--weight-pt));
	letter-spacing: calc((var(--tracking-pt) / var(--size-pt)) * 1em);
}

.h2 {
	--weight-pt: 300;
	--size-pt: 50;
	--leading-pt: 50;
	--tracking-pt: 0;

	font-family: var(--font-display);
	font-style: normal;
	font-size: calc(
		clamp(
			var(--size-pt) * var(--text-px),
			(var(--size-pt) / var(--vw-pt)) * 100lvw,
			(var(--size-pt) / var(--vh-pt)) * 100lvh
		)
	);
	line-height: calc(var(--leading-pt) / var(--size-pt));
	font-weight: calc(var(--weight-pt));
	letter-spacing: calc((var(--tracking-pt) / var(--size-pt)) * 1em);
}

.h3 {
	--weight-pt: 600;
	--size-pt: 30;
	--leading-pt: 35;
	--tracking-pt: -1;

	font-family: var(--font-sans);
	font-style: normal;
	font-size: calc(
		clamp(
			var(--size-pt) * var(--text-px),
			(var(--size-pt) / var(--vw-pt)) * 100lvw,
			(var(--size-pt) / var(--vh-pt)) * 100lvh
		)
	);
	line-height: calc(var(--leading-pt) / var(--size-pt));
	font-weight: calc(var(--weight-pt));
	letter-spacing: calc((var(--tracking-pt) / var(--size-pt)) * 1em);
}

.h4 {
	--weight-pt: 600;
	--size-pt: 24;
	--leading-pt: 30;
	--tracking-pt: -1;

	font-family: var(--font-sans);
	font-style: normal;
	font-size: calc(
		clamp(
			var(--size-pt) * var(--text-px),
			(var(--size-pt) / var(--vw-pt)) * 100lvw,
			(var(--size-pt) / var(--vh-pt)) * 100lvh
		)
	);
	line-height: calc(var(--leading-pt) / var(--size-pt));
	font-weight: calc(var(--weight-pt));
	letter-spacing: calc((var(--tracking-pt) / var(--size-pt)) * 1em);
}

.h5 {
	--weight-pt: 600;
	--size-pt: 14;
	--leading-pt: 18;
	--tracking-pt: -0.5;

	font-family: var(--font-sans);
	font-style: normal;
	font-size: calc(
		clamp(
			var(--size-pt) * var(--text-px),
			(var(--size-pt) / var(--vw-pt)) * 100lvw,
			(var(--size-pt) / var(--vh-pt)) * 100lvh
		)
	);
	line-height: calc(var(--leading-pt) / var(--size-pt));
	font-weight: calc(var(--weight-pt));
	letter-spacing: calc((var(--tracking-pt) / var(--size-pt)) * 1em);
}

.h1,
.h2,
.h3,
.h4,
.h5 {
	&:is([data-text-clip-reveal], [data-text-clip-reveal] *, ) [data-per],
	& [data-text-clip-reveal] [data-per] {
		padding-block: 0.15em;
		margin-block: -0.15em;
		padding-inline: 0.15em;
		margin-inline: -0.15em;
	}
}

.hb,
.button {
	--weight-pt: 700;
	--size-pt: 14;
	--leading-pt: 18;
	--tracking-pt: -0.5;

	font-family: var(--font-sans);
	font-style: normal;
	font-size: calc(
		clamp(
			var(--size-pt) * var(--text-px),
			(var(--size-pt) / var(--vw-pt)) * 100lvw,
			(var(--size-pt) / var(--vh-pt)) * 100lvh
		)
	);
	line-height: calc(var(--leading-pt) / var(--size-pt));
	font-weight: calc(var(--weight-pt) + 1);
	letter-spacing: calc((var(--tracking-pt) / var(--size-pt)) * 1em);
}

.button {
	&.button-default,
	&.button-accent,
	&.button-filled,
	&.button-primary {
		display: flex;
		padding-inline: 32px;
		padding-block: 8px;
		justify-content: center;
		align-items: center;
		gap: 8px;
		cursor: pointer;
		border-radius: var(--radius-full);
		min-width: fit-content;
		height: 56px;
	}

	&.button-default {
		border: 1px solid var(--color-border);

		transition-property: background, color, scale;

		&:hover {
			background: var(--color-bg-2);
		}

		&:active {
			background: var(--color-bg-1);
			scale: 0.98;
		}
	}
	&.button-accent {
		background: var(--color-accent-1);
		color: var(--color-on-accent-1);

		transition-property: filter, color, scale;

		&:hover {
			filter: brightness(1.05);
		}

		&:active {
			filter: brightness(0.95);
			scale: 0.98;
		}
	}
	&.button-filled {
		background: var(--color-bg-1);
		color: var(--color-fg-1);

		transition-property: background, color, scale;

		&:hover {
			background: var(--color-accent-1);
			color: var(--color-on-accent-1);
		}

		&:active {
			background: var(--color-bg-1);
			color: var(--color-fg-1);
			scale: 0.98;
		}
	}
	&.button-primary {
		background: var(--color-primary-1);
		color: var(--color-on-primary-1);

		transition-property: filter, color, scale;

		&:hover {
			filter: brightness(1.05);
		}

		&:active {
			filter: brightness(0.95);
			scale: 0.98;
		}
	}

	&.button-link {
		&,
		& [data-per],
		& span {
			text-decoration: underline;
			transition-property:
				color, text-decoration-color, text-underline-offset;

			text-underline-offset: 1px;

			&:hover {
				text-underline-offset: 2px;
				filter: brightness(1.05);
			}

			&:active {
				text-underline-offset: 1px;
			}
		}
	}
}

a:has(> .button) {
	display: contents;
}

.information {
	position: relative;
	padding-block: 48px;
	padding-inline: 64px;
	margin-block: 16px;

	display: flex;
	flex-direction: column;
	gap: 32px;

	&::before {
		content: '';
		position: absolute;
		inset-inline: 16px;
		inset-block: 0;
		background: var(--color-bg-2);
		border-radius: var(--radius);
	}

	& > * {
		position: relative;
	}

	& .information-heading {
		position: relative;

		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	& .information-table {
		position: relative;

		& > tbody {
			--gap-default: 16px;
			--cols-default: 2;

			margin-top: -16px;
			display: grid;
			grid-template-columns: repeat(
				auto-fit,
				minmax(
					calc(
						clamp(
							(100% - var(--gap, var(--gap-default))) /
								var(--cols, var(--cols-default)),
							300px,
							100%
						)
					),
					1fr
				)
			);
			column-gap: var(--gap, var(--gap-default));
			overflow: clip;

			& > tr {
				padding-block: 16px;
				margin-bottom: -1px;
				display: flex;
				flex-wrap: wrap;
				column-gap: 16px;
				row-gap: 8px;
				border-bottom: 1px solid var(--color-border);

				& > th {
					flex-basis: 150px;
					flex-grow: 1;

					text-align: start;
					font-weight: inherit;
					color: var(--color-fg-3);
				}

				& > td {
					flex-basis: 150px;
					flex-grow: 1;

					text-align: end;

					&:has(> table) {
						flex-basis: 100%;

						& > table {
							width: 100%;

							& > tbody {
								display: flex;
								flex-direction: column;
								gap: 8px;

								& > tr {
									display: flex;

									& > th {
										flex-basis: 150px;
										flex-grow: 1;

										text-align: start;
										font-weight: inherit;
										color: var(--color-fg-2);
									}

									& > td {
										flex-basis: 150px;
										flex-grow: 1;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

.form {
	display: flex;
	flex-direction: column;
	gap: 32px;

	--col-span-default: 1;
	--cols-default: 1;
	--gap-default: 16px;

	& .form-body {
		display: flex;
		flex-wrap: wrap;
		column-gap: var(--gap, var(--gap-default));
		row-gap: 24px;
	}

	& .form-buttons {
		display: flex;
		gap: 8px;
	}

	& .form-field,
	& .form-options {
		--col-basis-percent: calc(
			var(--col-span, var(--col-span-default)) /
				var(--cols, var(--cols-default))
		);
		--col-basis: calc(
			clamp(
				(
						100% -
							(
								var(--gap, var(--gap-default)) *
									max(
										0,
										(var(--cols, var(--cols-default) - 1))
									)
							)
					) *
					var(--col-basis-percent),
				600px / var(--cols, var(--cols-default)),
				100%
			)
		);

		&.form-field:has(
				input:not([type]),
				input[type='text'],
				input[type='email'],
				input[type='search'],
				input[type='url'],
				input[type='tel'],
				input[type='password'],
				input[type='date'],
				input[type='datetime-local'],
				input[type='month'],
				input[type='week'],
				input[type='time'],
				input[type='color'],
				textarea,
				select
			) {
			flex-basis: var(--col-basis);
			flex-grow: 1;

			display: flex;
			flex-direction: column;
			gap: 8px;

			& .form-field-label {
				color: var(--color-fg-3);
				transition-property: color;
			}
			&:is(:focus, :focus-within) .form-field-label {
				color: var(--color-fg-1);
			}

			& .form-field-input {
				appearance: none;
				background: none;
				border: none;
				border-radius: 0;
				border-bottom: 1px solid var(--color-border);
				outline: none;
				padding: 0;
				padding-block: 8px;
				text-indent: 0;
				margin: 0;
				font-size: var(--text-base);
				color: var(--color-fg-1);
				transition-property: color, border-color;

				&:is(select) {
					background-repeat: no-repeat;
					background-position: right 0rem center;
					background-size: 0.75em;
					font-family: inherit;
					font-size: inherit;

					&:open {
						background-image: url('/+theme/icon/chevron-up.svg');
					}
					&:focus {
						background-image: url('/+theme/icon/chevron-up.svg');
					}
					& {
						background-image: url('/+theme/icon/chevron-down.svg');
					}
					&:not(:open):not(:open) {
						background-image: url('/+theme/icon/chevron-down.svg');
					}
				}

				&:is(textarea) {
					resize: vertical;
					min-height: 4em;
				}

				&:is(input[type='date'], input[type='datetime-local']) {
					font-family: inherit;
					text-transform: uppercase;
				}

				&:is(.form-field:is(:focus-visible, :focus-within) *) {
					border-color: currentColor;
				}
			}
		}

		&.form-field:has(input[type='checkbox'], input[type='radio']) {
			display: flex;
			gap: 8px;
			align-items: center;
			margin: 0;

			& .form-field-label {
				flex-grow: 1;
			}

			& .form-field-input {
				flex-shrink: 0;
				width: 16px;
				height: 16px;
				border-radius: var(--radius-full);
				border: 1px solid var(--color-border);
				background: var(--color-bg-1);
			}
		}

		&.form-options {
			flex-basis: var(--col-basis);
			flex-grow: 1;

			display: flex;
			flex-wrap: wrap;
			column-gap: 16px;
			row-gap: 8px;
			justify-content: space-between;
		}
	}

	& .form-link {
		color: var(--color-fg-2);
		cursor: pointer;

		&,
		& * {
			text-decoration: underline;
		}
	}

	& .form-hint {
		font-size: var(--text-sm);
		color: var(--color-fg-2);
	}
}

.breadcrumbs {
	display: flex;
	gap: 8px;

	& .breadcrumbs-item {
		color: var(--color-fg-2);

		&.breadcrumbs-selected {
			color: var(--color-fg-1);
		}
	}

	& .breadcrumbs-separator {
		&::after {
			content: '›';
			font-weight: 300;
			color: var(--color-fg-2);
		}
	}
}

.banner {
	padding-block: 12px;
	padding-inline: 16px;
	border-radius: var(--radius);

	&,
	&.banner-info {
		display: flex;
		gap: 12px;
		background: var(--color-fg-2);
		color: var(--color-bg-1);

		&::before {
			--icon-banner-info: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none"><path d="M8.5 0.969727C4.08866 0.969727 0.5 4.55857 0.5 8.96973C0.5 13.3809 4.08866 16.9697 8.5 16.9697C12.9113 16.9697 16.5 13.3809 16.5 8.96973C16.5 4.55857 12.9113 0.969727 8.5 0.969727ZM9.54347 13.1436C9.54347 13.7199 9.07631 14.1871 8.5 14.1871C7.92369 14.1871 7.45653 13.7199 7.45653 13.1436V7.92626C7.45653 7.34995 7.92369 6.88279 8.5 6.88279C9.07631 6.88279 9.54347 7.34995 9.54347 7.92626V13.1436ZM8.5 5.83929C7.92369 5.83929 7.45653 5.37213 7.45653 4.79582C7.45653 4.21951 7.92369 3.75235 8.5 3.75235C9.07631 3.75235 9.54347 4.21951 9.54347 4.79582C9.54347 5.37213 9.07631 5.83929 8.5 5.83929Z" fill="white"/></svg>');
			content: var(--icon-banner-info);
			width: 16px;
			height: 16px;
			display: inline-block;
		}
	}
}

.filter {
	display: flex;
	flex-direction: column;
	gap: 32px;

	& .filter-heading {
		display: flex;
		flex-direction: column;
		gap: 8px;

		& .filter-title {
			text-transform: uppercase;
		}
	}

	& .filter-body {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	& .filter-group {
		display: flex;
		flex-direction: column;

		& .filter-group-trigger {
			color: var(--color-fg-3);
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			cursor: pointer;

			&::after {
				content: '';
				background: url('/+theme/icon/chevron-down.svg');
				width: 0.75em;
				height: 0.75em;
				background-size: 100% 100%;
				display: inline-block;
				transition-property: rotate;
			}

			&[data-accordion-selected]::after {
				rotate: 180deg;
			}
		}

		& .filter-group-content {
			display: flex;
			flex-direction: column;
			gap: 4px;

			&::before {
				content: '';
				display: block;
				height: 8px;
			}
		}
	}

	& .filter-buttons {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
}