/**
 * About this website
 *
 * The footer link and its feedback dialog.
 */

 .about-site__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--text-dark-muted);
	font-size: var(--text-s);
	font-weight: var(--rv-weight-nav);
	cursor: pointer;
	transition: color var(--transition-duration) var(--transition-timing);
	line-height: calc(var(--text-line-height)*.85);
}

.about-site__trigger svg {
	inline-size: 1.1em;
	block-size: 1.1em;
	fill: currentColor;
}

@media (hover: hover) and (pointer: fine) {
	.about-site__trigger:hover {
		color: var(--primary);
	}
}

/* The dialog is the backdrop; the inner div is the panel. Padding here
   rather than on the panel so a click anywhere outside it still lands on
   the dialog and closes. */
   .about-site {
	display: grid;
	place-items: center;
	inline-size: 100%;
	max-inline-size: 100%;
	max-block-size: 100%;
	block-size: 100%;
	padding: var(--space-m);
	border: none;
	background: transparent;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Only grid when open — a closed dialog with display:grid would render. */
.about-site:not([open]) {
	display: none;
}

.about-site::backdrop {
	background: var(--rv-overlay);
}

.about-site__inner {
	position: relative;
	inline-size: 100%;
	max-inline-size: 34rem;
	padding: var(--space-l);
	border-radius: var(--card-radius);
	background: var(--card-surface);
}

.about-site__close {
	position: absolute;
	inset-block-start: var(--space-s);
	inset-inline-end: var(--space-s);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-xs);
	border: none;
	background: transparent;
	color: var(--neutral-semi-dark);
	cursor: pointer;
}

.about-site__close svg {
	inline-size: var(--rv-icon-size);
	block-size: var(--rv-icon-size);
	fill: currentColor;
}

@media (hover: hover) and (pointer: fine) {
	.about-site__close:hover {
		color: var(--text-dark);
	}
}

.about-site__title {
	margin: 0 0 var(--space-xs);
	padding-inline-end: var(--space-l);
	font-size: var(--h4);
	line-height: 1.2;
}

.about-site__text {
	margin: 0 0 var(--space-s);
	color: var(--neutral-semi-dark);
	font-size: var(--text-m);
	line-height: 1.5;
	text-wrap: pretty;
}

.about-site__form iframe {
	display: block;
	inline-size: 100%;
	border: none;
}

@media (max-width: 600px) {
	.about-site {
		padding: var(--space-xs);
	}

	.about-site__inner {
		padding: var(--space-m);
	}
}