/* Productfoto Rotterdam – nabouw van yoo_moreno (stijl "white").
   Waarden overgenomen uit templates/yoo_moreno/styles/white/css/theme.css. */

:root {
	--pf-bg: #f5f5f5;
	--pf-text: #455664;
	--pf-heading: #222222;
	--pf-white: #ffffff;
	--pf-primary: #79b646;
	--pf-primary-dark: #6da43f;
	--pf-primary-shadow: #6aa03e;
	--pf-secondary: #455664;
	--pf-secondary-dark: #3b4955;
	--pf-secondary-text: #e3f0d8;
	--pf-hover: #ebebeb;
	--pf-overlay: rgba(0, 0, 0, .6);
	--pf-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--pf-gutter: 10px;          /* halve tussenruimte in het mozaïek */
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 24px; overflow-y: scroll; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--pf-bg);
	font-family: var(--pf-font);
	font-weight: 300;
	font-size: 1rem;
	line-height: 30px;
	color: var(--pf-text);
}
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: var(--pf-white); text-decoration: none; transition: all .1s ease-in-out; }
a:hover { color: var(--pf-white); text-decoration: underline; }
p, ul, ol, figure { margin: 0 0 20px; }
* + p, * + ul { margin-top: 20px; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; font-family: var(--pf-font); font-weight: 300; color: var(--pf-heading); }
* + h1, * + h2, * + h3, * + h4 { margin-top: 20px; }
h1 { font-size: 77px; line-height: 83px; }
h2 { font-size: 58px; line-height: 64px; }
h3 { font-size: 45px; line-height: 54px; }
h4 { font-size: 35px; line-height: 41px; }
.clearfix::after { content: ""; display: table; clear: both; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Container (uk-container) */
.pf-container { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.pf-container::after { content: ""; display: table; clear: both; }
@media (min-width: 1220px) { .pf-container { max-width: 1240px; padding: 0 30px; } }

/* ---------------------------------------------------------------- Kop + navbar */
.pf-block-top { background: var(--pf-white); margin-bottom: 20px; }
@media (min-width: 768px) { .pf-block-top { margin-bottom: 30px; } }
.pf-top-inner { display: flex; align-items: stretch; flex-wrap: wrap; }
.pf-logo { display: block; flex: 0 0 auto; line-height: 0; }
.pf-logo img { display: block; max-height: 55px; width: auto; }
.pf-logo:hover { text-decoration: none; }
.pf-navbar { flex: 1 1 auto; display: flex; align-items: stretch; background: var(--pf-white); color: var(--pf-text); position: relative; }
.pf-navbar-nav { display: flex; margin: 0; padding: 0; list-style: none; }
.pf-navbar-nav > li { position: relative; margin: 0; }
.pf-navbar-nav > li > a {
	display: block; height: 55px; padding: 0 20px; line-height: 55px;
	color: var(--pf-text); font-size: 24px; text-decoration: none;
}
.pf-navbar-nav > li:hover > a,
.pf-navbar-nav > li > a:focus,
.pf-navbar-nav > li:focus-within > a {
	background-color: var(--pf-primary); color: var(--pf-text);
	text-shadow: 0 1px 1px var(--pf-primary-shadow); outline: none;
}
.pf-navbar-nav > li > a:active { background-color: var(--pf-primary-dark); }
.pf-navbar-nav > li.pf-active > a,
.pf-navbar-nav > li.current-menu-item > a { background-color: var(--pf-primary); color: var(--pf-white); }

/* Dropdown (uk-dropdown-navbar) */
.pf-navbar-nav .sub-menu {
	display: none; position: absolute; top: 100%; left: 0; z-index: 1020;
	min-width: 200px; margin: 0; padding: 15px 0; list-style: none;
	background: var(--pf-primary); color: var(--pf-white);
	box-shadow: inset 0 -8px 16px -4px var(--pf-primary-dark);
	text-shadow: 0 1px 1px var(--pf-primary-shadow);
}
.pf-navbar-nav > li:hover > .sub-menu,
.pf-navbar-nav > li:focus-within > .sub-menu { display: block; animation: pf-scale-up .2s ease-in-out; transform-origin: 0 0; }
.pf-navbar-nav .sub-menu li { margin: 0; }
.pf-navbar-nav .sub-menu a { display: block; padding: 5px 20px; color: rgba(69, 86, 100, .7); text-decoration: none; }
.pf-navbar-nav .sub-menu a:hover,
.pf-navbar-nav .sub-menu a:focus { background: #6d9e45; color: var(--pf-text); outline: none; }
.pf-navbar-nav .sub-menu .current-menu-item > a { color: var(--pf-white); }
@keyframes pf-scale-up { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

/* Mobiel menu (de oude site was niet responsive; dit is een toevoeging) */
.pf-nav-toggle { display: none; }
@media (max-width: 767px) {
	.pf-top-inner { padding: 0; }
	.pf-logo { flex: 1 1 auto; }
	.pf-navbar { flex: 0 0 auto; }
	.pf-nav-toggle {
		display: block; width: 55px; height: 55px; border: 0; background: transparent; cursor: pointer; padding: 0;
	}
	.pf-burger, .pf-burger::before, .pf-burger::after {
		display: block; width: 26px; height: 3px; margin: 0 auto; background: var(--pf-text); position: relative; content: "";
	}
	.pf-burger::before { position: absolute; top: -8px; }
	.pf-burger::after { position: absolute; top: 8px; }
	.pf-navbar-nav { display: none; }
	.pf-navbar.is-open .pf-navbar-nav {
		display: block; position: absolute; right: 0; top: 55px; z-index: 1030; width: 260px;
		background: var(--pf-white); box-shadow: 0 4px 12px rgba(0,0,0,.15);
	}
	.pf-navbar.is-open .sub-menu { display: block; position: static; box-shadow: none; padding: 0 0 10px; animation: none; }
}

/* ---------------------------------------------------------------- Panels */
.pf-tile { position: relative; }
.pf-box { padding: 20px; background: var(--pf-white); color: var(--pf-text); }
@media (min-width: 768px) { .pf-box { padding: 40px; } }
.pf-box-primary {
	background-color: var(--pf-primary); color: var(--pf-white);
	box-shadow: inset 0 0 40px var(--pf-primary-dark); text-shadow: 0 1px 1px var(--pf-primary-shadow);
}
.pf-box-primary a { color: var(--pf-text); }
.pf-box-secondary {
	background-color: var(--pf-secondary); color: var(--pf-secondary-text);
	box-shadow: inset 0 0 40px var(--pf-secondary-dark); text-shadow: 0 1px 1px var(--pf-primary-shadow);
}
.pf-box-secondary a { color: var(--pf-text); }
.pf-space { padding: 40px; }
.pf-box > :last-child, .pf-space > :last-child { margin-bottom: 0; }

/* Hover-iconen (custom.css van de oude template) */
.coverall { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; }
.icn-image-hover { display: none; }
.icn-image-link:hover ~ .icn-image-hover { display: block; }
.icn-image-link:hover ~ .icn-image { display: none; }

/* ---------------------------------------------------------------- Mozaïek */
.pf-mosaic { position: relative; margin: 10px calc(var(--pf-gutter) * -1); }
.pf-mosaic::after { content: ""; display: table; clear: both; }
.pf-mosaic > * { margin: 0 !important; }   /* neutraliseer block-gap van WordPress */
.pf-mosaic > .pf-tile {
	float: left; overflow: hidden;
	border: var(--pf-gutter) solid transparent; background-clip: padding-box;
	width: 100%;
}
/* Zonder JavaScript (of tijdens laden): vaste verhoudingen, 5/4/3/1 kolommen */
.pf-mosaic > .pf-tile { aspect-ratio: 1 / 1; }
@media (min-width: 641px) {
	.pf-mosaic > .pf-tile { width: 33.333%; }
	.pf-mosaic > .size21 { width: 66.666%; aspect-ratio: 2 / 1; }
	.pf-mosaic > .size22 { width: 66.666%; }
	.pf-mosaic > .size12 { aspect-ratio: 1 / 2; }
}
@media (min-width: 960px) {
	.pf-mosaic > .pf-tile { width: 25%; }
	.pf-mosaic > .size21, .pf-mosaic > .size22 { width: 50%; }
}
@media (min-width: 1220px) {
	.pf-mosaic > .pf-tile { width: 20%; }
	.pf-mosaic > .size21, .pf-mosaic > .size22 { width: 40%; }
}
/* Zodra theme.js de maten berekent, gelden die (inline width/height) */
.pf-mosaic.is-masonry > .pf-tile { aspect-ratio: auto; }
@media (max-width: 640px) {
	.pf-mosaic > .pf-tile { aspect-ratio: auto; }
	.pf-mosaic > .pf-tile:has(img) { min-height: 0; }
}
.pf-column-indicator { width: 100%; height: 0; visibility: hidden; position: absolute; }
@media (min-width: 641px) { .pf-column-indicator { width: 33.3%; } }
@media (min-width: 960px) { .pf-column-indicator { width: 25%; } }
@media (min-width: 1220px) { .pf-column-indicator { width: 20%; } }
.pf-mosaic font { vertical-align: middle; }

/* Spotlight (Widgetkit): overlay verschijnt bij hover */
.spotlight { position: relative; display: block; overflow: hidden; color: var(--pf-white); }
.spotlight:hover { text-decoration: none; }
.spotlight > img { display: block; }
.spotlight .overlay {
	position: absolute; inset: 0; z-index: 2;
	background: var(--pf-overlay); color: var(--pf-white);
	opacity: 0; transition: opacity .25s ease-in-out;
	line-height: 1.25;
}
.spotlight:hover .overlay, .spotlight:focus .overlay { opacity: 1; }
.spotlight .overlay p { color: var(--pf-white); }

/* Zijmenu (uk-nav-side) */
.pf-nav-side { margin: 0; padding: 0; list-style: none; }
.pf-nav-side > li > a { display: block; padding: 5px 15px; color: var(--pf-text); transition: background .1s ease-in-out; }
.pf-nav-side > li > a:hover, .pf-nav-side > li > a:focus { background: var(--pf-hover); color: var(--pf-text); text-decoration: none; outline: none; }
.pf-nav-side > li.pf-active > a {
	background: var(--pf-primary); color: var(--pf-text);
	box-shadow: inset 0 0 8px var(--pf-primary-dark); text-shadow: 0 1px 1px var(--pf-primary-shadow);
}

/* ---------------------------------------------------------------- Secties onder het mozaïek */
.pf-section { margin: 20px 0; }
.pf-section > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.pf-section > * + * { margin-top: 20px !important; }
@media (min-width: 1220px) { .pf-section > * + * { margin-top: 40px !important; } }
.pf-section > .pf-tile { display: flow-root; }
.pf-content:empty { display: none; }

/* Oude, niet-responsive inline-layouts op kleine schermen netjes onder elkaar */
@media (max-width: 767px) {
	.pf-section [style*="float: left"], .pf-section [style*="float:left"] { float: none !important; width: 100% !important; margin: 0 0 10px !important; }
	.pf-section [style*="height:700px"], .pf-section [style*="height: 700px"] { height: auto !important; padding-bottom: 20px; }
	h3 { font-size: 32px; line-height: 40px; }
}

/* ---------------------------------------------------------------- Footer */
.pf-footer {
	position: relative; margin: 20px 0; padding-top: 20px;
	border-top: 2px solid rgba(0, 0, 0, .08); text-align: center; color: var(--pf-white);
}
@media (min-width: 768px) { .pf-footer { margin: 30px 0; } }
.pf-footer a, .pf-footer a:hover { color: var(--pf-text); }


/* ---------------------------------------------------------------- Lightbox */
.pf-lightbox {
	position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
	background: rgba(34, 34, 34, .9); padding: 40px; opacity: 0; transition: opacity .25s ease-in-out; cursor: zoom-out;
}
.pf-lightbox.is-open { opacity: 1; }
.pf-lightbox figure {
	margin: 0; padding: 10px; background: var(--pf-secondary); box-shadow: 0 0 30px #151515;
	max-width: 100%; max-height: 100%; transform: scale(.9); transition: transform .25s ease-in-out;
}
.pf-lightbox.is-open figure { transform: scale(1); }
.pf-lightbox img { display: block; max-width: calc(100vw - 100px); max-height: calc(100vh - 100px); width: auto; height: auto; background: var(--pf-white); }
.pf-lightbox button {
	position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: var(--pf-secondary); color: var(--pf-white); font-size: 28px; line-height: 40px; cursor: pointer;
}
.pf-404 { text-align: center; }
.pf-404 h1 { color: var(--pf-white); }
.pf-article-title a { color: var(--pf-heading); }

/* Editor: tegels in het blokeditor-scherm herkenbaar houden */
.editor-styles-wrapper .pf-mosaic > .pf-tile { outline: 1px dashed rgba(0,0,0,.2); }

/* Zichtbaarheid per apparaat (uk-hidden-*) */
@media (max-width: 767px) { .pf-hidden-small { display: none !important; } }
@media (min-width: 768px) and (max-width: 1219px) { .pf-hidden-medium { display: none !important; } }
@media (min-width: 1220px) { .pf-hidden-large { display: none !important; } }

/* Telefoon: decoratieve kleurbalken uit het mozaïek weglaten, logo laten krimpen */
@media (max-width: 640px) {
	.pf-mosaic > .pf-tile:has(> img[src$="sidebar.png"]) { display: none; }
	.pf-logo { flex: 1 1 0; min-width: 0; }
	.pf-logo img { max-width: 100%; height: auto; }
}