/*
Theme Name: PONCK Theme
Template: Impreza
Version: 1.0
Author:	PONCK | The Web Company
Theme URI: https://ponck.nl/
Author URI: https://ponck.nl/
*/

/* =========
 * Arrow buttons
 * ========= */
/* Basis */
.btn-arrow-right,
.btn-arrow-left,
.arrow-right-orange {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: gap 0.2s ease;
}

/* Algemene icon styling */
.btn-arrow-right::after,
.arrow-right-orange::after,
.btn-arrow-left::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    line-height: 1;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rechter pijl */
.btn-arrow-right::after,
.arrow-right-orange::after {
    content: "\f061";
}

/* Linker pijl */
.btn-arrow-left::before {
    content: "\f060";
}

/* Oranje variant */
.arrow-right-orange::after {
    color: #EC6608;
}

/* Hover */
.btn-arrow-right:hover,
.btn-arrow-left:hover,
.arrow-right-orange:hover {
    gap: 12px;
}

.btn-arrow-right:hover::after,
.arrow-right-orange:hover::after {
    transform: translateX(6px);
}

.btn-arrow-left:hover::before {
    transform: translateX(-6px);
}

/* =========
 * class voor placeholder zichtbaarheid
 * ========= */
.full-placeholder input::placeholder,
.full-placeholder textarea::placeholder {
    opacity: 1 !important;
    color: inherit !important;
}

/* =========
 * class voor grayscale logo's
 * ========= */
.logo-grayscale img {
    filter: grayscale(100%);
    opacity: 0.4;
    transition: all 0.3s ease;
}

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

/* =========
 * class om content binnen de box te houden ondanks dat de rij full-width is
 * ========= */
.box-content > .vc_column-inner {
    padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}

/* =========
 * class voor oranje strepen
 * ========= */
.heading-accent::before,
h1::before {
    content: "";
    display: block;
    width: 90px;
    height: 6px;
    margin-bottom: 18px;

    background-image:
        linear-gradient(#EC6608, #EC6608),
        linear-gradient(#EC6608, #EC6608),
        linear-gradient(#EC6608, #EC6608);
    background-repeat: no-repeat;
    background-position: left center, 35px center, 70px center;
    background-size: 0 6px, 0 6px, 0 6px;
}

.heading-accent.in-view::before,
h1.in-view::before {
    animation: headingLinesReveal 0.75s ease forwards;
    animation-delay: 0.1s;
}

@keyframes headingLinesReveal {
    0% {
        background-size: 0 6px, 0 6px, 0 6px;
    }
    30% {
        background-size: 20px 6px, 0 6px, 0 6px;
    }
    65% {
        background-size: 20px 6px, 20px 6px, 0 6px;
    }
    100% {
        background-size: 20px 6px, 20px 6px, 20px 6px;
    }
}

/* =========
 * De streepjes voor alle links global
 * ========= */

/* ====== Basis ====== */
.l-main a:not(.w-btn):not(.no-underline),
.link-accent a {
    position: relative;
    text-decoration: none;
    display: inline-block;
}

/* ====== Streepjes ====== */
.l-main a:not(.w-btn):not(.no-underline)::after,
.link-accent a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;

    width: 90px;
    max-width: 100%;
    height: 2px;

    background-image:
        linear-gradient(#EC6608, #EC6608),
        linear-gradient(#EC6608, #EC6608),
        linear-gradient(#EC6608, #EC6608);

    background-repeat: no-repeat;
    background-position: left center, 32px center, 64px center;

    background-size: 0 2px, 0 2px, 0 2px;
}

/* ====== Hover animatie ====== */
.l-main a:not(.w-btn):not(.no-underline):hover::after,
.link-accent a:hover::after {
    animation: linkLinesReveal 0.5s ease forwards;
}

/* ====== Keyframes ====== */
@keyframes linkLinesReveal {
    0% {
        background-size: 0 2px, 0 2px, 0 2px;
    }
    30% {
        background-size: 18px 2px, 0 2px, 0 2px;
    }
    65% {
        background-size: 18px 2px, 18px 2px, 0 2px;
    }
    100% {
        background-size: 18px 2px, 18px 2px, 18px 2px;
    }
}

/* =========
 * Achtergrond fullwidth en content in standaard contentbreedte
 * ========= */
/* Full width in element */
.full-width-breakout {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Full width background in collumn */
.full-bg-column {
  position: relative;
  z-index: 1;
}

/* Full width background */
.stretch-right-bg {
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Achtergrondafbeelding die naar rechts doorloopt */
.stretch-right-bg::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc((100vw - 100%) / -2);
  background-image: url('/wp-content/uploads/2026/03/foto-10-klein-1-scaled.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
}

/* Oranje overlay */
.stretch-right-bg::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: calc((100vw - 100%) / -2);
  background: rgba(236,102,8,0.9);
  z-index: -1;
}

@media (max-width: 768px) {

  .stretch-right-bg::before,
  .stretch-right-bg::after {
    right: 0; /* geen stretch meer */
  }

}

/* =========
 * Basis class voor streepjes onderaan de row
 * ========= */
.roadstripes {
    position: relative;
    overflow: visible;
    z-index: 2;
}

.roadstripes::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    z-index: 3;
    pointer-events: none;

    background: repeating-linear-gradient(
        to right,
        #ffffff 0px,
        #ffffff var(--stripe-length, 15px),
        transparent var(--stripe-length, 15px),
        transparent calc(var(--stripe-length, 15px) + var(--stripe-gap, 15px))
    );
}

/* =========
 * Home-variant
 * ========= */
.roadstripes-home::after {
    display: none;
}

.roadstripes-home .l-section-shape.type_custom.pos_bottom {
    overflow: visible;
}

.roadstripes-home .l-section-shape.type_custom.pos_bottom::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    z-index: 4;
    pointer-events: none;
    transform: translateY(-2px);

    background: repeating-linear-gradient(
        to right,
        #ffffff 0px,
        #ffffff var(--stripe-length, 15px),
        transparent var(--stripe-length, 15px),
        transparent calc(var(--stripe-length, 15px) + var(--stripe-gap, 15px))
    );
}
om.pos_bottom::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    z-index: 4;
    pointer-events: none;

    background: repeating-linear-gradient(
        to right,
        #ffffff 0px,
        #ffffff var(--stripe-length, 15px),
        transparent var(--stripe-length, 15px),
        transparent calc(var(--stripe-length, 15px) + var(--stripe-gap, 15px))
    );
}