/*
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;
}

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

html {
  scroll-behavior: smooth;
}

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

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

.flex-layout {
  display: block;
  scroll-margin-top: var(--scroll-margin);
  margin-block: var(--pk-row-spacing);
  --layout-spacing: var(--pk-row-spacing);
  --shape-height: max(1.5rem, calc(2.5 * var(--su)));
  --next-shape-height: 0px;
  --prev-shape-height: 0px;
  padding-top: calc(var(--layout-spacing) + var(--prev-shape-height)) !important;
  padding-bottom: calc(var(--layout-spacing) + var(--next-shape-height)) !important;
}

/* Beide variabelen staan hierboven standaard op 0px, dus ze doen niks tenzij
   we ze aanzetten. Dat gebeurt hieronder: extra padding-bottom voor de
   layout vóór een top-shape, extra padding-top voor de layout ná een
   bottom-shape. Telkens 2 varianten, want layouts delen niet altijd dezelfde
   ouder (zelfde .flex-content, of over de grens van twee rijen heen). */

.flex-layout:has(+ .flex-layout.top-shape) {
  --next-shape-height: var(--shape-height);
}

.flex-content:has(+ .flex-content > .flex-layout.top-shape:first-child) > .flex-layout:last-child {
  --next-shape-height: var(--shape-height);
}

/* .pk-footer is geen .flex-layout (het is een sibling van <main>, geen
   onderdeel van de flex-repeater), dus de regels hierboven bereiken 'm niet
   via :has(). De ronde bovenhoek van de footer is er echter altijd — dus de
   laatste layout op de pagina heeft altijd deze extra padding-bottom nodig,
   zonder :has()-check. */
.flex-repeater > .flex-content:last-child > .flex-layout:last-child {
  --next-shape-height: var(--shape-height);
  padding-bottom: calc(var(--layout-spacing) + var(--shape-height)) !important;
}

.flex-repeater > .flex-content:last-child > .flex-layout:last-child::after {
  content: unset;
}

.flex-layout.bottom-shape + .flex-layout {
  --prev-shape-height: var(--shape-height);
}

.flex-content:has(> .flex-layout.bottom-shape:last-child) + .flex-content > .flex-layout:first-child {
  --prev-shape-height: var(--shape-height);
}

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

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

.flex-layout.has-shape {
  position: relative;
  --shape-radius: max(1.5rem, calc(2.5 * var(--su)));
}

.flex-layout.has-shape.top-shape {
  padding-top: calc(var(--layout-spacing) - var(--shape-height)) !important;
}

.flex-layout.has-shape.bottom-shape {
  padding-bottom: calc(var(--layout-spacing) - var(--shape-height)) !important;
}

.flex-layout.has-shape.top-shape::before, .flex-layout.has-shape.bottom-shape::after {
	content: '';
	position: absolute;
	width: 100%;
	height: var(--shape-height);
	pointer-events: none;
	z-index: 1;
  background: var(--bg-color);
}

/* Voorkomt 2 botsende shapes op dezelfde naad: als een bottom-shape direct
   gevolgd wordt door een top-shape, schakelen we de bottom-shape (en zijn
   padding-verlaging) uit. Er blijft dan maar 1 shape zichtbaar. */
.flex-layout.has-shape.bottom-shape:has(+ .flex-layout.top-shape) {
  padding-bottom: calc(var(--layout-spacing) + var(--shape-height)) !important;
}

.flex-layout.has-shape.bottom-shape:has(+ .flex-layout.top-shape)::after {
  content: unset;
}

.flex-content:has(+ .flex-content > .flex-layout.top-shape:first-child) > .flex-layout.has-shape.bottom-shape:last-child {
  padding-bottom: calc(var(--layout-spacing)) !important;
}

.flex-content:has(+ .flex-content > .flex-layout.top-shape:first-child) > .flex-layout.has-shape.bottom-shape:last-child::after {
  content: unset;
}

.flex-layout.has-shape.top-shape::before {
	top: 0;
  left: 0;
  transform: translateY(calc(-100% + 1px));
  border-radius: var(--shape-radius) var(--shape-radius) 0 0;
}

.flex-layout.has-shape.bottom-shape::after {
	bottom: 0;
  left: 0;
  transform: translateY(calc(100% - 1px));
  border-radius: 0 0 var(--shape-radius) var(--shape-radius);
}

/* Eerste layout in de repeater krijgt geen margin-top */
.flex-repeater > .flex-content:first-child > .flex-layout:first-child {
  margin-top: unset;
  /* padding-top: unset; */
}

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

/* 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;
}

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

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

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

.pk-page .swiper-scrollbar .swiper-scrollbar-drag {
    background: var(--noix-blue) !important;
}

/* 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;
}

.pk-page-content p:last-child {
  margin-bottom: 0;
}

.pk-page-content .pk-text > p:not(:last-child) {
  margin-bottom: max(1rem, calc(1 * var(--su))) !important;
}

.pk-page-content ul, .pk-page-content ol {
  margin-top: 0;
  padding-left: max(1.1rem, calc(1.1 * var(--su)));
}

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

.pk-page-content .flex-layout ul li {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
  font-size: var(--scaling-body-s);
	gap: max(1rem, 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%3Crect width='20' height='20' rx='10' fill='%23AE6532'/%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='9.5' stroke='%23EDEAE5' stroke-opacity='0.2'/%3E%3Cpath d='M14 7.5L8.5 12.5L6 10.2273' stroke='%23EDEAE5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  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 img {
  max-width: 100%;
  height: auto;
  display: block;
}

.pk-page-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: max(2rem, calc(2 * var(--su)));
}

.pk-page-content th, .pk-page-content td {
  padding: max(0.75rem, calc(0.75 * var(--su))) max(1rem, calc(1 * var(--su)));
  border: 1px solid #e0e0e0;
  text-align: left;
}

.pk-page-content blockquote {
  margin: max(1.5rem, calc(1.5 * var(--su))) 0;
  padding: max(1rem, calc(1 * var(--su))) max(1.5rem, calc(1.5 * var(--su)));
}

.pk-page-content hr {
  width: 100%;
  border: none;
  margin: 0;
  background-color: var(--noix-chestnut);
  height: 1px;
}

/* NOIX STAMP */

.noix-stamp {
  background-color: var(--noix-blue);
  width: fit-content;
  aspect-ratio: 1;
  height: auto;
  font-size: max(.875rem, calc(1 * var(--su)));
  font-family: var(--pk-secondary-font-family);
  font-weight: 700;
  line-height: 1;
  width: max(7rem, calc(7.8125 * var(--su)));
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  padding: max(1rem, calc(1 * var(--su)));
  color: var(--noix-almond);
}

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

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


}

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


}

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

  .pk-grid-container {
		row-gap: 3rem;
	}

}

@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) {


}