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

/* LAYOUTS */

.pk-page {
    /* Safari fallback: overflow: clip is ignored by older iOS versions. */
    overflow-x: hidden !important;
    overflow-x: clip !important;
}

/* Prevent intrinsic slider/flex widths from widening a grid track. */
.pk-grid-container > * {
    min-width: 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;
}

/* 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(1.5rem, calc(1.5 * 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,
.pk-page-content ul:last-child {
    margin-bottom: 0;
}

.pk-page-content ul,
.pk-page-content ol:not(.breadcrumb) {
    margin-top: 0;
    margin-bottom: max(1.5rem, calc(1.5 * var(--su)));
    padding-left: max(1.1rem, calc(1.1 * var(--su)));
	list-style: square;
}

.pk-page-content .pk-text li:not(:last-child) {
    margin-bottom: max(0.5rem, calc(0.5 * var(--su)));
}

.pk-page-content .pk-text strong {
	font-weight: 700;
}

.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 {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: max(2rem, calc(2 * var(--su))) 0;
}

body .tax-label {
	background-color: var(--off-black);
	color: var(--pink);
	padding: 0.5em 0.75em;
	line-height: 1;
}
body .tax-labels {
	display: flex; 
	flex-wrap: wrap;
	gap: 0.75em;
}


.flex-layout.blog-layout:not(.blog_text-layout.mode-centered):not(.blog-layout.blog_cta-layout) + .flex-layout.blog-layout:not(.blog_text-layout.mode-centered):not(.blog-layout.blog_cta-layout) {
	margin-top: calc((var(--global-row-spacing) * -1) + max(1.5rem, calc(1.5 * var(--su))));
}

/***********************/
/* SWIPER PROGRESS BAR */
/***********************/
.swiper-container .swiper-progress {
    max-width: 45%;
    margin-inline: auto;
    position: relative;
    height: 1px;
    margin-top: 2rem;
    background-color: rgba(0, 0, 0, 0.4);
}
.swiper-container .swiper-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    height: 1px;
    background-color: rgba(0, 0, 0, 1);
    width: 5%;
}

/***************/
/* BREADCRUMBS */
/***************/
body .pk-page-content ol.breadcrumb {
	font-size: var(--desktop-body-xs);
	text-transform: uppercase;
}
body .pk-page-content ol.breadcrumb a {
	color: inherit;
}
body .pk-page-content ol.breadcrumb a:not(:hover) {
	text-decoration: none;
}
body .pk-page-content ol.breadcrumb .active span {
	opacity: 0.3;
}
body .pk-page-content ol.breadcrumb li::after {
	margin-inline: max(0.25rem, calc(0.25 * var(--su)));
}

/***********/
/* SIDEBAR */
/***********/
.sidebar-col .flex-content .sidebar-layout:not(:last-child) {
	margin-bottom: var(--pk-column-gap);
}

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

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

@media screen and (max-width: 992px) {
    .swiper-container .swiper-progress {
        min-width: 100%;
    }
}

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

@media screen and (max-width: 767px) {
	/* Keep headings on whole-word boundaries on mobile. */
	.pk-page-content h1,
	.pk-page-content h2,
	.pk-page-content h3,
	.pk-page-content h4,
	.pk-page-content h5,
	.pk-page-content h6 {
		-webkit-hyphens: none;
		hyphens: none;
		overflow-wrap: normal;
		word-break: normal;
	}
}