/*
 * We Lôpe Deur.
 *
 * Five colours, all of them lifted out of the logo rather than picked to look
 * carnival-ish: the red, white and yellow of Oeteldonk, the green of the banner
 * the club's name is written on, and the blue of the footprints.
 *
 * Change these and it is a different club's site. Everything below is layout.
 */

:root {
	--rood:   #ff0000;
	--geel:   #fff50a;
	--groen:  #12600a;
	--blauw:  #1c57cd;

	--paper:      #ffffff;
	--paper-warm: #fffdf2;   /* yellow, thinned until it is only warmth */
	--ink:        #1b1b1b;
	--ink-soft:   #5c5c5c;
	--rule:       #e4e0d2;

	--measure: 62rem;
	--radius: 6px;
}

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

/*
 * The footprints, walking down the page.
 *
 * The club's own image, carried over from the old theme rather than redrawn —
 * the drawn ones came out as blobs, and there was no reason to redraw something
 * that already existed and already looked right.
 *
 * Fixed rather than scrolling, so the page moves over them instead of dragging
 * them along. On a phone that also avoids repainting a large background on every
 * scroll frame.
 */
body {
	margin: 0;
	background: var(--paper-warm);
	color: var(--ink);
	font: 1.05rem/1.7 "Segoe UI", system-ui, -apple-system, sans-serif;
	-webkit-text-size-adjust: 100%;
}

/*
 * On its own layer so it can be turned down.
 *
 * `opacity` does not apply to a background image — only to a whole element — so
 * the footprints sit on a fixed layer behind everything with an opacity of their
 * own. That is one number to change if they are still too loud, and it leaves
 * the image itself untouched.
 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: url("voetjes.png") repeat;
	background-size: 210px auto;
	opacity: 0.22;
	pointer-events: none;
}

/*
 * Nothing runs out of the box.
 *
 * A line of comma-separated names with no spaces the browser likes, or a long
 * address, is one unbreakable word as far as line breaking is concerned — so it
 * pushed the page wider than the screen and left everything after it needing a
 * sideways scroll to read. `anywhere` rather than `break-word`, because only
 * `anywhere` also shrinks the element's minimum width, which is what a grid or a
 * flex item measures itself by.
 */
main.layout,
main.layout p,
main.layout li,
main.layout td,
main.layout th,
main.layout h1,
main.layout h2,
main.layout h3 {
	overflow-wrap: anywhere;
}

/* The reading column sits on its own paper so the pattern stays behind it. */
main.layout {
	min-width: 0;
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow: 0 2px 18px rgba(18, 96, 10, 0.09);
	padding-block: 2rem 2.5rem;
	margin-block: 1.5rem 0;
}

@media (max-width: 40rem) {
	main.layout { border-radius: 0; margin-block: 0; }
}

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

main img {
	border-radius: var(--radius);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

a { color: var(--groen); text-underline-offset: 2px; }
a:hover { color: var(--rood); }

.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 three stripes ---- */

/*
 * Red, white and yellow, in that order, the way the town wears them.
 *
 * A gradient with hard stops rather than three elements: one line of CSS, and it
 * scales to any width without anything to keep in step.
 */
.stripes {
	height: 0.6rem;
	background: linear-gradient(
		to right,
		var(--rood) 0 33.33%,
		var(--paper) 33.33% 66.66%,
		var(--geel) 66.66% 100%
	);
}

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

.masthead {
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
}

/* A bigger logo: it is the best thing the club owns. */
.masthead .brand img { width: 5rem; }

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

.brand {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

.brand img { width: 4.2rem; height: auto; display: block; }

.brand__words { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }

.brand__name {
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--groen);
	letter-spacing: 0.01em;
}

/* The Oeteldonk motto, in the town's own yellow on green. */
.brand__motto {
	align-self: flex-start;
	margin-top: 0.2rem;
	padding: 0.1rem 0.5rem;
	background: var(--groen);
	color: var(--geel);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: lowercase;
}

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

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

.mainnav a:hover { background: var(--paper-warm); color: var(--groen); }

.mainnav .is-active > a {
	background: var(--groen);
	color: var(--geel);
}

/* The branch you are in, when the page itself is one level down. */
.mainnav .is-open > a {
	color: var(--groen);
	box-shadow: inset 0 -3px 0 var(--geel);
}

/*
 * The sub-pages of the open section, on a row of their own.
 *
 * They used to be a nested list inside the menu item, which made that item take
 * the whole width — the section turned into a green bar and everything after it
 * jumped sideways.
 */
.subnav {
	background: var(--geel);
	border-bottom: 3px solid var(--rood);
}

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

.subnav a {
	display: block;
	padding: 0.5rem 0.7rem;
	color: var(--ink);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 600;
}

.subnav a:hover { color: var(--rood); }
.subnav .is-active > a { color: var(--groen); text-decoration: underline; text-underline-offset: 4px; }

/*
 * The menu button is a checkbox, and this is the reason this theme exists.
 *
 * The framework the old theme carried bound touchmove while its menu was open
 * and cleared the flag only when a closing animation finished. A thumb
 * interrupts that animation constantly, and then the page could not be scrolled
 * until it was reloaded. A checkbox has no state to get stuck in.
 */
.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.5rem;
		line-height: 1;
		color: var(--groen);
		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(--groen); outline-offset: 2px; }

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

	.brand img { width: 3.2rem; }
	.brand__name { font-size: 1.2rem; }
}

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

/* ---- the dates everybody comes for ---- */

.countdown {
	background: var(--groen);
	color: var(--geel);
	border-bottom: 4px solid var(--geel);
}

.countdown .layout {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.9rem;
	padding-block: 0.7rem;
}

.countdown__label {
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.85;
}

.countdown__when { font-size: 1.15rem; font-weight: 700; }

/* ---- 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-block: 2rem 3.5rem; }

h1, h2, h3 { line-height: 1.2; color: var(--groen); }
h1 {
	font-size: clamp(1.9rem, 5vw, 2.8rem);
	margin-top: 0;
	/* Red under the page title, the width of the words. Oeteldonk does not do
	   restraint, and neither should the first thing on the page. */
	padding-bottom: 0.4rem;
	border-bottom: 4px solid var(--rood);
	display: inline-block;
}
h2 { font-size: 1.5rem; margin-top: 2.2rem; }
h3 { font-size: 1.15rem; }

/* A red rule under a heading, the width of the words and no more. */
h2::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: 0.4rem;
	background: var(--rood);
	border-radius: 2px;
}

blockquote {
	margin-inline: 0;
	padding: 0.6rem 1rem;
	border-left: 4px solid var(--geel);
	background: var(--paper-warm);
	color: var(--ink);
}

table { border-collapse: collapse; width: 100%; margin-block: 1.2rem; }
table:has(colgroup) { table-layout: fixed; }
th, td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
th { color: var(--groen); background: var(--paper-warm); }

/* Wide tables get their own scrollbar rather than pushing the page sideways —
   the members register is a spreadsheet and will not narrow. */
main > table { display: block; overflow-x: auto; }

hr { border: 0; border-top: 2px dashed var(--rule); margin-block: 2rem; }

/*
 * Song lyrics, and anything else pasted as preformatted text.
 *
 * A <pre> keeps its whitespace and does not wrap, which is right for code and
 * wrong for a verse — on a phone the lines simply ran off the side and the page
 * had to be dragged sideways to read.
 *
 * `pre-wrap` keeps the line breaks the writer put in, which is the whole point
 * of a verse, and lets the browser break the ones that are too long anyway.
 * The monospace face goes too: a clublied is not code.
 */
pre {
	margin-block: 1.2rem;
	padding: 1rem 1.1rem;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font: inherit;
	background: var(--paper-warm);
	border-left: 4px solid var(--geel);
	border-radius: 0 var(--radius) var(--radius) 0;
}

/* Where somebody really did paste code, they can say so. */
pre code, pre.code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

/*
 * An agenda entry.
 *
 * Write it in a page as a <h3> for the day and a list under it; this gives the
 * date a coloured marker so a season reads as a sequence rather than a wall.
 */
.agenda h3 {
	position: relative;
	margin-top: 1.8rem;
	padding-left: 1.1rem;
	color: var(--groen);
}

.agenda h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 0.55rem;
	height: 0.55rem;
	background: var(--rood);
	border-radius: 50%;
}

.agenda ul { margin-top: 0.4rem; }

/* The three carnival days, marked out from the run-up. */
.agenda .kerndag h3::before { background: var(--geel); box-shadow: 0 0 0 2px var(--groen); }

/* ---- a row of pictures ---- */

.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: 1rem;
	margin-block: 1.5rem;
	justify-content: start;
}

.tiles figure { margin: 0; min-width: 0; display: flex; flex-direction: column; }

.tiles img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.tiles figcaption,
.tiles figure > :not(img):not(a) {
	margin-block: 0.45rem 0;
	font-size: 0.8rem;
	line-height: 1.4;
	text-align: center;
	overflow-wrap: anywhere;
	color: var(--ink-soft);
}

/* ---- the gebôje, side by side ---- */

/*
 * The house rules exist in Oeteldonks and in Dutch, and the pleasure is in
 * seeing them together. Two columns where there is room, stacked where there is
 * not — and the dialect keeps the colour.
 */
.gebode {
	display: grid;
	gap: 0 2.5rem;
	margin-block: 1.5rem;
}

@media (min-width: 48rem) {
	.gebode { grid-template-columns: 1fr 1fr; }
}

.gebode ol { padding-left: 1.3rem; }
.gebode li { margin-bottom: 0.8rem; }
.gebode .oeteldonks { color: var(--groen); font-weight: 500; }
.gebode .nederlands { color: var(--ink-soft); }

/* ---- forms a module rendered ---- */

.contact-form .field,
.reaction-form .field,
.aanmeld-form .field { margin-block: 0 1.1rem; }

.contact-form label,
.reaction-form label,
.aanmeld-form label {
	display: inline-block;
	margin-bottom: 0.3rem;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--groen);
}

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

.contact-form input:focus,
.contact-form textarea:focus,
.aanmeld-form input:focus,
.aanmeld-form textarea:focus,
.aanmeld-form select:focus {
	outline: 0;
	border-color: var(--groen);
}

.contact-form input[inputmode="numeric"],
.aanmeld-form input[inputmode="numeric"] { width: 6rem; }

.contact-form button,
.reaction-form button,
.aanmeld-form button {
	padding: 0.7rem 1.8rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	color: var(--geel);
	background: var(--groen);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.contact-form button:hover,
.aanmeld-form button:hover { background: var(--rood); color: var(--paper); }

.form-error { color: #b3140f; font-weight: 700; }
.form-done { padding: 1rem 0; font-weight: 700; color: var(--groen); }

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

.sitefooter {
	margin-top: 3rem;
	background: var(--groen);
	color: #e8f0e4;
	font-size: 0.95rem;
}

.sitefooter .stripes { margin-bottom: 2rem; }

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

.sitefooter a { color: var(--geel); 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: 700; color: var(--paper); }
.sitefooter__heading { margin: 0 0 0.4rem; font-weight: 700; color: var(--paper); }

.sitefooter__alaaf {
	margin-top: 0.8rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--geel);
	letter-spacing: 0.06em;
}

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

/* ---- modules ---- */

.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(11rem, 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.55rem 0.7rem; font: inherit; border: 2px solid var(--rule); border-radius: var(--radius); }
.search-form button { padding: 0.55rem 1.3rem; font: inherit; font-weight: 700; background: var(--groen); color: var(--geel); border: 0; border-radius: 999px; cursor: pointer; }
.search-result + .search-result { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1rem; }
mark { background: var(--geel); color: var(--ink); }

/* ---- een video in de pagina ---- */

/*
 * De speler zit er niet in tot iemand klikt.
 *
 * Wat er staat is een still met een knop, en die knop is een gewone link naar
 * dezelfde pagina met ?video= erachter. Geen script, en niemand die de tekst
 * leest wordt langs YouTube gestuurd.
 */
.video { margin: 1.8rem 0; }

.video__poster {
	position: relative;
	display: block;
	max-width: 34rem;
	border-radius: var(--radius);
	overflow: hidden;
	line-height: 0;
}

.video__poster img {
	width: 100%;
	height: auto;
	display: block;
	box-shadow: none;
	border-radius: 0;
}

/* De knop in de kleuren van de club, niet die van YouTube. */
.video__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 3rem;
	color: var(--geel);
	background: rgba(18, 96, 10, 0.35);
	transition: background 0.15s ease;
}

.video__poster:hover .video__play,
.video__poster:focus-visible .video__play { background: rgba(255, 0, 0, 0.45); }

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

/* Zestien bij negen zonder de hoogte te hoeven weten. */
.video__frame {
	position: relative;
	max-width: 34rem;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background: #000;
}

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

.video figcaption {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

.video__note { font-size: 0.85rem; }

.video-missing {
	padding: 0.8rem 1rem;
	border-left: 4px solid var(--rood);
	background: var(--paper-warm);
	font-size: 0.95rem;
}