/**
 * Elatum Popups — front-end styles.
 *
 * Structural only. Color/spacing tokens are CSS custom properties so a
 * host site can theme the popup without touching this file. They are all
 * declared on :root, not on .elpop-modal — ::backdrop does not inherit
 * custom properties from its originating element on older engines, so a
 * token declared on the dialog itself would resolve to nothing there.
 */

:root {
	--elpop-backdrop: rgba(20, 16, 12, 0.6);
	--elpop-bg: #fff;
	--elpop-fg: #1a1a1a;
	--elpop-border-radius: 8px;
	--elpop-max-width-small: 360px;
	--elpop-max-width-medium: 560px;
	--elpop-max-width-large: 800px;
	--elpop-close-size: 2rem;
	--elpop-z: 100000;
}

html.elpop-scroll-locked {
	overflow: hidden;
}

dialog.elpop-modal {
	/* Reset the UA defaults — dialog ships fit-content width, a border,
	   1em padding and a `canvas` background that fight any real design. */
	width: calc(100% - 2rem);
	max-width: var(--elpop-max-width-medium);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--elpop-border-radius);
	background: var(--elpop-bg);
	color: var(--elpop-fg);
	box-sizing: border-box;
	overscroll-behavior: contain;
	z-index: var(--elpop-z);
}

dialog.elpop-modal.elpop-size-small {
	max-width: var(--elpop-max-width-small);
}

dialog.elpop-modal.elpop-size-large {
	max-width: var(--elpop-max-width-large);
}

dialog.elpop-modal::backdrop {
	background: var(--elpop-backdrop);
}

dialog.elpop-modal .elpop-content {
	padding: 2rem;
	max-height: 85vh;
	overflow-y: auto;
	/* alignfull/alignwide block widths come from theme.json content/wide
	   size custom properties, which are not guaranteed to resolve sensibly
	   inside a fixed-width dialog — alignfull is not supported here. */
	max-width: 100%;
}

dialog.elpop-modal .elpop-title {
	margin-top: 0;
}

/* The container takes focus on open (see popup.js); it is a focus target,
   not an interactive control, so it should not paint a ring. Real controls
   inside keep their :focus-visible rings. */
dialog.elpop-modal:focus {
	outline: none;
}

dialog.elpop-modal .elpop-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: var(--elpop-close-size);
	height: var(--elpop-close-size);
	line-height: 1;
	font-size: 1.5rem;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: inherit;
}

@media (prefers-reduced-motion: no-preference) {
	dialog.elpop-modal {
		transition: opacity 0.2s ease, transform 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
		opacity: 0;
		transform: scale(0.97);
	}

	dialog.elpop-modal[open] {
		opacity: 1;
		transform: scale(1);
	}

	@starting-style {
		dialog.elpop-modal[open] {
			opacity: 0;
			transform: scale(0.97);
		}
	}
}