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

/* ================================
   Blockquote typografie
   ================================ */

/* Basisstijl voor alle apparaten */
blockquote p,
blockquote ul,
blockquote ol {
    font-size: 22px;
	font-weight: 300;
    line-height: 36px;
}

/* Laptop / Desktop (≥ 1600px) */
@media (min-width: 1600px) {
    blockquote p,
blockquote ul,
blockquote ol{
    font-size: 22px;
	font-weight: 300;
    line-height: 36px;
    }
}

/* Tablet (768px – 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    blockquote p,
blockquote ul,
blockquote ol {
        font-size: 18px;
        line-height: 28px;
    }
}

/* Mobiel (≤ 755px) */
@media (max-width: 755px) {
    blockquote p,
blockquote ul,
blockquote ol {
        font-size: 17px;
        line-height: 27px;
    }
}

/* Highlight */
.highlight {
    font-weight: 700;
    display: inline-block;
    transform: scale(1.30);
    transform-origin: left center;
}

/* Center helper */
.center {
    margin-bottom: auto;
    margin-top: auto;
}

/* Floating animation */
.floating {
    display: inline-block;
    animation: float 3s linear infinite;
}
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* Inline text background */
.text-bg-inline p,
.text-bg-inline span {
    display: inline-block;
    background-color: #008037;
    padding: 10px 17px;
}

/* Owl dots */
.dotstyle_circle .owl-dot.active span {
    box-shadow: 0 0 0 2px #008037;
}

/* Person trendy layout */
.w-person.layout_trendy .w-person-content {
    background: none;
}

/* ================================
   STREEP ONDER TEKST (SUBTIEL)
   ================================ */

/* Zorgt dat de streep netjes onder korte tekst blijft */
.streepgroen,
.streeporanje,
.streepwit {
    position: relative;
    display: inline-block;
}

/* Basis streep */
.streepgroen::after,
.streeporanje::after,
.streepwit::after {
    content: "";
    display: block;
    width: 45px;
    height: 5px;

    /* default: headings (h1/h2) */
    margin-top: 10px;

    /* subtiele reveal animatie links -> rechts */
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0.9;
    animation: streepRevealSubtiel 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.15s;
}

/* Kleuren */
.streepgroen::after { background: #008037; }
.streeporanje::after { background: #EC621A; }
.streepwit::after { background: #fff; }

/* Gewone tekst: streep dichter op de tekst */
.streepgroen:not(h1):not(h2)::after,
.streeporanje:not(h1):not(h2)::after,
.streepwit:not(h1):not(h2)::after {
    margin-top: 0px;
    opacity: 0.85; /* net iets subtieler op bodytekst */
}

/* Animatie */
@keyframes streepRevealSubtiel {
    0%   { transform: scaleX(0); opacity: 0; }
    40%  { opacity: 0.75; }
    100% { transform: scaleX(1); opacity: 0.9; }
}

/* Respecteer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .streepgroen::after,
    .streeporanje::after,
    .streepwit::after {
        animation: none;
        transform: scaleX(1);
        opacity: 0.9;
    }
}

/* ================================
   ACCORDEON / TABS
   ================================ */

/* Grijze overlay accordeon */
.w-tabs-section-header::before,
.w-tabs-section-header::after {
    background: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

/* Als er een achtergrondkleur zit op het button-element zelf */
.w-tabs-section-header {
    background: transparent !important;
}

/* Accordeon tabjes */
.w-tabs.style_simple3 > .w-tabs-list .w-tabs-item:focus,
.w-tabs.style_simple3 > .w-tabs-list .w-tabs-item.active,
.no-touch .w-tabs.style_simple3 > .w-tabs-list .w-tabs-item:hover {
    background: #EC621A;
    color: #fff;
}
.w-tabs.style_simple3 > .w-tabs-list .w-tabs-item {
    padding: .8em 1.2em;
    border-radius: 0em;
    background-color: #3D3D3D;
    color: #fff;
}

/* ================================
   Buttons automatisch schalen
   ================================ */
.us-nav-style_3 > *,
.navstyle_3 > .owl-nav button,
.us-btn-style_3 {
    font-size: clamp(14px, 1.2vw, 17px);
}
.us-nav-style_2 > *,
.navstyle_2 > .owl-nav button,
.us-btn-style_2 {
    font-size: clamp(14px, 1.2vw, 17px);
}
.us-nav-style_4 > *,
.navstyle_4 > .owl-nav button,
.us-btn-style_4 {
    font-size: clamp(14px, 1.2vw, 17px);
}
.us-nav-style_1 > *,
.navstyle_1 > .owl-nav button,
.us-btn-style_1 {
    font-size: clamp(14px, 1.2vw, 17px);
}

/* Long word fix */
.longword-fix {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
}


/* ================================
   Mobiel menu
   ================================ */
@media (max-width: 755px) {
    .l-subheader.at_top,
    .l-subheader.at_top .w-dropdown-list,
    .l-subheader.at_top .type_mobile .w-nav-list.level_1 {
        background: #EC621A;
    }
}

@media (max-width: 755px) {
    .w-tabs-section-title {
        text-transform: uppercase;
    }
    .w-tabs-section-header {
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 10px;
        padding-top: 10px;
    }
}

/* ================================
   Planningtijdlijn (shortcode)
   ================================ */
.ponck-planning{
  --green:#008037;
  --text:#222;
  --muted:#666;
  --marker:44px;     /* diameter cirkel */
  --line:6px;        /* lijn-dikte */
  --gap:28px;
  margin: 40px 0;
}

.ponck-planning__title{
  margin: 0 0 18px;
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 28px;
  color: var(--text);
}

/* horizontaal */
.ponck-planning__track{
  list-style:none;
  padding:0;
  margin:0;
  position:relative;
  display:flex;
  gap: var(--gap);
  justify-content: space-between;
}

/* groene lijn achter de markers (desktop) */
.ponck-planning__track::before{
  content:"";
  position:absolute;
  top: calc(var(--marker) / 2 - var(--line) / 2);
  left: calc(var(--marker) / 2);
  height: var(--line);
  background: var(--green);
  border-radius: 999px;
  z-index: 1;
  pointer-events:none;

  /* ALTIJD een geldige width: teken tot midden laatste bol (fallback) */
  width: calc(100% - var(--marker));
}

/* Als --count aanwezig is en > 1, overschrijf width met exacte stop-positie */
.ponck-planning__track[style*="--count"]::before{
  width: calc(
    100% - (
      ((100% - (var(--gap) * (var(--count) - 1))) / var(--count)) - (var(--marker) / 2)
    ) - (var(--marker) / 2)
  );
}

.ponck-planning__item{
  flex:1;
  min-width:0;
  position:relative;
}

/* marker: standaard TODO = open cirkel */
.ponck-planning__marker{
  width: var(--marker);
  height: var(--marker);
  border-radius: 999px;
  background:#fff;
  border:6px solid var(--green);
  display:grid;
  place-items:center;
  position:relative;
  z-index:2;
}

/* DONE: groen gevuld + witte vink */
.ponck-planning__item.is-done .ponck-planning__marker{
  background: var(--green);
}

.ponck-planning__check{
  color:#fff;
  font-weight:900;
  font-size:20px;
  line-height:1;
}

.ponck-planning__item-title{
  margin:16px 0 10px;
  font-size:16px;
  font-weight:900;
  text-transform:uppercase;
  color: var(--text);
}

.ponck-planning__item-text{
  color: var(--muted);
  font-size:14px;
  line-height:1.55;
}

/* ===== Mobiel: verticaal ===== */
@media (max-width: 767px){
  .ponck-planning{
    --v-gap:22px;        /* moet matchen met gap hieronder */
    --axis-shift:0px;    /* kleine correctie: lijn iets naar links */
  }

  .ponck-planning__track{
    flex-direction:column;
    gap: var(--v-gap);
    padding-left: 0;
  }

  /* track-lijn uitzetten op mobiel */
  .ponck-planning__track::before{
    content:none;
  }

  .ponck-planning__item{
    padding-left: calc(var(--marker) + 16px);
  }

  .ponck-planning__marker{
    position:absolute;
    left:0;
    top:0;
  }

  /* connector per item (behalve laatste) */
  .ponck-planning__item:not(:last-child)::after{
    content:"";
    position:absolute;

    /* door het midden van de bol, met kleine optische correctie naar links */
    left: calc((var(--marker) / 2) - (var(--line) / 2) - var(--axis-shift));

    /* start vanaf midden van de bol */
    top: calc(var(--marker) / 2);

    /* tot aan het midden van de volgende bol:
       huidige item hoogte + gap */
    height: calc(100% + var(--v-gap));

    width: var(--line);
    background: var(--green);
    border-radius: 999px;
  }

  .ponck-planning__item-title{
    margin-top:0;
  }
}