/*
Theme Name: redactie.net
Theme URI: https://github.com/gosselt/redactie-net
Author: redactie.net
Description: Block theme for online neighbourhood newspapers by redactie.net. Appearance only: all features (data model, images, read aloud, sharing, header menus, excerpts) live in the Wijkkrant Core plugin. Colours, fonts, logo, header and footer can be changed in the Site Editor or in a child theme; templates are locked.
Version: 2.5.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: redactie-net
Domain Path: /languages
Tags: full-site-editing, blog, news, block-patterns
*/

/* =============================================================================
   0. PAGE GRID
   The site uses the full width of the screen. The header, the section bar and
   the footer run from edge to edge; the content below sits in two columns.

   The ratio (default 73% / 27%) and the breakpoint are set in theme.json
   under settings.custom.kolom and are added by functions.php as a separate rule
   — a media query cannot use a CSS variable as its breakpoint value.
   ========================================================================== */

.wk-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wk-tussenruimte, 2rem );
	margin-inline: auto;
	width: 100%;
}

/* Below the breakpoint the sidebar sits under the content; that is the
   default state above, so mobile and tablet portrait need no extra
   rules. The second column only appears in the media query from functions.php. */

.wk-layout__inhoud {
	min-width: 0; /* prevents wide tables or code from stretching the column */
}

.wk-layout__zijbalk {
	min-width: 0;
	align-self: start;
	max-height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* Optional cap on very wide screens: set the page width in theme.json
   to, for example, "120rem". By default it is "none". */
.wk-buitenrand {
	margin-inline: auto;
	width: 100%;
}
/* =============================================================================
   1. NEWSPAPER HEADER
   Modelled on nos.nl: a top bar from screen edge to screen edge with the logo
   at the top left and the buttons at the top right, and below it a row of
   menus and sections that sits at the width of the content.

   So the top bar deliberately falls outside the content width; the section row
   does follow it. The content width itself is set in theme.json under
   settings.custom.paginabreedte.
   ========================================================================== */

.wk-kop {
	position: relative;
	/* Panel colour for the top menu dropdown. */
	--wk-topmenu-paneel: var( --wp--preset--color--krant-groen-kop, #6EB448 );
}

/* Top bar: up to the screen edge, with only a little breathing room. */
.wk-kop__balk {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp( 0.75rem, 2vw, 2rem );
	padding-inline: clamp( 0.75rem, 1.6vw, 1.5rem );
	min-height: 3.75rem;
}

.wk-kop__links,
.wk-kop__rechts {
	display: flex;
	align-items: center;
	min-width: 0;
}

.wk-kop__links {
	gap: clamp( 0.5rem, 1vw, 0.9rem );
	flex: 1 1 auto;
}

.wk-kop__rechts {
	gap: clamp( 0.25rem, 0.8vw, 0.75rem );
	flex: 0 0 auto;
}

.wk-kop__links .wp-block-site-logo {
	flex: 0 0 auto;
	margin: 0;
}

/* Row with the menus, at the width of the content — just like the section bar
   on nos.nl. Bottom border as a divider from the page below. */
.wk-kop__rubrieken {
	max-width: var( --wk-paginabreedte, 82.5rem );
	margin-inline: auto;
	padding-inline: clamp( 0.75rem, 1.6vw, 1.5rem );
	padding-bottom: 0.5rem;
}

.wk-kop__rubrieken > * + * {
	margin-top: 0.35rem;
}

/* -----------------------------------------------------------------------------
   THE NEWSPAPER NAME
   "Binnenstads" in white, "krant" in black italics. In the bar, slightly larger
   than the navigation on nos.nl (16 px) but small enough to keep the bar compact.
   One knob to turn: the 2.4vw.
   -------------------------------------------------------------------------- */

.wk-wordmark {
	margin: 0;
	font-family: var( --wp--preset--font-family--wordmark );
	font-size: clamp( 1.15rem, 2.4vw, 2rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wk-wordmark__link {
	color: inherit;
	text-decoration: none;
}

.wk-wordmark__licht {
	color: var( --wp--preset--color--wit );
}

.wk-wordmark__donker {
	color: var( --wp--preset--color--inkt );
	font-style: italic;
	font-weight: 700;
	letter-spacing: -0.045em;
}

/* -----------------------------------------------------------------------------
   BUTTONS AT THE TOP RIGHT
   -------------------------------------------------------------------------- */

.wk-kopknop {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.7rem;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var( --wp--preset--color--wit );
	font-family: var( --wp--preset--font-family--ui );
	font-size: var( --wp--preset--font-size--klein );
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.wk-kopknop:hover,
.wk-kopknop:focus-visible,
.wk-kopknop[aria-expanded="true"] {
	background: rgba( 0, 0, 0, 0.16 );
	color: var( --wp--preset--color--wit );
}

.wk-icoon {
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
}

.wk-hamburger {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 1.1em;
	height: 0.85em;
}

.wk-hamburger i {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

/* The hamburger is only needed on narrow screens; above that the menus are
   already written out in the header. */
.wk-kopknop--menu {
	display: none;
}

/* -----------------------------------------------------------------------------
   SEARCH PANEL AND MENU PANEL
   Both slide out below the bar, without reloading.
   -------------------------------------------------------------------------- */

.wk-zoekpaneel,
.wk-menupaneel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 40;
	padding: clamp( 0.75rem, 1.6vw, 1.25rem );
	background: var( --wp--preset--color--krant-groen-kop );
	box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.22 );
}

.wk-zoekpaneel__vorm {
	display: flex;
	gap: 0.5rem;
	max-width: var( --wk-paginabreedte, 82.5rem );
	margin-inline: auto;
}

.wk-zoekpaneel__veld {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7rem 0.9rem;
	border: 0;
	border-radius: 4px;
	font-size: 1rem;
	font-family: inherit;
}

.wk-zoekpaneel__knop,
.wk-zoekpaneel__sluiten {
	padding: 0.7rem 1.1rem;
	border: 2px solid var( --wp--preset--color--wit );
	border-radius: 4px;
	background: none;
	color: var( --wp--preset--color--wit );
	font-family: var( --wp--preset--font-family--ui );
	font-weight: 600;
	cursor: pointer;
}

.wk-zoekpaneel__knop:hover,
.wk-zoekpaneel__sluiten:hover {
	background: rgba( 0, 0, 0, 0.16 );
}

.wk-zoekpaneel__sluiten {
	padding-inline: 0.85rem;
	font-size: 1.2rem;
	line-height: 1;
}

.wk-menupaneel__deel + .wk-menupaneel__deel {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba( 255, 255, 255, 0.3 );
}

/* In the panel every menu is a plain list, one item per line (the plugin renders it without the
   sideways rail). Otherwise the panel would show the same row of sections it opens over, and
   seem to do nothing. Submenus are always open, indented below their parent. */
.wk-menupaneel {
	max-height: calc( 100vh - 5rem );
	max-height: calc( 100dvh - 5rem );
	overflow-y: auto;
	overscroll-behavior: contain;
}

.wk-menupaneel ul {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wk-menupaneel li {
	flex: none;
	margin: 0;
}

.wk-menupaneel nav a {
	display: block;
	padding: 0.6rem 0.5rem;
	border-radius: 4px;
	font-family: var( --wp--preset--font-family--ui );
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: normal;
	text-decoration: none;
	color: var( --wp--preset--color--inkt, #1B1B18 );
}

.wk-menupaneel nav a:hover,
.wk-menupaneel nav a:focus-visible {
	background: rgba( 0, 0, 0, 0.16 );
}

.wk-menupaneel .is-actief > a {
	background: var( --wp--preset--color--wit );
}

.wk-menupaneel [class*="__scheiding"] {
	display: none;
}

.wk-menupaneel [class*="__uitklap"] {
	position: static;
	display: flex;
	min-width: 0;
	padding: 0 0 0 1rem;
	border: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* -----------------------------------------------------------------------------
   2. MENUS IN THE HEADER
   -------------------------------------------------------------------------- */

.wk-hoofdmenu {
	font-family: var( --wp--preset--font-family--ui );
	font-size: clamp( 0.9rem, 1.15vw, 1.05rem );
	font-weight: 600;
	color: var( --wp--preset--color--wit );
}

/* Section rail: a row that scrolls sideways when it does not fit, with an arrow
   on top of each end. See kop.js for showing and hiding those arrows. The
   sections fade out behind a visible arrow instead of being cut off (mask on the
   rail, only on the side where an arrow is shown). */
.wk-rail {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
}

.wk-rail__spoor {
	--wk-vervaag-links: 0px;
	--wk-vervaag-rechts: 0px;
	flex: 1 1 auto;
	min-width: 0;
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000 var( --wk-vervaag-links ), #000 calc( 100% - var( --wk-vervaag-rechts ) ), transparent 100% );
	mask-image: linear-gradient( to right, transparent 0, #000 var( --wk-vervaag-links ), #000 calc( 100% - var( --wk-vervaag-rechts ) ), transparent 100% );
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}

.wk-rail__spoor::-webkit-scrollbar {
	display: none;
}

.wk-rail:has( .wk-rail__knop[data-richting="links"]:not( [hidden] ) ) .wk-rail__spoor {
	--wk-vervaag-links: 3.5rem;
}

.wk-rail:has( .wk-rail__knop[data-richting="rechts"]:not( [hidden] ) ) .wk-rail__spoor {
	--wk-vervaag-rechts: 3.5rem;
}

.wk-rail__knop {
	position: absolute;
	top: 50%;
	z-index: 1;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.22 );
	color: var( --wp--preset--color--wit );
	font-size: 1.2rem;
	line-height: 1;
	/* The ‹ and › sit low in the font: 4 px at the bottom lifts them 2 px to the middle. */
	padding-bottom: 4px;
	cursor: pointer;
}

/* kop.js hides an arrow (hidden attribute) when there is nothing more to scroll on that side; display:inline-flex
   above would otherwise keep it visible. */
.wk-rail__knop[hidden] {
	display: none;
}

.wk-rail__knop[data-richting="links"] {
	left: 0;
}

.wk-rail__knop[data-richting="rechts"] {
	right: 0;
}

.wk-rail__knop:hover,
.wk-rail__knop:focus-visible {
	background: rgba( 0, 0, 0, 0.38 );
}

.wk-rubrieknav,
.wk-rubrieknav ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 0 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wk-rubrieknav li {
	margin: 0;
	flex: 0 0 auto;
}

.wk-rubrieknav a {
	display: inline-block;
	/* Text sits 2 px high in the pill: 2 px more at the top, 2 px less at the bottom. */
	padding: calc( 0.35rem + 2px ) 0.7rem calc( 0.35rem - 2px );
	border-radius: 999px;
	font-family: var( --wp--preset--font-family--ui );
	font-size: var( --wp--preset--font-size--klein );
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	color: var( --wp--preset--color--wit );
}

/* Section names: capital first letter, the rest lower case, whatever the
   category is called in WordPress. */
.wk-rubrieknav a {
	text-transform: lowercase;
}

.wk-rubrieknav a::first-letter {
	text-transform: uppercase;
}

.wk-rubrieknav a:hover {
	background: rgba( 0, 0, 0, 0.18 );
}

/* Active section as a light pill, just like on nos.nl. */
.wk-rubrieknav .is-actief > a,
.wk-rubrieknav .current-cat > a {
	background: var( --wp--preset--color--wit );
	color: var( --wp--preset--color--inkt );
}

/* -----------------------------------------------------------------------------
   NARROW SCREENS
   Below 56rem the menus move to the hamburger panel; only the logo, the name,
   search and the hamburger remain in the bar.
   -------------------------------------------------------------------------- */

@media ( max-width: 56rem ) {
	.wk-kop__rechts > .wk-topmenu {
		display: none;
	}

	.wk-kopknop--menu {
		display: inline-flex;
	}

	.wk-kop__rubrieken .wk-hoofdmenu {
		display: none;
	}

	/* Sections behind the hamburger menu (Settings > redactie.net): no row of sections in the bar. */
	.wk-paneel-rubrieken .wk-kop__rubrieken .wk-rail {
		display: none;
	}

	/* Icon only: no gap for the hidden label, so the frame is as wide on the right as on the left. */
	.wk-kopknop--zoeken {
		gap: 0;
	}

	.wk-kopknop--zoeken span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}
}

@media ( max-width: 36rem ) {
	.wk-kop {
		background-size: auto 55% !important;
	}
}

/* -----------------------------------------------------------------------------
   3. SECTION STRIP
   A section on the front page: section heading with a line through it, and the
   articles below. The heading-with-line is what reads most like a "newspaper".
   -------------------------------------------------------------------------- */

.wk-rubriekkop {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: var( --wp--preset--spacing--30 );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--kop );
	font-weight: 700;
	text-transform: lowercase;
}

.wk-rubriekkop::after {
	content: "";
	flex: 1;
	height: 3px;
	background: var( --wp--preset--color--krant-groen );
}

.wk-rubriekkop a {
	color: inherit;
	text-decoration: none;
}

/* Article cards: white card, image on top, italic headline — like the current
   site, but built from the Query Loop instead of being filled in by hand. */
.wk-kaart,
.wk-strook .wp-block-post {
	background: var( --wp--preset--color--wit );
	border: 1px solid var( --wp--preset--color--lijn );
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.wk-strook .wp-block-post > * {
	margin-inline: var( --wp--preset--spacing--30 );
}

.wk-strook .wp-block-post > .wp-block-post-featured-image {
	margin-inline: 0;
}

.wk-strook .wp-block-post-title {
	font-style: italic;
	font-size: var( --wp--preset--font-size--groot );
	line-height: 1.25;
	text-wrap: balance;
}

.wk-strook .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wk-strook .wp-block-post-title a:hover {
	text-decoration: underline;
}

.wk-strook .wp-block-post-excerpt {
	font-size: var( --wp--preset--font-size--klein );
	color: var( --wp--preset--color--grijs );
}

.wk-strook .wp-block-post:last-child > :last-child {
	margin-bottom: var( --wp--preset--spacing--30 );
}

/* -----------------------------------------------------------------------------
   4. FRONT PAGE LAYOUT
   One large lead article with smaller ones next to it, just like the top half
   of a printed front page.
   -------------------------------------------------------------------------- */

.wk-voorpagina {
	display: grid;
	gap: var( --wp--preset--spacing--40 );
	grid-template-columns: 1fr;
}

@media ( min-width: 56rem ) {
	.wk-voorpagina {
		grid-template-columns: 1.6fr 1fr;
		align-items: start;
	}
}

.wk-opening .wp-block-post-title {
	font-size: var( --wp--preset--font-size--kop-groot );
	font-style: normal;
	line-height: 1.1;
}

/* -----------------------------------------------------------------------------
   4b. SIDEBAR
   Narrow column on the right: first other articles from the same section, then
   the latest posts. Both blocks can be edited in the Site Editor via
   Patterns > Template Parts > Sidebar.
   -------------------------------------------------------------------------- */

.wk-zijbalk {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--40 );
	font-size: var( --wp--preset--font-size--klein );
}

.wk-zijbalkkop {
	margin: 0 0 var( --wp--preset--spacing--20 );
	padding-bottom: 0.4rem;
	border-bottom: 3px solid var( --wp--preset--color--krant-groen );
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--groot );
	font-weight: 700;
	text-transform: lowercase;
}

/* Compact row: small square image next to the headline. A full card is too
   bulky in a 27% column. */
.wk-lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wk-lijst__item + .wk-lijst__item {
	border-top: 1px solid var( --wp--preset--color--lijn );
}

.wk-lijst__link {
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: 0.8rem;
	align-items: start;
	padding-block: 0.7rem;
	text-decoration: none;
	color: inherit;
}

.wk-lijst__link:hover .wk-lijst__titel {
	text-decoration: underline;
}

.wk-lijst__link .wk-beeld {
	width: 5rem;
}

/* Rows without an image let the text take the full width. */
.wk-lijst__link:not( :has( .wk-beeld ) ) {
	grid-template-columns: 1fr;
}

.wk-lijst__tekst {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.wk-lijst__titel {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 700;
	line-height: 1.25;
	text-wrap: balance;
}

.wk-lijst__meta {
	font-family: var( --wp--preset--font-family--ui );
	font-size: 0.8em;
	color: var( --wp--preset--color--grijs );
}

/* The Query Loop in the sidebar gets the same compact rows without the
   editors having to set anything up for it. */
.wk-zijbalk .wp-block-post-template {
	gap: 0;
}

.wk-zijbalk .wp-block-post {
	padding-block: 0.7rem;
	border: 0;
	border-radius: 0;
	background: none;
}

.wk-zijbalk .wp-block-post + .wp-block-post {
	border-top: 1px solid var( --wp--preset--color--lijn );
}

.wk-zijbalk .wp-block-post > * {
	margin-inline: 0;
}

.wk-zijbalk .wp-block-post-title {
	font-size: 1em;
	font-style: normal;
	line-height: 1.25;
	margin: 0;
}

.wk-zijbalk .wp-block-post-date {
	font-size: 0.8em;
}

/* -----------------------------------------------------------------------------
   5. ARTICLE PAGE
   -------------------------------------------------------------------------- */

.wk-artikel__bovenregel {
	font-family: var( --wp--preset--font-family--ui );
	font-size: var( --wp--preset--font-size--klein );
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --wp--preset--color--krant-groen-donker );
}

.wk-artikel__byline {
	font-family: var( --wp--preset--font-family--ui );
	font-size: var( --wp--preset--font-size--klein );
	color: var( --wp--preset--color--grijs );
}

/* -----------------------------------------------------------------------------
   READING WIDTH
   One place where the width of the text column comes from: contentSize in
   theme.json. Do NOT set a second limit here (such as max-width in ch) — then
   the narrower of the two always wins and a change in theme.json does nothing.

   The value there is clamp( 48rem, 78vw, 66rem ):
     48rem  lower bound, well above the 78ch you wanted as a minimum
     78vw   grows with the window
     66rem  upper bound, so lines do not become endless on a wide screen
   -------------------------------------------------------------------------- */

.entry-content,
.wk-pagina .wp-block-post-content {
	max-width: var( --wp--style--global--content-size );
	margin-inline: auto;
}

/* Larger intro sentence, like the lead in the newspaper. */
.entry-content > p:first-of-type {
	font-size: var( --wp--preset--font-size--groot );
	line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   ACCESSIBILITY
   Some of the readers are elderly. These rules cost nothing and make a big difference.
   -------------------------------------------------------------------------- */

.entry-content {
	font-size: clamp( 1.05rem, 0.98rem + 0.35vw, 1.25rem );
	line-height: 1.65;
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* -----------------------------------------------------------------------------
   6. EDITION PAGE
   The whole issue on one web page: this is what makes the site an online
   newspaper instead of a blog.
   -------------------------------------------------------------------------- */

.wk-editiekop {
	display: grid;
	gap: var( --wp--preset--spacing--40 );
	align-items: center;
	grid-template-columns: 1fr;
	padding-block: var( --wp--preset--spacing--40 );
	border-bottom: 3px solid var( --wp--preset--color--inkt );
}

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

.wk-editiekop img {
	width: 100%;
	height: auto;
	box-shadow: 0 2px 14px rgba( 0, 0, 0, 0.18 );
}

/* -----------------------------------------------------------------------------
   6a. INFORMATION PAGES
   Board, contact, useful information, neighbourhood budget, points of attention.
   These pages are built from core blocks; below is only what those blocks
   do not handle themselves.
   -------------------------------------------------------------------------- */

.wk-paginakop {
	margin-bottom: 0.4em;
}

/* Introductory paragraph: larger than the rest, like the lead in the newspaper. */
.wk-pagina-lead {
	font-size: var( --wp--preset--font-size--groot );
	line-height: 1.5;
	margin-bottom: var( --wp--preset--spacing--50 );
}

/* Portrait next to the text for a board member. */
.wk-persoon {
	margin-block: var( --wp--preset--spacing--50 );
}

.wk-persoon .wp-block-media-text__media img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: var( --wk-focus, 50% 40% );
}

.wk-persoon h2 {
	margin: 0 0 0.15em;
}

.wk-persoon .wk-rol {
	margin: 0 0 0.8em;
	font-family: var( --wp--preset--font-family--ui );
	font-size: var( --wp--preset--font-size--klein );
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --wp--preset--color--krant-groen-donker );
}

/* Panel with a short list of links or a step in a procedure. */
.wk-infoblok {
	height: 100%;
}

.wk-infoblok h2,
.wk-infoblok h3 {
	margin: 0 0 0.5em;
	font-size: clamp( 1rem, 1.25vw, 1.15rem );
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-family: var( --wp--preset--font-family--ui );
	color: var( --wp--preset--color--krant-groen-donker );
}

.wk-infoblok ul {
	margin: 0;
	padding-left: 1.1em;
}

.wk-infoblok li + li {
	margin-top: 0.4em;
}

.wk-infoblok p:last-child {
	margin-bottom: 0;
}

/* Numbered point of attention. The number is in green, not in the blue
   of the old site. */
.wk-punt h3 {
	margin: 0 0 0.3em;
	font-size: clamp( 1.15rem, 1.6vw, 1.5rem );
	color: var( --wp--preset--color--krant-groen-donker );
}

.wk-punt p {
	margin: 0;
}

/* Placeholder for a form that is still to come. Only visible while the page
   is a draft; remove the block as soon as the real form is in place. */
.wk-formulierplek {
	border: 2px dashed var( --wp--preset--color--krant-groen );
	border-radius: 4px;
	color: var( --wp--preset--color--grijs );
	text-align: center;
}

/* -----------------------------------------------------------------------------
   6b. FIXED SECTIONS AT THE BOTTOM
   Four coloured panels that return in every printed edition and are therefore
   on every page of the site. Colours come from the palette in theme.json, so
   another client puts in their own colours without opening this file.
   -------------------------------------------------------------------------- */

.wk-voetblokken__rij {
	gap: 0;
}

.wk-voetblok {
	font-size: var( --wp--preset--font-size--klein );
	line-height: 1.55;
}

.wk-voetblok__kop {
	margin: 0 0 0.6em;
	font-family: var( --wp--preset--font-family--ui );
	font-size: clamp( 1rem, 1.25vw, 1.15rem );
	font-weight: 600;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.wk-voetblok p {
	margin: 0;
}

/* Links inside a coloured panel take on the text colour; the green from the
   global styles is unreadable there (especially on the dark blue panel). */
.wk-voetblok a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wk-voetblok a:hover {
	text-decoration: none;
}

/* Long e-mail addresses and URLs may break in a narrow column. */
.wk-voetblok p {
	overflow-wrap: anywhere;
}

.wk-onderbalk {
	padding-block: var( --wp--preset--spacing--30 );
	border-top: 1px solid var( --wp--preset--color--lijn );
	color: var( --wp--preset--color--grijs );
}

.wk-onderbalk p {
	margin: 0;
}

/* -----------------------------------------------------------------------------
   7. PRINT
   Readers print articles. Let them do that neatly.
   -------------------------------------------------------------------------- */

@media print {
	.wk-kop,
	.wk-rubrieknav,
	.wp-block-navigation,
	.wp-block-post-comments-form,
	footer {
		display: none !important;
	}

	body {
		font-size: 11pt;
		background: #fff;
	}

	a[href^="http"]::after {
		content: " (" attr( href ) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}


/* =============================================================================
   ACCESSIBILITY: COLOUR CORRECTIONS FOR THIS THEME
   Up to Wijkkrant Core 1.0.0 these rules lived in the plugin (toegankelijkheid.css).
   They are corrections to this theme's colours, so they belong here.
   This is the SAFETY NET. The proper fix: the same
   colours in theme.json and in the setting for the top menu colour. Once that
   is done, the rules under "1. Contrast" can go.

   Measured contrasts (against paper #FBFAF7 / white #FFFFFF):
     old green-dark #4B8A2A         4.05 / 4.23  ✗ (norm 4.5)
     new            #3B7320         5.50 / 5.74  ✓  (on green-light 4.72 ✓)
     white on header green #6EB448  2.53         ✗
     ink on header green #6EB448    6.81         ✓
     white on green-mid #88B954     2.30         ✗
     ink on green-mid               7.49         ✓
     red #C63734 on peach           4.30         ✗  →  #A82D2A 5.60 ✓
   ========================================================================== */

:root:root {
	--wk-a11y-groen: #3B7320;
	--wk-a11y-focus: var( --wp--preset--color--inkt, #1B1B18 );
	/* Same name as the theme colour: all links/headings in green-dark
	   become legible in one go. Fix this for good in theme.json. */
	--wp--preset--color--krant-groen-donker: #3B7320;
}


/* -----------------------------------------------------------------------------
   1. Contrast (WCAG 1.4.3 text, 1.4.11 non-text)
   -------------------------------------------------------------------------- */

/* Links and section labels in the old green-dark. */
a[rel="tag"],
.wk-kaart__titel a,
.wp-block-post-title a,
.wk-artikel__bovenregel a {
	color: var( --wk-a11y-groen );
}

.wk-kaart__rubriek {
	opacity: 1; /* was 0.7 → too little contrast */
	color: var( --wp--preset--color--grijs, #6B6B64 );
}

/* Newspaper header: text in ink on the light green. The wordmark
   ("Binnenstadskrant") is a logo and falls outside the contrast requirement. */
.wk-kop .wk-topmenu__link,
.wk-kop .wk-topmenu__scheiding,
.wk-kop .wk-kopknop,
.wk-kop .wk-kopknop:hover,
.wk-kop .wk-kopknop:focus-visible,
.wk-kop .wk-kopknop[aria-expanded="true"],
.wk-kop .wk-rubrieknav a,
.wk-kop .wk-hoofdmenu__link {
	color: var( --wp--preset--color--inkt, #1B1B18 );
}

.wk-kop .wk-topmenu__scheiding {
	opacity: 1;
}

/* Rail arrows: dark circle with white arrow = 1.4.11 ≥ 3:1. */
.wk-kop .wk-rail__knop {
	background: rgba( 27, 27, 24, 0.72 );
	color: #fff;
}

/* Footer block "Over Arnhem 6811": white on green-mid (2.3:1) → ink. */
.has-krant-groen-mid-background-color,
.has-krant-groen-mid-background-color .has-wit-color,
.has-krant-groen-mid-background-color a {
	color: var( --wp--preset--color--inkt, #1B1B18 ) !important;
}

/* Heading "Wijkmanager …": green-mid on green-light (1.9:1). */
.has-krant-groen-mid-color {
	color: var( --wk-a11y-groen ) !important;
}

/* Heading "Overlast? Meld het altijd!": red on peach (4.3:1). */
.has-paneel-rood-color {
	color: #A82D2A !important;
}

/* A white ring on dark panels. */
.has-paneel-blauw-background-color :focus-visible,
.has-inkt-background-color :focus-visible {
	outline-color: #fff;
}

/* Kicker from the newspaper, above the title; meta wk_bovenkop from the Inlezer.
   A paragraph and not a heading, so the h1 remains the first heading of the article. */
.wk-artikel__bovenkop {
	margin: 0 0 0.25rem;
	font-weight: 700;
	font-size: clamp( 1rem, 0.9rem + 0.4vw, 1.25rem );
	line-height: 1.25;
}

.wk-artikel__bovenkop:empty {
	display: none;
}

/* "Toon meer" below a section, tag or search list: archived posts (Wijkkrant Core, module Archief). */
.wk-archief-meer {
	margin-top: var(--wp--preset--spacing--40);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.wk-archief-meer__uitleg {
	color: var(--wp--preset--color--grijs, #6b6b64);
	font-size: 0.9em;
}

/* Default image for posts without a featured image (functions.php, section 5): the drawing in the bottom right
   corner, as high as the area; the rest of the area has the same colour as the drawing's background. */
.wk-geen-foto {
	overflow: hidden;
}

.wk-geen-foto__vlak {
	display: block;
	width: 100%;
	height: 100%;
}

.wk-geen-foto__vlak {
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: auto 100%;
}

/* In lists the photo sits directly on top of the section label, like the placeholder of a post without photo.
   WordPress gives every <figure> 1em of space below it (:where(figure)); the placeholder is a <div> without it,
   so with a photo the label sat 18 px lower than without. */
.wp-block-post-template .wp-block-post-featured-image {
	margin-top: 0;
	margin-bottom: 0;
}