/*
Theme Name: GeneratePress Child — Buitenomm
Theme URI: https://buitenomm.nl
Description: Child theme met dynamische header (logo + vogel + fotostrook).
Template: generatepress
Version: 1.0.0
*/

/* ===== Dynamische header — 1-op-1 met de oude composite =====
   De oude header was één afbeelding van 2331x1105 px, weergegeven op 1200px
   breed binnen de container, met 20px witte padding erboven. Alle maten hieronder
   zijn exact uit die composite gemeten en uitgedrukt als fractie van 2331,
   zodat alles op elke schermbreedte identiek meeschaalt:
   - transparante bovenrand composite: 23px  (23/2331 = 0.009867)
   - bruin vlak: y 23..613  (hoogte 590/2331 = 0.253110)
   - witruimte tussen bruin en strook: y 613..645 (32/2331 = 0.013728)
   - fotostrook: y 645..1101 (hoogte 456 = vierkante cellen), gap 13.7px
     (0.005877), cel 455.3px
   - mint-cirkel: x 903..1470, y 192..780; logo-PNG (1348x1344, mint x 56..1337,
     y 6..1335) daarop gemapt: breedte 596.7 (0.255950), positie x 878.2
     (0.376749), y 189.3 (0.081226)
   - vogel-canvas: 440x232, geknipt op composite x=830 (0.356070), y=0 */
:root {
	--buitenomm-bruin: #A27D64;
	/* breedte van het headerblok = de 1200px-container van het origineel */
	--header-inner: min(1200px, calc(100vw - 80px));
}

/* #masthead in de selector: wint van GP's eigen inside-header-regels (id-specificiteit) */
#masthead.site-header .inside-header {
	position: relative;
	box-sizing: border-box;
	max-width: 1280px; /* 1200 content + 2 x 40 padding */
	margin: 0 auto;
	/* 20px wit + de transparante bovenrand van de oude afbeelding */
	padding: calc(20px + var(--header-inner) * 0.009867) 40px 0;
	/* bruin vlak alleen over de content, niet over de padding */
	background: var(--buitenomm-bruin);
	background-clip: content-box;
}

/* .site-logo geeft de header alleen zijn hoogte (bruin vlak tot de strook);
   het logo zelf hangt absoluut, zodat de cirkel onder de headerrand uit kan steken */
.site-logo {
	display: block;
	height: calc(var(--header-inner) * 0.253110);
	padding: 0;
	margin: 0;
}

.site-header .site-logo img {
	position: absolute;
	z-index: 5;
	width: calc(var(--header-inner) * 0.255950);
	height: auto;
	left: calc(40px + var(--header-inner) * 0.376749);
	top: calc(20px + var(--header-inner) * 0.081226);
}

.buitenomm-vogel {
	position: absolute;
	z-index: 6;
	width: calc(var(--header-inner) * 0.188760);
	height: auto;
	left: calc(40px + var(--header-inner) * 0.356070);
	top: 20px; /* vogel-canvas begint op composite y=0 */
}

/* volle-breedte witte band achter de strook (zoals de witte header van het origineel);
   padding-top = witruimte tussen bruin en foto's; padding-bottom = de 20px
   header-padding van het origineel onder de foto's */
.buitenomm-fotostrook-band {
	background: #fff;
	padding-top: calc(var(--header-inner) * 0.013728);
	/* 20px header-padding + de 3px transparante onderrand van de oude afbeelding */
	padding-bottom: calc(20px + var(--header-inner) * 0.001287);
}

.buitenomm-fotostrook {
	display: flex;
	gap: calc(var(--header-inner) * 0.005877);
	background: #fff;
	max-width: var(--header-inner);
	margin: 0 auto;
}

.buitenomm-fotostrook .foto {
	flex: 1;
	aspect-ratio: 455.3 / 456; /* vierkant, zoals het origineel */
	overflow: hidden;
}

.buitenomm-fotostrook .foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}