/* Movement To Work — typography
   Built on tokens in mtw-tokens.css. Loaded globally. */

/* Decorative brand circles in blocks like TextBlock5 deliberately extend past
   the .mtw-page container's right edge. Clipping at body (not section) means
   those circles trail off naturally against the viewport edge rather than
   getting amputated by a hard `overflow: hidden` on the section.
   `clip` is preferred over `hidden` so sticky positioning higher up isn't
   trapped in a scroll container; the `hidden` line below it is the fallback
   for browsers that don't support `clip` yet. */
body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* Page container — constrains all redesign sections to a centred max-width
   with side gutters. Wrap pages in <div class="mtw-page"> (MtwLayout does this).
   Sections that should span the full viewport (e.g. coloured banner blocks)
   opt out via the "bleed" pattern: margin-left/right: calc(50% - 50vw). */
.mtw-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (max-width: 639px) {
    .mtw-page {
        padding: 0 16px;
    }
}

/* Belt-and-braces against rogue full-bleed children pushing the page wider
   than the viewport on small screens (the YouthPath mobile-overflow report).
   `clip` is preferred over `hidden` so sticky positioning isn't trapped in
   a scroll container; the `hidden` line below it is the fallback for older
   engines without `clip` support.

   Scoped to ≤1280px — above that, .mtw-page is narrower than the viewport
   and centred via auto margins, so bleed elements (TextBlock11 banners,
   navbar, footer) need to extend past the page's padding-box on both sides.
   Clipping there would chop them off mid-bleed. The body's own
   `overflow-x: clip` (set above) handles desktop. */
@media (max-width: 1280px) {
    .mtw-page {
        overflow-x: hidden;
        overflow-x: clip;
    }
}

/* Page Header Style 1 — main heading.
   XD spec (desktop): Poppins Bold 80/100. Tablet/mobile sizes are sensible defaults
   (no XD design supplied) preserving the ~1.25 line-height ratio. */
.mtw-h1 {
    font-family: var(--mtw-font-display);
    font-weight: 700;
    color: var(--mtw-ink);
    font-size: 80px;
    line-height: 100px;
    margin: 0;
}

@media (max-width: 1023px) {
    .mtw-h1 {
        font-size: 56px;
        line-height: 70px;
    }
}

@media (max-width: 639px) {
    .mtw-h1 {
        font-size: 40px;
        line-height: 50px;
    }
}

/* Lead — bold sub-header used in the left column of Text Block 1.
   XD spec (desktop): Poppins Bold 30. Tablet/mobile sizes are sensible defaults. */
.mtw-lead {
    font-family: var(--mtw-font-display);
    font-weight: 700;
    color: var(--mtw-ink);
    font-size: 30px;
    line-height: 38px;
    margin: 0;
}

@media (max-width: 1023px) {
    .mtw-lead { font-size: 26px; line-height: 34px; }
}

@media (max-width: 639px) {
    .mtw-lead { font-size: 22px; line-height: 30px; }
}

/* News article override — the lead column in CMS news stories runs at 25px
   rather than the default 30px so the article opener sits closer to body
   weight than a full sub-header. Scoped to `.mtw-news-article` so other
   pages using TextBlock1 keep the original lead size. */
.mtw-news-article .mtw-lead {
    font-size: 25px;
    line-height: 32px;
}

@media (max-width: 1023px) {
    .mtw-news-article .mtw-lead { font-size: 22px; line-height: 30px; }
}

@media (max-width: 639px) {
    .mtw-news-article .mtw-lead { font-size: 19px; line-height: 26px; }
}

/* Body — paragraph text used in the right column of Text Block 1.
   XD spec (desktop): Poppins Regular 20. */
.mtw-body {
    font-family: var(--mtw-font-display);
    font-weight: 400;
    color: var(--mtw-ink);
    font-size: 20px;
    line-height: 30px;
    margin: 0;
}

@media (max-width: 1023px) {
    .mtw-body { font-size: 18px; line-height: 28px; }
}

@media (max-width: 639px) {
    .mtw-body { font-size: 16px; line-height: 26px; }
}

/* Impact — large centred statement used in Text Block 2.
   XD spec (desktop): Poppins SemiBold 50. */
.mtw-impact {
    font-family: var(--mtw-font-display);
    font-weight: 600;
    color: var(--mtw-ink);
    font-size: 50px;
    line-height: 60px;
    margin: 0;
}

@media (max-width: 1023px) {
    .mtw-impact { font-size: 36px; line-height: 44px; }
}

@media (max-width: 639px) {
    .mtw-impact { font-size: 28px; line-height: 34px; }
}

/* Card heading — used in image cards (Image Block 1) and other dense card contexts.
   ASSUMED spec: Poppins Bold 20/26. Confirm against XD when the spec arrives. */
.mtw-card-heading {
    font-family: var(--mtw-font-display);
    font-weight: 700;
    color: var(--mtw-ink);
    font-size: 20px;
    line-height: 26px;
    margin: 0;
}

@media (max-width: 639px) {
    .mtw-card-heading { font-size: 18px; line-height: 24px; }
}

/* Card body — used in card contexts. Slightly smaller than .mtw-body.
   ASSUMED spec: Poppins Regular 16/24. Confirm against XD when the spec arrives. */
.mtw-card-body {
    font-family: var(--mtw-font-display);
    font-weight: 400;
    color: var(--mtw-ink);
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

/* Stat number — large display number used inside stat circles (Text Block 4).
   XD spec (desktop): Poppins SemiBold 80. Colour is set by context (white on coloured circle). */
.mtw-stat-number {
    font-family: var(--mtw-font-display);
    font-weight: 600;
    color: var(--mtw-ink);
    font-size: 80px;
    line-height: 90px;
    margin: 0;
}

@media (max-width: 1023px) {
    .mtw-stat-number { font-size: 60px; line-height: 70px; }
}

@media (max-width: 639px) {
    .mtw-stat-number { font-size: 48px; line-height: 56px; }
}

/* Eyebrow — small uppercase tag above a heading (e.g. "NEWS" on an article header).
   Lime by default; can be recoloured per-context. */
.mtw-eyebrow {
    font-family: var(--mtw-font-display);
    font-weight: 700;
    color: var(--mtw-lime);
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

/* Inline highlight — wrap phrases in <span class="mtw-highlight">…</span> to call them out.
   Defaults to magenta; an ancestor can set --mtw-highlight-color to recolour
   (e.g. Text Block 10 uses lime to match the quote marks). */
.mtw-highlight {
    color: var(--mtw-highlight-color, var(--mtw-magenta));
}

/* Preserve plain-text newlines inside CMS-rendered rich-text content.
   When an admin pastes plain text (from Word / Notes / a website) into the
   campaign section body editor, the output HTML contains literal `\n`
   characters — browsers collapse those to single spaces by default, so
   line breaks vanish on the live page. `white-space: pre-line` keeps the
   newlines as visible line breaks while still collapsing runs of spaces,
   so admins don't have to type `<br>` manually.

   Block-level children inside `.mtw-cms-content` (paragraphs, lists,
   headings, blockquotes) get `white-space: normal` back — they already
   manage their own block spacing via margins, and pre-line on top would
   render extra blank lines between paragraphs. */
.mtw-cms-content {
    white-space: pre-line;
}

.mtw-cms-content p,
.mtw-cms-content ul,
.mtw-cms-content ol,
.mtw-cms-content h1,
.mtw-cms-content h2,
.mtw-cms-content h3,
.mtw-cms-content h4,
.mtw-cms-content h5,
.mtw-cms-content h6,
.mtw-cms-content blockquote,
.mtw-cms-content table,
.mtw-cms-content figure {
    white-space: normal;
}

/* Re-enable list bullets / numbers in CMS-rendered rich text contexts.
   `styles.css` has a global `li { list-style-type: none }` (used by nav
   menus and other UI lists), which means an admin editing a campaign
   section in RadzenHtmlEditor and adding bullets sees `<ul><li>` on save
   but the live page renders them as plain indented text. These selectors
   put bullets back wherever rich-text body content lives.

   `!important` is necessary because RadzenHtmlEditor often emits inline
   styles like `<ul style="list-style-type: none">` on user-pasted markup,
   and inline styles otherwise beat external CSS regardless of specificity. */
.mtw-cms-content ul,
.mtw-cms-content ol,
.mtw-body ul,
.mtw-body ol,
.mtw-tb1__col ul,
.mtw-tb1__col ol {
    padding-left: 1.5em !important;
    margin: 0 0 14px !important;
    list-style-position: outside !important;
}

.mtw-cms-content ul,
.mtw-body ul,
.mtw-tb1__col ul {
    list-style-type: disc !important;
}

.mtw-cms-content ol,
.mtw-body ol,
.mtw-tb1__col ol {
    list-style-type: decimal !important;
}

.mtw-cms-content ul li,
.mtw-body ul li,
.mtw-tb1__col ul li {
    list-style-type: disc !important;
    display: list-item !important;
}

.mtw-cms-content ol li,
.mtw-body ol li,
.mtw-tb1__col ol li {
    list-style-type: decimal !important;
    display: list-item !important;
}

.mtw-cms-content li,
.mtw-body li,
.mtw-tb1__col li {
    margin-bottom: 6px;
}

/* Inline links inside body copy.
   Inherit font size and line-height from the surrounding paragraph so the
   link doesn't visually jump; magenta at rest, plum on hover/focus to match
   the brand palette. Applies to body, card-body, the CMS-content wrapper
   used by campaign/employer pages, and the lead column.
   Specific contexts (mtw-highlight, the eyebrow, the footer, anything with
   a more specific selector) keep their own colours. */
/* `:not(.mtw-btn)` exclusion: MtwButton renders as <a> when Href is set, and
   those buttons frequently sit inside .mtw-body / .mtw-cms-content. Without
   the exclusion, body-link styles would race the button's own scoped rules
   (equal specificity, source-order wins) and could double-paint a CTA as a
   magenta underlined link. */
.mtw-body a:not(.mtw-btn),
.mtw-lead a:not(.mtw-btn),
.mtw-card-body a:not(.mtw-btn),
.mtw-cms-content a:not(.mtw-btn) {
    color: var(--mtw-magenta);
    font: inherit;
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.mtw-body a:not(.mtw-btn):hover,
.mtw-lead a:not(.mtw-btn):hover,
.mtw-card-body a:not(.mtw-btn):hover,
.mtw-cms-content a:not(.mtw-btn):hover,
.mtw-body a:not(.mtw-btn):focus-visible,
.mtw-lead a:not(.mtw-btn):focus-visible,
.mtw-card-body a:not(.mtw-btn):focus-visible,
.mtw-cms-content a:not(.mtw-btn):focus-visible {
    color: var(--mtw-plum);
    outline: none;
}

/* Stacked block rhythm.
   Each Text Block 2/3/4 has 80px top + bottom padding in isolation. When two
   or three stack together to form a single conceptual cluster (e.g. the
   homepage "Our impact in numbers" heading → caption → stat row, or
   "Stories from the Movement" heading → caption → quotes carousel), the
   intrinsic padding doubles up and the cluster reads as too airy. Collapse
   the joining padding so the cluster feels like one section, not three.

   The collapsed gap is 32px (was 12px — felt cramped against heavy display
   type like Poppins Bold 50/60). 32px gives the section heading breathing
   room above the content it leads into while keeping the cluster reading
   as one composition rather than three separate sections.

   !important is needed because each block's own scoped CSS sets padding
   with equal specificity but loads later in the bundle. */
.mtw-tb2 + .mtw-tb3,
.mtw-tb2 + .mtw-tb4,
.mtw-tb2 + .mtw-quotes-carousel,
.mtw-tb2 + .mtw-campaign-cards,
.mtw-tb3 + .mtw-tb4,
.mtw-tb3 + .mtw-quotes-carousel,
.mtw-tb3 + .mtw-campaign-cards {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* Commented out 2026-06-17 — the bottom-padding collapse was disrupting the
   homepage rhythm. The top-zeroing rule above still applies, so each TB2 / TB3
   above its cluster content reclaims its natural ~56px bottom padding (down
   from 80px in the same edit). That gives a clean section-break feel without
   the heading welding to the content below. Re-enable by uncommenting if you
   want the dense-cluster vibe back. */
/*
.mtw-tb2:has(+ .mtw-tb3),
.mtw-tb2:has(+ .mtw-tb4),
.mtw-tb2:has(+ .mtw-quotes-carousel),
.mtw-tb2:has(+ .mtw-campaign-cards),
.mtw-tb3:has(+ .mtw-tb4),
.mtw-tb3:has(+ .mtw-quotes-carousel),
.mtw-tb3:has(+ .mtw-campaign-cards) {
    padding-bottom: 32px !important;
}
*/