/* ==========================================================================
   Gebied & De Wijs — nagebouwde site
   Gebaseerd op het origineel (FJC CMS), responsive gemaakt.
   ========================================================================== */

* {
	box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #2e2e2e;
	color: #000000;
	min-height: 100%;
}

img {
	border: 0;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

.spacer {
	width: 100%;
	height: 0;
	overflow: hidden;
	clear: both;
}

/* ==========================================================================
   Site achtergrond (header foto) — absoluut gepositioneerd achter alle content,
   net als het origineel. Content scrollt hier native overheen.
   ========================================================================== */

div#site_container {
	position: relative;
}

div#site_background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 532px;
	overflow: hidden;
	background-color: #000;
	z-index: 0;
}

div#site_background img.bg_photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center top;
}

/* Alle echte content-secties liggen boven de achtergrondlaag */
div.menu,
div.home_top,
div.regular_spacer1,
div.page_wrap,
div.slideshow_container,
div.home_spacer1,
div.footer {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Menu
   ========================================================================== */

div.menu {
	width: 100%;
	background-color: #1a1a1a;
	background-image: url('images/menu/background.png');
	background-repeat: repeat;
	position: relative;
	z-index: 10;
}

div.actual_menu {
	position: relative;
	margin: 0 auto;
	max-width: 1000px;
	height: 53px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
}

nav.menu_links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

nav.menu_links a {
	display: inline-block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 0.5px;
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	padding: 18px 0;
	margin-right: 28px;
	white-space: nowrap;
}

nav.menu_links a:last-child {
	margin-right: 0;
}

nav.menu_links a:hover,
nav.menu_links a.active {
	color: #ff5200;
}

div.menu_logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

div.menu_logo img {
	height: 53px;
	width: auto;
	max-width: none;
}

/* Hamburger for mobile */
button.menu_toggle {
	display: none;
	background: none;
	border: none;
	color: #fff;
	font-size: 28px;
	cursor: pointer;
	padding: 10px;
}

/* ==========================================================================
   Slideshow (project thumbnails strip)
   ========================================================================== */

div.slideshow_container {
	margin: 0 auto;
	max-width: 1000px;
	padding: 0 10px;
	position: relative;
}

div.slideshow {
	position: relative;
	overflow: hidden;
	background-color: #ffffff;
	padding: 10px;
}

div.slideshow_track {
	display: flex;
	gap: 0;
	width: max-content;
	will-change: transform;
}

div.slideshow div.image,
div.slideshow a.image {
	flex: 0 0 150px;
	width: 150px;
	height: 84px;
	cursor: pointer;
	overflow: hidden;
}

div.slideshow div.image img,
div.slideshow a.image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

button.slide_nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0,0,0,0.55);
	color: #ffffff;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
}

button.slide_nav:hover {
	background-color: rgba(255,82,0,0.85);
}

button.slide_prev {
	left: 16px;
}

button.slide_next {
	right: 16px;
}

@media (max-width: 640px) {
	button.slide_nav {
		width: 26px;
		height: 26px;
		font-size: 13px;
	}
}

/* ==========================================================================
   Home page — home_top is een transparante spacer (480px) die samen met de
   menu (53px) de 532px hoge achtergrondfoto vult. Content erbinnen is
   absoluut gepositioneerd, exact zoals op het origineel gemeten.
   ========================================================================== */

div.home_top {
	position: relative;
	max-width: 1000px;
	height: 480px;
	margin: 0 auto;
}

div.home_boxes {
	position: absolute;
	left: 754px;
	top: 19px;
	width: 236px;
	display: flex;
	flex-direction: column;
}

div.home_box,
a.home_box {
	background-color: rgba(40,40,40,0.88);
	color: #ffffff;
	padding: 16px 18px;
	font-size: 13px;
	line-height: 1.5;
	border-bottom: 4px solid #b9b08f;
	text-decoration: none;
	display: block;
}

div.home_box p {
	margin: 0;
}

div.home_box img {
	display: block;
	margin-bottom: 8px;
	max-width: 100%;
	height: auto;
}

div.home_box.clicker,
a.home_box.clicker {
	cursor: pointer;
	background-color: rgba(45,45,45,0.92);
}

a.home_box.clicker strong {
	display: block;
	font-size: 14px;
	letter-spacing: 0.5px;
}

div.home_box.clicker:hover,
a.home_box.clicker:hover {
	background-color: rgba(255,82,0,0.85);
}

div.home_box.clicker .sub,
a.home_box.clicker .sub {
	font-size: 13px;
	color: #cccccc;
	margin-top: 2px;
}

img.home_text {
	position: absolute;
	left: 269px;
	top: 409px;
	width: 465px;
	height: 26px;
}

div.home_spacer1 {
	height: 10px;
}

div.regular_spacer1 {
	height: 18px;
}

@media (max-width: 1040px) {
	div.home_top {
		position: static;
		height: auto;
		min-height: 0;
		padding: 20px;
		display: flex;
		flex-direction: column;
	}

	img.home_text {
		position: static;
		display: block;
		width: 70%;
		max-width: 400px;
		height: auto;
		margin: 0 0 20px 0;
		order: 1;
	}

	div.home_boxes {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		margin-top: 0;
		order: 2;
	}
}

@media (max-width: 640px) {
	div.home_top {
		min-height: auto;
		padding: 12px 16px;
	}

	div.home_boxes {
		margin-top: 0;
		position: static;
	}

	img.home_text {
		display: none;
	}

	a.home_box.spotlight_box {
		display: none;
	}
}

/* ==========================================================================
   Content containers
   ========================================================================== */

div.page_wrap {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 10px;
}

div.content_box {
	background-color: #ffffff;
	margin: 20px 0;
	padding: 30px;
	min-height: 300px;
}

div.content_box.narrow_right {
	margin-left: auto;
	max-width: 510px;
}

div.content_box h1.kop {
	font-size: 20px;
	font-weight: bold;
	color: #ff5200;
	margin: 0 0 14px 0;
}

div.content_box h2.kop {
	font-size: 20px;
	font-weight: bold;
	color: #ff5200;
	margin: 24px 0 10px 0;
}

div.content_box h3.kop {
	font-size: 20px;
	font-weight: bold;
	color: #ff5200;
	margin: 20px 0 8px 0;
}

div.content_box p {
	font-size: 13px;
	line-height: 1.6;
	margin: 0 0 12px 0;
}

div.content_box hr {
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 16px 0;
}

div.content_box a.button,
a.back_button {
	display: inline-block;
	background-color: #e6e6e6;
	border: 1px solid #aaaaaa;
	padding: 6px 14px;
	font-size: 12px;
	text-decoration: none;
	color: #333333;
	margin-top: 8px;
}

div.content_box a.button:hover,
a.back_button:hover {
	background-color: #ff5200;
	color: #ffffff;
	border-color: #ff5200;
}

/* ==========================================================================
   Detail layout (crew / spotlight detail / tell detail): left thumbs + right content
   ========================================================================== */

div.detail_layout {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

div.detail_layout div.thumbs {
	flex: 0 0 108px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

div.detail_layout div.thumbs div.image {
	width: 108px;
	height: 72px;
	overflow: hidden;
	cursor: pointer;
}

div.detail_layout div.thumbs div.image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

div.detail_layout div.main {
	flex: 1 1 400px;
	min-width: 280px;
}

div.detail_layout div.main_image {
	position: relative;
	margin-bottom: 16px;
	overflow: hidden;
}

div.detail_layout div.main_image img {
	width: 100%;
	display: block;
}

div.detail_layout div.main_image_caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.55);
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	padding: 8px 16px;
	text-align: right;
}

div.crew_photo {
	margin-bottom: 16px;
}

div.crew_photo img {
	width: 100%;
	max-width: 474px;
	display: block;
}

div.crew_meta {
	font-size: 12px;
	line-height: 1.7;
	margin-bottom: 16px;
}

div.crew_meta a {
	color: #ff5200;
	text-decoration: none;
}

/* ==========================================================================
   Overview lists (Vertel! / In the spotlight)
   ========================================================================== */

div.overview_filterbar {
	background-color: #7a7a7a;
	color: #ffffff;
	padding: 10px 16px;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

div.filter_controls {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	width: 100%;
}

div.overview_filterbar input[type="text"] {
	padding: 6px 8px;
	border: 1px solid #555;
	width: 200px;
	max-width: 100%;
}

div.overview_filterbar label {
	display: flex;
	align-items: center;
	gap: 6px;
}

div.overview_filterbar select {
	padding: 5px;
}

div.project_item {
	display: flex;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid #dddddd;
	flex-wrap: wrap;
}

div.project_item:last-child {
	border-bottom: none;
}

div.project_item div.thumb {
	flex: 0 0 220px;
	width: 220px;
	height: 165px;
	overflow: hidden;
	background-color: #000;
}

div.project_item div.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

div.project_item div.info {
	flex: 1 1 300px;
	min-width: 240px;
}

div.project_item h2.kop {
	margin-top: 0;
}

div.project_item div.actions {
	margin-top: 10px;
	display: flex;
	gap: 8px;
}

div.tell_item {
	padding: 18px 0;
	border-bottom: 1px solid #dddddd;
}

div.tell_item:last-child {
	border-bottom: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

div.footer {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px 10px 40px;
	color: #adadad;
}

div.footer_top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-bottom: 24px;
}

div.footer div.share {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: Arial;
	font-size: 12px;
	color: #adadad;
}

div.footer div.share a {
	display: inline-flex;
}

div#searchbox {
	display: flex;
	align-items: stretch;
}

div#searchbox input {
	padding: 0 12px;
	height: 22px;
	border: 1px solid #727272;
	background-color: #383838;
	color: #c2c2c2;
	font-family: Arial;
	font-size: 12px;
	width: 160px;
}

div#searchbox button {
	border: 1px solid #727272;
	border-left: none;
	background-color: #383838;
	background-image: url('images/searchbutton.png');
	background-repeat: no-repeat;
	background-position: center;
	width: 26px;
	cursor: pointer;
}

div.genre_selector {
	font-family: Arial;
	font-size: 12px;
	color: #adadad;
	display: flex;
	align-items: center;
	gap: 6px;
}

div.genre_selector select {
	padding: 3px;
	border: 1px solid #a4a4a4;
	background-color: #424242;
	color: #adadad;
}

hr.footer_line {
	border: 0;
	border-top: 1px solid #6d6d6d;
	margin: 16px 0;
}

ul.footer_menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

ul.footer_menu li {
	margin-right: 20px;
}

ul.footer_menu li a {
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	color: #8a8a8a;
	text-decoration: none;
}

ul.footer_menu li a:hover {
	color: #ff5200;
}

div.footer_bottom_row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	font-family: Arial;
	font-size: 10px;
	color: #6d6d6d;
}

/* ==========================================================================
   Contact page
   ========================================================================== */

div.contact_layout {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}

div.contact_layout img {
	flex: 0 0 280px;
	max-width: 280px;
	display: block;
}

div.contact_layout div.contact_info {
	flex: 1 1 240px;
	font-size: 13px;
	line-height: 1.8;
}

div.contact_layout div.contact_info strong {
	font-size: 14px;
}

div.contact_layout div.contact_info a {
	color: #ff5200;
	text-decoration: none;
}

/* ==========================================================================
   Responsive: tablet
   ========================================================================== */

@media (max-width: 1040px) {
	div#site_background { height: 380px; }

	div.content_box.narrow_right {
		max-width: 100%;
	}

	div.detail_layout div.thumbs {
		flex-direction: row;
		flex: 0 0 auto;
		width: 100%;
	}
}

/* ==========================================================================
   Responsive: mobile
   ========================================================================== */

@media (max-width: 640px) {
	div#site_background { height: 220px; }

	div.actual_menu {
		flex-wrap: wrap;
		height: auto;
		padding: 10px 16px;
	}

	nav.menu_links {
		display: none;
		flex-direction: column;
		gap: 0;
		width: 100%;
		order: 3;
	}

	nav.menu_links.open {
		display: flex;
	}

	nav.menu_links a {
		width: 100%;
		margin-right: 0;
		padding: 12px 0;
		border-bottom: 1px solid rgba(255,255,255,0.1);
	}

	nav.menu_links a:last-child {
		border-bottom: none;
	}

	button.menu_toggle {
		display: block;
	}

	div.menu_logo img {
		height: 40px;
	}

	div.content_box {
		padding: 18px;
	}

	div.project_item div.thumb {
		flex: 0 0 100%;
		width: 100%;
		height: 200px;
	}

	div.contact_layout img {
		flex: 0 0 100%;
		max-width: 100%;
	}

	div.footer_bottom_row {
		flex-direction: column;
	}

	ul.footer_menu li {
		margin-right: 16px;
		margin-bottom: 10px;
	}

	div.slideshow div.image,
	div.slideshow a.image {
		flex: 0 0 120px;
		width: 120px;
		height: 67px;
	}
}