/* Creators Academy — base styles. Applies to all clean templates. */

/* Gilroy — self-hosted font stack */
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-ThinItalic.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-UltraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-UltraLightItalic.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-RegularItalic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-SemiboldItalic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Reset / box model */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Tokens */
:root {
    --color-bg:        #ffffff;
    --color-text:      #1a1a1a;
    --color-accent:    #e63946;   /* update to brand colour */
    --color-muted:     #6b7280;

    --font-body:       'Gilroy', system-ui, sans-serif;
    --font-heading:    'Gilroy', system-ui, sans-serif;

    --max-width:       1200px;
    --gutter:          clamp(1rem, 4vw, 2.5rem);
    --section-gap:     clamp(3rem, 8vw, 6rem);
}

/* Base */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Layout container */
.ca-container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Page wrapper */
.ca-page {
    padding-block: var(--section-gap);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
    color: var(--color-text);
}

h1, h1 span { font-size: clamp(3.4375rem, calc(2.75rem + 3.333vw), 4.0625rem) !important; font-weight: 700 !important; line-height: 1 !important; }
h2 { font-size: clamp(1.8125rem, calc(0.5rem + 5.5vw), 2.8125rem) !important; font-weight: 700 !important; line-height: 1.2 !important; }
h3 { font-size: clamp(1.0625rem, calc(0.5rem + 2.5vw), 1.5rem)    !important; font-weight: 700 !important; }
h4, div h4 { font-size: clamp(1rem, calc(0.9rem + 0.5vw), 1.125rem) !important; font-weight: 600 !important; line-height: 1.2 !important; }
h5 {
    font-size: clamp(0.875rem, calc(0.6rem + 1vw), 1.125rem) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
}
h6 {
    font-size: clamp(0.75rem, calc(0.6rem + 0.5vw), 0.875rem) !important;
    font-weight: 200 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
}

/* Salient's own base reset (css/build/style.css) sets `p{padding-bottom:27px}`
   globally — an element selector, so it beats our `*{padding:0}` reset above
   despite that rule loading first (universal selector has lower specificity
   than any element selector, regardless of source order). Overriding here
   at matching specificity, later in the cascade, to actually win. */
p { font-size: 0.875rem; font-weight: 400 !important; line-height: 1.2 !important; padding: 0 !important; }


/* Content body on all portfolio templates — let blocks control their own width */
.ca-content-body p {
    max-width: none;
}

a {
    color: var(--color-accent);
    text-decoration: none;
}
a:hover { text-decoration: none; }

/* Utility */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Content type colour token — the only one still consumed by a live
   class (.ca-card--masterclasses, .ca-btn--masterclasses, .has-masterclasses-*
   in registered block patterns). --color-adobe/bootcamp/teams/insights were
   removed: their only consumers (.ca-hero--*, .ca-card--bootcamp/teams,
   .ca-strip__number, .ca-testimonial-strip, .ca-insight__*) don't appear in
   any template or block pattern. */
:root {
    --color-masterclasses:#5b21b6;   /* purple */
}

/* Design-system tokens (Masterclass Post + Homepage redesigns).
   Do NOT reuse --color-accent / --color-masterclasses above: those are
   generic placeholders consumed by other content types and by the
   "Masterclass CTA" / "Masterclass Page" Gutenberg block patterns.
   Source of truth is the Claude Design project "Creators Academy Website"
   tokens/*.css. --ca-adobe-* have no CSS consumer here — they're the
   canonical values that ca_event_adobe_course_color() in functions.php
   mirrors as plain hex (PHP can't read a CSS custom property). */
:root {
    /* Ink / Navy */
    --ca-dark-navy: #17182a;
    --ca-navy: #252944;
    --ca-ink-900: #111223;
    --ca-ink-800: #17182a;
    --ca-ink-700: #252944;

    /* Pink / Coral */
    --ca-coral-pink: #ee486d;
    --ca-pink-700: #cf2f53;
    --ca-pink-600: #ee486d;
    --ca-pink-500: #f2647f;

    /* Violet / Purple */
    --ca-teams-purple: #8e76c0;
    --ca-teams-purple-light: #c8bfe0;
    --ca-violet-700: #5d4a8f;
    --ca-violet-600: #8e76c0;
    --ca-lilac-400: #b6a8db;
    --ca-lilac-100: #f2eef9;

    /* Adobe app brand colours */
    --ca-adobe-ps: #0557b1;
    --ca-adobe-pr: #6753ec;
    --ca-adobe-ae: #5324b1;
    --ca-adobe-id: #ed4b89;

    /* Neutrals */
    --ca-white: #ffffff;
    --ca-gray-50: #faf9fc;
    --ca-gray-200: #e7e6ee;
    --ca-gray-300: #d6d4e0;
    --ca-gray-400: #aeacbd;
    --ca-gray-500: #807e91;
    --ca-gray-600: #5d5b6d;
    --ca-gray-700: #3f3e4e;
    --ca-on-dark-muted: #b9b8cc;
    --text-eyebrow: var(--ca-gray-400);
    --border-subtle: var(--ca-gray-200);

    /* Spacing / radius / shadow / motion */
    --radius-md: 11px;
    --radius-lg: 11px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 8px rgba(23, 24, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(23, 24, 42, 0.08);
    --shadow-lg: 0 18px 48px rgba(23, 24, 42, 0.12);

    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;

    /* Typography */
    --font-display: 'Gilroy', 'Segoe UI', system-ui, sans-serif;
}

/* Buttons */
.ca-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--radius-pill, 999px);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: filter .2s, background-color .2s, border-color .2s;
}
.ca-btn:hover { text-decoration: none; }
.ca-btn--primary      { background: var(--ca-coral-pink); color: #fff; }
.ca-btn--ghost        { border: 2px solid currentColor; color: var(--color-text); background: transparent; }
.ca-btn--masterclasses{ background: var(--color-masterclasses); color: #fff; }
/* Preset button styles selectable in the masterclass meta box */
.ca-btn--white        { background: #fff; color: #17182a; }
.ca-btn--coral        { background: #ee486d; color: #fff; }
.ca-btn--navy         { background: #17182a; color: #fff; }
.ca-btn--ghost-light  { border: 2px solid #fff; color: #fff; background: transparent; }
/* Solid variants darken on hover; outline variants brighten their border/tint instead,
   since a brightness filter does nothing useful against a transparent background. */
.ca-btn--primary:hover,
.ca-btn--masterclasses:hover,
.ca-btn--white:hover,
.ca-btn--coral:hover,
.ca-btn--navy:hover  { filter: brightness(1.2); color: #fff; }
.ca-btn--ghost:hover       { background: rgba(0,0,0,.06); }
.ca-btn--ghost-light:hover { background: rgba(255,255,255,.15); color: #fff; border-color: #fff; }
.ca-btn [class*="fa-"]            { font-size: .85em; position: relative; top: 0px; }
.ca-btn [class*="fa-"]:last-child  { margin-left: .45em; }
.ca-btn [class*="fa-"]:first-child { margin-right: .45em; }

/* Cards */
.ca-card {
    padding: 2rem;
    border-radius: 8px;
    background: #f9f9f9;
    border-top: 4px solid transparent;
}
.ca-card--masterclasses{ border-top-color: var(--color-masterclasses); }

/* Aside box — shared by the Insights sidebar below */
.ca-aside-box {
    background: #f4f4f4;
    border-radius: 8px;
    padding: 1.5rem;
}
.ca-aside-box h4 { margin-bottom: 1rem; }

/* Insights article layout */

/* Hero — two column: featured image left, content right */
.ca-insight__hero {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 4rem;
    align-items: start;
    padding-top: 4rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 3rem;
}
/* If no featured image, collapse to single column */
.ca-insight__hero:not(:has(.ca-insight__hero-img)) {
    grid-template-columns: 1fr;
    max-width: 760px;
}
@media (max-width: 860px) {
    .ca-insight__hero { grid-template-columns: 200px 1fr; gap: 2.5rem; }
}
@media (max-width: 600px) {
    .ca-insight__hero { grid-template-columns: 1fr; }
}

/* Image wrapper */
.ca-insight__hero-img {
    position: relative;
    background: transparent !important;
}
.ca-insight__hero-img::before,
.ca-insight__hero-img::after {
    display: none !important;
    content: none !important;
}

/* Featured image — clean, no mask, no Salient blob */
.ca-insight__hero-img figure,
.ca-insight__hero-img .wp-post-image,
.ca-insight__hero-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    background: transparent !important;
    clip-path: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
.ca-insight__hero-img figure {
    margin: 0;
    padding: 0;
}
.ca-insight__hero-img figure::before,
.ca-insight__hero-img figure::after {
    display: none !important;
    content: none !important;
}

.ca-insight__eyebrow {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #f4a261;
    margin-bottom: 1rem;
}

.ca-insight__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
    margin-bottom: 1.25rem;
}

/* Coloured phrase inside the title */
.ca-title-highlight {
    display: inline;
}

.ca-insight__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2em;
    font-size: .9rem;
    color: var(--color-muted);
    margin-bottom: 1.25rem;
}
.ca-insight__author      { font-weight: 700; color: var(--color-text); }
.ca-insight__author-role { color: var(--color-muted); }
.ca-insight__date {
    display: block;
    margin-top: .25rem;
}
.ca-insight__intro {
    font-size: 1.1rem;
    color: var(--color-muted);
    line-height: 1.7;
}

/* Body — single column */
.ca-insight__body {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: var(--section-gap);
}

/* Article typography */
.ca-insight__content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #2d2d2d;
}
.ca-insight__content h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #f4a261;
}
.ca-insight__content h3 {
    font-size: 1.2rem;
    margin-top: 2rem;
    margin-bottom: .75rem;
}
.ca-insight__content p {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    max-width: 70ch;
}
.ca-insight__content strong {
    color: var(--color-text);
}
.ca-insight__content blockquote {
    border-left: 4px solid #f4a261;
    margin: 2rem 0;
    padding: 1rem 1.5rem;
    background: #fdf6ee;
    font-size: 1.1rem;
    font-style: italic;
    color: #444;
}
.ca-insight__content ul,
.ca-insight__content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}
.ca-insight__content li {
    margin-bottom: .5rem;
}

/* Sidebar */
.ca-insight__sidebar { position: sticky; top: 2rem; }
.ca-insight__sidebar .ca-aside-box + .ca-aside-box { margin-top: 1.5rem; }

.ca-aside__author-thumb {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: .75rem;
}
.ca-aside__author-name { font-weight: 700; font-size: .95rem; margin-bottom: .25rem; }
.ca-aside__author-role { font-size: .8rem; color: var(--color-muted); }

/* Share links */
.ca-share-links        { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.ca-share-link--linkedin { color: #0077b5; }
.ca-share-link--twitter  { color: #1da1f2; }

/* Bottom CTA strip */
.ca-insight__cta {
    background: var(--color-text);
    color: #fff;
    padding: 3.5rem 0;
    text-align: center;
}
.ca-insight__cta-text {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 1.5rem;
    max-width: none;
}

/* Masterclasses colour utility classes */
.has-masterclasses-background-color { background-color: var(--color-masterclasses) !important; }
.has-masterclasses-color            { color: var(--color-masterclasses) !important; }

/* Reusable eyebrow label */
.ca-eyebrow {
    font-size: .90rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--color-muted);
    margin-bottom: 1.5rem;
    max-width: none;
}

/* Gradient text highlight */
.ca-highlight {
    background: linear-gradient(90deg, #d63fa8 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Block pattern — About section */
.ca-about-section__body {
    max-width: 820px !important;
    margin-inline: auto;
}

/* Masterclass CTA — shared by the "Masterclass CTA" block pattern */

/* ── CTA ────────────────────────────────────────────────────── */
.ca-mc-cta {
    background: var(--color-masterclasses);
    margin-top: var(--section-gap);
    padding-top: 4rem;
    overflow: hidden;
}
.ca-mc-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 380px) 1fr;
    gap: 3rem;
    align-items: end;
}
@media (max-width: 860px) {
    .ca-mc-cta__inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    .ca-mc-cta__media {
        order: -1;
        max-height: 300px;
        overflow: hidden;
    }
    .ca-mc-cta__img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        object-position: top;
    }
}
.ca-mc-cta__text {
    padding-bottom: 4rem;
}
.ca-mc-cta__heading {
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    margin-bottom: 1rem;
}
.ca-mc-cta__body {
    color: rgba(255,255,255,.85);
    margin-bottom: 1.75rem;
    max-width: none;
}
.ca-mc-cta__btn { margin-top: .25rem; }
.ca-mc-cta__img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Block-editor bridge for the "Masterclass CTA" pattern ───────────── */

/* CTA button: core/button puts className on wrapper div, not the <a> */
.ca-mc-cta .wp-block-button.ca-btn {
    display: inline-block;
    padding: 0;
    background: none;
    border: none;
}
.ca-mc-cta .wp-block-button.ca-btn .wp-block-button__link {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--radius-pill, 999px);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: filter .2s, background-color .2s;
    cursor: pointer;
}
.ca-mc-cta .wp-block-button.ca-btn .wp-block-button__link:hover { text-decoration: none; }
.ca-mc-cta .wp-block-button.ca-btn--white .wp-block-button__link { background: #fff; color: #17182a; }
.ca-mc-cta .wp-block-button.ca-btn--coral .wp-block-button__link { background: #ee486d; color: #fff; }
.ca-mc-cta .wp-block-button.ca-btn--navy .wp-block-button__link { background: #17182a; color: #fff; }
.ca-mc-cta .wp-block-button.ca-btn--white .wp-block-button__link:hover,
.ca-mc-cta .wp-block-button.ca-btn--coral .wp-block-button__link:hover,
.ca-mc-cta .wp-block-button.ca-btn--navy .wp-block-button__link:hover { filter: brightness(.88); }
.ca-mc-cta .wp-block-button.ca-btn--ghost-light .wp-block-button__link { border: 2px solid #fff; color: #fff; background: transparent; }
.ca-mc-cta .wp-block-button.ca-btn--ghost-light .wp-block-button__link:hover { background: rgba(255,255,255,.15); }

/* Salient chrome overrides for single ca_masterclass_post posts are injected
   via wp_add_inline_style() in functions.php (ca_masterclass_inline_layout)
   to prevent the WPO minifier from stripping the selector prefix. */

/* Stat Strip pattern — large number callout (3-col) */
.ca-stat-strip .ca-stat-number {
    font-size: clamp(3rem, 6vw, 5.5rem) !important;
    font-weight: 700 !important;
    color: #8e76c0 !important;
    line-height: 1 !important;
    margin-bottom: 1.25rem !important;
    letter-spacing: -0.02em;
}
.ca-stat-strip h4 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
}
.ca-stat-strip p {
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.wp-block-query-pagination,
.nav-links {
    margin-top: 3rem;
    text-align: center;
}

/* Masterclass Post (ca-mp-*) — new CPT, does not touch .ca-mc-*.
   Typography relies on the theme's native h1/h2/h3/h5/p rules above;
   only colour and layout are set here, never a competing font rule. */

.ca-masterclass-post-page { overflow-x: hidden; }

.ca-mp-lift { transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s cubic-bezier(.4,0,.2,1); }
.ca-mp-lift:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(23,24,42,.2); }

.ca-mp-eyebrow--pink { color: var(--ca-coral-pink); }

/* Hero */
.ca-mp-hero { padding: 60px 0 0; text-align: center; position: relative; overflow: hidden; }
.ca-mp-hero__inner { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.ca-mp-hero__title { color: var(--ca-ink-800); }
.ca-mp-hero__byline { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 18px 0 0; font-size: 17px; color: var(--ca-gray-700); flex-wrap: wrap; }
.ca-mp-hero__byline strong { color: var(--ca-ink-800); }
.ca-mp-hero__byline b { font-size: 17px; color: var(--ca-navy); }
.ca-mp-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ca-gray-400); }
.ca-mp-hero__availability { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 20px; }
.ca-mp-hero__availability span { color: var(--ca-navy); font-size: 14px; }

.ca-mp-pill-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ca-coral-pink); color: #fff;
    padding: 12px 24px; border-radius: var(--radius-pill, 999px);
    font-weight: 600; font-size: 15px; text-decoration: none;
    transition: background .2s, transform .2s;
}
.ca-mp-pill-btn:hover { background: var(--ca-pink-700); color: #fff; text-decoration: none; transform: translateY(-2px); }
.ca-mp-pill-btn--sm { padding: 10px 20px; font-size: 14px; }

.ca-mp-trailer {
    position: relative; max-width: 700px; margin: 38px auto 0px;
    aspect-ratio: 16/9; border-radius: 20px 20px 0 0; overflow: hidden;
    background: var(--ca-ink-700); box-shadow: 0 -8px 50px rgba(23,24,42,.2);
}
.ca-mp-trailer__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-mp-trailer__play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 78px; height: 78px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(238,72,109,.94); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 30px rgba(238,72,109,.4); color: #fff; font-size: 26px;
    transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.ca-mp-trailer:hover .ca-mp-trailer__play { transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 14px 34px rgba(238,72,109,.5); }
.ca-mp-trailer iframe { width: 100%; height: 100%; display: block; border: 0; }

/* Class overview */
.ca-mp-overview { background: #fff; padding: 100px 0 20px; text-align: center; }
.ca-mp-overview__inner { max-width: 1080px; margin-inline: auto; padding-inline: 24px; }
.ca-mp-overview__text { font-size: 17px; line-height: 1.3; color: var(--ca-gray-700); margin: 20px 0 0; }

/* Meet the expert */
.ca-mp-expert { background: #fff; padding: 100px 0 80px; }
.ca-mp-expert__grid { display: grid; grid-template-columns: 360px 1fr; gap: 56px; align-items: center; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.ca-mp-expert__media { border-radius: 20px; }
.ca-mp-expert__img { width: 100%; height: auto; display: block; }
.ca-mp-expert__role { font-size: 16px; font-weight: 600; color: var(--ca-coral-pink); margin: 6px 0 20px; }
.ca-mp-expert__bio { color: var(--ca-gray-700); }
.ca-cl-tile__tags.ca-mp-expert__tags { margin-top: 24px; margin-bottom: 0; }

/* What you'll learn */
.ca-mp-outcomes { background: var(--ca-lilac-100); padding: 72px 0; }
.ca-mp-outcomes__head { text-align: center; max-width: 1200px; margin: 0 auto 46px; padding-inline: 24px; }
.ca-mp-outcomes__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.ca-mp-card { background: #fff; border-radius: 20px; padding: 32px 28px; box-shadow: 0 2px 10px rgba(23,24,42,.06); }
.ca-mp-card__icon {
    width: 56px; height: 56px; border-radius: 16px; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px;
}

/* Behind the scenes */
.ca-mp-bts { background: #fff; padding: 76px 0; }
.ca-mp-bts__head { max-width: 1200px; margin: 0 auto 44px; text-align: center; padding-inline: 24px; }
.ca-mp-bts__grid { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.ca-mp-bts__grid--asymmetric { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; height: 460px; }
.ca-mp-bts__grid--asymmetric .ca-mp-bts__item:first-child { grid-row: span 2; }
.ca-mp-bts__grid--plain { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px; }
.ca-mp-bts__grid--carousel {
    display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.ca-mp-bts__grid--carousel::-webkit-scrollbar { display: none; }
.ca-mp-bts__grid--carousel .ca-mp-bts__item { flex: 0 0 260px; height: 340px; }
.ca-mp-bts__item { display: block; border-radius: 16px; overflow: hidden; }
.ca-mp-bts__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.ca-mp-bts__item:hover .ca-mp-bts__img { transform: scale(1.04); }

/* CTA */
.ca-mp-cta { padding: 70px 0; position: relative; overflow: hidden; }
.ca-mp-cta__arc {
    position: absolute; right: -60px; top: -40px; z-index: 1;
    border: 20px solid var(--ca-coral-pink); border-radius: 50%;
    border-right-color: transparent; border-bottom-color: transparent; transform: rotate(45deg);
}
.ca-mp-cta__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.ca-mp-cta__text { max-width: 560px; }
.ca-mp-cta__heading { color: #fff; }
.ca-mp-cta__body { color: var(--ca-on-dark-muted); margin: 18px 0 28px; }
.ca-mp-cta__media { flex: none; max-width: 420px; }
.ca-mp-cta__img { width: 60%; height: auto; display: block; position:absolute; top:-10px; right:-60px; z-index: 1; }

/* Content-width match — every section's inner content box (not the
   full-bleed section backgrounds themselves) widens to line up with the
   site header/footer's own box (1425px max-width / 90px gutter, the same
   --container-width / --container-padding vars they use) once there's
   room for it. Below this, Salient's real header padding is already much
   narrower than 90px, so these sections keep the same tighter 1200px/24px
   box the mobile-first rules above set — same concession
   .ca-home-hero-section makes for the same reason (see above). */
@media (min-width: 1000px) {
    .ca-mp-hero__inner,
    .ca-mp-expert__grid,
    .ca-mp-outcomes__head,
    .ca-mp-outcomes__grid,
    .ca-mp-bts__head,
    .ca-mp-bts__grid,
    .ca-mp-cta__inner,
    .ca-cert-hero__inner {
        max-width: var(--container-width, 1425px);
        padding-inline: var(--container-padding, 90px);
    }

    /* .ca-cert-section itself stays full-bleed (its navy/lilac backgrounds
       span edge-to-edge) — only its horizontal gutter aligns to the
       header/footer box, not its own width. */
    .ca-cert-section {
        padding-inline: var(--container-padding, 90px);
    }
}

@media (max-width: 1000px) {
    .ca-mp-cta__img { width:100%; position: relative; top: auto; right: auto; max-width: 100%; }

}

@media (max-width: 768px) {
    .ca-mp-hero { padding: 34px 22px 0; }
    .ca-mp-hero__byline { font-size: 14px; gap: 10px; }
    .ca-mp-hero__availability { flex-direction: column; gap: 12px; }
    .ca-mp-trailer { margin: 26px -22px 0; border-radius: 0; aspect-ratio: 16/9; }
    .ca-mp-trailer__play { width: 60px; height: 60px; font-size: 20px; }

    .ca-mp-expert { padding: 40px 22px; }
    .ca-mp-expert__grid { grid-template-columns: 1fr; text-align: center; gap: 24px; }
    .ca-mp-expert__media { max-width: 260px; margin: 0 auto; }
    .ca-mp-expert__tags { justify-content: center; }

    .ca-mp-outcomes { padding: 40px 22px; }
    .ca-mp-outcomes__grid { grid-template-columns: 1fr; }
    /* Icon floats beside the heading; the body paragraph clears the
       float so it runs full-width underneath — heading and body read
       as one grouped text block, not two competing columns. */
    .ca-mp-card { text-align: left; padding: 22px; overflow: hidden; }
    .ca-mp-card__icon { float: left; margin: 0 16px 10px 0; width: 48px; height: 48px; font-size: 20px; }
    .ca-mp-card h3 { padding-top: 6px; }

    .ca-mp-bts { padding: 40px 22px; }
    /* All three desktop grid variants collapse to the same swipeable
       4:5 portrait slider on mobile, regardless of image count. */
    .ca-mp-bts__grid--asymmetric,
    .ca-mp-bts__grid--plain,
    .ca-mp-bts__grid--carousel {
        display: flex; grid-template-columns: none; grid-template-rows: none; height: auto;
        gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; -ms-overflow-style: none; margin: 0 -22px; padding: 0 22px;
    }
    .ca-mp-bts__grid--asymmetric::-webkit-scrollbar,
    .ca-mp-bts__grid--plain::-webkit-scrollbar,
    .ca-mp-bts__grid--carousel::-webkit-scrollbar { display: none; }
    .ca-mp-bts__grid--asymmetric .ca-mp-bts__item,
    .ca-mp-bts__grid--plain .ca-mp-bts__item,
    .ca-mp-bts__grid--carousel .ca-mp-bts__item {
        flex: 0 0 78%; max-width: 300px; height: auto; aspect-ratio: 4/5;
        grid-row: auto; scroll-snap-align: center;
    }

    .ca-mp-cta { padding: 44px 22px; text-align: center; }
    .ca-mp-cta__inner { flex-direction: column; }
    .ca-mp-cta__text { max-width: none; }
    .ca-mp-cta__media { order: -1; max-width: none; margin-bottom: 20px; }
}

/* Certifications CPT */
/* Generous top padding so hero content clears the site's overlapping/
   transparent nav header (the same reason the original WPBakery page used
   a large top offset on this row). */
.ca-cert-hero { background: #0557b1; padding: 100px 0 70px; color: #fff; position: relative; }
.ca-cert-hero__inner { max-width: 1200px; margin-inline: auto; padding-inline: 24px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0;}
.ca-cert-hero__brand { max-width: 220px; height: auto; margin-bottom: 24px; display: block; }
/* The title is the page's H1 but keeps the global h2 sizing it had as an
   h2 — the global h1 rule's !important would otherwise make it much larger. */
.ca-cert-hero__title { color: #fff; margin: 0 0 16px; max-width: 560px; font-size: clamp(1.8125rem, calc(0.5rem + 5.5vw), 2.8125rem) !important; line-height: 1.2 !important; }
.ca-cert-hero__subtitle { color: rgba(255,255,255,.85); max-width: 560px; margin: 0 0 28px; font-size: 18px; font-weight: 400; }
.ca-cert-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.ca-cert-hero__media { display: flex; justify-content: flex-end; align-items: center; margin-top: 40px; }
.ca-cert-hero__logo { width: 220px; max-width: 220px; height: auto; display: block; position: relative; z-index: 1; }
/* Anchored to .ca-cert-hero itself (not __media) so it always sits in the
   section's corner regardless of whether a cert logo is set — positioned
   using the same 10% horizontal gutter as the rest of the page, and dropped
   below the "top" offset used above so it clears the nav header instead of
   sitting underneath it. */
.ca-cert-hero__accreditation { position: absolute; top: 0px; right: 10%; max-width: 110px; height: auto; z-index: 2; }

.ca-cert-eyebrow { text-align: center; color: #999; letter-spacing: .04em; margin: 0 0 6px; }
.ca-cert-section { padding: 100px 24px; display: flex; flex-direction: column; align-items: center; }
.ca-cert-section.navy-bg { background: var(--ca-navy); color: #fff; }
.ca-cert-section.navy-bg h3{ color: #fff; }
.ca-cert-section.lilac-bg { background: #f2eef9; color: var(--ca-ink-800); }
/* Used instead of .ca-cert-section for Content Pattern sections (What's
   Included, Ways to Learn) — .ca-cert-section's horizontal padding insets
   its contents, which stops a pattern's own alignfull group from reaching
   the edges. Patterns define their own padding/background, so this
   wrapper adds none. */
.ca-cert-pattern-section { padding: 0; }

/* Core's Columns block is inherently flex and always applies is-layout-flex
   even with no "layout" attribute set, picking up WordPress's global
   `:where(.wp-block-columns.is-layout-flex) { gap: 2em }` rule — that gap
   splits two-column pattern cards that are designed to sit flush
   edge-to-edge. :where() carries zero specificity, so a plain rule here
   overrides it without touching the pattern content. */
.ca-cert-pattern-section .wp-block-columns { gap: 0; }

/* Ways to Learn's two column background colours are meant to stay
   full-bleed edge-to-edge at any screen width — only the actual content
   (icon, heading, price, list, button) inside each column should stop
   growing past ~590px, centred within its own column padding. */
#waystolearn .wp-block-column > * {
    max-width: 590px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Both "Ways to Learn" icons are separate uploaded images at slightly
   different native sizes (e.g. 71×70 vs 65×72), which reads as
   misaligned since one renders taller/wider than the other. Force both
   to the same box, centred, so they sit at an identical height and
   position above their heading. */
#waystolearn .wp-block-column > .wp-block-image img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* The price line ("From £695+ VAT") sat almost flush against the bullet
   list below it — give it room to breathe. */
#waystolearn .wp-block-column > p.wp-block-paragraph {
    margin-bottom: 28px;
}

/* Each bullet is an icon+text flex row with no vertical gap from the
   next, reading as one cramped block. The two columns nest that row
   inside a different number of wrapping groups (an authoring
   inconsistency in the pattern content itself), so target the row
   directly rather than a parent — that's the one thing both columns
   share — and apply it to every row including the last for a uniform
   look, which just adds a little breathing room before the button too. */
#waystolearn .wp-block-column .wp-block-group.is-content-justification-center.is-nowrap.is-layout-flex {
    margin-bottom: 14px;
}

/* "Navy Tiles" alt style — toggled per-certification via the "Ways to
   Learn" meta box checkbox (adds .ca-ways-navy to this section). Same
   pattern content, restyled as two contained, rounded, gapped navy tiles
   with white text/button instead of the default full-bleed lilac/purple
   halves — the inline colours WordPress stored on the pattern's blocks
   need !important to override. */
#waystolearn.ca-ways-navy {
    padding: 100px 24px;
    background: #fff;
}
#waystolearn.ca-ways-navy .wp-block-columns {
    gap: 32px;
    max-width: 1180px;
    margin-inline: auto;
    flex-wrap: wrap;
}
#waystolearn.ca-ways-navy .wp-block-column {
    background: var(--ca-navy) !important;
    border-radius: 20px;
    flex: 1 1 400px;
}
#waystolearn.ca-ways-navy .wp-block-column h3,
#waystolearn.ca-ways-navy .wp-block-column p {
    color: #fff !important;
}
#waystolearn.ca-ways-navy .wp-block-column .wp-block-button__link {
    background: #fff !important;
    color: var(--ca-navy) !important;
}
@media (max-width: 1000px) {
    #waystolearn.ca-ways-navy .wp-block-columns { flex-direction: column; }
}

/* Both columns pick up "is-vertically-aligned-top" (align-self: flex-start)
   from the pattern, so the shorter card's background stops short of the
   taller one instead of matching it. Stretch both to the row's full height
   instead. */
#waystolearn .wp-block-column.is-vertically-aligned-top {
    align-self: stretch;
    height: auto;
}

.ca-cert-intro { max-width: 900px; margin: 0 auto; text-align: center; }
.ca-cert-intro p { color: var(--ca-gray-700); font-size: 17px; }

/* Outcome cards render as editor-chosen row groupings (e.g. "2,1,2") rather
   than a fixed grid, so rows can mix counts — each row is a flex container
   and flex:1 on the cards evenly splits whatever width the row has. */
.ca-cert-outcomes { margin: 50px 0 0; }
.ca-cert-outcomes__row { display: flex; gap: 24px; margin-bottom: 24px; max-width: 1180px; }
.ca-cert-outcomes__row:last-child { margin-bottom: 0; }
.ca-cert-outcome-card { flex: 1 1 0; min-width: 0; background: var(--ca-lilac-100); border-radius: 20px; padding: 34px 30px 15px 30px; text-align: left; }
.ca-cert-outcome-card__icon { width: 64px; height: 64px; object-fit: contain; margin-bottom: 18px; display: block; }
.ca-cert-outcome-card h3 { margin: 0 0 10px; color: var(--ca-ink-800); }
.ca-cert-outcome-card p { margin: 0; color: var(--ca-gray-700); }

.ca-cert-dates__wrap { width: 100%; max-width: 1180px; margin: 30px auto 0; display: flex; flex-direction: column; gap: 16px; }

.ca-cert-dates__empty { margin: 30px auto 0; max-width: 640px; text-align: center; color: var(--ca-ink-800); font-size: 16px; }
.ca-cert-dates__empty a { color: var(--ca-ink-800); text-decoration: underline; }
.ca-cert-dates__empty a:hover { color: #ee486d; }

/* Live "Upcoming Dates" card — one per matching ca_event post, built from
   ca_get_certification_upcoming_events() rather than the legacy raw-HTML
   fallback. Sizes/colours/fonts intentionally match .ca-events-row* (the
   same ca_event posts' styling on the Events page, assets/css/events.css)
   rather than inventing new ones, so an event looks the same wherever it
   surfaces. */
.ca-cert-date-card { display: flex; align-items: center; gap: 28px; background: #fff; border-radius: 14px; padding: 24px 28px; cursor: pointer; transition: box-shadow 0.18s, transform 0.18s; }
.ca-cert-date-card:hover,
.ca-cert-date-card:focus-visible { box-shadow: var(--shadow-md, 0 8px 24px rgba(23, 24, 42, 0.08)); transform: translateY(-3px); }
.ca-cert-date-card:focus-visible { outline: 2px solid #ee486d; outline-offset: 2px; }
.ca-cert-date-card__date { flex-shrink: 0; width: 96px; height: 96px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.ca-cert-date-card__day { font-size: 34px; font-weight: 700; line-height: 1; }
.ca-cert-date-card__month { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; margin-top: 4px; }
.ca-cert-date-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ca-cert-date-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.ca-cert-date-card__badge { color: #fff; font-size: 13px; font-weight: 600; padding: 5px 14px; border-radius: var(--radius-pill, 999px); }
.ca-cert-date-card__meta-item { display: inline-flex; align-items: center; gap: 6px; color: #807e91; font-size: 14px; font-weight: 600; }
.ca-cert-date-card__meta-item a { color: inherit; }
.ca-cert-date-card .ca-cert-date-card__title { margin: 0 !important; font-size: 23px !important; font-weight: 700 !important; letter-spacing: -0.01em; color: #17182a !important; line-height: 1.25 !important; }
.ca-cert-date-card__cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; background: #ee486d; color: #fff !important; font-weight: 500; font-size: 14px; padding: 12px 20px; border-radius: var(--radius-md, 8px); text-decoration: none; }
.ca-cert-date-card__cta:hover { filter: brightness(.88); color: #fff; text-decoration: none; }
@media (max-width: 720px) {
    .ca-cert-date-card { flex-direction: column; align-items: flex-start; gap: 18px; padding: 20px; }
    .ca-cert-date-card__date { width: 100%; height: auto; flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 16px; align-items: baseline; }
    .ca-cert-date-card__body { width: 100%; }
    .ca-cert-date-card__cta { width: 100%; justify-content: center; }
}

.ca-cert-included__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 1080px; margin: 30px auto 0; text-align: center; }
.ca-cert-included__grid img { max-width: 80%; height: auto; margin-bottom: 18px; }
.ca-cert-included__grid h3 { margin: 0 0 8px; }
.ca-cert-included__grid p { margin: 0; color: var(--ca-gray-700); }

.ca-cert-ways__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; max-width: 900px; margin: 30px auto 0; }
.ca-cert-ways__card { background: var(--ca-lilac-100); border-radius: 20px; padding: 30px; text-align: center; }
.ca-cert-ways__card--alt { background: #efeafb; }
.ca-cert-ways__card img { width: 64px; height: auto; margin: 0 auto 10px; }
.ca-cert-ways__price { color: #808080; font-weight: 700; margin: 0 0 16px; }
.ca-cert-ways__feature { display: flex; align-items: center; gap: 10px; text-align: left; margin-bottom: 10px; color: var(--ca-ink-800); font-weight: 600; }
.ca-cert-ways__feature i { color: var(--ca-coral-pink); }

/* Full-width banner — a section in its own right (not nested in
   .ca-cert-section), so its background spans edge-to-edge. */
.ca-cert-team-cta { background: var(--ca-teams-purple); padding: 60px 24px; text-align: center; color: #fff; }
.ca-cert-team-cta__inner { max-width: 900px; margin: 0 auto; }
.ca-cert-team-cta h2, .ca-cert-team-cta p { color: #fff; }
.ca-cert-team-cta h2 { margin-bottom: 1rem; }
.ca-cert-team-cta p { margin-bottom: 1.5rem; }

.ca-cert-tutor-eyebrow { text-align: center; color: #999; margin-bottom: 30px; }
.ca-mp-expert__text .ca-btn--ghost { margin-top: 20px; display: inline-block; }
.ca-cert-section .ca-mp-expert__text h3 { line-height: 1.5; max-width: 640px; }
.ca-cert-section .ca-mp-expert__text > p { margin: 20px 0 20px !important; }
.ca-cert-section .ca-mp-expert__text .ca-btn { margin-top: 0; }

.ca-cert-faqs__wrap { max-width: 1180px; width: 100%; margin: auto 0; }
.ca-cert-faqs__heading { text-align: center; margin-bottom: 50px; }
.ca-cert-faq-item { border-bottom: 1px solid #e5e5ea; border-radius: 12px; transition: box-shadow .2s ease, background-color .2s ease; }
.ca-cert-faq-item__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; background: none; border: 0; padding: 22px 0; font-weight: 700; font-size: 20px; color: var(--ca-ink-800); cursor: pointer; }
.ca-cert-faq-item__q-text { flex: 1; }
.ca-cert-faq-item__q i { color: #c7c7cf; font-size: 22px; flex: none; transition: color .2s ease; }
.ca-cert-faq-item__a { display: none; padding: 0 0 28px; color: var(--ca-gray-700); font-size: 15px; line-height: 1.6; }
.ca-cert-faq-item.is-open .ca-cert-faq-item__a { display: block; }

/* Open item pops forward as an elevated white card, matching the design's
   "active" state — question and icon turn coral, divider is hidden in
   favour of the card's own shadow, and the negative margin lets the card
   sit slightly proud of the row above/below without shifting the text's
   horizontal position. */
.ca-cert-faq-item.is-open { background: #fff; border-bottom-color: transparent; border-radius: 12px; box-shadow: 0 20px 40px -12px rgba(23, 24, 42, .18); padding: 0 28px; margin: 4px -28px; position: relative; z-index: 1; }
.ca-cert-faq-item.is-open .ca-cert-faq-item__q { color: var(--ca-coral-pink); }
.ca-cert-faq-item.is-open .ca-cert-faq-item__q i { color: var(--ca-coral-pink); }

.ca-cert-enquire { background: #252944; padding: 60px 24px; }
.ca-cert-enquire__heading { color: #fff; text-align: center; margin: 50px 0; }
.ca-cert-enquire__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1080px; margin: 0 auto; align-items: start; }
.ca-cert-enquire__form { background: #fff; border-radius: 20px; padding: 30px; }
.ca-cert-enquire__call h3, .ca-cert-enquire__call p { color: #fff; }
.ca-cert-enquire__call h3 { margin-bottom: 1rem; }
.ca-cert-enquire__call p { margin-bottom: 1.5rem; }
.ca-cert-enquire__photo { margin-bottom: 30px; }
.ca-cert-enquire__photo-img { max-width: 100%; height: auto; display: block; }

/* Syllabus / enquiry popup — generalized from the reference page's
   inline modal so every certification can reuse the same markup/CSS. */
/* Closed = invisible but still laid out (not display:none): the Pipedrive
   form inside sizes its iframe from its own layout, and comes up cut off if
   it loaded while collapsed. */
.ca-cert-popup-overlay { display: flex; visibility: hidden; opacity: 0; pointer-events: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 99999; align-items: center; justify-content: center; transition: opacity .2s ease, visibility 0s linear .2s; }
.ca-cert-popup-overlay.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .2s ease; }
.ca-cert-popup-container { max-width: 520px; width: 90%; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.3); padding: 45px 40px 40px; position: relative; max-height: 90vh; overflow-y: auto; }
.ca-cert-popup-close { position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; background: #f8f9fa; border: none; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1; color: #495057; }
.ca-cert-popup-close:hover { background: #e9ecef; color: #212529; }
.ca-cert-popup-title { font-size: 32px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px; line-height: 1.25; padding-right: 30px; }
.ca-cert-popup-intro { color: #495057; margin: 0 0 20px; }
.ca-cert-popup-body { background: #f8f9fa; padding: 30px; border-radius: 12px; border: 1px solid #e9ecef; }
.ca-cert-popup-body .pipedriveWebForms { width: 100%; }

/* The generic .ca-popup-* CTA popup used to live here but was moved to
   its own sitewide-loaded assets/css/popup.css — main.css only loads on
   ca_is_clean_template() pages, but the popup's mega-menu trigger appears
   on every page (see popup.css's own header comment for the full story). */

@media (max-width: 900px) {
    .ca-cert-hero { padding-top: 70px; }
    .ca-cert-hero__inner { flex-direction: column-reverse; text-align: center; gap: 40px; }
    .ca-cert-hero__media { justify-content: center; }
    .ca-cert-hero__brand { display: inline; }
    .ca-cert-hero__actions { justify-content: center; }
    .ca-cert-hero__accreditation { top: 0; right: 16px; max-width: 100px; }
    .ca-cert-outcomes__row,
    .ca-cert-included__grid,
    .ca-cert-ways__grid { grid-template-columns: 1fr; flex-direction: column; }
    .ca-cert-team-cta { padding: 34px 22px; }
    .ca-cert-enquire__grid { grid-template-columns: 1fr; }
    .ca-cert-popup-container { padding: 35px 25px 30px; }
    .ca-cert-popup-title { font-size: 26px; }
}

/* Homepage (page-templates/home-page.php) — component styles.
   Ported from the Claude Design project's Home Page.dc.html, namespaced
   ca-home- throughout to avoid colliding with Salient's own classes. */
.ca-home { font-family: var(--font-body); }
.ca-home a:not(.ca-btn) { text-decoration: none; cursor: pointer; }
.ca-home a:not(.ca-btn):hover { color: var(--ca-white); }
.ca-home .ca-home-wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

body.page-template-page-templates-home-page-php #header-outer nav a,
body.page-template-page-templates-home-page-php #header-outer nav a:hover,
body.page-template-page-templates-home-page-php #header-outer nav a:focus,
body.page-template-page-templates-home-page-php #header-outer nav a span,
body.page-template-home-page #header-outer nav a,
body.page-template-home-page #header-outer nav a:hover,
body.page-template-home-page #header-outer nav a:focus,
body.page-template-home-page #header-outer nav a span {
    text-decoration: none !important;
}

.ca-home-navlink { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ca-white); }
.ca-home-navlink:hover { color: var(--ca-white); }

.ca-home-seg { border: none; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 15px; padding: 11px 26px; border-radius: var(--radius-pill); transition: all var(--dur-fast) var(--ease-standard); line-height: 1; box-shadow: none; }
.ca-home-seg.is-on { background: var(--ca-pink-600); color: #fff; border-radius: var(--radius-pill)!important;cursor: pointer; }
.ca-home-seg.is-off { background: transparent; color: var(--ca-ink-800); border-radius: var(--radius-pill)!important;}

.ca-home-lift { transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.ca-home-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.ca-home-logo-marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.ca-home-logo-track { display: flex; gap: 72px; width: max-content; padding-left: 72px; animation: ca-home-logo-scroll 32s linear infinite; }
.ca-home-logo-marquee:hover .ca-home-logo-track { animation-play-state: paused; }
@keyframes ca-home-logo-scroll { to { transform: translateX(calc(-50% - 36px)); } }

.ca-home-hero-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 64px; position: relative; }
.ca-home-accent { background: linear-gradient(90deg, rgb(142,118,192), rgb(238,72,109)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 700; }
.ca-home-hero-img { width: 844px; height: 592px; position: absolute; z-index: 1; top: 10px; left: calc(536px + (var(--container-width, 1425px) - 1200px) / 2); }

/* The hero is the one section that needs to line up with the header logo,
   which sits in Salient's own nav .container — a box driven by the
   Theme Options → General → Layout width/padding settings (currently
   1425px / 90px, exposed as --container-width / --container-padding),
   not this page's 1200px/24px .ca-home-wrap. Override just the hero's
   wrap to match the nav's box so the two line up at every viewport width;
   .ca-home-hero-img's left offset above is compensated for the wider box.
   Scoped to match Salient's own breakpoint for that .container rule —
   below it, Salient's nav padding is much smaller than 90px, so leave
   .ca-home-wrap's normal 1200px/24px box in place. */
@media (min-width: 1000px) {
    .ca-home-hero-section .ca-home-wrap {
        max-width: var(--container-width, 1425px);
        padding-left: var(--container-padding, 90px);
        padding-right: var(--container-padding, 90px);
    }
}

/* Trustindex centers its widget by default — override to line up with the
   left-aligned CTA buttons above it. Broad selector since the widget is a
   third-party embed we don't control the markup of. */
.ca-home-hero-rating { text-align: left; }
.ca-home-hero-rating > div { margin-left: 0 !important; margin-right: auto !important; }
.ca-home-hero-rating [class*="ti-"] { justify-content: flex-start !important; text-align: left !important; margin-left: 0 !important; }

.ca-home-svc-split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 44px; align-items: center; max-width: 1080px; margin: 0 auto; position: relative; }
.ca-home-cert-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.ca-home-content-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.ca-home-stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 1040px; margin: 0 auto; }
.ca-home-aim-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ca-home-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 32px; }

@media (max-width: 980px) {
    .ca-home-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding-bottom: 0 !important; }
    .ca-home-hero-section { height: auto !important; }
    .ca-home-hero-grid > .ca-home-hero-img { position: static !important; width: 100% !important; height: auto !important; aspect-ratio: 844/592; top: auto !important; left: auto !important; max-width: 560px; margin-left: auto; margin-right: auto; }
    .ca-home-svc-split { grid-template-columns: 1fr !important; gap: 28px !important; }
    .ca-home-aim-row { grid-template-columns: 1fr !important; gap: 28px !important; }
    .ca-home-cert-grid { grid-template-columns: repeat(2,1fr) !important; gap: 20px !important; }
    .ca-home-content-grid { grid-template-columns: repeat(2,1fr) !important; }
    .ca-home-footer-grid { grid-template-columns: 1.4fr 1fr 1fr !important; }
    .ca-home-footer-cta { grid-column: 1/-1; text-align: left !important; }
}
@media (max-width: 760px) {
    .ca-home-navlink { display: none !important; }
}
@media (max-width: 640px) {
    .ca-home-hero-ctas { flex-direction: column !important; align-items: stretch !important; }
    .ca-home-hero-ctas .ca-btn { width: 100% !important; text-align: center; }
    .ca-home-stats-grid { grid-template-columns: 1fr !important; gap: 44px !important; }
    .ca-home-stats-grid [data-ca-home-count-to] { font-size: 78px !important; }
    .ca-home-cert-grid { grid-template-columns: 1fr !important; }
    .ca-home-content-grid { grid-template-columns: 1fr !important; }
    .ca-home-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px 28px !important; }

    /* Tighter section rhythm + smaller "What We Do" text boxes on mobile */
    .ca-home-services,
    .ca-home-aim-section,
    .ca-home-stats-section,
    .ca-home-events-section,
    .ca-home-content-section { padding-top: 48px !important; padding-bottom: 48px !important; }
    .ca-home-logos { padding: 24px 0 !important; }
    .ca-home-aim-list { gap: 40px !important; }
    .ca-home-aim-row h2 { font-size: 26px !important; }
    .ca-home-aim-row p { font-size: 15px !important; max-width: none !important; }
}

/* ============================================================
   Fallback templates: page.php, index.php, archive.php, search.php, 404.php
   (template-parts/basic/). Plain written content such as the Privacy Policy,
   plus simple post lists. Only in use once Salient is switched off (or in
   the ?ca_native=1 preview).
   ============================================================ */
.ca-basic__inner { max-width: 800px; }
.ca-basic__inner--wide { max-width: var(--max-width); }
.ca-basic #breadcrumbs { margin-bottom: 24px; font-size: 14px; color: var(--ca-gray-500, #6b7280); }
.ca-basic #breadcrumbs a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ca-basic__head { margin-bottom: 40px; }
.ca-basic__eyebrow { margin-bottom: 8px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ca-pink-600, #ee486d); }
.ca-basic__title { color: var(--ca-dark-navy, #17182a); text-wrap: balance; }
.ca-basic__meta { margin-top: 12px !important; font-size: 14px !important; color: var(--ca-gray-500, #6b7280); }
.ca-basic__intro { margin-top: 16px; max-width: 640px; }
.ca-basic__intro p { font-size: 18px !important; line-height: 1.55 !important; color: var(--ca-gray-600, #4b5563); }
.ca-basic__image { margin-bottom: 40px; }
.ca-basic__image img { width: 100%; height: auto; border-radius: 20px; }
.ca-basic__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ca-basic .search-form { display: flex; gap: 8px; margin-top: 24px; max-width: 520px; }
.ca-basic .search-form label { flex: 1; }
.ca-basic .search-field { width: 100%; padding: 12px 16px; font: inherit; border: 1px solid #d1d5db; border-radius: 11px; }
.ca-basic .search-submit { padding: 12px 20px; font: 600 15px/1 var(--font-body); color: #fff; background: var(--ca-dark-navy, #17182a); border: 0; border-radius: 11px; cursor: pointer; }

/* Written content from the block editor. main.css's global resets (no
   margins or padding, tight 14px paragraphs) suit designed sections, not
   long-form text, so they're undone here. */
.ca-prose { font-size: 17px; line-height: 1.7; color: #2b2d3a; }
.ca-prose > * + * { margin-top: 1.1em; }
.ca-prose p, .ca-prose li { font-size: 17px; line-height: 1.7 !important; }
.ca-prose h2 { margin-top: 1.8em; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) !important; }
.ca-prose h3 { margin-top: 1.6em; }
.ca-prose h2 + *, .ca-prose h3 + *, .ca-prose h4 + * { margin-top: .6em; }
.ca-prose ul, .ca-prose ol { padding-left: 1.4em; }
.ca-prose li + li { margin-top: .4em; }
.ca-prose a { color: var(--ca-pink-700, #cf2f53); text-decoration: underline; text-underline-offset: 2px; }
.ca-prose img { max-width: 100%; height: auto; }
.ca-prose blockquote { padding-left: 1em; border-left: 3px solid var(--ca-pink-600, #ee486d); }
.ca-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ca-prose th, .ca-prose td { padding: 8px 10px; border: 1px solid #e5e7eb; text-align: left; }

/* Post lists */
.ca-basic__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.ca-basic__card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 20px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.ca-basic__card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(23, 24, 42, .10); }
.ca-basic__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.ca-basic__card-body { padding: 22px 24px 26px; }
.ca-basic__card-title { font-size: 20px !important; line-height: 1.3 !important; }
.ca-basic__card-title a { color: var(--ca-dark-navy, #17182a); }
.ca-basic__card-title a::after { content: ""; position: absolute; inset: 0; }
.ca-basic__excerpt { margin-top: 10px !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--ca-gray-600, #4b5563); }
.ca-basic__pages { margin-top: 48px; }
.ca-basic__pages .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ca-basic__pages .page-numbers { min-width: 44px; padding: 10px 14px; text-align: center; border: 1px solid #e5e7eb; border-radius: 11px; color: var(--ca-dark-navy, #17182a); }
.ca-basic__pages .page-numbers.current { background: var(--ca-dark-navy, #17182a); border-color: var(--ca-dark-navy, #17182a); color: #fff; }

/* Written pages (Text Page template): blocks used by the Privacy Policy. */
.ca-prose p:empty { display: none; }
.ca-prose .wp-block-separator { margin: 2.4em 0; border: 0; border-top: 1px solid #dcdde3; }
.ca-prose h1 { margin-bottom: .6em; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3rem) !important; line-height: 1.1 !important; color: var(--ca-dark-navy, #17182a); }
/* Pink callout box (group block with the "ca-callout" class). */
.ca-prose .ca-callout { max-width: 800px; padding: 16px 20px; background: #fde4ea; border-left: 8px solid #e13b5c; border-radius: 6px; color: #333; }
.ca-prose .ca-callout > * + * { margin-top: .6em; }
/* Key details (table block with the "ca-key-values" class): label / value rows, no borders. */
.ca-prose .ca-key-values table { width: auto; border: 0; font-size: 16px; }
.ca-prose .ca-key-values td { padding: 4px 48px 4px 0; border: 0; vertical-align: top; }
.ca-prose .ca-key-values td:first-child { font-weight: 700; color: var(--ca-dark-navy, #17182a); white-space: nowrap; }
/* Data tables: scroll sideways on phones rather than squash. */
.ca-prose .wp-block-table:not(.ca-key-values) { overflow-x: auto; }
.ca-prose .wp-block-table:not(.ca-key-values) table { min-width: 560px; }
.ca-prose .wp-block-table thead th { background: var(--ca-dark-navy, #17182a); color: #fff; font-weight: 700; border-color: var(--ca-dark-navy, #17182a); }
.ca-prose .wp-block-table:not(.ca-key-values) tbody tr:nth-child(even) { background: #f7f7fa; }
@media (max-width: 640px) {
    .ca-prose .ca-key-values td { display: block; padding: 0; }
    .ca-prose .ca-key-values td:first-child { padding-top: 10px; }
    .ca-prose .ca-callout { padding: 14px 16px; }
}
/* Bold text is at most Bold (700). Browsers render <strong> as "bolder",
   which inside an already-bold heading becomes Extrabold/Black. */
.ca-prose strong, .ca-prose b { font-weight: 700; }
.ca-prose :is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: inherit; }