/*
Theme Name: Pageking Flex (child)
Template: pk-theme
Author: Pageking
Author URI: https://www.pageking.nl/
Description: Pageking is een thema voor WordPress dat is ontworpen voor Pageking websites.
Requires at least: 5.9
Tested up to: 6.7.2
Requires PHP: 8.3
Version: 1.2.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

a:not(.cbw-erkend) {
  color: currentColor;
}

div[id] {
    scroll-margin-top: var(--scroll-margin);
}

/* ─── LAYOUT ──────────────────────────────────────────────────── */

.pk-page {
    overflow: clip !important;
}

.flex-layout {
    display: block;
    scroll-margin-top: var(--scroll-margin);
}

.flex-layout.no-margin {
  margin-block: 0 !important;
}

/* First layout in the repeater gets no margin-top */
.flex-repeater > .flex-content:first-child > .flex-layout:first-child {
  margin-top: unset;
}

.flex-repeater > .flex-content:only-child > .flex-layout:only-child{
  margin-bottom: unset;
}

body.error404 .flex-repeater > .flex-content:only-child > .flex-layout:only-child {
  margin-bottom: var(--pk-row-spacing);
}

.flex-repeater > .flex-content:last-child > .flex-layout:last-child.no-margin {
  margin-bottom: unset;
}

.flex-layout[overlay-block]:has(+ .flex-layout.background-shape) {
  margin-bottom: 0;
}

.flex-layout[overlay-block] + .flex-layout.padding-row {
  padding-top: calc(var(--pk-row-spacing) + var(--overlay-height));
}

.flex-layout[overlay-block] + .flex-layout.margin-row {
  margin-top: calc(var(--pk-row-spacing) + var(--overlay-height));
}

.flex-layout[overlay-block] + .flex-layout.background-shape {
  margin-top: 0;
  position: relative;
  border-radius: 0 0 var(--overlay-radius) var(--overlay-radius);
}

.flex-layout[overlay-block] + .flex-layout.background-shape::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  width: 100%;
  height: var(--overlay-height);
  transform: translateY(-100%);
  background-color: var(--overlay-color);
  border-radius: var(--overlay-radius) var(--overlay-radius) 0 0;
}


/* SPEED OPTIMIZATIONS */
/* Layout Shift Prevention - CLS Optimization */

img {
  max-width: 100%;
  height: auto;
  /* Preserve aspect ratio to prevent layout shifts */
  aspect-ratio: attr(width) / attr(height);
}

img[width][height] {
  /* Browser calculates aspect-ratio from width/height attributes */
  aspect-ratio: auto;
}

input, select, textarea {
  background-color: transparent;
}

/* Ensure hero images maintain aspect ratio */
/* .hero-bg {
  width: 100%;
  height: auto;
  object-fit: cover;
} */

/* DEFAULTS PAGE-CONTENT */
.pk-page-content h1, .pk-page-content h2, .pk-page-content h3, .pk-page-content h4, .pk-page-content h5, .pk-page-content h6 {
  margin-top: 0rem;
  /* margin-bottom: 1rem; */
}

.pk-page-content p {
  margin-top: 0;
  /* margin-bottom: 1.25rem; */
}

.pk-page-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

.pk-page-content .flex-layout .rounded-col {
  border-radius: var(--border-radius-large);
}

.pk-page-content .flex-layout .content-padding-left {
  padding-left: max(4rem, calc(4 * var(--su)));
}

.pk-page-content .flex-layout .content-padding-right {
  padding-right: max(4rem, calc(4 * var(--su)));
}

.pk-page-content .flex-layout ul {
	padding-left: unset !important;
	display: flex;
	flex-direction: column;
	gap: max(.25rem, calc(.25 * var(--su)));
}

.pk-page-content .flex-layout ul li {
	list-style: none;
	padding-left: 0;
	display: flex;
	align-items: start;
  font-size: var(--scaling-body-s-normal);
  font-weight: 400;
	gap: max(.5rem, calc(1 * var(--su)));
}

.pk-page-content .flex-layout ul li:before {
	content: '';
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_370_22059' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_370_22059)'%3E%3Cpath d='M7.95762 14.7115L3.51221 10.2661L4.40304 9.37508L7.95762 12.9297L15.5955 5.29175L16.4864 6.18279L7.95762 14.7115Z' fill='%2365CE3C'/%3E%3C/g%3E%3C/svg%3E%0A");	background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
	flex-shrink: 0;
	height: auto;
	width: max(1.25rem, calc(1.25 * var(--su)));
  aspect-ratio: 1;
  transform: translateY(.2em);
}

.pk-page-content .flex-layout .circle-list li:before {
    transform: translateY(.5em);
    width: max(.625rem, calc(.625 * var(--su)));
    /* background-color: currentColor; */
    background-color: var(--cbw-pumpkin-100);
    mask: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='4' stroke='%23F46526' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='4' stroke='%23F46526' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat center / contain;
}

/* ─── SWIPER GENERAL ───────────────────────────────────── */

.swiper-overflow {
  overflow: visible !important;
}

.pk-page .swiper-scrollbar {
    position: relative !important;
    margin-top: max(1.5rem, calc(2.5 * var(--su))) !important;
    height: 2px !important;
    bottom: 0;
    margin-inline:auto !important;
    background: var(--cbw-deep-pine-10) !important;
    width: 100% !important;
    max-width: 600px;
    left: 0;
    right: 0;
}

.pk-page .swiper-scrollbar .swiper-scrollbar-drag {
    background: var(--cbw-emerald-100) !important;
}

/* BREADCRUMBS */

.breadcrumb-wrap {
    display: block;
}

.breadcrumb-wrap .breadcrumb {
  display: flex;
  align-items: start;
  gap: max(0.25rem, calc(0.25 * var(--su)));
  font-size: var(--scaling-breadcrumb);
  text-transform: uppercase;
}

.breadcrumb-wrap.white .breadcrumb-item,
.breadcrumb-wrap.white .breadcrumb-item span {
    color: var(--odnhn-white-100);
}

.breadcrumb-wrap.black .breadcrumb-item,
.breadcrumb-wrap.black .breadcrumb-item span {
    color: var(--odnhn-black-100);
}

.breadcrumb-wrap .breadcrumb-item a,
.breadcrumb-wrap .breadcrumb-item span {
    text-decoration: none;
}

.breadcrumb-wrap .breadcrumb  .breadcrumb-item {
    display: flex;
    align-items: center;
    gap: max(0.375rem, calc(0.375 * var(--su)));
}

.breadcrumb-item::after {
    /* content: '' !important; */
    /* background-color: currentColor;
    display: block;
    width: .6em;
    height: .6em; */
    margin-inline: 0px !important;
}

.breadcrumb-item:nth-last-child(2)::after {
    opacity: .6;
}

.breadcrumb-item.active span {
    opacity: .6;
}

@media screen and (max-width: 992px) {

  .flex-layout {
    padding-inline: var(--pk-site-gutter) !important;
  }

  .flex-layout .pk-grid-container {
    row-gap: 2rem;
  }

  .pk-page-content .flex-layout .rounded-col {
    border-radius: 1.5rem;
  }

  .pk-page-content .flex-layout .content-padding-left {
    padding-left: unset;
  }

  .pk-page-content .flex-layout .content-padding-right {
    padding-right: unset;
  }

  .swiper-mouseover {
      display: none !important;
  }

}

/* OPTIONAL, NO MARGIN 1 PARAGRAPH */
/* p:only-child,
p:last-child {
    margin: 0;
} */

/* OPTIONAL, NO MARGIN TOP EXEPT FIRST ROW */
/* .flex-content > .flex-layout:not(:first-child) > .pk-row {
	padding-top: 0;
} */

@media screen and (min-width: 768px) {

  .flex-layout .sticky-element {
    display: block !important;
  }

  .flex-layout .sticky-element > div {
    position: sticky;
    top: calc(var(--pk-header-height) + 4rem);
  }
  

}


@media screen and (max-width: 767px) {



}