/* =========================================
GLOBAL
========================================= */

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

html{
scroll-behavior:smooth;
}

body{

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

background:linear-gradient(
135deg,
#eef6f4 0%,
#e8f0f3 100%
);

color:#222;
line-height:1.6;

}

/* Koppen sterker */
h2{
color:#111;
}


/* =========================================
NAVIGATIE
========================================= */

.site-nav{

position:sticky;
top:0;
width: 100%;
background:rgba(255,255,255,0.85);
backdrop-filter:blur(6px);
border-bottom:1px solid rgba(0,0,0,0.05);
z-index:1000;

}

.site-nav__container{

max-width:1400px;
margin:auto;
padding:0.8rem 6vw;
display:flex;
align-items:center;
justify-content:space-between;

}

/* logo */

.site-nav__logo{

font-weight:600;
text-decoration:none;
color:#111;
font-size:1rem;

}

/* menu */

.site-nav__menu{

list-style:none;
display:flex;
gap:2rem;

}

.site-nav__menu a{

text-decoration:none;
color:#333;
font-weight:500;
transition:opacity .2s ease;

}

.site-nav__menu a:hover{

opacity:0.6;

}

/* menu knop */

.site-nav__toggle{
display:none;
font-size:1.4rem;
background:none;
border:none;
cursor:pointer;
}



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

.author-hero{

max-width:1400px;
margin:auto;

padding:5rem 6vw;

min-height:70vh;

display:flex;
align-items:center;

}

.author-hero__container{

display:flex;
gap:4rem;
align-items:center;

max-width: 1100px; 
margin: 0 auto; 
padding: 0 20px;

}



/* image */

.author-hero__image-wrapper{

perspective:1200px;

}

.author-hero__image{

width:260px;

border-radius:8px;

transform:
rotateY(-12deg)
rotateZ(-1deg);

box-shadow:
30px 20px 40px rgba(0,0,0,0.35),
6px 6px 15px rgba(0,0,0,0.2);

transition:transform .3s ease;

}

.author-hero__image:hover{

transform:
rotateY(-8deg)
rotateZ(0deg);

}



/* content */

.author-hero__content{

max-width: 700px;

}

.author-hero__title{

font-size:clamp(2.2rem,5vw,3.2rem);
margin-bottom:.8rem;

}

/* Subtekst lichter */
.author-hero__intro{

font-size:1.05rem;
color:#555;
margin-bottom:1.5rem;

}

/* Paragrafen */
.author-hero__content p{

margin-bottom:1rem;
color:#333;

}



/* actions */

.author-hero__actions{

margin-top:2rem;

display:flex;
gap:1rem;
flex-wrap:wrap;

}



/* =========================================
BUTTONS
========================================= */

.cta{

display:inline-block;
padding:.8rem 1.8rem;
background:#111;
color:#fff;
text-decoration:none;
box-shadow: none;
transform: translateY(0);
border-radius:999px;
font-weight:600;

transition:
  transform .2s ease,
  box-shadow .2s ease;

}

.cta:hover{

transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,0.15);

}

/* Groene primary CTA */
.cta--primary{
background:#0a7a5c;
color:#fff;
}

.cta--secondary{

background:#4ad885;
color:#083a22;

}



/* =========================================
INFO SECTION
========================================= */

.author-info{

padding:5rem 6vw;
max-width:900px;
margin:auto;

}

.author-info h2{

font-size:clamp(1.8rem,4vw,2.4rem);
margin-bottom:1rem;

}

/* Iets lichter dan body */
.author-info p{

margin-bottom:1rem;
font-size: 1.05rem;
color:#333;

}



/* =========================================
CTA SECTION
========================================= */

.author-cta{

padding:5rem 6vw;

background:rgba(255,255,255,0.4);

backdrop-filter:blur(4px);

text-align:center;

}

.author-cta__container{

max-width:700px;
margin:auto;

}

.author-cta h2{

font-size:clamp(1.8rem,4vw,2.4rem); 
margin-bottom:1rem;

}

/* Subtekst */
.author-cta p{

margin-bottom:2rem;
font-size:1.05rem;
color:#555;

}



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

.footer{

text-align:center;
padding:2rem;
font-size:.9rem;
color:#666;

}



/* =========================================
HIGHLIGHT ACCENT
========================================= */

.highlight{
color:#0a7a5c;
font-weight:600;
}



/* =========================================
LINK EFFECT
========================================= */

a.voorw {
    position: relative;
}

a.voorw::before {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -4px;
  left: 0;
  background-color: #010;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a.voorw:hover::before {
  visibility: visible;
  width: 75%;
  border-radius: 2px; 
}


/* =========================================
RESPONSIVE
========================================= */

@media (max-width:900px){

.author-hero__container{

flex-direction:column;
text-align:center;

}

.author-hero__image{

transform:none;
width:220px;
box-shadow:0 20px 30px rgba(0,0,0,.25);

}

}


/* =========================================
MOBILE NAV FIX (zelfde als hoofdbestand)
========================================= */

@media (max-width:700px){

  .site-nav__toggle{
    display:block;
  }

  .site-nav__menu{

    position:absolute;
    top:60px;
    right:0;
    background:white;

    flex-direction:column;
    width:200px;
    padding:1rem;

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

    display:none;
  }

  .site-nav__menu.active{
    display:flex;
  }

}


/* =========================================
RESPONSIVE #2
========================================= */

@media (max-width:500px){

.author-hero{

padding:3rem 1.5rem;

}

.author-hero__actions{

flex-direction:column;

}

.cta{

width:100%;
text-align:center;

}

}