/*
Theme Name: Reisroute
Theme URI: https://camperkaart.nl
Author: Maarten de Berk
Description: Affiliate- en contentthema voor camper, vakantie en vrije tijd. Kaartgedreven platformthema met eigen identiteit, sluit aan op de Camperkaart-plugin. Huisstijl diep petrol/zeeblauw (#1F5965) en leigroen-zwart (#1B2B2E) met warm zand en terracotta accent.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: reisroute
*/

/* ============================================================
   Designtokens
   ============================================================ */
:root {
    --rr-groen:      #1f5965;   /* hoofdkleur: diep petrol/zeeblauw */
    --rr-groen-d:    #16434c;   /* donkerder petrol voor hover */
    --rr-groen-l:    #6aa5b0;   /* lichter petrol voor accenten op donker */
    --rr-donker:     #1b2b2e;   /* diep leigroen-zwart, tekst + donkere secties */
    --rr-donker-2:   #2a3d40;
    --rr-zand:       #ece4d3;   /* warm zand, achtergronden */
    --rr-zand-d:     #ddd0b6;
    --rr-terra:      #d98841;   /* warm accent, weg van de campercontact-blauw */
    --rr-terra-d:    #c5762f;
    --rr-creme:      #faf7f0;   /* paginabasis */
    --rr-wit:        #ffffff;
    --rr-tekst:      #293536;
    --rr-tekst-licht:#5f6d6e;
    --rr-rand:       #e3dccd;

    --rr-radius:     4px;
    --rr-radius-sm:  4px;
    --rr-shadow:     0 6px 26px rgba(41,53,54,.09);
    --rr-shadow-h:   0 14px 40px rgba(41,53,54,.16);

    --rr-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --rr-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --rr-maxw: 1200px;
}

/* ============================================================
   Basis
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--rr-font-body);
    color: var(--rr-tekst);
    background: var(--rr-creme);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--rr-font-display); font-weight: 600; line-height: 1.15; color: var(--rr-donker); margin: 0 0 .5em; }
a { color: var(--rr-groen-d); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }

.rr-wrap { max-width: var(--rr-maxw); margin: 0 auto; padding: 0 24px; }
.rr-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--rr-font-body); font-size: 12.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--rr-terra-d);
    margin-bottom: 14px;
}
.rr-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--rr-terra); border-radius: 2px; }

.rr-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--rr-groen); color: #fff; border: 0;
    padding: 14px 26px; border-radius: 4px; font-weight: 600; font-size: 15px;
    cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s;
    font-family: var(--rr-font-body);
}
.rr-btn:hover { background: var(--rr-groen-d); text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(31,89,101,.30); }
.rr-btn-terra { background: var(--rr-terra); }
.rr-btn-terra:hover { background: var(--rr-terra-d); box-shadow: 0 8px 20px rgba(217,136,65,.32); }
.rr-btn-ghost { background: transparent; color: var(--rr-donker); border: 1.5px solid var(--rr-rand); }
.rr-btn-ghost:hover { background: var(--rr-donker); color: #fff; border-color: var(--rr-donker); box-shadow: none; }

/* ============================================================
   Header
   ============================================================ */
.rr-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    transition: background .3s, box-shadow .3s, border-color .3s;
    background: transparent; border-bottom: 1px solid transparent;
}
.rr-header.is-solid {
    background: rgba(250,247,240,.92); backdrop-filter: blur(10px);
    border-bottom-color: var(--rr-rand); box-shadow: 0 2px 20px rgba(41,53,54,.06);
}
/* Wit logo en nav zolang de header transparant over de foto ligt. */
.rr-header:not(.is-solid) .rr-logo,
.rr-header:not(.is-solid) .rr-nav a { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.3); }
.rr-header:not(.is-solid) .rr-logo-mark { color: #fff; }
.rr-header.is-solid .rr-logo-mark { color: var(--rr-groen); }
.rr-header:not(.is-solid) .rr-burger span { background: #fff; }
.rr-header-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.rr-logo { display: flex; align-items: center; gap: 11px; font-family: var(--rr-font-display); font-size: 23px; font-weight: 600; color: var(--rr-donker); transition: color .3s; }
.rr-logo:hover { text-decoration: none; }
.rr-logo-mark { width: 40px; height: 40px; flex: none; color: var(--rr-groen); }
.rr-nav { display: flex; align-items: center; gap: 30px; }
.rr-nav a { color: var(--rr-donker); font-weight: 500; font-size: 15px; transition: color .3s; }
.rr-nav a:hover { color: var(--rr-groen-l); text-decoration: none; }
.rr-header-cta { display: flex; align-items: center; gap: 14px; }
.rr-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.rr-burger span { display: block; width: 24px; height: 2px; background: var(--rr-donker); margin: 5px 0; border-radius: 2px; transition: .2s; }

/* ============================================================
   Hero - full-bleed fotohero met zoekfunctie eroverheen
   ============================================================ */
.rr-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    padding: 120px 0 90px;
    overflow: hidden;
    color: #fff;
}
.rr-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.rr-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(41,53,54,.36) 0%, rgba(41,53,54,.12) 38%, rgba(41,53,54,.72) 100%),
        radial-gradient(80% 60% at 22% 60%, rgba(41,53,54,.55), transparent 70%);
}
.rr-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; width: 100%; }
.rr-hero h1 { font-size: clamp(40px, 5.6vw, 68px); letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.3); }
.rr-hero h1 em { font-style: normal; color: #9ccad3; }
.rr-hero-lead { font-size: 19px; color: rgba(255,255,255,.92); max-width: 30em; margin-bottom: 28px; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.rr-hero .rr-eyebrow { color: #e7b07a; }
.rr-hero .rr-eyebrow::before { background: #e7b07a; }
.rr-hero-stats { display: flex; gap: 34px; margin-top: 34px; }
.rr-hero-stat strong { display: block; font-family: var(--rr-font-display); font-size: 30px; color: #fff; }
.rr-hero-stat span { font-size: 13.5px; color: rgba(255,255,255,.82); }

/* Zoekkaart */
.rr-searchcard {
    background: rgba(255,255,255,.97); border-radius: var(--rr-radius); padding: 28px;
    box-shadow: 0 24px 60px rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.5);
    color: var(--rr-tekst); backdrop-filter: blur(6px);
}
.rr-searchcard h2 { font-size: 20px; margin-bottom: 18px; color: var(--rr-donker); }
.rr-search-field { position: relative; margin-bottom: 14px; }
.rr-search-field svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; stroke: var(--rr-tekst-licht); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rr-search-field input {
    width: 100%; padding: 15px 16px 15px 46px; border: 1.5px solid var(--rr-rand);
    border-radius: var(--rr-radius-sm); font-size: 15px; font-family: var(--rr-font-body); background: var(--rr-creme);
}
.rr-search-field input:focus { outline: 2px solid rgba(31,89,101,.30); border-color: var(--rr-groen); background: #fff; }
.rr-search-tabs { display: flex; gap: 7px; margin-bottom: 18px; flex-wrap: wrap; }
.rr-search-tab { font-size: 13px; padding: 7px 14px; border-radius: 4px; background: var(--rr-zand); color: var(--rr-donker); border: 0; cursor: pointer; font-weight: 600; font-family: var(--rr-font-body); }
.rr-search-tab.is-active { background: var(--rr-donker); color: #fff; }
.rr-searchcard .rr-btn { width: 100%; justify-content: center; }
.rr-hero-scroll { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 1; color: rgba(255,255,255,.8); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rr-hero-scroll span { width: 1px; height: 30px; background: linear-gradient(rgba(255,255,255,.7), transparent); }

/* Pagina's zonder fotohero: ruimte onder de vaste header. */
body.rr-no-hero { padding-top: 74px; }
body.rr-no-hero .rr-header { background: rgba(250,247,240,.92); backdrop-filter: blur(10px); border-bottom-color: var(--rr-rand); }

/* ============================================================
   Sectie-algemeen
   ============================================================ */
.rr-section { padding: 78px 0; }
.rr-section-head { margin-bottom: 40px; max-width: 38em; }
.rr-section-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.rr-section-head h2 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.01em; }
.rr-section-head p { font-size: 17px; color: var(--rr-tekst-licht); margin: 0; }
.rr-section-dark { background: var(--rr-donker); color: #d9e0df; }
.rr-section-dark h2 { color: #fff; }
.rr-section-dark .rr-section-head p { color: #aab6b5; }
.rr-section-zand { background: var(--rr-zand); }

/* Bestemmingen-raster */
.rr-dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.rr-dest {
    position: relative; border-radius: var(--rr-radius); overflow: hidden; min-height: 230px;
    display: flex; align-items: flex-end; padding: 22px; color: #fff;
    background: var(--rr-donker-2); isolation: isolate; transition: transform .25s, box-shadow .25s;
}
.rr-dest .rr-dest-bg { transition: transform .5s ease; }
.rr-dest:hover .rr-dest-bg { transform: scale(1.06); }
.rr-dest:hover { transform: translateY(-4px); box-shadow: var(--rr-shadow-h); text-decoration: none; }
.rr-dest::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(41,53,54,.82) 100%); }
.rr-dest-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.rr-dest h3 { color: #fff; font-size: 21px; margin: 0; }
.rr-dest span { font-size: 13px; opacity: .85; }
.rr-dest-lg { grid-row: span 2; min-height: 458px; }

/* Featurerij */
.rr-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.rr-feature { background: var(--rr-wit); border: 1px solid var(--rr-rand); border-radius: var(--rr-radius); padding: 30px; transition: transform .18s, box-shadow .18s; }
.rr-feature:hover { transform: translateY(-3px); box-shadow: var(--rr-shadow); }
.rr-feature-icon { width: 50px; height: 50px; border-radius: 4px; background: rgba(31,89,101,.12); display: grid; place-items: center; margin-bottom: 18px; }
.rr-feature-icon svg { width: 26px; height: 26px; stroke: var(--rr-groen); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rr-feature h3 { font-size: 19px; }
.rr-feature p { font-size: 15px; color: var(--rr-tekst-licht); margin: 0; }

/* Kaart-embed sectie */
.rr-map-embed { border-radius: var(--rr-radius); overflow: hidden; box-shadow: var(--rr-shadow); border: 1px solid var(--rr-rand); }

/* Affiliate-strook */
.rr-affil { position: relative; border-radius: var(--rr-radius); padding: 48px; display: grid; grid-template-columns: 1.4fr auto; gap: 30px; align-items: center; color: #fff; overflow: hidden; isolation: isolate; }
.rr-affil-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.rr-affil::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(41,53,54,.92) 38%, rgba(41,53,54,.62) 100%); }
.rr-affil-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--rr-groen-l); font-weight: 700; }
.rr-affil h3 { color: #fff; font-size: 28px; margin: 8px 0 12px; }
.rr-affil p { color: #cdd6d5; margin: 0; max-width: 36em; }
.rr-affil-side { text-align: center; }

/* Blogkaarten */
.rr-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.rr-post { background: var(--rr-wit); border: 1px solid var(--rr-rand); border-radius: var(--rr-radius); overflow: hidden; transition: transform .18s, box-shadow .18s; }
.rr-post:hover { transform: translateY(-4px); box-shadow: var(--rr-shadow-h); text-decoration: none; }
.rr-post-thumb-wrap { aspect-ratio: 16/10; overflow: hidden; background: var(--rr-zand-d); }
.rr-post-thumb { aspect-ratio: 16/10; object-fit: cover; width: 100%; height: 100%; background: var(--rr-zand-d); transition: transform .5s ease; }
.rr-post:hover .rr-post-thumb { transform: scale(1.05); }
.rr-post-body { padding: 22px; }
.rr-post-cat { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rr-terra-d); }
.rr-post h3 { font-size: 19px; margin: 8px 0; color: var(--rr-donker); }
.rr-post p { font-size: 14.5px; color: var(--rr-tekst-licht); margin: 0; }
.rr-post-meta { font-size: 13px; color: var(--rr-tekst-licht); margin-top: 14px; display: flex; gap: 10px; align-items: center; }

/* Nieuwsbrief */
.rr-news { background: var(--rr-terra); border-radius: var(--rr-radius); padding: 46px; text-align: center; color: #fff; position: relative; overflow: hidden; }
.rr-news h2 { color: #fff; font-size: 32px; }
.rr-news p { color: rgba(255,255,255,.9); max-width: 34em; margin: 0 auto 24px; }
.rr-news-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.rr-news-form input { flex: 1; padding: 14px 18px; border: 0; border-radius: 4px; font-size: 15px; font-family: var(--rr-font-body); }
.rr-news-form .rr-btn { background: var(--rr-donker); }
.rr-news-form .rr-btn:hover { background: #1c2627; }

/* ============================================================
   Content (blog single / page)
   ============================================================ */
.rr-article { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.rr-article-header { margin-bottom: 36px; }
.rr-article-header h1 { font-size: clamp(32px, 4.4vw, 48px); letter-spacing: -.015em; }
.rr-article-meta { display: flex; gap: 14px; align-items: center; color: var(--rr-tekst-licht); font-size: 14px; margin-top: 14px; }
.rr-article-content { font-size: 17.5px; line-height: 1.78; }
.rr-article-content h2 { font-size: 28px; margin: 1.6em 0 .5em; }
.rr-article-content h3 { font-size: 22px; margin: 1.4em 0 .4em; }
.rr-article-content img { border-radius: var(--rr-radius); margin: 1.6em 0; }
.rr-article-content blockquote { border-left: 4px solid var(--rr-groen); background: var(--rr-zand); margin: 1.6em 0; padding: 18px 24px; border-radius: 0 var(--rr-radius-sm) var(--rr-radius-sm) 0; }
.rr-article-content a { color: var(--rr-groen-d); text-decoration: underline; text-underline-offset: 2px; }

/* In-content affiliateblok */
.rr-affil-inline { background: var(--rr-wit); border: 1px solid var(--rr-rand); border-left: 4px solid var(--rr-terra); border-radius: var(--rr-radius); padding: 24px; margin: 2em 0; }
.rr-affil-inline .rr-affil-tag { color: var(--rr-terra-d); }
.rr-affil-inline h4 { font-size: 19px; margin: 6px 0 8px; font-family: var(--rr-font-display); }
.rr-affil-inline p { font-size: 15px; color: var(--rr-tekst-licht); margin-bottom: 16px; }

/* ============================================================
   Footer
   ============================================================ */
.rr-footer { background: var(--rr-donker); color: #aeb9b8; padding: 60px 0 28px; }
.rr-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.rr-footer h4 { color: #fff; font-family: var(--rr-font-body); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.rr-footer a { color: #aeb9b8; font-size: 14.5px; display: block; padding: 4px 0; }
.rr-footer a:hover { color: var(--rr-groen-l); text-decoration: none; }
.rr-footer-brand p { font-size: 14.5px; max-width: 26em; margin-top: 14px; }
.rr-footer-logo { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--rr-font-display); font-size: 21px; }
.rr-footer-bottom { border-top: 1px solid #3a4a4c; margin-top: 44px; padding-top: 22px; display: flex; justify-content: space-between; font-size: 13px; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
    .rr-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .rr-dest-grid { grid-template-columns: repeat(2, 1fr); }
    .rr-dest-lg { grid-row: auto; min-height: 220px; }
    .rr-features, .rr-blog-grid { grid-template-columns: 1fr 1fr; }
    .rr-affil { grid-template-columns: 1fr; text-align: center; }
    .rr-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .rr-nav, .rr-header-cta .rr-btn { display: none; }
    .rr-burger { display: block; }
    .rr-nav.is-open { display: flex; position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; background: var(--rr-creme); padding: 18px 24px; gap: 14px; border-bottom: 1px solid var(--rr-rand); }
    .rr-features, .rr-blog-grid, .rr-dest-grid, .rr-footer-grid { grid-template-columns: 1fr; }
    .rr-hero-stats { gap: 22px; }
    .rr-news-form { flex-direction: column; }
    .rr-section { padding: 56px 0; }
}

/* Toegankelijkheid */
:focus-visible { outline: 3px solid var(--rr-groen); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }