/*
Theme Name: Hechte Wijkverbanden
Description: Custom WordPress theme gebaseerd op het ontwerp van Hechte Wijkverbanden.
Version: 1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
Text Domain: hechte-wijkverbanden
*/

:root{

--green:#4E7A29;
--green-dark:#35561B;
--green-light:#EDF5E7;

--text:#223047;
--muted:#6F7785;

--background:#F8F7F2;
--white:#ffffff;

--border:#E5E8E2;

--radius:18px;

--shadow:0 10px 30px rgba(0,0,0,.05);

--container:1280px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;

background:var(--background);
color:var(--text);
line-height:1.6;
}

img{
max-width:100%;
height:auto;
display:block;
}

a{
text-decoration:none;
color:inherit;
}

.container{

width:min(92%,var(--container));
margin:auto;

}

.section{

padding:80px 0;

}

.card{

background:#fff;
border-radius:var(--radius);
box-shadow:var(--shadow);

}

/* ===========================
   HEADER
=========================== */

.site-header{

position:sticky;
top:0;
z-index:999;

background:#fff;

box-shadow:0 4px 20px rgba(0,0,0,.03);

}

.header-inner{

height:92px;

display:flex;

align-items:center;

justify-content:space-between;

gap:50px;

}

.site-branding{

flex-shrink:0;

}

.custom-logo{

height:58px;

width:auto;

}

.logo img{

height:58px;

width:auto;

display:block;

}

.main-navigation{

margin-left:auto;

}

.menu{

display:flex;

align-items:center;

gap:34px;

list-style:none;

}

.menu li{

position:relative;

}

.menu a{

display:block;

padding:12px 0;

font-size:15px;

font-weight:500;

color:var(--text);

transition:.25s;

}

.menu a:hover{

color:var(--green);

}

.current-menu-item>a{

color:var(--green);

}

.current-menu-item>a::after{

content:"";

position:absolute;

left:0;

bottom:-18px;

width:100%;

height:3px;

background:var(--green);

border-radius:20px;

}

.mobile-toggle{

display:none;

width:46px;

height:46px;

border:none;

background:none;

cursor:pointer;

}

.mobile-toggle span{

display:block;

height:3px;

margin:6px 0;

background:#243047;

border-radius:10px;

transition:.3s;

}

/* =====================================
   HERO
===================================== */

.hero{

padding:80px 0 120px;

overflow:hidden;

position:relative;

background:
radial-gradient(circle at top left,#EAF6E3 0%,transparent 40%),
radial-gradient(circle at bottom right,#FFF4D8 0%,transparent 35%),
var(--background);

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

}

.hero-content{

max-width:620px;

}

.hero-label{

display:inline-block;

padding:10px 18px;

background:#fff;

border-radius:100px;

font-size:14px;

font-weight:600;

margin-bottom:24px;

box-shadow:var(--shadow);

}

.hero h1{

font-size:clamp(42px,6vw,72px);

line-height:1.05;

font-weight:800;

margin-bottom:24px;

color:var(--text);

}

.hero-intro{

font-size:20px;

line-height:1.8;

color:var(--muted);

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 30px;

border-radius:100px;

font-weight:600;

transition:.25s;

}

.button-primary{

background:var(--green);

color:white;

}

.button-primary:hover{

background:var(--green-dark);

}

.button-secondary{

background:white;

border:1px solid var(--border);

}

.button-secondary:hover{

background:#f6f6f6;

}

.hero-image{

position:relative;

}

.hero-image img{

width:100%;

border-radius:32px;

box-shadow:0 30px 60px rgba(0,0,0,.08);

}

.speech-bubble{

position:absolute;

bottom:35px;

left:-30px;

background:white;

padding:20px 24px;

border-radius:20px;

box-shadow:var(--shadow);

font-size:18px;

line-height:1.5;

}

/* ==================================
WHY
================================== */

.why{

background:white;

border-radius:40px 40px 0 0;

margin-top:-40px;

position:relative;

z-index:2;

}

.section-header{

max-width:760px;

margin:0 auto 70px;

text-align:center;

}

.section-label{

display:inline-block;

padding:10px 18px;

background:var(--green-light);

border-radius:100px;

font-size:14px;

font-weight:600;

margin-bottom:20px;

color:var(--green);

}

.section-header h2{

font-size:48px;

margin-bottom:20px;

line-height:1.2;

}

.section-header p{

font-size:20px;

color:var(--muted);

}

.why-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.why-card{

background:#fff;

border:1px solid var(--border);

border-radius:24px;

padding:40px;

transition:.3s;

box-shadow:0 12px 30px rgba(0,0,0,.03);

}

.why-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.card-icon{

width:72px;

height:72px;

border-radius:18px;

background:var(--green-light);

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

margin-bottom:24px;

}

.why-card h3{

font-size:24px;

margin-bottom:16px;

}

.why-card p{

color:var(--muted);

line-height:1.8;

}

/*======================================
TOOLBOX
======================================*/

.toolbox{

padding-top:100px;

}

.toolbox-card{

position:relative;

overflow:hidden;

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:70px;

padding:70px;

background:linear-gradient(
135deg,
#4E7A29 0%,
#5F8E34 100%
);

border-radius:36px;

color:white;

}

.toolbox-card::before{

content:"";

position:absolute;

width:420px;
height:420px;

right:-160px;
top:-160px;

border-radius:50%;

background:rgba(255,255,255,.08);

}

.toolbox-card::after{

content:"";

position:absolute;

width:240px;
height:240px;

left:-90px;
bottom:-90px;

border-radius:50%;

background:rgba(255,255,255,.05);

}

.toolbox-content{

position:relative;

z-index:2;

}

.toolbox-content h2{

font-size:48px;

line-height:1.15;

margin:20px 0;

}

.toolbox-content p{

font-size:19px;

line-height:1.8;

margin-bottom:32px;

opacity:.95;

}

.toolbox-list{

list-style:none;

margin-bottom:40px;

}

.toolbox-list li{

margin-bottom:16px;

font-size:18px;

}

.button-white{

display:inline-flex;

align-items:center;

padding:18px 34px;

background:white;

color:var(--green);

font-weight:700;

border-radius:999px;

transition:.3s;

}

.button-white:hover{

transform:translateY(-2px);

box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.toolbox-image{

position:relative;

z-index:2;

}

.toolbox-image img{

width:100%;

border-radius:28px;

display:block;

box-shadow:0 25px 60px rgba(0,0,0,.25);

}

/*======================================
DEVELOPMENTS
======================================*/

.developments{

background:#F5F7F2;

}

.development-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

margin-top:50px;

}

.development-card{

background:#fff;

border-radius:28px;

overflow:hidden;

transition:.35s;

box-shadow:0 12px 30px rgba(0,0,0,.04);

height:100%;

}

.development-card:hover{

transform:translateY(-8px);

box-shadow:0 25px 55px rgba(0,0,0,.08);

}

.development-image{

aspect-ratio:16/10;

overflow:hidden;

}

.development-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.development-card:hover img{

transform:scale(1.05);

}

.development-content{

padding:28px;

}

.development-date{

font-size:14px;

color:var(--green);

font-weight:600;

margin-bottom:16px;

}

.development-content h3{

font-size:24px;

line-height:1.3;

margin-bottom:18px;

}

.development-content p{

color:var(--muted);

line-height:1.7;

margin-bottom:22px;

}

.read-more{

font-weight:700;

color:var(--green);

}

/*=================================
PRAKTIJKVOORBEELDEN
=================================*/

.examples{

background:white;

}

.example-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

margin-top:60px;

}

.example-card{

overflow:hidden;

background:white;

border-radius:28px;

box-shadow:0 12px 35px rgba(0,0,0,.05);

transition:.35s;

height:100%;

}

.example-card:hover{

transform:translateY(-8px);

box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.example-image{

aspect-ratio:16/10;

overflow:hidden;

}

.example-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.example-card:hover img{

transform:scale(1.05);

}

.example-content{

padding:28px;

}

.example-tag{

display:inline-block;

padding:8px 14px;

border-radius:999px;

background:var(--green-light);

color:var(--green);

font-size:13px;

font-weight:700;

margin-bottom:18px;

}

.example-content h3{

font-size:26px;

line-height:1.3;

margin-bottom:16px;

}

.example-content p{

color:var(--muted);

margin-bottom:22px;

line-height:1.7;

}

/*======================================
KENNISBANK
======================================*/

.knowledge{

background:#F8F9F5;

}

.knowledge-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:32px;

margin-top:60px;

}

.knowledge-card{

background:white;

border-radius:24px;

overflow:hidden;

transition:.3s;

box-shadow:0 10px 25px rgba(0,0,0,.04);

}

.knowledge-card:hover{

transform:translateY(-8px);

box-shadow:0 25px 50px rgba(0,0,0,.08);

}

.knowledge-image{

aspect-ratio:16/10;

overflow:hidden;

}

.knowledge-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.35s;

}

.knowledge-card:hover img{

transform:scale(1.06);

}

.knowledge-content{

padding:28px;

}

.knowledge-type{

display:inline-block;

padding:7px 14px;

background:var(--green-light);

color:var(--green);

border-radius:999px;

font-size:13px;

font-weight:700;

margin-bottom:18px;

}

.knowledge-content h3{

font-size:24px;

margin-bottom:16px;

line-height:1.3;

}

.knowledge-content p{

line-height:1.7;

color:var(--muted);

margin-bottom:22px;

}

/*=================================
UNIVERSELE CARD
=================================*/

.content-card{

background:#fff;

border-radius:28px;

overflow:hidden;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.05);

height:100%;

display:flex;

flex-direction:column;

}

.content-card:hover{

transform:translateY(-8px);

box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.content-card-image{

aspect-ratio:16/10;

overflow:hidden;

}

.content-card-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.35s;

}

.content-card:hover img{

transform:scale(1.05);

}

.content-card-content{

padding:30px;

flex:1;

display:flex;

flex-direction:column;

}

.card-badge{

display:inline-flex;

padding:8px 14px;

background:var(--green-light);

color:var(--green);

border-radius:999px;

font-size:13px;

font-weight:700;

margin-bottom:18px;

width:max-content;

}

.card-date{

color:var(--green);

font-size:14px;

margin-bottom:16px;

font-weight:600;

}

.content-card h3{

font-size:26px;

margin-bottom:16px;

line-height:1.3;

}

.content-card p{

margin-bottom:auto;

color:var(--muted);

line-height:1.7;

}

.read-more{

margin-top:28px;

font-weight:700;

color:var(--green);

}

/*=========================
BLOGS
=========================*/

.blogs{

background:white;

}

.featured-blog{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

margin:70px 0;

align-items:center;

background:white;

border-radius:30px;

overflow:hidden;

box-shadow:var(--shadow);

}

.featured-image{

aspect-ratio:16/10;

}

.featured-image img{

width:100%;

height:100%;

object-fit:cover;

}

.featured-content{

padding:50px;

}

.featured-content h2{

font-size:42px;

margin:20px 0;

line-height:1.2;

}

.meta{

display:flex;

gap:15px;

color:var(--muted);

margin-bottom:25px;

font-size:15px;

}

.blog-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

margin-top:50px;

}

.blogs-footer{

text-align:center;

margin-top:60px;

}

/*=========================
FOOTER
=========================*/

.site-footer{

margin-top:120px;

background:#243047;

color:white;

}

.footer-cta{

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

padding:80px 0;

border-bottom:1px solid rgba(255,255,255,.1);

}

.footer-cta h2{

font-size:48px;

margin-bottom:20px;

}

.footer-cta p{

font-size:20px;

opacity:.8;

max-width:700px;

}

.footer-columns{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:60px;

padding:70px 0;

}

.footer-columns h4{

margin-bottom:20px;

}

.footer-columns p{

opacity:.8;

margin-bottom:12px;

}

.footer-columns ul{

list-style:none;

padding:0;

margin:0;

}

.footer-columns li{

margin-bottom:10px;

}

.footer-columns a{

color:white;

opacity:.85;

}

.footer-columns a:hover{

opacity:1;

}

.footer-bottom{

padding:30px 0;

border-top:1px solid rgba(255,255,255,.08);

opacity:.7;

font-size:14px;

}

/*=================================
UNIVERSELE CARD
=================================*/

.content-card{

background:#fff;

border-radius:28px;

overflow:hidden;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.05);

height:100%;

display:flex;

flex-direction:column;

}

.content-card:hover{

transform:translateY(-8px);

box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.content-card-image{

aspect-ratio:16/10;

overflow:hidden;

}

.content-card-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.35s;

}

.content-card:hover img{

transform:scale(1.05);

}

.content-card-content{

padding:30px;

flex:1;

display:flex;

flex-direction:column;

}

.card-badge{

display:inline-flex;

padding:8px 14px;

background:var(--green-light);

color:var(--green);

border-radius:999px;

font-size:13px;

font-weight:700;

margin-bottom:18px;

width:max-content;

}

.card-date{

color:var(--green);

font-size:14px;

margin-bottom:16px;

font-weight:600;

}

.content-card h3{

font-size:26px;

margin-bottom:16px;

line-height:1.3;

}

.content-card p{

margin-bottom:auto;

color:var(--muted);

line-height:1.7;

}

.read-more{

margin-top:28px;

font-weight:700;

color:var(--green);

}