/**
 * ICONIQ Popups — skallen på værtssiden.
 *
 * Kun positionering, overlay og overgange. Popup'ens indhold bor i en
 * iframe og styles af temaet og af blokkene derinde — denne fil rører det
 * ikke, og kan ikke komme til det.
 *
 * Eneste undtagelse er luk-knappen, som af gode grunde ikke kan være en
 * blok. Den kan slås fra pr. popup, hvis du hellere vil bygge din egen.
 */

/* ------------------------------------------------------------------ */
/* Wrapper                                                             */
/* ------------------------------------------------------------------ */

/*
 * Skallen er ALDRIG display:none.
 *
 * Et element i display:none får intet layout — og det gælder også
 * dokumentet inde i en iframe. Iframen ville derfor måle sin egen højde
 * til 0, popup.js ville vente på en højde der aldrig kom, og popup'en
 * ville aldrig blive vist.
 *
 * visibility:hidden bevarer layout, men skjuler elementet, fjerner det fra
 * tilgængelighedstræet og tager det ud af tabulatorrækkefølgen. Sammen med
 * pointer-events:none er skallen dermed helt uden virkning, indtil den
 * vises — men iframen kan måles hele tiden.
 */
.iconiq-popup {
	position: fixed;
	z-index: 99999;
	visibility: hidden;
	pointer-events: none;
}

.iconiq-popup.is-active {
	visibility: visible;
	pointer-events: auto;
}

/* Usynlig og uden layout-påvirkning: intet må kunne scrolle frem til den. */
.iconiq-popup:not( .is-active ) {
	overflow: hidden;
}

/*
 * Centreret popup scroller selv. Med transform-centrering blev toppen af en
 * popup, der er højere end skærmen, skåret af uden mulighed for at scrolle
 * op til den. Her scroller wrapperen, og panelet centreres med margin:auto,
 * som i modsætning til align-items:center aldrig gør indhold uopnåeligt.
 */
.iconiq-popup--center {
	inset: 0;
	display: flex;
	padding: 1rem;
	overflow-x: clip;
	overscroll-behavior: contain;
}

.iconiq-popup--center.is-active {
	overflow-y: auto;
}

.iconiq-popup--bottom-right {
	right: 1rem;
	bottom: 1rem;
	left: auto;
	top: auto;
}

/*
 * iOS Safari ignorerer overflow:hidden på body. Siden låses derfor med
 * position:fixed, og popup.js husker og genskaber scroll-positionen.
 */
body.iconiq-popup-open {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Overlay — farven følger temaets contrast-preset                     */
/* ------------------------------------------------------------------ */

.iconiq-popup__overlay {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.55 );
	background: color-mix(
		in srgb,
		var( --wp--preset--color--contrast, #000000 ) var( --iq-popup-overlay-pct, 55% ),
		transparent
	);
	opacity: 0;
	transition: opacity 240ms ease;
}

.iconiq-popup.is-visible .iconiq-popup__overlay {
	opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Panel — udelukkende en ramme omkring iframen                        */
/* ------------------------------------------------------------------ */

.iconiq-popup__panel {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: var( --iq-popup-width, 480px );
	max-width: 100%;
	opacity: 0;
	transform: translateY( 8px );
	transition: opacity 240ms ease, transform 240ms ease;
}

.iconiq-popup--center .iconiq-popup__panel {
	flex: 0 0 auto;
	margin: auto;
}

.iconiq-popup--bottom-right .iconiq-popup__panel {
	max-width: calc( 100vw - 2rem );
}

.iconiq-popup.is-visible .iconiq-popup__panel {
	opacity: 1;
	transform: translateY( 0 );
}

@media ( prefers-reduced-motion: reduce ) {

	.iconiq-popup__panel,
	.iconiq-popup__overlay {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Iframen                                                             */
/* ------------------------------------------------------------------ */

.iconiq-popup__frame {
	/*
	 * Højden sættes på selve iframen af popup.js ud fra indholdets egen
	 * højde. Loftet her forhindrer, at en meget høj popup går ud over
	 * skærmen — så scroller wrapperen i stedet.
	 */
	max-height: calc( 100vh - 2rem );
	max-height: calc( 100dvh - 2rem );
	overflow-y: auto;
	overscroll-behavior: contain;
}

.iconiq-popup__iframe {
	display: block;
	width: 100%;
	/*
	 * En reel starthøjde, ikke 0. Et nulhøjt viewport får nogle browsere
	 * til at måle indholdet til 0, og så kan iframen ikke rapportere sin
	 * egen højde. Værdien erstattes af den målte højde, før popup'en vises.
	 */
	height: 400px;
	border: 0;
	/*
	 * Iframens eget dokument har gennemsigtig baggrund, så popup'ens
	 * udseende kommer helt fra blokkene indeni — inklusive runde hjørner.
	 */
	background: transparent;
	color-scheme: normal;
	transition: height 160ms ease;
}

@media ( prefers-reduced-motion: reduce ) {

	.iconiq-popup__iframe {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Luk-knap                                                            */
/* ------------------------------------------------------------------ */

.iconiq-popup__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.82 );
	color: #000000;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 150ms ease;
}

.iconiq-popup__close:hover,
.iconiq-popup__close:focus-visible {
	background: rgba( 255, 255, 255, 1 );
	outline: none;
}