/* ==========================================================
   CMS RICH TEXT
   Gebruik rond ieder CMS-tekstveld:
   <div class="rich-text">{{ content }}</div>
   ========================================================== */

:root {
    --cms-font-body: var(--font-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    --cms-font-heading: var(--font-head, Georgia, "Times New Roman", serif);
    --cms-text: var(--ink, #243847);
    --cms-muted: #667984;
    --cms-primary: var(--navy, #17537d);
    --cms-secondary: var(--blue, #3ba9d5);
    --cms-accent: var(--orange, #df4e10);
    --cms-green: var(--green, #8dba38);
    --cms-purple: var(--purple, #7f3c7d);
    --cms-yellow: var(--yellow, #f3cf00);
    --cms-border: #dbe6eb;
    --cms-surface: #f2f7f9;
    --cms-white: #ffffff;
    --cms-radius: 18px;
    --cms-shadow: 0 14px 40px rgba(23, 83, 125, 0.12);
}

.rich-text {
    color: var(--cms-text);
    font-family: var(--cms-font-body);
    font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    line-height: 1.75;
    word-break: normal;
}
.cta-band >.rich-text  h2 {
    max-width: 920px;
    margin: 0 auto 2.5rem;
    font-size: clamp(2.2rem, 5vw, 4.8rem);
}
.footer-grid .rich-text h2 {
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.rich-text > :first-child {
    margin-top: 0;
}

.rich-text > :last-child {
    margin-bottom: 0;
}

/* Koppen */
.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
    margin: 0.7em 0 0.7em;
    color: var(--cms-text);
    font-family: var(--cms-font-heading);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.rich-text h1 {
    font-size: clamp(2.25rem, 1.65rem + 2.6vw, 4.5rem);
}

.rich-text h2 {
    font-size: clamp(1.8rem, 1.45rem + 1.45vw, 3rem);
}

.rich-text h3 {
    font-size: clamp(1.5rem, 1.28rem + 0.85vw, 2.2rem);
}

.rich-text h4 {
    font-size: clamp(1.25rem, 1.12rem + 0.45vw, 1.65rem);
}

.rich-text h5 {
    font-size: clamp(1.05rem, 1rem + 0.2vw, 1.2rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rich-text h6 {
    color: var(--cms-muted);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Basistekst */
.rich-text p,
.rich-text ul,
.rich-text ol,
.rich-text dl,
.rich-text blockquote,
.rich-text figure,
.rich-text table,
.rich-text pre {
    margin: 0 0 1.5rem;
}

.rich-text p + p {
    margin-top: -0.25rem;
}

.rich-text strong,
.rich-text b {
    font-weight: 700;
}

.rich-text em,
.rich-text i {
    font-style: italic;
}

.rich-text small {
    color: var(--cms-muted);
    font-size: 0.875em;
}

.rich-text mark {
    padding: 0.08em 0.25em;
    border-radius: 0.25em;
    background: color-mix(in srgb, var(--cms-yellow) 45%, white);
    color: inherit;
}

.rich-text sup,
.rich-text sub {
    font-size: 0.75em;
    line-height: 0;
}

/* Eyebrow */
.rich-text .eyebrow {
    display: block;
    margin: 0 0 0.8rem;
    color: var(--cms-secondary);
    font-family: var(--cms-font-body);
    font-size: clamp(0.75rem, 0.72rem + 0.12vw, 0.875rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rich-text .eyebrow-orange { color: var(--cms-accent); }
.rich-text .eyebrow-green { color: var(--cms-green); }
.rich-text .eyebrow-purple { color: var(--cms-purple); }
/* Witte eyebrow */

.rich-text .eyebrow.eyebrow-white,
.rich-text.rich-text-light .eyebrow.eyebrow-white {
    color: #ffffff;
}

/* Links */
.rich-text a:not(.btn):not(.button) {
    color: var(--cms-primary);
    font-weight: 700;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.18em;
    transition: color 0.2s ease;
}

.rich-text a:not(.btn):not(.button):hover {
    color: var(--cms-accent);
}

.rich-text a:focus-visible {
    outline: 3px solid var(--cms-yellow);
    outline-offset: 4px;
}

/* Lijsten */
.rich-text ul,
.rich-text ol {
    padding-left: 1.5rem;
}

.rich-text ul ul,
.rich-text ul ol,
.rich-text ol ul,
.rich-text ol ol {
    margin: 0.5rem 0 0;
}

.rich-text li {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

.rich-text li::marker {
    color: var(--cms-accent);
    font-weight: 700;
}

.rich-text ol li::marker {
    color: var(--cms-primary);
}

.rich-text .list-check {
    padding-left: 0;
    list-style: none;
}

.rich-text .list-check li {
    position: relative;
    padding-left: 1.8rem;
}

.rich-text .list-check li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--cms-green);
    font-weight: 700;
}

/* Definitielijst */
.rich-text dt {
    margin-top: 1rem;
    font-weight: 700;
}

.rich-text dd {
    margin: 0.25rem 0 0 1.25rem;
}

/* Scheidingslijn */
.rich-text hr {
    height: 1px;
    margin: clamp(2rem, 5vw, 3.5rem) 0;
    border: 0;
    background: var(--cms-border);
}

/* Blockquote */
.rich-text blockquote {
    position: relative;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-left: 6px solid var(--cms-yellow);
    border-radius: 0 var(--cms-radius) var(--cms-radius) 0;
    background: var(--cms-surface);
    box-shadow: var(--cms-shadow);
    font-family: var(--cms-font-heading);
    font-size: clamp(1.15rem, 1.04rem + 0.5vw, 1.55rem);
    font-style: italic;
    line-height: 1.55;
}

.rich-text blockquote > :last-child {
    margin-bottom: 0;
}

.rich-text blockquote cite {
    display: block;
    margin-top: 1rem;
    color: var(--cms-muted);
    font-family: var(--cms-font-body);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 700;
}

/* Afbeeldingen en media */
.rich-text img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.75rem 0;
    border-radius: var(--cms-radius);
}

.rich-text figure {
    max-width: 100%;
}

.rich-text figure img {
    margin-bottom: 0.65rem;
}

.rich-text figcaption {
    color: var(--cms-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.rich-text iframe,
.rich-text video {
    display: block;
    max-width: 100%;
    border: 0;
    border-radius: var(--cms-radius);
}

.rich-text .video-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 1.5rem;
    overflow: hidden;
    border-radius: var(--cms-radius);
    aspect-ratio: 16 / 9;
}

.rich-text .video-wrapper iframe,
.rich-text .video-wrapper video {
    width: 100%;
    height: 100%;
}

/* Tabellen */
.rich-text .table-container {
    width: 100%;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    border-radius: 14px;
    box-shadow: 0 0 0 1px var(--cms-border);
    -webkit-overflow-scrolling: touch;
}

.rich-text table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.rich-text th,
.rich-text td {
    padding: 0.85rem 1rem;
    border: 1px solid var(--cms-border);
    text-align: left;
    vertical-align: top;
}

.rich-text th {
    color: var(--cms-white);
    background: var(--cms-primary);
    font-family: var(--cms-font-heading);
    font-weight: 700;
}

.rich-text tbody tr:nth-child(even) td {
    background: var(--cms-surface);
}

/* Knoppen */
.rich-text .btn,
.rich-text .button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0.35rem 0.5rem 0.35rem 0;
    padding: 0.8rem 1.4rem;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 999px;
    color: var(--cms-white);
    background: var(--cms-primary);
    font-family: var(--cms-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.rich-text .btn:hover,
.rich-text .button:hover {
    color: var(--cms-white);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(23, 83, 125, 0.2);
}

.rich-text .btn:focus-visible,
.rich-text .button:focus-visible {
    outline: 3px solid var(--cms-yellow);
    outline-offset: 3px;
}

.rich-text .btn-blue { background: var(--cms-secondary); }
.rich-text .btn-orange { background: var(--cms-accent); }
.rich-text .btn-green { background: var(--cms-green); }
.rich-text .btn-purple { background: var(--cms-purple); }
.rich-text .btn-outline {
    border-color: var(--cms-primary);
    color: var(--cms-primary);
    background: transparent;
}

.rich-text .btn-outline:hover {
    color: var(--cms-white);
    background: var(--cms-primary);
}

/* Witte knop voor gekleurde vlakken */
.rich-text .btn-white,
.rich-text .button-white {
    color: var(--cms-primary);
    background: var(--cms-white);
}

.rich-text .btn-white:hover,
.rich-text .button-white:hover {
    color: var(--cms-white);
    background: var(--cms-primary);
}

/* ===============================
   RICH TEXT OP DONKERE ACHTERGROND
   =============================== */

.rich-text.rich-text-light {
    --cms-text: #ffffff;
    --cms-muted: rgba(255, 255, 255, 0.8);
    --cms-link: #ffffff;

    color: #ffffff;
}

.hero-copy .rich-text .rich-text-light h1 {
	margin:0 !important;
    max-width: 760px;
    margin-bottom: 1.5rem;
    font-size: clamp(2.55rem, 4.5vw, 4.9rem) !important;
    letter-spacing: -.045em;

}

.rich-text.rich-text-light h1,
.rich-text.rich-text-light h2,
.rich-text.rich-text-light h3,
.rich-text.rich-text-light h4,
.rich-text.rich-text-light h5,
.rich-text.rich-text-light h6,
.rich-text.rich-text-light p,
.rich-text.rich-text-light li,
.rich-text.rich-text-light dt,
.rich-text.rich-text-light dd,
.rich-text.rich-text-light blockquote {
    color: #ffffff;
}

.rich-text.rich-text-light .eyebrow {
    color: var(--cms-secondary);
}

.rich-text.rich-text-light a:not(.btn):not(.button) {
    color: #ffffff;
}

.rich-text.rich-text-light a:not(.btn):not(.button):hover {
    color: var(--cms-yellow);
}

.rich-text.rich-text-light .button-light,
.rich-text.rich-text-light .btn-white,
.rich-text.rich-text-light .button-white {
    color: var(--cms-primary);
    background: var(--cms-white);
}

.rich-text.rich-text-light .button-light:hover,
.rich-text.rich-text-light .btn-white:hover,
.rich-text.rich-text-light .button-white:hover {
    color: var(--cms-white);
    background: var(--cms-primary);
}

/* Code */
.rich-text code {
    padding: 0.12em 0.35em;
    border-radius: 5px;
    background: #edf2f4;
    font-size: 0.9em;
}

.rich-text pre {
    max-width: 100%;
    padding: 1rem;
    overflow-x: auto;
    border-radius: 12px;
    color: var(--cms-white);
    background: #172833;
}

.rich-text pre code {
    padding: 0;
    color: inherit;
    background: transparent;
}

/* Uitlijning vanuit de editor */
.rich-text .text-left { text-align: left; }
.rich-text .text-center { text-align: center; }
.rich-text .text-right { text-align: right; }

@media (max-width: 600px) {
    .rich-text th,
.rich-text td {
        padding: 0.7rem 0.75rem;
    }

    .rich-text .btn,
.rich-text .button {
        width: 100%;
        margin-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rich-text *,
    .rich-text *::before,
    .rich-text *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}