/*
 Theme Name:     Backforce
 Template:       hello-elementor
 Theme URI:      https://www.backforce.be/
 Description:    Child theme van Hello Elementor voor Backforce.
 Author:         Backforce - Ann-Sophie Degroote
 Author URI:     https://www.backforce.be/
 Version:        1.0.0
 Text Domain:    backforce
*/
:root {
  --section-xxl: 10rem 2rem;
  --section-xl: 7.5rem 2rem;
  --section-large: 6rem 2rem;
  --section-medium: 4rem 2rem;
  --section-small: 2rem 2rem;
  --section-none: 0rem;
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --section-xxl: 8rem 2rem;
    --section-xl: 6rem 2rem;
    --section-large: 5rem 2rem;
    --section-medium: 4rem 2rem;
    --section-small: 2rem 2rem;
    --section-none: 0rem;
  }
}

@media (max-width: 767px) {
  :root {
    --section-xxl: 4rem 2rem;
    --section-xl: 4rem 2rem;
    --section-large: 3rem 2rem;
    --section-medium: 3rem 2rem;
    --section-small: 2rem 2rem;
    --section-none: 0rem;
  }
}

/* Alleen toepassen op de outer Elementor containers */
.section-xxl.e-con.e-parent { padding: var(--section-xxl); }
.section-xl.e-con.e-parent { padding: var(--section-xl); }
.section-large.e-con.e-parent { padding: var(--section-large); }
.section-medium.e-con.e-parent { padding: var(--section-medium); }
.section-small.e-con.e-parent { padding: var(--section-small); }
.section-none.e-con.e-parent { padding: var(--section-none); }


/* === Globale Row Gap voor Elementor === */

:root {
  --row-gap: 4rem;
}
@media (max-width: 1023px) {
  :root { --row-gap: 3rem; }
}
@media (max-width: 767px) {
  :root { --row-gap: 2rem; }
}

.e-con > .e-con-inner {
  row-gap: var(--row-gap);
}

/*** Header animation ***/

#sticky-header.e-con {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 9999;
  overflow: visible;
}

#sticky-header .e-con-inner {
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  background: rgba(0, 0, 0, 0.85); /* eventueel aanpassen of verwijderen als je transparantie via Elementor instelt */
}

#sticky-header.hide .e-con-inner {
  transform: translateY(-100%);
}

/*** Custom selection ***/
::-moz-selection { /* Code for Firefox */
  color: var(--global-palette4);
	background-color: color-mix(in srgb, var(--e-global-color-secondary), transparent 50%);
}
/*** Custom selection ***/
::selection {
  color: var(--global-palette4);
	background-color: color-mix(in srgb, var(--e-global-color-secondary), transparent 50%);
}

/*** Custom scrollbar ***/
/* width */
::-webkit-scrollbar {
  width: 0.75rem;
}
/* Track */
::-webkit-scrollbar-track {
  background: var(--e-global-color-c56c104);
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--e-global-color-b85ba81);
}

b, strong {
    font-weight: 500!important;
}

.grecaptcha-badge { 
    visibility: hidden;
}

/*** Privacy acceptance kleiner font ***/

div.elementor-field-group.elementor-field-group-privacy label {
    font-size: 1rem!important;
}

/*** Cookie Script styling ***/

#cookiescript_copyright { display: none; }

/*** Breadcrumb styling ***/

.elementor-shortcode .rank-math-breadcrumb p,
.elementor-shortcode .rank-math-breadcrumb a,
.elementor-shortcode .rank-math-breadcrumb .separator,
.elementor-shortcode .rank-math-breadcrumb .last {
    font-size: var(--e-global-typography-7cc3972-font-size);
    color: var(--e-global-color-c56c104);
}
.rank-math-breadcrumb a:hover {
    color: var(--e-global-color-hover);
    text-decoration: underline;
}