/*
 * Tian Dao.
 *
 * Greens from the bamboo photograph, so the header and the picture belong to
 * each other rather than sitting next to each other.
 *
 * Change these eight and it is a different practice's site. Everything below
 * them is layout.
 */

:root {
	--green-dark: #34492f;   /* the bar and the footer */
	--green: #4a6b3d;        /* buttons, links, the contact band */
	--green-light: #6f8f5c;
	--ink: #2c322b;
	--ink-soft: #61695f;
	--paper: #ffffff;
	--paper-alt: #f4f6f1;
	--rule: #dfe4d9;

	/* Wide enough for a row of thumbnails and a column of text side by side,
	   which at 68rem they were not. */
	--measure: 82rem;
	--radius: 4px;
}

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 1.05rem/1.7 "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }
a { color: var(--green); }

.layout { max-width: var(--measure); margin-inline: auto; padding-inline: 1.25rem; }

.skip { position: absolute; left: -9999px; }
.skip:focus { position: static; display: inline-block; padding: 0.5rem; }

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- the bar with the phone number ---- */

/*
 * The bar above the header, on the same bamboo as the strip below it — it is one
 * band of picture with the white header laid across it.
 */
.topbar {
	position: relative;
	background-image: url("bamboo.jpg");
	background-size: cover;
	background-position: center 30%;
	color: #fff;
	font-size: 0.9rem;
}

/* Dark enough for white text at this size, light enough to still be bamboo. */
.topbar::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(28, 40, 24, 0.62);
}

.topbar .layout { position: relative; }

.topbar .layout {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: center;
	padding-block: 0.5rem;
}

.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar__phone { font-weight: 600; }
.topbar__callback { margin-left: auto; }

/* ---- header ---- */

/*
 * The top of the page follows you down it.
 *
 * On a one-pager scrolling is the only navigation there is, so the menu has to
 * stay reachable — and the phone bar and the bamboo come with it, because a
 * header that leaves half of itself behind reads as a mistake.
 *
 * Desktop only. On a phone a fixed block this tall would eat the screen, and
 * the menu is a button there rather than a row of links.
 */
@media (min-width: 52rem) {
	.topblock {
		position: sticky;
		top: 0;
		z-index: 20;
	}
}

.masthead {
	background: var(--paper);
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
}

/*
 * The strip of bamboo under the header.
 *
 * It was behind the menu before, lightened until it was barely there — which is
 * a lot of effort to make a photograph invisible. Below the bar it is simply
 * itself, and the design has it that way.
 */
.bamboo {
	height: 5.5rem;
	background-image: url("bamboo.jpg");
	background-size: cover;
	background-position: center 55%;
}

@media (max-width: 40rem) {
	.bamboo { height: 3rem; }
}

/* Enough for the bar, the header and the bamboo together, or an anchor lands
   behind them. */
html { scroll-behavior: smooth; scroll-padding-top: 12rem; }

@media (max-width: 52rem) {
	html { scroll-padding-top: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

.masthead .layout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-block: 1rem;
}

/* Without a logo the site name stands in for it, and a long one would otherwise
   push the menu onto its own line and leave the header looking centred. */
.brand { flex: 0 1 auto; min-width: 0; }
.mainnav { flex: 1 1 auto; display: flex; justify-content: flex-end; }

.brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	flex: 0 1 auto;
	min-width: 0;
}

.brand img { max-height: 3.2rem; width: auto; display: block; }

.brand__name {
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--ink);
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mainnav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.35rem;
}

.mainnav a {
	display: block;
	padding: 0.4rem 0.7rem;
	color: var(--ink);
	text-decoration: none;
	font-size: 0.95rem;
	border-radius: var(--radius);
}

.mainnav a:hover { background: var(--paper-alt); }
.mainnav .is-active > a { color: var(--green); font-weight: 600; }

/* Sub-pages of the open branch. */
.mainnav li ul { flex-basis: 100%; padding-left: 0.8rem; }
.mainnav li ul a { font-size: 0.9rem; padding-block: 0.25rem; }

/*
 * The menu button, on a checkbox.
 *
 * No JavaScript in this theme at all. That is not minimalism for its own sake:
 * the old site's framework bound touchmove while its menu was open and cleared
 * the flag only when a close animation finished, so an interrupted animation
 * left the page unscrollable until it was reloaded. A checkbox cannot do that.
 */
.menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.menu-button { display: none; }

@media (max-width: 52rem) {
	.menu-button {
		display: inline-block;
		padding: 0.4rem 0.7rem;
		font-size: 1.4rem;
		line-height: 1;
		color: var(--green-dark);
		cursor: pointer;
		user-select: none;
	}

	.mainnav {
		flex-basis: 100%;
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.2s ease;
	}
	.mainnav > ul { overflow: hidden; display: block; }

	.menu-toggle:checked ~ .mainnav { grid-template-rows: 1fr; }
	.menu-toggle:focus-visible + .menu-button { outline: 2px solid var(--green); outline-offset: 2px; }

	.mainnav a { border-top: 1px solid var(--rule); border-radius: 0; padding-block: 0.7rem; }
}

/* ---- the photograph ---- */

/*
 * The bands of photograph.
 *
 * Two pictures alternating rather than one repeated, which is what stops a long
 * scrolling page reading as the same screen over and over.
 */
.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
	min-height: 14rem;
	padding-block: 2.5rem 4rem;
}

.hero--1 { background-image: url("hero-1.jpg"); }
.hero--2 { background-image: url("hero-2.jpg"); }
.hero--3 { background-image: url("hero-3.jpg"); }
.hero--4 { background-image: url("hero-4.jpg"); }
.hero--5 { background-image: url("hero-5.jpg"); }
.hero--6 { background-image: url("hero-6.jpg"); }
.hero--7 { background-image: url("hero-7.jpg"); }
.hero--8 { background-image: url("hero-8.jpg"); }
.hero--9 { background-image: url("hero-9.jpg"); }
.hero--10 { background-image: url("hero-10.jpg"); }
.hero--11 { background-image: url("hero-11.jpg"); }

/*
 * The diagonal the design cuts out of the bottom of each band.
 *
 * A wedge of the page taken out of the picture, leaning the other way on every
 * second band so a long scrolling page does not repeat itself. Cut from the
 * element rather than laid over it, so whatever is behind shows through — which
 * means it stays right if the page colour ever changes.
 *
 * A browser without clip-path gets a straight edge, which is the layout that was
 * there before and is not wrong, only plainer.
 */
.hero--1 {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 2.5rem));
}

.hero--2 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
}

.hero--3 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
}

.hero--4 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
}

.hero--5 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
}

.hero--6 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
}

.hero--7 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
}

.hero--8 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
}

.hero--9 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
}

.hero--10 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
}

.hero--11 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.5rem), 0 100%);
}

/* Taller band, deeper cut: the angle should look the same, not the drop. */
.section:first-child .hero {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 4rem));
}

@media (max-width: 40rem) {
	.hero--1, .hero--2, .hero--3, .hero--4, .hero--5, .hero--6, .hero--7, .hero--8, .hero--9, .hero--10, .hero--11, .section:first-child .hero {
		/* At phone width the same angle is a much steeper slope across a narrow
		   screen, and it starts eating the picture. */
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 1.2rem));
	}
}

/* The first one is taller: it is the top of the page and carries the headline. */
.section:first-child .hero { min-height: 26rem; padding-block: 4rem; }

/*
 * The photograph fades out at both edges.
 *
 * This is what makes the design look lighter than a photograph normally does:
 * the picture does not end at the edge of the window, it dissolves into the page
 * around it. Two stops of the page colour rather than a mask, because a gradient
 * over the top works the same everywhere and needs nothing clever.
 *
 * The width of the fade is one number: change 14% and 86% together.
 */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		var(--paper) 0%,
		rgba(255, 255, 255, 0) 14%,
		rgba(255, 255, 255, 0) 86%,
		var(--paper) 100%
	);
	pointer-events: none;
}

/*
 * A scrim under the headline, on the first band only.
 *
 * The others carry no text over the picture any more — their headings moved
 * underneath — so darkening them would be spoiling a photograph for nothing.
 */
.section:first-child .hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 40, 24, 0.06), rgba(28, 40, 24, 0.42));
}

.hero .layout { position: relative; z-index: 1; }

/*
 * White, and stated after the rules for headings inside a section.
 *
 * A heading over a photograph is a heading over a photograph: the dark green
 * that reads well on paper is invisible on a picture, and this is the one place
 * where "h2 is green" has to lose.
 */
.hero__title {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3.2rem);
	line-height: 1.15;
	font-weight: 600;
	max-width: 20ch;
	color: #fff;
}

.section .hero h1.hero__title { color: #fff; }

/*
 * The heading of every section after the first, under its photograph.
 *
 * Over the picture it was either invisible or needed a scrim heavy enough to
 * spoil the photograph. Under it, it is a heading on a page and the picture is a
 * picture.
 */
.section__title {
	margin: 0 0 1.5rem;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.15;
	color: var(--green-dark);
}

.hero__tagline {
	margin: 0.5rem 0 0;
	font-size: 1.15rem;
	opacity: 0.95;
}

/* ---- the cards, lifted over the photograph ---- */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1rem;
	margin-top: -3.5rem;
	margin-bottom: 2.5rem;
	position: relative;
	z-index: 2;
}

.card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.4rem 1.5rem;
	background: var(--green-dark);
	color: #fff;
	text-decoration: none;
	border-radius: var(--radius);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
	transition: background 0.15s ease, transform 0.15s ease;
}

.card:hover { background: var(--green); transform: translateY(-2px); }
.card__title { font-size: 1.1rem; font-weight: 600; }
.card__arrow { font-size: 1.3rem; }

@media (prefers-reduced-motion: reduce) {
	.card { transition: none; }
	.card:hover { transform: none; }
}

/* ---- breadcrumbs and the page ---- */

.breadcrumbs { padding-top: 1rem; font-size: 0.85rem; color: var(--ink-soft); }
.breadcrumbs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.breadcrumbs li + li::before { content: "/ "; color: var(--rule); }

main { padding: 0; }

.section__body { padding-block: 2.5rem 3.5rem; }

/*
 * Two columns where a section has a row of thumbnails, which is what the design
 * shows: the pictures on the left, the text beside them rather than under.
 *
 * Only where there are tiles. A section without them is ordinary prose and would
 * otherwise sit in half the width with an empty column next to it — which is why
 * this hangs off :has() rather than being the default. A browser too old for
 * :has() gets one column, which is the layout that was there before.
 */
@media (min-width: 52rem) {
	.section__body:has(.tiles) {
		display: grid;
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
		column-gap: 3rem;
		align-items: start;
	}

	/* Everything that is not a picture row belongs in the right column, in the
	   order it was written. */
	.section__body:has(.tiles) > * { grid-column: 2; }

	/* The section heading belongs to the whole section, not to the right-hand
	   column, so it spans both and everything else starts under it. */
	.section__body:has(.tiles) > .section__title {
		grid-column: 1 / -1;
	}

	.section__body:has(.tiles) > .tiles,
	.section__body:has(.tiles) > h2:has(+ .tiles),
	.section__body:has(.tiles) > h3:has(+ .tiles) {
		grid-column: 1;
	}

	/* The tiles keep the left column to themselves for the whole section, so a
	   long text on the right does not wrap back underneath them. */
	.section__body:has(.tiles) > .tiles { grid-row: span 99; }

	/*
	 * Half and half.
	 *
	 * A 26rem column came out 416 pixels wide, which fits three thumbnails and
	 * cuts the captions to ribbons — "Klachten van het bewegingsapparaat" needs
	 * room. The design gives the pictures about half the width, so this does too.
	 */
	.section__body:has(.tiles) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

	/*
	 * Four across, always, rather than as many as happen to fit.
	 *
	 * auto-fill decides from the track size and gets it wrong at every width: too
	 * few and the row looks unfinished, too many and the captions collide. Four
	 * is what the design has, and three tiles simply leave the fourth cell empty.
	 */
	.section__body:has(.tiles) .tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem;
	}

	/* Narrower column, so three or four thumbnails fit rather than two. */
	.section__body:has(.tiles) .tiles {
		grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
		gap: 0.9rem;
	}
}
.section:nth-child(even) .section__body { background: var(--paper-alt); }

.section-links {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	font-size: 0.95rem;
}

main h1 { font-size: 2rem; line-height: 1.2; margin-top: 0; color: var(--green-dark); }
main h2 { font-size: 1.45rem; color: var(--green-dark); }
main h3 { font-size: 1.15rem; }

blockquote {
	margin-inline: 0;
	padding-left: 1rem;
	border-left: 3px solid var(--green-light);
	color: var(--ink-soft);
}

table { border-collapse: collapse; width: 100%; }
th, td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule); text-align: left; }
th { color: var(--green-dark); }

/*
 * A row of small pictures with a caption under each — "Uitgelichte
 * specialismen" in the design.
 *
 * Sized to the design rather than stretched to the width: they are thumbnails
 * that sit together, not four columns of hero image. auto-fill with a small
 * track keeps them their own size when there are three of them instead of four.
 */
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8.5rem, 9.5rem));
	gap: 1rem;
	margin-block: 1.25rem;
	justify-content: start;
}

.tiles figure { margin: 0; }

/*
 * The theme decides how big a thumbnail is.
 *
 * !important because an editor writes width and height onto the <img> itself,
 * and a 130-pixel picture in a 150-pixel cell leaves a hole in the row. Used
 * here and nowhere else: a stylesheet full of !important is one nobody can
 * override on purpose either, and in a row of tiles there is nothing to want to
 * override.
 */
.tiles img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

/* The caption is a caption. A heading here would put four h3s in the outline
   of a page whose real headings are the section titles. */
.tiles figure {
	margin: 0;
	min-width: 0;
	/* So a two-line label does not push its picture out of line with the rest. */
	display: flex;
	flex-direction: column;
}

/*
 * The label under a thumbnail — whatever tag it turns out to be.
 *
 * Written as "anything in a figure that is not the picture" rather than as
 * `figcaption`, because a person writing this by hand will reach for a <p> as
 * often as not, and a stylesheet that only recognises one of the two produces
 * exactly what it looks like when it goes wrong: full-size body text, left
 * aligned, running into its neighbour. The markup should not have to be perfect
 * for the layout to hold.
 *
 * `anywhere` rather than `break-word`, which is the other half of the fix: both
 * break a long word, but only `anywhere` counts the *broken* width when the
 * browser decides how narrow a cell may be. With `break-word` the column is
 * still sized for "overgangsklachten." in one piece.
 */
.tiles figcaption,
.tiles figure > :not(img):not(a),
.tiles figure > a:not(:has(img)) {
	margin-top: 0.5rem;
	overflow-wrap: anywhere;
	hyphens: auto;
	font-size: 0.78rem;
	line-height: 1.4;
	text-align: center;
	color: var(--ink);
}

/* ---- the contact band ---- */

.contactband {
	background: var(--green);
	color: #fff;
	padding-block: 3rem;
}

.contactband__label {
	margin: 0;
	font-size: 0.85rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.75;
}

.contactband h2 { margin: 0.3rem 0 0.5rem; font-size: 1.9rem; color: #fff; }
.contactband p { margin: 0; max-width: 40rem; }
.contactband a { color: #fff; font-weight: 600; }

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

.sitefooter {
	background: var(--green-dark);
	color: #d9e0d4;
	padding-block: 2.5rem 1.5rem;
	font-size: 0.95rem;
}

.sitefooter .layout {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 2rem;
}

.sitefooter a { color: #fff; text-decoration: none; }
.sitefooter a:hover { text-decoration: underline; }
.sitefooter ul { margin: 0; padding: 0; list-style: none; }
.sitefooter li { padding-block: 0.15rem; }
.sitefooter__name { margin: 0 0 0.3rem; font-size: 1.2rem; font-weight: 600; color: #fff; }
.sitefooter__heading { margin: 0 0 0.4rem; font-weight: 600; color: #fff; }

.sitefooter__legal {
	max-width: var(--measure);
	margin: 2rem auto 0;
	padding: 1rem 1.25rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.85rem;
	opacity: 0.7;
}

/* ---- modules, so blog and albums look at home ---- */

.blog-post + .blog-post { border-top: 1px solid var(--rule); padding-top: 1.5rem; margin-top: 1.5rem; }
.blog-post h2 a { color: inherit; text-decoration: none; }
.blog-post__meta { margin-top: 0; font-size: 0.85rem; color: var(--ink-soft); }

.album-list, .album {
	margin: 0; padding: 0; list-style: none;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem;
}
.album-list a { display: block; color: inherit; text-decoration: none; }
.album-list img, .album__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.album__item { margin: 0; }

.search-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.search-form input { flex: 1 1 14rem; padding: 0.5rem 0.7rem; font: inherit; border: 1px solid var(--rule); border-radius: var(--radius); }
.search-form button { padding: 0.5rem 1.2rem; font: inherit; background: var(--green); color: #fff; border: 0; border-radius: var(--radius); cursor: pointer; }
.search-results { margin: 0; padding: 0; list-style: none; }
.search-result + .search-result { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1rem; }
mark { background: #e8f0dd; color: inherit; }

/*
 * A table that carries column widths gets fixed layout, so the widths somebody
 * dragged in the editor are the widths on the page.
 */
table:has(colgroup) { table-layout: fixed; }

/*
 * Forms a module rendered: the contact form, and reactions under a blog post.
 *
 * The markup stacks on its own, so this is about the boxes looking like they
 * belong to this site rather than to the browser's defaults.
 */
.contact-form .field,
.reaction-form .field { margin-block: 0 1.1rem; }

.contact-form label,
.reaction-form label {
	display: inline-block;
	margin-bottom: 0.3rem;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

.contact-form input,
.contact-form textarea,
.reaction-form input,
.reaction-form textarea {
	width: 100%;
	max-width: 34rem;
	padding: 0.6rem 0.7rem;
	font: inherit;
	font-size: 0.95rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--ink);
}

.contact-form input:focus,
.contact-form textarea:focus,
.reaction-form input:focus,
.reaction-form textarea:focus {
	outline: 2px solid var(--green);
	outline-offset: 1px;
}

/* The sum is two characters, not a sentence. */
.contact-form input[inputmode="numeric"],
.reaction-form input[inputmode="numeric"] { width: 6rem; }

.contact-form button,
.reaction-form button {
	padding: 0.65rem 1.6rem;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--green);
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
}

.contact-form button:hover,
.reaction-form button:hover { background: var(--green-dark); }

.form-error { color: #a4231f; font-weight: 600; }
.form-done { padding: 1rem 0; font-weight: 600; color: var(--green-dark); }

/*
 * The way back from a sub-page.
 *
 * Above the heading, because somebody who wants it wants it before they have
 * read the page again — and never on the front page, where there is nothing
 * above to go back to.
 */
.section__back { margin: 0 0 0.6rem; font-size: 0.9rem; }
.section__back a { text-decoration: none; opacity: 0.8; }
.section__back a:hover { opacity: 1; }