/* ==========================================================
   DRE BASE STYLESHEET
   DO NOT PUT COMPONENT CSS HERE
========================================================== */

/*
 Theme Name: Astra Child
 Template: astra
 Description: Clean modular build for DRE
 Version: 3.0
*/

/* Load Nunito globally */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap");

/* Base typography + root variables */
body{
    font-family:"Nunito",sans-serif;
    font-size:16px;     /* stable baseline */
    line-height:1.6;    /* readable across mobile + desktop */
    color:#333;
}


/* Global video spacing fix */
.wp-block-video,
.wp-block-embed{
    margin-bottom:0 !important;
}

/* Leave ALL block styles to blocks.css */
/* Leave ALL component UI to /css/components/*.css */

/* ==========================================================
   DRE EXERCISE TYPOGRAPHY SCALE
   Used by ALL interactive components
========================================================== */

:root {
    --dre-text-main: 1.05rem;
    --dre-text-question: 1.15rem;
    --dre-text-option: 1.05rem;
    --dre-text-feedback: 0.95rem;
    --dre-line-height: 1.55;
}
/* ==========================================================
   DRE EXERCISE TYPOGRAPHY SCALE MOBILE
   Used by ALL interactive components
========================================================== */
/* Single post – remove left margin/padding completely */
.single-post #primary {
	margin-left: 0;
	padding-left: 0;
}

.single-post .site-content,
.single-post .ast-container {
	padding-left: 50;
	margin-left: 50;
}

@media (max-width: 640px) {
    :root {
        --dre-text-main: 1.1rem;
        --dre-text-question: 1.25rem;
        --dre-text-option: 1.1rem;
        --dre-text-feedback: 1.0rem;
    }
}


/* =====================================================================
   UPDATED + SAFE GUTENBERG CONSTRAINT FIX FOR DRE COMPONENTS
   (Replaces old block that was preventing full-width mobile layouts)
===================================================================== */

/*
   IMPORTANT:
   - This does NOT affect desktop layout.
   - It removes Gutenberg’s artificial max-width and padding
     only from DRE components INSIDE constrained group blocks.
   - It does NOT force full-width — mobile CSS handles that separately.
*/

.wp-block-group.is-layout-constrained .dre-snips1,
.wp-block-group.is-layout-constrained .dre-sw1-quiz,
.wp-block-group.is-layout-constrained .dre-dictation,
.wp-block-group.is-layout-constrained .dre-inline-video,
.wp-block-group.is-layout-constrained .dre-exercise-block {
    width: 100%;        /* Full width OF THE PARENT, not viewport */
    max-width: none;    /* Removes Gutenberg's clamp */
    padding-left: 0;    /* Prevents double padding */
    padding-right: 0;
}

/* Ensure children retain correct box sizing */
.wp-block-group.is-layout-constrained .dre-snips1 *,
.wp-block-group.is-layout-constrained .dre-sw1-quiz * {
    box-sizing: border-box;
}

/* END UPDATED SAFE FIX */