/**
 * We Quiz Maker — Shared Theme Design System
 * Cross-theme tokens, layout, motion, and responsive polish.
 *
 * Loaded after style-nova.css and theme-overrides.css, so rules here layer
 * shared accessibility, desktop hover, and mobile CTA polish on top of the
 * active theme. Nova-specific enhancements live in the "NOVA POLISH" section.
 */

/* --------------------------------------------------------------------------
   Design tokens (inherited by all theme layouts)
   -------------------------------------------------------------------------- */
.oqm-quiz.oqm-layout-theme {
	--oqm-space-xs: 8px;
	--oqm-space-sm: 12px;
	--oqm-space-md: 16px;
	--oqm-space-lg: 24px;
	--oqm-space-xl: 32px;
	--oqm-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--oqm-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
	--oqm-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
	--oqm-shadow-md: 0 8px 32px rgba(15, 23, 42, 0.08);
	--oqm-shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.12);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   Page canvas — center on desktop, safe areas on mobile
   -------------------------------------------------------------------------- */
.oqm-quiz.oqm-layout-theme {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	min-height: min(100vh, 100dvh);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.oqm-quiz.oqm-layout-theme > .oqm-theme-app,
.oqm-quiz.oqm-layout-theme > .oqm-theme-intro-screen,
.oqm-quiz.oqm-layout-theme > .oqm-theme-result-screen,
.oqm-quiz.oqm-layout-theme > .oqm-access-gate,
.oqm-quiz.oqm-layout-theme > .oqm-info-form-gate {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Question entrance animation
   -------------------------------------------------------------------------- */
.oqm-layout-theme .oqm-question:not(.oqm-hidden) {
	animation: oqmThemeQuestionIn 0.38s var(--oqm-ease-spring) both;
}

@keyframes oqmThemeQuestionIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------------
   Focus & accessibility
   -------------------------------------------------------------------------- */
.oqm-layout-theme .oqm-theme-option:focus-visible,
.oqm-layout-theme .wpqms_wini_card_btn:focus-visible,
.oqm-layout-theme .wpqms_webe_card_btn:focus-visible,
.oqm-layout-theme .wpqms_amaze_card_quiz_button:focus-visible,
.oqm-layout-theme .wpqms_nebula_btn:focus-visible {
	outline: 2px solid var(--oqm-accent, #3b82f6);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   NOVA POLISH — accessibility, desktop hover, keyboard focus for the
   unified Nova design system (aurora / strand / pulse / orbit / bloom / scroll)
   -------------------------------------------------------------------------- */

/* Keyboard focus ring on option rows (mouse clicks stay clean) */
.oqm-base-nova .oqm-nova-option:focus-within {
	border-color: var(--nv-accent, #7c3aed);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nv-accent, #7c3aed) 22%, transparent);
}

.oqm-base-nova .oqm-nova-option .oqm-hidden-input:focus-visible + .oqm-nova-option-letter,
.oqm-base-nova .oqm-answer-dot:focus-visible,
.oqm-base-nova .oqm-nova-back:focus-visible {
	outline: 2px solid var(--nv-accent, #7c3aed);
	outline-offset: 2px;
}

/* Result panel entrance is owned by style-nova; keep card focus containment */
.oqm-base-nova .oqm-nova-card:focus {
	outline: none;
}

/* --------------------------------------------------------------------------
   Desktop enhancements (≥ 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.oqm-base-wini.oqm-layout-theme,
	.oqm-base-webe.oqm-layout-theme,
	.oqm-base-amaze.oqm-layout-theme,
	.oqm-base-nebula.oqm-layout-theme {
		justify-content: center;
		padding-top: 48px;
		padding-bottom: 64px;
	}

	.oqm-base-wini .wpqms_wini_card_container,
	.oqm-base-webe .wpqms_webe_card_container,
	.oqm-base-amaze .wpqms_amaze_card_container {
		transition: box-shadow 0.3s var(--oqm-ease), transform 0.3s var(--oqm-ease);
	}

	.oqm-base-wini .wpqms_wini_card_container:hover,
	.oqm-base-webe .wpqms_webe_card_container:hover,
	.oqm-base-amaze .wpqms_amaze_card_container:hover {
		box-shadow: var(--oqm-shadow-lg);
	}

	.oqm-base-nebula .wpqms_nebula_intro:hover {
		box-shadow: 0 24px 72px rgb(26 31 75 / 16%), 0 6px 16px rgb(26 31 75 / 8%);
	}

	/* Nova: gentle card lift on the intro/result cards for a premium feel */
	.oqm-base-nova .oqm-theme-intro-screen .oqm-nova-card,
	.oqm-base-nova .oqm-nova-result {
		transition: transform 0.35s var(--oqm-ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow 0.35s var(--oqm-ease, cubic-bezier(0.4, 0, 0.2, 1));
	}

	.oqm-base-nova .oqm-theme-intro-screen .oqm-nova-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--nv-shadow), 0 30px 70px rgba(15, 23, 42, 0.12);
	}
}

/* --------------------------------------------------------------------------
   Mobile — full width cards, sticky actions
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.oqm-base-wini.oqm-layout-theme,
	.oqm-base-webe.oqm-layout-theme,
	.oqm-base-amaze.oqm-layout-theme,
	.oqm-base-nebula.oqm-layout-theme {
		padding-left: max(8px, env(safe-area-inset-left));
		padding-right: max(8px, env(safe-area-inset-right));
	}

	.oqm-base-wini .wpqms_wini_card_container,
	.oqm-base-webe .wpqms_webe_card_container {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	/* Sticky footer CTA on mobile */
	.oqm-base-wini .wpqms_wini_card_actions,
	.oqm-base-webe .wpqms_webe_card_footer {
		position: sticky;
		bottom: 0;
		z-index: 5;
		background: linear-gradient(180deg, transparent 0%, var(--oqm-quiz-bg, #fff) 24%);
		padding-top: 12px;
		margin-top: 4px;
	}

	.oqm-base-wini .wpqms_wini_card_btn,
	.oqm-base-webe .wpqms_webe_card_btn {
		min-height: 48px;
	}

	.oqm-base-amaze .wpqms_amaze_card_options li.oqm-theme-option {
		min-height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Nova: safe-area padding + elevated sticky footer CTA on mobile */
	.oqm-base-nova.oqm-layout-theme {
		padding-left: max(12px, env(safe-area-inset-left));
		padding-right: max(12px, env(safe-area-inset-right));
	}

	.oqm-base-nova .oqm-nova-footer {
		padding-bottom: max(20px, env(safe-area-inset-bottom));
		box-shadow: 0 -8px 20px color-mix(in srgb, var(--nv-card-bg, #fff) 60%, transparent);
	}

	.oqm-base-nova .oqm-nova-footer .oqm-nova-btn {
		min-height: 52px;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.oqm-layout-theme .oqm-question:not(.oqm-hidden),
	.oqm-layout-theme .oqm-timer-animated {
		animation: none !important;
	}

	.oqm-layout-theme * {
		transition-duration: 0.01ms !important;
	}
}