/**
 * RørosHetta – Info popup (native <dialog>)
 * Markup: modules/info-popup.php
 * Trigger: custom-js/info-popup.js
 */

.info-popup {
	/* Reset UA dialog styles */
	position: fixed;
	inset: 0;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	max-width: min(680px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	width: 100%;
	color: var(--soft-black, #1a1a1a);
	font-family: var(--var-font, "Ubuntu", sans-serif);
	overflow: visible;
}

.info-popup::backdrop {
	background: rgba(26, 26, 26, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.info-popup[open] {
	animation: info-popup-in 0.22s ease-out;
}

.info-popup__inner {
	position: relative;
	background: var(--soft-white, #faf9f6);
	border-radius: 8px;
	padding: 48px 40px 40px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.info-popup__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--soft-black, #1a1a1a);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.info-popup__close:hover,
.info-popup__close:focus-visible {
	background: rgba(26, 26, 26, 0.08);
	outline: none;
}

.info-popup__close:focus-visible {
	box-shadow: 0 0 0 2px var(--green, #3e4f48);
}

.info-popup__title {
	margin: 0 0 24px;
	padding-right: 40px;
	font-size: 1.5rem;
	line-height: 1.25;
}

.info-popup__content {
	font-size: 1rem;
	line-height: 1.6;
}

.info-popup__content h2,
.info-popup__content h3,
.info-popup__content h4 {
	margin: 24px 0 8px;
	font-size: 1.1rem;
	line-height: 1.3;
}

.info-popup__content h2:first-child,
.info-popup__content h3:first-child,
.info-popup__content h4:first-child {
	margin-top: 0;
}

.info-popup__content p {
	margin: 0 0 12px;
}

.info-popup__content ul,
.info-popup__content ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.info-popup__content *:last-child {
	margin-bottom: 0;
}

/* Prevent background scroll while open */
html.info-popup-open,
html.info-popup-open body {
	overflow: hidden;
}

/* No-JS fallback: show the dialog when its id is targeted by the URL hash */
.info-popup:target:not([open]) {
	display: block;
	z-index: 9999;
}

@keyframes info-popup-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 600px) {
	.info-popup__inner {
		padding: 56px 20px 28px;
		border-radius: 6px;
	}

	.info-popup__title {
		font-size: 1.25rem;
	}
}