/*
 * Popup block (0.83.0) — front end. Colours are the Alexi theme tokens.
 * The popup is a native <dialog> opened with showModal(), so it sits in the
 * browser's top layer above the header, sidebars and anything else.
 */

html.asc-popup-lock { overflow: hidden; }

.asc-popup-trigger { margin: 0 0 1.25em; }
.asc-popup-trigger.is-align-center { text-align: center; }
.asc-popup-trigger.is-align-right { text-align: right; }
/* 0.83.1: the button matches the "Details" buttons on My Courses (ASC Reports
   .asc-rep-detail-btn) — thin outline, 5px corners, small text (Alex). */
.asc-popup-open {
	display: inline-block;
	cursor: pointer;
	margin: 0;
	padding: 0.3rem 0.75rem !important;
	border: 1px solid var( --alexi-outline, #c9ced4 ) !important;
	border-radius: 5px !important;
	background: transparent !important;
	color: var( --alexi-btn-text, #0f2a47 ) !important;
	font: inherit;
	font-size: 0.82rem !important;
	line-height: 1.2 !important;
	font-weight: inherit;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	box-shadow: none !important;
}
.asc-popup-open:hover,
.asc-popup-open:focus {
	border-color: var( --alexi-muted, #5f6b78 ) !important;
	background: transparent !important;
	color: var( --alexi-btn-text, #0f2a47 ) !important;
	outline: none;
}
.asc-popup-open:focus-visible { outline: 2px solid var( --alexi-outline, #c9ced4 ); outline-offset: 2px; }

/* ---- The popup box ---------------------------------------------------- */
/* 0.83.2: position, inset, margin and max-width are !important — WordPress
   sets margin:0 on everything inside Grid / Row / Stack groups (and max-width /
   auto margins inside constrained groups), which pushed popups placed there to
   the top-left corner. */
dialog.asc-popup {
	--asc-popup-w: 640px;
	--asc-popup-gap: 24px;
	position: fixed !important;
	inset: 0 !important;
	box-sizing: border-box;
	width: min( var( --asc-popup-w ), calc( 100vw - 2 * var( --asc-popup-gap ) ) );
	max-width: none !important;
	height: fit-content;
	max-height: calc( 100dvh - 2 * var( --asc-popup-gap ) );
	margin: auto !important;
	padding: 0;
	border: 1px solid var( --alexi-line, #d9dde3 );
	border-radius: 16px;
	background: #fff;
	color: var( --alexi-ink, #0f2a47 );
	font: inherit;
	line-height: 1.6;
	box-shadow: 0 18px 48px rgba( 15, 42, 71, 0.22 );
	overflow: hidden;
}
dialog.asc-popup[open] { display: flex; flex-direction: column; }
dialog.asc-popup::backdrop { background: rgba( 15, 42, 71, 0.45 ); }

dialog.asc-popup.is-size-small { --asc-popup-w: 420px; }
dialog.asc-popup.is-size-medium { --asc-popup-w: 640px; }
dialog.asc-popup.is-size-large { --asc-popup-w: 920px; }
/* custom: --asc-popup-w is set inline on the element */

/* ---- Position ---------------------------------------------------------- */
dialog.asc-popup.is-pos-top { margin: var( --asc-popup-gap ) auto auto !important; }
dialog.asc-popup.is-pos-bottom { margin: auto auto var( --asc-popup-gap ) !important; }
dialog.asc-popup.is-pos-top-left { margin: var( --asc-popup-gap ) auto auto var( --asc-popup-gap ) !important; }
dialog.asc-popup.is-pos-top-right { margin: var( --asc-popup-gap ) var( --asc-popup-gap ) auto auto !important; }
dialog.asc-popup.is-pos-bottom-left { margin: auto auto var( --asc-popup-gap ) var( --asc-popup-gap ) !important; }
dialog.asc-popup.is-pos-bottom-right { margin: auto var( --asc-popup-gap ) var( --asc-popup-gap ) auto !important; }

/* Side panels: full height, flush to the edge. */
dialog.asc-popup.is-pos-left,
dialog.asc-popup.is-pos-right {
	width: min( var( --asc-popup-w ), 100vw );
	height: 100dvh;
	max-height: 100dvh;
	border-top: 0;
	border-bottom: 0;
}
dialog.asc-popup.is-pos-left { margin: 0 auto 0 0 !important; border-left: 0; border-radius: 0 16px 16px 0; }
dialog.asc-popup.is-pos-right { margin: 0 0 0 auto !important; border-right: 0; border-radius: 16px 0 0 16px; }

/* Full screen wins over any position. */
dialog.asc-popup.is-size-full {
	width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0 !important;
	border: 0;
	border-radius: 0;
}

/* ---- Inside ----------------------------------------------------------- */
.asc-popup-bar {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	padding: 10px 10px 0;
}
.asc-popup-close {
	-webkit-tap-highlight-color: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var( --alexi-btn-bg, #e8eaed ) !important;
	color: var( --alexi-btn-text, #0f2a47 ) !important;
	box-shadow: none !important;
	cursor: pointer;
}
.asc-popup-close:hover { background: var( --alexi-btn-bg-hover, #d5d9de ) !important; }
.asc-popup-close:focus { outline: none; }
.asc-popup-close:focus-visible { box-shadow: 0 0 0 3px var( --alexi-focus-ring, rgba( 91, 122, 153, 0.45 ) ) !important; }

.asc-popup-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 0 28px 28px;
}
.asc-popup-body > :first-child { margin-top: 0; }
.asc-popup-body > :last-child { margin-bottom: 0; }
dialog.asc-popup.is-size-full .asc-popup-body { width: 100%; max-width: 920px; margin: 0 auto; box-sizing: border-box; }

/* ---- Phones ----------------------------------------------------------- */
@media ( max-width: 600px ) {
	dialog.asc-popup { --asc-popup-gap: 12px; }
	dialog.asc-popup:not( .is-pos-left ):not( .is-pos-right ):not( .is-size-full ) { width: calc( 100vw - 24px ); }
	dialog.asc-popup.is-pos-left,
	dialog.asc-popup.is-pos-right { width: min( var( --asc-popup-w ), 92vw ); }
	.asc-popup-body { padding: 0 18px 22px; }
}

/* ---- A gentle entrance, unless motion is reduced ----------------------- */
@media ( prefers-reduced-motion: no-preference ) {
	dialog.asc-popup[open] { animation: asc-popup-in 0.16s ease-out; }
	dialog.asc-popup[open]::backdrop { animation: asc-popup-fade 0.16s ease-out; }
}
@keyframes asc-popup-in {
	from { opacity: 0; transform: translateY( 8px ); }
	to { opacity: 1; transform: none; }
}
@keyframes asc-popup-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}