/* AWTV Quiz — modal variant for the Blue Billywig quiz player (iframe).
   Extends the .awtv-modal base from awtv-newsletter.css (brand card, rounded, brush title).
   Both are enqueued on the startpage. */

.awtv-modal.awtv-modal--quiz {
	width: 50vw;             /* no more than 50% of the page width */
	max-width: 50vw;
	padding: 10px 40px 40px;
	text-align: left;
	overflow: hidden;        /* clip the animated "?" canvas to the rounded card */
}

/* Animated "?" field on the turquoise background (canvas behind the content). */
.awtv-quiz-shapes {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Keep the modal content above the animated "?" background. */
.awtv-modal--quiz .awtv-modal-title,
.awtv-modal--quiz .awtv-quiz-subtext,
.awtv-modal--quiz .awtv-quiz-embed {
	position: relative;
	z-index: 1;
}
.awtv-modal--quiz .awtv-modal-close {
	z-index: 2; /* already absolutely positioned by the base modal */
}

/* Pink/magenta brush title. */
.awtv-modal--quiz .awtv-modal-title {
	margin: 0 0 6px;
	text-align: center;
	color: #d600a8;
}

.awtv-quiz-embed {
	width: 100%;
}

/* The Blue Billywig player fills the modal at 16:9, with the same magenta outline as the site's
   other videos. outline-offset keeps the ring just outside the player; the modal padding gives
   it room. max-height keeps it on-screen on short windows. */
.awtv-quiz-iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 70vh;
	border: 0;
	border-radius: 10px;
	outline: 5px solid rgba( 214, 0, 168, 0.5 );
	outline-offset: 3px;
}

/* Caption row, directly under the title (above the video). */
.awtv-quiz-subtext {
	margin: 0 0 18px;
	text-align: center;
	font-family: 'Poppins', sans-serif;
	color: #111111;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

/* Smaller screens: 50vw is too narrow to be usable — use most of the width + tighten padding. */
@media ( max-width: 900px ) {
	.awtv-modal.awtv-modal--quiz {
		width: 92vw;
		max-width: 92vw;
		padding: 20px 16px 18px;
	}
}