/*
Theme Name:   Deep Current 2025 - Client Child Theme
Theme URI:    http://www.webinzicht.nl/
Description:  The theme for Deep Current. To function correctly this Client Child Template needs the parent theme 'WP WIZ Theme 22' to be installed. Please do not remove this theme or its parent theme. Updates are not necessary for the client child template. 
Author:       Web Inzicht - (digital) design & communication
Author URI:   https://webinzicht.nl
Template:     wpwebinzicht22
Version:      1.0.000001
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         custom template, responsive-layout, accessibility-ready
Text Domain:  wpwebinzicht22child
*/



/* -------------------------------------------------------------------*/
/* -- Local Fonts (EXAMPLE) ----------------------------------------- */
/* -------------------------------------------------------------------*/

/* Primary Font */

@font-face {
  font-family: 'Rajdhani-Regular';
  font-weight: 400;
  src:  url('assets/fonts/Rajdhani-Regular.woff2') format('woff2'),
        url('assets/fonts/Rajdhani-Regular.woff') format('woff');
}

/* Pixel Font */

@font-face {
  font-family: 'PressStart-Regular';
  font-weight: 300;
  src:  url('assets/fonts/PressStart2P-Regular.woff2') format('woff2'),
        url('assets/fonts/PressStart2P-Regular.woff') format('woff');
}


/* -------------------------------------------------------------------*/
/* -- Variables ----------------------------------------------------- */
/* -------------------------------------------------------------------*/
:root { 

    /* -- FONTS -- */ 

    --global-font-primary:          Rajdhani-Regular, arial, helvetica, sans-serif;
    --global-font-secondary:        var(--global-font-primary); 

    --global-font-pixel:            PressStart-Regular, Verdana, sans-serif;        

    --global-font-size-basic:       16px; 

    --global-font-size-regular:     clamp(1.1rem, 1.0308rem + 0.3692vw, 1.4rem);
    --global-font-size-menu:        1.6rem;

    --global-font-size-xlarge:      3.75rem;
    --global-font-size-large:       clamp(1.2rem, 1.0731rem + 0.6769vw, 1.75rem);
    --global-font-size-small:       1.2rem;
    --global-font-size-xsmall:      0.85rem; 

    --global-font-h1:               clamp(1rem, 0.3077rem + 3.6923vw, 4rem);
    --global-font-h2:               clamp(1rem, 0.7692rem + 1.2308vw, 2rem);

    --global-font-slogan:           clamp(1rem, 0.9077rem + 0.4923vw, 1.4rem);

    --global-font-weight-light:     300;
    --global-font-weight-bold:      700;
   
    
    /* -- COLORS -- */
    
    --global-color-orange:      #f18721;
    --global-color-purple:      #4826c6;
    --global-color-darkblue:    #000415;
    --global-color-lightblue:   #3782bf;

    /* EXTRA BLUE? */
    --global-color-navy:     #0a0f2a;
    --global-color-slate:    #1b1f2d;
    --global-color-steel:    #223148;
    --global-color-grayblue: #0a1221;

    --global-color-black:       #000000;
    --global-color-white:       #FFFFFF;
    --global-color-charcoal:    #3F3934;
    --global-color-brightgreen: #00ff00;
    --global-color-brightred:   #ff0000;


    --bgcolorpagediv:           rgba(0, 4, 21, 0.75); 
    /* darkblue (000415)  */
    --bgcolorhomeblocks:        var(--global-color-darkblue);


    --global-color-body:        var(--global-color-black);   
    --global-color-pagediv:     var(--bgcolorpagediv);
    --global-color-alltext:     var(--global-color-white);

    --global-color-navlink:     var(--global-color-orange);
    --global-color-navlink-hov: var(--global-color-white);

    
    /* -- BUTTON & ELEMENT COLORS -- */
    --global-color-button:      var(--global-color-orange);
    --global-color-buthov:      var(--global-color-purple);
    --global-color-buttxt:      var(--global-color-white);

    --global-color-circle:      var(--global-color-charcoal);
    --global-color-circle2:     var(--global-color-purple);
    --global-color-circle3:     var(--global-color-purple);

    --global-color-accentgood:  var(--global-color-brightgreen);
    --global-color-accentbad:   var(--global-color-brightred);

    /* -- TYPOGRAPHIC ELEMENTS -- */
    --global-color-h1:          var(--global-color-purple);
    
   
    /* -- MEASURES -- */
    
    --global-width-max:         100vw;
    --global-width-100:         100%;       
    --global-height-max:        100vh;
    --global-height-100:        100%;        
    
    --global-maxw1-pagediv:     100%;      /* full width content */
    --global-maxw2-pagediv:     1600px;    /*  max width content 1200px */
    --global-outermargin:       4rem;      /*       outer margin */ 
    
    --global-width-pagediv:     calc(var(--global-maxw2-pagediv) - var(--global-outermargin));
    --global-maxwidth-pagediv:  calc(var(--global-maxw1-pagediv) - var(--global-outermargin));

    --global-minimumscreen:     300px;


    /* -- PAGE MARGINS -- */

    --global-pagepadding-top:    4rem;
    --global-pagepadding-left:   clamp(1rem, 4rem, 6rem);
    --global-pagepadding-right:  clamp(1rem, 3rem, 4rem);
    --global-pagepadding-bottom: 4rem;
    
    /* -- general spacing -- */

    --global-padding:           2rem;
    --global-hpadding:          2rem;
    --global-vpadding:          2rem;

    --global-padding-xl:        5rem;
    --global-padding-s:         1rem;
    
    /* -- Sizes of elements -- */

    --global-logo-size:         100px;  
    --global-header-height:     calc(var(--global-logo-size) + var(--global-padding) + var(--global-padding)  ); 
    /* --global-header-height:     170px; */

    --global-circle-size:       140px;
    --global-circle-size2:      140px;
    --global-circle-size3:      240px;
    --global-circle-stroke:     12px;
    --global-circle-stroke2:    2px;
    --global-circle-stroke3:    2px;
    --global-circle-padding:    180px;

    --global-max-txtwidth:      calc(var(--global-maxw2-pagediv) - 50%);

    /* -- BORDERS ETC -- */
    --global-border-button:     1px solid var(--global-color-buthov);

    --global-border-radius:     1rem;
    
    
    /* -- DEV OPTIONS -- */
    
    --dev-border-01:            1px solid red;
    --dev-border-02:            1px solid blue;
    --dev-border-03:            1px solid green;
    --dev-border-04:            1px solid gold;
    --dev-border-05:            1px solid silver;
    --dev-bg-01:                red;
    --dev-bg-02:                blue;
    --dev-bg-03:                green;
    --dev-bg-04:                gold;
    --dev-bg-05:                silver;
    
}
    
div.devinfo {

    display:                block; 

    z-index:                1000;
    position:               fixed;
    bottom:                 50%;
    left:                   10px;

    width:                  300px;
    min-height:             100px;

    border:                 var(--dev-border-05);
    background-color:       var(--dev-bg-05);
    border-radius:          5px;
    padding:                1rem;

    color:                  black;

}

/* -------------------------------------------------------------------*/
/* -- RESET --------------------------------------------------------- */
/* -------------------------------------------------------------------*/

html {
    scroll-behavior: smooth;
}


body {
/*  all:                    initial; */ /* THIS BREAKS THE PAGE EDITOR H1 field!! */ 

    /* font-family:            var(--global-font-primary); */
    font-family:            var(--global-font-primary);

    font-size:              var(--global-font-size-basic);

    margin:                 0;
    padding:                0;

    color:                  var(--global-color-alltext);
}

body, div, header, main, article, section, ul, li {
    box-sizing:             border-box;
}

h1, h2, h3, h4, h5, h6 {
/*  all:                    initial; */ /* THIS BREAKS THE PAGE EDITOR H1 field!! */   
    font-family:            var(--global-font-primary); 
    margin: 0;
    padding: 0;
   
}

nav ul {
    list-style-type:        none;
    margin:                 0;
    padding:                0;
}


a, a strong  {
    color:                  var(--global-color-navlink);
    text-decoration:        none;
}


a:hover, a:hover strong {
    color:                  var(--global-color-navlink-hov);
}

/* -------------------------------------------------------------------*/
/* -- ACCESABILITY -------------------------------------------------- */
/* -------------------------------------------------------------------*/


a.skip-link:not(:focus):not(:focus-within) {

    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important;   

}


a.skip-link {
    position: fixed!important;
    z-index: 9999;
    top: 15px;
    left: 15px;
    padding: 10px;
    text-decoration: none;

}


/* -------------------------------------------------------------------*/
/* -- BASIC BLOCKS -------------------------------------------------- */
/* -------------------------------------------------------------------*/


body {

    width:                  var(--global-width-max);
    max-width:              var(--global-width-100);
 
    background-color:       var(--global-color-body);

    background-image:       url("https://deepcurrent.no/placeholder/images/AdobeStock_330476190.jpeg");

    background-position:    center center;
	background-size:        cover;
	background-repeat:      no-repeat;

    background-attachment: fixed;

}


body {
	animation: driftBackground 10s ease-in-out infinite alternate;
	background-attachment: fixed;
  }
  
  @keyframes driftBackground {
	0% {
	  background-position: center center;
	}
	100% {
	  /* background-position: 52% 48%; */
	  background-position: 60% 40%;
	}
  }




div.pagediv {

    display:                flex;   /* we need flex to push footer down */
    flex-direction:         column;

    width:                  var(--global-width-pagediv);
    max-width:              var(--global-maxwidth-pagediv);
    
    min-height:             var(--global-height-max);   /* content reaches to bottom */

    margin:                 auto;   /* centered content */

    margin-top:             var(--global-pagepadding-top);
    margin-bottom:          var(--global-padding);

    font-size:              var(--global-font-size-regular);

    background-color:       var(--global-color-pagediv);

    border-radius:          var(--global-border-radius);


}

body.home div.pagediv {

    margin-top:             0px;
}


/* Copy Box */

div.footercopyblock {

    display:                flex;
    justify-content:        right;     /* horizontal */
    align-items:            center;     /* vertical */

    width:                  var(--global-width-pagediv);
    max-width:              var(--global-width-100);

    margin:                 auto;   /* centered content */

    margin-bottom:          var(--global-vpadding); 

    padding-right:          var(--global-pagepadding-right);

    font-size:              var(--global-font-size-xsmall);

    /* background-color:       green; */

}



/* -------------------------------------------------------------------*/
/* -- Header & Menu ------------------------------------------------- */
/* -------------------------------------------------------------------*/

/* --- NAV SVG ELEMENTS ----------------------------------------------*/

svg.mnubutton {
    width:                  32px;
    height:                 32px;

    background-color:       var(--global-color-button); 
    border-radius:          5px;
    cursor:                 pointer;
}

svg.mnubutton {
    fill:                   var(--global-color-buttxt);
}


svg.mnubutton:hover, svg.mnubutton:focus {  
    fill:                   var(--global-color-buttxt);
    background-color:       var(--global-color-buthov); 
}


/* --- NAV MENU ELEMENTS ---------------------------------------------*/


header.mainheader div.headerwrapper {

    height:                 var(--global-header-height);

    display:                flex; 
    flex-direction:         row;
    flex-wrap:              nowrap;

    justify-content:        space-between;

    padding:                var(--global-padding);
    padding-left:           var(--global-pagepadding-left);
    padding-right:          var(--global-pagepadding-right);

    background-color:       var(--global-color-darkblue);
    /* background-color:       black; */
    /* background-image:       linear-gradient(to top left, var(--global-color-darkblue), rgba(255,255,255,0.1)); */

    border-radius:          var(--global-border-radius);
}

div.logoblock-wrap {

    width:                  max-content;
    height:                 max-content;

    background-repeat:      no-repeat;
    background-size:        contain;

    /* border:                 var(--dev-border-05); */

}

.custom-logo {
    height: var(--global-logo-size);
    width: auto;
    display: block;
}

div.navblock {

    display: flex;
    justify-content: right;

    padding-top:            var(--global-vpadding);
    padding-right:          var(--global-pagepadding-right);

}

div.navblock ul.menu-wrapper {

    display:                flex;
    flex-direction:         row;
    justify-content:        flex-end;

}

div.navblock ul.menu-wrapper li {

    margin-left:            var(--global-hpadding);
}

.secondary-menu-container {

    margin-bottom:          var(--global-vpadding);
}

.primary-menu-container {
    
    font-weight:            bold;

}


/* PRIMARY NAV ELEMENTS */

nav.primary-navigation.show,
nav.primary-navigation.show.appear {

    /* position:               absolute; */
    position:               fixed !important;

    left:                   0px;
    top:                    0px;
    
    z-index:                5000;
    width:                  75%;
    height:                 100%;

    padding-top:            2rem;

    background-color:       var(--global-color-navy);
    
}

nav.primary-navigation.show ul.menu-wrapper,
nav.primary-navigation.show.appear ul.menu-wrapper {

    display:                flex;
    flex-direction:         column;
    justify-content:        right;

    line-height:            2rem;

}

/* --------------------------------------- */
/* --- Mobile menu base (hidden state) --- */
@media (max-width: 1023px) {
    nav.primary-navigation {
        opacity: 0;
        transform: translateX(-100%);  /* slightly above */
        transition: opacity 0.35s ease, transform 0.35s ease;
        pointer-events: none;          /* unreachable when closed */
    }

    /* --- When JS adds .show (menu becomes displayable but still animates) --- */
    nav.primary-navigation.show {
        pointer-events: auto;
    }

    /* --- When JS adds .appear (after 10ms delay) → animate to final state --- */
    nav.primary-navigation.show.appear {
        opacity: 1;
        transform: translateX(0); /* slide in */
    }
}
/* --------------------------------------- */

nav.primary-navigation a, .primary-menu-container a:visited {

    color:                  var(--global-color-white);
    font-size:              var(--global-font-size-menu);
    font-weight:            var(--global-font-weight-bold);
    text-decoration:        none;
    
}

nav.primary-navigation li.current-menu-item > a,
nav.primary-navigation li.current_page_parent > a,
nav.primary-navigation li.current_page-ancestor > a,
nav.primary-navigation a:hover {

    color:                  var(--global-color-orange);
    
}



/* -------------------------------------------------------------------*/
/* -- NAV SWITCH Mobile / Desktop EXAMPLE --------------------------- */
/* -- No media query in main template for ease of use ----------------*/
/* -------------------------------------------------------------------*/

/* --- MOBILE  <  1023        ------------------------------*/

@media (max-width: 1023px) {


    nav.primary-navigation {
        display: none;
    }

    nav.primary-navigation.show {
        display: block;
    }

    button.mobileswitch {
         display: none;
    }

    button.mobileswitch.show {
         display: block;
    }

}


/* --- DESKTOP  >   1023      ------------------------------*/

@media screen and (min-width: 1023px) {


    button.mobileswitch {
         display: none;
    }
    
    nav.primary-navigation {
        display: block;
    }

}

/* --- MarkUp of the button ------------------------------*/

span.sr-only { 
    display: none;
}

button.mobileswitch {

    background-color: rgba(0,0,0,0.0); 
    border: 0px;
    
}


/* -------------------------------------------------------------------*/
/* -- Image Basics  ------------------------------------------------- */
/* -------------------------------------------------------------------*/


.wpt22featimage {
    width:                  var(--global-width-100);
    height:                 400px;

    background-repeat:      no-repeat;
    background-size:        cover;
    background-position:    center;

    background-color:       var(--dev-bg-05);
    border:                 var(--global-color-h1);

}

.wpt22featimage img.bigimage {

    height:                 100%;
    width:                  100%;

    object-fit:             cover;
    object-position:        center center;
   
    background-color:       var(--dev-bg-05);


}

.wpt22featimage-thumb {

    height:                 150px;
    width:                  150px;

    background-repeat:      no-repeat;
    background-size:        cover;
    background-position:    center;

    background-color:       var(--dev-bg-05);

}

/* -------------------------------------------------------------------*/
/* -- Main Blocks   ------------------------------------------------- */
/* -------------------------------------------------------------------*/

div.bigimage {

    display: none;
}


main.site-main {

    padding-top:         var(--global-pagepadding-top);
    padding-left:        var(--global-pagepadding-left);
    padding-right:       var(--global-pagepadding-right);
    padding-bottom:      var(--global-pagepadding-bottom);

    /* background-color:    var(--global-color-darkblue); */
}

div.footerblock {

    margin-top:         auto; /* pushes footer to the bottom */
    
    display:            flex;
    flex-direction:     column; /* stack vertically by default */

    padding:            var(--global-padding);
    padding-left:       var(--global-pagepadding-left);
    padding-right:      var(--global-pagepadding-right);

    background-color:   var(--global-color-darkblue);
    /* background-image:   linear-gradient(to bottom right, var(--global-color-darkblue), rgba(255,255,255,0.2)); */

    border-radius:          var(--global-border-radius);
}

.footermenublock {
  order: 1;
}

.widgetsblock {
  order: 2;
}

.footercopyblock {
  order: 3;
}

/* -------------------------------------------------------------------*/
/* -- Footer Blocks   ----------------------------------------------- */
/* -------------------------------------------------------------------*/


.footermenublock .footer-menu-container ul {
    
    display:                flex;
    flex-wrap:              wrap;
    justify-content:        left;

    padding-top:            var(--global-vpadding);
    padding-bottom:         var(--global-vpadding);

    font-weight:            var(--global-font-weight-bold);
}

.footermenublock .footer-menu-container ul li {

    margin-right:            var(--global-hpadding);

}

.footermenublock .footer-menu-container ul li a {

    color:                  var(--global-color-navlink);
    text-decoration:        none;
}

.footermenublock .footer-menu-container ul li.current-menu-item > a,
.footermenublock .footer-menu-container ul li.current-page-ancestor > a,
.footermenublock .footer-menu-container ul li a:hover {

    color:                  var(--global-color-navlink-hov);

}

/* WIDGETS */
/* SEARCH BOX */

section.widget_search {

    display: none;

}

/* ADDRESS */

section#block-7 {

    font-size: var(--global-font-size-regular);
    text-transform: uppercase;
    
}

section#block-7 strong {

    color:  var(--global-color-orange);
    
}




/* -------------------------------------------------------------------*/
/* Basic Elements */
/* -------------------------------------------------------------------*/


h1 {
    
    font-size: var(--global-font-h1);
    color: var(--global-color-purple);

    text-transform: uppercase;
} 

h2 {
    
    font-size: var(--global-font-h2);
    
    color:  var(--global-color-orange);
    /* color: var(--global-color-purple); */
   
} 

strong {

    color:  var(--global-color-orange);

}

/* WP BASIC BUTTON */

.wp-block-buttons .wp-block-button {
    margin-right: var(--global-padding);
}

div.wp-block-button .wp-block-button__link {

    display: inline-flex;
    flex: 1 1 400px;
    justify-content: center;
    align-items: center;

    /* min-width:         400px; */

    margin-top:         var(--global-padding);
    margin-bottom:      var(--global-padding);


    background-color:   var(--global-color-purple); 
    color:              var(--global-color-white);
    font-weight:        var(--global-font-weight-bold);

    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;

}

div.wp-block-button .wp-block-button__link:hover {
    background-color:   var(--global-color-orange);
    color:              var(--global-color-darkblue);
    transform:          translateY(-1px); 
}

/* -------------------------------------------------------------------*/
/* --- HOMEPAGE ------ */
/* -------------------------------------------------------------------*/


/* --- CSS ANIMATION FOR THE HOME LOGO & SLOGAN --- */
  
  @keyframes pulse {
	0%, 100% {
	  transform: scale(1);
	}
	50% {
	  transform: scale(1.05);
	}
  }


  @keyframes pulse2 {
	0%, 100% {
	  transform: scale(1);
	}
	60% {
	  transform: scale(1.03);
	}
  }

/* --- THE HOME LOGO POSITIONING --- */

div.tophalf {

	width: 100%;
    height: calc(100vh - var( --global-header-height));

    display: flex;
    justify-content: center;
    align-items: center;

    /* slow scroll (see js) */
    will-change: opacity;
    transition: opacity 0.15s linear;

    /* border: 1px solid red; */
}

.tophalf.hidden {
    pointer-events: none;
    visibility: hidden;
}

.logo-slogan {
	
	
    width: 90%;
    height: 90%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* border: 1px solid yellow; */
		
}	



.logocolumn {

    max-width: 500px;
    min-width: 300px;

    /* border: 1px solid orange; */

}

.logobox {
	
    /* 1:1 Aspect Ratio - width & padding-top hack */
    width:                  100%;
    padding-top:            100%; 
  
 	background-image:       url("https://deepcurrent.no/placeholder/images/DeepCurrentLogo-Vertical-RGB.png");
	background-position:    center center;
	background-size:        contain;
	background-repeat:      no-repeat;
	
}

.pulse-wrapper {
	animation: pulse 7s ease-in-out infinite;
    /* Keyframes above */
}

.slogan {
	
	text-align:         center;
	text-transform:     uppercase;
	
	word-spacing:       0.2rem;
	letter-spacing:     0.2rem;
	

    font-size:          var(--global-font-slogan);
    font-weight:        var(--global-font-weight-bold);

    /* border: 1px solid orange; */

    animation: pulse2 12s ease-in-out infinite;
    /* Keyframes above */

}



.slogan span {

}



/* ------ Home H1 ------ */

body.home header h1 {
    display:            none;
}

body.home h1 {
    color:            var(--global-color-orange);
    font-size:        clamp(1rem, 0.5385rem + 2.4615vw, 3rem);
    line-height:      1.1;  

    margin-bottom:    var(--global-pagepadding-bottom);
}


/* ------ content blocks ------ */

.homemainblock {


    margin-top:         calc(var(--global-vpadding) * 2);
    margin-bottom:      calc(var(--global-vpadding) * 3);

    padding:            var(--global-padding-xl);

    padding-bottom:     var(--global-pagepadding-bottom);

    border:             0px solid blue;
    border-radius:      2rem;

    background-color:   var(--bgcolorhomeblocks);


}

/* ----------------- STATISTICS ------------------------- */

#home-first-section .wp-block-buttons {

    padding-bottom:         var(--global-pagepadding-bottom);
}

.dc-kpi-wrapper {
  display:                  grid;
  grid-template-columns:    repeat(auto-fit, minmax(160px, 1fr));
  gap:                      40px;
  max-width:                90%;
  margin:                   0 auto;
  padding:                  20px 0;
}

.dc-kpi {
  text-align:               center;
}

.dc-kpi-circle {
  --size:           var(--global-circle-size);
  --stroke:         var(--global-circle-stroke);
  --accent:         var(--global-color-accentgood); 
  --charcoal:       var(--global-color-circle); 

  width:            var(--size);
  height:           var(--size);
  border-radius:    50%;
  position:         relative;
  margin:           0 auto var(--global-circle-stroke);
  
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        var(--global-font-size-large);
  font-weight:      600;
  color:            var(--global-color-brightgreen);
}

.dc-kpi-circle span {
  position:         relative;
  z-index:          2;
}

.dc-kpi-circle::before {
  content:          "";
  position:         absolute;
  inset:            0;
  border-radius:    50%;
  background:       conic-gradient(var(--accent) var(--fill), var(--charcoal) var(--fill));
}

.dc-kpi-circle::after {
  content:              "";
  position:             absolute;
  width:                calc(var(--size) - 2 * var(--stroke));
  height:               calc(var(--size) - 2 * var(--stroke));
  background:           var(--bgcolorhomeblocks);
  border-radius:        50%;
  z-index:              1;
}

/* Percentages */
.dc-kpi-circle.p70 { --fill: 70%; }
.dc-kpi-circle.p60 { --fill: 60%; }
.dc-kpi-circle.p99 { --fill: 99%; }
.dc-kpi-circle.p30 { --fill: 30%; }

.dc-kpi-label {
  font-size:            var(--global-font-size-small);
  color:                var(--global-color-alltext);
  margin:               0;
}

/* ----------------- CLIENT QUOTES ---------------------- */

div.homequotesbox {

    justify-content:    space-between;
    align-items:        stretch;
    gap:                1rem;

    min-width:         var(--global-minimumscreen);
}

div.homequotesbox > .wp-block-column   {

    padding:            1rem;

    border:             1px solid var(--global-color-grayblue);
    border-radius:      1rem;

    background-color:   var(--global-color-grayblue);
}

/* Pullquote styling: insert large modern Unicode marks */
.wp-block-pullquote blockquote p {

    position:           relative;
    padding-left:       var(--global-padding);
    padding-right:      var(--global-padding);
}

/* Opening ❝ */
.wp-block-pullquote blockquote p::before {

    content:            "❝";
    position:           absolute;
    left:               0;
    top:                -10px;
    font-size:          var(--global-font-size-xlarge);
    line-height:        1;
    color:              var(--global-color-orange);
    font-weight:        var(--global-font-weight-bold);
}

/* Closing ❞ - switched off */
.wp-block-pullquote blockquote p::after {

    content:            "❞";
    content:            "";
    position:           absolute;
    right:              0;
    bottom:             -10px;
    font-size:          var(--global-font-size-xlarge);
    line-height:        1;
    color:              var(--global-color-orange);
    font-weight:        var(--global-font-weight-bold);
}


/* ----------------- THE TOOLS (Circles) ---------------------- */

.nothomemainblock.toolsblock ul.wp-block-list,
.homemainblock.toolsblock ul.wp-block-list {
   margin: 0;
   padding: 0;
}

/* Container spacing */
.nothomemainblock.toolsblock .wp-block-list li,
.homemainblock.toolsblock .wp-block-list li {

    list-style:             none;
    position:               relative;
    padding-left:           var(--global-circle-padding); /* enough space for the circle */
    min-height:             calc(var(--global-circle-size2) + 20px);   /* ensures alignment with the circle size */
    display:                flex;
    align-items:            center;

    max-width:              var(--global-max-txtwidth);
}

.nothomemainblock.toolsblock .wp-block-list li.documus::before,
.homemainblock.toolsblock .wp-block-list li.documus::before {
    background-image:       url("/2025/wp-content/themes/wpwebinzicht22-child/assets/images/dcpix-documus-portrait1.png"); 
}

.nothomemainblock.toolsblock .wp-block-list li.ada::before,
.homemainblock.toolsblock .wp-block-list li.ada::before {
    background-image:       url("/2025/wp-content/themes/wpwebinzicht22-child/assets/images/dcpix-ada-basic.png"); 
}

/* The circle */
.nothomemainblock.toolsblock .wp-block-list li::before,
.homemainblock.toolsblock .wp-block-list li::before {

    content:                "";
    position:               absolute;
    left:                   0;
    top:                    50%;
    transform:              translateY(-50%);

    width:                  var(--global-circle-size2);     /* same as --size in KPI circles */
    height:                 var(--global-circle-size2);
    border-radius:          50%;
    
    background-color:       var(--bgcolorhomeblocks);            
    background-size:        cover;
    background-position:    center;
    background-repeat:      no-repeat;

    box-shadow:             0 0 0 var(--global-circle-stroke2) var(--global-color-circle2); 
}


.dc-circle-link {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    width: 140px;
    height: 140px;
    border-radius: 50%;
    z-index: 5;

    text-indent: -9999px; /* hide text */
}


/* -------------------------------------------------------------------*/
/* --- SOLUTIONS ------ */
/* -------------------------------------------------------------------*/

.nothomemainblock.toolsblock {

    margin-top:         var(--global-pagepadding-top);
    max-width:          var(--global-max-txtwidth);

}

.nothomemainblock.toolsblock .wp-block-list {

    margin-top:         var(--global-pagepadding-top);

}

/* -------------------------------------------------------------------*/
/* --- SOLUTIONS -- ADA & DOCUMUS ------ */
/* -------------------------------------------------------------------*/

.wp-block-media-text.productpassport {

    margin-top: 4rem;
    margin-bottom: 6rem;

    display: grid;
    grid-template-columns: auto 1fr; /* image width + flexible content */   
    grid-template-rows: auto;
    column-gap: 0rem; /* optional spacing */
    align-items: left; /* optional: vertically align */

    font-size:   var(--global-font-size-large);   

}

.wp-block-media-text__media img {

    width:              var(--global-circle-size3);
    height:             var(--global-circle-size3);
    border-radius:      50%;

    object-fit:         cover;
    object-position:    center;

    background-color:   var(--bgcolorhomeblocks);
    box-shadow:         0 0 0 var(--global-circle-stroke3) var(--global-color-circle3); 

    display:            block;
}

/* -------------------------------------------------------------------*/
/* --- RESOURCES -  POSTS PAGE ------ */
/* -------------------------------------------------------------------*/

.thearticle.list {

    margin-top:             4rem;
}


/* Circular post thumbnails */

.thearticle.list .wpt22featimage-thumb {

    width:                  var(--global-circle-size2);
    height:                 var(--global-circle-size2);
    border-radius:          50%;

    background-size:        cover;
    background-position:    center;
    background-repeat:      no-repeat;

    background-color:       var(--bgcolorhomeblocks);
    box-shadow:             0 0 0 var(--global-circle-stroke3) var(--global-color-circle3);

    /* margin-bottom:      16px; */
}

/* Convert post block to a 2-column grid */
.thearticle.list .post-list-block {

    display:                grid;
    grid-template-columns:  auto 1fr; /* image, then text column */
    grid-template-rows:     auto auto;  /* title row + excerpt row */
    
    column-gap:             24px;
    row-gap:                6px;
    margin-bottom:          40px;
    align-items:            start;

}

/* First <a> (the image link) spans 2 rows */
.thearticle.list .post-list-block > a:first-child {
    grid-row:               1 / span 2; /* occupy row 1 AND 2 */
    grid-column:            1;        /* left column */
}

/* Second <a> (title) stays in row 1, column 2 */
.thearticle.list .post-list-block > a:nth-child(2) {
    grid-row:               1;
    grid-column:            2;
}

/* <p> excerpt goes to row 2, column 2 */
.thearticle.list .post-list-block > p {
    grid-row:               2;
    grid-column:            2;
}



/* -------------------------------------------------------------------*/
/* --- CONTACT ------ */
/* -------------------------------------------------------------------*/

div.form-address-div-contact > div {


    display:            flex;
    flex-direction:     row;
    flex-wrap:          wrap;
    justify-content:    space-between;
    align-items:        flex-start;
    gap:                0rem;


    width:              100%;


}

div.form-address-div-contact > div > div {


    width:              50%;
    min-width:          300px;

}


div.google-map-div-contact {

    margin:             0;
    padding:            0;

    margin-left:        calc(var(--global-pagepadding-left) * -1);
    margin-right:       calc(var(--global-pagepadding-right) * -1);
    margin-bottom:      calc(var(--global-pagepadding-bottom) * -1);

    filter: grayscale(100%) sepia(100%) hue-rotate(180deg) saturate(500%) brightness(80%);
    transition: filter 0.6s ease; /* duration + easing */


    border: 0px solid red !important;

    background-color:   var(--global-color-darkblue1);
    
}

div.google-map-div-contact:hover {

     filter: grayscale(00%) sepia(00%) hue-rotate(00deg) saturate(100%) brightness(100%);
}



/* -------------------------------------------------------------------*/
/* --- COOKIE BANNER SYSTEM ------ */
/* -------------------------------------------------------------------*/


/* bar */
#dc-consent-bar {

    display:            none;
    position:           fixed;
    z-index:            99999;
    
    bottom:             0;
    left:               0;
    right:              0;

    min-height:         var(--global-header-height);
    
    background-color:   var(--bgcolorpagediv);
    color:              var(--global-color-alltext);
    
}

.dc-consent-inner {

    width:              var(--global-width-pagediv);
    max-width:          var(--global-maxwidth-pagediv);
    margin-left:        auto;
    margin-right:       auto;
    padding-top:        1rem;
    padding-left:       var(--global-pagepadding-left);
    padding-right:      var(--global-pagepadding-right);
    background-color:   var(--global-color-darkblue);
    
    font-size:          var(--global-font-size-small);

}

.dc-external-placeholder button,
.dc-popup-inner button,
.dc-consent-buttons button {

    padding:            0.65rem;
    margin-right:       1rem;

    font-size:          var(--global-font-size-xsmall);
    font-weight:        var(--global-font-weight-bold);
    color:              var(--global-color-darkblue);

    cursor:             pointer;

    background-color:   var(--global-color-button);
    border:             none;
    border-radius:      9999px;


}

.dc-external-placeholder button,
.dc-popup-inner button:hover,
.dc-consent-buttons button:hover {

    color:              var(--global-color-white);
    background-color:   var(--global-color-buthov);
}

/* popup */
.dc-consent-popup {

    display:            none;
    position:           fixed;
    inset:              0;
    background-color:   rgba(0,0,0,0.65);
    z-index:            99999;
    align-items:        center;
    justify-content:    center;
}

.dc-popup-inner {

    background-color:   var(--global-color-darkblue);
    border-radius:      var(--global-border-radius);
    border:             1px solid var(--global-color-grayblue);
    padding:            30px;
    width:              90%;
    max-width:          600px;

    font-size:          var(--global-font-size-small);
    text-align:         left;
}





/* placeholder */
.dc-external-embed {
    position:               relative;
    width:                  100%;
    min-height:             350px;
}
.dc-external-placeholder {
    width:                  100%;
    height:                 100%;
    background-color:       var(--global-color-charcoal);
    color:                  var(--global-color-alltext);
    border-radius:          var(--global-border-radius);
    padding:                1rem;
    display:                flex;
    flex-direction:         column;
    gap:                    1rem;
    align-items:            center;
    justify-content:        center;
    text-align:             center;
}

/* loaded iframe */
.dc-external-embed iframe {
    width:                  100%;
    height:                 100%;
    border:                 0;
    display:                block;
}

/* correct responsive aspect-ratio wrapper for iframe */
.dc-external-embed {
    position:               relative;
    width:                  100%;
    overflow:               hidden;
    background-color:       var(--global-color-charcoal);
}

/* default 16:9 ratio — ensures stable height */
.dc-external-embed::before {
    /* content: ""; */
    /* display: block; */
    /* padding-top: 56.25%;  */
}

/* placeholder fills wrapper */
.dc-external-placeholder {
    position:               absolute;
    inset:                  0;
    padding:                1rem;
    background:             var(--global-color-charcoal);
    color:                  var(--global-color-alltext);
    display:                flex;
    flex-direction:         column;
    gap:                    1rem;
    align-items:            center;
    justify-content:        center;
    text-align:             center;
    border-radius:          1rem;
}

/* iframe fills wrapper */
.dc-external-embed iframe {
    position:               absolute;
    inset:                  0;
    width:                  100%;
    height:                 100%;
    border:                 0;
    display:                block;
}

/* ------------------------------------------------------------------- */
/* ------- RESPONSIVE SECTION ---------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------- Tablets                                                     */
/* ------------------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 601px) {

:root { 


}

/* GENERAL */


/* HOME */



}
/* ------------------------------------------------------------------- */
/* ------- Phones                                                      */
/* ------------------------------------------------------------------- */
@media (max-width: 600px) {

:root { 

    --global-outermargin:       2rem;
    --global-logo-size:         75px;

    --global-pagepadding-left:  1rem;
    --global-pagepadding-right: 1rem;
    --global-padding-xl:        1rem;

}

/* -- GENERAL -- */


/* -- HOME -- */

div.tophalf {
    height: 100vh;
}

.slogan span {

    display: none;

}


div.wp-block-button .wp-block-button__link {

    width:             100%; 
    max-width:         400px;

}

  /* LI becomes vertical */
  .nothomemainblock.toolsblock .wp-block-list li,
  .homemainblock.toolsblock .wp-block-list li {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0;
    min-height: auto;
  }

  /* Circle goes on top, centered */
  .nothomemainblock.toolsblock .wp-block-list li::before,
  .homemainblock.toolsblock .wp-block-list li::before {
    /* position: relative; */
    left: auto;
    top: auto;
    transform: none;
    margin-top: 1rem;
    margin-bottom: 1rem;

  }

  /* The transparent clickable link must also move */
  .dc-circle-link {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }


}
/* ------------------------------------------------------------------- */