/*
Theme Name: Konkrete
Theme URI: https://konkrete.be
Author: Emiel Dewulf
Author URI: https://emieldewulf.be
Description: Website voor Konkrete - Gepolierde vloeren
Version: 1.0
Text Domain: konkrete
Requires at least: 5.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
*/

.geologica{
     font-family: "Geologica", sans-serif;
}

/* ============================================
   LANDING
   ============================================ */
.card-with-overlay {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Background image layer */
.card-with-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: inherit;
  z-index: 0;
  transition: transform 0.4s ease;
}

.card-with-overlay:hover::after {
  transform: scale(1.1);
}

/* Overlay layer */
.card-with-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 65px;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.card-with-overlay > * {
  position: relative;
  z-index: 2;
  transition: opacity 0.4s ease;
}

/* Hover effects */
.card-with-overlay:hover::before {
  opacity: 0;
}

.card-with-overlay:hover > * {
  opacity: 0;
}

/* ============================================
   BETONVLOER CARDS - Hover Zoom
   ============================================ */
.betonvloer-card:hover img {
  transform: scale(1.1) !important;
}
.betonvloer-card:hover .btn--hover{
     background:var(--color-secondary);
     color:#FFF;
}

/* ============================================
   REALISATIE SLIDER CARDS - Met Overlay
   ============================================ */
.realisatie-slider-card {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.realisatie-slider-card__wrapper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: 500px;
  border-radius: 32px;
  border: 7px solid var(--color-primary);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Background image layer */
.realisatie-slider-card__wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: inherit;
  z-index: 0;
  transition: transform 0.4s ease;
}

.realisatie-slider-card:hover .realisatie-slider-card__wrapper::after {
  transform: scale(1.1);
}

/* Overlay layer met primary color */
.realisatie-slider-card__wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-primary);
  opacity: 0;
  border-radius: 25px;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.realisatie-slider-card__wrapper > * {
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.realisatie-slider-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.realisatie-slider-card__content h3 {
  margin: 0;
}

.realisatie-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.realisatie-tag {
  background-color: transparent;
  color: #fff;
  border:1px solid white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;

}

/* Hover effects */
.realisatie-slider-card:hover .realisatie-slider-card__wrapper::before {
  opacity: 0.7;
}

.realisatie-slider-card:hover .realisatie-slider-card__wrapper > * {
  opacity: 1;
}


.gsap-slider {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-flow: column;
  align-items: center;
  width: 100%;
  padding-right: 5vw;
  display: flex;
  position: relative;
  overflow: hidden;
}

.gsap-slider__collection {
  width: 100%;
  max-width: 72em;
}

.gsap-slider__list {
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
  touch-action: pan-y;
  backface-visibility: hidden;
  display: flex;
}

.gsap-slider__item {
  width: calc(((100% - 1px)  - (var(--slider-spv)  - 1) * var(--slider-gap)) / var(--slider-spv));
  margin-right: var(--slider-gap);
  flex: none;
}

.demo-card {
  background-color: #2c2c2c;
  border: 1px solid #2c2c2c;
  border-radius: 1.5em;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.before__125 {
  padding-top: 125%;
}

.osmo-icon-svg {
  opacity: .1;
  width: 40%;
  position: absolute;
}

.demo-card__tag {
  position: absolute;
  top: 2em;
  left: 2em;
}

.demo-card__tag-p {
  margin-bottom: 0;
  font-size: 2em;
  line-height: 1;
}

/* Setup */

[data-gsap-slider-init] {
  --slider-status: on; /* Turn slider on/off */
  --slider-spv: 2; /* Slides per view */
  --slider-gap: 1.5em; /* Slides Gap */
}

@media screen and (max-width: 991px) {
   [data-gsap-slider-init] {
    --slider-status: on; /* Turn slider on/off */
    --slider-spv: 2; /* Slides per view */ 
    --slider-gap: 1.5em; /* Slides Gap */
  } 
}

@media screen and (max-width: 767px) {
  [data-gsap-slider-init] { 
    --slider-status: on; /* Turn slider on/off */
    --slider-spv: 1.15; /* Slides per view */ 
    --slider-gap: 1em; /* Gap */
  }
}

[data-gsap-slider-item]:last-child {
  margin-right: 0;
}

/* Controls */

.gsap-slider__controls {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.gsap-slider__control {
  color: #000;
  background-color: #FFF;
  border: 1px solid #FFF;
  border-radius: 17px;
  padding: .75em 1.5em;
  font-size: 1em;
}
.gsap-slider__control:hover{
     background:var(--color-primary);
     border-color:var(--color-primary);
     cursor:pointer;
}
.gsap-slider__control:hover svg{
     filter: invert(1);
}

[data-gsap-slider-status="not-active"] [data-gsap-slider-controls] {
  display: none;
}

[data-gsap-slider-control-status="not-active"] { 
  opacity: 0.2;
  pointer-events: none;
}

/* Customization */

.gsap-slider__control {
  transition: opacity 0.3s ease;
}

.demo-card {
  transition: all 0.3s ease;
}

[data-gsap-slider-item-status="not-active"] .demo-card {
  background-color: #131313;
}

.demo-card__tag {
  transition: all 0.3s ease;
}

[data-gsap-slider-item-status="not-active"] .demo-card__tag {
  opacity: 0;
}

/* ============================================
   LOGO SLIDER - Auto Infinite Scroll
   ============================================ */
.logo-slider-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.logo-slider {
  display: flex;
  gap: 4rem;
  width: fit-content;
}

.logo-slider__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-slider__item img {
  max-width: 200px;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease;
}

.logo-slider__item img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ============================================
   REALISATIES ARCHIVE - Filter & Grid
   ============================================ */

.filter-btn{
  border:none;
  color: var(--color-primary);
  background:transparent;
      font-size: var(--font-size);
	font-family:'Geologica';
}

.filter-btn:hover,
.filter-btn.active {
  background:#D6BEA8;
  border-color:#D6BEA8;
  color: var(--color-primary);
  cursor:pointer;
}

/* Realisaties Grid */
.realisaties-grid {
  margin: 0;
}

.realisatie-card {
  transition: all 0.3s ease;
}

/* Mobile responsive - 1 column */
@media screen and (max-width: 767px) {
  .realisatie-card {
    flex: 0 0 100% !important;
  }
}

/* Tablet responsive - 2 columns */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .realisatie-card {
    flex: 0 0 calc(50% - 16px) !important;
  }
}

/* Pagination */
.pagination {
  margin-top: 4rem;
}

.pagination-btn {
  text-decoration: none;
  cursor: pointer;
  font-weight: 300;
}

.pagination-btn:hover {
  color: #fff;
}

/* ============================================
   BETONVLOEREN NAVIGATION
   ============================================ */

/* Scroll anchor offset for betonvloeren items */
.betonvloer-item {
  padding-top: 128px;
  margin-top: -64px;
  position: relative;
  z-index: 1;
}

/* Desktop: Show buttons, hide dropdown */
.betonvloeren-nav-mobile {
  display: none;
}

.betonvloeren-nav-desktop {
  display: flex;
}

/* Mobile: Show dropdown, hide buttons */
@media screen and (max-width: 768px) {
  .betonvloeren-nav-desktop {
    display: none;
  }

  .betonvloeren-nav-mobile {
    display: block;
  }

  #betonvloeren-dropdown {
    appearance: none;
    cursor: pointer;
    font-size: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2395510c' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    padding-right: 3rem;
  }
}

/* ============================================
   REALISATIES FILTER NAVIGATION
   ============================================ */

/* Desktop: Show buttons, hide dropdown */
.realisaties-filter-mobile {
  display: none;
}

.realisaties-filter-desktop {
  display: flex;
}

/* Mobile: Show dropdown, hide buttons */
@media screen and (max-width: 768px) {
  .realisaties-filter-desktop {
    display: none;
  }

  .realisaties-filter-mobile {
    display: block;
  }

  #realisaties-filter-dropdown {
    appearance: none;
    cursor: pointer;
    font-size: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2395510c' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    padding-right: 3rem;
  }
}

.breadcrumbs a, .breadcrumbs{
 color:#A3A3A3;
 text-transform:uppercase;
 font-size:18px;
}
.breadcrumbs  .sector-active{
 color:#000000;
}

.page-template-page-contact {
  background:#F7F7F7;
}
.wpforms-field-label, .wpforms-required-label{
  color:var(--color-primary) !important;
  font-weight:400 !important;
}

.wpforms-submit{
  float:right !important;
  background:var(--color-primary) !important;
  border-radius:100px !important;
  text-transform:uppercase !important;
  font-weight:400 !important;
}

.home #main-header{
display:none !important;
}