/* ==========================================================
   DRE BLOCK SYSTEM — Solid, Soft & Title Blocks
   Purpose:
   - Visual framing only
   - Typography safety
   - NO global layout or vertical rhythm control
========================================================== */


/* ==========================================================
   BASE DRE BLOCK CONTAINER (NO MARGINS)
========================================================== */



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

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

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

.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{
    font-family:"Nunito",sans-serif !important;
    font-weight:800 !important;
    margin:0 !important;
}

/* H1 (rare, but supported safely) */
.wp-block-group[class*="is-style-dre-block-"] h1{
    font-size:1.6rem !important;
    padding:14px 18px !important;
    line-height:1.25 !important;
}

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

/* H3 */
.wp-block-group[class*="is-style-dre-block-"] h3{
    font-size:1.55rem !important;
   padding:8px 18px !important;
    line-height:1.35 !important;
    font-weight:700 !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 — WORKING BASELINE (ROLLBACK VERSION) */

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

    /* slight buffer from border */
    padding: 4px !important;
}

/* neutralise Gutenberg inner container */
.wp-block-group.is-style-dre-title-block > .wp-block-group__inner-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* H1 — blue title bar */
.wp-block-group.is-style-dre-title-block h1.wp-block-heading {
    background: #18A5DD !important;
    color: #ffffff !important;

    font-family: "Nunito", sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.8rem !important;
    line-height: 1.4 !important;

    width: 100%;
    margin: 0 !important;
    padding: 18px 24px !important;

    border-radius: 10px 10px 0 0;
}

/* Intro paragraph — indented, readable */
.wp-block-group.is-style-dre-title-block p {
    margin: 0 !important;
    padding: 16px 24px !important;
    line-height: 1.45;
    color: #333 !important;
}


@media (max-width: 640px) {

    .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;
    }

    .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 insets */
    .dre-snips1-item,
    .dre-snips1-check,
    .dre-snips1-showanswers{
        margin-left:20px !important;
        margin-right:20px !important;
    }
}
/* ==========================================================
   🔒 HARD RESET: BLOCK VERTICAL SPACING (CONTENT ONLY)
   This neutralises Gutenberg + theme block margins
========================================================== */

.entry-content .wp-block {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* Spacing ONLY between top-level blocks */
.entry-content > .wp-block + .wp-block {
    margin-top: 12px;
}


@media (max-width: 640px) {
    .entry-content > .wp-block + .wp-block {
        margin-top: 8px;
    }
}


/* ==========================================================
   DRE BLOCK — SMALL INNER TOP GAP (CONTROLLED)
========================================================== */

.wp-block-group[class*="is-style-dre-block-"]
> .wp-block-group__inner-container
> *:first-child {
    margin-top: 6px;
}

/* ==========================================================
   DRE UNIT SPACING — REDUCE TOP AIR INSIDE BLOCKS
========================================================== */

/* Tighten space between block header and first unit */
.wp-block-group[class*="is-style-dre-block-"]
.dre-snips1,
.wp-block-group[class*="is-style-dre-block-"]
.dre-sw1-quiz,
.wp-block-group[class*="is-style-dre-block-"]
.dre-dictation,
.wp-block-group[class*="is-style-dre-block-"]
.dre-inline-video {
    margin-top: 6px !important;
    padding-top: 6px !important;
}
/* Subtle internal spacing inside DRE blocks */
.wp-block-group[class*="is-style-dre-block-"] > * + * {
    margin-top: 8px;
}