/* ==========================================================
   DRE BLOCK SYSTEM — Solid, Soft & Title Blocks
   Purpose:
   - Visual framing
   - Typography safety
   - NO exercise layout control except where intentional
========================================================== */

/* ==========================================================
   BASE DRE BLOCK CONTAINER
========================================================== */

.wp-block-group[class*="is-style-dre-block-"]{
    border:1px solid #D9D9DF;
    border-radius:12px;
    margin:32px 0;
    overflow:hidden;
    background:#ffffff;
    box-shadow:0 2px 4px rgba(0,0,0,.05);
    padding:0 !important;
}

/* ==========================================================
   TYPOGRAPHY INSIDE BLOCKS
   (Font sizes come from style.css)
========================================================== */


	
	
.wp-block-group[class*="is-style-dre-block-"] p{
    margin:0 0 10px 0 !important;
    padding:0 18px !important;
    color:#333;
    line-height:1.55;
}

.wp-block-group[class*="is-style-dre-block-"] h2,
.wp-block-group[class*="is-style-dre-block-"] h3{
    font-family:"Nunito",sans-serif !important;
    font-weight:800 !important;
    margin:0 !important;
}

/* H2 */
.wp-block-group[class*="is-style-dre-block-"] h2{
    font-size:1.8rem !important;
    padding:14px 18px !important;
    line-height:1.25 !important;
}

/* H3 */
.wp-block-group[class*="is-style-dre-block-"] h3{
    font-size:1.55rem !important;
    padding:10px 18px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
}
/* ==========================================================
ADDED
========================================================== */

.wp-block-group[class*="is-style-dre-block-"] h1{
    font-size:1.6rem !important;
    padding:14px 18px !important;
    line-height:1.25 !important;
}
/* ==========================================================
   SOLID BLOCKS
========================================================== */

.wp-block-group.is-style-dre-block-solid-blue h2{background:#18A5DD !important;color:#fff !important;}
.wp-block-group.is-style-dre-block-solid-pink h2{background:#ED4DB4 !important;color:#fff !important;}
.wp-block-group.is-style-dre-block-solid-grey h2{background:#4F535D !important;color:#fff !important;}

.wp-block-group.is-style-dre-block-solid-blue h3{color:#ED4DB4;}
.wp-block-group.is-style-dre-block-solid-pink h3{color:#4F535D;}
.wp-block-group.is-style-dre-block-solid-grey h3{color:#ED4DB4;}

/* ==========================================================
   SOFT BLOCKS
========================================================== */

.wp-block-group[class*="is-style-dre-block-soft"] h2{
    background:#F8F8F9 !important;
    border-bottom:1px solid #DDD;
}

.wp-block-group.is-style-dre-block-soft-blue h2{color:#18A5DD !important;}
.wp-block-group.is-style-dre-block-soft-blue h3{color:#ED4DB4;}

.wp-block-group.is-style-dre-block-soft-pink h2{color:#ED4DB4 !important;}
.wp-block-group.is-style-dre-block-soft-pink h3{color:#4F535D;}

.wp-block-group.is-style-dre-block-soft-grey h2{color:#4F535D !important;}
.wp-block-group.is-style-dre-block-soft-grey h3{color:#ED4DB4;}

.wp-block-group.is-style-dre-block-soft-white h2{
    background:#ffffff !important;
    color:#4F535D !important;
}

.wp-block-group.is-style-dre-block-soft-white h3{color:#ED4DB4;}

/* ==========================================================
   TITLE BLOCK (H1)
========================================================== */

.wp-block-group.is-style-dre-title-block{
    border:4px solid #18A5DD;
    border-radius:14px;
    box-shadow:0 2px 4px rgba(0,0,0,.05);
    margin:36px 0;
    overflow:hidden;
    background:#ffffff;
}

.wp-block-group.is-style-dre-title-block h1{
    background:#18A5DD !important;
    color:#ffffff !important;
    font-family:"Nunito",sans-serif !important;
    font-weight:800 !important;
    font-size:1.80rem !important;
    line-height:1.5 !important;
    margin:0 !important;
    padding:18px 24px !important;
}

.wp-block-group.is-style-dre-title-block > p{
    margin:0 !important;
    padding:16px 24px !important;
    line-height:1.55;
    color:#333 !important;
}

/* ==========================================================
   MOBILE — FULL-WIDTH DRE BLOCKS
========================================================== */

@media (max-width: 640px) {

    /* Make DRE blocks full viewport width */
    .wp-block-group.is-layout-constrained >
    .wp-block-group[class*="is-style-dre-block-"]{
        width:100vw !important;
        max-width:100vw !important;
        margin-left:calc(50% - 50vw) !important;
        margin-right:calc(50% - 50vw) !important;
        border-radius:0 !important;
    }

    /* Readable insets for headings and paragraphs */
    .wp-block-group[class*="is-style-dre-block-"] h1,
    .wp-block-group[class*="is-style-dre-block-"] h2,
    .wp-block-group[class*="is-style-dre-block-"] h3,
    .wp-block-group[class*="is-style-dre-block-"] p{
        padding-left:20px !important;
        padding-right:20px !important;
    }

    /* Exercise wrappers fill available width */
    .dre-snips1,
    .dre-sw1-quiz,
    .dre-dictation,
    .dre-inline-video,
    .dre-transcript{
        width:100%;
        max-width:none !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    /* ------------------------------------------------------
       SNIPS ONLY — mobile inset cards + controls
       (SWIPE intentionally excluded)
    ------------------------------------------------------ */

    .dre-snips1-item{
        margin-left:20px !important;
        margin-right:20px !important;
        border-radius:14px !important;
        overflow:hidden;
    }

    .dre-snips1-check,
    .dre-snips1-showanswers{
        margin-left:20px !important;
        margin-right:20px !important;
    }

    /* Remove WordPress padding that blocks full-width */
    .wp-block-group.is-layout-constrained,
    .entry-content,
    .wp-site-blocks,
    .wp-block-group__inner-container{
        padding-left:0 !important;
        padding-right:0 !important;
    }
}