/* 
Theme Name: The Studio Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Studio Child is a child theme of The Studio
Author: The Studio
Author URI: https://www.the-studio.be
Template: thestudio
Version: 1.0.1
Text Domain: thestudio-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* =========================
   DOT UNDER MENU ITEMS
   ========================= */

/* Make the anchor a proper positioning context */
   .elementor-nav-menu .elementor-item.elementor-item-anchor{
	 position: relative;
	 display: inline-block;
	 padding-bottom: 1.2em;
   }
   
   /* Base state */
   .elementor-nav-menu .elementor-item.elementor-item-anchor::after,
   .snz-experts .elementor-heading-title::after{
	 content: "";
	 position: absolute;
	 left: 50%;
	 bottom: 0;
	 width: 4px;
	 height: 4px;
	 background: #fff !important;
	 border-radius: 999px;
   
	 /* ✨ glow */
	 box-shadow: 0 0 6px rgba(255,255,255,.6);
   
	 opacity: 0;
	 transform: translateX(-50%) translateY(6px);
	 transition:
	   opacity 0.2s ease,
	   transform 0.3s cubic-bezier(.4,0,.2,1),
	   box-shadow 0.3s ease;
	 pointer-events: none;
   }
   
   /* Hover state */
   .elementor-nav-menu .elementor-item.elementor-item-anchor:hover::after,
   .snz-experts .elementor-heading-title:hover::after{
	 opacity: 1;
	 transform: translateX(-50%) translateY(-.2em);
   
	 /* slightly stronger glow on hover */
	 box-shadow:
	   0 0 4px rgba(255,255,255,.8),
	   0 0 15px rgba(255,255,255,.6);
   }

figcaption.widget-image-caption.wp-caption-text {
	background: rgba(17, 18, 16, 0.75);
	display: inline-block;
	font-style: normal;
	font-size:0.75rem;
	color:var(--e-global-color-ef49f8f)!important;
	position: absolute;
	left:0px;
	bottom:0px;
	margin:1em;
	line-height: 1em;
	padding:0.6em 0.9em 0.75em 0.9em;
	border-radius:.2em;
}






/* Geef je website breedte (tel padding-inline grootte erbij op) aan en de font-size van je bodytekst */
:root {
	/* Breedte website (alleen nummers) */
	--min-width-site: 640;   /* px voor minimale breedte van de website */
	--max-width-site: 1824;  /* px voor maximale breedte van de website (tel padding-inline grootte erbij) */
	
	/* Font schalen (alleen nummers) */
	--min-font-size: 14;     /* px voor minimum font-size */
	--max-font-size: 16;     /* px voor maximum font-size */  
}

/* Padding breedte. Dit gaat dus af van je maximale breedte van de website */
.e-con.e-flex > .e-con-inner {
	padding-inline: 2em;
}

@media only screen and (max-width:880px) {
	.e-con.e-flex > .e-con-inner {
		padding-inline: 1em;
	}
}

:root {
--container-max-width: calc(var(--max-width-site) * 1px);
--fs-slope: calc((var(--max-font-size) - var(--min-font-size)) / (var(--max-width-site) - var(--min-width-site)));
--fs-intercept: calc(var(--min-font-size) - var(--fs-slope) * var(--min-width-site));
}

body { overflow-x:hidden; }
html { font-size: clamp(calc(var(--min-font-size) * 1px),calc(var(--fs-slope) * 100vw + var(--fs-intercept) * 1px),calc(var(--max-font-size) * 1px)); }

.e-con { --content-width: min(100%, var(--container-max-width)); }
.e-con > .e-con-inner { max-width: var(--content-width);}



/* Default (sitewide) */
:root{
  --split-reveal-color: var(--e-global-color-primary);
  --split-initial-color: rgba(17,16,18,.1);
  --split-initial-opacity: .8;
  --split-initial-blur: .4px;
  --split-stagger: .03;
  --split-duration: .8;
}

/* Dark section example */
.dark-bg {
  --split-reveal-color: var(--e-global-color-ef49f8f);
  --split-initial-color: rgba(255,255,255,.1);
}

.slash h6:before {
	content: "/";
  color: var(--e-global-color-secondary);
  position: relative;
  top: 0.05em;
  margin-right:.5em;
}

/*------------------------------------*\
	BUTTONS - Geef een button de class '.kl' voor klein en '.gr' voor groot
\*------------------------------------*/

/* Het algemene uiterlijk van een normale knop */
/* -----------------------------------------------------
   BASE BUTTON STYLES
----------------------------------------------------- */
.elementor-button,
.elementor-widget-form .elementor-button[type="submit"],
.cli-plugin-button,
.wt-cli-privacy-accept-btn {
  position: relative;
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 1em 1.5em 1.125em 1.5em;
  border-radius: 10em;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

/* Text container */
.elementor-button-text {
  display: inline-block;
  line-height: 1;
  height: auto !important;
  will-change: transform, opacity;
  transform: translateY(0);
  opacity: 1;
}

/* Hover animation only affects text */
.elementor-button:hover .elementor-button-text {
  animation: swap-up-then-in 0.6s forwards;
  animation-timing-function: linear;
}

/* Reset when hover ends */
.elementor-button:not(:hover) .elementor-button-text {
  animation: none;
  transform: translateY(0);
  opacity: 1;
}

/* Keyframes for text motion */
@keyframes swap-up-then-in {
  0% {
	transform: translateY(0%);
	opacity: 1;
	animation-timing-function: cubic-bezier(.55, .06, .68, .19);
  }
  40% {
	transform: translateY(-110%);
	opacity: 0;
	animation-timing-function: steps(1, end);
  }
  41% {
	transform: translateY(110%);
	opacity: 0;
	animation-timing-function: cubic-bezier(.2, .8, .2, 1);
  }
  70% {
	transform: translateY(-6%);
	opacity: 1;
	animation-timing-function: cubic-bezier(.2, .8, .2, 1);
  }
  100% {
	transform: translateY(0%);
	opacity: 1;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .elementor-button-text,
  .elementor-button:hover .elementor-button-text {
	animation: none !important;
	transform: translateY(0) !important;
	opacity: 1 !important;
  }
}

.xl .elementor-button {
	font-size:1.2rem;
}

/* -----------------------------------------------------
   BORDER VARIANTS
----------------------------------------------------- */
.lijn-zwart .elementor-button {
  box-shadow: inset 0 0 0 1px var(--e-global-color-primary);
}

.lijn-wit .elementor-button {
  box-shadow: inset 0 0 0 1px var(--e-global-color-ef49f8f);
}

.lijn-snz .elementor-button {
  position: relative;
  z-index: 0;
}

.lijn-snz .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, var(--e-global-color-secondary), var(--e-global-color-cab9be4));
  -webkit-mask:
	linear-gradient(#fff 0 0) content-box,
	linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

/* -----------------------------------------------------
   ARROW VERSION (.pijl)
   Arrow stays static — text animates only
----------------------------------------------------- */

/* Remove arrow from animated element */
.pijl .elementor-button .elementor-button-text::after {
  content: none !important;
}

/* Place arrow on non-animated wrapper */
.pijl .elementor-button .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  position: relative;
}

.pijl .elementor-button .elementor-button-content-wrapper::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-top: 0.05em;
  background-color: currentColor;
  mask: url("/wp-content/themes/thestudio-child/img/arrow-diagonal.svg") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("/wp-content/themes/thestudio-child/img/arrow-diagonal.svg") no-repeat center;
  -webkit-mask-size: contain;
}


/* Geef een knop je eigen icoon */
/* .xs.elementor-widget-button .elementor-button-text:after {
	content:"";
	width: 1em;
	height: 1em;
	position: absolute;
	transition: .3s;
	margin-left:.25em;
	
	background:var(--e-global-color-accent);
	-webkit-mask: url(/wp-content/themes/thestudio-child/img/chevron-right.svg) no-repeat 50% 50%;
	mask: url(/wp-content/themes/thestudio-child/img/chevron-right.svg) no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
} */

/* Het uiterlijk van een kleine knop (geef de knop de class .xl) */
.xl.elementor-widget.elementor-widget-button{
	font-size:1.25em;
}

/*------------------------------------*\
	FORMULIEREN
\*------------------------------------*/

/* De kleuren en border-radius van de lijnen rondom de velden */
:root {
	--formline:inset 0 0 0 0.1rem rgba(0,0,0,.1); /* breedte lijn en kleur van formulier velden */
	--formlinefocus:inset 0 0 0 0.1rem rgba(0,0,0,1); /* breedte lijn en kleur van formulier velden op focus */
	--fieldsborderradius:.2em; /* radius van de velden */
	
body {
	--formlinetexttype: var(--e-global-color-primary); /* kleur van de tekst wanneer je typt */
	--formlinetext: var(--e-global-color-text); /* kleur van de placeholder tekst */
	--formlinetextopacity: .6; /* doorzichtigheid van de placeholder tekst */
}
}

/* Het algemene uiterlijk van formulierveld */
.elementor-form input[type=date], .elementor-form input[type=email], .elementor-form input[type=number], .elementor-form input[type=password], .elementor-form input[type=search], .elementor-form input[type=tel], .elementor-form input[type=text], .elementor-form input[type=url], .elementor-form select, .elementor-form textarea, .elementor-field-group .elementor-field-textual, .elementor-field-group .elementor-select-wrapper select{
	min-height:0px;
	border:none;
	
	border-radius:var(--fieldsborderradius);
	box-shadow:var(--formline);
	padding: 1em;
	font-size:1em;
}

/* Wat er gebeurd als je op een formulierveld klikt */
.elementor-form input[type=date]:focus, .elementor-form input[type=email]:focus, .elementor-form input[type=number]:focus, .elementor-form input[type=password]:focus, .elementor-form input[type=search]:focus, .elementor-form input[type=tel]:focus, .elementor-form input[type=text]:focus, .elementor-form input[type=url], .elementor-form select:focus, .elementor-form textarea:focus, .elementor-field-group .elementor-field-textual:focus {
	border:none;
	box-shadow: var(--formlinefocus);
}

/* Ruimtes van formulier labels */
label.elementor-field-label { margin-block:.8em; }
/* Kleur tekst wannneer een veld is ingevuld */
.elementor-widget-form .elementor-field-group .elementor-field { color: var(--formlinetexttype); }
/* Kleur van de placeholders */
input::placeholder, textarea::placeholder { color: var(--formlinetext)!important; opacity: var(--formlinetextopacity)!important; }

/*--------*\
/* CHECKBOX & RADIO */

:root {
	--groottebox:1.25em;
}

/* Uiterlijk van de Checkbox en Radio velden */
.elementor-form input[type="checkbox"], .elementor-form input[type="radio"] {	
	background:white;
	min-width: var(--groottebox); min-height: var(--groottebox);
	margin-right: .5em;
	box-shadow:var(--formline);
}

/* Uiterlijk van de Checkbox en Radio velden wanneer ze actief zijn */
.elementor-form input[type="checkbox"]:before, .elementor-form input[type="radio"]:before {	
	min-width: var(--groottebox); min-height: var(--groottebox);
	background:var(--e-global-color-primary);
	
	background-image:url(http://localhost:8888/standaard/wp-content/themes/thestudio-child/img/check-w.svg);
	background-size:calc(var(--groottebox) / 1.5);
	background-position:center center;
	background-repeat: no-repeat;
}

/* Ruimte boven de verzend-knop */
.elementor-form .elementor-field-type-submit { margin-top:1em; }
/* Radius van de Checkbox (hetzelfde als formulier velden) */
.elementor-form input[type="checkbox"], .elementor-form input[type="checkbox"]:before { border-radius:var(--fieldsborderradius); }
/* Tekst voor het Goedkeuring veld */
.elementor-field-option label { font-size: calc(1em - .2em); margin-top:-0.05em!important; line-height: 1.6em!important; }



.elementor-message:before {
	display: none;
}

.elementor-field-subgroup .elementor-field-option {
	display:flex;
	align-items:center;
}

.elementor-field-type-acceptance .elementor-field-option{
	align-items:flex-start;
}

.elementor-field-group .elementor-field-subgroup {
	gap:.5em;
}

/* Radio */

.elementor-form input[type="radio"], .elementor-form input[type="radio"]:before {
	border-radius:50%;
}

/* Select */

i.eicon-caret-down {
	transform: rotate(90deg)!important;
}

.eicon-caret-down:before {
	 content: '\e87d'!important; /* https://elementor.github.io/elementor-icons/ */
}

.elementor-select-wrapper .select-caret-down-wrapper{
	inset-inline-end: 20px;
}

.elementor-select-wrapper .select-caret-down-wrapper i {
	font-size:12px;
}

/* Zorgt ervoor dat de Select net zo hoog blijft als andere velden */
.elementor-field-group .elementor-select-wrapper select {
	line-height: 1em;
}

/* File Upload */

input {
	
}

.elementor-field-type-upload input[type="file"]::file-selector-button {
	margin-right:1em;
	//margin-top: 0.5em;
	color: white;
	padding: 0.5em 1em;
	border:none;
	border-radius:var(--fieldsborderradius);
	background:var(--e-global-color-text);
	transition: .2s;
	cursor: pointer;
}

.elementor-field-type-upload input[type="file"]::file-selector-button:hover {
	background:var(--e-global-color-secondary);
}

/* ========== FORM LAYOUT ========= */

.caseform .elementor-form-fields-wrapper{
  display: flex !important;
  flex-wrap: wrap;
  width: 100%;
  gap: 12px 16px;
  align-items: center;
}

/* Remove Elementor's forced 100% columns */
.caseform .elementor-form-fields-wrapper > .elementor-field-group.elementor-col-100{
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* ========== HTML FIELDS (variable width) ========= */

.caseform .elementor-field-type-html{
  width: fit-content !important;
  max-width: 100%;
  white-space: nowrap; /* remove if text may wrap */
  line-height: 1.2;
}

/* ========== TEXTUAL INPUTS (fixed width) ========= */

.caseform{
  --caseform-input-width: 30em; /* change if needed */
}

.caseform .elementor-field-group:not(.elementor-field-type-html):not(.elementor-field-group-bericht):not(.e-form__buttons){
  width: var(--caseform-input-width) !important;
  flex: 0 0 var(--caseform-input-width) !important;
}

.caseform .elementor-field-textual{
  width: 100% !important;
  box-sizing: border-box;
}

/* ========== TEXTAREA: FULL WIDTH ========= */

.caseform .elementor-field-group-bericht{
  flex: 0 0 100% !important;
  width: 100% !important;
}

.caseform .elementor-field-group-bericht .elementor-field-textual{
  width: 100% !important;
  box-sizing: border-box;
}

/* Stronger override for Elementor */
.caseform .elementor-form-fields-wrapper > .elementor-field-group.elementor-field-group-bericht{
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

.caseform .elementor-form-fields-wrapper > .elementor-field-group.elementor-field-group-bericht > textarea.elementor-field-textual{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
	  margin-bottom: 2em !important;
}

/* ========== SUBMIT BUTTON: FULL WIDTH ========= */

.caseform .e-form__buttons{
  flex: 0 0 100% !important;
  width: 100% !important;
}

/* ===== Field styling (placeholders, text color, underline) ===== */

.caseform{
  --cf-text: rgba(253, 255, 250, 1);                 /* typed text */
  --cf-placeholder: rgba(253, 255, 250, .4);         /* placeholder text */
  --cf-line: rgba(253, 255, 250, .2);                /* default underline */
  --cf-line-focus: var(--e-global-color-secondary);  /* underline on focus */
  --cf-line-filled: rgba(253, 255, 250, 1); /* underline once filled */
}

/* Base look for inputs + textarea + select */
.caseform input.elementor-field-textual,
.caseform textarea.elementor-field-textual,
.caseform select.elementor-field-textual{
  color: var(--cf-text) !important;
  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  /* 2px "border-bottom" using inset box-shadow */
  box-shadow: inset 0 -2px 0 0 var(--cf-line) !important;

  outline: none !important;
  transition: box-shadow .18s ease, color .18s ease;
}

/* Placeholder color */
.caseform input.elementor-field-textual::placeholder,
.caseform textarea.elementor-field-textual::placeholder{
  color: var(--cf-placeholder) !important;
  opacity: 1;
}

/* Underline when clicking / focusing */
.caseform input.elementor-field-textual:focus,
.caseform textarea.elementor-field-textual:focus,
.caseform select.elementor-field-textual:focus{
  box-shadow: inset 0 -2px 0 0 var(--cf-line-focus) !important;
}

/* Filled: only when there is content (no :valid!) */
.caseform input.elementor-field-textual:not(:placeholder-shown),
.caseform textarea.elementor-field-textual:not(:placeholder-shown){
  box-shadow: inset 0 -2px 0 0 var(--cf-line-filled) !important;
}

/* Extra safety: if Elementor removes placeholder on some fields,
   at least show the active line while interacting with the group */
.caseform .elementor-field-group:focus-within input.elementor-field-textual,
.caseform .elementor-field-group:focus-within textarea.elementor-field-textual,
.caseform .elementor-field-group:focus-within select.elementor-field-textual{
  box-shadow: inset 0 -2px 0 0 var(--cf-line-focus) !important;
}

/*------------------------------------*\
	MOGELIJKHEDEN
\*------------------------------------*/

p:last-child {
	margin-bottom:0em;
}

p a,
p a:hover,
p a:focus {
  color: inherit !important;
}


/* Make paragraph links inherit color and remove default underline */
p a {
  color: inherit;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

/* Thin custom underline */
p a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.2em;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 1;
  transform: translateY(0);
  transition:
	transform 0.2s ease,
	opacity 0.2s ease;
}

/* Hover animation: push underline down + fade out */
p a:hover::after {
  transform: translateY(.2em);
  opacity: 0;
}

/*------------------------------------*\
	AFBEELDINGEN
\*------------------------------------*/

.reveal.fadeIn * {
	opacity: 1;
	animation: reveal cubic-bezier(0.75, 0, .25, 1) forwards;
   transform-origin: 100% 0%;
   animation-duration: 1.5s;
   -webkit-animation-duration: 1.5s;
}
   
@keyframes reveal {
	   0% {
		   clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	   }
	   
	   100% {
		   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	   }
}

/*------------------------------------*\
	MENU
\*------------------------------------*/

.menu-item-has-children:hover .sub-menu {
	opacity: 1;
		animation: sub cubic-bezier(.00,.66,.75,1) forwards;
	   transform-origin: 100% 0%;
	   animation-duration: .3s;
	   -webkit-animation-duration: .3s;
}

@keyframes sub {
	   0% {
		   transform: translateY(-8px);
		   opacity: 0;
	   }
	   
	   50% {
		   opacity: 1;
	   }
	   
	   100% {
			  transform: translateY(0px);
			  opacity: 1;
		  }
}

.elementor-nav-menu .sub-arrow {
	padding:3px!important;
	color:var(--e-global-color-accent);
	font-size:calc(1em + .125em);
}

.elementor-nav-menu--dropdown a {
	padding:1em 1.25em;
}

ul.elementor-nav-menu--dropdown a, ul.elementor-nav-menu--dropdown a:focus, ul.elementor-nav-menu--dropdown a:hover {
	border-inline: 0px solid transparent;
	border-inline-start-width:0px!important;
}

.elementor-nav-menu ul li a {
	justify-content: space-between;
	min-width:100px;
	transition:.2s!important;
}

/*------------------------------------*\
	COOKIEYES
\*------------------------------------*/

.cky-footer-wrapper div:last-child {
display: none !important;
}

.cky-modal button:hover {
	background:none;
}

[data-cky-tag="powered-by"] {
  display: none !important;
}

[data-cky-tag="powered-by"]::parent {
  display: none !important; /* not directly supported, you'd need to select parent differently */
}

/* CookieYes Midden */
/* .cky-consent-container {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	bottom:1em !important;
	transform: translate(-50%, -50%) !important;
	z-index: 99999 !important;
	max-width: 90%;
		max-height: max-content;
}

.cky-consent-container::after {
	content: "";
	width: 200vw;
	height: 200vh;
	display: block;
	background: rgba(0, 0, 0, .4);
	left: 0px !important;
	position: absolute;
	margin-left: -100vw;
	margin-top: -100vh;
	z-index: -1;
}

.cky-consent-container.cky-hide::after {
  content: "";
	display:none;
}

.cky-consent-container {
	max-width:calc(100% - 1em)!important;
} */

/*------------------------------------*\
	GENERAL
\*------------------------------------*/


/* Zet iconen van lijst-widget op goede hoogte */
.elementor-widget .elementor-icon-list-item {
	-webkit-box-align: normal;
	-ms-flex-align: normal;
	align-items: normal;
}

.elementor-widget .elementor-icon-list-icon i {
	margin-top:.7em;
}

/* Lijst in text-editor */
.elementor-widget-text-editor ul li::marker {
	content: "\e89e";
	font-size:1em;
	font-family: eicons;
	font-weight: 900;
}
.elementor-widget-text-editor ul {
	padding-inline-start: 25px;
}

.elementor-widget-text-editor ul li {
	padding-left: 5px;
	padding-bottom: 10px;
	line-height: 1.8em;
}

/* Pop-up */
.elementor-popup-modal .dialog-close-button {
	background: var(--e-global-color-primary);
	border-radius: 50%;
	padding: .5em;
	color:white;
	transition:.2s;
}

.elementor-popup-modal .dialog-close-button:hover {
	transform:scale(1.1);
}



/* 
@media only screen and (max-width: 1280px) {
}

@media only screen and (max-width: 940px) {
}

@media only screen and (max-width: 640px) {
}
*/