/*
Theme Name: Feedmachinery
Theme URI: https://feedmachinery.be
Author: Emiel Dewulf
Author URI: https://emieldewulf.be
Description: Thema voor Feedmachinery te Lichtervelde
Version: 1.0
*/

/* HOME */

:root{
    font-size:17px;
}
body{
    font-family: "Manrope", sans-serif;
    margin:0;
    font-weight:300;
    color:rgba(0,0,0, .7);
}

h1{
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  margin:0;
}

h2, h1.smaller{
    color: var(--color-primary);
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 500;
    margin-top:0;
    margin-bottom:1rem;
}

h3{
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--color-primary);
    font-weight:400;
}

p{
    margin:0;
}

.container{
  max-width: 1400px;
  margin:0 auto;
}

.container-right-align {
  max-width: 1400px;
  margin-right: auto;
  padding-left: 2.5rem; /* px--5 equivalent */
}

/* Full width split layout - herbruikbare klasse */
.full-width-split {
  display: flex;
  align-items: center;
}

.full-width-split__left {
  width: 50%;
}

.full-width-split__right {
  width: 50%;
  max-width: 700px; /* Helft van container max-width (1400px / 2) */
  margin-left: auto;
  margin-right: calc((100vw - 1400px) / 2); /* Uitlijnen met container rechterkant */
  padding-left: 2.5rem; /* px--5 equivalent voor spacing */
}

@media (max-width: 1400px) {
  .full-width-split__right {
    margin-right: 2.5rem; /* px--5 op kleinere schermen */
  }
}

@media (max-width: 768px) {
  .full-width-split {
    flex-direction: column-reverse;
  }

  .full-width-split__left,
  .full-width-split__right {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Full width split layout - OMGEKEERD (afbeelding rechts) */
.full-width-split--reverse {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.full-width-split--reverse .full-width-split__left {
  width: 50%;
  max-width: 700px; /* Helft van container max-width (1400px / 2) */
  margin-right: auto;
  margin-left: calc((100vw - 1400px) / 2); /* Uitlijnen met container linkerkant */
  padding-right: 2.5rem; /* px--5 equivalent voor spacing */
  padding-left: 0;
}

.full-width-split--reverse .full-width-split__right {
  width: 50%;
  max-width: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1400px) {
  .full-width-split--reverse .full-width-split__left {
    margin-left: 2.5rem; /* px--5 op kleinere schermen */
  }
}

@media (max-width: 768px) {
  .full-width-split--reverse {
    flex-direction: column-reverse;
  }

  .full-width-split--reverse .full-width-split__left,
  .full-width-split--reverse .full-width-split__right {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

strong {
    font-weight: 700;
}

.btn--primary{
    padding:15px 20px;
    background:var(--color-light);
    text-transform:uppercase;
    color:#000;
    border-radius:50px;
    border:1px solid #FFF;
    transition:all ease .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:14px;
    width:fit-content;
    text-align:center;
}

.btn--primary.green{
    background:var(--color-primary);
    color:#FFF;
    border:1px solid var(--color-primary);
}

.btn--primary:hover{
    background:transparent;
    color:#FFF;
    transform:scale(1.02);
}

.btn--primary.green:hover{
    color:var(--color-primary);
}

.btn--secondary{
    padding:8px 8px 8px 20px;
    background:transparent;
    text-transform:uppercase;
    color:var(--color-light);
    border-radius:50px;
    border:1px solid var(--color-light);
    transition:all ease .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:14px;
    width:fit-content;
    gap:16px;
    text-align:center;
}

.btn--secondary:hover{
  background:var(--color-light);
  color:#000;
  transform:scale(1.02);
}

.btn--secondary .container--arrow{
    height:34px;
    width:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--color-light);
    border-radius:100px;
    transition:all ease .3s;
}

.btn--secondary:hover .container--arrow{
  background:var(--color-primary);
}

.btn--secondary .container--arrow svg{
  transition:all ease .3s;
}

.btn--secondary:hover .container--arrow svg{
  filter: brightness(0) saturate(100%) invert(99%) sepia(5%) saturate(2%) hue-rotate(22deg) brightness(109%) contrast(100%);
}

.btn--text{
  font-size:14px;
}

/* custom styling */
.dienst-card:nth-child(even) {
    background: var(--color-light);
}

.gradient--container {
    background: linear-gradient(180deg, var(--color-primary) 75%, #EEEEEE 75%);
}

.gradient--container--hero {
    background: linear-gradient(180deg, var(--color-primary) 90%, #EEEEEE 75%);
}

/* hero auto slider */
.image-cycle-collection {
  width: 100%;
  height:100%;
  position: relative;
}
  





[data-image-cycle-item="active"] {
  transition: opacity 0.4s ease 0s, visibility 0s ease 0s;
  opacity: 1;
  visibility: visible;
  z-index: 3;
}

[data-image-cycle-item="previous"] {
  transition: opacity 0.4s ease 0.4s, visibility 0s ease 0.4s;
  opacity: 0;
  visibility: visible;
  z-index: 2;
}

[data-image-cycle-item="not-active"] {
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}
  
.image-cycle-collection__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}
.image-cycle-collection__img img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* sectoren homepage */
.active--in {
  transform: translateY(100%);
  transition: transform 300ms ease-in-out;
}
.card:hover .active--in{
  transform:translateY(0);
}
.card{
  transition:all ease .3s;
}
.card:hover{
  cursor:pointer;
  transform:scale(1.02);
}



@media only screen and (max-width: 818px) {
  .dienst-card:nth-child(even){
    background:transparent;
  }
}

/* over ons machinepark layout */
.machinepark-layout {
    margin-left: calc(-50vw + 50%);
    width: 100vw;
}

.machinepark-layout .w--1\/2:first-child {
    width: 50vw; /* foto gaat tot linkerrand */
}

.machinepark-layout .w--1\/2:last-child {
    width: calc(50vw - calc((100vw - 1400px) / 2) - 64px) !important; /* uitgelijnd met container rechterrand, minus gap--16 */
    margin-left: 0; /* reset eventuele margin */
}

@media only screen and (max-width: 818px) {
   /* general text */
  :root{
    font-size:16px;
  }

  h1{
    font-size:3rem;
  }

  h1.smaller, h2{
    font-size: 1.5rem;
    line-height: 1.75rem;
  }


  /* over ons machinepark */
  .machinepark-layout {
    margin-left: auto;
    width: 100%;
  }
  .machinepark-layout .w--1\/2:first-child {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
  }
  .machinepark-layout .w--1\/2:last-child {
    width: 100% !important;
    padding: 0 5%;
  }
  .image-container-tabs{
    height:500px !important;
  }

  /* buttons */
  .btn--primary, .btn--secondary{
    width:100%;
  }

  .dropdown-container{
    width:50%;
  }
  select#tag-filter-dropdown, select#sort-filter-dropdown{
    width:100% !important;
  }
}


/* filters realisaties */
select#tag-filter-dropdown, select#sort-filter-dropdown {
    border: none;
	border-radius:9999px;
    padding: 16px 32px 16px 20px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .7);
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    width: auto;
    outline:none !important;
}

/* wp form */
.wpforms-field-label {
    color: #C8C8C8 !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    margin-bottom: 0 !important;
}
.wpforms-required-label{
  color:var(--color-primary) !important;
}
.wpforms-field-large, .wpforms-field-medium {
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    outline:none !important;
}
div.wpforms-container-full input[type=date]:focus, div.wpforms-container-full input[type=datetime]:focus, div.wpforms-container-full input[type=datetime-local]:focus, div.wpforms-container-full input[type=email]:focus, div.wpforms-container-full input[type=month]:focus, div.wpforms-container-full input[type=number]:focus, div.wpforms-container-full input[type=password]:focus, div.wpforms-container-full input[type=range]:focus, div.wpforms-container-full input[type=search]:focus, div.wpforms-container-full input[type=tel]:focus, div.wpforms-container-full input[type=text]:focus, div.wpforms-container-full input[type=time]:focus, div.wpforms-container-full input[type=url]:focus, div.wpforms-container-full input[type=week]:focus, div.wpforms-container-full select:focus, div.wpforms-container-full textarea:focus, .wp-core-ui div.wpforms-container-full input[type=date]:focus, .wp-core-ui div.wpforms-container-full input[type=datetime]:focus, .wp-core-ui div.wpforms-container-full input[type=datetime-local]:focus, .wp-core-ui div.wpforms-container-full input[type=email]:focus, .wp-core-ui div.wpforms-container-full input[type=month]:focus, .wp-core-ui div.wpforms-container-full input[type=number]:focus, .wp-core-ui div.wpforms-container-full input[type=password]:focus, .wp-core-ui div.wpforms-container-full input[type=range]:focus, .wp-core-ui div.wpforms-container-full input[type=search]:focus, .wp-core-ui div.wpforms-container-full input[type=tel]:focus, .wp-core-ui div.wpforms-container-full input[type=text]:focus, .wp-core-ui div.wpforms-container-full input[type=time]:focus, .wp-core-ui div.wpforms-container-full input[type=url]:focus, .wp-core-ui div.wpforms-container-full input[type=week]:focus, .wp-core-ui div.wpforms-container-full select:focus, .wp-core-ui div.wpforms-container-full textarea:focus{  
  box-shadow:none !important;
}
.wpforms-submit{
  padding:15px 20px !important;
  background:var(--color-primary) !important;
  text-transform:uppercase !important;
  color:#FFF !important;
  border-radius:50px !important;
  border:1px solid var(--color-primary) !important;
  transition:all ease .3s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size:14px !important;
  width:fit-content !important;
  text-align:center !important;
}

.contact--image {
    height: calc(100vh - 313px) !important;
}