/*
Theme Name: VergelijkMarketing
Theme URI: https://vergelijkmarketing.nl
Author: Sam Online Marketing
Description: Vergelijkingsplatform voor Nederlandse marketingbureaus, beoordeeld op klantervaring. Gebouwd op BlankSlate.
Template Name Note: standalone fork of BlankSlate by TidyThemes (GPL).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.3
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Tags: accessibility-ready, one-column, custom-menu, featured-images, translation-ready
Text Domain: vergelijkmarketing
*/

/* ── BlankSlate reset ──────────────────────────────────────────── */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{appearance:none;border-radius:0}input[type="search"]{appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#007acc;display:block;font-size:14px;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{position:fixed;left:-9999rem;top:0;z-index:999999999;text-decoration:none}
.skip-link:focus{left:12px;top:12px;padding:12px 20px;background:#0F1B2D;color:#fff;border-radius:8px}

/* ── Tokens ────────────────────────────────────────────────────── */
:root{
    --font-family:'Plus Jakarta Sans',sans-serif;

    --color-ink:#0F1B2D;
    --color-ink-soft:#1B2B45;
    --color-indigo:#2B4EE6;
    --color-indigo-dark:#1D38B4;
    --color-emerald:#0FA36B;
    --color-emerald-soft:#E6F6EF;
    --color-amber:#F5A524;

    --font-color:#55617A;
    --font-color-dark:#0F1B2D;

    --primary-color:#2B4EE6;
    --primary-color-hover:#1D38B4;

    --border-color-1:#DDE3ED;
    --border-color-2:#EDF1F7;
    --background-alt-1:#F6F8FC;
    --footer-background:#0F1B2D;
    --white-bg-1:#fff;

    --radius-card:14px;
    --radius-pill:9999px;
    --shadow-card:0 2px 14px rgba(15,27,45,.06);
    --shadow-lift:0 12px 30px rgba(15,27,45,.12);
    --transition:all 0.3s ease-in-out;
}

/* ── Base ──────────────────────────────────────────────────────── */
body{font-family:var(--font-family);font-size:17px;line-height:1.65;color:var(--font-color);background:var(--white-bg-1);padding-top:74px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{color:var(--font-color-dark);font-weight:800;line-height:1.2;letter-spacing:-.02em}
h1{font-size:28px}
h2{font-size:24px}
h3{font-size:20px}
h4{font-size:18px}
h5,h6{font-size:17px}
p{margin-bottom:18px}
p:last-child{margin-bottom:0}
strong,b{font-weight:700;color:var(--font-color-dark)}
em,i{font-style:italic}
a{color:inherit;text-decoration:none;transition:var(--transition)}
img,svg{max-width:100%;height:auto}
button{background:none;cursor:pointer;font:inherit;color:inherit}

.container{max-width:1300px;margin:0 auto;padding:0 32px;position:relative;width:100%}
section{position:relative}

/* ── Utilities ─────────────────────────────────────────────────── */
.sectionLabel{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-indigo);margin-bottom:16px}
.textIndigo{color:var(--color-indigo)}
.textEmerald{color:var(--color-emerald)}

.btnIndigo,.btnOutline,.btnGhost{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:58px;padding:0 30px;border-radius:var(--radius-pill);font-size:16px;font-weight:700;transition:var(--transition);white-space:nowrap}
.btnIndigo{background:var(--color-indigo);color:#fff}
.btnIndigo:hover{background:var(--color-indigo-dark);transform:translateY(-2px);box-shadow:0 10px 22px rgba(43,78,230,.28)}
.btnOutline{background:transparent;color:var(--font-color-dark);border:1.5px solid var(--border-color-1)}
.btnOutline:hover{border-color:var(--color-indigo);color:var(--color-indigo);transform:translateY(-2px)}
.btnGhost{background:#fff;color:var(--color-indigo);border:1.5px solid var(--color-indigo)}
.btnGhost:hover{background:var(--color-indigo);color:#fff;transform:translateY(-2px)}


/* ── Header (BlankSlate #header / #branding / #menu) ───────────── */
#header{position:fixed;top:0;left:0;width:100%;height:74px;z-index:900;transition:var(--transition)}
#header::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color-2);opacity:1;transition:var(--transition);z-index:-1}
#header .container{display:flex;align-items:center;justify-content:space-between;gap:32px;height:100%}

/* Dark-hero pages: the header floats transparently over the banner with light
   type, then flips to the solid white treatment once scrolled past it. */
body.hasDarkHero #header::before{opacity:0}
body.hasDarkHero #header:not(.is-scrolled):not(.is-menu-open) #site-title a,
body.hasDarkHero #header:not(.is-scrolled):not(.is-menu-open) #menu > ul > li > a,
body.hasDarkHero #header:not(.is-scrolled):not(.is-menu-open) .headerActionBtn{color:#fff}
body.hasDarkHero #header:not(.is-scrolled):not(.is-menu-open) #site-title .logoAccent{color:#7E9BFF}
body.hasDarkHero #header:not(.is-scrolled):not(.is-menu-open) #site-title svg rect{fill:#fff}
body.hasDarkHero #header:not(.is-scrolled):not(.is-menu-open) #site-title svg path{stroke:#0F1B2D}
body.hasDarkHero #header:not(.is-scrolled):not(.is-menu-open) #menu > ul > li > a:hover{color:#7E9BFF}
body.hasDarkHero #header.is-scrolled::before,
body.hasDarkHero #header.is-menu-open::before{opacity:1}

#branding{display:flex;align-items:center;flex-shrink:0}
#site-title a{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;color:var(--font-color-dark);letter-spacing:-.02em}
#site-title .logoAccent{color:var(--color-indigo)}
/* BlankSlate prints the tagline in the header; the design carries it elsewhere. */
#site-description{display:none}

#menu{display:flex;align-items:center;gap:34px;margin-left:auto}
#menu ul{display:flex;align-items:center;gap:34px}
#menu a{font-size:16px;font-weight:600;color:var(--font-color-dark)}
#menu a:hover,#menu .current-menu-item>a{color:var(--color-indigo)}

.headerActions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.headerCta{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:var(--radius-pill);background:var(--color-indigo);color:#fff;font-size:15px;font-weight:700;transition:var(--transition)}
.headerCta:hover{background:var(--color-indigo-dark);transform:translateY(-2px)}
.headerCtaMobile{display:none}
.headerActionBtn{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;color:var(--font-color-dark)}
.menuToggle .menuToggleClose{display:none}
.menuToggle.is-active .menuToggleOpen{display:none}
.menuToggle.is-active .menuToggleClose{display:block}

/* ── Ruimte tussen laatste sectie en footer ────────────────────── */
/* Secties zijn opgebouwd met alleen padding-top, dus het laatste blok
   plakt zonder deze regel tegen de footer aan. */
#content > :last-child:not(.homeCta){padding-bottom:88px}

/* ── Footer ────────────────────────────────────────────────────── */
#footer{background:var(--footer-background);color:#A6B2C7;padding:72px 0 32px;margin-top:0}
#footer a{color:#A6B2C7}
#footer a:hover{color:#fff}
.footerGrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:48px}
.footerBrand p{font-size:15px;line-height:1.7}
.footerLogo{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:18px}
.footerLogo .logoAccent{color:#7E9BFF}
.footerColTitle{font-size:15px;font-weight:700;color:#fff;margin-bottom:18px}
.footerCol ul li{margin-bottom:11px;font-size:15px;line-height:1.6}
.footerContact li{display:flex;align-items:center;gap:9px}
.footerBottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);font-size:14px}


/* ── Prose (the-content blocks) ────────────────────────────────── */
.prose,.entry-content{max-width:820px}
.prose h2,.entry-content h2{font-size:28px;margin:40px 0 14px}
.prose h3,.entry-content h3{font-size:21px;margin:30px 0 12px}
.prose ul,.entry-content ul{list-style:disc;padding-left:22px;margin-bottom:18px}
.prose ol,.entry-content ol{list-style:decimal;padding-left:22px;margin-bottom:18px}
.prose li,.entry-content li{margin-bottom:8px}
.prose a,.entry-content a{color:var(--color-indigo);text-decoration:underline}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width:1200px){
    .footerGrid{gap:32px}
    #menu,#menu ul{gap:24px}
}
@media (max-width:992px){
    .headerCta{display:none}
    .headerActionBtn{display:flex}
    #menu{position:fixed;top:74px;left:0;width:100%;height:calc(100vh - 74px);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:32px;background:linear-gradient(160deg,#0F1B2D,#1B2B45);overflow-y:auto;display:none;opacity:0;visibility:hidden;transition:var(--transition)}
    #menu.is-open{display:flex;opacity:1;visibility:visible}
    #menu ul{flex-direction:column;align-items:flex-start;gap:0;width:100%}
    #menu ul li{width:100%;border-bottom:1px solid rgba(255,255,255,.1)}
    #menu a{display:block;width:100%;padding:18px 0;font-size:19px;color:#fff}
    #menu a:hover{color:#7E9BFF}
    /* Staat in #menu, dus moet #menu a hierboven overrulen: anders wint
       display:block met padding:18px 0 en plakt het label tegen de linkerrand. */
    #menu .headerCtaMobile{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:100%;min-height:56px;margin-top:28px;padding:16px 24px;border-radius:var(--radius-pill);background:var(--color-indigo);color:#fff;font-size:16px;font-weight:700;line-height:1.3;text-align:center}
    body.is-menu-open{overflow:hidden}
    .footerGrid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:768px){
    body{font-size:16px}
    .container{padding:0 20px}
    #content > :last-child:not(.homeCta){padding-bottom:64px}
    #footer{padding:56px 0 28px;margin-top:0}
    .footerBottom{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:480px){
    .container{padding:0 16px}
    .footerGrid{grid-template-columns:1fr;gap:32px}
    .btnIndigo,.btnOutline,.btnGhost{width:100%;height:54px}
}