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

.otgs-development-site-front-end {
  display: none;
}

* {
	-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: clip !important;
}

.flex-layout {
    display: block;
    scroll-margin-top: var(--scroll-margin);
    background-color: var(--bg-color, transparent);
    color: var(--text-color, inherit);
}

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

/* layout spacing pakken en anders terugvallen op de standaard spacing  */
.flex-layout.padding-row {
  padding-block: var(--layout-spacing-top, var(--layout-spacing, var(--pk-row-spacing))) var(--layout-spacing-bottom, var(--layout-spacing, var(--pk-row-spacing)));
}

/* layout spacing pakken en anders terugvallen op de standaard spacing  */
.flex-layout.margin-row {
  margin-block: var(--layout-spacing-top, var(--layout-spacing, var(--pk-row-spacing))) var(--layout-spacing-bottom, var(--layout-spacing, var(--pk-row-spacing)));
}

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

/* Overlap: [data-overlay-layout] hangt over het volgende blok, dat reserveert
   de ruimte via extra padding/margin. Overlap per layout aanpassen:
   .flex-layout.mijn_layout[data-overlay-layout] + .flex-layout { --overlay-height: 8rem; } */

.flex-layout[data-overlay-layout] + .flex-layout.padding-row,
.flex-content:has(> .flex-layout[data-overlay-layout]:last-child) + .flex-content > .flex-layout.padding-row:first-child {
  padding-top: calc(var(--layout-spacing-top, var(--layout-spacing, var(--pk-row-spacing))) + var(--overlay-height));
}

.flex-layout[data-overlay-layout] + .flex-layout.margin-row,
.flex-content:has(> .flex-layout[data-overlay-layout]:last-child) + .flex-content > .flex-layout.margin-row:first-child {
  margin-top: calc(var(--layout-spacing-top, var(--layout-spacing, var(--pk-row-spacing))) + var(--overlay-height));
}

/* Blok dat z'n ruimte zelf regelt, zonder klasse: alleen de overlap erbij. */
.flex-layout[data-overlay-layout] + .flex-layout:not(.padding-row):not(.margin-row),
.flex-content:has(> .flex-layout[data-overlay-layout]:last-child) + .flex-content > .flex-layout:first-child:not(.padding-row):not(.margin-row) {
  padding-top: var(--overlay-height);
}

/* SPEED OPTIMIZATIONS */
/* Layout Shift Prevention - CLS Optimization */
img {
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

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

/* 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: 0;
  margin-bottom: max(1rem, calc(1 * var(--su)));
}

.pk-page-content p {
  margin-top: 0;
  margin-bottom: max(1.25rem, calc(1.25 * var(--su)));
}

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

/* Vinkje voor elk item; kleur volgt de tekst. */
.pk-page-content ul {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  /* gap: max(.5rem, calc(.5 * var(--su))); */
}

.pk-page-content ul li {
  list-style: none;
  display: flex;
  align-items: start;
  gap: max(.5rem, calc(.5 * var(--su)));
  margin-bottom: 0;
}

.pk-page-content ul li:before {
  content: '';
  flex-shrink: 0;
  width: max(1.25rem, calc(1.25 * var(--su)));
  height: auto;
  aspect-ratio: 1;
  background-color: currentColor;
  mask: var(--icon-check) center / contain no-repeat;
  transform: translateY(.2em);
}

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

.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 {
  /* border: none; */
  margin-block: 0;
}

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

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

}

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


}

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

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

}

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

  .flex-layout .sticky-col > * {
    position: sticky;
    top: calc(var(--pk-header-height) + var(--sticky-offset, 4rem));
  }

}

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

  .pk-page-content h1 {
    word-break: word-break;
    hyphens: auto;
  }

}