/**
 * EDU Campaign Quiz Wrapper Styles
 * This file ensures the quiz displays correctly within WordPress
 */

.edu-campaign-quiz-wrapper {
    /* Reset WordPress theme styles that might interfere */
    box-sizing: border-box;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-family: inherit;
    line-height: inherit;
    width: 100% !important;
    max-width: 100% !important;
    isolation: isolate; /* Create new stacking context */
    position: relative;
}

.edu-campaign-quiz-wrapper * {
    box-sizing: border-box;
}

/* Ensure the quiz container takes full width */
.edu-campaign-quiz-wrapper #root {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

/* Prevent WordPress theme from overriding quiz styles */
.edu-campaign-quiz-wrapper .quiz-sec {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure proper RTL support */
.edu-campaign-quiz-wrapper[dir="rtl"],
.edu-campaign-quiz-wrapper #root {
    direction: rtl;
    text-align: right;
}

/* Override any WordPress theme container styles that might interfere */
/* The #root > .container should be full width (this is the outer wrapper) */
.edu-campaign-quiz-wrapper #root > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Override common WordPress theme container classes */
body .edu-campaign-quiz-wrapper,
.entry-content .edu-campaign-quiz-wrapper,
.wp-block-group .edu-campaign-quiz-wrapper,
.site-content .edu-campaign-quiz-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure no spacing from WordPress content wrapper */
/* Break out of WordPress content area padding */
.entry-content > .edu-campaign-quiz-wrapper,
.wp-block-group__inner-container > .edu-campaign-quiz-wrapper,
article > .edu-campaign-quiz-wrapper,
main > .edu-campaign-quiz-wrapper {
    margin-left: calc(-1 * var(--wp--style--root--padding-left, 0)) !important;
    margin-right: calc(-1 * var(--wp--style--root--padding-right, 0)) !important;
    margin-top: calc(-1 * var(--wp--style--root--padding-top, 0)) !important;
    margin-bottom: calc(-1 * var(--wp--style--root--padding-bottom, 0)) !important;
    width: calc(100% + var(--wp--style--root--padding-left, 0) + var(--wp--style--root--padding-right, 0)) !important;
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Override any parent container padding */
.edu-campaign-quiz-wrapper {
    /* Force full viewport width if needed */
    position: relative;
    left: 0;
    right: 0;
}

/* CRITICAL: Ensure quiz-sec > form.container maintains its max-width from style.css */
/* This is the main container that should be 960px max-width */
.edu-campaign-quiz-wrapper .quiz-sec > .container,
.edu-campaign-quiz-wrapper .quiz-sec > form.container {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    padding: 96px 16px 48px 16px !important;
}

/* Override any WordPress theme that might set container max-width globally */
/* But only for containers inside quiz-sec that are NOT the direct child */
.edu-campaign-quiz-wrapper .quiz-sec .container:not(.quiz-sec > .container) {
    max-width: none !important;
}