/*   
	Theme Name:        Studio Campo Theme
	Theme URI:         https://studiocampo.nl
	Description:       Studio Campo theme.
	Author:            Studio Campo
	Author URI:        https://studiocampo.nl
	License:           GNU General Public License v3 or later.
	License URI:       https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain:       sc-theme
*/

/* Algemeen */
html {
  background: #fff;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: var(--e-global-typography-accent-font-family), Sans-serif;
}

a,
input,
button,
select,
textarea,
i {
  outline: none;
}

#main {
  overflow-x: clip;
}

.elementor-element[data-element_type="container"] {
  max-width: 100%;
}

.elementor-widget-text-editor
  .elementor-widget-container
  > :first-child:is(p, ul, ol),
.elementor-widget-text-editor
  .elementor-widget-container
  .elementor-text-editor
  > :first-child:is(p, ul, ol) {
  margin-block-start: 0 !important;
}
.elementor-widget-text-editor
  .elementor-widget-container
  > :last-child:is(p, ul, ol),
.elementor-widget-text-editor
  .elementor-widget-container
  .elementor-text-editor
  > :last-child:is(p, ul, ol) {
  margin-block-end: 0 !important;
}

.dialog-lightbox-close-button {
  text-decoration: none;
}

/* Links */
.elementor-widget-text-editor:not(.sc-link-wit) a {
  color: #fff;
  text-decoration: underline !important;
  background: linear-gradient(
    90deg,
    var(--e-global-color-accent) 0%,
    var(--e-global-color-be43822) 100%
  );
  border-radius: 15px;
  padding: 1px 6px;
}
.elementor-widget-text-editor:not(.sc-link-wit) a:hover {
  color: #fff;
  background-color: var(--e-global-color-secondary);
  background: linear-gradient(
    90deg,
    var(--e-global-color-secondary) 0%,
    var(--e-global-color-587470b) 100%
  );
}
.elementor-field-type-acceptance a,
.elementor-field-type-html a {
  color: var(--e-global-color-secondary);
}
.elementor-field-type-html a:hover {
  color: var(--e-global-color-accent);
}

/* Tabel */
.elementor-widget-text-editor table th {
  text-align: left;
}
.elementor-widget-text-editor table th,
.elementor-widget-text-editor table td {
  padding: 15px 30px 15px 0;
  vertical-align: top;
}

/* Veelgestelde vragen */
.sc-faq .e-n-accordion-item-title-text {
  border-bottom: 1px solid var(--e-global-color-text);
}

/* Bullets in Elementor tekstbewerker widgets */
.elementor-widget-text-editor ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.elementor-widget-text-editor ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 4px;
  line-height: 1.45;
}
.elementor-widget-text-editor ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 9px;
  background-color: var(--e-global-color-accent);
  background: linear-gradient(
    90deg,
    var(--e-global-color-accent) 0%,
    var(--e-global-color-be43822) 100%
  );
  border-radius: 50%;
  transform: translateY(-50%);
}

/* Check-list bullets voor tekstbewerker widget met class sc-list-check */
.elementor-widget-text-editor.sc-list-check ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.elementor-widget-text-editor.sc-list-check ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 4px;
  line-height: 1.45;
}
.elementor-widget-text-editor.sc-list-check ul li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1.3em;
  width: 17px;
  height: 17px;
  line-height: 17px;
  border-radius: 4px;
  background-color: var(--e-global-color-accent);
  background: linear-gradient(
    90deg,
    var(--e-global-color-accent) 0%,
    var(--e-global-color-be43822) 100%
  );
  color: #ffffff;
  font-size: 9px;
  text-align: center;
}
.sc-list-wit ul li::before {
  background-color: #fff;
  background: #fff;
}

/* Genummerde lijsten in Elementor tekstbewerker widgets */
.elementor-widget-text-editor ol {
  list-style: none;
  counter-reset: custom-counter;
  padding-left: 0;
  margin-left: 0;
}
.elementor-widget-text-editor ol li {
  counter-increment: custom-counter;
  position: relative;
  padding-left: 32px;
  margin-bottom: 4px;
  line-height: 1.45;
}
.elementor-widget-text-editor ol li::before {
  content: counter(custom-counter);
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 19px;
  height: 19px;
  line-height: 19px;
  border-radius: 50%;
  background-color: var(--e-global-color-accent);
  background: linear-gradient(
    90deg,
    var(--e-global-color-accent) 0%,
    var(--e-global-color-be43822) 100%
  );
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* Header */
@media (min-width: 1025px) {
  .sc-menu-item-gekeurd a {
    padding: 15px 20px !important;
    border-radius: 30px;
    background-color: var(--e-global-color-accent);
    background: linear-gradient(
      90deg,
      var(--e-global-color-accent) 0%,
      var(--e-global-color-be43822) 100%
    );
    color: #fff !important;
    transition: 0.3s !important;
  }
  .sc-menu-item-gekeurd a:hover {
    background: linear-gradient(
      90deg,
      var(--e-global-color-secondary) 0%,
      var(--e-global-color-587470b) 100%
    );
  }
}

/* Logo en header verkleinen bij scrollen */
.sc-hoofdmenu {
  transition: all 0.3s ease;
}
.sc-hoofdmenu .e-con-inner,
.sc-hoofdmenu .elementor-widget,
.sc-hoofdmenu .elementor-widget-container,
.sc-hoofdmenu .elementor-nav-menu--main .elementor-item {
  transition: all 0.3s ease;
}
.sc-hoofdmenu.elementor-sticky--effects {
  --min-height: 70px !important;
  min-height: 70px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.sc-hoofdmenu.elementor-sticky--effects > .e-con-inner {
  min-height: 70px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}
.sc-hoofdmenu.elementor-sticky--effects .sc-sitelogo img {
  width: 110px !important;
  max-width: 110px !important;
  height: auto !important;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .sc-hoofdmenu.elementor-sticky--effects .sc-sitelogo img {
    width: 95px !important;
    max-width: 95px !important;
    height: auto !important;
  }
}
.sc-hoofdmenu.elementor-sticky--effects .sc-sitelogo,
.sc-hoofdmenu.elementor-sticky--effects
  .sc-sitelogo
  .elementor-widget-container,
.sc-hoofdmenu.elementor-sticky--effects .sc-sitelogo a {
  line-height: 0 !important;
  margin: 0 !important;
}
.sc-hoofdmenu.elementor-sticky--effects
  .elementor-nav-menu--main
  .elementor-item {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.sc-hoofdmenu.elementor-sticky--effects .elementor-widget {
  margin-bottom: 0 !important;
}

/* Hoofdmenu dropdown */
@media (min-width: 1025px) {
  .sc-header-menu,
  .sc-header-menu .elementor-widget-container,
  .sc-header-menu .elementor-nav-menu--main {
    overflow: visible !important;
  }
  .sc-header-menu
    .elementor-nav-menu--main
    .elementor-nav-menu
    > li
    > ul.sub-menu {
    background: linear-gradient(
      180deg,
      var(--e-global-color-accent) 0%,
      var(--e-global-color-be43822) 100%
    );
    border-radius: 16px !important;
    padding: 14px 12px 12px 12px !important;
    min-width: 250px !important;
    margin-top: 18px !important;
    border: none !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    overflow: visible !important;
    position: absolute !important;
  }
  .sc-header-menu
    .elementor-nav-menu--main
    .elementor-nav-menu
    > li
    > ul.sub-menu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 15%;
    transform: translateX(-50%);
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 12px solid var(--e-global-color-accent);
  }
  .sc-header-menu
    .elementor-nav-menu--main
    .elementor-nav-menu
    > li
    > ul.sub-menu
    li
    a {
    line-height: 1.2 !important;
    padding: 6px 8px !important;
    border-left: none !important;
  }
  .sc-header-menu
    .elementor-nav-menu--main
    .elementor-nav-menu
    > li
    > ul.sub-menu
    li:not(:last-child)
    a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
  }
}

@media (max-width: 1024px) {
  /* Mobiele menu-container */
  .sc-header-menu
    nav.elementor-nav-menu--dropdown.elementor-nav-menu__container,
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    background: linear-gradient(180deg, #ff5a60 0%, #ff8750 100%) !important;
    border-radius: 0 0 16px 16px !important;
    overflow: visible !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    border: none !important;
  }
  /* Puntje boven het mobiele menu */
  .sc-header-menu
    nav.elementor-nav-menu--dropdown.elementor-nav-menu__container::before,
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container::before {
    content: "";
    position: absolute;
    top: -12px;
    right: 42px;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 12px solid var(--e-global-color-accent);
    z-index: 10;
  }
  /* Menu-items transparant maken, zodat het verloop zichtbaar wordt */
  .sc-header-menu
    nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
    a,
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container a {
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
  }
  /* Actieve en hover states ook transparant houden */
  .sc-header-menu
    nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
    a:hover,
  .sc-header-menu
    nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
    a:focus,
  .sc-header-menu
    nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
    a.elementor-item-active,
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container a:hover,
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container a:focus,
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
    a.elementor-item-active {
    background: transparent !important;
    color: #ffffff !important;
  }
  /* Lijntjes tussen hoofditems */
  .sc-header-menu
    nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
    > ul
    > li:not(:last-child)
    > a,
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container
    > ul
    > li:not(:last-child)
    > a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
  }
}

/* Pagina */
.sc-social-icon .elementor-icon {
  background-color: var(--e-global-color-accent);
  background: linear-gradient(
    90deg,
    var(--e-global-color-accent) 0%,
    var(--e-global-color-be43822) 100%
  );
  transition: 0.3s;
}
.sc-social-icon .elementor-icon:hover {
  background: #fff;
}
.sc-icon-verloop .elementor-icon {
  background-color: var(--e-global-color-accent);
  background: linear-gradient(
    90deg,
    var(--e-global-color-accent) 0%,
    var(--e-global-color-be43822) 100%
  );
}

/* Diensten overzicht */
.sc-dienst:hover {
  transform: scale(1.05);
}
.sc-dienst .sc-dienst-afbeelding {
  transition: 0.3s all;
}
.sc-dienst:hover .sc-dienst-afbeelding {
  transform: scale(1.1);
}
.sc-dienst.sc-dienst-titel {
  transition: 0.3s all;
}
.sc-dienst .sc-dienst-titel .elementor-widget-container {
  transition: 0.3s all;
}
.sc-dienst:hover .sc-dienst-titel .elementor-widget-container {
  transform: scale(1.05);
  background-color: var(--e-global-color-secondary) !important;
  background: linear-gradient(
    90deg,
    var(--e-global-color-secondary) 0%,
    var(--e-global-color-587470b) 100%
  ) !important;
}

/* Laatste row centreren */
@media (min-width: 1025px) {
  .center-last-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .center-last-row > .e-con {
    grid-column: span 2 !important;
  }
  .center-last-row > .e-con:nth-child(4) {
    grid-column: 2 / span 2 !important;
  }
  .center-last-row > .e-con:nth-child(5) {
    grid-column: 4 / span 2 !important;
  }
}

/* Team */
.sc-teamlid-fotobox {
  position: relative;
  width: 100%;
  aspect-ratio: 6/7;
  overflow: hidden;
}
.sc-teamlid-foto,
.sc-teamlid-foto .elementor-widget-container {
  width: 100%;
  height: 100%;
}
.sc-teamlid-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sc-teamlid-link:hover {
  transform: scale(1.05);
}
.sc-teamlid-link:hover .sc-teamlid-icoon {
  transform: scale(1.1);
}
.sc-teamlid-icoon .elementor-icon {
  background-color: var(--e-global-color-accent);
  background: linear-gradient(
    90deg,
    var(--e-global-color-accent) 0%,
    var(--e-global-color-be43822) 100%
  );
  transition: 0.3s;
}
.sc-teamlid-link:hover .sc-teamlid-icoon .elementor-icon {
  background-color: var(--e-global-color-587470b);
  background: linear-gradient(
    90deg,
    var(--e-global-color-587470b) 0%,
    var(--e-global-color-secondary) 100%
  );
  transition: 0.3s;
}

/* Portfolio Carrousel */
.sc-portfolio-carousel .swiper-slide {
  background: url("https://eshdsign.nl/wp-content/uploads/2026/07/DSIGN-header-achtergrond.webp") !important;
  background-size: cover !important;
}
@media (min-width: 1025px) {
  .sc-portfolio-carousel {
    --side-scale: 0.82 !important;
    --side-opacity: 0.55;
    --slide-radius: 24px;
    --arrow-size: 48px;
    overflow: hidden;
  }
  .sc-portfolio-carousel .elementor-widget-container {
    overflow: hidden;
  }
  .sc-portfolio-carousel .swiper-wrapper {
    align-items: center;
  }
  .sc-portfolio-carousel .swiper-slide {
    position: relative;
    z-index: 1;
    transform: scale(var(--side-scale)) !important;
    opacity: var(--side-opacity);
    transition:
      transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1),
      opacity 500ms ease;
    transform-origin: center;
    background: url("https://eshdsign.nl/wp-content/uploads/2026/07/DSIGN-header-achtergrond.webp") !important;
    background-size: cover !important;
  }
  .sc-portfolio-carousel .swiper-slide-active {
    z-index: 3;
    transform: scale(1) !important;
    opacity: 1;
  }
  .sc-portfolio-carousel .swiper-slide-prev,
  .sc-portfolio-carousel .swiper-slide-next {
    z-index: 2;
  }
  .sc-portfolio-carousel .elementor-carousel-image {
    border-radius: var(--slide-radius);
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .sc-portfolio-carousel .elementor-swiper-button {
    width: var(--arrow-size);
    height: var(--arrow-size);
    top: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #aaa;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-50%);
  }
  .sc-portfolio-carousel .elementor-swiper-button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }
  .sc-portfolio-carousel .elementor-swiper-button-prev {
    left: calc(33.333% - 20px) !important;
  }
  .sc-portfolio-carousel .elementor-swiper-button-next {
    right: calc(33.333% - 20px) !important;
  }
}

/* Opdrachtgever case overzicht */
/* .sc-case:hover {
  transform: scale(1.05);
}
.sc-case .sc-case-afbeelding-box {
  background-size: cover;
  background-position: center;
  opacity: 0.9;
  transition: 0.3s;
}
.sc-case:hover .sc-case-afbeelding-box {
  opacity: 1;
}
.sc-case .sc-case-knop {
  transition: 0.3s;
}
.sc-case:hover .sc-case-knop {
  transform: scale(1.1);
}
.sc-case:hover .sc-case-knop .elementor-widget-container {
  background: var(--e-global-color-primary) !important;
} */

/* Cookie popup */
.cmplz-btn {
  color: #fff !important;
  border: none !important;
}