/*
Theme Name:        Fris en buiten
Theme URI:         https://www.frisenbuiten.nl/
Description:       Vernieuwd thema voor Fris en buiten, vakantiehuis aan het water van de Elfstedentocht in Wijnaldum.
Version:           2.1.0
Requires at least: 6.4
Tested up to:      6.8
Requires PHP:      7.4
Author:            IGNE
Author URI:        https://www.igne.nl/
License:           MIT
License URI:       https://opensource.org/licenses/mit-license.php
Text Domain:       frisenbuiten
*/

/*------------------------------------*\
    FONTS (self-hosted, AVG-vriendelijk)
\*------------------------------------*/

@font-face {
	font-family: "Fraunces";
	src: url("fonts/fraunces.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("fonts/source-sans-3.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("fonts/source-sans-3-italic.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

/*------------------------------------*\
    TOKENS
    One ground (bone), one ink (olive), the photographs bring the rest.
\*------------------------------------*/

:root {
	--fb-bg:        #ecebe7;
	--fb-surface:   #e1dfd9;
	--fb-ink:       #38450f;
	--fb-muted:     #5d683a;
	--fb-field:     #38450f;
	--fb-field-ink: #ecebe7;
	--fb-paper:     #f6f5f1;
	--fb-scrim:     rgba(16, 20, 6, .55);

	--fb-font-heading: "Fraunces", Georgia, "Times New Roman", serif;
	--fb-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Five sizes do all the work. */
	--fb-step-small: .875rem;
	--fb-step-body:  clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
	--fb-step-lead:  clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
	--fb-step-head:  clamp(2.5rem, 1.4rem + 4.4vw, 5.5rem);
	--fb-step-display: clamp(2.375rem, .9rem + 6.6vw, 7.75rem);

	--fb-content: 42rem;
	--fb-wide: 80rem;
	--fb-gutter: clamp(1rem, 3vw, 2rem);
	--fb-section: clamp(6rem, 12vw, 11rem);
	--fb-header-h: 4.5rem;

	--fb-ease: cubic-bezier(.2, .7, .2, 1);
}

/*------------------------------------*\
    BASE
\*------------------------------------*/

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--fb-header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

body {
	margin: 0;
	background: var(--fb-bg);
	color: var(--fb-ink);
	font-family: var(--fb-font-body);
	font-size: var(--fb-step-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

img {
	height: auto;
	vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
	margin: 2em 0 .6em;
	font-family: var(--fb-font-heading);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--fb-ink);
	font-variation-settings: "SOFT" 50, "opsz" 144;
	text-wrap: balance;
}

h1,
h2 { font-size: var(--fb-step-head); }

/* Fraunces leaves a little room before its first letter, which shows at heading
   sizes: pull large headings left so the letters line up with the text below. */
h1,
h2 {
	position: relative;
	left: -.045em;
}
h3,
h4,
h5,
h6 {
	font-size: var(--fb-step-lead);
	line-height: 1.15;
	letter-spacing: -.01em;
}

/* Headings inside running text stay smaller than section headings. */
.entry-content h2 {
	font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
}

h1:first-child,
h2:first-child,
h3:first-child {
	margin-top: 0;
}

/* Customizer titles may still contain <em> from the old theme: same face, same colour. */
h1 em,
h2 em {
	font-style: normal;
	color: inherit;
}

p,
ul,
ol,
dl,
table,
figure,
blockquote {
	margin: 0 0 1.25em;
}

a {
	color: var(--fb-ink);
	text-decoration-thickness: .08em;
	text-underline-offset: .2em;
	transition: color .15s ease, text-decoration-color .15s ease;
}

a:hover {
	color: var(--fb-muted);
	text-decoration-color: transparent;
}

:focus-visible {
	outline: 3px solid var(--fb-ink);
	outline-offset: 3px;
}

::selection {
	background: var(--fb-ink);
	color: var(--fb-bg);
}

/* A divider placed in the editor becomes space. */
hr {
	height: 0;
	border: 0;
	margin: 3rem 0;
}

blockquote {
	margin-left: 0;
	padding: 1.25rem 1.5rem;
	background: var(--fb-surface);
	font-family: var(--fb-font-heading);
	font-size: var(--fb-step-lead);
	line-height: 1.35;
}

/* Real tables keep their row lines; nothing else on the site has lines. */
table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}

th,
td {
	padding: .75rem 1rem .75rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--fb-surface);
}

th {
	font-weight: 600;
}

tr:last-child td {
	border-bottom: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; /* taste-skill-ignore: visually hidden text, not a rule */
	height: 1px; /* taste-skill-ignore */
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: .75rem 1.25rem;
	clip: auto;
	background: var(--fb-ink);
	color: var(--fb-bg);
}

.container {
	width: 100%;
	max-width: calc(var(--fb-wide) + var(--fb-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--fb-gutter);
}

/*------------------------------------*\
    BUTTONS
    Square, filled, one colour. On a photograph the colours swap.
\*------------------------------------*/

.button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 3.25rem;
	padding: .8rem 1.75rem;
	border: 0;
	border-radius: 0;
	background: var(--fb-ink);
	color: var(--fb-bg);
	font: 600 1.0625rem/1.2 var(--fb-font-body);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .2s var(--fb-ease);
}

.button:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover {
	background: var(--fb-muted);
	color: var(--fb-bg);
	transform: translateY(-2px);
}

.button:active,
button[type="submit"]:active,
input[type="submit"]:active,
.wpcf7-submit:active {
	transform: translateY(0) scale(.98);
}

.button--block {
	display: flex;
	width: 100%;
}

/*------------------------------------*\
    HEADER + NAVIGATION
    A plain bar. On the landing page it starts transparent over the photograph.
\*------------------------------------*/

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--fb-bg);
	transition: background-color .25s ease, color .25s ease;
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: var(--fb-header-h);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: .75rem;
	text-decoration: none;
	color: inherit;
}

.site-branding:hover {
	color: inherit;
}

.site-branding .custom-logo {
	width: auto;
	max-height: 3rem;
}

.site-title {
	margin: 0;
	font-family: var(--fb-font-heading);
	font-size: 1.625rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.01em;
	color: inherit;
}

.site-title__mark {
	font-style: italic;
	font-weight: 300;
}

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav > ul,
.site-nav .menu {
	display: flex;
	align-items: center;
	gap: .25rem;
}

.site-nav a {
	display: block;
	padding: .5rem .75rem;
	color: inherit;
	font-weight: 600;
	font-size: 1.0625rem;
	text-decoration: none;
	transition: opacity .15s ease;
}

.site-nav a:hover {
	color: inherit;
	opacity: .65;
}

.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a {
	text-decoration: underline;
	text-decoration-thickness: .1em;
	text-underline-offset: .35em;
}

.site-nav .menu-item--cta > a {
	margin-left: .75rem;
	padding: .65rem 1.25rem;
	background: var(--fb-ink);
	color: var(--fb-bg);
}

.site-nav .menu-item--cta > a:hover {
	opacity: 1;
	background: var(--fb-muted);
}

/* submenus float above the page */
.site-nav li {
	position: relative;
}

.site-nav .sub-menu,
.site-nav .children {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 13rem;
	padding: .5rem;
	background: var(--fb-paper);
	color: var(--fb-ink);
	box-shadow: 0 12px 32px rgba(16, 20, 6, .14); /* taste-skill-ignore: a real floating menu */
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu,
.site-nav li:hover > .children,
.site-nav li:focus-within > .children {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: .5rem;
	padding: .55rem .25rem;
	border: 0;
	background: none;
	color: inherit;
	font: 600 1.0625rem/1 var(--fb-font-body);
	cursor: pointer;
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform .2s ease, background-color .2s ease;
}

.nav-toggle__icon {
	position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
	transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 960px) {
	.nav-toggle {
		display: inline-flex;
	}

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--fb-header-h));
		overflow-y: auto;
		padding: 1rem var(--fb-gutter) 2rem;
		background: var(--fb-bg);
		color: var(--fb-ink);
	}

	.js .site-nav:not(.is-open) {
		display: none;
	}

	.site-nav > ul,
	.site-nav .menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav a {
		padding: .6rem 0;
		font-family: var(--fb-font-heading);
		font-size: 2rem;
		font-weight: 400;
	}

	.site-nav .menu-item--cta > a {
		margin: 1.25rem 0 0;
		padding: .9rem 1.5rem;
		font-family: var(--fb-font-body);
		font-size: 1.0625rem;
		font-weight: 600;
		text-align: center;
	}

	.site-nav .sub-menu,
	.site-nav .children {
		position: static;
		padding: 0 0 0 1rem;
		background: none;
		box-shadow: none; /* taste-skill-ignore: removes the floating menu's shadow */
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* Landing page: the bar lies on the photograph until the page scrolls. */
.page-template-page_home .site-header:not(.is-scrolled) {
	background: transparent;
	color: var(--fb-bg);
}

.page-template-page_home .site-header:not(.is-scrolled) .menu-item--cta > a {
	background: var(--fb-bg);
	color: var(--fb-ink);
}

/*------------------------------------*\
    HERO (landingspagina)
    The photograph fills the screen; the title runs along its bottom edge.
\*------------------------------------*/

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100vh; /* taste-skill-ignore: fallback for browsers without svh */
	min-height: 100svh;
	margin-top: calc(var(--fb-header-h) * -1);
	padding: calc(var(--fb-header-h) + 2rem) 0 clamp(1.5rem, 3vw, 2.5rem);
	color: var(--fb-bg);
	background: var(--fb-ink);
	overflow: hidden;
	isolation: isolate;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: fb-drift 24s var(--fb-ease) both;
}

@keyframes fb-drift {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

/* A neutral scrim behind the text only: the lower part of the photograph. */
.hero::after {
	content: "";
	position: absolute;
	inset: 45% 0 0;
	z-index: -1;
	background: linear-gradient(0deg, var(--fb-scrim), rgba(16, 20, 6, 0)); /* taste-skill-ignore: neutral scrim under text on a photo */
}

/* Keeps the menu readable over the sky. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 9rem;
	z-index: -1;
	background: linear-gradient(180deg, rgba(16, 20, 6, .35), rgba(16, 20, 6, 0)); /* taste-skill-ignore: neutral scrim under text on a photo */
}

.hero__title {
	max-width: 13ch;
	margin: 0;
	color: inherit;
	font-size: var(--fb-step-display);
	font-weight: 400;
	line-height: .95;
	letter-spacing: -.035em;
}

.hero__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	margin-top: 2rem;
}

.hero__lead {
	max-width: 34rem;
	margin: 0;
	font-size: var(--fb-step-lead);
	line-height: 1.35;
}

.hero .button {
	background: var(--fb-bg);
	color: var(--fb-ink);
}

.hero .button:hover {
	background: var(--fb-paper);
	color: var(--fb-ink);
}

@media (max-width: 760px) {
	/* The tall phone crop keeps the left-centre of the photo, where the house is. */
	.hero__media img {
		object-position: 30% 50%;
	}
	.hero__foot {
		margin-top: 1.25rem;
	}
	.hero .button {
		width: 100%;
	}
}

/*------------------------------------*\
    PAGE HEADER (overige pagina's)
\*------------------------------------*/

.page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(18rem, 42vw, 30rem);
	padding: clamp(3rem, 8vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem);
	color: var(--fb-bg);
	background: var(--fb-ink);
	overflow: hidden;
	isolation: isolate;
}

.page-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero::after {
	content: "";
	position: absolute;
	inset: 35% 0 0;
	z-index: -1;
	background: linear-gradient(0deg, var(--fb-scrim), rgba(16, 20, 6, 0)); /* taste-skill-ignore: neutral scrim under text on a photo */
}

.page-hero__title {
	margin: 0;
	color: inherit;
	font-size: var(--fb-step-display);
	line-height: .95;
	letter-spacing: -.035em;
}

.page-hero__meta {
	max-width: 36rem;
	margin: 1rem 0 0;
	font-size: var(--fb-step-lead);
	line-height: 1.35;
}

.page-hero__meta a {
	color: inherit;
}

/*------------------------------------*\
    CONTENT
\*------------------------------------*/

.site-main {
	padding: clamp(4rem, 8vw, 7rem) 0 var(--fb-section);
}

.site-main--home {
	padding: 0;
}

.entry-content > * {
	max-width: var(--fb-content);
	margin-left: auto;
	margin-right: auto;
}

.entry-content > .alignwide {
	max-width: var(--fb-wide);
}

.entry-content > .alignfull {
	max-width: none;
	margin-left: calc(var(--fb-gutter) * -1);
	margin-right: calc(var(--fb-gutter) * -1);
}

.entry-content .wp-block-image figcaption,
.wp-caption-text {
	margin-top: .5rem;
	font-size: var(--fb-step-small);
	color: var(--fb-muted);
}

.alignleft {
	float: left;
	margin: .3rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: .3rem 0 1rem 1.5rem;
}

/* A new section never starts beside a floated photo. */
.entry-content h2 {
	clear: both;
}

.entry-content figure.alignleft {
	margin-right: 2rem;
}

/* Opening sentence of a page: add the class "fb-lead" to the paragraph. */
.entry-content .fb-lead {
	font-family: var(--fb-font-heading);
	font-size: var(--fb-step-lead);
	line-height: 1.4;
	font-variation-settings: "SOFT" 50, "opsz" 36;
}

.entry-content figure.alignleft,
.entry-content figure.alignright {
	width: min(45%, 26rem);
	margin-top: .4rem;
}

.entry-content figure.alignleft img,
.entry-content figure.alignright img {
	display: block;
	width: 100%;
}

/* On wide screens a right-floated photo hangs out of the text column into the margin. */
@media (min-width: 1100px) {
	.entry-content figure.alignright {
		margin-right: max(-14rem, calc((var(--fb-content) - 100vw) / 2 + var(--fb-gutter)));
		margin-left: 2.5rem;
	}
}

/* A long list in two columns within the text column: add the class "fb-columns-list" to the list. */
.entry-content > .fb-columns-list {
	columns: 2;
	column-gap: 2.5rem;
	padding-left: 1.25rem;
}

.entry-content .fb-columns-list li {
	break-inside: avoid;
	margin-bottom: .6rem;
}

/* The Omgeving table: distances first, in bold figures. */
.entry-content .fb-distances td:first-child {
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.entry-content .fb-distances th:first-child {
	width: 7rem;
}

.entry-content .fb-distances th:nth-child(2) {
	width: 9rem;
}

/* On phones a floated image leaves the text too narrow: stack them. */
@media (max-width: 600px) {
	.entry-content .alignleft,
	.entry-content .alignright,
	.entry-content figure.alignleft,
	.entry-content figure.alignright {
		float: none;
		width: auto;
		margin: 0 0 1.25rem;
	}
	.entry-content > .fb-columns-list {
		columns: 1;
	}
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	max-width: 100%;
}

.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

/* Table block: core's black borders become the theme's quiet row lines. */
.entry-content .wp-block-table table {
	table-layout: auto;
	border-collapse: collapse;
}

.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	border: 0;
	border-bottom: 1px solid var(--fb-surface);
	overflow-wrap: normal;
	word-break: normal;
}

.entry-content .wp-block-table thead {
	border-bottom: 0;
}

.entry-content .wp-block-table tr:last-child td {
	border-bottom: 0;
}

.entry-content .wp-block-table td:first-child {
	white-space: nowrap;
}

@media (max-width: 600px) {
	.entry-content .wp-block-table td:first-child {
		white-space: normal;
	}
	.entry-content .wp-block-table th,
	.entry-content .wp-block-table td {
		padding: .65rem .75rem .65rem 0;
	}
}

/* Embeds pasted as HTML (e.g. Google Maps) are inline by default and won't centre. */
.entry-content > iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* Columns block: the theme's column width rules are for the old shortcodes only. */
.entry-content .wp-block-columns {
	gap: clamp(1.5rem, 4vw, 3rem);
}

/* Panel look for a Group block: add the CSS class "fb-card" in the block's Advanced settings. */
.entry-content .fb-card {
	padding: 1.75rem 2rem;
	background: var(--fb-surface);
}

.entry-content .fb-card h2,
.entry-content .fb-card h3 {
	font-size: var(--fb-step-lead);
}

.entry-content .fb-card > :first-child {
	margin-top: 0;
}

.entry-content .fb-card > :last-child {
	margin-bottom: 0;
}

/* Contact Form 7: a label line followed by its field reads as one unit. */
.wpcf7 .wpcf7-form p {
	margin-bottom: .35rem;
}

/* Fallback: browsers without :has() keep even spacing. */
@supports not selector(:has(*)) {
	.wpcf7 .wpcf7-form p {
		margin-bottom: 1.25rem;
	}
}

.wpcf7 .wpcf7-form p:has(> .wpcf7-form-control-wrap),
.wpcf7 .wpcf7-form p:has(> .wpcf7-submit),
.wpcf7 .wpcf7-form p:has(> label) {
	margin-bottom: 1.25rem;
}

.wpcf7-form label {
	display: block;
}

/* Empty paragraphs left behind by wpautop around shortcodes. */
.entry-content p:empty {
	display: none;
}

/* Older content has font sizes pasted inline (e.g. 13px); let the theme's sizes win. */
.entry-content span[style*="font-size"],
.entry-content span[style*="line-height"] {
	font-size: inherit !important;
	line-height: inherit !important;
}

/* Classic [gallery] shortcode */
.entry-content > .gallery {
	max-width: var(--fb-wide);
}

.gallery {
	--gallery-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--gallery-cols), minmax(0, 1fr));
	gap: .75rem;
	margin-bottom: 2rem;
}

.gallery-columns-1 { --gallery-cols: 1; }
.gallery-columns-2 { --gallery-cols: 2; }
.gallery-columns-4 { --gallery-cols: 4; }
.gallery-columns-5 { --gallery-cols: 5; }
.gallery-columns-6 { --gallery-cols: 6; }
.gallery-columns-7 { --gallery-cols: 7; }
.gallery-columns-8 { --gallery-cols: 8; }
.gallery-columns-9 { --gallery-cols: 9; }

.gallery-item {
	margin: 0;
}

.gallery-icon a {
	display: block;
	overflow: hidden;
	background: var(--fb-surface);
}

.entry-content .gallery-icon img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform .5s var(--fb-ease);
}

.gallery-icon a:hover img {
	transform: scale(1.04);
}

.gallery-caption {
	margin: .35rem 0 0;
	font-size: var(--fb-step-small);
	line-height: 1.4;
	color: var(--fb-muted);
	text-align: left;
}

@media (max-width: 760px) {
	.gallery {
		--gallery-cols: 3;
		gap: .5rem;
	}
	.gallery-columns-1 { --gallery-cols: 1; }
	.gallery-columns-2 { --gallery-cols: 2; }
}

@media (max-width: 420px) {
	.gallery:not(.gallery-columns-1) {
		--gallery-cols: 2;
	}
}

/*
 * Column Shortcodes plugin ([one_third] etc.). wpautop breaks the wrapping <p>,
 * so the columns end up as direct children of .entry-content; line them up
 * inside the text column.
 */
.entry-content {
	--col-w: min(var(--fb-content), 100%);
	--col-gap: 1.5rem;
}

.entry-content > .content-column {
	display: inline-block;
	float: none;
	vertical-align: top;
	margin: 0 var(--col-gap) 1.25em 0;
}

.entry-content > .content-column:first-child,
.entry-content > :not(.content-column) + .content-column {
	margin-left: calc((100% - var(--col-w)) / 2);
}

.entry-content > .content-column.last_column {
	margin-right: 0;
}

.entry-content > .one_half      { width: calc((var(--col-w) - var(--col-gap)) / 2); }
.entry-content > .one_third     { width: calc((var(--col-w) - 2 * var(--col-gap)) / 3); }
.entry-content > .two_third     { width: calc((var(--col-w) - 2 * var(--col-gap)) / 3 * 2 + var(--col-gap)); }
.entry-content > .one_fourth    { width: calc((var(--col-w) - 3 * var(--col-gap)) / 4); }
.entry-content > .three_fourth  { width: calc((var(--col-w) - 3 * var(--col-gap)) / 4 * 3 + 2 * var(--col-gap)); }

.content-column p {
	margin: 0;
}

.entry-content > .clear_column {
	display: block;
	clear: both;
}

@media (max-width: 600px) {
	.entry-content {
		--col-gap: .75rem;
	}
}

.edit-link {
	display: block;
	max-width: var(--fb-content);
	margin: 2rem auto 0;
	font-size: var(--fb-step-small);
}

/*------------------------------------*\
    ENTRANCES
    Only hidden once theme.js has run, so content never stays invisible.
\*------------------------------------*/

[data-reveal] > * {
	transition: opacity .7s var(--fb-ease), transform .7s var(--fb-ease);
	transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-waiting > * {
	opacity: 0;
	transform: translateY(24px);
}

/*------------------------------------*\
    LANDING PAGE: PANORAMA
    A heading that captions the wide photograph below it.
\*------------------------------------*/

.panorama {
	padding-top: var(--fb-section);
}

.panorama__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 15rem));
	align-items: end;
	gap: 1.5rem 3rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.panorama__title {
	max-width: 11ch;
	margin: 0;
}

.panorama__note {
	margin: 0;
	font-size: var(--fb-step-body);
}

.panorama__media {
	margin: 0;
}

.panorama__media img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: 50% 40%;
}

@media (max-width: 860px) {
	.panorama__head {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.panorama__media img {
		aspect-ratio: 4 / 5;
	}
}

/*------------------------------------*\
    LANDING PAGE: OVER HET HUIS (the page's own text + video)
    Text and video start on the same line, under a heading that spans both.
\*------------------------------------*/

.about {
	padding-top: var(--fb-section);
}

.about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem clamp(2.5rem, 5vw, 5rem);
	align-items: start;
}

.about__title {
	grid-column: 1 / -1;
	margin: 0;
}

.about .entry-content > * {
	max-width: none;
}

.about .entry-content > p:first-of-type {
	margin-top: -.3em; /* the first line's cap height meets the top of the video */
	font-family: var(--fb-font-heading);
	font-size: var(--fb-step-lead);
	line-height: 1.4;
	font-variation-settings: "SOFT" 50, "opsz" 36;
}

.about .entry-content > :last-child {
	margin-bottom: 0;
}

.about__caption {
	margin: .75rem 0 0;
	font-size: var(--fb-step-small);
	color: var(--fb-muted);
}

.video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--fb-ink);
}

.video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--fb-ink);
}

.video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video__play {
	position: absolute;
	inset: 0;
	display: block;
	cursor: pointer;
}

.video__play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--fb-ease);
}

.video__play:hover img,
.video__play:focus-visible img {
	transform: scale(1.04);
}

.video__button {
	position: absolute;
	left: 1.25rem;
	bottom: 1.25rem;
	width: 4.5rem;
	height: 4.5rem;
	background: var(--fb-bg);
	transition: transform .25s var(--fb-ease);
}

.video__button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -.7rem 0 0 -.4rem;
	border-style: solid;
	border-width: .7rem 0 .7rem 1.2rem;
	border-color: transparent transparent transparent var(--fb-ink);
}

.video__play:hover .video__button,
.video__play:focus-visible .video__button {
	transform: scale(1.08);
}

@media (max-width: 860px) {
	.about__grid {
		grid-template-columns: 1fr;
	}
}

/*------------------------------------*\
    LANDING PAGE: VAN DE DIJK TOT DE VOORDEUR
    One frame, three photographs, each closer than the last. The list beside
    it shows where you are on the walk.
\*------------------------------------*/

.distances {
	position: relative;
	padding-top: var(--fb-section);
}

.distances__stage {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	grid-template-rows: auto auto;
	gap: 2.5rem clamp(2rem, 4vw, 4rem);
	align-items: end;
}

.distances__title {
	grid-column: 1 / -1;
	margin: 0;
}

.distances__frame {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--fb-surface);
}

.distances__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity .8s ease, transform 1.6s var(--fb-ease);
}

.distances__img.is-active {
	opacity: 1;
	transform: scale(1);
}

.distances__captions {
	margin: 0;
	padding: 0;
	list-style: none;
}

.distances__caption {
	padding: 1.25rem 0;
}

.distances__caption:last-child {
	padding-bottom: 0;
}

/* While the stage runs, the other steps keep only their (large, still readable) name
   and the current step shows its description. */
.distances.is-staged .distances__caption:not(.is-active) .distances__name {
	opacity: .62;
}

.distances.is-staged .distances__caption p {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .5s var(--fb-ease), opacity .4s ease;
}

.distances.is-staged .distances__caption.is-active p {
	max-height: 8em;
	opacity: 1;
}

.distances__name {
	transition: opacity .4s ease;
}

.distances__name {
	margin: 0 0 .35rem;
}

.distances__caption p {
	margin: 0;
}

/* With the script: the stage stays put while the reader scrolls through three steps. */
.distances.is-staged {
	height: calc(100svh + 160svh);
	padding-top: 0;
	margin-top: var(--fb-section);
}

.distances.is-staged .distances__stage {
	position: sticky;
	top: var(--fb-header-h);
	height: calc(100svh - var(--fb-header-h));
	align-content: center;
}

.distances.is-staged .distances__frame {
	max-height: calc(100svh - var(--fb-header-h) - 12rem);
	width: auto;
}

@media (max-width: 860px) {
	.distances__stage {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.distances__frame {
		aspect-ratio: 4 / 3;
	}
	/* On a phone only the current step is shown, under the photo. */
	.distances.is-staged .distances__captions {
		display: grid;
	}
	.distances.is-staged .distances__caption {
		grid-area: 1 / 1;
		padding: 0;
		opacity: 0;
	}
	.distances.is-staged .distances__caption.is-active {
		opacity: 1;
	}
}

/*------------------------------------*\
    LANDING PAGE: FOTO'S (a row to drag sideways)
\*------------------------------------*/

.reel {
	padding-block: var(--fb-section);
}

.reel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 2rem;
	margin-bottom: 2rem;
}

.reel__title {
	margin: 0;
}

.reel__more {
	font-weight: 600;
}

.reel__row {
	--reel-h: 68svh;
	display: flex;
	gap: .75rem;
	height: var(--reel-h);
	padding-inline: max(var(--fb-gutter), calc((100vw - var(--fb-wide)) / 2));
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: max(var(--fb-gutter), calc((100vw - var(--fb-wide)) / 2));
	scrollbar-width: none;
	cursor: grab;
}

.reel__row::-webkit-scrollbar {
	display: none;
}

.reel__module {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	height: 100%;
	scroll-snap-align: start;
}

.reel__module img {
	display: block;
	flex: 1;
	min-height: 0;
	width: 100%;
	object-fit: cover;
	background: var(--fb-surface);
}

.reel__module--tall { aspect-ratio: 3 / 4; }
.reel__module--pair { aspect-ratio: 4 / 6; }
.reel__module--wide { aspect-ratio: 16 / 10; }

@media (max-width: 760px) {
	.reel__row {
		--reel-h: 62svh;
		gap: .5rem;
	}
	.reel__module--tall { width: 72vw; aspect-ratio: auto; }
	.reel__module--pair { width: 64vw; aspect-ratio: auto; }
	.reel__module--wide { width: 88vw; aspect-ratio: auto; }
}

/* Fallback mosaic when the gallery page has too few photos. */
.photo-strip {
	padding-block: var(--fb-section);
}

.photo-strip__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	margin-bottom: 2rem;
}

.photo-strip__title {
	margin: 0;
}

.photo-strip__more {
	font-weight: 600;
}

.photo-strip__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: clamp(9rem, 16vw, 14rem);
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.photo-strip__item {
	overflow: hidden;
	background: var(--fb-surface);
}

.photo-strip__item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.photo-strip__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo-strip__cta {
	margin: 2rem 0 0;
}

@media (max-width: 760px) {
	.photo-strip__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 8.5rem;
	}
	.photo-strip__item:first-child {
		grid-row: span 1;
	}
}

/*------------------------------------*\
    POSTS / ARCHIVES
\*------------------------------------*/

.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 3rem 1.75rem;
}

.post-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.post-card__media {
	overflow: hidden;
}

.post-card__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .6s var(--fb-ease);
}

.post-card:hover .post-card__media img {
	transform: scale(1.04);
}

.post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem 0 0;
}

.post-card__meta {
	margin-bottom: .4rem;
	font-size: var(--fb-step-small);
	color: var(--fb-muted);
}

.post-card__title {
	margin: 0 0 .75rem;
	font-size: var(--fb-step-lead);
}

.post-card__title a {
	text-decoration: none;
}

.post-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.post-card__excerpt p:last-child {
	margin-bottom: 0;
}

.pagination {
	margin-top: 3rem;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 .9rem;
	background: var(--fb-surface);
	color: var(--fb-ink);
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--fb-ink);
	color: var(--fb-bg);
}

.empty-state {
	max-width: var(--fb-content);
	margin: 0 auto;
	text-align: center;
}

/*------------------------------------*\
    FORMS (o.a. Contact Form 7, Booking Calendar)
    Form fields keep a border: that's what makes them look like fields.
\*------------------------------------*/

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="password"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	min-height: 3rem;
	padding: .65rem .85rem;
	border: 1px solid var(--fb-muted);
	border-radius: 0;
	background: var(--fb-paper);
	color: var(--fb-ink);
	font: inherit;
	font-size: 1rem;
	transition: border-color .15s ease, outline-color .15s ease;
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--fb-ink);
	outline-offset: 0;
	border-color: var(--fb-ink);
}

textarea {
	min-height: 10rem;
	resize: vertical;
}

label {
	font-weight: 600;
}

.wpcf7 form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
}

.search-form {
	display: flex;
	gap: .5rem;
	max-width: 30rem;
	margin: 0 auto;
}

/*------------------------------------*\
    FOOTER
    Photograph on one half, the menu set large on the other.
\*------------------------------------*/

.site-footer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	min-height: 100svh;
	background: var(--fb-field);
	color: var(--fb-field-ink);
	font-size: 1rem;
}

.site-footer a {
	color: inherit;
}

.site-footer__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.site-footer__body {
	display: flex;
	flex-direction: column;
	padding: clamp(3rem, 6vw, 5rem) max(var(--fb-gutter), calc((100vw - var(--fb-wide)) / 2)) 2rem clamp(2rem, 6vw, 6rem);
}

.site-footer__brand.site-title {
	margin: 0 0 2.5rem;
	font-size: 1.625rem;
}

.site-footer__nav ul {
	list-style: none;
	margin: 0 0 4rem;
	padding: 0;
}

.site-footer__nav a {
	display: inline-block;
	padding: .15rem 0;
	font-family: var(--fb-font-heading);
	font-size: clamp(2rem, 1.2rem + 2.2vw, 3.25rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	text-decoration: none;
	transition: transform .3s var(--fb-ease), opacity .2s ease;
}

.site-footer__nav ul:hover a {
	opacity: .6;
}

.site-footer__nav ul a:hover,
.site-footer__nav ul a:focus-visible {
	opacity: 1;
	transform: translateX(12px);
}

.site-footer__nav .menu-item--cta {
	display: none;
}

.site-footer__blocks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 2rem;
	line-height: 1.6;
}

.site-footer h2,
.site-footer .widget-title {
	margin: 0 0 .5rem;
	color: inherit;
	font-family: var(--fb-font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
}

.site-footer address {
	font-style: normal;
}

.site-footer .widget + .widget {
	margin-top: 2rem;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 3rem;
	font-size: var(--fb-step-small);
}

.site-footer__bottom p {
	margin: 0;
}

@media (max-width: 760px) {
	.site-footer {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.site-footer__media img {
		height: 50svh;
	}
	.site-footer__body {
		padding: 3rem var(--fb-gutter) 2rem;
	}
}

/*------------------------------------*\
    COMMENTS
\*------------------------------------*/

.comments-area {
	max-width: var(--fb-content);
	margin: 4rem auto 0;
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-body {
	margin-bottom: 1.5rem;
	padding: 1.25rem 1.5rem;
	background: var(--fb-surface);
}

.comment-meta {
	font-size: var(--fb-step-small);
	color: var(--fb-muted);
}

.comment-meta .avatar {
	float: left;
	margin-right: .75rem;
	border-radius: 50%;
}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	.site-header,
	.site-footer,
	.hero .button,
	.video,
	.nav-toggle {
		display: none !important;
	}
	body {
		background: none;
		color: #000;
	}
	.hero,
	.page-hero {
		min-height: 0;
		margin: 0;
		padding: 0 0 1rem;
		color: #000;
		background: none;
	}
	.hero::before,
	.hero::after,
	.page-hero::after,
	.hero__media,
	.page-hero__media {
		display: none;
	}
	.distances.is-staged {
		height: auto;
	}
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: .8em;
	}
}