/*
Theme Name: Recruiterinhuren.nl
Theme URI: https://recruiterinhuren.nl
Author: MacHelp
Author URI: https://machelp.nl
Description: Custom WordPress theme for Recruiterinhuren.nl — editorial design met Inter Tight + Inter
Version: 2.7.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ri
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    --orange:        #ee7a1f;
    --orange-dark:   #d96714;
    --orange-50:     #fef3e8;
    --blue:          #2A6EA6;
    --blue-dark:     #1f5586;
    --blue-50:       #eaf2fa;
    --ink:           #0f1216;
    --ink-80:        #2a2f36;
    --ink-60:        #5b636d;
    --ink-40:        #8b929c;
    --line:          #e7e5df;
    --bg:            #ffffff;
    --bg-warm:       #f6f3ee;
    --bg-soft:       #faf8f4;
    --radius:        14px;
    --radius-sm:     8px;
    --shadow-sm:     0 1px 2px rgba(15,18,22,.06), 0 2px 8px rgba(15,18,22,.04);
    --shadow-md:     0 6px 24px rgba(15,18,22,.08), 0 2px 6px rgba(15,18,22,.05);
    --font-display:  'Inter Tight', ui-sans-serif, system-ui, sans-serif;
    --font-body:     'Inter', ui-sans-serif, system-ui, sans-serif;
    --container:     1240px;
    --pad-h:         48px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .15s ease; }
ul { list-style: none; }
h1,h2,h3,h4,h5 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.05;
    margin: 0;
}
p { margin: 0; }

/* ============================================================
   LAYOUT
   ============================================================ */
.ri-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-h); }
.ri-wrap--narrow { max-width: 880px; }

/* ============================================================
   NAV
   ============================================================ */
.ri-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    will-change: transform;
}

@media (max-width: 768px) {
    .ri-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
    }
    body {
        padding-top: 64px;
    }
}
.ri-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}
.ri-nav__logo { display: flex; align-items: center; }
.ri-nav__links { display: flex; gap: 32px; align-items: center; }
.ri-nav__link {
    font-size: 15px;
    font-weight: 500;
    color: var(--blue);
    position: relative;
    padding: 6px 0;
    transition: color .15s;
}
.ri-nav__link:hover { color: var(--blue-dark); }
.ri-nav__link.current-menu-item::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 3px;
    background: var(--blue);
    border-radius: 2px;
}
.ri-nav__divider { width: 1px; height: 18px; background: var(--line); }
.ri-nav__social { display: flex; gap: 8px; align-items: center; color: var(--ink-60); }
.ri-nav__social a:hover { color: var(--blue); }

/* Hamburger knop — alleen zichtbaar op mobiel */
.ri-nav__hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: background .15s ease;
    flex-shrink: 0;
}
.ri-nav__hamburger:hover { background: var(--bg-warm); }
.ri-hamburger__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
    transform-origin: center;
}
.ri-nav__hamburger[aria-expanded="true"] .ri-hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ri-nav__hamburger[aria-expanded="true"] .ri-hamburger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ri-nav__hamburger[aria-expanded="true"] .ri-hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiel menu panel */
.ri-mobile-menu {
    background: #fff;
    border-top: 1px solid var(--line);
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .3s ease;
}
.ri-mobile-menu.is-open { max-height: 560px; padding: 8px 0 28px; }
.ri-mobile-menu__links { display: flex; flex-direction: column; padding: 8px 0; }
.ri-mobile-menu__link {
    display: block;
    padding: 14px 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    transition: color .15s ease;
    text-decoration: none;
    position: relative;
}
.ri-mobile-menu__link:last-child { border-bottom: none; }
.ri-mobile-menu__link:hover { color: var(--blue); }
.ri-mobile-menu__link.is-active { color: var(--blue); }
.ri-mobile-menu__link.is-active::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: var(--blue);
    border-radius: 2px;
}
.ri-mobile-menu__social {
    margin-top: 20px;
    display: flex;
    align-items: center;
}
.ri-mobile-menu__social a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-60);
}
.ri-mobile-menu__social a:hover { color: var(--blue); }
.ri-mobile-menu__tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--orange);
    text-decoration: none;
}
.ri-mobile-menu__tel:hover { color: var(--orange-dark); }

/* ============================================================
   BUTTONS
   ============================================================ */
.ri-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    border: none;
    font-family: var(--font-body);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
    text-decoration: none;
}
.ri-btn:hover { transform: translateY(-1px); }
.ri-btn--primary {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 6px 18px rgba(42,110,166,.35);
}
.ri-btn--primary:hover { background: var(--blue-dark); color: #fff; box-shadow: 0 10px 24px rgba(42,110,166,.45); }
.ri-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ri-btn--ghost:hover { background: var(--ink); color: #fff; }
.ri-btn--ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.ri-btn--ghost-light:hover { background: #fff; color: var(--ink); }
.ri-btn--sm { padding: 10px 18px; font-size: 14px; }

/* ============================================================
   EYEBROW
   ============================================================ */
.ri-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    font-weight: 600;
    color: var(--orange);
}
.ri-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--orange); flex-shrink: 0; }

/* ============================================================
   PAGE HEADER — foto-hero met breadcrumb
   Zelfde opbouw als de homepage hero maar dan full-width
   achtergrond foto (grijs gefilterd) + witte tekst.
   ============================================================ */
.ri-ph {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-bottom: none;
}

/* Foto-achtergrond laag */
.ri-ph__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.ri-ph__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(1) contrast(1.05);
    display: block;
}
/* Donkere overlay zodat tekst leesbaar is */
.ri-ph__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(15,18,22,.30) 0%,
        rgba(15,18,22,.65) 60%,
        rgba(15,18,22,.80) 100%
    );
}

/* Inhoud bovenop de foto */
.ri-ph__inner {
    position: relative;
    z-index: 2;
    padding: 40px 0 64px;
}

/* Breadcrumb */
.ri-ph__crumbs {
    font-size: 13px;
    color: rgba(255,255,255,.65);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ri-ph__crumbs a { color: rgba(255,255,255,.65); transition: color .15s; }
.ri-ph__crumbs a:hover { color: #fff; }
.ri-ph__crumbs__sep {
    color: rgba(255,255,255,.35);
    font-size: 11px;
}
.ri-ph__crumbs__current { color: rgba(255,255,255,.9); font-weight: 500; }

/* Kicker boven de titel */
.ri-ph__kicker {
    color: var(--orange);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 14px;
}

/* Titel en lede — wit op donkere foto */
.ri-ph__title {
    font-size: 56px;
    letter-spacing: -.03em;
    margin-bottom: 14px;
    color: #ffffff;
    line-height: 1.04;
}
.ri-ph__lede {
    font-size: 19px;
    color: rgba(255,255,255,.80);
    max-width: 640px;
    line-height: 1.55;
}

@media (max-width: 768px) {
    .ri-ph { min-height: 320px; }
    .ri-ph__title { font-size: 36px; }
    .ri-ph__lede { font-size: 16px; }
}

/* Breadcrumb boven hero grid (inner pages) */
.ri-hero__crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-60);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.ri-hero__crumbs a { color: var(--ink-60); }
.ri-hero__crumbs a:hover { color: var(--orange); }
.ri-hero__crumbs span[aria-hidden] { color: var(--ink-40); }
.ri-hero__crumbs span[aria-current] { color: var(--ink-80); font-weight: 500; }
/* Yoast breadcrumb separator */
.ri-hero__crumbs .breadcrumb_last { color: var(--ink-80); font-weight: 500; }
.ri-hero__crumbs .yoast-breadcrumbs span:not(.breadcrumb_last)::after { content: '/'; margin: 0 6px; color: var(--ink-40); }

/* ============================================================
   HERO
   ============================================================ */
.ri-hero { padding: 72px 0 64px; }
.ri-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ri-hero__img {
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    overflow: hidden;
    filter: grayscale(1) contrast(1.05);
    background: #ddd;
}
.ri-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.ri-hero__kicker {
    color: var(--orange);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 18px;
}
.ri-hero__title { font-size: 56px; letter-spacing: -.03em; line-height: 1.04; margin-bottom: 20px; }
.ri-hero__lede { font-size: 17px; color: var(--ink-60); line-height: 1.6; margin-bottom: 28px; }
.ri-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   INTRO SECTION
   ============================================================ */
.ri-intro-section { background: var(--bg-warm); padding: 72px 0; }
.ri-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ri-intro__img {
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    overflow: hidden;
    filter: grayscale(1) contrast(1.05);
    background: #ddd;
    order: 2;
}
.ri-intro__img img { width: 100%; height: 100%; object-fit: cover; }
.ri-intro__content { order: 1; }
/* Lijsten in het intro-blok (wysiwyg inhoud) */
.ri-intro__heading { font-size: 36px; letter-spacing: -.025em; margin-bottom: 18px; }
.ri-intro__body ol,
.ri-intro__body ul {
    padding-left: 1.4em;
    margin: 12px 0;
}
.ri-intro__body ol { list-style: decimal; }
.ri-intro__body ul { list-style: disc; }
.ri-intro__body li {
    margin-bottom: 10px;
    color: var(--ink-60);
    font-size: 16px;
    line-height: 1.65;
    padding-left: 4px;
}
.ri-intro__body p {
    color: var(--ink-60);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 12px;
}
.ri-intro__body p:last-child { margin-bottom: 0; }
.ri-intro__body em { font-style: italic; }
.ri-intro__body strong, .ri-intro__body b { font-weight: 600; color: var(--ink); }
.ri-intro__body a { color: var(--orange); }
.ri-intro__body a:hover { text-decoration: underline; }

/* ============================================================
   SECTIONS
   ============================================================ */
.ri-section { padding: 80px 0; }
.ri-section--warm { background: var(--bg-warm); }
.ri-section--bottom { padding-bottom: 96px; }
.ri-section__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 12px;
}
.ri-section__eyebrow {
    color: var(--orange);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 10px;
}
.ri-section__title { font-size: 34px; letter-spacing: -.025em; }
.ri-section__all { color: var(--orange); font-weight: 600; font-size: 14px; white-space: nowrap; }
.ri-section__all:hover { color: var(--orange-dark); }

/* ============================================================
   CATEGORIE FILTER BUTTONS
   ============================================================ */
.ri-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.ri-filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-body);
    border: 1.5px solid var(--line);
    background: transparent;
    color: var(--ink-60);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    white-space: nowrap;
    line-height: 1;
    text-decoration: none;
}
.ri-filter-btn:hover {
    border-color: var(--ink-80);
    color: var(--ink);
    background: transparent;
}
.ri-filter-btn.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* ============================================================
   BLOG POSTS
   ============================================================ */
.ri-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.ri-post { display: flex; flex-direction: column; gap: 0; }
.ri-post a { display: flex; flex-direction: column; gap: 0; color: inherit; text-decoration: none; }

/* Afbeelding */
.ri-post__img {
    aspect-ratio: 4/3;
    border-radius: var(--radius);
    overflow: hidden;
    filter: grayscale(1) contrast(1.05);
    transition: filter .2s;
    background: #ddd;
    position: relative;
    margin-bottom: 16px;
}
.ri-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ri-post:hover .ri-post__img { filter: grayscale(0); }
.ri-post:hover .ri-post__img img { transform: scale(1.04); }

/* Meta: datum + categorie */
.ri-post__meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--ink-60);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    margin-bottom: 10px;
}
.ri-post__tag { color: var(--orange); }

/* Titel */
.ri-post__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 10px;
    transition: color .15s ease;
}
.ri-post:hover .ri-post__title { color: var(--blue); }

/* Samenvatting */
.ri-post__excerpt {
    color: var(--ink-60);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 14px;
    flex: 1;
}

/* Lees meer */
.ri-post__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--orange);
    font-size: 13px;
    font-weight: 600;
    margin-top: auto;
}

/* ============================================================
   PAGINERING
   ============================================================ */
.ri-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 64px;
    flex-wrap: wrap;
}
.ri-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-body);
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink-60);
    text-decoration: none;
    transition: all .15s ease;
}
.ri-pagination .page-numbers:hover {
    border-color: var(--ink-80);
    color: var(--ink);
}
.ri-pagination .page-numbers.current {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.ri-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    pointer-events: none;
}
.ri-pagination .prev,
.ri-pagination .next {
    padding: 0 18px;
    gap: 6px;
}

/* ============================================================
   REVIEWS
   ============================================================ */
.ri-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ri-review {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ri-review__stars { color: var(--orange); font-size: 14px; letter-spacing: 2px; }
.ri-review__quote { font-family: var(--font-display); font-size: 19px; line-height: 1.45; letter-spacing: -.012em; }
.ri-review__who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.ri-review__av {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--blue-50);
    display: grid;
    place-items: center;
    color: var(--blue);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    overflow: hidden;
}
.ri-review__av img { width: 100%; height: 100%; object-fit: cover; }
.ri-review__name { font-weight: 600; font-size: 14px; display: block; }
.ri-review__role { font-size: 13px; color: var(--ink-60); display: block; }

/* ============================================================
   FAQ
   ============================================================ */
.ri-faq-layout { display: grid; grid-template-columns: .4fr 1fr; gap: 72px; }
.ri-faq__sidebar { position: sticky; top: 100px; align-self: flex-start; }
.ri-faq__topics { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 2px; }
.ri-faq__topic a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-80);
    transition: background .15s, color .15s;
}
.ri-faq__topic a:hover { background: var(--bg-warm); color: var(--orange); }
.ri-faq__topic-count { color: var(--ink-40); font-weight: 400; font-size: 13px; }
.ri-faq__cta-box { margin-top: 32px; padding: 24px; background: var(--bg-warm); border-radius: var(--radius-sm); }
.ri-faq__cta-box h4 { font-size: 16px; margin-bottom: 8px; }
.ri-faq__cta-box p { font-size: 14px; color: var(--ink-60); margin-bottom: 14px; }

.ri-faq__group { margin-bottom: 48px; }
.ri-faq__group-title { font-size: 26px; letter-spacing: -.02em; margin-bottom: 16px; }
.ri-faq__list { display: flex; flex-direction: column; }
.ri-faq__item { border-top: 1px solid var(--line); }
.ri-faq__item:last-child { border-bottom: 1px solid var(--line); }
.ri-faq__btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.015em;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
}
.ri-faq__btn svg { flex-shrink: 0; color: var(--orange); transition: transform .2s ease; }
.ri-faq__item.is-open .ri-faq__btn svg { transform: rotate(45deg); }
.ri-faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .3s ease;
    color: var(--ink-60);
    font-size: 16px;
    line-height: 1.65;
}
.ri-faq__item.is-open .ri-faq__answer { max-height: 600px; padding-bottom: 22px; }

/* Lijsten en opmaak in FAQ-antwoorden */
.ri-faq__answer ol,
.ri-faq__answer ul {
    padding-left: 1.4em;
    margin: 10px 0;
}
.ri-faq__answer ol { list-style: decimal; }
.ri-faq__answer ul { list-style: disc; }
.ri-faq__answer li {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-60);
}
.ri-faq__answer p { margin-bottom: 10px; }
.ri-faq__answer p:last-child { margin-bottom: 0; }
.ri-faq__answer strong { font-weight: 600; color: var(--ink); }
.ri-faq__answer a { color: var(--orange); }
.ri-faq__answer a:hover { text-decoration: underline; }

/* KvK checkbox in nieuwsbrief */
.ri-nl-kvk-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: var(--ink-80);
    cursor: pointer;
    line-height: 1.5;
}
.ri-nl-kvk-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--blue);
}

.ri-faq__search-wrap { position: relative; max-width: 480px; width: 100%; }
.ri-faq__search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-60); pointer-events: none; }
.ri-faq__search {
    width: 100%;
    padding: 14px 18px 14px 48px;
    border-radius: 12px;
    border: 1.5px solid var(--line);
    background: #fff;
    font-size: 15px;
    font-family: var(--font-body);
    transition: border-color .15s, box-shadow .15s;
}
.ri-faq__search:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(238,122,31,.15); }

/* ============================================================
   CTA BANNER
   ============================================================ */
.ri-cta-banner {
    background: var(--ink);
    color: #fff;
    border-radius: 18px;
    padding: 64px 56px;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.ri-cta-banner__bg {
    position: absolute;
    top: -80px; right: -60px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(238,122,31,.25), transparent 70%);
    pointer-events: none;
}
.ri-cta-banner h2 { color: #fff; font-size: 42px; letter-spacing: -.025em; margin-bottom: 12px; }
.ri-cta-banner p { color: rgba(255,255,255,.7); font-size: 17px; }
.ri-cta-banner__actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* ============================================================
   FOOTER
   ============================================================ */
.ri-footer { background: var(--blue); color: #fff; padding: 72px 0 32px; }
.ri-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,.18);
}
.ri-footer__brand p { max-width: 340px; margin-top: 20px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.85); }
.ri-footer__col h4,
.ri-footer__heading { color: #fff; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600; font-family: var(--font-body); }
.ri-footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: rgba(255,255,255,.85); }
.ri-footer__col a { color: rgba(255,255,255,.85); }
.ri-footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ri-footer__social { display: flex; gap: 10px; margin-top: 20px; }
.ri-footer__social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: grid; place-items: center;
    color: #fff;
    transition: background .15s, color .15s;
}
.ri-footer__social a:hover { background: #fff; color: var(--blue); }
.ri-footer__bot { display: flex; justify-content: space-between; padding-top: 28px; font-size: 13px; color: rgba(255,255,255,.7); flex-wrap: wrap; gap: 8px; }
.ri-footer__bot a:hover { color: #fff; }

/* ============================================================
   FORMS
   ============================================================ */
.ri-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.ri-field label { font-size: 13px; font-weight: 600; color: var(--ink-80); }
.ri-field input, .ri-field textarea, .ri-field select {
    font: inherit;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1.5px solid var(--line);
    background: #fff;
    font-family: var(--font-body);
    transition: border-color .15s, box-shadow .15s;
}
.ri-field input:focus, .ri-field textarea:focus, .ri-field select:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(238,122,31,.15);
}
.ri-field textarea { resize: vertical; min-height: 120px; }
.ri-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ============================================================
   SINGLE POST
   ============================================================ */
.ri-single { padding: 64px 0 96px; }
.ri-single__thumb { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; margin-bottom: 40px; }
.ri-single__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ri-single__content h2, .ri-single__content h3 { margin-top: 36px; margin-bottom: 14px; }
.ri-single__content p { margin-bottom: 18px; color: var(--ink-80); font-size: 17px; line-height: 1.7; }
.ri-single__content ul, .ri-single__content ol { padding-left: 24px; margin-bottom: 18px; }
.ri-single__content li { list-style: disc; margin-bottom: 6px; color: var(--ink-80); font-size: 17px; line-height: 1.7; }
.ri-single__content a { color: var(--orange); }
.ri-single__content a:hover { text-decoration: underline; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* wpautop — alinea's in ACF textarea-velden */
.ri-hero__lede p,
.ri-intro__body p,
.ri-nl-intro p,
.ri-ph__lede p {
    margin-bottom: 10px;
}
.ri-hero__lede p:last-child,
.ri-intro__body p:last-child,
.ri-nl-intro p:last-child,
.ri-ph__lede p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   RESPONSIVE — TABLET (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    :root { --pad-h: 32px; }

    /* Typografie */
    .ri-hero__title  { font-size: 42px; }
    .ri-nl-titel     { font-size: 46px; }

    /* Layout */
    .ri-posts        { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .ri-reviews      { grid-template-columns: 1fr 1fr; gap: 20px; }
    .ri-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .ri-cta-banner   { grid-template-columns: 1fr; gap: 28px; padding: 48px 40px; }
    .ri-hero__grid   { gap: 48px; }
    .ri-intro__grid  { gap: 48px; }
}

/* ============================================================
   RESPONSIVE — MOBIEL (max 768px)
   ============================================================ */
@media (max-width: 768px) {
    :root { --pad-h: 20px; }

    /* --- NAV -------------------------------------------------- */
    .ri-nav__inner   { height: 64px; }
    .ri-nav__desktop { display: none; }
    .ri-nav__hamburger { display: flex; }

    /* --- HERO ------------------------------------------------- */
    .ri-hero         { padding: 40px 0 36px; }
    .ri-hero__grid   { grid-template-columns: 1fr; gap: 28px; }
    .ri-hero__img    { aspect-ratio: 16/9; order: -1; border-radius: var(--radius-sm); }
    .ri-hero__title  { font-size: 30px; letter-spacing: -.02em; line-height: 1.1; }
    .ri-hero__lede   { font-size: 15px; margin-bottom: 20px; }
    .ri-hero__kicker { font-size: 11px; margin-bottom: 12px; }
    .ri-hero__ctas   { gap: 10px; }
    .ri-hero__crumbs { font-size: 12px; margin-bottom: 14px; }

    /* --- SECTIES ---------------------------------------------- */
    .ri-section          { padding: 48px 0; }
    .ri-section--bottom  { padding-bottom: 64px; }
    .ri-section__header  { flex-direction: column; gap: 8px; margin-bottom: 24px; }
    .ri-section__title   { font-size: 26px; }
    .ri-section__eyebrow { font-size: 11px; }

    /* --- INTRO BLOK ------------------------------------------- */
    .ri-intro-section { padding: 48px 0; }
    .ri-intro__grid   { grid-template-columns: 1fr; gap: 28px; }
    .ri-intro__img    { aspect-ratio: 16/9; order: -1; }
    .ri-intro__heading { font-size: 26px; }

    /* --- BLOG POSTS ------------------------------------------- */
    .ri-posts         { grid-template-columns: 1fr; gap: 32px; }
    .ri-post__title   { font-size: 18px; }
    .ri-filters       { gap: 6px; }
    .ri-filter-btn    { font-size: 12px; padding: 6px 14px; }

    /* --- REVIEWS ---------------------------------------------- */
    .ri-reviews       { grid-template-columns: 1fr; gap: 16px; }
    .ri-review        { padding: 24px; }
    .ri-review__quote { font-size: 17px; }

    /* --- FAQ -------------------------------------------------- */
    .ri-faq-layout    { grid-template-columns: 1fr; gap: 32px; }
    .ri-faq__sidebar  { position: static; }
    .ri-faq__group-title { font-size: 22px; }
    .ri-faq__btn      { font-size: 16px; padding: 18px 0; }

    /* --- CTA BANNER ------------------------------------------- */
    .ri-cta-banner    { grid-template-columns: 1fr; gap: 24px; padding: 36px 24px; border-radius: 12px; }
    .ri-cta-banner h2 { font-size: 28px; }
    .ri-cta-banner p  { font-size: 15px; }

    /* --- FOOTER ----------------------------------------------- */
    .ri-footer        { padding: 48px 0 24px; }
    .ri-footer__grid  { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
    .ri-footer__bot   { flex-direction: column; gap: 8px; font-size: 12px; }

    /* --- FORMULIEREN ------------------------------------------ */
    .ri-field-row     { grid-template-columns: 1fr; gap: 0; }
    .ri-field input, .ri-field textarea, .ri-field select { font-size: 16px; } /* Voorkomt zoom op iOS */

    /* --- CONTACT PAGINA --------------------------------------- */
    .ri-contact__grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    /* --- PAGINERING ------------------------------------------- */
    .ri-pagination    { gap: 4px; margin-top: 40px; }
    .ri-pagination .page-numbers { min-width: 36px; height: 36px; font-size: 13px; padding: 0 10px; }

    /* --- SINGLE POST ------------------------------------------ */
    .ri-single        { padding: 40px 0 64px; }
    .ri-single__content p { font-size: 16px; }

    /* --- BUTTONS ---------------------------------------------- */
    .ri-btn           { padding: 12px 20px; font-size: 14px; }
    .ri-btn--sm       { padding: 9px 16px; font-size: 13px; }

    /* --- NIEUWSBRIEF ------------------------------------------ */
    .ri-nl-section    { padding: 40px 0 56px; }
    .ri-nl-center     { text-align: left; }
    .ri-nl-titel      { font-size: 32px; }
    .ri-nl-intro      { font-size: 16px; margin-left: 0; margin-right: 0; margin-bottom: 32px; }
    .ri-nl-grid       { grid-template-columns: 1fr; gap: 28px; }
    .ri-nl-card       { padding: 24px 20px; }
    .ri-nl-badge      { margin-bottom: 20px; }
}

/* ============================================================
   RESPONSIVE — KLEIN MOBIEL (max 480px)
   ============================================================ */
@media (max-width: 480px) {
    :root { --pad-h: 16px; }

    /* Nav: hamburger al actief */
    .ri-nav__links    { gap: 10px; }

    /* Titels nog kleiner */
    .ri-hero__title   { font-size: 26px; }
    .ri-section__title { font-size: 24px; }
    .ri-nl-titel      { font-size: 28px; }
    .ri-cta-banner h2 { font-size: 24px; }

    /* Intro sectie: afbeelding verbergen op erg klein scherm */
    .ri-intro__img    { display: none; }

    /* Reviews: compacter */
    .ri-review        { padding: 20px; }
    .ri-review__quote { font-size: 16px; }

    /* CTA banner */
    .ri-cta-banner    { padding: 28px 20px; }
    .ri-cta-banner__actions { flex-direction: column; width: 100%; }
    .ri-cta-banner__actions .ri-btn { width: 100%; justify-content: center; }

    /* Hero afbeelding verbergen op allerkleinste schermen */
    .ri-hero__img     { display: none; }

    /* Paginering: verberg puntjes */
    .ri-pagination .page-numbers.dots { display: none; }

    /* Footer social icons */
    .ri-footer__social { gap: 6px; }
}
/* ============================================================
   NIEUWSBRIEF AANMELDPAGINA
   ============================================================ */

/* Eén achtergrondkleur voor de hele pagina (ook body) */
.ri-nl-page-wrap {
    background: var(--bg-warm);
    min-height: 60vh;
}
body:has(.ri-nl-page-wrap) {
    background: var(--bg-warm);
}

.ri-nl-section {
    padding: 80px 0 96px;
}

/* Gecentreerde container */
.ri-nl-center {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

/* Badge */
.ri-nl-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-80);
    margin-bottom: 28px;
    box-shadow: var(--shadow-sm);
}
.ri-nl-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    flex-shrink: 0;
}

/* Titel */
.ri-nl-titel {
    font-family: var(--font-display);
    font-size: 58px;
    letter-spacing: -.035em;
    line-height: 1.02;
    margin-bottom: 20px;
    color: var(--ink);
}
.ri-nl-titel em {
    font-style: normal;
    color: var(--orange);
}

/* Intro */
.ri-nl-intro {
    font-size: 18px;
    color: var(--ink-60);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 48px;
}

/* Twee kolommen: voordelen links, formulier rechts */
.ri-nl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    text-align: left;
}

/* Voordelen checklist */
.ri-nl-voordelen {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ri-nl-voordeel {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;
    color: var(--ink-80);
    line-height: 1.5;
}
.ri-nl-voordeel__icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Formulier kaart */
.ri-nl-card {
    background: #fff;
    border-radius: 18px;
    padding: 36px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
}
.ri-nl-card__titel {
    font-size: 26px;
    letter-spacing: -.02em;
    margin-bottom: 6px;
}
.ri-nl-card__sub {
    color: var(--ink-60);
    font-size: 15px;
    margin-bottom: 24px;
}

/* Submit knop full-width */
.ri-nl-submit {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
}

/* Privacy disclaimer */
.ri-nl-privacy {
    font-size: 12px;
    color: var(--ink-60);
    text-align: center;
    margin-top: 14px;
    line-height: 1.5;
}

/* Foutmeldingen */
.ri-nl-errors {
    background: #fff0f0;
    border: 1.5px solid #e05252;
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #c03030;
}
.ri-nl-errors p { margin: 0; }
.ri-nl-errors p + p { margin-top: 4px; }

/* Successtatus */
.ri-nl-success {
    text-align: center;
    padding: 32px 0;
}
.ri-nl-success__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--orange);
    display: grid;
    place-items: center;
}
.ri-nl-success__titel {
    font-size: 26px;
    letter-spacing: -.02em;
    margin-bottom: 10px;
}
.ri-nl-success__tekst {
    color: var(--ink-60);
    font-size: 16px;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .ri-nl-titel { font-size: 38px; }
    .ri-nl-grid { grid-template-columns: 1fr; gap: 36px; text-align: left; }
    .ri-nl-center { text-align: left; }
    .ri-nl-intro { margin-left: 0; margin-right: 0; }
    .ri-nl-card { padding: 28px 22px; }
    .ri-nl-section { padding: 56px 0 72px; }
}

/* ============================================================
   STANDAARD PAGINA HEADER (geen foto, alleen titel)
   Gebruikt door page.php voor tekst-pagina's zoals
   Algemene voorwaarden, Privacy, etc.
   ============================================================ */
.ri-page-header {
    padding: 56px 0 40px;
    background: var(--bg-warm);
    border-bottom: 1px solid var(--line);
}
.ri-page-header__title {
    font-size: 48px;
    letter-spacing: -.03em;
    color: var(--ink);
}

@media (max-width: 768px) {
    .ri-page-header { padding: 36px 0 28px; }
    .ri-page-header__title { font-size: 34px; }
}

.home .ri-hero img {
    transform: scaleX(-1);
}

/* ============================================================
   PAGINA CONTENT — WordPress block-editor inhoud
   Styled voor page.php (Over ons, AV, Privacy etc.)
   ============================================================ */
.ri-page-content {
    max-width: 860px;
    padding: 56px 0 80px;
}

/* Koppen */
.ri-page-content h2 {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 40px 0 14px;
    line-height: 1.2;
}
.ri-page-content h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--ink);
    margin: 32px 0 12px;
    line-height: 1.3;
}
.ri-page-content h4 {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    margin: 24px 0 8px;
}

/* Tekst */
.ri-page-content p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink-80);
    margin-bottom: 18px;
}
.ri-page-content p:last-child { margin-bottom: 0; }

/* Links */
.ri-page-content a {
    color: var(--orange);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ri-page-content a:hover { color: var(--blue); }

/* Lijsten */
.ri-page-content ul,
.ri-page-content ol {
    padding-left: 1.5em;
    margin: 0 0 18px;
}
.ri-page-content ul { list-style: disc; }
.ri-page-content ol { list-style: decimal; }
.ri-page-content li {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-80);
    margin-bottom: 6px;
    padding-left: 4px;
}
.ri-page-content li strong { color: var(--ink); }

/* Afbeeldingen */
.ri-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: 24px 0;
    display: block;
}
.ri-page-content figure {
    margin: 28px 0;
}
.ri-page-content figcaption {
    font-size: 13px;
    color: var(--ink-60);
    margin-top: 8px;
    text-align: center;
}

/* Citaten */
.ri-page-content blockquote {
    border-left: 4px solid var(--orange);
    padding: 16px 24px;
    margin: 28px 0;
    background: var(--bg-warm);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ri-page-content blockquote p {
    font-size: 18px;
    font-style: italic;
    color: var(--ink);
}

/* HR / scheidingslijn */
.ri-page-content hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 40px 0;
}

/* Eerste h2/h3 geen extra top margin */
.ri-page-content > h2:first-child,
.ri-page-content > h3:first-child { margin-top: 0; }

@media (max-width: 768px) {
    .ri-page-content { padding: 36px 0 56px; }
    .ri-page-content h2 { font-size: 26px; }
    .ri-page-content h3 { font-size: 20px; }
    .ri-page-content p,
    .ri-page-content li { font-size: 16px; }
}

/* Honeypot veld — verborgen voor mensen, zichtbaar voor bots */
.ri-form-field-url { position:absolute; left:-9999px; height:0; overflow:hidden; }