@layer FHSSR {

/*** Reset browser styles ***/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {

	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

html {
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 100%;
}

ol, ul {
	list-style:none;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: border-box; /* TBD chrome issue: box-sizing does not get correctly inherited inside <details> */
}

/**** FHSSR utility classes */

.FHSSRhidden {
	display:none !important; /* should always happen! */
}

#FHSSRskipnav,
.FHSSRvisuallyhidden:not(:focus) {
	position:absolute;
	clip:rect(0 0 0 0);
	border:0;
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	width:1px;
	white-space:nowrap;
}

#FHSSRskipnav:focus-within {
	clip:auto;
	left:0;
	top:0;
	width:100%;
	height:auto;
	margin:0;
	padding:10px 0;
	background:#fdf6e7;
	border:2px solid #990000;
	border-left:none;
	border-right:none;
	text-align:center;
	font-weight:bold;
	color:#990000;
}

}


.fhssrfield {
		display:flex;
		gap:8px;

		& > label:empty {
			display:none;
		}

		& > input {
			flex-grow:1;
		}

	}
.fhssrfield {
		display:inline-flex;
		gap:8px;

		& > label:empty {
			display:none;
		}

		& > input {
			flex-grow:1;
		}

		.fhssrfieldvalunit {
			display:grid;
			grid-template-columns:1fr auto;
			gap:4px;

			& input {
				min-width:0;
			}
		}

	}
.fhmodel {
		display:flex;
		flex-direction:column;
		gap:4px;
		align-items:start;

		& > .fhmodel {
			margin-left:8px;
		}
	}

	.fhmodelrelcontainer {
		display:flex;
		flex-direction:column;
		gap:16px;
		align-items:start;
	}

nav {
	--fhnavborderthickness:1px;
	border-bottom:var(--fhnavborderthickness) solid var(--colfg3);
	margin-bottom:16px;

	& .fhnavcontainer {
		display:flex;
		flex-direction:row;
		align-items:end;
		justify-content:space-between;
		gap:16px;
		padding:16px 16px calc(16px - var(--fhnavborderthickness)) 16px;
		max-width:1500px;
		margin:0 auto;
	}

	& .fhnavicon > a {
		display:flex;
		flex-direction:column;
		align-items:center;
		align-content:end;
		padding-bottom:2px;
		& .fhnavcompanyname {
			font-size:0.8em;
			text-align:center;
			white-space:nowrap;
			margin-bottom:-1px;
			color:var(--pcolaccent1);
		}
		& svg {
			height:2em;
			stroke:var(--colbgaccent1);
		}
	}

	& .curaction {
		display:inline-block;
		white-space:nowrap;
	}

	& .fhnavitems {
		/* display:none; */
		display:flex;
		gap:8px 32px;
		width:auto;
		margin:0;
		background-color:var(--colbg1);
		color:var(--colfg1);

		/*
		& > li {
			white-space:nowrap;
		}
		*/
	}

	& .butfhnav {
		/* align-self:center; */
		margin-bottom:-3px;
	}

}

nav:not(.fhnav2) {
	& .fhnavitems {
		display:none;
	}

	& .fhnavitems:popover-open {
		position-area:end span-start;
		display:flex;
		flex-direction:column;
		gap:16px;
		padding:16px;
		border:1px solid var(--colfg1);
	}

}

@media screen and (min-width: 700px) {
	nav {
		& .fhnavcontainer {
			justify-content:start;
			/* gap:32px; */
			gap:64px;
		}

		& .fhnavicon > a {
			/* margin-bottom:-2px; */
		}

		& .curaction {
			display:none;
		}

		& .fhnavitems:not(:popover-open) {
			display:flex;
			border:none;
		}
		& .fhnavitems {
			position:static;
			display:flex;
			flex-direction:row;
			align-items:center;
			align-content:end;
			flex-wrap:wrap;
			margin-bottom:-3px;

			& a {
				display:inline-block;
				padding:4px;
				&[aria-current] {
					background-color:var(--colbgaccent1);
					color:var(--colfgaccent1);
				}
				&[aria-current]:hover {
					text-decoration-color:var(--colfgaccent1);
				}
			}
		}

		& .butfhnav {
			display:none;
		}
	}
}

.iconstyle {
	fill:var(--colbgaccent1);
	stroke:var(--colfgaccent1);
}
nav:not(.fhnav2):has(+ #FHSSRpagemain > .fhnav2) {
	margin-bottom:0;
}

nav.fhnav2 {
	padding:8px 8px;
    border:none;
    margin-bottom:32px;
    background-color: var(--colbg2);
    /* background: linear-gradient(to bottom, var(--colfg1), 1%, var(--colbg1)); */
	/* background:linear-gradient(to bottom, var(--colbg2), var(--colbg1)); */
    border-radius: 0 0 4px 4px;
    /* border-bottom: 1px solid var(--colfg3); */
    border-bottom: 1px solid var(--colbg25);

	& .fhnavitems {
		background-color:transparent;
		flex-wrap:wrap;
		& a {
			white-space:nowrap;
			display:inline-block;
			padding:4px;
			&[aria-current] {
				background-color:var(--colbgaccent1);
				color:var(--colfgaccent1);
			}
			&[aria-current]:hover {
				text-decoration-color:var(--colfgaccent1);
			}
		}
	}
}

@media screen and (min-width: 700px) {
	nav.fhnav2 {
		padding:12px 12px;
	}
}
.curdate {
	color:lightgrey;
}
/* TBD
	V standaard layouts voor landscape, portrait, op mobiel
	V eerste animatie van hotspots bij laden
	V schuttersstukken
		V slider in zelfde bruine kleur
		V teksten eronder
		V caption niet wrappen
		V beeld zo groot mogelijk
	V vind svg icoontjes op fgh site
	V 100-jaar logo op de site krijgen
*/

:root {
	--colhotspot:#ecd2a8;
	--colpop:#bd8d0f;
	--coltext:#f8e0b8;
	--space1:8px;
	--space2:16px;
	/* --fontsize1:12px; */
	/* --fontsize2:16px; */
	--fontsize1:min(1.5dvmin, 32px);
	--fontsize1c:clamp(14px, 1.5dvmin, 32px);
	--fontsize2:min(4px + 1.5dvmin, 40px);
	--fontsize2c:clamp(18px, 4px + 1.5dvmin, 36px);
}

@media (width > 640px) {
	:root {
		--space1:16px;
		--space2:32px;
		/* --fontsize1:16px; */
		/* --fontsize2:20px; */
	}
}


.imgcontainer1 {
	--imgaspect:1;
	--imgw:min(100dvw, calc(100dvh * var(--imgaspect)));
	--imgh:min(100dvh, calc(100dvw / var(--imgaspect)));
	--imgtop:calc((100dvh - var(--imgh)) / 2);
	--imgleft:calc((100dvw - var(--imgw)) / 2);
	position:relative;
	width:100dvw;
	height:100dvh;
	background-color:var(--colpop);
}

.imgcontainer2 {
	position:absolute;
	top:var(--imgtop);
	left:var(--imgleft);
	width:calc(var(--imgw));
	height:calc(var(--imgh));
}

#beeldwacht {
	width:100%;
	height:100%;
}

#header {
	position:absolute;
	top:0;
	left:0;
	width:58.5%;
	padding:1% 1% 1% 7%;
	background-color:rgb(189,141,15,0.6);
}
#header > h1 {
	font-size:min(4dvmin, 64px);
	text-transform:uppercase;
	color:var(--coltext);
}
#header > p {
	font-size:min(1.8dvmin, 32px);
	color:#fafafa;
}

.textmeer {
	position:absolute;
	color:var(--coltext);
	/* font-size:min(1.5dvmin, 32px); */
	font-size:var(--fontsize2);
	padding:0;
	border:0;
	background-color:transparent;
	transform:translateX(-50%);
}
#textschutter {
	top:25.5%;
	left:21%;
}
#textfgh {
	top:28%;
	left:50%;
}
#textbavo {
	top:17%;
	left:91%;
	width:10em;
}

#textmaking {
	bottom:5%;
	right:13%;
	display:flex;
	flex-direction:row;
	align-items:end;
	justify-content:end;
	gap:var(--space1);
	/* width:26dvw; */
	text-decoration:none;
	transform:none;
}
#textmaking > span {
	/* width:20dvw; */
	text-align:right;
	font-size:var(--fontsize2);
}
#textmaking > svg {
	width:6dvmin;
}

#imgdiafragma {
	position:absolute;
	top:35.9%;
	left:52.79%;
	width:3.85%;
}

.buthotspot {
	--hotspottop:0;
	--hotspotleft:0;
	--hotspotr:calc(var(--imgw) / 16);
	--hotspotborder:calc(var(--imgw) / 192);
	position:absolute;
	top:var(--hotspottop);
	left:var(--hotspotleft);
	width:var(--hotspotr);
	height:var(--hotspotr);
	border-radius:50%;
	border:var(--hotspotborder) solid var(--colhotspot);
	background-color:transparent;
	overflow:hidden;
	animation:hotspoton 1.5s ease-in forwards;
}

@keyframes hotspoton {
    from { transform:scale(0); }
    to { transform:scale(1); }
}

.buthotspotimg {
	width:100%;
	height:100%;
	object-fit:cover;
	clip-path:border-box circle(50% at 50% 50%);
	scale:1.2;
}
.buthotspot[popovertarget='popbert'] .buthotspotimg {
	transform:scaleX(-1);
}
.buthotspot[popovertarget='popwally'] {
	width:2em;
	height:2em;
	padding:0;
	border-radius:50%;
	background-color:var(--colhotspot);
	color:black;
	/* font-size:1.5dvmin; */
	/* font-size:clamp(var(--fontsize1), 1.5dvmin, 32px); */
	font-size:var(--fontsize1);
	font-weight:700;
}
.buthotspot[popovertarget='popwally']:after {
	content:'?';
	display:block;
}

.buthotspot[popovertarget='popfgh'] {
	display:none;
}

.butpopclose {
	position:absolute;
	/* top:calc(var(--pspace) * -1); */
	/* right:calc(var(--pspace) * -1); */
	top:0;
	right:0;
	width:4dvmin;
	height:4dvmin;
	border:none;
	border-radius:50%;
	background-color:black;
}
.butpopclose:before, .butpopclose:after {
	content:'';
	position:absolute;
	display:block;
	top:10%;
	left:43%;
	width:0px;
	height:80%;
	border:0.3dvmin solid white;
}
.butpopclose:before {
	transform:rotate(45deg);
}
.butpopclose:after {
	transform:rotate(-45deg);
}

::backdrop {
	background-color:rgba(0,0,0,0.5);
}

.popttext p, .popttext h2 {
	/* font-size:clamp(var(--fontsize1), 1.5dvmin, var(--fontsize2)); */
	/* font-size:clamp(var(--fontsize1), 1.5dvmin, 32px); */
	font-size:var(--fontsize1c);
	font-family:sans-serif;
}
.popttext a {
	color:white;
}

/* popup: generic styles */

.popt:popover-open {
	--pspace:2dvmin;
	overflow:auto;
	margin:auto;
	padding:var(--pspace);
	border:none;
	background-color:var(--colpop);
	max-height:90dvh;
	overscroll-behavior:none;
}

.poptcontainer {
	position:relative;
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:auto auto;
	gap:var(--pspace);
}

.poptimgs {
	--pw:min(80dvw, 600px);
	--ph:min(80dvh, 600px);
	--pimgwscaled:0;
	--pimghscaled:0;
}

.poptimg {
	display:block;
	--iaspect:1; /* set by server-generated inline style */
	width:var(--pimgwscaled);
	height:var(--pimghscaled);
	object-fit:contain;
}

/* popup: layout-specific styles */

.popt#popfgh:popover-open .popttext p, .popt#popbavo:popover-open .popttext p {
	width:min(60dvw, 400px);
}

@media (orientation:landscape) {
	.popt:popover-open .poptcontainer {
		grid-template-columns:1fr auto;
		grid-template-rows:auto;
	}

	.popt.layout1p:popover-open .poptimgs {
		--pimgwscaled:calc(var(--ph) / var(--iaspect));
		--pimghscaled:calc(var(--ph));
	}

	.popt.layout1l:popover-open .poptimgs {
		--pimgwscaled:var(--pw);
		--pimghscaled:calc(var(--pw) * var(--iaspect));
		--pw:min(45dvw, 600px);
	}

	.popt.layout3ppl:popover-open .poptimgs {
		--pimgwscaled:var(--pw);
		--pimghscaled:calc(var(--pw) * var(--iaspect));
		max-height:60dvh;
	}

	.popt:popover-open .popttext p {
		width:min(25dvw, 250px);
		padding-right:var(--pspace);
	}

}
@media (orientation:portrait) {
	.popt:popover-open .poptimgs {
		--pimgwscaled:calc(var(--pw));
		--pimghscaled:calc(var(--pw) / var(--iaspect));
	}

	.popt:popover-open .popttext p {
		width:min(80dvw, 600px);
	}

}

/*
.poptimgs0 {
	display:flex;
	flex-direction:row;
	gap:var(--space2);
	max-height:60dvh;
}

@media (height < 1280px) {

	.poptimgs0:not(:has(> :nth-child(2))) .imgimg {
		width:auto;
		height:100%;
	}

}
*/

/*
@media (width < 1280px) {
	#header > p {
		font-size:min(1.75dvmin, 32px);
	}

	.textmeer {
		font-size:min(1.75dvmin, 24px);
	}

}
*/

@media (width > 1280px) {

	.popttext p {
		max-width:1100px;
	}

}

#popschuttersstukken:popover-open  {
	--pspace:2dvmin;
	display:flex;
	flex-direction:column;
	gap:var(--pspace);
	width:90dvw;
	max-width:1280px;
	max-height:90dvh;
}
#popschuttersstukken:popover-open .popttext {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:var(--pspace);
	width:100%;
}
#popschuttersstukken:popover-open .popttext h2 {
	/* font-size:1.2em; */
	/* font-size:min(1.5dvmin, 40px); */
	/* font-size:clamp(var(--fontsize1), 1.5dvmin, 40px); */
	font-size:var(--fontsize2c);
}
#popschuttersstukken:popover-open .popttext p {
	width:auto;
	max-width:40em;
	/* font-size:1em; */
	/* font-size:min(1.5dvmin, 32px); */
	/* font-size:clamp(var(--fontsize1), 1.5dvmin, 32px); */
	font-size:var(--fontsize1c);
}
#popschuttersstukken:popover-open .beforeafterimgs {
	max-height:60dvh;
}

#popschuttersstukken:popover-open .popschuttext.left {
	justify-self:end;
	text-align:right;
}
#popschuttersstukken:popover-open .popschuttext p {
	max-width:32em;
}
#popschuttersstukken:popover-open .popschuttext.left p {
	padding:0;
}
.imgouter {
	--aspect:1;
	flex:var(--aspect);
}

.imgimg {
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
}
/* based on https://zachpatrick.com/blog/simple-before-and-after-slider */

.beforeafterimgs {
	--pos:50%;
	position:relative;
	display:grid;
	max-height:100vh;
	aspect-ratio:1.5;
	margin:0 auto;
	& > * {
		grid-area:1 / 1;
	}
	& img {
		width:100%;
		height:100%;
		aspect-ratio:1.5;
		object-fit:contain;
	}
	&::after { /* divider bar */
		position:absolute;
		content:'';
		display:block;
		top:0;
		left:var(--pos);
		width:4px;
		height:100%;
		background-color:white;
	}
	& .before {
		mask: linear-gradient(to right, black 0, var(--pos, 50%), transparent 0);
	}
	& .after {
		mask: linear-gradient(to right, transparent 0, var(--pos, 50%), black 0);
	}
}

.sliderimgcaption {
	position:absolute;
	display:inline-block;
	bottom:1em;
	width:50%;
	height:1em;
	padding:4px;
	background-color:transparent;
	color:white;
	text-align:center;
	font-size:min(1.5dvmin, 32px);
}
.before .sliderimgcaption {
	left:0;
}
.after .sliderimgcaption {
	right:0;
}

input[type='range'] {
  width: 100%;
  z-index: 1;
  appearance: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* styling for webkit (safari) and / blink (chrome) */
  &::-webkit-slider-thumb {
    appearance: none;
	height: 40px;
	width: 40px;
	background:#bd8d0f;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M603.4 331.3L614.7 320L603.4 308.7L491.4 196.7L480.1 185.4L457.5 208L468.8 219.3L553.5 304L86.8 304L171.5 219.3L182.8 208L160.2 185.4L148.9 196.7L36.9 308.7L25.6 320L36.9 331.3L148.9 443.3L160.2 454.6L182.8 432L171.5 420.7L86.8 336L553.5 336L468.8 420.7L457.5 432L480.1 454.6L491.4 443.3L603.4 331.3z'/%3E%3C/svg%3E");
  }
  
  /* all the same stuff for firefox */
  &::-moz-range-thumb {
    appearance: none;
	height: 40px;
	width: 40px;
	background: oklch(0.8653 0.1781 96.43);
	cursor: pointer;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M603.4 331.3L614.7 320L603.4 308.7L491.4 196.7L480.1 185.4L457.5 208L468.8 219.3L553.5 304L86.8 304L171.5 219.3L182.8 208L160.2 185.4L148.9 196.7L36.9 308.7L25.6 320L36.9 331.3L148.9 443.3L160.2 454.6L182.8 432L171.5 420.7L86.8 336L553.5 336L468.8 420.7L457.5 432L480.1 454.6L491.4 443.3L603.4 331.3z'/%3E%3C/svg%3E");
  }
}
.imgtest > * {
	gap:32px;
	padding:32px;
	background-color:#eee;
}

.imgtest1 {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
}

.imgtest2 {
	display:flex;
	flex-direction:row;
}

.imgtest3 {
	display:flex;
	flex-direction:column;
}

.imgtest4 {
	display:grid;
	grid-template-columns:1fr;
}

.imgtest5 {
	display:flex;
	flex-direction:row;
}

.imgtest6 {
	display:flex;
	flex-direction:column;
}
.fhtabs {
		display:flex;
		flex-direction:column;
		width:100%;
	}

	.fhtabsheads {
		display:flex;
		flex-direction:row;
		gap:32px;
		border-bottom:1px solid #999;
	}

	.fhtabshead {
		position:relative;
		top:1px;
		padding:4px;

		&:first-child {
			margin-left:16px;
		}

		&.active {
			border:1px solid #999;
			border-bottom:none;
			border-radius:4px 4px 0px 0px;
			background-color:white;
		}
	}

	.fhtabscontent {
		width:100%;

		& > * {
			width:100%;
		}
	}