/*
 Theme Name: Kadence Child
 Template: kadence
*/

/* =========================================================
   SO PR
   CHILD THEME STYLESHEET
   =========================================================

   INHOUDSOPGAVE

   1. GLOBAL & LAYOUT
   2. HEADER & NAVIGATION
   3. CASEPAGINA’S
   4. BUTTONS & LINKS
   5. GALLERY NAVIGATION
   6. GALLERY NAVIGATION — LEGACY
   7. VIDEO & MEDIA
   8. ESSENTIAL GRID & LIGHTBOX
   9. ACCORDIONS & TOGGLES
   10. ANIMATIES & HOVER EFFECTEN
   11. NEWS PAGINATION

   Responsive regels staan bij het bijbehorende onderdeel.
   Nieuwe eigen classes beginnen met so-. Bestaande classnamen
   blijven behouden voor bestaande pagina’s en snippets.
   Hoofdstuk 6 ondersteunt galleries met de oude gallery-row-class.
   ========================================================= */

/* Fontimports moeten vóór alle stijlregels staan. */
@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");


/* =========================================================
   1. GLOBAL & LAYOUT
   ========================================================= */

/* =========================================
  SECTIE BREEDTE INHOUD
   ========================================= */
.so-content-380 > .kt-inside-inner-col > * {
    max-width: 380px;
}

/* ==== TITEL POPPINS Kadence Berichtenblok ==== */
.entry-content :is(h2, h3).entry-title > a[rel="bookmark"],

/* WordPress Query Loop / Berichttemplate */
.entry-content .wp-block-query .wp-block-post-title,
.entry-content .wp-block-query .wp-block-post-title > a {
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
}

/* CLASS ROW LAY-OUT-inhoud links uitlijnen */
.row-inhoud-links .kt-row-column-wrap {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* CLASS ROW LAY-OUT-inhoud rechts uitlijnen */
.row-inhoud-rechts .kt-row-column-wrap {
  margin-left: auto !important;
  margin-right: 0 !important;
}


/* =========================================================
   2. HEADER & NAVIGATION
   ========================================================= */

/* HEADER | LOGO ALIGNMENT & OVERLAP */
@media (min-width: 768px) {
  .site-main-header-inner-wrap {
    height: 110px;
    min-height: 110px;
    overflow: visible;
  }

  .site-main-header-inner-wrap .site-header-item {
    max-height: 120px;
  }

  .site-branding,
  .site-branding a.brand {
    overflow: visible;
  }

  .site-branding a.brand img.custom-logo {
    position: relative;
    top: -1px;
    z-index: 20;
  }

  /* Sticky header */
  .site-main-header-wrap.item-is-fixed.item-is-stuck .site-main-header-inner-wrap {
    height: 70px;
    min-height: 70px;
  }

  .site-main-header-wrap.item-is-fixed.item-is-stuck .site-header-item {
    max-height: 70px;
  }

  .site-main-header-wrap.item-is-fixed.item-is-stuck .site-branding a.brand img.custom-logo {
    top: 0;
    max-width: 70px;
  }
}

/* MOBILE CANVAS LOGO MENU   */

.mobile-drawer-logo img {
  max-width: 125px;
  height: auto;
}


/* =========================================================
   3. CASEPAGINA’S
   ========================================================= */

/* === CASE TITEL - : MARGIN/PADDING === */
:is(body.single-case, body.single-cases) h1.entry-title {
  width: 100%;
  max-width: 1500px !important;
  margin-inline: auto !important;
  padding-inline: var(--global-content-edge-padding, 24px);
  box-sizing: border-box;
}

/* === CATEGORY LABEL — Casepagina === */

:is(.single-case, .single-cases)
.entry-taxonomies
.category-links.category-style-pill > a[rel="tag"] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 0;
    background-color: #161616;
color: #fff;
    border: none;
    box-shadow: none;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
}

/* Hover en toetsenbordfocus */
:is(.single-case, .single-cases)
.entry-taxonomies
.category-links.category-style-pill > a[rel="tag"]:is(:hover, :focus-visible) {
    background-color: #ff1566 ;
    color: #fff ;
}

/* Afstand tussen categorie en titel */
:is(.single-case, .single-cases) .entry-taxonomies {
    margin-bottom: 1.5rem;
}

/* CASE RESULT NUMBER COUNT */
.case-results .kb-count-up-number {
    font-size: clamp(52px, 5vw, 64px);
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   4. BUTTONS & LINKS
   ========================================================= */

/* === CTA LINK | ARROW HOVER ANIMATION === */
.so-cta-link .kb-svg-icon-wrap {
    transition: transform .25s ease;
}

.so-cta-link:hover .kb-svg-icon-wrap {
    transform: translateX(6px);
}

/* --- CASE POST | BACK TO CASES --- */

.back-to-cases {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin: 40px auto 0 0;

    border: 1px solid #000;
    border-radius: 999px;

    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-transform: none;
    text-decoration: none;
    color: #000;

    transition: color .2s ease, border-color .2s ease;
}

.back-to-cases .kb-svg-icon-wrap {
    display: inline-flex;
    transition: transform .25s ease;
}

.back-to-cases .kb-svg-icon-wrap svg {
    width: 1em;
    height: 1em;
}

.back-to-cases:is(:hover, :focus-visible) {
    color: #ff1566;
    border-color: #ff1566;
}

.back-to-cases:is(:hover, :focus-visible) .kb-svg-icon-wrap {
    transform: translateX(-4px);
}

:is(.single-case, .single-cases) a.back-to-cases {
    padding: 3px 15px !important;
}


/* =========================================================
   5. GALLERY NAVIGATION
   ========================================================= */

/* =========================================
   SO GALLERY NAVIGATION
   Class op het galerijblok: so-gallery-nav
   ========================================= */

/* Instellingen */
.so-gallery-nav {
    --so-arrow-size: 48px;
    --so-arrow-gap: 10px;
    --so-controls-gap: 20px;
    --so-arrow-color: #ff1764;

    --so-controls-width: calc(
        var(--so-arrow-size) +
        var(--so-arrow-size) +
        var(--so-arrow-gap)
    );
}

/* Galerij */
.so-gallery-nav.wp-block-kadence-advancedgallery {
    min-width: 0;
    max-width: 100%;
    margin-bottom: 0;
}

/* Afbeeldingen en navigatie op aparte rijen */
.so-gallery-nav .kt-blocks-carousel.splide {
    display: grid;
    grid-template-columns:
        var(--so-controls-width)
        minmax(0, 1fr)
        var(--so-controls-width);
    gap: var(--so-controls-gap) 16px;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Afbeeldingen over de volledige breedte */
.so-gallery-nav .kt-blocks-carousel > .splide__track {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
}

/* Beide knoppen als groep rechts */
.so-gallery-nav .kt-blocks-carousel > .splide__arrows {
    position: static;
    grid-column: 3;
    grid-row: 2;
    align-self: center;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--so-arrow-gap);
}

/* Ronde knoppen */
.so-gallery-nav .splide__arrows > .splide__arrow {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--so-arrow-size);

    width: var(--so-arrow-size) !important;
    height: var(--so-arrow-size) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;

    color: var(--so-arrow-color) !important;
    background: transparent !important;
    border: 1px solid var(--so-arrow-color) !important;
    border-radius: 50% !important;
    opacity: 1;

    transition:
        color .2s ease,
        background-color .2s ease;
}

/* Pijlen — bestaande richting behouden */
.so-gallery-nav .splide__arrow svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
    stroke: none;
}

/* Hover */
.so-gallery-nav .splide__arrow:hover:not(:disabled) {
    color: #fff !important;
    background: var(--so-arrow-color) !important;
}

/* Toetsenbordfocus */
.so-gallery-nav .splide__arrow:focus-visible {
    outline: 2px solid var(--so-arrow-color);
    outline-offset: 4px;
}

/* Niet-beschikbare knop */
.so-gallery-nav .splide__arrow:disabled {
    opacity: .35;
    cursor: default;
}

/* Dots gecentreerd ten opzichte van de hele gallery */
.so-gallery-nav .kt-blocks-carousel > .splide__pagination {
    position: static !important;
    inset: auto !important;
    transform: none !important;

    grid-column: 2;
    grid-row: 2;
    align-self: center;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}


/* =========================================================
   6. GALLERY NAVIGATION — LEGACY
   ========================================================= */

/* =========================================
   Kadence galerij – knoppen onder afbeelding
   ========================================= */

/* Alle instellingen op één plek */
.gallery-row {
  /* Ruimte en afmetingen */
  --gallery-controls-space: 70px;
  --gallery-arrow-bottom: -60px;
  --gallery-arrow-size: 48px;
  --gallery-arrow-padding: 12px;
  --gallery-arrow-gap: 10px;
  --gallery-arrow-right: 10px;

  /* Normale kleuren */
  --gallery-arrow-color: #ff1764;
  --gallery-arrow-background: #ffffff;
  --gallery-arrow-border: #ff1764;

  /* Hoverkleuren */
  --gallery-arrow-hover-color: #ffffff;
  --gallery-arrow-hover-background: #ff1764;
  --gallery-arrow-hover-border: #ff1764;
}


/* Galerij */
.gallery-row .wp-block-kadence-advancedgallery {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: var(--gallery-controls-space);
  padding-bottom: 0;
  box-sizing: border-box;
  overflow: visible;
}


/* Beide navigatieknoppen */
.gallery-row .wp-block-kadence-advancedgallery .slick-prev,
.gallery-row .wp-block-kadence-advancedgallery .slick-next {
  /* Onder de afbeelding plaatsen */
  top: auto !important;
  bottom: var(--gallery-arrow-bottom) !important;
  left: auto !important;
  transform: none !important;
  z-index: 10;

  /* Afmetingen */
  width: var(--gallery-arrow-size) !important;
  height: var(--gallery-arrow-size) !important;
  padding: var(--gallery-arrow-padding) !important;
  box-sizing: border-box;

  /* Pijl centreren */
  display: flex !important;
  align-items: center;
  justify-content: center;

  /* Normale vormgeving */
  color: var(--gallery-arrow-color) !important;
  background-color: var(--gallery-arrow-background) !important;
  border: 1px solid var(--gallery-arrow-border) !important;
  border-radius: 50% !important;

  /* Animatie */
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}


/* Rechterknop */
.gallery-row .wp-block-kadence-advancedgallery .slick-next {
  right: var(--gallery-arrow-right) !important;
}


/* Linkerknop */
.gallery-row .wp-block-kadence-advancedgallery .slick-prev {
  right: calc(
    var(--gallery-arrow-right) +
    var(--gallery-arrow-size) +
    var(--gallery-arrow-gap)
  ) !important;
}


/* Standaard Kadence SVG-pijlen */
.gallery-row .wp-block-kadence-advancedgallery .slick-arrow svg {
  display: block;
  width: 20px;
  height: 20px;
  stroke: currentColor;
}


/* Hover en toetsenbordfocus */
.gallery-row .wp-block-kadence-advancedgallery .slick-prev:hover,
.gallery-row .wp-block-kadence-advancedgallery .slick-next:hover,
.gallery-row .wp-block-kadence-advancedgallery .slick-prev:focus-visible,
.gallery-row .wp-block-kadence-advancedgallery .slick-next:focus-visible {
  color: var(--gallery-arrow-hover-color) !important;
  background-color: var(--gallery-arrow-hover-background) !important;
  border-color: var(--gallery-arrow-hover-border) !important;
}


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

@media (max-width: 767px) {
  /*
   * Voorkomt dat de rij of galerij breder wordt
   * dan het mobiele scherm.
   */
  .gallery-row,
  .gallery-row .kt-row-column-wrap,
  .gallery-row .wp-block-kadence-column,
  .gallery-row .kt-inside-inner-col,
  .gallery-row .wp-block-kadence-advancedgallery {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /*
   * Gelijke kolomhoogte op mobiel uitschakelen.
   */
  .gallery-row .kt-row-column-wrap {
    align-items: start !important;
  }

  .gallery-row .kt-row-column-wrap > .wp-block-kadence-column {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }

  /*
   * Afbeeldingen mogen binnen de carousel schuiven,
   * maar niet buiten de galerij zichtbaar worden.
   */
  .gallery-row .wp-block-kadence-advancedgallery .slick-list {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /*
   * Knoppen binnen de mobiele schermbreedte houden.
   */
  .gallery-row .wp-block-kadence-advancedgallery .slick-next {
    right: 0 !important;
  }

  .gallery-row .wp-block-kadence-advancedgallery .slick-prev {
    right: calc(
      var(--gallery-arrow-size) +
      var(--gallery-arrow-gap)
    ) !important;
  }
}


/* =========================================================
   7. VIDEO & MEDIA
   ========================================================= */

/* Werkt voor WP Video én HTML5 Video Player */
.rounded-video {
    --video-radius: 35px;
    --video-border-width: 0px;
    --video-border-color: #181516;

    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: var(--video-radius) !important;
    clip-path: inset(0 round var(--video-radius));
    isolation: isolate;
}

/* Optionele rand */
.rounded-video.video-border {
    --video-border-width: 4px;

    border:
        var(--video-border-width)
        solid
        var(--video-border-color) !important;
}

/* Interne lagen van WP Video en voormalige HTML5/Plyr-plugin */
.rounded-video .wp-block-video,
.rounded-video .plyr_wrapper,
.rounded-video .plyr,
.rounded-video .plyr__video-wrapper,
.rounded-video video,
.rounded-video .plyr__poster {
    margin: 0;
    overflow: hidden !important;

    border-radius: calc(
        var(--video-radius) - var(--video-border-width)
    ) !important;
}


/* =========================================================
   8. ESSENTIAL GRID & LIGHTBOX
   ========================================================= */

/* ESSENTIAL-GRID-lightbox: gebruik het echte videoformaat */
.esgbox-slide--video .esgbox-content {
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    background: transparent !important;
}

/* Video passend binnen het beeldscherm */
.esgbox-slide--video .esgbox-video,
.esgbox-slide--video video {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: 82vh !important;
    object-fit: contain !important;
    background: transparent !important;
}

/* Verberg de lightboxvideo totdat het formaat bekend is */
.esgbox-slide--video .esgbox-content {
    opacity: 0;
}

/* Daarna rustig zichtbaar maken */
.esgbox-slide--video .esgbox-content.eg-video-ready {
    opacity: 1;
    transition: opacity 0.18s ease;
}

/* ===ESSENTIAL GRID Witte achtergrond zolang Vimeo autoplay-video nog laadt === */
.esg-entry-media:has(video source[src*="b-cdn.net"]),
.esg-entry-media:has(video[src*="b-cdn.net"]),
.esg-entry-media:has(video source[src*="player.vimeo.com"]),
.esg-entry-media:has(video[src*="player.vimeo.com"]),
.esg-entry-media video[src*="b-cdn.net"],
.esg-entry-media video[src*="player.vimeo.com"],
.esg-entry-media video:has(source[src*="b-cdn.net"]),
.esg-entry-media video:has(source[src*="player.vimeo.com"]) {
    background-color: #fff !important;
}

/* === ESSENTIAL GRID Verticale HTML5-video's Vimeo === */
.esg-entry-media:has(video source[src*="b-cdn.net"]),
.esg-entry-media:has(video[src*="b-cdn.net"]),
.esg-entry-media:has(video source[src*="player.vimeo.com"]),
.esg-entry-media:has(video[src*="player.vimeo.com"]) {
    padding-bottom: 177.7778% !important;
}

/* Laat de video de verticale 9:16-ruimte vullen */
.esg-entry-media video[src*="b-cdn.net"],
.esg-entry-media video[src*="player.vimeo.com"],
.esg-entry-media video:has(source[src*="b-cdn.net"]),
.esg-entry-media video:has(source[src*="player.vimeo.com"]) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ESSENTIAL GRID DARK OVERLAY — ALLEEN SO CASES */

/* Dark overlay only in idle state */
.eg-so-cases-wrapper .esg-media-cover-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.10);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Hide overlay on hover so the pink cover stays clean */
.eg-so-cases-wrapper .esg-media-cover-wrapper:hover::before {
  opacity: 0;
}

/* Keep case titles above the overlay */
.eg-so-cases-element-1 {
  position: relative;
  z-index: 5;
}

/* Case title readability */
.eg-so-cases-element-1,
.eg-so-cases-element-1 *,
.eg-so-cases-element-1-a,
.eg-so-cases-element-1-a * {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) !important;
}

/* === SO RESULTS | ESSENTIALGRID LIGHTBOX VERTICAL VIMEO 9:16 === */

.esgbox-container .esgbox-content:has(iframe[src*="player.vimeo.com"]) {
  width: min(90vw, 390px) !important;
  height: min(85vh, 693px) !important;
  max-width: 390px !important;
  max-height: 85vh !important;
  background: transparent !important;
}

.esgbox-container .esgbox-content:has(iframe[src*="player.vimeo.com"]) iframe {
  width: 100% !important;
  height: 100% !important;
}


/* =========================================================
   9. ACCORDIONS & TOGGLES
   ========================================================= */

/* ==========================================
   SO SERVICES | ACCORDION HOVER REFINEMENT
========================================== */

.so-services-accordion button.kt-blocks-accordion-header {
    transition:
        transform .28s ease,
        background-color .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.so-services-accordion .kt-blocks-accordion-title {
    transition:
        color .28s ease,
        letter-spacing .28s ease;
}

.so-services-accordion .kt-blocks-accordion-icon-trigger {
    transition:
        transform .28s ease,
        color .28s ease;
}

.so-services-accordion .kt-blocks-accordion-icon-trigger::before,
.so-services-accordion .kt-blocks-accordion-icon-trigger::after {
    transition:
        background-color .28s ease,
        height .28s ease,
        width .28s ease;
}

/* Hover */
.so-services-accordion button.kt-blocks-accordion-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(24,21,22,.025),
            0 8px 20px rgba(217,15,83,.035);
}

.so-services-accordion button.kt-blocks-accordion-header:hover .kt-blocks-accordion-title {
    letter-spacing: .22em;
}

/* Plus iets groter/dikker op hover */
.so-services-accordion button.kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger {
    transform: scale(1.08);
}

.so-services-accordion button.kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::before,
.so-services-accordion button.kt-blocks-accordion-header:hover .kt-blocks-accordion-icon-trigger::after {
    height: 4px;
}

/* =====================================================
   TOGGLE GRIDS – CLIENTS & PROJECTS
   ===================================================== */

.toggle-pad{
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box;
}

.toggle-pad .kadence-blocks-gallery,
.toggle-pad .kb-gallery-wrap,
.toggle-pad .kb-gallery-ul,
.toggle-pad .kb-gallery-list{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Button */
.toggle-button .kb-svg-icon-wrap,
.toggle-button .kb-svg-icon-wrap svg{
  transition: opacity 200ms ease, transform 200ms ease;
}

.toggle-button.is-open .kb-svg-icon-wrap,
.toggle-button.is-open .kb-svg-icon-wrap svg{
  opacity: 0;
  transform: scale(0.8);
}

/* Toggle wrap */
.toggle-wrap{
  max-height: 480px !important;
  overflow: hidden !important;
  position: relative;
  transition: max-height 800ms cubic-bezier(0.4, 0, 0.2, 1);

  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 82%,
    transparent 100%
  );
}

.toggle-wrap.is-open{
  max-height: 3000px !important;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Mobiel */
@media (max-width: 768px){
  .toggle-wrap{
    max-height: 350px !important;

    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 78%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 78%,
      transparent 100%
    );
  }

  .toggle-wrap.is-open{
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Print / PDF export fallback */
@media print{
  .toggle-wrap{
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* =====================================================
   KADENCE / FOOTER TWEAKS
   ===================================================== */

/* Accordion panel: geen border */
.kt-accordion-panel-inner{
  border: 0;
}


/* =========================================================
   10. ANIMATIES & HOVER EFFECTEN
   ========================================================= */

/* === SO DRY BRUSH STROKE === */
/* Lettertype wordt bovenaan deze stylesheet geladen. */


/* Algemene instellingen voor tekst en brush */
.so-brush {
    position: relative;
    display: inline-block;
    isolation: isolate;
    z-index: 0;

    color: #fff;
    font-family: "Permanent Marker", cursive;
}


/* Vorm en positie van de brush */
.so-brush::before {
    content: "";
    position: absolute;
    z-index: -1;

    left: -2.5em;
    right: -4.5em;
    top: 50%;
    height: 1.4em;
    transform: translateY(-50%);

    /* Standaardkleur als er geen kleurclass is gekozen */
    background-color: #ff1566;

    /* Eén PNG wordt gebruikt als masker */
    -webkit-mask-image: url("/wp-content/uploads/2026/07/so-brush-mask.png");
    mask-image: url("/wp-content/uploads/2026/07/so-brush-mask.png");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


/* Kleurvarianten */
.so-brush-pink::before {
    background-color: #ff1566;
}

.so-brush-hot-pink::before {
    background-color: #ff007f;
}

.so-brush-lilac::before {
    background-color: #c99ce9;
}

.so-brush-black::before {
    background-color: #181516;
}


/* Donkere tekst op de lichte lila brush */
.so-brush-lilac {
    color: #181516;
}

/* === SO PR | DRAWING ARROW ANIMATION === */

.so-draw-arrow {
    width: 90px;
    color: #181516;
}

.so-draw-arrow svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.so-draw-arrow path {
    fill: none;
}

.so-draw-arrow #Arrow_Main {
    stroke-dasharray: 3372;
    stroke-dashoffset: 3372;
    animation: soDrawArrow .5s linear 1.2s both;
}

.so-draw-arrow #Arrow_Head {
    stroke-dasharray: 720;
    stroke-dashoffset: 720;
    animation: soDrawArrow .20s linear 1.94s both;
}

/* So World: niet direct starten */
.so-draw-arrow-world #Arrow_Main,
.so-draw-arrow-world #Arrow_Head {
    animation: none;
}

/* So World: starten zodra JS .is-visible toevoegt */
.so-draw-arrow-world.is-visible #Arrow_Main {
    animation: soDrawArrow .5s linear 2.5s both;
}

.so-draw-arrow-world.is-visible #Arrow_Head {
    animation: soDrawArrow .20s linear 3.24s both;
}

@keyframes soDrawArrow {
    to {
        stroke-dashoffset: 0;
    }
}

/* === SO SOCIAL MARQUEE === */

.so-social-marquee {
  overflow: hidden;
  width: 100%;
}

.so-social-marquee .kb-gallery-ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 30px !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.so-social-marquee .kb-gallery-ul li {
  flex: 0 0 280px !important;
  width: 280px !important;
  max-width: none !important;
}

.so-social-marquee img {
  width: 280px !important;
  height: auto !important;
  display: block;
}



/* === SO SOCIAL MARQUEE LARGE === */
.so-social-marquee.so-social-marquee-large .kb-gallery-ul li {
  flex-basis: 440px !important;
  width: 440px !important;
  min-width: 440px !important;
  max-width: 440px !important;
}

.so-social-marquee.so-social-marquee-large img {
  width: 440px !important;
}

/* =====================================================
   SMOOTHER TRANSITION BETWEEN PAGES
   ===================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root){
  animation-name: vt-fade-out;
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

::view-transition-new(root){
  animation-name: vt-fade-in;
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

@keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } to { opacity: 1; } }

::view-transition-group(root){
  isolation: isolate;
}

/* Respecteer reduced motion */
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation: none !important;
  }
}

/* =====================================================
   ROLLING LOGO – ON SCROLL
   ===================================================== */

.rolling-logo{
  width: 90px;
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  background: transparent;
}

/* Start animatie pas wanneer in beeld */
.rolling-logo.is-inview{
  animation: roll-in-screen 1.6s cubic-bezier(.25,.8,.25,1) forwards;
}

/* Roll animatie */
@keyframes roll-in-screen{
  from {
    transform: translateX(-120vw) rotate(-540deg);
  }
  to {
    transform: translateX(0) rotate(0deg);
  }
}

/* Afbeelding: geen box-shadow, wel ronde drop-shadow */
.rolling-logo img{
  display:block;
  box-shadow:none;
  filter:none;
  background:transparent;
}

/* =====================================================
   SO WORLD TEAM HOVER IMAGE (Kadence)
   ===================================================== */
.team-image{
  position: relative;
  overflow: hidden;
}

.team-image img{
  display: block;
  width: 100%;
  height: auto;
}

.team-img-hover{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.team-card:hover .team-img-hover{
  opacity: 1;
}


/* =========================================================
   11. NEWS PAGINATION
   ========================================================= */

/* --- SO NEWS PAGINATION --- */

.wp-block-query-pagination {
  margin-top: 100px;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Links + nummers */
.wp-block-query-pagination a,
.wp-block-query-pagination span {
  padding: 8px 10px;
  margin: 0 6px;
  text-decoration: none;
  color: #000;
  transition: all .25s ease;
}

/* Hover */
.wp-block-query-pagination a:hover {
  color: #ff1566;
}

/* Actieve pagina */
.wp-block-query-pagination .current {
  color: #ff1566;
  border-bottom: 2px solid #ff1566;
}

/* Previous / Next spacing */
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
  margin: 0 20px;
}