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

:root {
    --radius-default: 0.5em;
    --shadow-soft: 1px 1px 3px 3px rgba(0, 0, 0, 0.08);
}

/* Globaal voor alle afbeeldingen behalve uitgesloten */
img:not(.no-shadow):not(.logo-no-shadow) {
    border-radius: var(--radius-default);
    box-shadow: var(--shadow-soft);
}

/* Herbruikbare shadow class */
.boxshadow {
    box-shadow: var(--shadow-soft);
}

/* Uitsluit class */
img.no-shadow,
.no-shadow img {
    box-shadow: none !important;
    border-radius: 0 !important;
}

.center {
	margin-bottom: auto;
	margin-top: auto;
}
/* Buttons automatisch schalen */
.us-nav-style_3 > *, 
.navstyle_3 > .owl-nav button, 
.us-btn-style_3 {
    font-size: clamp(13px, 1.2vw, 17px);
}
.us-nav-style_2 > *, 
.navstyle_2 > .owl-nav button, 
.us-btn-style_2 {
    font-size: clamp(13px, 1.2vw, 17px);
}
.us-nav-style_1 > *, 
.navstyle_1 > .owl-nav button, 
.us-btn-style_1 {
    font-size: clamp(13px, 1.2vw, 17px);
}

/* GF buttons stylen */
/* ===============================
   BASIS STYLING (beide knoppen)
================================ */

.gform_wrapper input.gform_next_button,
.gform_wrapper input.gform_previous_button {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;

    border-radius: 0.5em;
    padding: 0.9em 2.4em; /* extra ruimte voor icon */
    font-weight: 600;
    line-height: 1.2;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;

    background-color: #1A85E8;
    color: #fff;

    box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.08);
}

/* Hover */
.gform_wrapper input.gform_next_button:hover,
.gform_wrapper input.gform_previous_button:hover {
    transform: translateY(-2px);
    opacity: .95;
}


/* ===============================
   NEXT BUTTON CHEVRON (rechts)
================================ */

.gform_wrapper input.gform_next_button {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='#fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6l6 6-6 6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9em center;
}


/* ===============================
   PREVIOUS BUTTON STYLING
================================ */

/* Kleinere subtiele shadow */
.gform_wrapper input.gform_previous_button {
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.08);
}

/* Chevron links */
.gform_wrapper input.gform_previous_button {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 6l-6 6 6 6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.9em center;
}

/* ===============================
   Benefits bar in Impreza header
================================ */

.benefits-bar{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* alles gecentreerd */
  gap: 40px !important; /* ruimte tussen slider en telefoon */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.benefits-left{
  flex: 0 1 320px !important;
  min-width: 0 !important;
}

.benefits-right{
  flex: 0 0 auto !important;
  min-width: auto !important;
  text-align: right !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* ===============================
   Slider
================================ */

.benefits-track{
  position: relative;
  height: 1.5em;
  overflow: hidden;
  min-width: 0 !important;
  width: 320px;
  max-width: 320px;
}

.benefits-track .benefit-item{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation-name: slideRotate4 !important;
  animation-duration: 12s !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
}

/* exact 4 items */
.benefits-track .benefit-item:nth-child(1){
  animation-delay: 0s !important;
}

.benefits-track .benefit-item:nth-child(2){
  animation-delay: 3s !important;
}

.benefits-track .benefit-item:nth-child(3){
  animation-delay: 6s !important;
}

.benefits-track .benefit-item:nth-child(4){
  animation-delay: 9s !important;
}

/* eventuele extra items uitschakelen */
.benefits-track .benefit-item:nth-child(n+5){
  display: none !important;
}

@keyframes slideRotate4{
  0%   { opacity: 0; transform: translateY(10px); }
  4%   { opacity: 1; transform: translateY(0); }
  21%  { opacity: 1; transform: translateY(0); }
  25%  { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.benefits-track .check{
  color: #1A85E8;
  font-weight: 700;
  margin-right: 0.4em;
}

.benefits-contact,
.benefits-contact strong,
.benefits-contact a{
  white-space: nowrap !important;
}

.benefits-contact a{
  color: #1A85E8;
  text-decoration: none;
}

/* ===============================
   Impreza wrappers
================================ */

.l-header .w-html,
.l-header .w-text{
  width: 100% !important;
  max-width: 100% !important;
}

/* ===============================
   Tablet
================================ */

@media (max-width: 1024px){

  .l-header .benefits-bar{
    justify-content: center !important;
    gap: 24px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .l-header .benefits-left{
    flex: 0 1 280px !important;
    min-width: 0 !important;
  }

  .l-header .benefits-track{
    width: 280px !important;
    max-width: 280px !important;
  }

  .l-header .benefits-right{
    font-size: 0.95rem !important;
  }
}

/* ===============================
   Mobiel
================================ */

@media (max-width: 600px){

  .l-header .benefits-bar{
    justify-content: center !important;
    gap: 12px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .l-header .benefits-left{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .l-header .benefits-track{
    width: 52vw !important;
    max-width: 52vw !important;
  }

  .l-header .benefits-track .benefit-item{
    font-size: 0.9rem !important;
  }

  .l-header .benefits-right{
    flex: 0 0 auto !important;
    font-size: 0.84rem !important;
  }
}

  /* Accordeon pijltjes */
.w-tabs-sections.cpos_right>div>.w-tabs-section-header .w-tabs-section-control {
    color: #1A85E8;
}
.punctuation-highlight {
    color: #000;
}
.w-nav.type_desktop .w-nav-anchor.level_1 .w-nav-arrow:before {
    color: #1A85E8;
}
.gform_wrapper .gform_page_footer .gform_next_button {
    background: #1A85E8;
}

.no-link-underline a {
    text-decoration: none !important;
}

/* Voor Impreza underline (pseudo-element) */
.no-link-underline a::after {
    display: none !important;
    content: none !important;
}

/* Soms gebruikt Impreza ook border-bottom */
.no-link-underline a {
    border-bottom: none !important;
}