/*
Theme Name: HR Advieshoek Child
Theme URL: https://hradvieshoek.nl
Description: HR Advieshoek Child Theme for Divi 5
Theme Author: Marije
Author URL: https://pineapplegraphics.nl/
Template: Divi
Version: 1.0.0
Text Domain: hradvieshoek-child
*/

/* =============================================================================
   ROOT VARIABLES
   ============================================================================= */

:root {
    /* Brand Colours */
    --color-blue:       #174094;   /* Primary blue  | CMYK 100 80 0 0  | RGB 22 65 148  */
    --color-red:        #bf0d0d;   /* Accent red    | CMYK 17 100 100 7| RGB 192 13 13  */
    --color-grey:       #9e9e9e;   /* Neutral grey  | CMYK 0 0 0 50    | RGB 157 157 157*/
    --color-white:      #ffffff;
    --color-black:      #1e2d4a;   /* Dark blue-tinted — softer than pure black, ties into brand */
    --color-dark-bg:    #174094;   /* Footer = house style blue, no darker shade */
    --color-light-bg:   #f5f5f5;   /* Light section background */
    
    --color-darkred:        #8a0909;   /* Accent red    | CMYK 17 100 100 7| RGB 192 13 13  */
     --color-darkblue:       #1e3668;   /* Primary blue  | CMYK 100 80 0 0  | RGB 22 65 148  */
   

    /* Typography — Source Sans Pro loaded via Adobe Fonts (Typekit) */
    --font-base:        "source-sans-pro", sans-serif;

    --font-size-xs:     clamp(0.75rem,  1.5vw, 0.875rem);   /* 12–14px */
    --font-size-sm:     clamp(0.875rem, 2vw,   1rem);        /* 14–16px */
    --font-size-base:   clamp(1rem,     2vw,   1.125rem);    /* 16–18px */
    --font-size-md:     clamp(1.125rem, 2.5vw, 1.375rem);    /* 18–22px */
    --font-size-lg:     clamp(1.375rem, 3vw,   1.75rem);     /* 22–28px */
    --font-size-xl:     clamp(1.75rem,  4vw,   2.25rem);     /* 28–36px */
    --font-size-2xl:    clamp(2rem,     5vw,   2.75rem);     /* 32–44px */
    --font-size-3xl:    clamp(2.5rem,   6vw,   3.5rem);      /* 40–56px */

    --font-weight-regular:  400;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:  1.2;
    --line-height-normal: 1.6;
    --line-height-loose:  1.8;

    /* Spacing scale */
    --space-xs:   0.5rem;    /*  8px */
    --space-sm:   1rem;      /* 16px */
    --space-md:   1.5rem;    /* 24px */
    --space-lg:   2.5rem;    /* 40px */
    --space-xl:   4rem;      /* 64px */
    --space-2xl:  6rem;      /* 96px */

    /* Layout */
    --max-width:        1200px;
    --gutter:           2rem;
    --border-radius:    4px;
    --border-radius-lg: 8px;

    /* Transitions */
    --transition-fast:   0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow:   0.5s ease;

    /* Shadows */
    --shadow-sm:  0 2px 8px rgba(23, 64, 148, 0.12);
    --shadow-md:  0 4px 20px rgba(23, 64, 148, 0.18);
    --shadow-lg:  0 8px 40px rgba(23, 64, 148, 0.24);
}

/* =============================================================================
   GLOBAL RESETS & BASE
   ============================================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-black);
    line-height: var(--line-height-normal);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-base) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-tight) !important;
    color: var(--color-blue);
}
h3 {
    color: var(--color-blue) !important;
}
a {
    color: var(--color-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
    font-family: var(--font-base);
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}
p, .et_pb_text_inner{
    font-family: var(--font-base);
    color: var(--color-black);
    font-size: var(--font-size-base);
    line-height:1.6em;
}
#cookieadmin_notice p{
     color: var(--color-white);
      font-size: var(--font-size-sm);
 
}
/* =============================================================================
   EXTRA KOPPEN
   ============================================================================= */
.about-heading,
.section-about h2,
.section-about h3 {
    color: var(--color-blue) !important;
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

.u-text-white  { color: var(--color-white) !important; }
.u-text-blue   { color: var(--color-blue)  !important; }
.u-text-red    { color: var(--color-red)   !important; }
.u-bg-blue     { background-color: var(--color-blue)  !important; }
.u-bg-red      { background-color: var(--color-red)   !important; }
.u-bg-white    { background-color: var(--color-white) !important; }
.u-bg-light    { background-color: var(--color-light-bg) !important; }
.u-text-center { text-align: center !important; }
.u-font-bold   { font-weight: var(--font-weight-bold) !important; }
.u-font-semi   { font-weight: var(--font-weight-semibold) !important; }




/* =============================================================================
   RED ACCENT BAR  — width follows h2 text length + diagonal tail
   ============================================================================= */
.kop-rood-vlak::before {
    content: "";
    background-color: var(--color-red);
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);   /* bleeds to viewport left */
    right: 100%;                  /* fills behind h2 too */
    height: 100%;
    z-index: 0;
}

.kop-rood-vlak {
    display: flex;
    align-items: left;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
    position: relative;
}

.kop-rood-vlak h2 {
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-family: var(--font-base);
    margin-top: 0;
    margin-bottom: 0;
    display: inline-block;           /* shrinks to text width */
    position: relative;
    padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
    background-color: var(--color-red);

    /* diagonal tail on the right: 10px text padding + 30px for the slant */
    padding-right: 40px;
    padding-left: 0;
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 100%, 0 100%);
}

/* Remove the old ::before / ::after — no longer needed */
.kop-rood-vlak::after {
    display: none;
}



/* =============================================================================
   CONTACT FORM 7 — GLOBAL STYLES
   ============================================================================= */

/* Reset CF7 default styles */
.wpcf7 {
    margin: 0;
    padding: 0;
}

/* ── Base inputs ── */
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
    font-family: var(--font-base);
    font-size: var(--font-size-sm);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-blue);
    padding: 0.6rem 0.875rem;
    width: 100%;
    margin-bottom: var(--space-xs);
    background-color: var(--color-white);
    color: var(--color-black);
    transition: border-color var(--transition-fast);
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
    outline: none;
    border-color: var(--color-red);
}
.wpcf7 textarea {
    min-height: 100px;
    resize: vertical;
}

/* ── Submit button — base ── */
.wpcf7 input[type="submit"] {
    background-color: var(--color-red);
    color: var(--color-white);
    font-family: var(--font-base);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none;
    cursor: pointer;
    width: auto;
    padding: 0.75rem 2rem;
    transition: background-color var(--transition-normal), transform var(--transition-fast);
}
.wpcf7 input[type="submit"]:hover {
    background-color: #8a0909;
    transform: translateY(-2px);
}
.wpcf7 form p:has(.wpcf7-submit) {

}
.wpcf7 input[type="submit"]:hover {
    background-color: #8a0909;
    transform: translateY(-2px);
}
.wpcf7 form p:has(.wpcf7-submit) {

}

.wpcf7-spinner {
position: absolute;
}
.hero-form-card .wpcf7 input[type="submit"],
.contact-footer-heading .wpcf7 input[type="submit"] {
    float: right;  /* or whatever you intended here */
}

/* =============================================================================
   BUTTON STYLES
   In Divi 5: style the Divi Button module with these classes
   ============================================================================= */

.knop {
    display: inline-block;
    background-color: var(--color-red);
    color: var(--color-white) !important;
    font-family: var(--font-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color var(--transition-normal), transform var(--transition-fast), box-shadow var(--transition-normal);
}

.knop a:hover {
    background-color: #8a0909;
    color: var(--color-white) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.knop a:after {
    display:none;
}
.knop-blauw {
    display: inline-block;
    background-color: transparent;
    color: var(--color-blue) !important;
    font-family: var(--font-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.75rem 2rem;
    border: 2px solid var(--color-blue);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.knop-blauw:hover {
    background-color: var(--color-blue);
    color: var(--color-white) !important;
}


/* =============================================================================

   ██████╗  █████╗  ██████╗ ███████╗    ██████╗ ██╗   ██╗██╗██╗     ██████╗
   ██╔══██╗██╔══██╗██╔════╝ ██╔════╝    ██╔══██╗██║   ██║██║██║     ██╔══██╗
   ██████╔╝███████║██║  ███╗█████╗      ██████╔╝██║   ██║██║██║     ██║  ██║
   ██╔═══╝ ██╔══██║██║   ██║██╔══╝      ██╔══██╗██║   ██║██║██║     ██║  ██║
   ██║     ██║  ██║╚██████╔╝███████╗    ██████╔╝╚██████╔╝██║███████╗██████╔╝
   ╚═╝     ╚═╝  ╚═╝ ╚═════╝ ╚══════╝    ╚═════╝  ╚═════╝ ╚═╝╚══════╝╚═════╝

   HOW TO BUILD THIS PAGE IN DIVI 5
   Each section below includes the Divi build instructions as comments.
   ============================================================================= */


/* =============================================================================
   SECTION 1 — HEADER / NAVIGATION
   ─────────────────────────────────────────────────────────────────────────────
   ============================================================================= */



/* Logo */
.header-logo img {
    max-height: 50px;
    width: auto;
}

/* Nav links */
.header-nav a,
#top-menu a{
    font-family: var(--font-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blue);
    text-transform: none;
    letter-spacing: 0.02em;
    padding: 0 var(--space-sm);
    transition: color var(--transition-fast);
}

.header-nav a:hover,
.header-nav a.current {
    color: var(--color-red);
}

.et_mobile_menu li a {
    font-family: var(--font-base) !important;

}

/* "HR" in logo uses red, rest is blue — target with span in logo HTML */
.logo-accent { color: var(--color-red); }

/* Override Divi 5 default nav font (serif + caps) */
#et-main-nav ul li a,
#et-main-nav ul li a:visited,
.et_pb_menu .nav li a,
.et_mobile_nav_menu a {
     color: var(--color-blue);
   font-family: var(--font-base) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    font-style: normal !important;
}
#top-menu li.current-menu-item>a {
color: var(--color-red);
}

.intro{
    font-size: var(--font-size-md) !important;
    
 
}

/* =============================================================================
   SECTION 2 — HERO
   Mobile first: smalle beeldstrook boven, breed blauw tekstvlak eronder.
   Vanaf desktop zweeft de kaart weer over de hero-afbeelding.
   ============================================================================= */

.et_pb_section.section-hero,
.section-hero {
    position: relative;
    min-height: 0;
    padding: 220px 0 0;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 65% top;
    background-color: var(--color-blue);
}

/* Divi row op mobiel volledig breed maken */
.section-hero .et_pb_row {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
}

/* Lege Divi kolommen op mobiel verbergen */
.section-hero .et_pb_column_empty {
    display: none;
}

/* Mobiel: blauwe kaart is gewoon een volle tekstsectie */
.hero-row {
    position: relative;
    z-index: 10;
    margin-top: 0;
}

.hero-card {
    background-color: var(--color-blue);
    color: var(--color-white);
    width: 100%;
    max-width: none;
    padding: var(--space-md) var(--space-lg);
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
    margin-bottom: 0;
}

.hero-card h2,
.hero-card .et_pb_module_header {
    color: var(--color-white) !important;
        font-size: clamp(2rem, 2.2vw, 2.75rem) !important;
            margin-bottom: var(--space-sm);
}

.hero-card p,
.hero-card li {
    color: var(--color-white);
    font-size: var(--font-size-base);
}

.hero-whatsapp .et_pb_code_inner {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 18px;
    align-items: start;
}

.waicon,
.watxt {
    float: left;
    width: auto;
}

.waicon svg {
    width: 42px;
    height: 42px;
    display: block;
}

.watxt {
    line-height: 1.4;
    width: 80%;
margin-left:15px;}



/* =============================================================================
   SECTION 3 — "IK BEN GERRIE" INTRO
   ─────────────────────────────────────────────────────────────────────────────
   ============================================================================= */

.section-about,
.section-contact  {
    background-color: var(--color-light-bg);
    padding: var(--space-xl) 0;
}

/* Portrait image col */
.about-image .et_pb_image_wrap {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

/* Text column */
.about-text-col {
    padding-left: var(--space-lg);
  display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-heading,
.about-heading h2{
    font-size: var(--font-size-2xl);
    color: var(--color-black);
    margin-bottom: var(--space-sm);
    font-weight: var(--font-weight-bold);
}

.about-heading em,
.about-heading strong {
    font-style: normal;
    font-weight: var(--font-weight-bold);
}

.about-text {
    font-size: var(--font-size-base);
    color: var(--color-black);
    line-height: var(--line-height-loose);
    margin-bottom: var(--space-md);
    padding-right: var(--space-xl);
}
.about-blue-accent {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 30%;
    width: 3em;
    background-color: var(--color-blue);
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

/* =============================================================================
   SECTION 4 — QUOTE / REVIEW BLOCK (first instance)
   ─────────────────────────────────────────────────────────────────────────────
   ============================================================================= */

.section-review {
    background-color: var(--color-white);
    padding: var(--space-xl) 0;
}


/* Left quote column */


/* Two red square decorators */

.quote-text .et_pb_text_inner p {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);

    margin: 0;
    font-size: var(--font-size-xl);
    color: var(--color-blue);
    line-height: var(--line-height-tight);
    font-weight: 600;
    text-align: center !important;
}

.quote-text .et_pb_text_inner p::before,
.quote-text .et_pb_text_inner p::after {
    content: "";
    flex: 0 0 80px;
    height: 2px;
    background: var(--color-red);
    display: block;
}
.quote-text p{
    font-size: var(--font-size-xl);
    color: var(--color-blue);
}
.review-text {
  max-width: 600px;
  margin-left: var(--space-lg);
  position: relative;
  padding-left: calc(var(--space-lg) + var(--space-sm));
    margin:0 auto;
}

.review-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: var(--space-lg);
  height: var(--space-lg);
  background-image: url("https://hradvieshoek.nl/wp-content/uploads/2026/05/quote.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.review-quote {
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--color-blue);
  text-transform: none;
  margin-bottom: var(--space-md);
}

.review-text p {
  font-weight: 400;
  max-width: 900px;
}

.review-text h5 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: color-mix(in srgb, var(--color-blue) 75%, black);

    margin-top: var(--space-md);

    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
}



/* =============================================================================
   SECTION 5 — "WAAR KUN JE MIJ VOOR INZETTEN" (services)
   ─────────────────────────────────────────────────────────────────────────────
  .review-text p {
    font-size: var(--font-size-sm);
    color: var(--color-grey);
    line-height: var(--line-height-loose);
}
.review-text h3 {
    font-size: var(--font-size-sm);
    font-weight:400;
    text-align:right;
}
   ============================================================================= */

.section-services {
    background-color: var(--color-white);
    padding: var(--space-xl) 0;
}

/* Red banner row heading */
.services-heading-banner {
    background-color: var(--color-red);
    padding: var(--space-sm) var(--space-lg);
    margin-bottom: var(--space-lg);
}

.services-heading-banner h2,
.services-heading-banner .et_pb_text {
    color: var(--color-white);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}

/* Intro text below banner */
.services-intro {
    margin-bottom: var(--space-lg);
}

.services-intro p {
    font-size: var(--font-size-base);
    color: var(--color-black);
    line-height: var(--line-height-loose);
}
/* card row */
.service-card{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}
/* Service card row */
.service-card{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

/* Individual service card */
.service-card .et_pb_column{
      background: linear-gradient(
    135deg,
    var(--color-blue),
    var(--color-darkblue)
  );
    color: var(--color-white);
    padding: var(--space-lg) var(--space-md);
    border-radius: var(--border-radius);
    text-align: center;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    cursor: default;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);

    min-height: 0;
}

/* Hover */
.service-card .et_pb_column:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Reset extra spacing from Divi modules */
.service-card .et_pb_code,
.service-card .et_pb_image,
.service-card .et_pb_text{
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide empty code modules */
.service-card .et_pb_code{
    display: none;
}

/* Image module */
.service-card .et_pb_image{
    width: 100%;
    text-align: center;
    margin: 0 !important;
}

/* SVG / image inside card */
.service-card .service-icon,
.service-card .et_pb_image img,
.service-card .et_pb_image svg,
.service-card img,
.service-card svg{
    width: 100px;
    height: 100px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: brightness(0) invert(1);
}

/* Text module */
.service-card .et_pb_text{
    width: 100%;
    margin: 0 !important;
}

/* Card label */
.service-card .service-label,
.service-card .et_pb_blurb_content,
.service-card .et_pb_text p,
.service-card p{
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.3;
    margin: 0;
    text-align: center !important;
}

.service-card .card-link{
    cursor: pointer;
    position: relative;
}

.service-card .card-link:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
/* =============================================================================
   SECTION 6 — LOGO BAR (client logos)
   ─────────────────────────────────────────────────────────────────────────────
   ============================================================================= */

.section-logos {
    background-color: var(--color-white);
    padding: var(--space-xl) 0;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    filter: grayscale(30%);
    transition: filter var(--transition-normal), transform var(--transition-normal);
}

.logo-item img:hover {
    filter: grayscale(0%);
    transform: scale(1.05);
}



/* =============================================================================
   PAGES: HR AVIES MIJN AANPAK
   ─────────────────────────────────────────────────────────────────────────────
  
   ============================================================================= */
/* header */
/* Target your pagina-head section */
.pagina-head {
  position: relative;
    background-position: 100% center;
background-size: 50% !important;

}

.pagina-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: #ffffff;
  z-index: 1;
}

/* Make sure inner content sits above the pseudo-element */
.pagina-head .et_pb_row {
  position: relative;
  z-index: 2;
}


.aanpak-kop .et_pb_section{
    padding: 54px 0 0 0 !important;
}
.aanpak-kop .kop-rood-vlak::before,
.aanpak-kop .kop-rood-vlak h2{
    background-color: var(--color-blue);
}
.uitgelicht-body{
    background-size: 50% 100% !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    background-color: #ffffff !important;
}

/* =============================================================================
   SECTION 8 — CONTACT FOOTER FORM
   ─────────────────────────────────────────────────────────────────────────────
   ============================================================================= */

.section-contact-footer .et_pb_text_inner {
  max-width:568px;
    margin: 0 auto;
}

.contact-footer-heading {
  
}
.section-contact-footer{
    background-color:var(--color-red);

}

.section-contact-footer .et_pb_text_inner,
.section-contact-footer .et_pb_code{
   max-width: 65ch;
    margin:0 auto;

}

.section-contact-footer h2,
.section-contact-footer p {
    color:var(--color-white);
    text-align:center;

}

/* ── Submit button — footer exception (blue) ── */
.section-contact-footer .wpcf7 input[type="submit"] {
    background-color: var(--color-blue);
}
.section-contact-footer .wpcf7 input[type="submit"]:hover {
    background-color: var(--color-darkblue);
}



/* Social icons */
.section-bottom-bar .et_pb_social_media_follow li a {
    background-color: var(--color-white) !important;
    color: var(--color-blue) !important;
    border-radius: 4px;
}

.section-bottom-bar .et_pb_social_media_follow li a:hover {
    background-color: var(--color-red) !important;
    color: var(--color-white) !important;
}




.foot a,
.foot p{
    color:var(--color-white);
    text-align: center;
}
.foot et_pb_section {
padding: 15px 0;
}
.foot .et_pb_social_media_follow_0_tb_footer li.et_pb_social_icon a.icon:before{
       color:var(--color-blue);
 
}
.foot .et_pb_social_media_follow_network_1_tb_footer a.icon,
.foot .et_pb_social_media_follow_network_0_tb_footer a.icon{
       background-color:var(--color-white) !important;
 
}
/* CookieAdmin volledig Source Sans */
.cookieadmin_mod_head,
.cookieadmin_details_wrapper,
.cookieadmin_preference_details,
.cookieadmin_preference_details *,
#cookieadmin_preference,
#cookieadmin_preference *,
#cookieadmin_wrapper,
#cookieadmin_wrapper *,
.cookieadmin_modal_footer,
.cookieadmin_modal_footer *,
.cookieadmin_btn,
.cookieadmin_desc,
.cookieadmin_header,
.cookieadmin_header *,
.cookieadmin_types,
.cookieadmin_types *,
.cookieadmin_preference_title,
.cookieadmin_close_pref,
.stitle,
.cookieadmin_remark,
.cookieadmin-cookie-card,
.cookieadmin-cookie-card *,
.cookieadmin-modal-cookies-list,
.cookieadmin-modal-cookies-list * 
.cookieadmin_law_container p,
.cookieadmin_law_container h2,
.cookieadmin-necessary-heading,
.cookieadmin_preference p,
.cookieadmin_preference{
  font-family: var(--font-base) !important;
  color:var(--color-white);
}

.cookieadmin-poweredby{
    display:none;
}
/* =============================================================================
   HERO FORM CARD — OVERLAP
   ─────────────────────────────────────────────────────────────────────────────
   DIVI BUILD:
   • Hero section: Row 1 = full background image, no padding bottom
   • Row 2 (form row): single column, class  hero-form-row
   • Negative margin-top pulls the form card up over the hero image
   • On mobile the overlap is removed and form stacks normally
   ============================================================================= */

.hero-form-row {
    margin-top: -180px;   /* pulls form up over the hero — adjust to taste */
    position: relative;
    z-index: 10;
}






/* =============================================================================
   SECTION 9 — BOTTOM BAR (social icons + disclaimer)
   ─────────────────────────────────────────────────────────────────────────────
   ============================================================================= */

.section-bottom-bar {
    background-color: var(--color-blue);  /* house style blue, no darker shade */
    padding: var(--space-sm) 0;
}
.section-bottom-bar .et_pb_row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.section-bottom-bar .et_pb_column {
    width: 100%;
    text-align: center;
}

.section-bottom-bar .et_pb_social_media_follow {
 display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.section-bottom-bar .et_pb_social_media_follow.et_pb_module {
    flex-direction: row !important;
    justify-content: center !important;
}
.section-bottom-bar ul.et_pb_social_media_follow,
.section-bottom-bar ul{
    justify-content: center !important;
    width: 100%;
}

/* trial */
.section-bottom-bar .et_pb_column_2_tb_footer {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.section-bottom-bar .et_pb_column_2_tb_footer ul.et_pb_social_media_follow {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}


/* Disclaimer text */


.footer-disclaimer {
        text-align: center;

    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.7);
}

.footer-disclaimer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
}

.footer-disclaimer a:hover {
    color: var(--color-white);
}
.section-bottom-bar .et_pb_social_media_follow {
    justify-content: center;
}








/* =============================================================================
   AUTOSCROLL GALLERY
   ============================================================================= */

/* ==== logo roller ==== */

/* Container for scrolling logos */
.auto-scroll-gallery {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
      width: 100%;
  overflow: hidden;
}

.auto-scroll-gallery .et_pb_gallery_items {
      display: inline-flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
      display: inline-flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  animation: scroll-logos 60s linear infinite !important;
}

.auto-scroll-gallery .et_pb_gallery_item {
  flex-shrink: 0;
}

@keyframes scroll-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pause on hover (optional) */
.auto-scroll-gallery:hover .et_pb_gallery_items {
  animation-play-state: paused;
}
/* Control logo size */
.auto-scroll-gallery .et_pb_gallery_item {
  width: 150px !important;  /* Adjust this value */
  height: auto;
  margin: 0 30px;  /* Spacing between logos */
}

.auto-scroll-gallery .et_pb_gallery_image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.auto-scroll-gallery .et_overlay{
    display:none;
}

.auto-scroll-gallery .et_pb_gallery_item{
    margin-right:2em!important;
      display: block !important;
  float: none !important;
}

/* Remove any hover effects */
.auto-scroll-gallery .et_pb_gallery_item:hover {
  transform: none;
}

/* Ensure logos stay centered vertically */
.auto-scroll-gallery .et_pb_gallery_items {
  align-items: center;
}





/* =============================================================================
   SWIPER
   ============================================================================= */

    


/* =============================================================================
   WERKBESCHRIJVING
   ─────────────────────────────────────────────────────────────────────────────
  
   ============================================================================= */
/* SECTION */
.werkbeschrijving {
}



/* CARD */
.werkbeschrijving .et_pb_row {
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid rgba(23, 64, 148, 0.15);
  background: var(--color-white);
  max-width: 135ch;
  box-shadow: 0 2px 12px rgba(23, 64, 148, 0.08);
}

/* BLAUW BLOK */
.testimonial-blok {
    position: relative;
    overflow: visible;
}

.testimonial-blok::before {
    content: "";
    position: absolute;

    width: 80px;
    height: 80px;

    top: -4.5em;
    left: 50%;

    transform: translate(-50%, -50%);

    background-image: url('/wp-content/uploads/2026/05/quote-blauw.svg');
    background-repeat: no-repeat;
 background-position-x: 60%;
background-position-y: 65%;

    z-index: 2;
    background-size:70%;
    background-color: var(--color-white);
    border-radius: 50%;
}
.werkbeschrijving-rij .et_pb_column,
.testimonial-rij .et_pb_column{
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: linear-gradient(
    135deg,
    var(--color-blue),
    var(--color-darkblue)
  );
  border-radius: var(--border-radius-lg);
}
.testimonial-rij .et_pb_column{
  padding-top: var(--space-xl);
}
.werkbeschrijving-rij .et_pb_text_inner h4,
.testimonial-rij .et_pb_text_inner h4{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
        color: var(--color-white);
    text-align:center;
}

.werkbeschrijving-rij .et_pb_text_inner h4::before,
.werkbeschrijving-rij .et_pb_text_inner h4::after,
.testimonial-rij .et_pb_text_inner h4::before,
.testimonial-rij .et_pb_text_inner h4::after {
    content: "";
    flex: 0 0 20px;
    height: 2px;
    background: var(--color-white);
    display: block;
}

/* BLURB: icon naast titel + tekst */
.werkbeschrijving .et_pb_blurb_content {
  display: flex;
  flex-direction: row !important;
  align-items: flex-start;
  gap: var(--space-sm);
  text-align: left;
  max-width: none !important;
}

.werkbeschrijving .et_pb_blurb_content .et_pb_main_blurb_image {
  order: 0;
}

.werkbeschrijving .et_pb_blurb_content .et_pb_blurb_container {
  order: 1;
  flex: 1;
}

/* ICON WRAPPER */
.werkbeschrijving .et_pb_main_blurb_image {
  width: 56px;
  min-width: 56px;
  flex-shrink: 0;
  margin: 0;
  max-width: none !important;
}

.werkbeschrijving .et_pb_image_wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-blue);
  padding: 14px;
  margin: 0;
}

.werkbeschrijving .et_pb_image_wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* TEKST NAAST ICON */
.werkbeschrijving .et_pb_blurb_container {
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* TITEL */
.werkbeschrijving .et_pb_module_header {
  color: var(--color-blue);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-xs);
}

/* INTRO */
.werkbeschrijving .et_pb_blurb_description {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

/* TEKST */
.werkbeschrijving-tekst {
  margin-top: var(--space-sm);
}

.werkbeschrijving-tekst p {
  margin-bottom: var(--space-sm);
  line-height: var(--line-height-loose);
  color: var(--color-black);
}



.werkbeschrijving-blok p,
.testimonial-blok p{
  margin: 0;
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}






/* =============================================================================
   BLOG PAGINA
   ============================================================================= */




/* BLOGS - vaste beeldverhouding blogafbeeldingen */
.blogs .et_pb_post .entry-featured-image-url,
.blogs .et_pb_post .et_pb_image_container,
.blogs .et_pb_post .et_pb_image_container a {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-image: url("https://hradvieshoek.nl/wp-content/uploads/2026/04/gerrie-toetsenbord-1-scaled.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Afbeeldingen binnen blogkaarten netjes croppen */
.blogs .et_pb_post img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
}
.blogs .entry-title,
.blogs .entry-title h2{
    color: var(--color-blue);  
}

/* Als Divi geen thumbnail heeft */
/* BLOGS - no thumb krijgt fake image container */
.blogs .et_pb_post.et_pb_no_thumb::before {
  content: "";
  display: block;
  aspect-ratio: 4 / 3;
  width: 100%;

  background-image: url("https://hradvieshoek.nl/wp-content/uploads/2026/04/gerrie-toetsenbord-1-scaled.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Haal bovenste padding weg zodat fake image flush zit */
.blogs .et_pb_post.et_pb_no_thumb {
  padding-top: 0;
}

/* Trek de fake image naar buiten zodat hij exact gelijk loopt */
.blogs .et_pb_post.et_pb_no_thumb::before {
  content: "";
  display: block;
  aspect-ratio: 4 / 3;
  width: calc(100% + 40px); /* compenseert padding links + rechts */
  margin-left: -20px;
  margin-right: -20px;

  background-image: url("https://hradvieshoek.nl/wp-content/uploads/2026/04/gerrie-toetsenbord-1-scaled.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
    margin-bottom: 20px;
}


/* Lees meer rechts uitlijnen */
.blogs .more-link {
  display: inline-block;
  margin-top: 10px;
  float: right;
  position: relative;
  text-decoration: none;
}

/* Lijntje onder de tekst */
.blogs .more-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 1px;
  background-color: currentColor;
  transition: width 0.3s ease;
}

/* Hover animatie */
.blogs .more-link:hover::after {
  width: 100%;
}

/* Titel bovenaan */
.blogs .et_pb_post.et_pb_no_thumb .entry-title {
  top: 0;
}

/* Content onderaan */
.blogs .et_pb_post.et_pb_no_thumb .post-content {
  bottom: 0;
}


/* Blogheader: geen marge/ruimte bovenaan */
.blogheader,
.blogheader.et_pb_section {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Divi row ook strak bovenaan */
.blogheader .et_pb_row {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Afbeelding klein bovenaan blogpagina */
.blogheader .et_pb_title_featured_container {
  max-height: 180px;
  overflow: hidden;
  margin-top: 0 !important;
}

/* Afbeelding netjes croppen */
.blogheader .et_pb_title_featured_container img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* Titel iets dichter op beeld */
.blogheader .et_pb_title_container {
  padding-top: 16px;
}
.blogheader  {
  margin-bottom:0;
}

/* H1 in blogheader */
.blogheader .entry-title {
  color: var(--color-red);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  margin: 0;
}
/* Intro tekst onder blogheader */
.intro {
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--color-black);
  margin-top: var(--space-sm);
  max-width: 700px;
}


/* BLOG MENU CONTAINER */
.blogmenu .et_pb_post {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* TITEL (blauw + caps) */
.blogmenu-titel h3 {
  color: var(--color-blue);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  position: relative;
}

/* LIJNTJE ONDER TITEL */
.blogmenu .et_pb_widget_title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-blue);
  margin-top: 6px;
}
/* LINKS */
.blogmenu .et_pb_widget_title {
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
}


.blogmenu .entry-title {
  margin: 0;
  font-size: var(--font-size-sm);
}

.blogmenu .entry-title a {
  color: var(--color-black);
  text-decoration: none;
  position: relative;
  display: inline-block;
  transition: color var(--transition-normal);
}

/* HOVER LIJNTJE (lintje) */
.blogmenu .entry-title a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background: var(--color-red);
  transition: width var(--transition-normal);
}

/* HOVER EFFECT */
.blogmenu .entry-title a:hover {
  color: var(--color-blue);
}

.blogmenu .entry-title a:hover::after {
  width: 100%;
}



/* =============================================================================
   CONTACTPAGINA
   ============================================================================= */

.section-contact .wpcf7 input, .section-contact .wpcf7 textarea {
}

/* Contact form 7 radio buttons */
.section-contact .wpcf7-form-control.wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 1rem;
}

.section-contact .wpcf7-list-item {
	margin: 0;
}





/* Checked state */
.section-contact input[type="radio"]:checked {
	border-color: var(--color-blue);
	background: rgba(47, 128, 237, 0.06);
}

.section-contact input[type="radio"]:checked::before {
	transform: translate(-50%, -50%) scale(1);
}

/* Hover */
.section-contact input[type="radio"]:hover {
	border-color: var(--color-blue);
}

/* Focus accessibility */
.section-contact input[type="radio"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.18);
}

/* Contact form 7 radio buttons - contact page */
.section-contact .contact-preference {
    margin-top: var(--space-sm);
}

.section-contact .contact-preference p {
    margin-bottom: var(--space-sm);
}

.section-contact .wpcf7-form-control.wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    align-items: center;
    margin-top: 0.75rem;
}

.section-contact .wpcf7-list-item {
    margin: 0;
}

.section-contact .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
}

/* Contact form 7 radio buttons - contact page */
.section-contact .contact-preference {
    margin-top: var(--space-sm);
}

.section-contact .contact-preference p {
    margin-bottom: var(--space-sm);
}

.section-contact .wpcf7-form-control.wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    align-items: center;
    margin-top: 0.75rem;
}

.section-contact .wpcf7-list-item {
    margin: 0;
}

.section-contact .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
}

/* Radio rondje */
.section-contact input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    min-height: 2rem;
    max-height: 2rem;
    padding: 0;
    margin: 0;
    border: 1px solid var(--color-blue);
    border-radius: 50%;
    background: var(--color-white);
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    flex: 0 0 2rem;
}

/* Binnenste bolletje */
.section-contact input[type="radio"]::before {
    content: "";
    position: absolute;
    inset: 50%;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--color-blue);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease;
}

.section-contact input[type="radio"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
}

.section-contact input[type="radio"]:focus-visible {
    outline: 2px solid rgba(23, 64, 148, 0.35);
    outline-offset: 3px;
}

.section-contact .wpcf7-list-item-label {
    position: static;
    font-size: var(--font-size-base);
    color: var(--color-black);
    line-height: 1.4;
}



.voorwaarden ol {
    list-style-position: outside;
    padding-left: 1.4em;
    margin-left: 0;
}

.voorwaarden li {
    padding-left: 0.3em;
    margin-bottom: 0.75em;
}




/* overlap op home page */

.section-intro {
    position: relative;
    z-index: 1;
}









































/* =============================================================================
   RESPONSIVE OVERRIDES
   Mobile-first: alleen aanvullingen voor grotere schermen.
   ============================================================================= */

@media (max-width: 767px) {

    .hero-form-row {
        margin-top: 0;
        transform: none;
    }

    /* Services: 1 column on mobile */
    .section-services .et_pb_column_1_3 {
        width: 100% !important;
    }

    /* Logo bar: wrap */
    .section-logos .et_pb_column_1_5 {
        width: 33.33% !important;
    }

    /* Bottom bar: stack */
    .section-bottom-bar .et_pb_column {
        width: 100% !important;
        text-align: center !important;
    }

    .footer-disclaimer {
        text-align: center;
        margin-top: var(--space-sm);
    }

    .quote-text {
        font-size: var(--font-size-lg);
    }
}

@media (min-width: 680px) {

    .section-intro {
        padding-top: 80px;
    }

    /* Service cards: 2 columns on tablet */
    .section-services .et_pb_column_1_3 {
        width: 50% !important;
    }

    .service-card .et_pb_column {
        aspect-ratio: 1 / 1;
    }

    /* About: less side padding on tablet */
    .about-text-col {
        padding-left: 0;
        border-right: none;
        padding-top: var(--space-md);
    }

    .footer-disclaimer,
    .section-bottom-bar .et_pb_social_media_follow {
        text-align: right;
    }

    .foot p {
        text-align: left;
    }

    .section-bottom-bar .et_pb_social_media_follow {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
}
/* Desktop: terug naar zwevende kaart over volledige hero */
@media (min-width: 981px) {

    
}


@media (min-width: 980px) {

    .et_pb_section.section-hero,
        .section-hero {
            min-height: 50dvh;
            padding: 60px 20px;
            background-size: cover;
            background-position: left top;
            background-color: transparent;
        }
    
        .section-hero .et_pb_row {
            width: 80%;
            max-width: 1080px;
            margin: auto;
            display: flex;
        }
    
        .section-hero .et_pb_column_empty {
            display: block;
        }
    
        .hero-row {
            margin-top: var(--space-md);
        }
    
        .hero-card {
            width: auto;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-lg);
            margin-top: 8.5em;
            margin-bottom: -20em;
        }

    .section-hero .hero-row,
        .section-hero .et_pb_row.hero-row {
            width: min(90%, 1280px) !important;
            max-width: 1280px !important;
            margin: 0 auto !important;
            display: flex !important;
            justify-content: flex-end !important;
            align-items: flex-start !important;
        }
    
        .section-hero .hero-card {
            flex: 0 0 38% !important;
            width: 38% !important;
            max-width: 560px !important;
            min-width: 420px;
            margin-top: 10em !important;
            margin-bottom: -20em !important;
            margin-left: auto !important;
            margin-right: 0 !important;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-lg);
        }

    .blogheader .et_pb_title_featured_container,
    .blogheader .et_pb_title_featured_container img {
        height: 240px;
        max-height: 240px;
    }
}

@media (min-width: 1280px) {

    .blogheader .et_pb_title_featured_container,
    .blogheader .et_pb_title_featured_container img {
        height: 300px;
        max-height: 300px;
    }
}