/* Woody's House — Craft-thema
   Breakpoints: 768px (menu klapt uit), 786px (thema), 992px (twee kolommen), 1200px */

/* ---------- fonts ---------- */

@font-face {
	font-family: 'Nexa Rust Slab';
	src: url('/static/fonts/nexa-rust-slab-black.woff2') format('woff2'),
	     url('/static/fonts/nexa-rust-slab-black.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nexa Rust Script';
	src: url('/static/fonts/nexa-rust-script.woff2') format('woff2'),
	     url('/static/fonts/nexa-rust-script.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/static/fonts/open-sans-400.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/static/fonts/open-sans-700.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- basis ---------- */

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

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #000;
	background-color: #fff;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: 'Nexa Rust Slab', sans-serif;
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 40px;
}

/* Lange samenstellingen ("Verwerkingsverantwoordelijke") passen op smalle schermen
   niet in de kolom. De oude site brak ze niet af en liet ze overlopen; dat houden we
   alleen daar tegen waar het echt knelt. Vanaf 992px staan de kolommen naast elkaar
   en is de tekstkolom breed genoeg — daar moet "Privacyverklaring" net als op de
   oude site op één regel blijven in plaats van midden in het woord te breken. */
@media (max-width: 991px) {
	h1, h2, h3 {
		hyphens: auto;
		overflow-wrap: break-word;
	}
}

h1 { font-size: 38px; }
h2 { font-size: 30px; }

p {
	margin: 0 0 20px;
}

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

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
}

.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
}

@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* ---------- navigatie ---------- */

.site-nav {
	background-color: #fff;
	font-family: 'Nexa Rust Slab', sans-serif;
	font-size: 21px;
}

.site-nav .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	min-height: 50px;
}

.nav-toggle {
	display: flex;
	align-items: center;
	margin: 8px 0;
	padding: 9px 10px;
	border: 0;
	background: transparent;
	font: inherit;
	color: #000;
	cursor: pointer;
}

.nav-toggle:hover,
.nav-toggle:focus {
	background-color: #ddd;
}

.nav-toggle__label {
	padding-right: 3px;
}

.nav-toggle__bars {
	padding: 10px 8px;
}

.nav-toggle__bars span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background-color: #888;
}

.nav-toggle__bars span + span {
	margin-top: 4px;
}

.nav-list {
	flex-basis: 100%;
	display: none;
	margin: 7.5px 0;
	padding: 7px 0;
	list-style: none;
}

.nav-list.is-open {
	display: block;
}

.nav-list a {
	display: block;
	padding: 10px 16px;
	/* De oude site zette hier 20px; zonder die regel erft de link de 1.6 van body
	   en wordt elke menuregel 13,6px hoger. */
	line-height: 20px;
	text-decoration: none;
}

.nav-list a:hover,
.nav-list a:focus,
.nav-list [aria-current] {
	text-decoration: underline;
}

.nav-list a:hover,
.nav-list a:focus {
	color: #333;
}

.nav-list [aria-current] {
	color: #555;
}

@media (min-width: 768px) {
	.nav-toggle {
		display: none;
	}

	.nav-list {
		display: block;
		/* Op de oude site stond het menu in een .navbar-collapse met 15px zijpadding,
		   binnen een .navbar met 1px transparante rand links en rechts, en had de
		   <ul> daar geen marge omheen: 1140 - 2 - 30 = 1108px werkbreedte. Dat is
		   precies het punt waarop het menu na "Reserveren" naar de tweede regel gaat;
		   bij 1110px past "Cadeaubon" er nog net bij en breekt het menu anders af. */
		margin: 0;
		padding: 7px 16px;
		text-align: center;
	}

	.nav-list li {
		display: inline-block;
	}
}

/* ---------- hero ---------- */

.hero {
	height: 387.5px;
	margin-bottom: 30px;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	background-color: #000;
}

.hero .container {
	display: flex;
	align-items: center;
	height: 100%;
}

.hero__logo {
	width: 100%;
}

.hero__logo img {
	display: block;
	width: 60%;
	margin: 0 auto;
}

@media (min-width: 786px) {
	.hero {
		height: 775px;
	}

	.hero__logo img {
		width: auto;
	}
}

/* ---------- blokken ---------- */

.content {
	margin-bottom: 30px;
}

.blocks__col > * {
	margin-bottom: 30px;
}

@media (min-width: 992px) {
	.blocks {
		display: flex;
		margin: 0 -15px;
	}

	.blocks__col {
		padding: 0 15px;
	}

	.blocks__col:first-child { width: 58.33333333%; }
	.blocks__col:last-child  { width: 41.66666667%; }
}

.block {
	display: flex;
	justify-content: center;
	height: 205px;
	background-color: #000;
	background-size: cover;
	background-position: left top;
	color: #fff;
	text-decoration: none;
}

.block--tall {
	height: 440px;
}

.block__inner {
	align-self: center;
	width: 70%;
	text-align: center;
}

.block__inner h2 {
	margin-bottom: 0;
	line-height: 1.2;
}

/* koppen in tegels nooit afbreken met een koppelteken — dat deed de oude site ook niet */
.block__inner h2 {
	hyphens: manual;
}

/* alleen blokken die écht ergens heen gaan krijgen de onderstreping */
a.block .block__inner h2 {
	text-decoration: underline;
}

/* donkere waas over de foto bij hover; inset shadow ligt wél boven background-image */
a.block {
	box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0);
	transition: box-shadow .3s linear;
}

a.block:hover,
a.block:focus {
	box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .5);
	color: #fff;
	text-decoration: none;
}

a.block:hover .block__inner h2,
a.block:focus .block__inner h2 {
	text-decoration: none;
}

/* tekstblok: geen vaste hoogte, zodat lange tekst nooit afgekapt wordt */
.block--text {
	display: block;
	height: auto;
	min-height: 0;
	background-color: transparent;
	color: #000;
}

.block--text.block--tall {
	min-height: 440px;
}

.block--text h2 {
	font-size: 21px;
	margin-bottom: 20px;
}

.block--text address {
	font-style: normal;
	margin-bottom: 20px;
}

.block--text ul {
	margin: 0 0 20px;
	padding-left: 20px;
}

.openingstijden {
	border-collapse: collapse;
	margin-bottom: 20px;
}

.openingstijden th {
	text-align: left;
	font-weight: 400;
	padding-right: 12px;
	vertical-align: top;
	white-space: nowrap;
}

.openingstijden td {
	vertical-align: top;
}

/* kaart vult het blok, net als in het origineel */
.block--map iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.block--quote {
	background-color: #fff;
	color: #000;
}

.block--quote .block__inner {
	width: 90%;
}

.block--quote h2 {
	text-decoration: none;
}

.block--quote .script {
	font-family: 'Nexa Rust Script', sans-serif;
	font-size: 50px;
}

.block--quote a {
	color: #000;
	text-decoration: underline;
}

@media (min-width: 786px) {
	.block__inner h2 {
		font-size: 38px;
	}

	.block--text {
		padding-right: 150px;
	}
}

/* ---------- footer ---------- */

.site-footer {
	margin-top: auto;
	padding-top: 20px;
	background-color: #000;
	color: #fff;
	line-height: 35px;
}

.footer-list {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	text-align: center;
	font-size: 14px;
}

.footer-list li {
	display: inline-block;
	padding: 0 5px 0 10px;
}

.footer-list--divided li::after {
	content: " |";
	padding-left: 10px;
}

.footer-list--divided li:last-child::after {
	content: "";
}

/* ---------- redactionele tekst uit CKEditor ---------- */

.prose h2 { font-size: 30px; }
.prose h3 { font-size: 21px; }

.prose h2,
.prose h3,
.prose h4 {
	font-family: 'Nexa Rust Slab', sans-serif;
	font-weight: 400;
	margin: 30px 0 20px;
}

.prose ul,
.prose ol {
	margin: 0 0 20px;
	padding-left: 20px;
}

.prose a {
	text-decoration: underline;
}

/* tabellen uit de editor (kerstmenu): breedtes uit de HTML negeren, anders scrollt de pagina */
.prose table {
	width: 100% !important;
	max-width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
	table-layout: fixed;
}

.prose table td,
.prose table th {
	width: auto !important;
	height: auto !important;
	padding: 4px 10px 4px 0;
	vertical-align: top;
	overflow-wrap: break-word;
}

.prose table p {
	margin: 0 0 6px;
}

.prose iframe,
.prose img {
	max-width: 100%;
}

/* ---------- zwart blok ("Reserveer online") ---------- */

.block--zwart {
	background-color: #000;
	background-image: none;
}

/* ---------- virtuele tour ---------- */

.tour,
.tour iframe {
	display: block;
	width: 100%;
	height: 90vh;
	border: 0;
}

/* ---------- menukaart ---------- */

.gangen__kies {
	display: block;
	margin-bottom: 20px;
}

.gangen__kies-label {
	display: block;
	font-family: 'Nexa Rust Slab', sans-serif;
	font-size: 21px;
	margin-bottom: 6px;
}

.gangen__kies select {
	width: 100%;
	max-width: 100%;
	padding: 10px;
	font: inherit;
}

.gangen__tabs {
	display: none;
	margin: 0 0 30px;
	padding: 7px 0;
	list-style: none;
	border-bottom: 1px solid #ddd;
}

.gang {
	margin-bottom: 40px;
}

.gang__titel {
	font-size: 21px;
}

.gang__voetnoot {
	font-size: 14px;
}

.gerecht {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 20px;
}

.gerecht__prijs {
	white-space: nowrap;
	text-align: right;
}

.groepsmenu {
	margin-bottom: 40px;
}

.vacature {
	margin-bottom: 40px;
}

@media (min-width: 768px) {
	.gangen__kies {
		display: none;
	}

	.gangen__tabs {
		display: block;
		/* De oude site zette de Bootstrap-rand onder de tabbladen expliciet op 0
		   (`.nav-tabs { border-bottom: 0px solid #ddd }`); die grijze lijn hoort er
		   dus niet te staan. */
		border-bottom: 0;
	}

	.gangen__tabs li {
		display: inline-block;
	}

	.gangen__tabs a {
		display: inline-block;
		margin-right: 2px;
		padding: 0 20px 0 0;
		font-family: 'Nexa Rust Slab', sans-serif;
		font-size: 21px;
		color: #555;
		text-decoration: none;
		line-height: 1.6;
	}

	.gangen__tabs a:hover,
	.gangen__tabs a:focus,
	.gangen__tabs a[aria-selected="true"] {
		color: #000;
	}

	.gangen__tabs a::after {
		content: " /";
		padding-left: 10px;
		color: #555;
	}

	.gangen__tabs li:last-child a::after {
		content: "";
	}

	/* menukaart: de gangtitel staat op desktop in het tabblad; alleen op mobiel boven de lijst. Kerstpagina heeft geen tabs en toont de titels altijd */
	.js .gangen__panes .gang__titel {
		display: none;
	}

	.gerecht__omschrijving { width: 50%; }
	.gerecht__prijs { width: 41.66%; text-align: left; }
}

/* zonder JavaScript staan alle gangen gewoon onder elkaar */
.js .gang[hidden] {
	display: none;
}