/*
Theme Name: Pageking Flex (child)
Template: pk-theme-child
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.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ─── FONT SMOOTHING ──────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
}

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


/* ─── CLS OPTIMIZATION ────────────────────────────────────────── */

img {
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
}

img[width][height] {
    aspect-ratio: auto;
}


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

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

.flex-layout {
    display: block;
}

/* 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:last-child > .flex-layout:last-child.no-margin {
    margin-bottom: unset;
}

/* ─── CUSTOM MENU ──────────────────────────────────────────────────── */

.custom-menu {
  display: flex;
  align-items: center;
  gap: 0.75rem max(.5rem, var(--su));
  flex-wrap: wrap;
}


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

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

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

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

/* ─── GENERAL STYLING ───────────────────────────────────── */

.pk-page:has(.white-header-logo) header .header-logo img {
    filter: brightness(0) invert(1);
}

.breadcrumb-wrap {
    display: block;
}

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

.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;
    aspect-ratio: 1;
    margin-inline: 0px !important;
    mask: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.06667 3.76917L0 0.7025L0.7025 0L4.47167 3.76917L0.7025 7.53833L0 6.83583L3.06667 3.76917Z' fill='%23090909' fill-opacity='0.6'/%3E%3C/svg%3E%0A") no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.06667 3.76917L0 0.7025L0.7025 0L4.47167 3.76917L0.7025 7.53833L0 6.83583L3.06667 3.76917Z' fill='%23090909' fill-opacity='0.6'/%3E%3C/svg%3E%0A") no-repeat center / contain;
}

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

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

.title-button-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: max(2rem, calc(2.5 * var(--su)));
}

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

.pk-page-content .flex-layout ul li {
	list-style: none;
	padding-left: 0;
	display: flex;
	align-items: center;
    font-weight: 300;
	gap: max(.75rem, calc(.75 * var(--su)));
}

.pk-page-content .flex-layout ul li:before {
	content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='31' height='31' rx='15.5' stroke='%23090909' stroke-opacity='0.2'/%3E%3Cmask id='mask0_617_729' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='8' y='8' width='16' height='16'%3E%3Crect x='8' y='8' width='16' height='16' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_617_729)'%3E%3Cpath d='M14.3666 19.7692L10.8103 16.2129L11.523 15.5001L14.3666 18.3437L20.477 12.2334L21.1896 12.9462L14.3666 19.7692Z' fill='%23090909'/%3E%3C/g%3E%3C/svg%3E%0A");	background-repeat: no-repeat;
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
	flex-shrink: 0;
	height: auto;
	width: max(2rem, calc(2 * var(--su)));
    aspect-ratio: 1;
	transform: translate(0px, -.1em);
}

.pk-page-content .flex-layout .white-list ul li:before {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='31' height='31' rx='15.5' stroke='white' stroke-opacity='0.2'/%3E%3Cmask id='mask0_699_3050' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='8' y='8' width='16' height='16'%3E%3Crect x='8' y='8' width='16' height='16' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_699_3050)'%3E%3Cpath d='M14.3666 19.7691L10.8103 16.2128L11.523 15.4999L14.3666 18.3436L20.477 12.2333L21.1896 12.9461L14.3666 19.7691Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
}

/* INFO BOX — */

.pk-page .odnhn-info-blocks-wrapper {
    display: flex;
    flex-direction: column;
    gap: max(1.5rem, calc(2 * var(--su)));
}

.pk-page .odnhn-info-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    transition: padding 0.3s ease-in-out;
}

.pk-page .odnhn-info-box .box-title {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: max(1rem, calc(1.25 * var(--su)));
    font-weight: 500;
    color: var(--odnhn-black-100);
    transition: padding 0.3s ease-in-out;
    border-bottom: 1px solid var(--odnhn-black-10);
    padding-bottom: 1rem;
}

.pk-page .odnhn-info-box.open .box-title {
    padding-bottom: 1rem;
}

.pk-page .odnhn-info-box .icon {
    flex-shrink: 0;
    width: max(2rem, calc(2 * var(--su)));
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--odnhn-black-10);
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='9' viewBox='0 0 8 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.76916 -0.000123648L7.53833 3.76904L6.83583 4.47154L4.26916 1.90488L4.26916 8.26904L3.26916 8.26904L3.26916 1.90488L0.702496 4.47154L-5.16177e-06 3.76904L3.76916 -0.000123648Z' fill='%23090909'/%3E%3C/svg%3E%0A");
    aspect-ratio: 1;
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
}

.pk-page .odnhn-info-box.open .icon {
    transform: rotate(0deg);
}

.pk-page .odnhn-info-box .odnhn-info-inner {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.pk-page .odnhn-info-box.open .odnhn-info-inner {
    grid-template-rows: 1fr;
    padding-top: max(2rem, calc(2 * var(--su)));
}

.pk-page .odnhn-info-box .odnhn-info-inner * {
    color: var(--odnhn-black-100);
}

.pk-page .odnhn-info-box .odnhn-info-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pk-page .odnhn-info-box .odnhn-info-content a {
    color: var(--odnhn-black-100);
    text-decoration: underline;
}

.pk-page .odnhn-info-box .odnhn-info-content p:last-of-type {
    margin-bottom: 0;
}

.pk-page .odnhn-info-box ol {
    padding-left: 20px;
}

/* VACANCY POST LAYOUT — */

.vacancy-tags {
	display: flex;
	align-items: center;
	gap: max(.5rem, calc(.5 * var(--su)));
	flex-wrap: wrap;
}

.vacancy-tags span {
	display: flex;
	align-items: center;
	gap: max(0.5rem, calc(0.5 * var(--su)));
	font-size: max(0.875rem, calc(0.875 * var(--su)));
}

.vacancy-tags span::before {
	content: '';
	width: max(2rem, calc(2 * var(--su)));
	height: max(2rem, calc(2 * var(--su)));
	background-color: transparent;
	transition: transform 0.2s ease-in-out;
	transform-origin: center;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--odnhn-black-20);	
	background-repeat: no-repeat;
	background-size: 50%;
	background-position: center;
}

.vacancy-tags .hours::before {
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_617_1930' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='16' height='16'%3E%3Crect width='16' height='16' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_617_1930)'%3E%3Cpath d='M10.3154 11.0181L11.0181 10.3154L8.50008 7.79741V4.66675H7.50008V8.20258L10.3154 11.0181ZM8.00125 14.3334C7.12525 14.3334 6.30186 14.1672 5.53108 13.8347C4.7603 13.5023 4.08986 13.0511 3.51975 12.4812C2.94964 11.9114 2.49825 11.2412 2.16558 10.4707C1.83303 9.7003 1.66675 8.87714 1.66675 8.00125C1.66675 7.12525 1.83297 6.30186 2.16541 5.53108C2.49786 4.7603 2.94903 4.08986 3.51891 3.51975C4.0888 2.94964 4.75897 2.49825 5.52941 2.16558C6.29986 1.83303 7.12303 1.66675 7.99891 1.66675C8.87492 1.66675 9.6983 1.83297 10.4691 2.16541C11.2399 2.49786 11.9103 2.94903 12.4804 3.51891C13.0505 4.0888 13.5019 4.75897 13.8346 5.52941C14.1671 6.29986 14.3334 7.12303 14.3334 7.99891C14.3334 8.87492 14.1672 9.6983 13.8347 10.4691C13.5023 11.2399 13.0511 11.9103 12.4812 12.4804C11.9114 13.0505 11.2412 13.5019 10.4707 13.8346C9.7003 14.1671 8.87714 14.3334 8.00125 14.3334ZM8.00008 13.3334C9.47786 13.3334 10.7362 12.814 11.7751 11.7751C12.814 10.7362 13.3334 9.47786 13.3334 8.00008C13.3334 6.5223 12.814 5.26397 11.7751 4.22508C10.7362 3.18619 9.47786 2.66675 8.00008 2.66675C6.5223 2.66675 5.26397 3.18619 4.22508 4.22508C3.18619 5.26397 2.66675 6.5223 2.66675 8.00008C2.66675 9.47786 3.18619 10.7362 4.22508 11.7751C5.26397 12.814 6.5223 13.3334 8.00008 13.3334Z' fill='%23090909'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.block-overlay-tag {
    position: absolute;
	width: fit-content;
	display: flex;
	align-items: center;
	gap:  max(0.375rem, calc(0.375 * var(--su)));
	font-size: max(0.75rem, calc(0.75 * var(--su)));
	z-index: 3;
	padding: max(0.5rem, calc(0.5 * var(--su))) max(1rem, calc(1 * var(--su)));
	border-radius: 999px;
	background: var(--odnhn-white-100);
	color: var(--odnhn-purple);
    top: max(1rem, calc(1.5 * var(--su)));
	left: max(1rem, calc(1.5 * var(--su)));
}

.block-overlay-tag::before {
	content: '';
	width: .8em;
	height: .8em;
	background-color: currentColor;
	transition: transform 0.2s ease-in-out;
	transform-origin: center;
	flex-shrink: 0;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'%3E%3Ccircle cx='4' cy='4' r='3' stroke='%237B2185' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'%3E%3Ccircle cx='4' cy='4' r='3' stroke='%237B2185' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ─── FOOTER ──────────────────────────────────────────────────── */

.pk-footer {
  padding-inline: var(--pk-site-gutter);
  
}


/* ─── MEDIA QUERIES ───────────────────────────────────────────── */

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

}

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

}

@media screen and (max-width: 767px) {
  
  .pk-page header > .pk-header-wrapper, .flex-layout, .pk-footer {
    padding-inline: 1rem;
  }
  
  .title-button-wrapper .swiper-buttons {
    display: none;
  }

}

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

}