/* Poorthuis — vormgeving die theme.json niet kan uitdrukken.
   Blokstijlen (is-style-*) zijn geregistreerd in inc/setup.php. */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
:where(h1, h2, h3) { text-wrap: balance; }

/* ---------- Kop ---------- */
.ph-header { background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--wp--preset--color--line); }
/* sticky op het template-part-omhulsel: een sticky element blijft binnen zijn ouder */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.ph-header .wp-block-site-logo img { height: 42px; width: auto; }
.ph-header .wp-block-navigation a { font-weight: 400; position: relative; padding: 6px 0; text-decoration: none; }
.ph-header .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--wp--preset--color--yellow); transition: width .2s ease; }
.ph-header .wp-block-navigation-item__content:hover::after,
.ph-header .current-menu-item > .wp-block-navigation-item__content::after { width: 100%; }
.ph-phone { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--wp--preset--color--ink); }
.ph-phone:hover { background: var(--wp--preset--color--paper-2); color: var(--wp--preset--color--blue); }
.ph-phone svg { width: 18px; height: 18px; }
.ph-header .lang-item a, .ph-header .wp-block-polylang-language-switcher a { text-decoration: none; font-weight: 600; }
/* taalwisselaar van Polylang: alleen het vlaggetje, compact naast de telefoon */
.ph-header .pll-switcher { flex: none; width: auto; }
.ph-header .pll-switcher ul { display: flex; gap: 10px; width: auto; margin: 0; padding: 0; list-style: none; }
.ph-header .pll-switcher li { margin: 0; width: auto; }
.ph-header .pll-switcher a { display: flex; align-items: center; width: auto; }

/* doorzichtige kop over de homepage-hero (header.js zet de klassen) */
.ph-logo-white { display: none !important; }
.ph-header { transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.ph-header.is-overlay:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.ph-header.is-overlay:not(.is-scrolled) .ph-logo img:first-child { display: none !important; }
.ph-header.is-overlay:not(.is-scrolled) .ph-logo-white { display: block !important; }
.ph-header.is-overlay:not(.is-scrolled) .wp-block-navigation a,
.ph-header.is-overlay:not(.is-scrolled) .ph-phone,
.ph-header.is-overlay:not(.is-scrolled) .ph-mnav-open { color: #fff; }
.ph-header.is-overlay.is-scrolled { box-shadow: 0 6px 24px -18px rgba(20,16,61,.5); }

.ph-dark-top .wp-site-blocks > header.wp-block-template-part { margin-bottom: -77px; }
/* donkere paginakop schuift onder de doorzichtige kop door */
.ph-dark-top .ph-page-hero { padding-top: calc(77px + var(--wp--preset--spacing--70)) !important; }
.wp-site-blocks > header.wp-block-template-part + * { margin-block-start: 0; }
/* secties sluiten op elkaar aan, zoals in de demo (geen witte strook tussen de banden) */
.wp-block-post-content > .alignfull, .wp-site-blocks > main > .alignfull, .wp-site-blocks > footer.wp-block-template-part { margin-block-start: 0 !important; }

/* ---------- Mobiel menu (eigen <dialog> in patterns/header.php, header.js opent hem) ---------- */
.ph-mnav-open { display: none; }
@media (max-width: 781px) {
	.ph-header .ph-nav { display: none; }
	.ph-mnav-open { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-right: -8px; padding: 0; border: 0; background: none; color: var(--wp--preset--color--ink); cursor: pointer; }
	.ph-mnav-open svg { width: 28px; height: 28px; }
}
.ph-mnav { box-sizing: border-box; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 17px 24px calc(24px + env(safe-area-inset-bottom)); border: 0; background: #fff; color: var(--wp--preset--color--ink); flex-direction: column; overflow-y: auto; }
.ph-mnav[open] { display: flex; animation: ph-mnav-in .28s ease both; }
.ph-mnav::backdrop { background: rgba(20,18,48,.4); }
@keyframes ph-mnav-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
html:has(.ph-mnav[open]) { overflow: hidden; }
.ph-mnav-top { display: flex; align-items: center; justify-content: space-between; min-height: 42px; }
.ph-mnav-logo img { display: block; height: 38px; width: auto; }
.ph-mnav-close { display: grid; place-items: center; width: 42px; height: 42px; margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.ph-mnav-close:hover { background: var(--wp--preset--color--paper-2); }
.ph-mnav-close svg { width: 26px; height: 26px; }
.ph-mnav-main { flex: 1; display: flex; align-items: center; padding: 40px 0; }
.ph-mnav-main ul { list-style: none; margin: 0; padding: 0; width: 100%; }
.ph-mnav-main li { opacity: 0; animation: ph-mnav-in .35s ease forwards; }
.ph-mnav-main li:nth-child(2) { animation-delay: .04s; } .ph-mnav-main li:nth-child(3) { animation-delay: .08s; }
.ph-mnav-main li:nth-child(4) { animation-delay: .12s; } .ph-mnav-main li:nth-child(5) { animation-delay: .16s; }
.ph-mnav-main a { display: inline-block; position: relative; padding: 8px 0; font-size: clamp(30px, 9vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--wp--preset--color--blue); text-decoration: none; }
.ph-mnav-main a::after { content: ""; position: absolute; left: 0; bottom: 6px; height: 3px; width: 0; background: var(--wp--preset--color--yellow); transition: width .2s ease; }
.ph-mnav-main a:hover::after, .ph-mnav-main a[aria-current="page"]::after { width: 100%; }
.ph-mnav-foot { border-top: 1px solid var(--wp--preset--color--line); padding-top: 20px; font-size: 14px; color: #6b6a80; }
.ph-mnav-foot p { margin: 0; }
.ph-mnav-foot a { color: inherit; text-decoration: none; }
.ph-mnav-foot a:hover { color: var(--wp--preset--color--blue); }
.ph-mnav-contact { display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 600; color: var(--wp--preset--color--ink); }
.ph-mnav-small { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 12px 0; padding: 0; }
.ph-mnav-copy { font-size: 12.5px; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .ph-mnav[open], .ph-mnav-main li { animation: none; opacity: 1; } }

/* ---------- Typografie-hulp ---------- */
.is-style-eyebrow { display: inline-flex !important; align-items: center; gap: 12px; font-size: 13.5px !important; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--blue) !important; margin-bottom: 0 !important; }
.is-style-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--wp--preset--color--yellow); flex: none; }
.has-blue-background-color .is-style-eyebrow, .has-blue-gradient-background .is-style-eyebrow, .ph-dark .is-style-eyebrow, .wp-block-cover .is-style-eyebrow { color: var(--wp--preset--color--yellow) !important; }
.ph-dark, .ph-dark p, .wp-block-cover p { color: rgba(255,255,255,.85); }
.ph-dark :where(h1,h2,h3,h4), .wp-block-cover :where(h1,h2,h3,h4) { color: #fff; }

/* ---------- Knoppen ---------- */
.wp-element-button, .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s; white-space: nowrap; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(48,38,135,.5); }
.wp-block-button__link::after { content: "→"; transition: transform .2s ease; }
.wp-block-button__link:hover::after { transform: translateX(4px); }
.ph-form .wp-block-button__link::after { content: none; }
.is-style-blauw .wp-block-button__link { background: var(--wp--preset--color--blue); color: #fff; }
.is-style-blauw .wp-block-button__link:hover { background: #2A2873; }
.is-style-lijn .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border: 1.5px solid var(--wp--preset--color--line); box-shadow: none; }
.is-style-lijn .wp-block-button__link:hover { box-shadow: 0 1px 2px rgba(20,16,61,.05), 0 16px 32px -16px rgba(20,16,61,.28); }
.ph-dark .is-style-lijn .wp-block-button__link, .wp-block-cover .is-style-lijn .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.3); }
.ph-dark .is-style-lijn .wp-block-button__link:hover, .wp-block-cover .is-style-lijn .wp-block-button__link:hover { border-color: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow); box-shadow: none; }

/* ---------- Waarschuwingsstreep (zoals op de bussen) ---------- */
.is-style-streep, .ph-stripe { position: relative; }
.is-style-streep::after, .ph-stripe::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; z-index: 4; background: repeating-linear-gradient(-45deg, var(--wp--preset--color--yellow) 0 38px, var(--wp--preset--color--blue) 38px 76px); }

/* ---------- Kaarten (diensten, waarden) ---------- */
.is-style-kaart { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 30px 26px 26px; box-shadow: 0 1px 2px rgba(20,16,61,.04), 0 12px 28px -18px rgba(20,16,61,.18); transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease; height: 100%; display: flex; flex-direction: column; position: relative; }
.is-style-kaart:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(20,16,61,.05), 0 26px 50px -24px rgba(20,16,61,.3); }
.is-style-kaart > :last-child { margin-top: auto; }
.is-style-kaart p { font-size: 16px; }
.is-style-kaart a { text-decoration: none; color: var(--wp--preset--color--ink); }
.is-style-kaart a:hover { color: var(--wp--preset--color--blue); }
/* "Meer informatie"-links: pijltje, en de hele kaart klikbaar */
.ph-more a::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform .2s; }
.is-style-kaart:hover .ph-more a::after { transform: translateX(4px); }
.ph-more a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* contactkaarten vullen altijd de hele rij */
.ph-ct-cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; gap: 18px !important; }
.ph-ct-cards .is-style-eyebrow { margin-bottom: 12px !important; font-size: 12px !important; }
.is-style-kaart.has-yellow-background-color { border-color: var(--wp--preset--color--yellow); }
.is-style-kaart.has-yellow-background-color :where(h3, p, a), .is-style-kaart.has-yellow-background-color a:hover { color: #fff; }
.ph-icon { width: 46px; height: 46px; border-radius: 13px; background: var(--wp--preset--color--paper-2); display: grid; place-items: center; margin-bottom: 4px; }
.ph-icon img, .ph-icon svg { width: 24px; height: 24px; }

/* ---------- Cijfers ---------- */
.is-style-cijfer { text-align: center; }
.is-style-cijfer > :first-child { font-weight: 400; font-size: clamp(28px, 3.4vw, 46px); white-space: nowrap; line-height: 1; color: var(--wp--preset--color--yellow) !important; margin: 0; }
.is-style-cijfer > :last-child { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-top: 10px; color: rgba(255,255,255,.7) !important; }

/* ---------- Certificaten ---------- */
.is-style-certificaat { border: 1px solid var(--wp--preset--color--line); background: #fff; border-radius: 16px; padding: 22px 28px; min-width: 150px; box-shadow: 0 1px 2px rgba(20,16,61,.04), 0 10px 24px -18px rgba(20,16,61,.2); transition: transform .25s cubic-bezier(.2,.7,.3,1); text-align: center; }
.is-style-certificaat:hover { transform: translateY(-4px); }
.is-style-certificaat > :first-child { font-size: 13px; letter-spacing: .06em; color: var(--wp--preset--color--blue) !important; margin: 0; }
.is-style-certificaat > :last-child:not(:first-child) { font-size: 13px; color: var(--wp--preset--color--ink-2); margin: 6px 0 0; }

/* ---------- Tijdlijn ---------- */
.is-style-tijdlijn > * { display: grid; grid-template-columns: 150px 1fr; gap: 28px; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.16); align-items: baseline; margin: 0 !important; }
.is-style-tijdlijn > :last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.is-style-tijdlijn > * > :first-child { font-weight: 400; font-size: 30px; color: var(--wp--preset--color--yellow) !important; line-height: 1; margin: 0; }
.is-style-tijdlijn > * > :last-child { color: rgba(255,255,255,.84); margin: 0; max-width: 48ch; }
@media (max-width: 760px) { .is-style-tijdlijn > * { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Lijst met vinkjes ---------- */
.is-style-vinkjes { list-style: none; padding-left: 0; display: grid; gap: 10px; }
.is-style-vinkjes li { position: relative; padding-left: 30px; } /* tekst loopt gewoon door, ook met een vetgedrukt begin */
.is-style-vinkjes li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: var(--wp--preset--color--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.5 4.5 10.5-11'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.5 4.5 10.5-11'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Jaartal-badge op een foto ---------- */
.ph-badge-wrap { position: relative; }
.ph-badge { position: absolute; bottom: -22px; left: -22px; background: var(--wp--preset--color--yellow); padding: 20px 24px; max-width: 200px; text-align: center; border-radius: 15px; z-index: 2; }
.ph-badge p { color: #fff !important; margin: 0; }
.ph-badge p:first-child { font-weight: 400; font-size: 34px; line-height: 1; }
.ph-badge p:last-child { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }

/* ---------- Wereldbol-sectie ---------- */
.ph-globe-section { overflow: hidden; }

/* ---------- Vacaturekaarten (Query Loop op Werken bij) ---------- */
.ph-jobs .wp-block-post { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 24px 28px; transition: border-color .2s, box-shadow .2s; }
.ph-jobs .wp-block-post:hover { border-color: var(--wp--preset--color--blue); box-shadow: 0 14px 30px -20px rgba(48,38,135,.45); }
.ph-jobs .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--blue); }
/* hele vacaturekaart klikbaar: de titellink spant over de kaart, de Solliciteer-knop blijft erboven */
.ph-jobs .wp-block-post { position: relative; cursor: pointer; }
.ph-jobs .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.ph-jobs .ph-job-link { position: relative; z-index: 2; }
.ph-jobs .wp-block-post:hover .wp-block-post-title a { text-decoration: underline; text-underline-offset: 4px; }
.ph-job-meta p { font-size: 12.5px; letter-spacing: .04em; margin: 0; }

/* ---------- Homepage-hero ---------- */
.ph-hero { position: relative; overflow: hidden; min-height: min(calc(82svh - var(--wp-admin--admin-bar--height, 0px)), 760px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(77px + var(--wp--preset--spacing--50)) !important; }
.ph-hero::before, .ph-page-hero::before, .ph-photo-scrim::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ph-hero::before { background: linear-gradient(90deg, rgba(12,10,22,.64) 0%, rgba(12,10,22,.34) 46%, rgba(12,10,22,0) 78%); }
.ph-page-hero::before, .ph-photo-scrim::before { background: linear-gradient(90deg, rgba(20,16,61,.6) 0%, rgba(20,16,61,.32) 38%, rgba(20,16,61,0) 72%); }
.ph-hero > *, .ph-page-hero > *, .ph-photo-scrim > * { position: relative; z-index: 1; }
.ph-hero-cols { width: 100%; margin-bottom: 0 !important; }
.ph-hero-cols > .wp-block-column:last-child { padding-bottom: clamp(36px, 6vh, 80px); }
.ph-hero-cols p:not(.is-style-eyebrow) { max-width: 48ch; color: rgba(255,255,255,.9); }
.ph-hero-title { font-size: clamp(30px, 3.6vw, 54px) !important; font-weight: 400; color: #fff; }
.ph-menneke { margin: 0 !important; }
.ph-menneke img { height: min(calc((82svh - 77px) * .82), 560px); width: auto; max-width: none; transform: translateX(-8%); display: block; }
.ph-page-hero, .ph-photo-scrim { position: relative; overflow: hidden; }

/* ---------- Kleine onderdelen ---------- */
.ph-globe-hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 11.5px !important; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55) !important; }
.ph-globe-hint::before { content: ""; width: 18px; height: 18px; background: var(--wp--preset--color--yellow); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15.5-6.2M21 12a9 9 0 0 1-15.5 6.2'/%3E%3Cpath d='M18.5 2.5v3.3h-3.3M5.5 21.5v-3.3h3.3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15.5-6.2M21 12a9 9 0 0 1-15.5 6.2'/%3E%3Cpath d='M18.5 2.5v3.3h-3.3M5.5 21.5v-3.3h3.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.ph-num { font-size: 12px !important; letter-spacing: .12em; color: var(--wp--preset--color--ink-2); margin: 0 0 4px !important; }
.ph-titlerow { gap: 14px !important; align-items: center; }
.ph-titlerow .ph-icon { margin: 0; }
.ph-dienst-rows > * + * { margin-top: var(--wp--preset--spacing--70) !important; }
.ph-anchor { scroll-margin-top: 108px; }
.ph-offset { margin-top: 36px !important; }
.ph-map { width: 100%; height: 300px; border: 0; border-radius: 15px; margin-top: 12px; }
.ph-contact-lines { line-height: 1.9; }
.ph-cards { gap: 20px !important; }
/* dienstkaarten op de homepage: 3 naast elkaar (3 + 2 met de gele hulpkaart), zoals in de demo */
.ph-svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 960px) { .ph-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .ph-svc-grid { grid-template-columns: 1fr !important; } }
.wp-block-image.is-resized img { width: 100%; }

/* ---------- Kleine schermen ---------- */
@media (max-width: 781px) {
	.ph-badge { left: 12px; bottom: -18px; }
	.ph-hero { min-height: 0; }
	.ph-hero-cols > .wp-block-column:last-child { padding-bottom: 0; }
	.ph-hero-cols > .wp-block-column:first-child { order: 2; }
	.ph-menneke img { height: min(46vh, 340px); transform: none; margin: 20px auto 0; }
	.ph-offset { margin-top: 0 !important; }

	/* 1949-badge onder de video in plaats van eroverheen: alleen een randje overlapt de foto */
	.ph-badge-wrap:has(.ph-video-caption) .ph-badge, .ph-badge { position: relative; left: auto; bottom: auto !important; margin: -26px 0 0 14px !important; max-width: 190px; padding: 16px 20px; }
	.ph-badge-wrap .ph-video-caption { margin-top: 12px; }

	/* onze diensten: op mobiel altijd eerst de foto, dan de tekst */
	.ph-dienst-rows .wp-block-columns > .wp-block-column:has(.wp-block-image) { order: -1; }

	/* certificaten: kleiner en twee naast elkaar, als een rustige tagwolk */
	.ph-cert-sec .is-layout-flex:has(> .is-style-certificaat) { gap: 10px !important; align-items: stretch; }
	.ph-cert-sec .is-style-certificaat { flex: 0 1 calc(50% - 5px); max-width: calc(50% - 5px); min-width: 0; padding: 14px 10px; border-radius: 12px; }
	.ph-cert-sec .is-style-certificaat > :first-child { font-size: 11.5px; letter-spacing: .03em; }
	.ph-cert-sec .is-style-certificaat > :last-child:not(:first-child) { font-size: 11.5px; margin-top: 4px; }
}

.ph-sticky { position: sticky; top: 108px; align-self: flex-start; }
.ph-dark .ph-job-meta p { color: rgba(255,255,255,.8); }
.ph-dark .is-style-eyebrow a { color: inherit; text-decoration: none; }

/* logo zonder extra regelhoogte, zodat de kop precies 77px hoog is */
.ph-logo { margin: 0 !important; line-height: 0; }
.ph-logo a { display: block; line-height: 0; }

/* badge blijft over de foto staan, ook met de tekstregel onder de video */
.ph-badge-wrap:has(.ph-video-caption) .ph-badge { bottom: 14px; }

/* ---------- Voet (zoals de demo) ---------- */
.ph-footer { color: rgba(255,255,255,.7); }
.ph-footer p, .ph-footer li { color: rgba(255,255,255,.7); }
.ph-footer a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .2s; }
.ph-footer a:hover { color: var(--wp--preset--color--yellow); }
.ph-foot-logo { margin: 0 0 16px !important; }
.ph-foot-tagline { font-size: 15px; max-width: 34ch; margin: 0 !important; }
.ph-foot-contact { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; }
.ph-foot-contact li { display: flex; gap: 10px; align-items: flex-start; }
.ph-foot-ico { flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-top: 1px; }
.ph-foot-ico img { width: 16px; height: 16px; }
.ph-foot-head { font-size: 12px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--yellow) !important; margin: 0 0 16px !important; }
.ph-foot-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; font-size: 15px; }
.ph-foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px !important; padding-block: 18px; }
.ph-foot-bottom p { font-size: 12.5px; margin: 0; }

/* ---------- Contactregels met iconen ---------- */
.ph-contact-lines { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 14px; }
.ph-contact-lines li { display: flex; gap: 12px; align-items: center; color: var(--wp--preset--color--ink); }
.ph-contact-lines a { color: var(--wp--preset--color--ink); }
.ph-contact-lines a:hover { color: var(--wp--preset--color--blue); }
.ph-ct-ico { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--wp--preset--color--paper-2); }
.ph-ct-ico img { width: 19px; height: 19px; }

/* ---------- Werken bij-banner met zwaaiend menneke ---------- */
.ph-careers { position: relative; overflow: visible !important; z-index: 2; }
.ph-careers::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(90deg, rgba(12,10,22,.72) 0%, rgba(12,10,22,.4) 52%, rgba(12,10,22,.05) 100%); }
.ph-careers > * { position: relative; z-index: 1; }
.ph-careers-menneke { position: absolute !important; right: clamp(8px, 6vw, 104px); bottom: 0; margin: 0 !important; max-width: none !important; z-index: 3 !important; pointer-events: none; transform: translateY(21.2%); }
.ph-careers-menneke img { height: clamp(300px, 38vw, 500px); width: auto; display: block; }
@media (max-width: 920px) {
	/* menneke staat op de grens: shirtzoom (78,8% van de afbeelding) op de bovenrand van de banner,
	   lijf in de certificatensectie erboven, zwaaiende hand in de donkere band */
	.ph-cert-sec { padding-bottom: clamp(170px, 46vw, 280px) !important; }
	.ph-careers { padding-top: clamp(56px, 16vw, 110px) !important; }
	.ph-careers-menneke { top: 0; bottom: auto; left: 50%; right: auto; transform: translate(-50%, -78.8%); }
	.ph-careers-menneke img { height: clamp(210px, 52vw, 320px); }
}

/* dienstkaarten: nummer rechtsboven, en het icoonvakje in de gele kaart */
.ph-card-num { position: absolute; top: 22px; right: 24px; margin: 0 !important; font-size: 12px !important; letter-spacing: .12em; color: var(--wp--preset--color--ink-2) !important; }
.is-style-kaart.has-yellow-background-color .ph-icon { background: rgba(255,255,255,.22); }

/* paginakoppen breken zoals in de demo (smalle titelkolom) */
.ph-page-hero h1 { max-width: 18ch; text-wrap: wrap; } /* zoals de demo: niet uitbalanceren, breedte 18 tekens */

/* ---------- Werken bij: menneke met lasmasker in de kop ---------- */
.ph-hero-figure { position: absolute !important; right: clamp(16px, 12vw, 180px); top: 102px; margin: 0 !important; max-width: none !important; z-index: 1; pointer-events: none; filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)); }
.ph-hero-figure img { width: 278px; height: auto; display: block; }
@media (max-width: 860px) { .ph-hero-figure { display: none !important; } }

/* nummer in een vakje (voordeelkaarten) */
.ph-chip { width: 44px; height: 44px; border-radius: 12px; background: var(--wp--preset--color--paper-2); color: var(--wp--preset--color--blue) !important; display: grid !important; place-items: center; margin: 0 0 6px !important; font-size: 15px !important; line-height: 1; }

/* vacaturekaarten: labels voor de velden, blauwe Solliciteer-knop */
.ph-jobs .ph-job-meta p { color: var(--wp--preset--color--blue); font-weight: 600; }
.ph-meta-dienstverband::before, .ph-meta-locatie::before { color: var(--wp--preset--color--ink-2); font-weight: 400; }
.ph-meta-dienstverband::before { content: "Dienstverband: "; }
.ph-meta-locatie::before { content: "Locatie: "; }
.ph-jobs .ph-job-link { display: inline-flex; align-items: center; gap: 10px; background: var(--wp--preset--color--blue); color: #fff !important; border-radius: 999px; padding: 12px 26px; text-decoration: none; white-space: nowrap; transition: background .2s, transform .15s; }
.ph-jobs .ph-job-link::after { content: "→"; transition: transform .2s; }
.ph-jobs .ph-job-link:hover { background: #2A2873; transform: translateY(-2px); }
.ph-jobs .ph-job-link:hover::after { transform: translateX(4px); }
.ph-jobs .wp-block-column:last-child { display: flex; justify-content: flex-end; }

/* gecentreerde bovenkop (bijv. bij certificaten) */
.is-style-eyebrow.has-text-align-center { display: flex !important; justify-content: center; }

/* ---------- Mobiel zoals de demo ---------- */
@media (max-width: 781px) {
	/* cijfers in een raster van 2 x 2 */
	.wp-block-columns.ph-stats { flex-wrap: wrap !important; row-gap: 30px; }
	.wp-block-columns.ph-stats > .wp-block-column { flex-basis: calc(50% - 1em) !important; flex-grow: 0; }
}

/* voet op mobiel: Menu en Informatie uitklapbaar (header.js zet de knoppen) */
.ph-foot-toggle { all: unset; display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; }
.ph-foot-toggle::after { content: "⌄"; font-size: 20px; line-height: 1; color: rgba(255,255,255,.55); transition: transform .25s ease; }
@media (max-width: 781px) {
	.ph-footer-grid > .wp-block-column:not(:first-child) { border-top: 1px solid rgba(255,255,255,.12); }
	.ph-footer-grid > .wp-block-column:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
	.ph-footer-grid { row-gap: 0 !important; }
	.ph-footer-grid > .wp-block-column:first-child { margin-bottom: 26px; }
	.ph-footer .ph-foot-head { margin: 0 !important; padding: 18px 0; font-size: 13px !important; }
	.ph-footer .ph-foot-links { max-height: 0; overflow: hidden; gap: 0; transition: max-height .3s ease; }
	.ph-footer .ph-foot-links li a { display: block; padding: 7px 0; }
	.ph-footer [data-open="true"] .ph-foot-links { max-height: 320px; padding-bottom: 18px; }
	.ph-footer [data-open="true"] .ph-foot-toggle::after { transform: rotate(180deg); }
}
@media (min-width: 782px) { .ph-foot-toggle { cursor: default; } .ph-foot-toggle::after { display: none; } }
.ph-dark .ph-meta-dienstverband::before, .ph-dark .ph-meta-locatie::before { color: rgba(255,255,255,.6); }
.ph-dark .ph-job-meta p { color: #fff; }

/* ---------- Vacaturepagina ---------- */
.single-vacature main > .ph-dark:first-child { padding-top: calc(77px + var(--wp--preset--spacing--60)) !important; }
.ph-back { margin: 0 0 22px !important; font-size: 14.5px; }
.ph-back a { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 8px 16px 8px 12px; border: 1.5px solid rgba(255,255,255,.3); border-radius: 999px; transition: border-color .2s, color .2s; }
.ph-back a span { transition: transform .2s ease; }
.ph-back a:hover { border-color: var(--wp--preset--color--yellow); color: var(--wp--preset--color--yellow); }
.ph-back a:hover span { transform: translateX(-4px); }
.ph-stage-photo { margin: 34px 0 30px !important; }
.ph-stage-photo img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 18px; }
.ph-stage-h3 { margin-top: 46px !important; }
.ph-tiles { gap: 14px !important; margin: 24px 0 26px !important; }
.ph-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.ph-tiles .is-style-kaart > :last-child { margin-top: 12px; } /* geen 'Meer informatie' onderaan: tekst direct onder de titel */
.ph-tiles .is-style-kaart h3 { margin-top: 22px; }
@media (max-width: 560px) { .ph-tiles { grid-template-columns: 1fr !important; } }
.ph-callout { background: #FFF8DB; border-left: 3px solid var(--wp--preset--color--yellow); border-radius: 0 12px 12px 0; padding: 16px 20px; }
/* donkere kop: foto vooraf blauw ingekleurd, precies zoals hero-diensten/over-ons/contact, met dezelfde verloop-laag */
.ph-vacancy-hero.ph-vacancy-hero { background: url("../images/hero-vacature.webp") center / cover no-repeat !important; }
.ph-vacancy-hero { position: relative; overflow: hidden; }
.ph-vacancy-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(20,16,61,.6) 0%, rgba(20,16,61,.32) 38%, rgba(20,16,61,0) 72%); }
.ph-vacancy-hero > * { position: relative; z-index: 1; }

/* ---------- Cookiemelding ---------- */
.ph-cookie { position: fixed; left: 20px; bottom: 20px; z-index: 90; width: min(420px, calc(100vw - 40px)); background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(20,16,61,.45); padding: 22px 22px 20px; opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; }
.ph-cookie.is-open { opacity: 1; transform: none; }
.ph-cookie-title { margin: 0 0 6px; font-size: 17px; color: var(--wp--preset--color--blue); }
.ph-cookie-text { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--wp--preset--color--ink-2); }
.ph-cookie-text a { color: var(--wp--preset--color--blue); }
.ph-cookie-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.ph-cookie-buttons button { font: inherit; font-size: 15px; border-radius: 999px; padding: 10px 20px; cursor: pointer; border: 1.5px solid transparent; transition: background .2s, border-color .2s; }
.ph-cookie-yes { background: var(--wp--preset--color--blue); color: #fff; }
.ph-cookie-yes:hover { background: #2A2873; }
.ph-cookie-no { background: transparent; color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--line) !important; }
.ph-cookie-no:hover { border-color: var(--wp--preset--color--blue) !important; }
@media (max-width: 600px) { .ph-cookie { left: 12px; right: 12px; bottom: 12px; width: auto; } }
.ph-muted { color: var(--wp--preset--color--ink-2); font-size: 14px; margin-top: 40px !important; }