/**
 * Mindfulness & Meditation Teacher Training (MTT) page styles.
 *
 * Scoped to the `mtt-page` body class (added by `zenways_mtt_body_class` for
 * the three MTT page templates: Pathway, Module 1, Module 3).
 *
 * Structural note: MTT pages render through Divi's `page.php` → `#main-content`
 * → `<article>` → `.entry-content`. The `zenways_mtt_force_pagebuilder_layout`
 * filter makes Divi treat them as page-builder pages so the extra
 * `.container > #content-area > #left-area` wrapper is skipped and the content
 * column / sidebar behaviour matches the rest of the site. This stylesheet
 * therefore targets `.mtt-page .entry-content` as the content container
 * (NOT a custom `.mtt-container`), so the MTT content sits inside Divi's
 * own layout widths rather than overriding them.
 *
 * Brand tokens (pulled from zenways.org global customizer):
 *   - Red      #ED1C24  (primary CTA, accent rules, emphasis)
 *   - Red alt  #e52321  (hover / slight deepening)
 *   - Sage     #D2D5C9  (secondary button hover, soft surfaces)
 *   - Cream    #f9f8f7  (body background on prod)
 *   - Off      #F3F1EF  (panel surfaces)
 *   - Text     #262626  body, #000 headings
 *   - Body font     'Open Sans', Helvetica, Arial, sans-serif
 *   - Heading font  'Source Sans Pro', Helvetica, Arial, sans-serif
 */

/* -----------------------------------------------------------------
   1. Page shell — reading column inside Divi's layout
   ----------------------------------------------------------------- */

.mtt-page {
    background: #f9f8f7;
    color: #262626;
}

.mtt-page #main-content {
    font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
    line-height: 1.6;
}

/* Divi article defaults to a framed card on regular pages; MTT pages flow
   the whole post inside the shared cream background, so neutralise it. */
.mtt-page #main-content article.et_pb_post,
.mtt-page #main-content article.page {
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}

/* The first Divi section on the MTT content layout wraps the hero. Zero
   its top padding so the hero image sits flush at y=0 below the
   absolutely-positioned Divi header (see section 3). The hero's own
   inner content (.mtt-hero for the 3 original pages; the inline
   et_pb_row for /mtt/ and /mtt/additional-modules/) supplies ~180px of
   top clearance so the h1 clears the ~170px header. */
.mtt-page .entry-content .et_pb_section:first-child,
.mtt-page .entry-content > .et_pb_section:first-of-type {
    padding-top: 0 !important;
}

/* First Divi row in the first section fills the full-bleed hero. For the
   3 original MTT pages (Pathway / Module 1 / Module 3), the row wraps a
   .mtt-hero div that provides its own padding, so the row must have zero
   top padding (otherwise Divi's default 27px leaves a gap above the
   hero image). For /mtt/ and /mtt/additional-modules/ the row itself
   carries a 180px top custom_padding to clear the absolute header, and
   we must NOT zero it — use :has(.mtt-hero) to target only the old
   pages. */
.mtt-page .entry-content .et_pb_section:first-child .et_pb_row:first-child,
.mtt-page .entry-content > .et_pb_section:first-of-type > .et_pb_row:first-of-type {
    width: 100%;
    max-width: 100%;
}

.mtt-page .entry-content .et_pb_section:first-child .et_pb_row:first-child:has(.mtt-hero),
.mtt-page .entry-content > .et_pb_section:first-of-type > .et_pb_row:first-of-type:has(.mtt-hero) {
    padding-top: 0 !important;
}

/* And zero the text-module top padding — it's the innermost wrapper before
   our .mtt-content div. */
.mtt-page .entry-content .et_pb_section:first-child .et_pb_text:first-child {
    padding-top: 0 !important;
}

/* Divi rows default to 90% width inside the section, which would waste
   ~10% of our 1000px column. Let rows fill the entry-content width so the
   reading column really is ~1000px of usable content. */
.mtt-page .entry-content .et_pb_row {
    width: 100%;
    max-width: 100%;
}

/* Bring the MTT content into a ~1000px reading column on desktop, honouring
   Divi's outer gutters but keeping line lengths comfortable. Individual
   blocks (hero, booking strip, nudge) break out below.

   Pure-white content card sits on the cream body so the reading column is
   visually distinct from the full-bleed hero. */
.mtt-page:not(.mtt-page-combined) .entry-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px 56px;
    background: #fff;
}

/* New combined pages (/mtt/, /mtt/additional-modules/) run full-bleed:
   every et_pb_section spans the viewport, inner rows carry their own
   max-width. No reading-column wrapper. */
.mtt-page-combined .entry-content {
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
}
.mtt-page-combined .entry-content .et_pb_section {
    width: 100%;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
/* Safety net: any Divi row without an explicit max-width override
   centers at 1100px with 28px side padding so text blocks never
   flush to the viewport edges. Rows that set their own max_width
   via the Divi attribute win via inline style specificity. */
.mtt-page-combined .entry-content .et_pb_row {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 28px;
    padding-right: 28px;
    box-sizing: border-box;
}
/* Suppress the global h2::after red divider on combined pages — those
   pages use et_pb_divider modules per-section instead. */
.mtt-page-combined .entry-content h2::after {
    content: none;
}
/* Collapse excessive section padding when a section holds nothing but
   a heading + single divider (common pattern that the restyle agents
   produced where the intended image row didn't render). */
.mtt-page-combined .entry-content .et_pb_section {
    padding-top: clamp(40px, 6vw, 80px);
    padding-bottom: clamp(40px, 6vw, 80px);
}

/* -----------------------------------------------------------------
   2. Typography
   ----------------------------------------------------------------- */

.mtt-page .entry-content h1,
.mtt-page .entry-content h2,
.mtt-page .entry-content h3,
.mtt-page .entry-content h4,
.mtt-page .entry-content h5,
.mtt-page .entry-content h6 {
    font-family: 'Source Sans Pro', Helvetica, Arial, Lucida, sans-serif;
    color: #000;
    line-height: 1.25;
    font-weight: 600;
}

.mtt-page .entry-content h2 {
    font-size: 2em;
    margin: 2.4em 0 0.6em;
}

/* Red h2 underline removed at Mark's request (2026-06-08) — it appeared
   automatically on every H2 in the Divi editor and he found it unhelpful. */

.mtt-page .entry-content h3 {
    font-size: 1.45em;
    margin: 1.8em 0 0.45em;
    color: #111;
}

.mtt-page .entry-content h4 {
    font-size: 1.15em;
    margin: 1.4em 0 0.4em;
    color: #262626;
}

.mtt-page .entry-content p {
    margin: 0 0 1em;
    font-size: 1.05em;
}

.mtt-page .entry-content strong {
    color: #000;
}

.mtt-page .entry-content em {
    color: #333;
}

.mtt-page .entry-content a {
    color: #ED1C24;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mtt-page .entry-content a:hover {
    color: #e52321;
}

.mtt-page .entry-content ul,
.mtt-page .entry-content ol {
    padding-left: 1.4em;
    margin: 0 0 1.2em;
}

.mtt-page .entry-content ul {
    list-style: none;
    padding-left: 0;
}

.mtt-page .entry-content ul li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 0.5em;
}

.mtt-page .entry-content ul li::before {
    content: '\25B8';            /* small right-pointing triangle */
    color: #ED1C24;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.95em;
    /* Align the marker to the FIRST text line: match the list-item line-height
       (body copy renders at ~1.6) instead of the old 1.7, which floated the
       triangle above the text. */
    line-height: inherit;
}
/* Ensure list items carry a definite line-height for the marker to align to. */
.mtt-page .entry-content ul li {
    line-height: 1.6;
}

.mtt-page .entry-content ol li {
    margin-bottom: 0.5em;
}

.mtt-page .entry-content blockquote {
    border-left: 3px solid #ED1C24;
    margin: 1.5em 0;
    padding: 0.6em 1.2em;
    font-style: italic;
    color: #333;
    background: #F3F1EF;
    border-radius: 0 4px 4px 0;
}

/* Graduate testimonials — reuse the blockquote card above; add only layout,
   the attribution row, and the optional round photo. No new card style. */
.mtt-page .entry-content .mttv8-quotes {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 8px 0 0;
}
.mtt-page .entry-content .mttv8-quotes blockquote.mttv8-quote {
    margin: 0;            /* grid gap owns the spacing, not blockquote's 1.5em */
}
.mtt-page .entry-content .mttv8-quote__text {
    margin: 0;
}
.mtt-page .entry-content .mttv8-quote__cite {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    font-style: normal;
    font-weight: 600;
    color: #555;
    font-size: 0.95em;
}
.mtt-page .entry-content .mttv8-quote__photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

/* Icon row — breaks up text (Mark, 17 Jun). Scaffold renders dashed empty
   slots until his icon art arrives; real <img> icons drop into the same slots.
   Reuses existing tokens only (sage #F3F1EF, neutral #e6e6e2). */
.mtt-page .entry-content .mttv8-iconrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px 36px;
    margin: 28px 0 6px;
}
.mtt-page .entry-content .mttv8-iconrow__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 120px;
}
.mtt-page .entry-content .mttv8-iconrow__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #F3F1EF;
    border: 1px solid #e6e6e2;
}
.mtt-page .entry-content .mttv8-iconrow__icon--empty {
    border-style: dashed;
    border-color: #C9C7C1;
    background: #F9F8F7;
}
.mtt-page .entry-content .mttv8-iconrow__img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}
.mtt-page .entry-content .mttv8-iconrow__label {
    margin-top: 10px;
    font-size: 0.9em;
    color: #555;
    line-height: 1.3;
}
.mtt-page .entry-content .mttv8-iconrow__label--empty {
    width: 70px;
    height: 0.7em;
    margin-top: 12px;
    border-radius: 4px;
    background: #ECEAE6;
}
.mtt-page .entry-content .mttv8-iconrow__note {
    text-align: center;
    color: #999;
    font-style: italic;
    font-size: 0.85em;
    margin: 4px 0 0;
}

/* -----------------------------------------------------------------
   3. Hero — full-bleed, reaches viewport top (prod homepage pattern)
   -----------------------------------------------------------------

   Prod pattern (zenways.org): the Divi Theme Builder header section
   (.et_pb_section_0_tb_header) is `position: absolute; top: 0` with a
   transparent background, so the hero image extends all the way to
   y=0 and the header/logo/menu overlay it. On prod the menu text
   flips to WHITE over a dark hero.

   Our MTT variant keeps the hero-to-top pattern BUT keeps the menu
   text BLACK (the Zenways default). To stay legible over an arbitrary
   hero image, we paint the header a semi-opaque cream (~90% opacity)
   so it reads as a light header band with the hero bleeding through
   slightly. Logo keeps its natural red/black colours. Scoped to
   body.mtt-page so other biz pages keep their solid static header. */

body.mtt-page .et-l--header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

/* Fully transparent header so the hero image extends all the way to
   the top edge of the viewport (prod-homepage pattern). Menu text is
   already forced black elsewhere — a soft white text-shadow keeps it
   legible when the hero image behind the menu area is dark. A very
   subtle top-to-bottom fade (2% cream) sits at the very top so the
   logo area has a whisper of lift without reading as a "bar". */
body.mtt-page .et-l--header .et_pb_section {
    background-color: transparent !important;
    background-image:
        linear-gradient(to bottom, rgba(249, 248, 247, 0.18) 0%, rgba(249, 248, 247, 0) 90%) !important;
    box-shadow: none !important;
}
body.mtt-page .et-menu li a,
body.mtt-page .et-menu-nav li a {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85), 0 0 14px rgba(255, 255, 255, 0.7);
}

/* Logo: natural colors — no invert. */
body.mtt-page .et-l--header .et_pb_image img,
body.mtt-page .et-l--header .logo_container img {
    filter: none;
}

.mtt-page .entry-content .mtt-hero {
    /* Break out of the 1000px reading column back to the full viewport. */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    /* Dark gradient overlay on top of a meditation/Zen image so the headline
       stays readable regardless of the underlying photo. Per-page overrides
       below swap the URL if we want a different image per page. */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.48)),
        url('/wp-content/uploads/2023/10/AdobeStock_274225508-scaled.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    /* Hero stretches to viewport top (y=0); padding-top clears the ~170px
       absolutely-positioned header so the h1 doesn't land under the menu.
       Matches prod: ~630px tall. */
    min-height: 630px;
    padding: 200px 24px 60px;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mtt-page .entry-content .mtt-hero h1 {
    font-family: 'Source Sans Pro', Helvetica, Arial, Lucida, sans-serif;
    font-size: 2.75em;
    line-height: 1.15;
    color: #fff;
    margin: 0 auto 0.35em;
    max-width: 820px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.mtt-page .entry-content .mtt-hero .mtt-subline {
    font-size: 1.2em;
    color: #f4f4f4;
    max-width: 680px;
    margin: 0 auto 1.6em;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.mtt-page .entry-content .mtt-hero-ctas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 1.2em;
}

.mtt-page .entry-content .mtt-hero-ctas > * {
    margin: 0;
}

/* IMTA accreditation — small logo on the hero with a visible caption below. */
.mtt-page .entry-content .mtt-hero-accred {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 28px auto 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    color: #fff;
    transition: opacity 0.2s ease, transform 0.1s ease;
}

.mtt-page .entry-content .mtt-hero-accred:hover {
    opacity: 0.9;
    text-decoration: none;
    color: #fff;
}

.mtt-page .entry-content .mtt-hero-accred:active {
    transform: translateY(1px);
}

.mtt-page .entry-content .mtt-hero-accred img {
    display: block;
    height: auto;
    width: auto;
    max-width: 130px;
    max-height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.mtt-page .entry-content .mtt-hero-accred span {
    display: block;
    font-family: 'Source Sans Pro', Helvetica, Arial, Lucida, sans-serif;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* -----------------------------------------------------------------
   4. Buttons — layer on top of Divi's .et_pb_button base
   ----------------------------------------------------------------- */

.mtt-page .entry-content .mtt-book-now-wrapper {
    display: inline-block;
    margin: 0;
}

.mtt-page .entry-content a.et_pb_button,
.mtt-page .entry-content a.et_pb_button:hover {
    display: inline-block;
    padding: 14px 28px !important;
    font-family: 'Source Sans Pro', Helvetica, Arial, Lucida, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 4px !important;
    border: 2px solid transparent !important;
    line-height: 1.2;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.mtt-page .entry-content a.et_pb_button:active {
    transform: translateY(1px);
}

/* Primary (red) — Book Now */
.mtt-page .entry-content a.et_pb_button.mtt-book-now-btn {
    background-color: #ED1C24 !important;
    border-color: #ED1C24 !important;
    color: #fff !important;
}

.mtt-page .entry-content a.et_pb_button.mtt-book-now-btn:hover {
    background-color: #e52321 !important;
    border-color: #e52321 !important;
    color: #fff !important;
}

/* Secondary (outline red) — Free Intro / View Dates */
.mtt-page .entry-content a.et_pb_button.mtt-intro-btn,
.mtt-page .entry-content a.et_pb_button.mtt-secondary-btn {
    background-color: transparent !important;
    border-color: #ED1C24 !important;
    color: #ED1C24 !important;
}

.mtt-page .entry-content a.et_pb_button.mtt-intro-btn:hover,
.mtt-page .entry-content a.et_pb_button.mtt-secondary-btn:hover {
    background-color: #ED1C24 !important;
    border-color: #ED1C24 !important;
    color: #fff !important;
}

/* Tertiary (sage) — Contact */
.mtt-page .entry-content a.et_pb_button.mtt-contact-btn {
    background-color: #D2D5C9 !important;
    border-color: #D2D5C9 !important;
    color: #000 !important;
}

.mtt-page .entry-content a.et_pb_button.mtt-contact-btn:hover {
    background-color: #c4c8b9 !important;
    border-color: #c4c8b9 !important;
    color: #000 !important;
}

/* -----------------------------------------------------------------
   5. Booking strip (persistent CTA rail)
   ----------------------------------------------------------------- */

.mtt-page .entry-content .mtt-booking-strip {
    background: #D2D5C9;
    border-radius: 10px;
    padding: 22px 28px;
    margin: 32px 0;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* STICKY booking strip (Mark's request) — on the V8 pathway pages the booking
   strip pins to the top of the viewport as the reader scrolls, so the dates +
   price + Book CTA stay reachable. The header is static on these pages (see the
   hero-strip block), so the strip pins to top:0 with a small gap. Scoped to
   .mtt-page-combined so the legacy MTT pages are unaffected. The strip stays a
   normal flex row when pinned (usable, not collapsed). A condensed, tighter
   pinned state keeps it from dominating the viewport. */
.mtt-page-v8 .entry-content .mtt-booking-strip {
    padding: 16px 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
/* Pin the booking strip across the WHOLE page: position:sticky on the SECTION,
   whose containing block is the tall .et_builder_inner_content (~14k px), so it
   stays pinned the whole scroll. (CSS sticky on the strip itself only pins within
   its short parent text module; Divi's sticky_position attr is ignored by a raw
   shortcode.) The site header is static (scrolls away), so top:0 is correct. */
.mtt-page-v8 .entry-content .et_pb_section.v8-sticky-strip-section {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
}

.mtt-page .entry-content .mtt-booking-strip__info,
.mtt-page .entry-content .mtt-booking-strip > .mtt-strip-dates,
.mtt-page .entry-content .mtt-booking-strip > .mtt-strip-price {
    display: inline-block;
}

.mtt-page .entry-content .mtt-strip-dates {
    font-size: 1.05em;
    font-weight: 600;
    color: #000;
    margin-right: 4px;
}

.mtt-page .entry-content .mtt-strip-price {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 1.35em;
    font-weight: 700;
    color: #ED1C24;
    margin-right: auto;
}

.mtt-page .entry-content .mtt-strip-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* -----------------------------------------------------------------
   6. Booking nudge (inline mid-page CTA)
   ----------------------------------------------------------------- */

.mtt-page .entry-content .mtt-booking-nudge {
    background: #F3F1EF;
    border: 1px solid rgba(237, 28, 36, 0.15);
    border-radius: 10px;
    padding: 28px 24px;
    margin: 40px 0;
    text-align: center;
}

.mtt-page .entry-content .mtt-booking-nudge .mtt-nudge-label {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 1.35em;
    font-weight: 600;
    color: #000;
    margin: 0 0 1em;
}

.mtt-page .entry-content .mtt-booking-nudge .mtt-nudge-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* -----------------------------------------------------------------
   7. Placeholder (dev-visible, not embarrassingly ugly)
   ----------------------------------------------------------------- */

.mtt-page .entry-content .mtt-placeholder {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1.5px dashed #c0c0c0;
    background: rgba(255, 255, 255, 0.55);
    color: #666;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 0.95em;
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
}

.mtt-page .entry-content .mtt-placeholder::before {
    content: 'TODO';
    background: #ED1C24;
    color: #fff;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    line-height: 1;
}

/* When a placeholder appears inside CTA rows, match button height */
.mtt-page .entry-content .mtt-hero-ctas .mtt-placeholder,
.mtt-page .entry-content .mtt-strip-actions .mtt-placeholder,
.mtt-page .entry-content .mtt-nudge-actions .mtt-placeholder {
    padding: 12px 18px;
}

/* -----------------------------------------------------------------
   8. FAQ — native <details>/<summary> collapsibles
   ----------------------------------------------------------------- */

.mtt-page .entry-content details.mtt-faq-item,
.mtt-page .entry-content details {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 0;
    margin: 0 0 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.mtt-page .entry-content details[open] {
    border-color: rgba(237, 28, 36, 0.45);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.mtt-page .entry-content details summary {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 1.05em;
    color: #111;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    user-select: none;
    outline: none;
}

/* Hide the default disclosure triangle on all browsers. */
.mtt-page .entry-content details summary::-webkit-details-marker {
    display: none;
}
.mtt-page .entry-content details summary::marker {
    content: '';
}

.mtt-page .entry-content details summary:hover {
    color: #ED1C24;
}

/* Chevron-style indicator that rotates on open. */
.mtt-page .entry-content details summary::after {
    content: '';
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid #ED1C24;
    border-bottom: 2px solid #ED1C24;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -4px;
}

.mtt-page .entry-content details[open] summary::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

/* Answer block — wrap in .mtt-faq-answer but also work on loose <p>
   siblings for resilience. Pad symmetrically with the summary. */
.mtt-page .entry-content details > .mtt-faq-answer {
    padding: 0 20px 18px;
    border-top: 1px solid #f1f1f1;
}
.mtt-page .entry-content details > .mtt-faq-answer > *:first-child {
    margin-top: 14px;
}
.mtt-page .entry-content details > .mtt-faq-answer > *:last-child {
    margin-bottom: 0;
}

/* Fallback if the markup is <details><summary>Q</summary><p>A</p></details>
   without the wrapper div. */
.mtt-page .entry-content details > p {
    padding: 0 20px 14px;
    margin: 0;
}
.mtt-page .entry-content details > p:first-of-type {
    padding-top: 4px;
    border-top: 1px solid #f1f1f1;
}

/* -----------------------------------------------------------------
   9. Responsive
   ----------------------------------------------------------------- */

@media (max-width: 768px) {
    .mtt-page .entry-content {
        padding: 0 20px 40px;
    }

    .mtt-page .entry-content .mtt-hero {
        /* On mobile the absolute TB header is shorter (hamburger menu).
           Dial the padding-top back but keep the hero stretched to
           viewport top. */
        min-height: 500px;
        padding: 150px 20px 50px;
    }

    /* Mobile: keep the header transparent so the hero still fills to the
       top edge. When the user taps the hamburger, Divi's own mobile-menu
       drawer provides its own backdrop. */
    body.mtt-page .et-l--header .et_pb_section {
        background-color: transparent !important;
    }

    .mtt-page .entry-content .mtt-hero h1 {
        font-size: 2em;
    }

    .mtt-page .entry-content .mtt-hero .mtt-subline {
        font-size: 1.05em;
    }

    .mtt-page .entry-content .mtt-hero-accred {
        margin-top: 24px;
    }

    .mtt-page .entry-content .mtt-hero-accred img {
        max-width: 100px;
        max-height: 70px;
    }

    .mtt-page .entry-content .mtt-hero-accred span {
        font-size: 0.72em;
    }

    .mtt-page .entry-content h2 {
        font-size: 1.6em;
    }

    .mtt-page .entry-content h3 {
        font-size: 1.25em;
    }

    .mtt-page .entry-content .mtt-booking-strip {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 20px;
    }

    .mtt-page .entry-content .mtt-strip-price {
        margin-right: 0;
    }

    .mtt-page .entry-content .mtt-strip-actions {
        justify-content: center;
    }

    .mtt-page .entry-content a.et_pb_button {
        padding: 12px 22px !important;
        font-size: 13px;
    }
}

/* -----------------------------------------------------------------
   Force menu text BLACK everywhere on MTT pages, overriding the
   theme's default red styling on current-menu-item /
   current-menu-ancestor states (which WordPress auto-applies to the
   page you're on and every parent dropdown that contains it).
   Without this, the item you're viewing and every dropdown parent
   render red, which reads as "menu text is red" even though the
   default (non-current) menu items are black.
   ----------------------------------------------------------------- */

/* Top-level menu text on MTT pages: WHITE so it's legible over the
   transparent header / hero. Scope to DIRECT children of the menu root
   (`> li > a`) so the forced-white does NOT cascade into dropdown
   sub-menu children — those inherit the theme's native behavior
   (black default / red current / sage hover), identical to home. */
body.mtt-page nav.et-menu-nav > ul > li > a,
body.mtt-page ul#menu-main > li > a,
body.mtt-page .et-menu-nav > ul.et-menu > li > a {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
body.mtt-page nav.et-menu-nav > ul > li.current-menu-item > a,
body.mtt-page nav.et-menu-nav > ul > li.current-menu-ancestor > a,
body.mtt-page nav.et-menu-nav > ul > li.current_page_item > a,
body.mtt-page nav.et-menu-nav > ul > li.current_page_ancestor > a,
body.mtt-page nav.et-menu-nav > ul > li.current_page_parent > a,
body.mtt-page ul#menu-main > li.current-menu-item > a,
body.mtt-page ul#menu-main > li.current-menu-ancestor > a,
body.mtt-page ul#menu-main > li.current_page_item > a,
body.mtt-page ul#menu-main > li.current_page_ancestor > a {
    color: #fff !important;
}
body.mtt-page nav.et-menu-nav > ul > li > a:hover,
body.mtt-page nav.et-menu-nav > ul > li > a:focus,
body.mtt-page ul#menu-main > li > a:hover,
body.mtt-page ul#menu-main > li > a:focus {
    color: #fff !important;
    opacity: 0.85;
}
/* Mobile hamburger dropdown: keep text dark because it slides over a
   light panel, and ONLY on the mobile menu. Desktop dropdown is left
   to the theme's native styling. */
body.mtt-page .et_mobile_menu li a {
    color: #000 !important;
    text-shadow: none !important;
}

/* -----------------------------------------------------------------
   Menu item DEV badge — for the experimental /mtt/ entry nested
   inside the Train To Teach dropdown. Applied via menu-item class
   `mtt-dev-badge` (set by scripts/create-mtt-combined-pages.php).
   Unlike the rules above, this is NOT scoped to .mtt-page — the
   badge needs to render on every page so Mark can spot the in-dev
   item from anywhere.
   ----------------------------------------------------------------- */

.menu-item.mtt-dev-badge > a::after {
    content: "DEV";
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    line-height: 1.4;
    background: #ED1C24;
    color: #fff;
    border-radius: 10px;
    vertical-align: middle;
    text-transform: uppercase;
}

/* Soft pulse so the dev flag actually catches the eye */
.menu-item.mtt-dev-badge > a::after {
    animation: mtt-dev-pulse 2.4s ease-in-out infinite;
}
@keyframes mtt-dev-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(237, 28, 36, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(237, 28, 36, 0); }
}

/* =================================================================
   ZWS008 — V8 Mindfulness Pathway pages (/mindfulness-pathway/ + /modules-2-3/)
   New components for Mark/Cerri's V8 copy. Scoped under .mtt-page, reusing the
   established palette (red #ED1C24, alt #e52321, sage #D2D5C9, off-white #F9F8F7).
   ================================================================= */

/* --- V8 buttons (layer on the shared .et_pb_button base) --------- */
.mtt-page .entry-content .mttv8-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0 4px;
}
.mtt-page .entry-content .mttv8-hero .mttv8-ctas,
.mtt-page .entry-content .mttv8-cta-card .mttv8-ctas {
    justify-content: center;
}
/* SITE-STANDARD button (Mark's request): BLACK with a soft SAGE-GREEN hover.
   These are the Divi global button colours for this site
   (et_divi: all_buttons_bg_color #000000 / text #ffffff / border #000000;
    hover bg #d2d5c9 / text #000000 / border #d2d5c9). Every V8 CTA now uses
   this single vocabulary — no red-fill, no red-outline buttons remain. */
.mtt-page .entry-content a.et_pb_button.mttv8-btn--primary,
.mtt-page .entry-content a.et_pb_button.mttv8-btn--secondary {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}
.mtt-page .entry-content a.et_pb_button.mttv8-btn--primary:hover,
.mtt-page .entry-content a.et_pb_button.mttv8-btn--secondary:hover {
    background-color: #d2d5c9 !important;
    border-color: #d2d5c9 !important;
    color: #000000 !important;
}
/* Ghost = the same standard button shown as an outline (black border on
   transparent), resolving to the standard sage fill on hover. */
.mtt-page .entry-content a.et_pb_button.mttv8-btn--ghost {
    background-color: transparent !important;
    border-color: #000000 !important;
    color: #000000 !important;
}
.mtt-page .entry-content a.et_pb_button.mttv8-btn--ghost:hover {
    background-color: #d2d5c9 !important;
    border-color: #d2d5c9 !important;
    color: #000 !important;
}
/* "Book" buttons await a WooCommerce product_id — same standard button look
   (the dev "set product" badge is hidden on combined pages). */
.mtt-page .entry-content a.et_pb_button.mttv8-btn--book {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    position: relative;
}
/* "set product" dev badge removed — the Book buttons are real CTAs now, and the
   badge was making the Book button taller than the button beside it. */
.mtt-page .entry-content a.et_pb_button.mttv8-btn--book::after { content: none; }
/* Keep all hero/CTA buttons the same height: single centred line, identical box.
   !important + explicit height beats Divi's higher-specificity button rules that
   otherwise let the narrower Book button wrap to two lines. */
.mtt-page .entry-content .mttv8-ctas { align-items: center; }
.mtt-page .entry-content .mttv8-ctas a.et_pb_button.mttv8-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    height: 48px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
}
.mtt-page .entry-content a.et_pb_button.mttv8-btn--book:hover {
    background-color: #d2d5c9 !important;
    border-color: #d2d5c9 !important;
    color: #000000 !important;
}

/* --- Hero additions (eyebrow + sub-headline) -------------------- */
.mtt-page .entry-content .mttv8-eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 700;
    color: #ED1C24;
    margin: 0 0 10px;
}
.mtt-page .entry-content .mttv8-hero-sub {
    font-size: 1.25em;
    font-weight: 600;
    color: #2b2b2b;
    margin: 0 0 14px;
}

/* --- Trust bar -------------------------------------------------- */
.mtt-page .entry-content .mttv8-trustbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 26px;
    padding: 6px 0;
}
.mtt-page .entry-content .mttv8-trustbar span {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #4a4a4a;
    position: relative;
}
.mtt-page .entry-content .mttv8-trustbar span + span::before {
    content: "•";
    color: #ED1C24;
    margin-right: 26px;
    position: absolute;
    left: -29px;
}

/* --- CTA card --------------------------------------------------- */
.mtt-page .entry-content .mttv8-cta-card {
    background: #F3F1EF;
    border: 1px solid rgba(237, 28, 36, 0.15);
    border-radius: 10px;
    padding: 30px 24px;
    text-align: center;
}
.mtt-page .entry-content .mttv8-cta-card h3 {
    margin: 0 0 6px;
}

/* --- Pathway "you are here" map --------------------------------- */
.mtt-page .entry-content .mttv8-pathmap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 6px 0 8px;
}
.mtt-page .entry-content .mttv8-pathcard {
    background: #fff;
    border: 1px solid #e6e6e2;
    border-radius: 10px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
}
.mtt-page .entry-content .mttv8-pathcard--here {
    border-color: #ED1C24;
    box-shadow: 0 4px 16px rgba(237, 28, 36, 0.1);
}
.mtt-page .entry-content .mttv8-pathcard h3 {
    margin: 10px 0 8px;
    font-size: 1.2em;
}
.mtt-page .entry-content .mttv8-pathcard p {
    font-size: 15px;
    flex: 1 1 auto;
}
.mtt-page .entry-content .mttv8-pathcard .mttv8-btn {
    align-self: flex-start;
    margin-top: 10px;
}
.mtt-page .entry-content .mttv8-pathtag {
    display: inline-block;
    align-self: flex-start;
    background: #ED1C24;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 12px;
}
.mtt-page .entry-content .mttv8-pathtag--alt {
    background: #D2D5C9;
    color: #2b2b2b;
}
.mtt-page .entry-content .mttv8-note {
    text-align: center;
    color: #666;
    font-style: italic;
    margin: 18px 0 0;
}

/* --- Module glance / detail cards ------------------------------- */
.mtt-page .entry-content .mttv8-modgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 8px 0 26px;
}
.mtt-page .entry-content .mttv8-quicknav {
    grid-template-columns: repeat(2, 1fr);
}
.mtt-page .entry-content .mttv8-modcard {
    background: #fff;
    border: 1px solid #e6e6e2;
    border-top: 4px solid #ED1C24;
    border-radius: 10px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
}
.mtt-page .entry-content .mttv8-modtag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #ED1C24;
}
.mtt-page .entry-content .mttv8-modcard h3 {
    margin: 6px 0 6px;
    font-size: 1.15em;
}
.mtt-page .entry-content .mttv8-modlede {
    font-weight: 600;
    color: #2b2b2b;
}
.mtt-page .entry-content .mttv8-moddetail {
    margin-top: auto;
    padding-top: 12px;
    font-size: 14px;
    color: #555;
    font-weight: 600;
}
.mtt-page .entry-content .mttv8-modcard .mttv8-btn {
    align-self: flex-start;
    margin-top: 14px;
}

/* --- Module section headers (Page 2 anchors) -------------------- */
.mtt-page .entry-content .mttv8-modhead {
    border-left: 4px solid #ED1C24;
    padding-left: 18px;
    margin-bottom: 6px;
}
.mtt-page .entry-content .mttv8-modhead h2 {
    margin: 6px 0 6px;
}

/* --- Section divider — site brand-red rule (Mark's request) ------
   The site's separator vocabulary is the brand red (#e51a2d, per Mark's
   booking/dates snippets). Used between page sections as a short centred
   red rule. The schematic keeps using this element via .mttv8-schematic__rule. */
.mtt-page .entry-content hr.mttv8-rule {
    border: 0;
    height: 3px;
    width: 64px;
    margin: 8px auto;
    background: #e51a2d;
    border-radius: 2px;
}
/* Full-width section separator variant — a thin brand-red line that sits
   between major content sections on the pathway pages. */
.mtt-page .entry-content hr.mttv8-rule.mttv8-rule--section {
    width: 100%;
    max-width: 220px;
    height: 2px;
    margin: 4px auto 8px;
}

/* --- Insight/grounding callout --------------------------------- */
.mtt-page .entry-content .mttv8-callout {
    background: #F9F8F7;
    border-left: 4px solid #C8A24B;
    border-radius: 0 8px 8px 0;
    padding: 18px 22px;
    font-style: italic;
    color: #333;
    margin: 22px 0;
}

/* --- Fees tables ------------------------------------------------ */
.mtt-page .entry-content table.mttv8-fees {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 22px;
    font-size: 16px;
}
.mtt-page .entry-content table.mttv8-fees caption {
    text-align: left;
    font-weight: 700;
    color: #2b2b2b;
    padding-bottom: 8px;
    caption-side: top;
}
.mtt-page .entry-content table.mttv8-fees th,
.mtt-page .entry-content table.mttv8-fees td {
    padding: 10px 12px;
    border-bottom: 1px solid #ececec;
    text-align: left;
}
.mtt-page .entry-content table.mttv8-fees td {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
}
.mtt-page .entry-content table.mttv8-fees tr.mttv8-fees__total th,
.mtt-page .entry-content table.mttv8-fees tr.mttv8-fees__total td {
    border-top: 2px solid #ED1C24;
    border-bottom: none;
    font-size: 1.05em;
    color: #ED1C24;
}

/* --- FAQs (collapsible) ----------------------------------------- */
.mtt-page .entry-content .mttv8-faqs {
    margin: 12px 0;
}
.mtt-page .entry-content details.mttv8-faq {
    border: 1px solid #e6e6e2;
    border-radius: 8px;
    margin: 0 0 10px;
    background: #fff;
    overflow: hidden;
}
.mtt-page .entry-content details.mttv8-faq summary {
    cursor: pointer;
    padding: 16px 20px;
    font-weight: 600;
    list-style: none;
    position: relative;
    padding-right: 44px;
}
.mtt-page .entry-content details.mttv8-faq summary::-webkit-details-marker { display: none; }
.mtt-page .entry-content details.mttv8-faq summary::marker { content: ""; }
.mtt-page .entry-content details.mttv8-faq summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    color: #ED1C24;
    font-weight: 400;
}
.mtt-page .entry-content details.mttv8-faq[open] summary::after { content: "\2212"; }
.mtt-page .entry-content details.mttv8-faq[open] summary { border-bottom: 1px solid #f0f0ee; }
.mtt-page .entry-content details.mttv8-faq .mttv8-faq__a {
    padding: 6px 20px 18px;
}
.mtt-page .entry-content details.mttv8-faq .mttv8-faq__a p { margin: 0; }

/* --- Pathway recap (gold strip) --------------------------------- */
.mtt-page .entry-content .mttv8-recap {
    text-align: left;
}
.mtt-page .entry-content .mttv8-recap h2 {
    text-align: center;
}
.mtt-page .entry-content .mttv8-recap .mttv8-ctas {
    justify-content: center;
}

/* --- Responsive ------------------------------------------------- */
/* Tablet: 3-col grids drop to 2-col (avoids a cramped 3-across), 2-col to 1. */
@media (max-width: 980px) {
    .mtt-page .entry-content .mttv8-pathmap,
    .mtt-page .entry-content .mttv8-modgrid {
        grid-template-columns: repeat(2, 1fr);
    }
    .mtt-page .entry-content .mttv8-quicknav {
        grid-template-columns: 1fr;
    }
}
/* Phone: everything single-column. */
@media (max-width: 680px) {
    .mtt-page .entry-content .mttv8-pathmap,
    .mtt-page .entry-content .mttv8-modgrid {
        grid-template-columns: 1fr;
    }
}

/* Hero text must read over the dark hero image (eyebrow + sub-headline). */
.mtt-page .entry-content .mtt-hero .mttv8-eyebrow {
    color: #ff8a8f;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.mtt-page .entry-content .mtt-hero .mttv8-hero-sub {
    color: #ffffff;
    opacity: 0.96;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* zws008 v8-revamp CSS appended below */
/* =================================================================
   ZWS008 — Clickable Pathway Schematic / table-of-contents
   Sits near the top of Page 1 (/mindfulness-pathway/). Collapsed by
   default to a tidy strip; expands (native <details>, no JS) to the
   full clickable map + jump list. Scoped under .mtt-page .entry-content,
   classes prefixed .mttv8-schematic. Reuses palette + .mttv8-modtag /
   .mttv8-pathtag / hr.mttv8-rule from mtt.css.
   Palette: red #ED1C24, red-alt #e52321, sage #D2D5C9, off-white #F9F8F7,
   gold #C8A24B, ink #2b2b2b.
   ================================================================= */

.mtt-page .entry-content .mttv8-schematic {
    margin: 8px 0 22px;
}

/* --- Outer frame ------------------------------------------------- */
.mtt-page .entry-content .mttv8-schematic__wrap {
    background: #F9F8F7;
    border: 1px solid #e6e6e2;
    border-top: 3px solid #C8A24B;     /* thin gold rule = "journey" cue */
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.mtt-page .entry-content .mttv8-schematic__wrap[open] {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

/* --- Collapsed strip (summary) ----------------------------------- */
.mtt-page .entry-content .mttv8-schematic__bar {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px 18px;
    flex-wrap: wrap;
    padding: 12px 18px;
    user-select: none;
    outline: none;
}
.mtt-page .entry-content .mttv8-schematic__bar::-webkit-details-marker { display: none; }
.mtt-page .entry-content .mttv8-schematic__bar::marker { content: ""; }
.mtt-page .entry-content .mttv8-schematic__bar:hover .mttv8-schematic__hint-open,
.mtt-page .entry-content .mttv8-schematic__bar:focus-visible .mttv8-schematic__hint-open {
    color: #ED1C24;
}
.mtt-page .entry-content .mttv8-schematic__wrap[open] .mttv8-schematic__bar {
    border-bottom: 1px solid #ececea;
}

.mtt-page .entry-content .mttv8-schematic__eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #ED1C24;
    margin-right: auto;            /* push the rest to the right */
}

/* Mini 1—2—3 rail shown in the collapsed strip */
.mtt-page .entry-content .mttv8-schematic__strip {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.mtt-page .entry-content .mttv8-schematic__pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ED1C24;
    color: #fff;
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}
.mtt-page .entry-content .mttv8-schematic__rail {
    width: 18px;
    height: 2px;
    background: #C8A24B;
    flex: 0 0 auto;
}

/* "Explore / Hide" hint + chevron */
.mtt-page .entry-content .mttv8-schematic__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #2b2b2b;
}
.mtt-page .entry-content .mttv8-schematic__hint-close { display: none; }
.mtt-page .entry-content .mttv8-schematic__wrap[open] .mttv8-schematic__hint-open { display: none; }
.mtt-page .entry-content .mttv8-schematic__wrap[open] .mttv8-schematic__hint-close { display: inline; }
.mtt-page .entry-content .mttv8-schematic__chev {
    width: 8px;
    height: 8px;
    border-right: 2px solid #ED1C24;
    border-bottom: 2px solid #ED1C24;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -3px;
    flex: 0 0 auto;
}
.mtt-page .entry-content .mttv8-schematic__wrap[open] .mttv8-schematic__chev {
    transform: rotate(-135deg);
    margin-top: 3px;
}

/* --- Expanded body ---------------------------------------------- */
.mtt-page .entry-content .mttv8-schematic__body {
    padding: 16px 18px 18px;
}
.mtt-page .entry-content .mttv8-schematic__lead {
    margin: 0 0 14px;
    font-size: 14px;
    color: #555;
}

/* --- The flow: 1 -> 2 -> 3 nodes -------------------------------- */
.mtt-page .entry-content ol.mttv8-schematic__flow {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
}
/* connector arrows between the three nodes (gold chevrons) */
.mtt-page .entry-content .mttv8-schematic__node {
    margin: 0;
    padding: 0;
    display: flex;
}
.mtt-page .entry-content .mttv8-schematic__node::before { content: none; }
.mtt-page .entry-content .mttv8-schematic__node:not(:last-child)::after {
    content: "";
    align-self: center;
    width: 10px;
    height: 10px;
    margin: 0 10px;
    border-right: 2px solid #C8A24B;
    border-top: 2px solid #C8A24B;
    transform: rotate(45deg);
    flex: 0 0 auto;
}

/* node card */
.mtt-page .entry-content a.mttv8-schematic__card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid #e6e6e2;
    border-radius: 10px;
    padding: 14px 14px 13px;
    text-decoration: none;
    color: #2b2b2b;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}
.mtt-page .entry-content a.mttv8-schematic__card:hover,
.mtt-page .entry-content a.mttv8-schematic__card:focus-visible {
    border-color: #ED1C24;
    box-shadow: 0 4px 16px rgba(237, 28, 36, 0.10);
    color: #2b2b2b;
    text-decoration: none;
}
.mtt-page .entry-content a.mttv8-schematic__card:active {
    transform: translateY(1px);
}
.mtt-page .entry-content a.mttv8-schematic__card--here {
    border-color: #ED1C24;
    box-shadow: 0 4px 16px rgba(237, 28, 36, 0.08);
}

/* number-badge + modtag (matches existing .mttv8-modtag) */
.mtt-page .entry-content .mttv8-schematic__tag {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mtt-page .entry-content .mttv8-schematic__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ED1C24;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}
.mtt-page .entry-content .mttv8-schematic__name {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #111;
    line-height: 1.25;
}
.mtt-page .entry-content .mttv8-schematic__where {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #ED1C24;
    margin-top: auto;
}
.mtt-page .entry-content a.mttv8-schematic__card:not(.mttv8-schematic__card--here) .mttv8-schematic__where {
    color: #8a8a86;
}
.mtt-page .entry-content a.mttv8-schematic__card:hover .mttv8-schematic__where,
.mtt-page .entry-content a.mttv8-schematic__card:focus-visible .mttv8-schematic__where {
    color: #ED1C24;
}

/* --- Sibling further-training tracks (secondary nodes) ---------- */
.mtt-page .entry-content .mttv8-schematic__siblings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px dashed #d6d8cf;
    border-radius: 10px;
}
.mtt-page .entry-content .mttv8-schematic__siblings-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777;
    margin-right: 4px;
}
.mtt-page .entry-content a.mttv8-schematic__sibling {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #2b2b2b;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 8px;
    transition: color 0.18s ease;
}
.mtt-page .entry-content a.mttv8-schematic__sibling:hover,
.mtt-page .entry-content a.mttv8-schematic__sibling:focus-visible {
    color: #ED1C24;
    text-decoration: none;
}
.mtt-page .entry-content .mttv8-schematic__sibtag {
    margin: 0;            /* neutralise default pathtag spacing */
}

/* --- thin gold rule (reuses hr.mttv8-rule sizing) --------------- */
.mtt-page .entry-content hr.mttv8-schematic__rule {
    margin: 16px auto 12px;
}

/* --- Jump list (in-page anchors) -------------------------------- */
.mtt-page .entry-content ul.mttv8-schematic__jumps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    justify-content: center;
}
.mtt-page .entry-content ul.mttv8-schematic__jumps li {
    margin: 0;
    padding: 0;
}
.mtt-page .entry-content ul.mttv8-schematic__jumps li::before { content: none; }
.mtt-page .entry-content ul.mttv8-schematic__jumps a {
    display: inline-block;
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #ED1C24;
    text-decoration: none;
    padding: 6px 14px;
    border: 1px solid rgba(237, 28, 36, 0.35);
    border-radius: 999px;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.mtt-page .entry-content ul.mttv8-schematic__jumps a:hover,
.mtt-page .entry-content ul.mttv8-schematic__jumps a:focus-visible {
    background: #ED1C24;
    border-color: #ED1C24;
    color: #fff;
    text-decoration: none;
}

/* --- Focus visibility (a11y) ------------------------------------ */
.mtt-page .entry-content .mttv8-schematic__bar:focus-visible,
.mtt-page .entry-content a.mttv8-schematic__card:focus-visible,
.mtt-page .entry-content a.mttv8-schematic__sibling:focus-visible,
.mtt-page .entry-content ul.mttv8-schematic__jumps a:focus-visible {
    outline: 2px solid #ED1C24;
    outline-offset: 2px;
}

/* --- Responsive ------------------------------------------------- */
/* Tablet: stack the flow vertically, connectors become down-arrows. */
@media (max-width: 760px) {
    .mtt-page .entry-content ol.mttv8-schematic__flow {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .mtt-page .entry-content .mttv8-schematic__node:not(:last-child)::after {
        margin: 2px auto;
        transform: rotate(135deg);   /* point down between stacked cards */
    }
    .mtt-page .entry-content .mttv8-schematic__node {
        flex-direction: column;
        align-items: stretch;
    }
}
@media (max-width: 600px) {
    .mtt-page .entry-content .mttv8-schematic__bar {
        gap: 10px 12px;
        padding: 12px 14px;
    }
    .mtt-page .entry-content .mttv8-schematic__eyebrow {
        flex: 1 1 100%;
        margin-right: 0;
    }
    .mtt-page .entry-content .mttv8-schematic__strip {
        margin-right: auto;
    }
}/* =================================================================
   mttv8-capture — disabled email-capture preview block
   Mirrors the .mttv8-cta-card vocabulary (off-white card, faint-red
   hairline border, 10px radius), reuses the red .mttv8-btn--primary
   CTA, the red .mttv8-eyebrow, and the muted-italic .mttv8-note.
   Padding kept tight per the V8 brief.
   Scope: .mtt-page .entry-content  |  Prefix: .mttv8-capture
   ================================================================= */
/* Matches the legacy "Download Our Mindfulness Training Path Guide" box on
   /meditation-mindfulness-teacher-training/: a distinct SAGE-tinted colored
   panel (the legacy optin sits in a #D2D5C9 sage section) with #F9F8F7 form
   fields, clearly set apart from body text. */
.mtt-page .entry-content .mttv8-capture{
    background:#D2D5C9;                       /* sage panel — matches legacy optin section */
    border:1px solid #c4c8b9;
    border-radius:6px;                        /* legacy uses 2px–6px radii */
    padding:24px 26px;
    margin:28px 0;
    text-align:center;
}

/* Brand-red uppercase eyebrow */
.mtt-page .entry-content .mttv8-capture__eyebrow{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:12px;
    font-weight:700;
    color:#e51a2d;
    margin:0 0 8px;
}

.mtt-page .entry-content .mttv8-capture h3.mttv8-capture__title{
    margin:0 0 6px;
    font-size:1.45em;
}

.mtt-page .entry-content .mttv8-capture__prop{
    margin:0 auto 16px;
    max-width:48ch;
    color:#333;
    font-size:1.02em;
    line-height:1.5;
}
/* Title sits on the sage panel — keep it ink, not muted. */
.mtt-page .entry-content .mttv8-capture h3.mttv8-capture__title{ color:#000; }

/* --- Form row: input + CTA side by side, wraps on narrow widths --- */
.mtt-page .entry-content .mttv8-capture__form{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:0 auto;
    max-width:540px;
}
.mtt-page .entry-content .mttv8-capture__field{
    flex:1 1 240px;
    min-width:0;
}

/* Visually-hidden label (kept for screen readers / input association) */
.mtt-page .entry-content .mttv8-capture__label{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
}

.mtt-page .entry-content input.mttv8-capture__input{
    width:100%;
    box-sizing:border-box;
    height:48px;
    padding:12px 16px;
    font-family:'Source Sans Pro',Helvetica,Arial,sans-serif;
    font-size:15px;
    color:#000;
    background:#F9F8F7;                       /* matches legacy optin form-field bg */
    border:1px solid #b7bbac;
    border-radius:4px;                        /* matches button radius */
    line-height:1.2;
    -webkit-appearance:none;
            appearance:none;
}
.mtt-page .entry-content input.mttv8-capture__input::placeholder{
    color:#9a9a93;
    opacity:1;
}
/* Disabled visual state — input is inert in this preview */
.mtt-page .entry-content input.mttv8-capture__input:disabled{
    background:#f1f0ed;
    border-color:#dcdcd5;
    color:#8a8a83;
    cursor:not-allowed;
}

/* CTA — red primary. The full button geometry is restated here because
   this is a <button> element, which lacks Divi's a.et_pb_button base. */
.mtt-page .entry-content a.et_pb_button.mttv8-capture__btn,
.mtt-page .entry-content button.mttv8-capture__btn{
    flex:0 0 auto;
    height:48px;
    padding:0 28px;
    background-color:#000000;                 /* site-standard black button */
    border:2px solid #000000;
    color:#fff;
    font-family:'Source Sans Pro',Helvetica,Arial,sans-serif;
    font-size:14px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    text-decoration:none;
    border-radius:4px;
    line-height:1.2;
    cursor:not-allowed;
}
/* Disabled CTA — faded + non-interactive, no hover lift */
.mtt-page .entry-content button.mttv8-capture__btn[disabled],
.mtt-page .entry-content button.mttv8-capture__btn[aria-disabled="true"]{
    opacity:0.55;
    -webkit-filter:saturate(0.85);
            filter:saturate(0.85);
}
.mtt-page .entry-content button.mttv8-capture__btn[disabled]:hover{
    background-color:#000000;
    border-color:#000000;
    color:#fff;
}

/* Muted preview note — gold dot + italic, echoes .mttv8-note */
.mtt-page .entry-content .mttv8-capture__note{
    text-align:center;
    color:#555;
    font-style:italic;
    font-size:0.86em;
    margin:14px 0 0;
}
.mtt-page .entry-content .mttv8-capture__note::before{
    content:"";
    display:inline-block;
    width:7px;height:7px;
    margin-right:7px;
    border-radius:50%;
    background:#C8A24B;                        /* gold accent */
    vertical-align:middle;
}

/* Mobile: stack field over full-width CTA, tight 10px gap */
@media (max-width:480px){
    .mtt-page .entry-content .mttv8-capture{padding:22px 18px;}
    .mtt-page .entry-content .mttv8-capture__form{
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:stretch;
    }
    .mtt-page .entry-content .mttv8-capture__field{flex:0 0 auto;width:100%;}
    .mtt-page .entry-content a.et_pb_button.mttv8-capture__btn,
    .mtt-page .entry-content button.mttv8-capture__btn{width:100%;}
}/* === V8 event-carousel brand tightening (scoped) ============================
   The carousel modules render the live Tribe events as .ecs-event cards inside
   a .diec_event_carousel wrapper. These rules only retheme card chrome to the
   Zenways palette and tighten the generous default spacing; they never touch
   the shortcode markup. Scoped under .mtt-page .entry-content so they cannot
   leak onto other Divi pages. */

/* Heading above each carousel — reuse the modhead red rule vocabulary. */
.mtt-page .entry-content h2#book-module-1,
.mtt-page .entry-content h2#module-2-dates,
.mtt-page .entry-content h2#module-3-dates {
    margin: 0 0 14px;
    padding-left: 14px;
    border-left: 4px solid #ED1C24;
    scroll-margin-top: 90px; /* anchor lands clear of the sticky menu */
}

/* Carousel wrapper — kill the module's default top gap; cards do the spacing. */
.mtt-page .entry-content .diec_event_carousel {
    margin-top: 0;
}

/* Cards — off-white face, hairline border, gold-to-red accent on hover. */
.mtt-page .entry-content .diec_event_carousel .ecs-event {
    background: #F9F8F7;
    border: 1px solid #e6e6e2 !important;
    border-top: 3px solid #C8A24B;
    border-radius: 8px;
    padding: 16px 16px 14px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mtt-page .entry-content .diec_event_carousel .ecs-event:hover {
    border-top-color: #ED1C24;
    box-shadow: 0 6px 18px rgba(43,43,43,.08);
    transform: translateY(-2px);
}

/* Event title — ink, tight, brand weight. */
.mtt-page .entry-content .diec_event_carousel .ecs-event h5,
.mtt-page .entry-content .diec_event_carousel .ecs-event .ecs-event h5 {
    color: #2b2b2b;
    font-weight: 600;
    line-height: 1.3;
    margin: 4px 0 8px;
}

/* One-line date row — muted body colour, no excess gap. */
.mtt-page .entry-content .diec_event_carousel .ecs-event .ecs-detail-label,
.mtt-page .entry-content .diec_event_carousel .ecs-event .ecs-icon {
    color: #333;
    margin: 0;
}

/* "View more" link → ghost-button feel using the red accent. */
.mtt-page .entry-content .diec_event_carousel .ecs-event a {
    color: #ED1C24;
    font-weight: 600;
    text-decoration: none;
}
.mtt-page .entry-content .diec_event_carousel .ecs-event a:hover {
    color: #e52321;
    text-decoration: underline;
}

/* Sage divider between stacked rows of cards, kept thin. */
.mtt-page .entry-content .diec_event_carousel .ecs-events-list-separator-month {
    color: #2b2b2b;
    border-bottom: 1px solid #D2D5C9;
    padding-bottom: 6px;
    margin: 10px 0 12px;
}

/* Carousel arrows/dots — recolour to red so they read as brand controls. */
.mtt-page .entry-content .diec_event_carousel .slick-prev:before,
.mtt-page .entry-content .diec_event_carousel .slick-next:before {
    color: #ED1C24;
}
.mtt-page .entry-content .diec_event_carousel .slick-dots li.slick-active button:before {
    color: #ED1C24;
}

/* Mobile — single column, slightly tighter card padding. */
@media (max-width: 767px) {
    .mtt-page .entry-content .diec_event_carousel .ecs-event {
        padding: 14px 14px 12px;
    }
}

/* (B) PATHWAY PAGES — tighten section + component rhythm
   -----------------------------------------------------------------
   .mtt-page-combined covers /mindfulness-pathway/ and
   /mindfulness-pathway/modules-2-3/ (plus the legacy /mtt/ family).
   The existing rule sets section padding to clamp(40px,6vw,80px),
   which reads as too much air. Pull it to a ~24–28px rhythm and
   reduce the gap between stacked components inside each row, so the
   page matches the denser feel of /mtt/ and the homepage.

   This OVERRIDES the earlier clamp() rule in this file; it must come
   later in the cascade (same specificity) to win. ----------------- */

/* Tighter per-section vertical padding. */
.mtt-page-combined .entry-content .et_pb_section {
    padding-top: clamp(20px, 2.4vw, 28px);
    padding-bottom: clamp(20px, 2.4vw, 28px);
}

/* The first section (hero) still sits flush to the header — keep its
   top padding at 0 (re-assert; the global first-section rule already
   does this for .mtt-page, this guards the combined variant). */
.mtt-page-combined .entry-content .et_pb_section:first-child,
.mtt-page-combined .entry-content > .et_pb_section:first-of-type {
    padding-top: 0;
}

/* Tighten the gap between stacked rows within a section. */
.mtt-page-combined .entry-content .et_pb_section > .et_pb_row + .et_pb_row {
    margin-top: 16px;
}

/* Pull stacked modules (text blocks, dividers, V8 components) closer
   inside a column so the rhythm is dense, not airy. */
.mtt-page-combined .entry-content .et_pb_column > .et_pb_module {
    margin-bottom: 16px;
}
.mtt-page-combined .entry-content .et_pb_column > .et_pb_module:last-child {
    margin-bottom: 0;
}

/* Tighten the V8 component grids/stacks (cards, fee tables, FAQ,
   module blocks) that stack vertically on these pages. */
.mtt-page-combined .entry-content .mttv8-section + .mttv8-section,
.mtt-page-combined .entry-content [class*="mttv8-"] + [class*="mttv8-"] {
    margin-top: 16px;
}

/* Trim the large top margin the global h2 rule applies (2.4em) so
   headings inside the tighter sections don't reopen the air gap. */
.mtt-page-combined .entry-content h2 {
    margin-top: 1.2em;
}
.mtt-page-combined .entry-content .et_pb_module:first-child h2,
.mtt-page-combined .entry-content .et_pb_row:first-child h2 {
    margin-top: 0;
}

/* =================================================================
   ZWS008 — V8 review-pass fixes (design consistency + polish)
   ================================================================= */

/* Live-event card CTA → site-standard black with sage-green hover, matching
   every other CTA on the page (Mark: no red buttons). Scope covers /mtt/ +
   pathway pages (same markup). */
.mtt-page-v8 .entry-content .diec_event_carousel .ecs-event a.act-view-more.et_pb_button {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #fff !important;
}
.mtt-page-v8 .entry-content .diec_event_carousel .ecs-event a.act-view-more.et_pb_button:hover {
    background-color: #d2d5c9 !important;
    border-color: #d2d5c9 !important;
    color: #000000 !important;
}
/* Owl carousel controls in brand red (the earlier rule targeted slick by mistake). */
.mtt-page .entry-content .diec_event_carousel .owl-nav button.owl-prev,
.mtt-page .entry-content .diec_event_carousel .owl-nav button.owl-next { color: #ED1C24 !important; }
.mtt-page .entry-content .diec_event_carousel .owl-dots .owl-dot.active span { background: #ED1C24 !important; }
/* Uniform card image ratio so card heights don't go ragged. */
.mtt-page .entry-content .diec_event_carousel .ecs-event .decm-show-image-left img {
    width: 100%; height: 180px; object-fit: cover; border-radius: 6px;
}

/* "Book" CTAs route to the live dates section now — hide the dev "set product"
   badge on the combined pathway pages so it doesn't read as broken UI. */
.mtt-page-combined .entry-content a.et_pb_button.mttv8-btn--book::after { display: none; }

/* Schematic: even 3-up flow (the 5-track grid had only 3 nodes). */
.mtt-page .entry-content ol.mttv8-schematic__flow {
    display: flex; grid-template-columns: none; gap: 0; align-items: stretch;
}
.mtt-page .entry-content .mttv8-schematic__node { flex: 1 1 0; min-width: 0; }
/* Tighter schematic body. */
.mtt-page .entry-content .mttv8-schematic__body { padding: 14px 16px 14px; }
/* Grey state labels → meet 4.5:1 contrast on white. */
.mtt-page .entry-content .mttv8-schematic__card:not(.mttv8-schematic__card--here) .mttv8-schematic__where { color: #6c6c68; }
.mtt-page .entry-content .mttv8-schematic__siblings-label { color: #6a6a6a; }

/* Trust bar: on phones the absolute bullet floats when items wrap — inline it. */
@media (max-width: 480px) {
    .mtt-page .entry-content .mttv8-trustbar { gap: 6px 16px; }
    .mtt-page .entry-content .mttv8-trustbar span + span::before { position: static; left: auto; margin-right: 8px; }
}

/* wpautop may still wrap the capture submit button in a <p>; make that wrapper
   transparent to the flex row so the button aligns with the email field. */
.mtt-page .entry-content .mttv8-capture__form p { margin: 0; display: contents; }

/* =================================================================
   ZWS008 — Embodied Mindfulness Way diagram (matches Mark's /mtt/ layout)
   + Mark's hero image + button-weight normalization
   ================================================================= */

/* HERO STRIP (Mark's request) — the V8 hero is a CONTAINED image strip that
   sits BELOW the menus, NOT a full-bleed banner that runs up behind the header.
   Reuses the approved /mtt/ hero pattern: a self-contained block with its own
   background image + dark overlay and ~110px vertical padding (matches the /mtt/
   section custom_padding="110px||110px"). We OVERRIDE the full-bleed .mtt-hero
   breakout rules (left:50%; margin-left:-50vw; width:100vw; min-height:630px;
   padding-top:200px) defined in section 3 of this file. */
.mtt-page-v8 .entry-content .mtt-hero.mttv8-hero {
    /* cancel the 100vw breakout — stay inside the reading column */
    position: static;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    /* strip proportions, not banner */
    min-height: 0;
    padding: 64px 32px 56px;
    border-radius: 10px;
    overflow: hidden;
    background-image: linear-gradient(rgba(20,22,30,0.42), rgba(20,22,30,0.52)), url(/wp-content/uploads/2020/03/mindfultraining-Module-1-2.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
}
/* The strip no longer underlaps the header, so the menu reverts to the site's
   solid header on the V8 pages: drop the absolute/transparent header treatment
   (section 3) and the forced-white menu text, so the nav matches every other
   page. Scoped to .mtt-page-v8 ONLY — the legacy /mtt/ family keeps its
   full-bleed banner + transparent-header treatment. */
body.mtt-page-v8 .et-l--header {
    position: static;
}
body.mtt-page-v8 .et-l--header .et_pb_section {
    background-image: none !important;
}
body.mtt-page-v8 nav.et-menu-nav > ul > li > a,
body.mtt-page-v8 ul#menu-main > li > a,
body.mtt-page-v8 .et-menu-nav > ul.et-menu > li > a {
    color: inherit !important;
    text-shadow: none !important;
}
body.mtt-page-v8 nav.et-menu-nav > ul > li.current-menu-item > a,
body.mtt-page-v8 nav.et-menu-nav > ul > li.current-menu-ancestor > a,
body.mtt-page-v8 ul#menu-main > li.current-menu-item > a,
body.mtt-page-v8 ul#menu-main > li.current-menu-ancestor > a {
    color: inherit !important;
}
/* First section no longer sits under an absolute header — give the strip a
   little breathing room from the menu above it (V8 only). */
.mtt-page-v8 .entry-content .et_pb_section:first-child,
.mtt-page-v8 .entry-content > .et_pb_section:first-of-type {
    padding-top: 24px !important;
}

/* Two-column EMW diagram. */
.mtt-page .entry-content .mttv8-emw__title { text-align: left; margin: 0 0 6px; }
.mtt-page .entry-content .mttv8-emw__lede { color: #555; margin: 0 0 22px; max-width: 760px; }
.mtt-page .entry-content .mttv8-emw__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 26px; align-items: start; }
.mtt-page .entry-content .mttv8-emw__main { display: flex; flex-direction: column; gap: 14px; }
.mtt-page .entry-content .mttv8-emw__module {
    background: #fff; border: 1px solid #e6e6e2; border-left: 4px solid #ED1C24;
    border-radius: 10px; padding: 18px 22px;
}
.mtt-page .entry-content .mttv8-emw__module--here { box-shadow: 0 4px 16px rgba(237,28,36,0.10); }
.mtt-page .entry-content .mttv8-emw__modhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.mtt-page .entry-content .mttv8-emw__modtitle { margin: 0; font-size: 1.18em; line-height: 1.3; }
.mtt-page .entry-content .mttv8-emw__modkicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #ED1C24; margin-bottom: 3px; }
.mtt-page .entry-content .mttv8-emw__cert {
    flex: 0 0 auto; background: #2b2b2b; color: #fff; font-size: 10px; font-weight: 700;
    letter-spacing: 0.4px; text-transform: uppercase; padding: 3px 9px; border-radius: 11px; white-space: nowrap;
}
.mtt-page .entry-content .mttv8-emw__sub { font-weight: 600; color: #2b2b2b; margin: 10px 0 6px; }
.mtt-page .entry-content .mttv8-emw__desc { margin: 0 0 14px; font-size: 15px; }
.mtt-page .entry-content .mttv8-emw__heretag { display: inline-block; background: #ED1C24; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 2px 9px; border-radius: 11px; vertical-align: middle; }
.mtt-page .entry-content .mttv8-emw__accred { background: #F3F1EF; border-radius: 10px; padding: 16px 20px; font-size: 15px; }
.mtt-page .entry-content .mttv8-emw__accred-tag { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #ED1C24; margin-bottom: 4px; }
.mtt-page .entry-content .mttv8-emw__side { background: #fff; border: 1px solid #e6e6e2; border-top: 4px solid #C8A24B; border-radius: 10px; padding: 20px; }
.mtt-page .entry-content .mttv8-emw__side-head { margin: 0 0 6px; font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.5px; }
.mtt-page .entry-content .mttv8-emw__side-lede { font-size: 14px; color: #555; margin: 0 0 16px; }
.mtt-page .entry-content a.mttv8-emw__course { display: block; border: 1px solid #ececea; border-radius: 8px; padding: 14px; margin-bottom: 12px; text-decoration: none; color: #2b2b2b; transition: border-color .15s, background .15s; }
.mtt-page .entry-content a.mttv8-emw__course:hover { border-color: #C8A24B; background: #fcfaf4; }
.mtt-page .entry-content .mttv8-emw__course-name { display: block; font-weight: 700; color: #ED1C24; margin-bottom: 6px; }
.mtt-page .entry-content .mttv8-emw__cert--sm { display: inline-block; margin-bottom: 6px; }
.mtt-page .entry-content .mttv8-emw__course-desc { display: block; font-size: 14px; color: #555; }
@media (max-width: 980px) { .mtt-page .entry-content .mttv8-emw__grid { grid-template-columns: 1fr; } }

/* Booking-strip shortcode buttons on the V8 pathway pages → site-standard
   black/sage-hover (Mark's request). The legacy .mtt-*-btn classes default to
   red-fill / red-outline / sage; on the combined pathway pages we unify them
   to the single standard vocabulary so no red buttons remain. Scoped to
   .mtt-page-combined so the legacy /meditation-mindfulness-teacher-training/
   pages keep their original button styling. */
.mtt-page-v8 .entry-content a.et_pb_button.mtt-book-now-btn,
.mtt-page-v8 .entry-content a.et_pb_button.mtt-intro-btn,
.mtt-page-v8 .entry-content a.et_pb_button.mtt-secondary-btn,
.mtt-page-v8 .entry-content a.et_pb_button.mtt-contact-btn {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}
.mtt-page-v8 .entry-content a.et_pb_button.mtt-book-now-btn:hover,
.mtt-page-v8 .entry-content a.et_pb_button.mtt-intro-btn:hover,
.mtt-page-v8 .entry-content a.et_pb_button.mtt-secondary-btn:hover,
.mtt-page-v8 .entry-content a.et_pb_button.mtt-contact-btn:hover {
    background-color: #d2d5c9 !important;
    border-color: #d2d5c9 !important;
    color: #000000 !important;
}

/* Button-weight normalization — every CTA shares the same weight/size/casing. */
.mtt-page .entry-content a.et_pb_button.mttv8-btn,
.mtt-page .entry-content .diec_event_carousel .ecs-event a.act-view-more.et_pb_button {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    border-width: 2px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
}