/* ============================================================= */
/* postContentShortcodes.css – SIMPLIFIED & CONSISTENT VERSION   */
/* Uses variables from globals.css                               */
/* ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Averia+Libre:wght@400&display=swap');
/* FIX: the brand font used everywhere ("Averia Serif Libre") was never actually
   imported above — only "Averia Libre" (a different family) was. Without this,
   every heading/quote/day-label silently fell back to a generic serif. */
@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:wght@400;700&display=swap');

/* ============================================ */
/* 1. CONTAINER & HEADINGS                      */
/* ============================================ */

.brochure-container {
    max-width: 170mm !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.heading1, .heading2, .heading3 {
    font-family: var(--font-elegant) !important;
    text-align: center !important;
    margin: 0 0 0.6em 0 !important;
}

.heading1 {
    font-size: calc(21pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.15 !important;
    color: var(--color-primary) !important;
}

.heading2 {
    font-size: calc(18pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.2 !important;
    color: var(--color-secondary) !important;
}

.heading3 {
    font-size: calc(15pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.3 !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
}

/* ============================================ */
/* 2. PARAGRAPHS & BODY TEXT                    */
/* ============================================ */

.paragraph {
    font-size: calc(13pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.5 !important;
    margin: 0 0 1.2em 0 !important;
    font-family: var(--font-body) !important;
    color: var(--color-text) !important;
}

.paragraph:last-child {
    margin-bottom: 0 !important;
}

/* ============================================ */
/* 3. TWO COLUMN LAYOUT                         */
/* ============================================ */

.master-two-column-wrapper > .two-column-wrapper {
    padding: 1em !important;
    background: white !important;
}

.master-two-column-wrapper > .two-column-wrapper > .two-column-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.2em !important;
    margin: 0 !important;
    align-items: stretch !important;
}

.column-left,
.column-right {
    flex: 1 1 45% !important;
    min-width: 45% !important;
    align-self: flex-start !important;
}

.two-column-header,
.two-column-footer {
    flex: 0 0 100% !important;
    width: 100% !important;
    text-align: center !important;
    font-weight: 600 !important;
    color: var(--color-highlight) !important;
    margin: 0.4em 0 !important;
}

.two-column-sub-header {
    color: var(--color-highlight) !important;
    text-align: center !important;
}

/* [two_row] — identical to [two_col] except stacked instead of side-by-side,
   with a hairline divider between the two blocks. Scoped entirely off the
   ".two-row" modifier class two_row's PHP adds to the same master wrapper,
   so it works anywhere two_col works, including inside .content-teaser-card. */
.master-two-column-wrapper.two-row > .two-column-wrapper > .two-column-wrapper {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
}

.master-two-column-wrapper.two-row .column-left,
.master-two-column-wrapper.two-row .column-right {
    flex: 1 1 100% !important;
    min-width: 100% !important;
}

.master-two-column-wrapper.two-row .column-left {
    border-bottom: 1px solid var(--brochure-hairline, var(--color-highlight)) !important;
    padding-bottom: 1em !important;
    margin-bottom: 0.2em !important;
}

/* ============================================ */
/* 4. MASTER CONSULTANT + OUTCOME               */
/* Card chrome kept (cream + side tab). Type    */
/* matches daily-rhythm. Home teaser cards only */
/* scale the type size.                         */
/* ============================================ */

.consultants-container,
.consultants-container-direction-row,
.consultants-container-row,
.outcomes-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 0.9em 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.consultant,
.outcome-block {
    background: var(--brochure-cream, #FBFAF6) !important;
    border-radius: 4px !important;
    border: none !important;
    border-left: 3px solid var(--color-highlight) !important;
    padding: 0.8em 1em !important;
    margin: 0 0 1.1em 0 !important;
    line-height: 1.5 !important;
    flex: none !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.outcome-block {
    border-left-color: var(--brochure-olive, var(--color-primary-dark)) !important;
}

.consultant:last-child,
.outcome-block:last-child {
    margin-bottom: 0 !important;
}

.consultant .heading3,
.outcome-title,
.consultant-direction-row-title {
    display: block !important;
    text-align: left !important;
    margin: 0 0 0.15em 0 !important;
    font-family: "Averia Serif Libre", serif !important;
    font-style: italic !important;
    font-weight: 600 !important;
    font-size: calc(11pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.3 !important;
    color: var(--brochure-olive, var(--color-primary-dark)) !important;
    white-space: normal !important;
}

.consultant .paragraph,
.outcome-text,
.outcome-block .paragraph,
.consultant-direction-row-text {
    display: block !important;
    text-align: left !important;
    margin: 0 !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: calc(11pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.5 !important;
    color: var(--brochure-ink, #333333) !important;
}

.outcome-row {
    display: block !important;
    text-align: left !important;
}

.consultant-direction-row {
    display: block !important;
    font-size: calc(11pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.5 !important;
}


/* ============================================ */
/* 6. DAILY RHYTHM & STEPS                      */
/* ============================================ */

.day-number-circle,
.step-circle {
    background: var(--color-highlight) !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.day-content,
.step-content {
    font-family: var(--font-body) !important;
    font-size: calc(12.5pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.4 !important;
    color: var(--color-text) !important;
}

/* ============================================ */
/* 7. BUTTONS & ACCENTS                         */
/* ============================================ */

.print-button-link {
    background: var(--color-highlight) !important;
    color: white !important;
    font-family: var(--font-elegant) !important;
    font-size: calc(16pt * var(--lang-font-scale, 1)) !important;
    font-weight: 600 !important;
    padding: 0.65em 1.8em !important;
    border-radius: 40px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.print-button-link:hover {
    background: var(--color-highlight) !important;
    filter: brightness(1.1) !important;
    transform: translateY(-3px) !important;
}

/* ============================================ */
/* 8. FAQ & NESTED ACCORDION                    */
/* ============================================ */



.faq-accordion {
    margin: 0em 0 !important;
    border: 1px solid var(--color-primary) !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1) !important;
    background: transparent !important;
}
.faq-accordion-title {
    background: white !important;
    color: var(--color-primary) !important;
    font-family: var(--font-elegant) !important;
    padding: 0.3em 0.6em !important;
    font-size: calc(15pt * var(--lang-font-scale, 1)) !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.35s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
}
.faq-plus-minus {
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 22px !important;
    text-align: center !important;
    font-size: calc(20pt * var(--lang-font-scale, 1)) !important;
    font-weight: bold !important;
    color: var(--color-primary) !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}
.faq-accordion[open] .faq-accordion-title {
    background: var(--color-highlight) !important;
    color: white !important;
}
.faq-accordion[open] .faq-plus-minus {
    color: white !important;
}
.faq-accordion-title:hover {
    background: color-mix(in srgb, var(--color-highlight) 55%, white) !important; /* Syndesi 2026-09-27: was WCBW yellow #FFCC33 */
    color: #333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px color-mix(in srgb, var(--color-highlight) 30%, transparent) !important;
}
.faq-accordion-title:hover .faq-plus-minus {
    color: #333 !important;
}
.faq-accordion-title::-webkit-details-marker,
.faq-accordion-title::marker {
    display: none !important;
}
.faq-accordion-content {
    padding: 2em !important;
    background: white !important;
    border: 2px solid var(--color-highlight) !important;
    border-top: none !important;
}
.faq-item {
    margin: 1.4em 0 !important;
    page-break-inside: avoid !important;
}
.faq-question {
    font-size: calc(13pt * var(--lang-font-scale, 1)) !important;
    color: var(--color-primary) !important;
    margin-bottom: 0.4em !important;
    font-family: "Averia Serif Libre", serif !important;
}
.faq-answer {
    font-size: calc(10.5pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.5 !important;
    color: #333 !important;
}
.faq-ref {
    font-size: calc(8pt * var(--lang-font-scale, 1)) !important;
    color: var(--color-highlight) !important;
}

.faq-ref a{
    font-size: calc(8pt * var(--lang-font-scale, 1)) !important;
    color: var(--color-primary-dark) !important;
}

.faq-ref a:hover{
    font-size: calc(8pt * var(--lang-font-scale, 1)) !important;
    color: var(--color-secondary) !important;
}

/* ================================================================= */
/* CONTENT TEASER CARD + GRID — added 2026-09-17, unified card        */
/* look added 2026-09-17 (v2)                                        */
/* Hub/landing page cards (image + heading + expandable "About")     */
/* replacing individual Elementor image/heading/accordion widgets.   */
/* The whole card (image + title + accordion) is styled as ONE       */
/* bordered/shadowed object, not three separate floating pieces.     */
/* The expandable part reuses .faq-accordion markup, since           */
/* [content_teaser_card] builds it from [nested_accordion] — but its */
/* look is overridden below (.content-teaser-card .faq-accordion...) */
/* so it reads as the card's footer, not a separate button.          */
/* ================================================================= */
.content-teaser-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 2em !important;
    margin: 2em 0 !important;
}

.content-teaser-card {
    flex: 1 1 240px !important;
    /* Raised from 280px so a card actually has room to grow when fewer
       cards share a row — without this, width (and the container-query
       sizing tied to it) could never move regardless of row density. */
    max-width: 340px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.content-teaser-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.18) !important;
}

.content-teaser-card-image-wrap {
    margin: 0 !important;
    line-height: 0 !important;
    position: relative !important;
}

.content-teaser-card-image {
    width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    margin: 0 !important;
    /* Slightly desaturated so the poster photo sits closer to the
       page's own muted palette, before the brand-color wash below. */
    filter: saturate(0.9) contrast(1.03) !important;
}

/* Brand-color wash over the poster art — added 2026-09-17 so the
   (externally-designed) poster images read as part of the page rather
   than a pasted-in graphic. A soft diagonal olive->terracotta->olive
   gradient blended with soft-light: it tints toward the brand palette
   without flattening or hiding the poster's own art/photo. */
.content-teaser-card-image-wrap::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(150deg, color-mix(in srgb, var(--color-highlight) 22%, transparent) 0%, color-mix(in srgb, var(--color-highlight) 10%, transparent) 52%, color-mix(in srgb, var(--color-highlight) 18%, transparent) 100%) !important; /* Syndesi 2026-09-27: was a WCBW green/terracotta tint */
    mix-blend-mode: soft-light !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Audience badge — small corner label so it's clear at a glance who a
   card is for (e.g. "For SMEs · Professionals" vs "Youth Program ·
   Ages 16-17") without needing to click through. */
.content-teaser-card-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    background: var(--color-highlight) !important;
    color: #fff !important;
    font-family: var(--font-body) !important;
    font-size: calc(8.5pt * var(--lang-font-scale, 1)) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 0.35em 0.7em !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
    line-height: 1.3 !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Dates/location caption — moved 2026-09-18 (per Anthony) out of the image
   itself (it used to overlay the photo on a dark gradient scrim) into
   normal document flow: plain text sitting below the image and above the
   "Learn More" accordion, on the card's own background. */
.content-teaser-card-dates {
    padding: 0.7em 0.7em 0.2em 0.7em !important;
    text-align: center !important;
}
.content-teaser-card-dates-main {
    color: var(--color-text) !important;
    font-family: var(--font-elegant) !important;
    font-size: calc(9.5pt * var(--lang-font-scale, 1)) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}
.content-teaser-card-dates-sub {
    display: inline-block !important;
    margin-top: 0.4em !important;
    background: color-mix(in srgb, var(--color-highlight) 88%, transparent) !important; /* Syndesi 2026-09-27: was WCBW orange rgba(245,124,0) */
    color: #fff !important;
    font-family: var(--font-body) !important;
    font-size: calc(7.5pt * var(--lang-font-scale, 1)) !important;
    font-style: italic !important;
    font-weight: 600 !important;
    padding: 0.3em 0.6em !important;
    border-radius: 3px !important;
    line-height: 1.3 !important;
}
/* Line 3 — added 2026-09-18 (per Anthony): a quiet parenthetical note
   (e.g. "(Optional Advanced Training in Paris)"), so it reads as an aside
   under the bold main/sub lines rather than another loud badge. Plain
   text (no pill background), always present when dates/dates_sub is set
   (rendered as a non-breaking space when a program has no note of its
   own) so both homepage cards' caption blocks stay the same height. */
.content-teaser-card-dates-note {
    display: block !important;
    margin-top: 0.35em !important;
    color: var(--color-text) !important;
    opacity: 0.75 !important;
    font-family: var(--font-body) !important;
    font-size: calc(7pt * var(--lang-font-scale, 1)) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.3 !important;
}

/* [content_teaser_grid size="large"] — bigger cards for a small,       */
/* prominent set (e.g. the two homepage program cards), independent of */
/* the default 4-across hub-page layout. */
.content-teaser-grid-large .content-teaser-card {
    flex: 1 1 300px !important;
    max-width: 380px !important;
}
.content-teaser-grid-large .content-teaser-card-title {
    /* Reduced from 17pt (2026-09-17) — this title now carries a full
       dates/location line ("NAXOS • ATHENS, GREECE | JULY 14–28, 2027"),
       not a short program name, so it needs to be smaller to read as a
       caption rather than a wrapping, oversized headline. */
    font-size: calc(12.5pt * var(--lang-font-scale, 1)) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.35 !important;
}
.content-teaser-grid-large .content-teaser-card .faq-accordion-title {
    font-size: calc(13.5pt * var(--lang-font-scale, 1)) !important;
}
.content-teaser-grid-large .content-teaser-card .faq-accordion-content {
    font-size: calc(11pt * var(--lang-font-scale, 1)) !important;
}
.content-teaser-grid-large .content-teaser-card-badge {
    font-size: calc(9.5pt * var(--lang-font-scale, 1)) !important;
}
.content-teaser-grid-large .content-teaser-card-dates-main {
    /* Reduced 2026-09-18 (per Anthony) now that this line shares the
       overlay with 2 more lines (date + optional note) — 11pt read too
       heavy/austere for a 3-line stack. */
    font-size: calc(9.5pt * var(--lang-font-scale, 1)) !important;
}
.content-teaser-grid-large .content-teaser-card-dates-sub {
    font-size: calc(7.5pt * var(--lang-font-scale, 1)) !important;
}
.content-teaser-grid-large .content-teaser-card-dates-note {
    font-size: calc(7.5pt * var(--lang-font-scale, 1)) !important;
}
.content-teaser-grid-large .content-teaser-card-list-heading {
    font-size: calc(10.5pt * var(--lang-font-scale, 1)) !important;
}
.content-teaser-grid-large .content-teaser-card-list li {
    font-size: calc(10.5pt * var(--lang-font-scale, 1)) !important;
}
.content-teaser-grid-large .content-teaser-card-optional-date {
    font-size: calc(9pt * var(--lang-font-scale, 1)) !important;
}

/* [content_teaser_grid size="post"] — added 2026-09-22 (per Anthony): the  */
/* brochure/print per-item cards (post_program_teaser defaults to this      */
/* size) need a shorter, uniform photo height to actually fit the print     */
/* page — separate from "large", which stays exactly as it was for the     */
/* homepage's yrt/plp program cards (do not touch "large" for this reason). */
/* Same fixed-height + object-fit:cover technique as "compact" above, just  */
/* a taller crop since this is still a 2-per-row (not 2-column-grid) size. */
.content-teaser-grid-post .content-teaser-card-image-wrap {
    height: 300px !important;
    overflow: hidden !important;
}
.content-teaser-grid-post .content-teaser-card-image {
    height: 300px !important;
    object-fit: cover !important;
}

/* Fixed 300px teaser card image height — ID-based, added 2026-09-22 (per
   Anthony). ONLY for the teaser cards (content_teaser_card / program_teaser
   / post_program_teaser) — doesn't touch anything else on the page. Every
   card built via post_program_teaser (i.e. on a post, wrapped in
   .brochure-container) gets this — post/compact/large no longer matters,
   on a post every teaser card is the same fixed height, full stop.
   [program_teaser] cards on a page (not wrapped in .brochure-container)
   don't get an id and stay full size, untouched. content_teaser_card (see
   postContentShortcodes.php) assigns each card's image wrap a unique
   #teaser-img-N id (fixed_height="true"); ID selectors beat any class
   combination, so these rules win no matter what else touches the element.
   The .content-teaser-grid-post / -compact class rules above/below are
   left in place as a harmless fallback. Covers up to 24 cards on one page
   — raise the count here (and in post_print.css, mirrored) if a page ever
   needs more. */
#teaser-img-1, #teaser-img-2, #teaser-img-3, #teaser-img-4, #teaser-img-5,
#teaser-img-6, #teaser-img-7, #teaser-img-8, #teaser-img-9, #teaser-img-10,
#teaser-img-11, #teaser-img-12, #teaser-img-13, #teaser-img-14, #teaser-img-15,
#teaser-img-16, #teaser-img-17, #teaser-img-18, #teaser-img-19, #teaser-img-20,
#teaser-img-21, #teaser-img-22, #teaser-img-23, #teaser-img-24 {
    height: 300px !important;
    overflow: hidden !important;
}
#teaser-img-1 img, #teaser-img-2 img, #teaser-img-3 img, #teaser-img-4 img, #teaser-img-5 img,
#teaser-img-6 img, #teaser-img-7 img, #teaser-img-8 img, #teaser-img-9 img, #teaser-img-10 img,
#teaser-img-11 img, #teaser-img-12 img, #teaser-img-13 img, #teaser-img-14 img, #teaser-img-15 img,
#teaser-img-16 img, #teaser-img-17 img, #teaser-img-18 img, #teaser-img-19 img, #teaser-img-20 img,
#teaser-img-21 img, #teaser-img-22 img, #teaser-img-23 img, #teaser-img-24 img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* [content_teaser_grid size="compact"] — added 2026-09-22 (per Anthony):  */
/* fixed 2-column grid, short cropped photo, smaller type throughout — for */
/* fitting many small items on one printed page (e.g. 4 rows/8 cards via   */
/* four [post_program_teaser program1="" program2="" size="compact"] calls,*/
/* 2 programs each, so every call fills exactly one clean grid row).       */
.content-teaser-grid-compact {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1em !important;
    align-items: stretch !important;
}
.content-teaser-grid-compact .content-teaser-card {
    max-width: 100% !important;
}
.content-teaser-grid-compact .content-teaser-card-image-wrap {
    height: 46px !important;
    overflow: hidden !important;
}
.content-teaser-grid-compact .content-teaser-card-image {
    height: 46px !important;
    object-fit: cover !important;
}
.content-teaser-grid-compact .content-teaser-card-badge {
    font-size: calc(7pt * var(--lang-font-scale, 1)) !important;
    padding: 0.25em 0.5em !important;
}
.content-teaser-grid-compact .content-teaser-card-dates {
    padding: 0.4em 0.4em 0.1em 0.4em !important;
}
.content-teaser-grid-compact .content-teaser-card-dates-main {
    font-size: calc(8pt * var(--lang-font-scale, 1)) !important;
}
.content-teaser-grid-compact .content-teaser-card-dates-sub {
    font-size: calc(6.5pt * var(--lang-font-scale, 1)) !important;
    padding: 0.2em 0.4em !important;
}
.content-teaser-grid-compact .content-teaser-card-dates-note {
    font-size: calc(6pt * var(--lang-font-scale, 1)) !important;
}
.content-teaser-grid-compact .content-teaser-card-title {
    font-size: calc(9.5pt * var(--lang-font-scale, 1)) !important;
    margin: 0.4em 0.5em 0.3em 0.5em !important;
}
.content-teaser-grid-compact .content-teaser-card .faq-accordion-title {
    font-size: calc(8pt * var(--lang-font-scale, 1)) !important;
    padding: 0.35em 0.5em !important;
    gap: 8px !important;
}
.content-teaser-grid-compact .content-teaser-card .faq-accordion-content {
    font-size: calc(7.5pt * var(--lang-font-scale, 1)) !important;
    padding: 0.5em 0.6em 0.6em !important;
}
.content-teaser-grid-compact .content-teaser-card-link {
    margin: 0.4em 0 !important;
}
.content-teaser-grid-compact .content-teaser-card-link a {
    font-size: calc(8pt * var(--lang-font-scale, 1)) !important;
}

.content-teaser-card-title {
    font-family: var(--font-elegant) !important;
    font-size: calc(15pt * var(--lang-font-scale, 1)) !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    margin: 0.7em 0.8em 0.5em 0.8em !important;
}
.content-teaser-card-title a {
    color: inherit !important;
    text-decoration: none !important;
}
.content-teaser-card-title a:hover { color: var(--color-highlight) !important; }

.content-teaser-card-link {
    /* Updated 2026-09-18 (per Anthony): equal spacing above and below —
       this link now also appears mid-content (via [content_teaser_link],
       between consultants and outcomes), where a bottom margin matters
       just as much as the top one. Previously margin-bottom was 0, which
       left the outcomes title butted right up against it with no gap. */
    margin: 0.8em 0 !important;
    text-align: center !important;
}
.content-teaser-card-link a {
    font-weight: 600 !important;
    color: var(--color-highlight) !important;
    text-decoration: none !important;
}
.content-teaser-card-link a:hover { text-decoration: underline !important; }

.content-teaser-card-coming-soon {
    margin: 0.8em 0 0 0 !important;
    text-align: center !important;
    font-style: italic !important;
    color: var(--color-primary-dark) !important;
}

/* Fold the accordion into the card as its footer, instead of a       */
/* separate bordered/shadowed button sitting below the card.         */
.content-teaser-card .faq-accordion {
    margin-top: auto !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.content-teaser-card .faq-accordion-title {
    justify-content: center !important;
    gap: 14px !important;
    font-size: calc(12.5pt * var(--lang-font-scale, 1)) !important;
    padding: 0.6em 0.8em !important;
    background: #f6f4ee !important;
    border-top: 1px solid color-mix(in srgb, var(--color-highlight) 35%, transparent) !important; /* Syndesi 2026-09-27 */
}
/* Invisible spacer matching the icon's width (.faq-plus-minus is      */
/* 24px), so centering the flex row also centers the "About" text —   */
/* without shifting the title bar itself (which would leave a gap     */
/* between its background and the card's edge). */
.content-teaser-card .faq-accordion-title::after {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    height: 1px !important;
    flex-shrink: 0 !important;
}
.content-teaser-card .faq-accordion-title:hover {
    box-shadow: none !important;
    background: color-mix(in srgb, var(--color-highlight) 55%, white) !important; /* Syndesi 2026-09-27: was WCBW yellow #FFCC33 */
}
.content-teaser-card .faq-accordion[open] .faq-accordion-title {
    background: var(--color-highlight) !important;
}
.content-teaser-card .faq-accordion-content {
    border: none !important;
    background: #fff !important;
    padding: 1em 1em 1.2em 1em !important;
    text-align: center !important;
    font-size: calc(10.5pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.5 !important;
}

/* Certificates / Dates bullet lists inside the card's accordion body —
   added 2026-09-17. A small caps sub-heading + a checkmark list, so
   "what you earn" and "when it runs" read as scannable facts rather
   than more paragraph text. */
.content-teaser-card-list-heading {
    margin: 1em 0 0.4em 0 !important;
    font-family: var(--font-elegant) !important;
    font-size: calc(10pt * var(--lang-font-scale, 1)) !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--color-highlight) !important;
    text-align: center !important;
}
.content-teaser-card-list-heading:first-child {
    margin-top: 0 !important;
}
.content-teaser-card-list {
    list-style: none !important;
    margin: 0 0 0.8em 0 !important;
    padding: 0 !important;
    text-align: center !important;
}
.content-teaser-card-list:last-child {
    margin-bottom: 0 !important;
}
.content-teaser-card-list li {
    font-size: calc(10pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.5 !important;
    color: var(--color-primary-dark) !important;
    margin: 0.2em 0 !important;
}
.content-teaser-card-list li::before {
    content: "\2713  " !important;
    color: var(--color-primary) !important;
    font-weight: 700 !important;
}
/* Dates list: no checkmark, since these are schedule lines, not earned items */
.content-teaser-card-list-dates li::before {
    content: "" !important;
}
.content-teaser-card-optional-date {
    display: block !important;
    font-size: calc(8.5pt * var(--lang-font-scale, 1)) !important;
    font-style: italic !important;
    opacity: 0.85 !important;
}

/* Reusing the brochure's own [brochure_consultants*]/[outcomes*]          */
/* shortcodes directly (no [two_col] — called one after another so they    */
/* stack naturally) as a card's "Learn More" body — added 2026-09-17.      */
/* Everything here is scoped under .content-teaser-card, since these are   */
/* the SAME global classes the real brochure pages use (heading3,          */
/* paragraph, consultants-container*, outcomes-grid, outcome-block…) —     */
/* unscoped rules here would leak into and break brochure post styling.    */
.content-teaser-card .brochure-container {
    max-width: 100% !important;
    width: 100% !important;
}
.content-teaser-card .heading3 {
    /* Card chrome only — not consultant/outcome labels. Those use the
       master left-aligned rules; this center was leaking onto them. */
    font-size: calc(11.55pt * var(--lang-font-scale, 1)) !important;
    margin: 0 0 0.25em 0 !important;
    text-align: center !important;
}
.content-teaser-card .paragraph {
    font-size: calc(10.45pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.45 !important;
    margin: 0 0 0.6em 0 !important;
    text-align: center !important;
}
.content-teaser-card .paragraph:last-child {
    margin-bottom: 0 !important;
}

/* Card type scale — width-based, not viewport-based (added 2026-09-18).
   Three steps keyed to the card's OWN measured width via container
   queries, so the same rule set covers 4-per-row narrow cards up through
   1-2-per-row wide cards without anyone tracking a "cards per row" number
   anywhere. Mobile (cards stacked full-width) settles into whichever step
   matches its actual measured width — same mechanism, no separate
   override needed, so every mobile card reads the same regardless of how
   many siblings it had on desktop. */
@container teaser-card (min-width: 260px) {
    /* +10% pass (2026-09-18): 11.5pt → 12.65pt, 10.5pt → 11.55pt */
    .content-teaser-card .heading3 { font-size: calc(12.65pt * var(--lang-font-scale, 1)) !important; }
    .content-teaser-card .paragraph { font-size: calc(11.55pt * var(--lang-font-scale, 1)) !important; }
}
@container teaser-card (min-width: 310px) {
    /* +10% pass (2026-09-18): 12.5pt → 13.75pt, 11.5pt → 12.65pt */
    .content-teaser-card .heading3 { font-size: calc(13.75pt * var(--lang-font-scale, 1)) !important; }
    .content-teaser-card .paragraph { font-size: calc(12.65pt * var(--lang-font-scale, 1)) !important; }
}
/* Home-page teaser cards: same master boxes as above. Only type size
   scales with the card's own measured width (not how many cards sit
   in the row). */
.content-teaser-card .consultant,
.content-teaser-card .outcome-block,
.content-teaser-card .consultant .heading3,
.content-teaser-card .consultant .paragraph,
.content-teaser-card .outcome-title,
.content-teaser-card .outcome-text,
.content-teaser-card .outcome-block .paragraph {
    font-size: calc(10.45pt * var(--lang-font-scale, 1)) !important;
    text-align: left !important;
}
@container teaser-card (min-width: 260px) {
    .content-teaser-card .consultant,
    .content-teaser-card .outcome-block,
    .content-teaser-card .consultant .heading3,
    .content-teaser-card .consultant .paragraph,
    .content-teaser-card .outcome-title,
    .content-teaser-card .outcome-text,
    .content-teaser-card .outcome-block .paragraph {
        font-size: calc(11.55pt * var(--lang-font-scale, 1)) !important;
    }
}
@container teaser-card (min-width: 310px) {
    .content-teaser-card .consultant,
    .content-teaser-card .outcome-block,
    .content-teaser-card .consultant .heading3,
    .content-teaser-card .consultant .paragraph,
    .content-teaser-card .outcome-title,
    .content-teaser-card .outcome-text,
    .content-teaser-card .outcome-block .paragraph {
        font-size: calc(12.65pt * var(--lang-font-scale, 1)) !important;
    }
}

/* [two_row] inside a content-teaser-card: drop the left/right padding
   two_col/two_row normally add (see ".master-two-column-wrapper >
   .two-column-wrapper" above) so consultant/outcome text uses the card's
   full width — the vertical rhythm (divider + margin between the two
   stacked blocks) is untouched, only the horizontal inset goes away. */
.content-teaser-card .master-two-column-wrapper.two-row > .two-column-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 600px) {
    .content-teaser-card { max-width: 100% !important; flex: 1 1 100% !important; }
}

/* Added 2026-09-18 (per Anthony): the standard brochure "Contact us"
   button ([CTA_big_button], now auto-appended by content_teaser_card via
   contact_subject=) is a full-size 18px/56px-tall pill button on brochure
   pages — sized for a full-width page, not a ~300-380px card. Scaled down
   here to match the card's own type scale so it doesn't dwarf everything
   else inside it. */
.content-teaser-card .cta-big-button-wrapper {
    margin: 0.8em 0 0 0 !important;
}
.content-teaser-card .cta-big-button {
    font-size: calc(10.45pt * var(--lang-font-scale, 1)) !important;
    padding: 0.55em 1.4em !important;
}

.faq-references {
    font-size: calc(9pt * var(--lang-font-scale, 1)) !important;
    color: #666 !important;
    margin-top: 2em !important;
    padding-top: 1em !important;
    border-top: 1px solid #ddd !important;
}

.pdf-embed-wrapper {
    margin: 2rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    overflow: hidden;
}

.pdf-embed {
    display: block;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.pdf-fallback {
    padding: 2rem;
    text-align: center;
    background: #f9f9f9;
}

.pdf-download-link {
    color: var(--color-primary);
    font-weight: 600;
}

.brochure-data-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: calc(0.98rem * var(--lang-font-scale, 1));
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Added 2026-09-18: same column-width split as post_print.css, narrowing
   "Skill You'll Build" and widening "Why Us" so its bullets wrap to fewer
   lines. table-layout:fixed above makes these percentages authoritative. */
.brochure-data-table th:nth-child(1), .brochure-data-table td:nth-child(1) { width: 14%; }
.brochure-data-table th:nth-child(2), .brochure-data-table td:nth-child(2) { width: 24%; }
.brochure-data-table th:nth-child(3), .brochure-data-table td:nth-child(3) { width: 62%; }

.brochure-data-table th {
    background: white;
    color: var(--color-highlight) !important;
    padding: 14px 12px;
    text-align: left;
    font-weight: 600;
    border: 1px solid var(--color-secondary-light)!important;
}

.brochure-data-table td {
    padding: 12px 12px;
    border: 1px solid var(--color-secondary-light)!important;
    vertical-align: top;
}

.brochure-data-table tr:nth-child(even) {
    background-color: var(--color-secondary-light)!important;
}

.brochure-data-table tr:hover {
    background-color: var(--color-accent-hover)!important;
}

/* Added 2026-09-18: <ul>/<li> inside a data-table cell had zero dedicated
   CSS before this, so a bulleted "Why Us" cell was using the browser's full
   default UL margin (~1em) and padding-left (~40px). Doesn't need the same
   aggressive size cut the print version got (post_print.css - that one was
   overflowing a physical printed page), just tightened enough to look like
   a deliberate list instead of raw browser defaults. */
.brochure-data-table td ul,
.brochure-data-table td ol {
    margin: 0.3em 0 !important;
    padding-left: 1.2em !important;
}
.brochure-data-table td li {
    margin: 0 0 0.35em 0 !important;
    line-height: 1.4 !important;
}
.brochure-data-table td li:last-child { margin-bottom: 0 !important; }
.brochure-data-table td p { margin: 0 !important; }

/* ============================================================= */
/* BROCHURE DATA TABLE HEADER (Title + Number)                   */
/* ============================================================= */
.table-header {
    text-align: center !important;
    margin: 2em 0 1.2em 0 !important;
    padding: 0.8em 1em !important;
    background-color: var(--color-bg-light)!important;
    border: 2px solid var(--color-primary) !important; /* Dark green theme border */
    border-radius: 8px !important;
    font-family: "Averia Libre", serif !important;
    color: var(--color-primary) !important;
    font-size: calc(15pt * var(--lang-font-scale, 1)) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary-dark) 10%, transparent) !important;
}

.table-header strong {
    color: var(--color-highlight) !important; /* Orange accent for table number */
    font-weight: 700 !important;
}

.brochure-last-page {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    page-break-before: always !important;
    break-before: page !important;
}

.last-page-content {
    margin: 0 auto;
    padding: 4em 2em;
}

.author-info {
    font-size: calc(15pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.6;
    margin: 3em 0 2em 0;
    color: var(--color-primary) !important;
}
.author-info a {
    color: var(--color-primary) !important;
    text-decoration: none;
}

.copyright {
    font-size: calc(12pt * var(--lang-font-scale, 1)) !important;
    color: var(--color-text) !important;
    margin-top: 4em;
}

.copyright a {
    color: var(--color-primary) !important;
    text-decoration: none;
}


/* ============================================ */
/* 9. MOBILE OVERRIDES (Consolidated + Fixed)   */
/* ============================================ */

@media (max-width: 768px) {
    .heading1 { font-size: calc(18pt * var(--lang-font-scale, 1)) !important; }
    .heading2 { font-size: calc(15pt * var(--lang-font-scale, 1)) !important; }
    .heading3 { font-size: calc(12pt * var(--lang-font-scale, 1)) !important; }

    .paragraph,
    .column-left,
    .column-right {
        font-size: calc(13pt * var(--lang-font-scale, 1)) !important;
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }

    .brochure-data-table {
        font-size: calc(0.9rem * var(--lang-font-scale, 1));
    }
    .brochure-data-table th,
    .brochure-data-table td {
        padding: 10px 8px;
    }
     .table-header {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        font-size: calc(13.5pt * var(--lang-font-scale, 1)) !important;
        margin: 1.5em 0 1em 0 !important;
    }

    .faq-accordion-title {font-size: calc(1.2rem * var(--lang-font-scale, 1)) !important;}
    .faq-plus-minus {
        width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
        font-size: calc(16pt * var(--lang-font-scale, 1)) !important;
    }
}

/* ================================================================= */
/* "BOUTIQUE TRAVEL JOURNAL" — same identity as css/post_print.css,   */
/* ported to the normal (non-print) live page. Same tokens, same     */
/* typography, same card treatment. Anything print-only (the @page   */
/* rule, the fixed #print-logo / #brochure-background, forced page   */
/* breaks, the fixed-mm #brochure-content column) is left out or     */
/* made responsive instead, since this renders in a normal browser   */
/* viewport, not a paginated A4 sheet.                                */
/* ================================================================= */
.brochure-container .heading1 {
    font-size: 22pt !important;
    line-height: 1.15 !important;
    color: var(--brochure-olive) !important;
    font-family: "Averia Serif Libre", serif !important;
    text-align: center !important;
}
.brochure-container .heading2 {
    font-size: calc(17pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.2 !important;
    color: var(--brochure-olive) !important;
    font-family: "Averia Serif Libre", serif !important;
}
.brochure-container .heading3 {
    font-size: calc(13pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.2 !important;
    color: var(--brochure-olive) !important;
    font-weight: 600 !important;
    font-family: "Averia Serif Libre", serif !important;
}
/* Item labels follow daily-rhythm, not section heading3. */
.brochure-container .consultant .heading3,
.brochure-container .outcome-title {
    font-family: "Averia Serif Libre", serif !important;
    font-style: italic !important;
    font-weight: 600 !important;
    font-size: calc(11pt * var(--lang-font-scale, 1)) !important;
    text-align: left !important;
    color: var(--brochure-olive) !important;
}
.brochure-container .paragraph,
.brochure-container .section-content {
    font-size: calc(12pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.6 !important;
    font-family: Verdana, sans-serif !important;
    color: var(--brochure-ink) !important;
}
/* two_col wraps in .brochure-container, so the rule above was
   overriding consultant/outcome body back to 12pt. Pin them to
   daily-rhythm .day-content. */
.brochure-container .consultant .paragraph,
.brochure-container .outcome-block .paragraph,
.brochure-container .outcome-text {
    font-size: calc(11pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.5 !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    color: var(--brochure-ink) !important;
}

/* Cover title */
.brochure-cover-title,
.brochure-cover-title-only .brochure-cover-title {
    width: 100% !important;
    max-width: 640px !important;
    margin: 0.3em auto 1em auto !important;
    color: var(--brochure-orange) !important;
    font-family: "Averia Serif Libre", serif !important;
    font-size: calc(27pt * var(--lang-font-scale, 1)) !important;
    font-weight: 800 !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* ================================================================= */
/* COVER — IMAGE MODE, ported to the live page (added 2026-09-18).    */
/* [brochure_cover url="..."] only had print styling before this —    */
/* on the live site the wrapper/image/overlay/meta/cta all rendered   */
/* unstyled. This mirrors css/post_print.css's cover-image treatment, */
/* in responsive px instead of print's fixed mm.                      */
/* ================================================================= */
.brochure-cover-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    border-radius: 6px !important;
}
.brochure-cover-img {
    display: block !important;
    width: 100% !important;
    height: 700px !important;
    max-height: 80vh !important;
    object-fit: cover !important;
    object-position: center;
}
.brochure-cover-overlay {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, color-mix(in srgb, var(--brochure-olive-dark) 88%, transparent) 0%, color-mix(in srgb, var(--brochure-olive-dark) 25%, transparent) 45%, color-mix(in srgb, var(--brochure-olive-dark) 0%, transparent) 68%) !important;
    pointer-events: none !important;
}
/* Higher specificity than the shared `.brochure-cover-title` rule above, so this wins
   whenever the cover is in image mode (bottom-anchored over the photo, not centered on the page). */
.brochure-cover .brochure-cover-title {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 24px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 24px !important;
    color: var(--brochure-cream) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55) !important;
}
.brochure-cover-tagline {
    display: block !important;
    font-size: calc(15pt * var(--lang-font-scale, 1)) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    margin-top: 4px !important;
    opacity: 0.92 !important;
}
.brochure-cover-quote-mid {
    position: absolute !important;
    left: 24px !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: color-mix(in srgb, var(--brochure-olive-dark) 62%, transparent) !important;
    border-radius: 4px !important;
    padding: 16px 24px !important;
    text-align: center !important;
    color: var(--brochure-cream) !important;
}
.brochure-cover-quote-mid .quote-text { font-size: calc(15pt * var(--lang-font-scale, 1)) !important; font-style: italic !important; line-height: 1.4 !important; }
.brochure-cover-quote-mid .quote-attr { font-size: calc(12pt * var(--lang-font-scale, 1)) !important; font-style: italic !important; margin-top: 6px !important; opacity: 0.9 !important; }

.brochure-cover-meta {
    text-align: center !important;
    margin: 20px auto 0 auto !important;
    max-width: 560px !important;
}
.brochure-cover-location {
    font-family: "Averia Serif Libre", serif !important;
    font-size: calc(15pt * var(--lang-font-scale, 1)) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--color-highlight) !important;
}
.brochure-cover-dates {
    font-family: "Averia Serif Libre", serif !important;
    font-size: calc(18pt * var(--lang-font-scale, 1)) !important;
    font-weight: 700 !important;
    color: var(--brochure-olive) !important;
    margin-top: 4px !important;
}
.brochure-cover-dates-note {
    font-family: Verdana, sans-serif !important;
    font-size: calc(11pt * var(--lang-font-scale, 1)) !important;
    font-style: italic !important;
    color: var(--brochure-ink) !important;
    opacity: 0.85 !important;
    margin-top: 6px !important;
}
.brochure-last-page-cta {
    margin: 3em 0 !important;
    text-align: center !important;
}

/* [brochure_img] had no live-page styling at all before this (added 2026-09-18) — it rendered as
   a bare, unstyled <img> tag on the normal live post page even though it's whitelisted for print
   and styled there. Mirrors post_print.css's treatment, in responsive px instead of print's mm. */
.brochure-img-container { margin: 20px 0 !important; text-align: center !important; }
.brochure-img {
    /* Full width of the brochure container — matches the title/quote/location column width
       (removed the 560px cap, added 2026-09-18). */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
.brochure-img-caption {
    text-align: center !important;
    font-size: calc(11pt * var(--lang-font-scale, 1)) !important;
    font-style: italic !important;
    color: var(--brochure-ink) !important;
    margin-top: 8px !important;
}
.brochure-last-page-cta .cta-big-button-wrapper { margin: 0 !important; }

/* Two-column header/sub-header */
.two-column-header {
    color: var(--color-highlight) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: calc(12pt * var(--lang-font-scale, 1)) !important;
}
.two-column-sub-header {
    color: var(--brochure-olive) !important;
    font-style: italic !important;
}
.column-right { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
.column-right > * { flex: 0 0 auto !important; }

/* Consultant / outcome cards: master rules are in section 4.
   Do not re-split them here. */

/* Daily rhythm */
.day {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.8em !important;
    margin-bottom: 1.1em !important;
}
.day-number-circle {
    background: var(--color-highlight) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    font-family: "Averia Serif Libre", serif !important;
    line-height: 1.1 !important;
}
.day-number-circle .day-text { font-size: calc(8pt * var(--lang-font-scale, 1)) !important; opacity: 0.9; }
.day-number-circle .day-number { font-size: calc(11pt * var(--lang-font-scale, 1)) !important; font-weight: bold !important; }
.day-content-wrapper { flex: 1 !important; }
.day-label-outside {
    font-size: calc(11pt * var(--lang-font-scale, 1)) !important;
    font-weight: 600 !important;
    font-style: italic !important;
    color: var(--brochure-olive) !important;
    margin-bottom: 0.15em !important;
    font-family: "Averia Serif Libre", serif !important;
}
.day-content {
    font-size: calc(11pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.5 !important;
    font-family: Verdana, sans-serif !important;
    color: var(--brochure-ink) !important;
}
.day-content strong {
    display: block !important;
    margin-top: 0.55em !important;
    margin-bottom: 0.1em !important;
    font-family: "Averia Serif Libre", serif !important;
    font-style: italic !important;
    font-weight: 600 !important;
    color: var(--brochure-olive) !important;
}
.day-content > p:first-child,
.day-content > p:first-child > strong:first-child { margin-top: 0 !important; }

/* CTA */
.brochure-big-cta .heading2,
.brochure-cta .heading2 {
    color: var(--color-highlight) !important;
    font-style: italic !important;
}

/* Cover / print button link — keep the orange pill, just tie the family in */
.print-button-link { font-family: "Averia Serif Libre", serif !important; }

/* Center the download button, and add a hairline divider under it to
   separate it from the cover title that follows. */
.print-button-wrapper {
    text-align: center !important;
    border-bottom: 1px solid var(--brochure-hairline) !important;
    padding-bottom: 1.6em !important;
    margin-bottom: 1.4em !important;
}

/* Subtle hairline dividers between major sections, echoing the
   [elegant_divider] shortcode's own look (see .custom-divider below)
   so the page breathes between blocks without boxing everything in.

   The brochure's own page break (see the print/PDF version) puts the
   "solution" admonition ("An engineer observes...") WITH the section
   that follows it, not the one before it — it's the lead-in line for
   the next block, not a closer for the previous one. So the only
   mid-page divider is the one right above a solution admonition —
   two-col blocks themselves stay undivided from whatever precedes them
   (e.g. no line between the Darwin quote and "EGO DOWN..."). */
/* Syndesi 2026-09-27 (per Anthony): no automatic line above admonition
   boxes — section breaks are marked with [elegant_divider] instead. */
.brochure-container:has(.admonition-solution) {
    padding-top: 1.6em !important;
    margin-top: 0.4em !important;
}
.brochure-big-cta,
.brochure-cta {
    border-top: 1px solid var(--brochure-hairline) !important;
    padding-top: 1.6em !important;
}

/* [elegant_divider] shortcode output — currently unstyled (no background),
   so it renders invisible. Give it the same hairline treatment. */
.custom-divider {
    background: var(--brochure-hairline) !important;
    width: 100% !important;
    border: none !important;
}

/* ============================================ */
/* two_col + daily_rhythm + outcomes            */
/* Spacing only — same title offset, same item  */
/* gap, same vertical padding. No height clamp. */
/* ============================================ */

.master-two-column-wrapper:has(.column-left .day):has(.column-right .outcomes-grid)
    .column-right > * {
    flex: none !important;
}

.master-two-column-wrapper:has(.column-left .day):has(.column-right .outcomes-grid)
    .column-left .schedule-block > .heading3,
.master-two-column-wrapper:has(.column-left .day):has(.column-right .outcomes-grid)
    .column-right .schedule-block > .heading3 {
    margin: 0 0 0.6em 0 !important;
}

.master-two-column-wrapper:has(.column-left .day):has(.column-right .outcomes-grid)
    .column-right .outcomes-grid {
    margin: 0 !important;
    padding: 0 !important;
    gap: 1.1em !important;
    background: none !important;
}

.master-two-column-wrapper:has(.column-left .day):has(.column-right .outcomes-grid)
    .column-left .day {
    margin: 0 0 1.1em 0 !important;
    padding: 0.45em 0 !important;
}

.master-two-column-wrapper:has(.column-left .day):has(.column-right .outcomes-grid)
    .column-left .day:last-child {
    margin-bottom: 0 !important;
}

.master-two-column-wrapper:has(.column-left .day):has(.column-right .outcomes-grid)
    .column-right .outcome-block {
    margin: 0 !important;
    padding: 0.45em 1em !important;
    flex: none !important;
    height: auto !important;
}

.master-two-column-wrapper:has(.column-left .day):has(.column-right .outcomes-grid)
    .column-right .outcome-block:last-child {
    margin-bottom: 0 !important;
}

/* ============================================ */
/* Logistics / selling 3-tile row               */
/* ============================================ */

.logistics-row-wrap {
    margin: 1.4em auto !important;
}

.logistics-row-label {
    font-family: var(--font-elegant) !important;
    font-size: calc(10pt * var(--lang-font-scale, 1)) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--color-highlight) !important;
    margin: 0 0 0.7em 0 !important;
    text-align: left !important;
}

.logistics-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.7em !important;
    width: 100% !important;
}

.logistics-tile {
    background: var(--brochure-cream) !important;
    border: 1.5px solid var(--color-primary) !important;
    border-radius: 14px !important;
    padding: 1.05em 0.7em 0.85em !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-height: 0 !important;
}

.logistics-theme-orange .logistics-tile {
    border-color: var(--color-primary) !important;
}

.logistics-tile-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: var(--color-secondary-light) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 0.65em 0 !important;
    flex-shrink: 0 !important;
}

.logistics-tile-svg {
    width: 20px !important;
    height: 20px !important;
    fill: var(--color-primary) !important;
}

.logistics-theme-orange .logistics-tile-svg {
    fill: var(--color-primary) !important;
}

.logistics-tile-title {
    font-family: var(--font-elegant) !important;
    font-style: italic !important;
    font-size: calc(11.5pt * var(--lang-font-scale, 1)) !important;
    font-weight: 700 !important;
    color: var(--color-primary-dark) !important;
    margin: 0 0 0.35em 0 !important;
    line-height: 1.25 !important;
}

.logistics-theme-orange .logistics-tile-title {
    color: var(--color-primary-dark) !important;
}

.logistics-tile-stars {
    font-family: var(--font-body) !important;
    font-size: calc(9.5pt * var(--lang-font-scale, 1)) !important;
    letter-spacing: 0.12em !important;
    margin: 0 0 0.45em 0 !important;
    line-height: 1.35 !important;
    color: var(--color-highlight) !important;
}

.logistics-tile-catch {
    font-family: var(--font-body) !important;
    font-size: calc(9.5pt * var(--lang-font-scale, 1)) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
    margin: 0 0 0.45em 0 !important;
    padding: 0 !important;
    color: var(--color-highlight) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.logistics-theme-orange .logistics-tile-stars {
    color: var(--color-highlight) !important;
}

.logistics-tile-stars .star-off {
    color: var(--color-secondary) !important;
}

.logistics-tile-text {
    font-family: var(--font-body) !important;
    font-size: calc(9.5pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.35 !important;
    color: var(--color-text) !important;
    margin: 0 0 0.7em 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.7em !important;
}

.logistics-tile-text a,
.logistics-tile a,
.logistics-row-wrap a {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

.logistics-tile-photo {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin-top: auto !important;
}

.logistics-tile-photo-empty {
    width: 72px !important;
    height: 72px !important;
    border: 1.5px dashed var(--brochure-hairline) !important;
    border-radius: 10px !important;
    background: var(--brochure-sage-bg) !important;
    margin-top: auto !important;
}

.logistics-tile-photos {
    display: flex !important;
    gap: 0.35em !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: auto !important;
}

.logistics-tile-photos .logistics-tile-photo {
    width: 72px !important;
    height: 72px !important;
}

.logistics-tile-photo-link {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 8px !important;
    margin-top: auto !important;
    line-height: 0 !important;
    cursor: pointer !important;
}
.logistics-tile-photo-link::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: var(--color-primary-dark) !important;
    opacity: 0 !important;
    mix-blend-mode: normal !important;
    pointer-events: none !important;
    z-index: 1 !important;
    border-radius: 8px !important;
    transition: opacity 0.15s ease !important;
}
/* Was always-on (missing :hover) — a static 45% dark tint over every photo
   with no indication it's clickable. Now shows on hover/focus only, which is
   the "click to view larger" affordance this class name was built for. */
.logistics-tile-photo-link:hover::after,
.logistics-tile-photo-link:focus-visible::after {
    opacity: 0.45 !important;
}

.logistics-tile-title-link {
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: none !important;
    cursor: pointer !important;
}

.logistics-tile-title-link--inert {
    cursor: default !important;
    pointer-events: none !important;
}

.logistics-tile-ext {
    display: inline-block !important;
    font-family: var(--font-body) !important;
    font-size: calc(8pt * var(--lang-font-scale, 1)) !important;
    color: var(--brochure-olive) !important;
    margin: 0 0.4em 0.5em 0 !important;
}

.logistics-tile-included {
    font-family: var(--font-body) !important;
    font-size: calc(8pt * var(--lang-font-scale, 1)) !important;
    font-style: italic !important;
    color: var(--color-primary) !important;
    margin: 0.55em 0 0 0 !important;
}

.package-note {
    margin: 0.9em auto 1.2em !important;
    text-align: center !important;
}

.package-note-text {
    font-family: var(--font-body) !important;
    font-size: calc(11pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    color: var(--brochure-ink) !important;
}

@media (max-width: 700px) {
    .logistics-row {
        grid-template-columns: 1fr !important;
    }
}
/* Post-content teaser cards only — added 2026-09-23 (per Anthony): the
   orange dates_sub pill ran almost edge to edge on the post tiles, so it
   gets left/right margin to breathe. Scoped to .brochure-container, which
   wraps every [post_program_teaser] row on a post; the home page's
   [program_teaser] cards aren't inside it, so they're untouched. */
.brochure-container .content-teaser-card-dates-sub {
    margin-left: 1.2em !important;
    margin-right: 1.2em !important;
}


/* Equal-height post tiles — added 2026-09-23 (per Anthony). Every text
   element on a post tile gets a fixed height and a line limit, so tiles
   side by side (or in separate two_col columns) always line up, whatever
   the screen width: title = 1 line, orange line = exactly 3 lines (text
   centred, "…" if longer), note = 1 line. Scoped to .brochure-container,
   so the home page cards are untouched. The image is already fixed by
   the #teaser-img-N rules. */
.brochure-container .content-teaser-card-dates-main {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    overflow: hidden !important;
    line-height: 1.3 !important;
    height: 1.3em !important;
}
.brochure-container .content-teaser-card-dates-sub {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: content-box !important;
    line-height: 1.3 !important;
    height: 3.9em !important;
    overflow: hidden !important;
}
.brochure-container .content-teaser-card-dates-sub > span {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
}
.brochure-container .content-teaser-card-dates-note {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
    height: 1.3em !important;
}
/* Phones: the compact grid's fixed 2 columns made tiles too narrow for
   the 3-line orange text (it got cut off with "…"), so stack them one per
   row below 600px. Tested at 375px: nothing truncated. */
@media (max-width: 600px) {
    .content-teaser-grid-compact {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================ */
/* two_col + daily_rhythm — mobile pairing      */
/* circles. Added 2026-09-23 (per Anthony).     */
/* ============================================ */
/* On phones the two columns stack, so the right-hand items (What You Take
   Home, etc.) lose their side-by-side link to each day. two_col's PHP gives
   each right-hand .outcome-block a copy of its matching day circle
   (.rhythm-pair-circle); it is hidden by default (desktop + print) and only
   shown below 768px on screen, in the dark green used for the right-hand
   cards' side tab, so the two lists read as a matched set. */
.rhythm-pair-circle,
.outcome-block > .rhythm-pair-circle {
    display: none !important;
}

@media screen and (max-width: 768px) {
    .column-right .outcome-block.has-rhythm-pair {
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.8em !important;
        border-left: none !important; /* circle replaces the side tab on phones */
    }
    .column-right .outcome-block.has-rhythm-pair > .rhythm-pair-circle {
        display: flex !important;
        background: var(--brochure-olive, var(--color-primary-dark)) !important;
        color: #fff !important;
    }
    .column-right .outcome-block.has-rhythm-pair > :not(.rhythm-pair-circle) {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* Match the left column's .day geometry exactly so circles and text
       line up down both stacked lists (added 2026-09-23, per Anthony):
       same 0.45em top/bottom padding and no left/right inset (the card's
       1em side padding pushed the circle in), no card background, same
       44px circle and 0.8em gap. Selector repeats the :has() prefix of the
       "two_col + daily_rhythm + outcomes" rule so it out-ranks it. */
    .master-two-column-wrapper:has(.column-left .day):has(.column-right .outcomes-grid)
        .column-right .outcome-block.has-rhythm-pair {
        padding: 0.45em 0 !important;
        background: none !important;
        border-radius: 0 !important;
        border-left: none !important;
    }
    .column-right .outcome-block.has-rhythm-pair > .rhythm-pair-circle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        margin: 0 !important;
    }
    .column-right .outcome-block.has-rhythm-pair .outcome-row {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* two_col — right-hand column heading in the orange highlight colour
   (same as the day circles) on phones only. Added 2026-09-23 (per
   Anthony). Applies to every two_col, not two_row; desktop + print keep
   the olive heading. */
@media screen and (max-width: 768px) {
    .brochure-container .master-two-column-wrapper:not(.two-row) .column-right .schedule-block > .heading3 {
        color: var(--color-highlight) !important;
    }
}

/* two_col — LEFT and RIGHT column headings in the orange highlight colour
   on phones, for every two_col regardless of what the columns contain
   (daily_rhythm, consultants, outcomes, etc.). Added 2026-09-26 (per
   Anthony), replacing the earlier left/right "not daily_rhythm" rules.
   Column title only (a .heading3 directly in the column or one wrapper
   down) — not per-card consultant titles. two_row, desktop and print keep
   the olive heading. */
@media screen and (max-width: 768px) {
    .brochure-container .master-two-column-wrapper:not(.two-row) :is(.column-left, .column-right) > .heading3,
    .brochure-container .master-two-column-wrapper:not(.two-row) :is(.column-left, .column-right) > * > .heading3 {
        color: var(--color-highlight) !important;
    }
}

/* ============================================ */
/* two_col: each column gets its own card       */
/* border colour (added 2026-09-27, per Anthony) */
/* Left = dark primary, right = highlight. Only  */
/* the colour is set, so rules that remove the   */
/* side border (e.g. phone rhythm-pair circles)  */
/* still win.                                    */
/* ============================================ */
.master-two-column-wrapper:not(.two-row) .column-left :is(.outcome-block, .consultant) {
    border-left-color: var(--brochure-olive, var(--color-primary-dark)) !important;
}
.master-two-column-wrapper:not(.two-row) .column-right :is(.outcome-block, .consultant) {
    border-left-color: var(--color-highlight) !important;
}

/* ============================================ */
/* [content_teaser_grid container="true"]        */
/* (added 2026-09-27, per Anthony) — a grid      */
/* wrapped in .brochure-container is only 170mm  */
/* wide, so let up to 3 cards share one row on   */
/* desktop instead of wrapping to 2 + 1, and let */
/* the first caption line use 2 lines.           */
/* ============================================ */
@media (min-width: 769px) {
    .brochure-container > .content-teaser-grid-large:not(.content-teaser-grid-stack) {
        flex-wrap: nowrap !important;
        gap: 1.2em !important;
    }
    .brochure-container > .content-teaser-grid-large:not(.content-teaser-grid-stack) > .content-teaser-card {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}
.brochure-container > .content-teaser-grid-large .content-teaser-card-dates-main {
    -webkit-line-clamp: 2 !important;
    height: 2.6em !important;
}

/* two_col with daily_rhythm on the left: the day circles are filled with
   --color-highlight, so the right column's cards switch to the dark
   primary border instead, keeping the two sides visually distinct
   (added 2026-09-27, per Anthony). */
.master-two-column-wrapper:not(.two-row):has(.column-left .day) .column-right :is(.outcome-block, .consultant) {
    border-left-color: var(--brochure-olive, var(--color-primary-dark)) !important;
}

/* [content_teaser_grid stack="true"] — cards one under another, centred,
   each at the normal large-card width (added 2026-09-27, per Anthony). */
.content-teaser-grid.content-teaser-grid-stack {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 2em !important;
}
.content-teaser-grid.content-teaser-grid-stack > .content-teaser-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 380px !important;
    min-width: 0 !important;
}

/* [post_section] / [post_section_standalone] body text — added 2026-09-27
   (per Anthony) so it sits in with the rest of the page: same size and
   font as the card text, body colour matching the page headings
   (--color-secondary, e.g. "Start building your team with Syndesi"),
   and bold lead-ins in the highlight colour like the card titles. */
.brochure-container > .section-content .paragraph {
    font-family: var(--font-body) !important;
    font-size: calc(11pt * var(--lang-font-scale, 1)) !important;
    line-height: 1.6 !important;
    color: var(--color-secondary) !important;
    margin: 0 0 0.9em 0 !important;
}
.brochure-container > .section-content .paragraph strong,
.brochure-container > .section-content .paragraph b {
    font-family: var(--font-elegant) !important;
    font-size: calc(12pt * var(--lang-font-scale, 1)) !important;
    font-weight: 700 !important;
    color: var(--color-highlight) !important;
}

/* Equal widths for every shortcode block (added 2026-09-27, per Anthony).
   Elementor's flex container centres its widgets (align-items:center),
   which shrinks each Shortcode widget to the width of its own content —
   so a short quote or the last page came out narrower than the 170mm
   .brochure-container used by the image and two_col blocks. Stretch the
   widget to full width so every .brochure-container reaches its 170mm
   max-width, and give [brochure_last_page] (which has no container of its
   own) the same 170mm limit. */
.e-con > .elementor-widget-shortcode {
    align-self: stretch !important;
    width: 100% !important;
}
.brochure-last-page {
    max-width: 170mm !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* ============================================================ */
/* [content_teaser_grid stack="true"] logo cards (Syndesi home) */
/* 2026-09-28 (per Anthony): show the whole logo and give every */
/* card the same height.                                        */
/*  - the badge sits above the logo instead of on top of it     */
/*  - the logo is fitted (contain) inside a fixed 320px box     */
/*  - the colour wash is off, so logos keep their real colours  */
/*  - all cards share one minimum height                        */
/* ============================================================ */
.content-teaser-grid-stack > .content-teaser-card {
    min-height: 490px !important;
}
.content-teaser-grid-stack > .content-teaser-card .content-teaser-card-image-wrap {
    height: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 12px 12px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    overflow: hidden !important;
}
.content-teaser-grid-stack > .content-teaser-card .content-teaser-card-image-wrap > a {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    justify-content: center !important;
}
.content-teaser-grid-stack > .content-teaser-card .content-teaser-card-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    object-fit: contain !important;
}
.content-teaser-grid-stack > .content-teaser-card .content-teaser-card-badge {
    position: static !important;
    order: -1 !important;
    margin: 0 0 10px !important;
    line-height: 1.3 !important;
}
.content-teaser-grid-stack > .content-teaser-card .content-teaser-card-image-wrap::after {
    display: none !important;
}

/* [brochure_last_page] email line (2026-09-28): global dark orange. */
.brochure-last-page .author-info a.brochure-last-page-email,
.brochure-last-page .author-info a.brochure-last-page-email:visited,
.brochure-last-page .author-info a.brochure-last-page-email:hover {
    color: var(--color-highlight) !important;
}

/* [brochure_last_page] phone block under the website line (2026-09-28):
   2em gap → phone / Viber / WhatsApp icons in the brand teal → both numbers
   in the same size and style as the website line, in body-text colour. */
.brochure-last-page .author-info .brochure-last-page-phones {
    margin-top: 2em;
}
.brochure-last-page .author-info .brochure-last-page-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.9em;
    margin-bottom: 0.4em;
}
.brochure-last-page .author-info a.brochure-last-page-icon,
.brochure-last-page .author-info a.brochure-last-page-icon:visited,
.brochure-last-page .author-info a.brochure-last-page-icon:hover {
    display: inline-flex;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    line-height: 0;
}
.brochure-last-page .author-info a.brochure-last-page-icon:hover {
    color: var(--color-primary-dark) !important;
}
.brochure-last-page .author-info a.brochure-last-page-icon svg {
    width: 1.6em;
    height: 1.6em;
    display: block;
}
.brochure-last-page .author-info a.brochure-last-page-phone,
.brochure-last-page .author-info a.brochure-last-page-phone:visited,
.brochure-last-page .author-info a.brochure-last-page-phone:hover {
    color: var(--color-text) !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    text-decoration: none !important;
}

/* [brochure_last_page] "Contact us" heading in the global dark teal (2026-09-28). */
/* Same font, size and weight as "Syndesi" in .author-info below the buttons. */
.brochure-last-page .last-page-content > h2,
.brochure-last-page .last-page-content > .heading2 {
    color: var(--color-primary-dark) !important;
    font-family: inherit !important;
    font-size: calc(15pt * var(--lang-font-scale, 1)) !important;
    font-weight: 700 !important;
}