/* 
Theme Name: GroeiHero Mobile-First
Description: Optimized mobile-first CSS for GroeiHero
Version: 2.0.0
*/

@import url("https://use.typekit.net/lmv6xop.css");

/* =================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ================================================= */
:root {
  /* Colors */
  --color-primary: #ea5a0b;    /* oranje */
  --color-secondary: #00a438;  /* groen */
  --color-accent: #ffd100;     /* geel */
  --color-purple: #64358c;     /* paars */
  --color-pink: #e73089;       /* roze */
  --color-blue: #009ee3;       /* blauw */
  --color-text: #303030;       /* tekst */
  --color-white: #fff;
  --color-black: #000;
  
  /* Typography */
  --font-primary: "avenir-next-lt-pro", sans-serif;
  --font-display: "badaboom-pro", sans-serif;
  --font-size-base: 18px;
  --font-size-lg: 3.5rem;
  --line-height-base: 1.6;
  
  /* Spacing */
--spacing-xs: 0.2em;
--spacing-sm: 0.75rem;
--spacing-md: 1.25rem;
--spacing-lg: 2rem;
--spacing-xl: 4rem;
  
  /* Shadows & Effects */
  --shadow-comic: 5px 5px 0 var(--color-black);
  --shadow-text: 3px 3px 0 var(--color-black);
  --skew-angle: -5deg;
  --border-width: 2px;
  
  /* Layout */
  --container-width: 90%;
  --container-max: 1200px;
}

/* =================================================
   BASE / RESET (MOBILE FIRST)
   ================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
    overflow-x: clip;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-white);
  overflow-x: hidden;
  font-size: var(--font-size-base);
}

/* Reset margins and paddings */
h1, h2, h3, h4, h5, h6,
p, ul, ol, li,
figure, blockquote {
  margin: 0;
  padding: 0;
}

p, ul, ol, li,
.et_pb_text_inner p{
  font-size: var(--font-size-base);
line-height: 1.6;
}
/* Lists */
ul, ol {
  list-style-position: outside;
}

ul {
  list-style: none;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-primary);
}

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

/* =================================================
   TYPOGRAPHY (MOBILE FIRST)
   ================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-sm);
}

/* Comic-style display headings */
h1, h2{
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  color: var(--color-accent);
  text-align: center;
  text-shadow: var(--shadow-text);
  -webkit-text-stroke: 2px var(--color-black);
  transform: skewY(var(--skew-angle));
    -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform: translateZ(0) skewY(var(--skew-angle)); /* iets scherper op sommige laptops */
}

h1,
.et_pb_title_container h1 {
  font-size: clamp(2.5rem, 8vw, 4rem);
  margin-bottom: var(--spacing-md);
}

h2 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  -webkit-text-stroke: 1px var(--color-black);
  margin-bottom: var(--spacing-sm);
}


h3 {
  color: var(--color-secondary);
  font-weight: 900;
  font-size: clamp(1.1rem, 4vw, 1.2rem);
  margin-bottom: var(--spacing-xs);
  margin-top: var(--spacing-md);
}

h4 {
  color: var(--color-secondary);
  font-weight: 700;
  font-size: clamp(1rem, 3vw, 1.4rem);
  text-transform: uppercase;
  margin: var(--spacing-md) 0 var(--spacing-sm);
}

#et-boc ul,
#et-boc ol { margin: 0 0 var(--spacing-xs); }
.text-center { text-align: center; }
.text-large { font-size: 1.2rem; }

/* Selection */
::selection { background: var(--color-primary); }

/* =================================================
   UTILITY CLASSES
   ================================================= */
.container {
  width: var(--container-width);
  max-width: var(--container-max);
  margin: 0 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.skew-left {
  transform: skewY(var(--skew-angle));
}

.skew-right {
  transform: skewY(calc(var(--skew-angle) * -1));
}

.no-wrap {
  white-space: nowrap;
}

/* =================================================
   BUTTONS (MOBILE FIRST)
   ================================================= */

.knop .et_pb_button_module_wrapper{
    text-align:center;
}
.knop .et_pb_button,
.contact7 input[type="submit"]{
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--color-primary);
  color: var(--color-white);
  border: var(--border-width) solid var(--color-primary);
  border-radius: 0;
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transform: skewY(var(--skew-angle));
  box-shadow: var(--shadow-comic);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  padding: .3em;
}

.knop et_pb_button::after,
.contact7 input[type="submit"]::after{
  content: "\00bb";
  margin-left: var(--spacing-xs);
  transition: all 0.3s ease;
}

.knop .et_pb_button:hover,
.contact7 input[type="submit"]:hover{
  background-color: var(--color-purple) !important;
  border-color: var(--color-purple);
  color: var(--color-accent);
  transform: skewY(var(--skew-angle)) translateY(-2px);
      padding: .3em 3.8em .3em .7em;

}

.knop .et_pb_button:hover::after,
.contact7 input[type="submit"]:hover::after{
  content: "\00bb \00bb \00bb";
  margin-left: var(--spacing-sm);
}

.contact7 .honeypot-field{
    display:none;
}

/* =================================================
   HEADER & NAVIGATION (MOBILE FIRST)
   ================================================= 
#et-secondary-menu>ul>li a,
#et-secondary-menu li,
#et-secondary-menu  a{
    font-size: .75em;
    padding:0;
    margin-bottom: 5px;
}
#et-secondary-menu{
        margin-bottom: 0;

}
.et_header_style_left #et-top-navigation {
padding-top: 0; 
}
#top-header,
#main-header {
  width: 100%;
  max-width: 100%;
  overflow-x: clip; 
  contain: paint;   
}
#top-menu li a{
   padding-top: 0 !important; 
padding-bottom: 0 !important; 
    margin-top: 10px !important; 

}

#main-header .container,
#top-header .container,
#main-header .et_menu_container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}
 #top-header .container {
        padding-top: 0;
    }
#main-header .et_menu_container,
#top-header .et_menu_container {
  width: 100% !important;
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

#top-menu,
#et-secondary-nav,
#top-menu-nav,
#et-top-navigation {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  overflow-x: clip;
}

#main-header #logo,
#main-header .logo_container,
#main-header .container .logo_container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
max-height: 90%;
}

#main-header, #top-header {
  inline-size: 100%;
  max-inline-size: 100%;
}

#main-header {
  background-color: var(--color-primary);
  padding: var(--spacing-sm) 0;
  position: sticky;
  top: 0;
  z-index: 100;
    padding:0;
}

.et_pb_svg_logo #logo {
height: 100%;
}
.nav-menu {
  display: none; 
}

.nav-menu a, #top-menu li, #top-menu a {
  color: var(--color-white) !important;
  font-size: 1.1rem;
  font-weight: 500;
  padding: var(--spacing-xs);
  transition: color 0.3s ease;
}

.nav-menu a:hover,
.nav-menu a.active,
#top-menu a:hover{
  color: var(--color-accent) !important;
}

.mobile-menu-toggle {
  display: block;
  background: none;
  border: none;
  color: var(--color-white);
  font-size: 1.5rem;
  cursor: pointer;
  padding: var(--spacing-xs);
}
*/

/* =================================================
   HEADER & NAVIGATION (MOBILE FIRST)
   ================================================= */
.hoofdmenu .inloggen{
    
    text-align: right;
padding: .3em 1em;
height: 2.5em;
}
.hoofdmenu .inloggen a{
    text-decoration: none;
    color:var(--color-white);
    padding:.5em;
    font-weight:900;
}
.hoofdmenu .menu{
text-align:right;
    padding-right:1em;
}
.hoofdmenu .menu img {
   max-width:200px;
    height:auto;
    padding:.5em;
}
.hoofdmenu .menu .et-menu-nav {
  position: absolute;
right: 1em;
}
.hoofdmenu .menu a {
      color:var(--color-white);
}
.hoofdmenu .menu a:active,
.hoofdmenu .menu a:hover {
      color:var(--color-yellow);
}


/* =================================================
   HERO SECTION (MOBILE FIRST)
   ================================================= */
.hero,
.header {
  background-image: url('https://www.groeihero.nl/wp-content/uploads/2024/10/stralen.svg');
  background-size: 500%;
  background-position: 50% 120%;
  padding: var(--spacing-xl) 0;
  text-align: center;
  position: relative;
}

/* Header background extension effect */
.header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -5%; /* Extend 5% below the header */
  background: inherit;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-blend-mode: inherit;
  z-index: -1;
  pointer-events: none;
}




/* Adjust the home header image positioning */
.home .header-image {
    position: absolute;
    top: -5em; /* Move it up more to create overflow */
    right: -12em;
    width: 50%;
    z-index: 10; /* Ensure it's above other content */
}
/* Make sure parent containers don't clip the overflow */
.home .header,
.home .header .et_pb_fullwidth_header,
.home .header .et_pb_fullwidth_header_container {
    overflow: visible !important;
}

/* Adjust the header itself to allow space */
.home .header .et_pb_fullwidth_header {
    margin-top: -8em; /* Match or exceed the image's negative top value */
}

.home .header .et_pb_fullwidth_header {
    margin-top:-3em;
        padding-top:20px !important;
}


/* Home page specific hero styling */

.home .header {
    position: relative;
    overflow: visible !important;
    /*   clip-path: polygon(0 0, 100% 0%, 100% 77%, 0 100%);
 */
}
/* Enlarge and reposition the background */
.home .header::before {
 content: "";
position: absolute;
inset: 0;
background-color: var(--color-blue);
background-image: url(https://www.groeihero.nl/wp-content/uploads/2024/10/stralen.svg);
background-blend-mode: soft-light;
background-size: 150%;
background-position: 0% 50%;
clip-path: polygon(0 0, 100% 0%, 100% 77%, 0 100%);
z-index: 0;
}

/* Ensure content is above the background */
.home .header .et_pb_fullwidth_header {
    position: relative;
    z-index: 2;
}

.home .header-image {
    position: absolute;
    top: -8em;
    right: -12em;
    width: 50%;
    z-index: 3; /* Above everything */
}
.header {
 /*  background-position: center bottom 0px;
  background-image: url('https://www.groeihero.nl/wp-content/uploads/2024/10/blauw-strippel.svg');
  background-repeat: no-repeat;
  background-size: cover;
    padding-bottom: 0;
    background-position: bottom; */
}

.hero h1,
.header h1 {
  color: var(--color-primary);
  font-size: clamp(2rem, 5vw, 3rem);
  padding: 0 0 50px;
  margin: 20px 0 0 0;
}

.home .header h1,
.home .header .header-content h1 {
  color: var(--color-primary) !important;
  font-size: clamp(2.5rem, 5vw, 3rem);
  padding: 50px 0 75px 0;
  margin: 0;
  transform: skewY(var(--skew-angle));
}

.hero-content,
.header-content {
  background: url('https://www.groeihero.nl/wp-content/uploads/2024/10/kaboom.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: -15% 0;
  padding: 30px 0;
  color: var(--color-black);
  transform: skewY(var(--skew-angle));
}

.hero-content > *,
.header-content > * {
  transform: skewY(calc(var(--skew-angle) * -1));
}

.header .et_pb_header_content_wrapper {
  transform: skewY(0);
}

.home .header .et_pb_title_container h1 {
  transform: skewY(5deg);
  display: block;
  color: var(--color-primary);
}

/* =================================================
   SECTIONS (MOBILE FIRST)
   ================================================= */
.section {
  padding: var(--spacing-xl) 0;
}

.section-intro {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.section-intro .container {
  max-width: 800px;
}

/* Colored sections with original effects */
.section-green,
.stappen {
  background: url('https://www.groeihero.nl/wp-content/uploads/2024/10/stralen-50prc.svg'), 
              radial-gradient(circle, rgba(203, 230, 105, 0.7) 0%, rgba(0, 164, 56, 0.7) 100%);
  background-position: 60% 80%;
  background-blend-mode: soft-light;
  background-size: cover;
  transform: skewY(-3deg);
}

.section-green .container,
.stappen .et_pb_row {
  transform: skewY(3deg);
  position: relative;
  z-index: 2;
}

.section-pink {
clip-path: polygon(0 0, 100% 25%, 100% 77%, -40% 100%);
}
.section-pink h2{
text-align:left;
}
.contact7-held-blauw{
      background-image: url('https://www.groeihero.nl/wp-content/uploads/2024/10/stippels-1.svg');
  background-size: 80%;
  background-position: 300% -800%;
}


.section-pink .contact7 input:focus,
.section-pink .contact7 textarea:focus,
.section-pink .contact7 select:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Complex clip-path for contact section */
:root {
  --wie-drop: 12%;
  --corner-radius: 2rem;
}

.section-pink::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    url('https://www.groeihero.nl/wp-content/uploads/2024/10/stippels-1.svg'), 
radial-gradient(circle, rgba(231, 48, 137, 1) 0%, rgba(199, 21, 133, .6) 100%);
  background-position: 300% -800%;
  background-size: 80% auto, cover;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: soft-light;
  clip-path: polygon(
    0 0, 
    calc(100% - 3rem) var(--wie-drop), 
    100% calc(var(--wie-drop) + 1.5rem), 
    100% calc(90% - 1.5rem), 
    calc(100% - 1rem) 90%, 
    1rem 100%, 
    0 calc(100% - 2rem)
  );
  z-index: -1;
}

/* =================================================
   CARDS & TESTIMONIALS (MOBILE FIRST)
   ================================================= */
.klantcases{
    background:transparent;
  position:relative;
}
.klantcases .julia .et_pb_image_wrap  {
max-width: 25em;
top: -18.2em;
transform: skewY(6deg);
position: absolute;
right: 0;
}

.card,
.klant {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-black);
  padding: var(--spacing-sm) !important;
  margin-bottom: var(--spacing-md);
  transform: skewY(-4deg);
  box-shadow: var(--shadow-comic);
  transition: transform 0.3s ease;
  width: 80%;
  margin: 0 auto var(--spacing-md);
  z-index: 99;
}
.klant-case-kop-rij {
        z-index:100;

}
.klant-case-kop-rij .et_pb_text_inner{
margin-left: -26em;

}
.klant-case-kop-rij h2{
font-size: clamp(1.7rem, 4.8vw, 2.6rem);
    padding-bottom:25px;
}

.klant a {
  position: relative;
  display: inline-block; /* nodig zodat de pseudo-element breedte pakt */
  color: inherit;
  text-decoration: none; /* standaard underline uit */
}


/* Specific client card colors */
.klant-paars,
.klant-oranje,
.klant-roze,
.klant-blauw {
  border: 2px solid var(--color-black);
  padding: 2%;
  margin-right: 2%;
  z-index: 90;
  background-repeat: no-repeat;
  width: 100%;
}

.klant-paars,
.blok-paars {
  background: rgb(189, 57, 171);
  background: radial-gradient(circle, rgba(189, 57, 171, 1) 0%, rgba(100, 53, 140, 1) 100%);
}

.klant-blauw {
  background: rgb(0, 159, 227);
  background: radial-gradient(circle, rgba(0, 159, 227, 0.5) 0%, rgba(0, 159, 227, 1) 100%);
}

/* Comic block styles */
.comicblok-roze,
.comicblok-paars {
  transform: skewY(3deg);
}

.comicblok-roze .et_pb_text_inner,
.comicblok-paars .et_pb_text_inner {
  transform: skewY(-3deg);
  background-color: var(--color-black);
  border: 2px solid var(--color-black);
  outline: 2px solid var(--color-black);
  outline-offset: 20px;
  padding: 2%;
  background-size: 200%;
}

.comicblok-roze .et_pb_text_inner {
  background: rgb(189, 57, 171);
  background: url('https://www.groeihero.nl/wp-content/uploads/2024/10/swril.svg'), 
              radial-gradient(circle, rgba(253, 6, 129, 0.5) 0%, rgba(189, 57, 171, 0.5) 20%);
  background-blend-mode: soft-light;
}

.comicblok-paars .et_pb_text_inner {
  background: rgb(189, 57, 171);
  background: url('https://www.groeihero.nl/wp-content/uploads/2024/10/swril.svg'), 
              radial-gradient(circle, rgba(189, 57, 171, 0.9) 0%, rgba(100, 53, 140, 0.9) 100%);
  background-blend-mode: multiply;
  background-position: right center;
    background-size: 200%;
}

.comicblok-roze ul li,
.comicblok-roze p,
.comicblok-paars ul li,
.comicblok-paars p,
.klant ul li,
.klant p {
  color: var(--color-white);
    font-size: var(--font-size-base);
  
}

/* Testimonial specific styling */
.klant h3,
.impact h3 {
  transform: skewY(-5deg);
  display: block;
  color: var(--color-white);
   font-size: var(--font-size-lg);
  font-family: var(--font-display);
  text-shadow: 5px 5px 0px var(--color-black);
  -webkit-text-stroke: 1px var(--color-black);
}

.impact h3 {
  color: var(--color-secondary);
}

.klant h2 {
  color: var(--color-white);
  font-size: 2rem;
  display: block;
  margin: 0 auto;
  text-align: center;
    padding-bottom: 40px;
}

/* Hero testimonial positioning */
.klant-hero img {
  margin-bottom: -20%;
  margin-left: 17%;
}

.klant-hero .hero {
  margin: auto -20% 0;
}

.klant-hero .wat-klanten-zeggen {
  margin: auto auto 0 9rem;
}

/* Link styling for testimonials */
.klant-paars .page-link a,
.klant-paars .page-link a:hover,
.klant-blauw .page-link a,
.klant-blauw a {
      color: var(--color-accent);
  text-align: center;
}
.klant-blauw a {
   margin-top:1em;
    font-weight: bold;
}
.klant-paars a:hover,
.klant-blauw a:hover {
  color: var(--color-white);
  font-weight: 700;
}


.klant a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px; /* afstand onder tekst, pas aan naar smaak */
  width: 0;
  height: 2px; /* dikte underline */
  ]color: var(--color-accent);
  transition: all 0.3s ease;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}

.klant a:hover::after {
  width: 100%;
  transform: translateX(-50%) scaleX(1);
}

/* Custom list styling */
.klant ul,
.comicblok-roze ul li {
  list-style: none;
  padding-left: 20px;
}

.klant ul li:before,
.comicblok-roze ul li:before {
  content: "\2713\0020";
  color: var(--color-white);
  margin-left: -20px;
}

/* Anders */
.anders{
margin:10% 0;
}


/* contact section specific */
.contact7 .contact7-held-blauw{
    background-size: contain;
background-position: right 0px bottom 0px;
background-image: url(https://www.groeihero.nl/wp-content/uploads/2025/08/groeihero-marketing-man-contact.jpg)!important;
background-repeat: no-repeat;
    
}




/* =================================================
   FORMS (MOBILE FIRST)
   ================================================= */
.form-group {
  margin-bottom: var(--spacing-md);
}

label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  color: var(--color-text);
}

input[type=text],input[type="email"], input[type="number"],
textarea,
select {
  width: 100%;
  padding: var(--spacing-sm);
  border: var(--border-width) solid var(--color-secondary);
  border-radius: 3px;
  font-family: var(--font-primary);
  font-size: 1rem;
  transition: border-color 0.3s ease;
}
.contact7{
    padding-bottom:20px
}

.contact7 .math-quiz{
  display: block;
width: 100%;

}
.contact7 .math-quiz label, .contact7 input[type="number"]{
width: 30%;
float: left;
}
.contact7 input[type="number"]{
margin-right: 30%;
}
.contact7 input:focus,
.contact7 textarea:focus,
.contact7 select:focus {
  outline: none;
  border-color: var(--color-secondary);
}

/* Checkbox styles */
input[type="checkbox"] {
  width: auto;
  margin-right: var(--spacing-xs);
}

/* =================================================
   FOOTER (MOBILE FIRST)
   ================================================= */
.footer,
.foot {
  background-color: var(--color-pink);
  background: radial-gradient(circle at right, var(--color-primary) 1%, var(--color-pink) 100%);
  background-position: right -9% center;
  background-blend-mode: soft-light;
  color: var(--color-white);
  padding: 0;
  clip-path: polygon(0 0%, 100% 60%, 100% 100%, 0% 100%);
  margin-top: -220px;
  z-index: 99;
  position: relative;
}
.foot .et_pb_section {
padding: 54px 0 0 0 !important;
}
.footer::after,
.foot::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0.25;
  width: 150%;
  height: 60%;
      background-image: url('https://www.groeihero.nl/wp-content/uploads/2024/10/stippels-1.svg');
    background-repeat:none;
  background-size: 500%;
}
.foot .et_pb_text_inner {
  color: var(--color-white);
  padding-top: 100px;
}

.footer a,
.foot a,
.footer p,
.foot p {
  color: var(--color-white);
  font-size: .8rem;
  padding-top: 100px;
  transition: color 0.3s ease;
}

.footer a:hover,
.foot a:hover {
  color: var(--color-accent);
}

/* Social media styling */
.foot .et_pb_social_media_follow li a.icon:before {
  font-size: 2rem;
}

.foot .et_pb_social_media_follow_network_0 a.icon {
  background: transparent;
}

/* Section above footer spacing */
.sectie-onder {
  padding-bottom: 220px;
}

/* =================================================
   BLOG STYLES (MOBILE FIRST)
   ================================================= */
.blog-grid {
  display: grid;
  gap: var(--spacing-md);
  grid-template-columns: 1fr;
}

.blog-post {
  background: var(--color-white);
  border: var(--border-width) solid var(--color-black);
  padding: var(--spacing-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post:hover {
  transform: scale(1.02) rotate(1deg) translateY(-2px);
  box-shadow: var(--shadow-comic);
}

.blog-post h3 {
  color: var(--color-secondary);
  font-size: 1.2rem;
  margin-bottom: var(--spacing-sm);
}

/* =================================================
   COMIC-BLOG (DETAILED STYLING)
   ================================================= */
.comic-blog {
  padding-bottom: 250px;
}
.comic-blog article{
  padding-bottom: 5em;
}

/* Advanced CSS Grid for comic blog */
.comic-blog .et_pb_salvattore_content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 60px 20px; /* 60px vertical, 20px horizontal */
  align-items: stretch;
}

.comic-blog .et_pb_salvattore_content .column { 
  display: contents; 
}

/* Comic blog post cards */
.comic-blog .et_pb_salvattore_content .et_pb_post {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 2px solid var(--color-black);
  background: var(--color-white);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Image containers */
.comic-blog .et_pb_post .et_pb_image_container {
  border-bottom: 3px solid var(--color-black);
  overflow: hidden;
}

.comic-blog .et_pb_post .entry-featured-image-url { 
  margin-bottom: 0; 
}
.comic-blog .et_pb_post .entry-featured-image-url img{ 
min-height: 250px;
}
/* Enhanced hover effects */
.comic-blog .et_pb_post:hover {
  transform: scale(1.05) rotate(3deg) translateY(-2px);
  box-shadow: 6px 6px 0 var(--color-black);
  z-index: 22;
}

/* Typography for comic blog */
.comic-blog .entry-title,
.comic-blog .entry-title a {
  font-family: var(--font-primary);
  color: var(--color-secondary);
  padding: 0 0 8px;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  text-shadow: none;
  -webkit-text-stroke: 0;
  transform: none;
}

.comic-blog .entry-title a:hover { 
  color: var(--color-secondary); 
}

/* Content layout */
.comic-blog .et_pb_post .post-content {
  margin-bottom: 0;
  padding-bottom: 0;
  flex-grow: 1;
  text-align: center;
}

.comic-blog .post-content p { 
  text-align: left; 
}

/* Comic blog more-link styling */
.comic-blog .more-link {
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 1.5% 7% 1.5% 3%;
  color: var(--color-white);
  transform: skewY(var(--skew-angle));
  border-radius: 0;
  box-shadow: var(--shadow-comic);
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  margin: 1rem auto 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: all 0.3s ease;
}

.comic-blog .more-link::after {
  content: "\00bb";
  opacity: 1;
  color: var(--color-white);
  margin-top: -3px;
  margin-left: 0;
}

.comic-blog .more-link:hover {
  background-color: var(--color-purple);
  border-color: var(--color-purple);
  color: var(--color-accent);
  box-shadow: var(--shadow-comic);
  opacity: 1;
}

.comic-blog .more-link:hover::after {
  content: "\00bb \00bb \00bb";
  color: var(--color-accent);
  margin-left: 2px;
  padding: 0 7% 1.5% 3%;
}

/* Disable general underline animation on comic blog more-link */
.comic-blog .post-content:hover a.more-link::before { 
  display: none; 
}

/* =================================================
   PORTFOLIO & GALLERY STYLES
   ================================================= */
.portfolio {
  transform: skewY(6deg);
  background: radial-gradient(circle, rgba(255, 209, 0, 0.5) 0%, rgba(234, 91, 12, 0.9) 80%);
}

.portfolio .et_pb_gallery_item {
  padding: 2%;
  border: 2px solid var(--color-black);
  background: var(--color-white);
  margin: 2% 0;
}

.portfolio .et_pb_gallery_item img {
  border: 2px solid var(--color-black);
  background: #ededed;
  margin: 2%;
}

/* Masonry Gallery */
.portfolio .et_pb_gallery .et_pb_gallery_items {
  column-count: 1; /* Mobile first */
  column-gap: 20px;
}

.portfolio .et_pb_gallery .et_pb_gallery_items .et_pb_gallery_item {
  width: 100%;
  margin: 0px 0px 10px 0;
  float: none;
}

/* Portfolio overlay effects */
.portfolio .et_overlay:before {
  content: '';
  background: url('https://www.groeihero.nl/wp-content/uploads/2024/10/comicpijl.svg');
  position: absolute;
  background-size: 60px 60px;
  width: 60px;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s;
}

/* =================================================
   SPECIAL LIST STYLES
   ================================================= */
/* Star list styling */
ul.ster-lijst,
.ster-lijst ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.ster-lijst li,
.ster-lijst ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 0.5em;
  list-style: none;
}

.impact ul.ster-lijst li {
  font-size: 1.3rem;
}

ul.ster-lijst li::before,
.ster-lijst li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 18px;
  height: 18px;
  background-image: url("/wp-content/uploads/2024/10/ster2.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

  .cijfer-lijst  ol { counter-reset: item; }
.cijfer-lijst ol li { display: block; }
  .cijfer-lijst ol li:before {
            content: counter(item) ". ";
            counter-increment: item;
  font-family: var(--font-display), "badaboom-pro", sans-serif;
        }

/* =================================================
   ADDITIONAL SECTIONS & EFFECTS
   ================================================= */
/* Introduction sections */
.intro,
.smal {
  width: 75%;
  margin: 0 auto;
}

.intro p,
.intro .et_pb_text_inner {
  font-size: 1.2rem;
}

/* Assignment/opdracht section */
.opdracht {
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 80%);
  background: rgb(0, 159, 227);
  background: url('https://www.groeihero.nl/wp-content/uploads/2024/10/blokjes.svg'), 
              radial-gradient(circle, rgba(93, 186, 226, 0.5) 0%, rgba(0, 159, 227, 0.5) 100%);
  background-blend-mode: soft-light;
  padding: 150px 0;
  background-size: 70%;
  background-position: right center;
}

/* Plan section */
.plan {
  clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 80%);
  padding-top: 150px;
}


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

.zijbalk h2{
   font-size: clamp(1.1rem, 2.5vw, 1.4rem); 
    text-align:left;
}

.zijbalk li a {
  position: relative;
  display: inline-block; /* needed so underline matches text width */
  color: var(--color-primary); /* or any color you prefer */
  font-weight: 600;
  text-decoration: none; /* remove default underline */
  padding-bottom: 2px;   /* space for the custom underline */
    font-size: .85rem;
}

/* underline pseudo-element */
.zijbalk li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px; /* thickness */
  width: 0;
  background-color: var(--color-primary);
  transition: width 0.3s ease;
}

/* on hover → animate underline from left → right */
.zijbalk li a:hover::after {
  width: 100%;
}



/* =================================================
   KLANTCASE BESCHRIJVINGEN
   ================================================= */

.klantcase-tekst .et_pb_row {
  display: flex;
  align-items: center;
}

.klantcase-tekst .et_pb_text_inner,
.klantcase-tekst .et_pb_row{
    margin:auto;
}


.stripverhaal .et_pb_row {
   transform: skewY(-3deg);
  outline: 2px solid var(--color-black);
  outline-offset: 20px;
}
.stripverhaal .et_pb_row.striponder {
   transform: skewY(-3deg);
  outline: 0px  2px 2px 2px solid var(--color-black);
  outline-offset: 20px;
}
.stripverhaal .et_pb_row.stripboven {
   transform: skewY(-3deg);
  outline: 2px  2px 0px px solid var(--color-black);
  outline-offset: 20px;
}
.stripverhaal  .et_pb_image_wrap{
    border: 2px solid var(--color-black);
}

.stripverhaal .sticker{
  transform: skewY(3deg);
  background-color: none;
  border: 0px none;
  outline: 0 none;

}
.stripbeeld .sticker,
.stripverhaal  .et_pb_row.sticker{
  transform: skewY(3deg);
  background-color: none;
  border: 0px none;
}
.stripbeeld .sticker .et_pb_image_wrap  img{
max-width: 25em;
top: -18.2em;
transform: skewY(-6deg);
position: absolute;
right: 0;
  transform: skewY(3deg);
  background-color: none;
  border: 0px none;
}




























/* =================================================
   RESPONSIVE DESIGN (PROGRESSIVE ENHANCEMENT)
   ================================================= */

/* Small tablets and large phones */
@media (min-width: 576px) {
  :root {
    --font-size-base: 19px;
    --container-width: 85%;
  }
  
  .blog-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .hero-content {
    background-size: 60%;
  }
}

/* Tablets */
@media (min-width: 768px) {
  .nav-menu {
    display: flex;
    gap: var(--spacing-md);
  }
  
  .mobile-menu-toggle {
    display: none;
  }
  .home .header {
background-color: var(--color-white);
/*background-blend-mode: soft-light;
background-image: url(https://www.groeihero.nl/wp-content/uploads/2024/10/stralen.svg);
background-size: 150%;
background-position: 20%;*/
}
    /*
    .home .header-image{
position: relative;
  top: auto;
  right: auto;
  width: auto;
}*/
    .header,    .header .et_pb_fullwidth_header{
        padding-top:54px !important;
    }
    
 /* =================================================
   COMIC-BLOG (DETAILED STYLING)
   ================================================= */
.comic-blog {
  padding-bottom: 250px;
}

.comic-blog .et_pb_blog_grid_wrapper {
  border: 2px solid var(--color-black);
  padding: 2%;
}
    
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }
  
  .hero {
    padding: var(--spacing-xl) 0 calc(var(--spacing-xl) * 1.5);
  }
}

/* Large tablets and small desktops */
@media (min-width: 992px) {
  :root {
    --font-size-base: 20px;
    --container-width: 80%;
  }


  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .section {
    padding: calc(var(--spacing-xl) * 1.5) 0;
  }
    
    .comic-blog .more-link {
    position: absolute;
bottom: 20px;
left: 30%;
}
}

/* Large desktops */
@media (min-width: 1200px) {
  :root {
    --font-size-base: 22px;
    --container-width: 75%;
  }
  
  .hero-content {
    background-size: 50%;
  }
  
  h1 {
    text-shadow: 5px 5px 0px var(--color-black);
  }
}

/* =================================================
   UTILITY & ANIMATION CLASSES
   ================================================= */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.slide-up {
  transform: translateY(30px);
  opacity: 0;
  animation: slideUp 0.6s ease forwards;
}

@keyframes slideUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Print styles */
@media print {
  .hero,
  .footer,
  .btn,
  .knop {
    background: none !important;
    color: var(--color-black) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
}