/*
Theme Name: DBLA
Theme URI: https://alligatordesign.click/
Author: Alligator Design (Geert Valère Allegaert)
Author URI: https://alligatordesign.click/
Description: Theme for Dutch Business Lawyers Abroad (dbla.nl), built on the Alligator base theme: calm, fast, versatile and plugin-free websites built to last — no tracking scripts, no third-party bloat. Created and maintained by Alligator Design. This theme never receives updates from wordpress.org.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0.263
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alligator
Update URI: https://alligatordesign.click/alligator-theme
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, sticky-post, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* ============================================================
   Sticky footer — the footer sits at the bottom of the window on a
   page that is shorter than the screen, and simply follows the content
   on a page that is longer. Added 4 Oct 2026, for every site.

   How it works: WordPress wraps everything in .wp-site-blocks, whose
   children are the header, the main element and the footer. Making
   that wrapper a vertical flex container and letting <main> take the
   leftover space pushes the footer down. The rule is tied to <main>
   and not to a child count, so a template with an extra top-level
   block keeps working.

   100dvh rather than 100vh: on a phone, 100vh is the height of the
   window with the browser chrome hidden, which is taller than what you
   can actually see, so a short page would hide the footer below the
   fold — the opposite of the intention. 100vh stays as the fallback
   for the few browsers that do not know dvh.
   ============================================================ */
html {
	min-height: 100%;
}
body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
}
/* Logged in, WordPress pushes the whole document down by the height of its
   admin bar (html { margin-top: 32px !important }). Without this the page
   would be exactly that much too tall for the window and scroll by a sliver
   — which only you would ever see, every single day. */
body.admin-bar {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}
@media screen and (max-width: 782px) {
	body.admin-bar {
		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/* ============================================================
   Alligator Carousel — scroll-snap, no JavaScript, no plugin.
   Usage: add the class "alligator-carousel" to a Group block
   that contains a Gallery block (or insert the ready-made
   pattern: Alligator → Carousel).
   ============================================================ */
.alligator-carousel .wp-block-gallery.has-nested-images {
	display: flex;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	padding-block-end: 0.75rem; /* room for the scrollbar */
}
.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex: 0 0 85% !important;
	width: 85% !important;
	scroll-snap-align: center;
	margin: 0;
}
.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 782px) {
	.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image {
		flex-basis: 45% !important;
		width: 45% !important;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.alligator-carousel .wp-block-gallery.has-nested-images {
		scroll-behavior: smooth;
	}
}
/* ============================================================
   Alligator sticky header — position, glass, edge.
   ============================================================ */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* Header hide-on-scroll (variant B): assets/js/header-hide.js sets an
   inline "top" (minus the header's own height) when you scroll down past
   the first screen and clears it the moment you scroll up. Only "top"
   moves — never "transform", which would break the fixed mobile-menu
   overlay. Without JavaScript the header simply stays sticky. */
header.wp-block-template-part {
	transition: top 0.35s ease;
}
header.wp-block-template-part:has(.is-menu-open) {
	top: var(--wp-admin--admin-bar--height, 0px) !important;
}
/* ============================================================
   Alligator edge shadows — header casts down, footer casts up.
   One token, two directions, always in sync.
   ============================================================ */
:root {
	--alligator-edge-shadow: 24px rgb(0 0 0 / 0.08);
}

footer.wp-block-template-part {
	box-shadow: 0 -8px var(--alligator-edge-shadow);
}

.alligator-languages strong { opacity: 0.5; }

/* ============================================================
   Alligator mono — systeemstack, geen bestanden, geen download.
   ============================================================ */
code, kbd, pre, samp {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.9em;
}

/* ============================================================
   Alligator taalswitch.
   ============================================================ */
.alligator-languages { font-size: 0.85em; letter-spacing: 0.05em; }
.alligator-languages--dropdown { position: relative; }
.alligator-languages--dropdown summary {
	cursor: pointer;
	list-style: none; /* geen driehoekje */
}
.alligator-languages--dropdown summary::after { content: " ▾"; font-size: 0.8em; }
.alligator-languages--dropdown nav {
	position: absolute;
	right: 0;
	background: var(--wp--preset--color--base);
	box-shadow: 0 8px var(--alligator-edge-shadow);
	padding: 0.5rem 0.9rem;
	display: grid;
	gap: 0.4rem;
	z-index: 101; /* boven de sticky header-inhoud */
}

/* ============================================================
   Alligator image protection — opt-in via class, geen echte
   beveiliging, enkel een drempel tegen de occasionele rechtsklik.
   ============================================================ */
.alligator-protect-image,
.alligator-protect-image img {
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

/* ============================================================
   Alligator Previous/Next nav bar — see alligator_render_prevnext_nav()
   in functions.php. Not wired to any template by default; opt in per
   project. Uses theme preset colors, so it follows the active style
   variation automatically.
   ============================================================ */
.alligator-prevnext {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
}
.alligator-prevnext__link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-decoration: none;
	color: inherit;
	max-width: 45%;
}
.alligator-prevnext__link--next {
	text-align: right;
	margin-left: auto;
}
.alligator-prevnext__label {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}
.alligator-prevnext__title {
	font-size: 1.05rem;
}
a.alligator-prevnext__link:hover .alligator-prevnext__title {
	color: var(--wp--preset--color--accent-1, currentColor);
}
.alligator-prevnext__link--disabled {
	opacity: 0.35;
	cursor: default;
}

/* ============================================================
   Alligator signup form — see [alligator_signup_form] shortcode and
   the honeypot/overlay-feedback pattern in functions.php. Not enqueued
   or shown anywhere until a project actually places the shortcode.
   ============================================================ */
.alligator-signup-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}
.alligator-signup-form input[type="email"] {
	flex: 1 1 16rem;
	padding: 0.6rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	border-radius: 0.5rem;
}
.alligator-signup-form button {
	padding: 0.6rem 1.4rem;
	border-radius: 0.5rem;
	border: none;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.alligator-signup-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	opacity: 0;
	transition: opacity 0.35s ease;
}
.alligator-signup-overlay.is-open {
	opacity: 1;
}
.alligator-signup-card {
	position: relative;
	max-width: 28rem;
	padding: 2rem 2.25rem;
	background: var(--wp--preset--color--base);
	border-radius: 0.75rem;
	box-shadow: 0 16px 48px rgb(0 0 0 / 0.25);
	transform: translateY(8px);
	transition: transform 0.35s ease;
}
.alligator-signup-overlay.is-open .alligator-signup-card {
	transform: translateY(0);
}
.alligator-signup-card--error {
	border-top: 3px solid #b32d2e;
}
.alligator-signup-card--success {
	border-top: 3px solid var(--wp--preset--color--accent-1, #2d7a3e);
}
.alligator-signup-overlay__close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: 0.6;
}
.alligator-signup-overlay__close:hover {
	opacity: 1;
}

/* ============================================================
   Alligator one-pager — section backgrounds + reveal-on-scroll.
   Origin: the look & feel of the Carrd version of alligatordesign
   (subtle wave/plus textures, content sliding in from the right).
   Usage: give a full-width Group block one of the background classes
   and, optionally, "alligator-reveal" (the whole group slides in) or
   "alligator-reveal-children" (its direct children slide in one after
   another). Script: assets/js/reveal.js — content is always visible
   without JavaScript, and never moves for prefers-reduced-motion.
   ============================================================ */

/* Two textures, straight from the Carrd site: a sparse "plus" pattern on
   a warm base, and soft waves on white. Both are inline SVG (one request
   less) and light: green pluses at 16%, clay waves at 14% opacity. */
.alligator-bg-plus {
	background-color: var(--wp--preset--color--base, #FFFBF7);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1024 1024%22 width=%221024%22 height=%221024%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bstroke-linecap:square%3Bstroke-width:7px%3Bstroke:rgba(58,122,14,0.16)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M 256 192 L 256 320 M 192 256 L 320 256%22/%3E%3Cpath d=%22M 768 704 L 768 832 M 704 768 L 832 768%22/%3E%3C/svg%3E");
	background-size: 221px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
}
.alligator-bg-waves {
	background-color: var(--wp--preset--color--accent-5, #FFFFFF);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22 width=%22512%22 height=%22512%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bfill:none%3Bstroke-width:6px%3Bstroke:rgba(181,86,31,0.14)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M0,448c128,0,128-128,256-128s128,128,256,128%22/%3E%3Cpath d=%22M0,192c128,0,128-128,256-128s128,128,256,128%22/%3E%3C/svg%3E");
	background-size: 282px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
}

/* Deep section: dark green with light text and faint white waves —
   the contrast beat between the light sections. */
.alligator-bg-deep {
	background-color: var(--wp--preset--color--accent-3, #234A11);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22 width=%22512%22 height=%22512%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bfill:none%3Bstroke-width:6px%3Bstroke:rgba(255,255,255,0.10)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M0,448c128,0,128-128,256-128s128,128,256,128%22/%3E%3Cpath d=%22M0,192c128,0,128-128,256-128s128,128,256,128%22/%3E%3C/svg%3E");
	background-size: 282px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
	color: var(--wp--preset--color--base, #F4F8EE);
}
.alligator-bg-deep h1,
.alligator-bg-deep h2,
.alligator-bg-deep h3,
.alligator-bg-deep .alligator-label,
.alligator-bg-deep .alligator-muted,
.alligator-bg-deep .alligator-top a {
	color: inherit;
}
.alligator-bg-deep .alligator-label,
.alligator-bg-deep .alligator-muted {
	opacity: 0.75;
}
.alligator-bg-deep a {
	color: inherit;
}

/* Reveal: hidden state is only applied once the script has confirmed it
   runs (html.alligator-js) — so without JS nothing is ever invisible. */
.alligator-js .alligator-reveal,
.alligator-js .alligator-reveal-children > * {
	opacity: 0;
	transform: translateX(3rem);
	transition: opacity 0.75s ease 0.125s, transform 0.75s ease 0.125s;
	will-change: opacity, transform;
}
.alligator-js .alligator-reveal.is-visible,
.alligator-js .alligator-reveal-children.is-visible > * {
	opacity: 1;
	transform: none;
	will-change: auto;
}
/* Children arrive one after another (Carrd's "stagger: 125"). */
.alligator-js .alligator-reveal-children.is-visible > :nth-child(2) { transition-delay: 0.25s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(3) { transition-delay: 0.375s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(4) { transition-delay: 0.5s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(5) { transition-delay: 0.625s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(n+6) { transition-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
	.alligator-js .alligator-reveal,
	.alligator-js .alligator-reveal-children > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Small typographic helpers used by the one-pager pattern. */
.alligator-label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4, #807D7A);
}
.alligator-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}
.alligator-muted {
	color: var(--wp--preset--color--accent-4, #807D7A);
}
/* ============================================================
   Alligator pull quote — magazine style. One sentence lifted out of the
   text, set large, hanging into the margin with the body text flowing
   around it. Use the core "Pull quote" block and give it left or right
   alignment in the toolbar; without an alignment it centres in the
   column, which is the safe fallback for narrow screens.

   The breakout is done with a negative margin that grows with the
   viewport: at 60rem the quote leans a little into the white space, on a
   wide screen it sits almost entirely in the margin. Below 60rem there
   is no margin to hang in, so the float is dropped entirely — a floated
   quote on a phone would leave a two-word-wide column beside it.

   Convention: a pull quote REPEATS a sentence from the text around it.
   It is a signpost for whoever is scanning, not new information.
   ============================================================ */
.wp-block-pullquote,
.alligator-pull {
	margin-block: var(--wp--preset--spacing--60);
}
.wp-block-pullquote blockquote {
	margin: 0;
}
.wp-block-pullquote p,
.alligator-pull {
	margin: 0;
	/* Light and italic rather than bold: at this size weight shouts, and a
	   quote should invite rather than interrupt. Atkinson is a variable
	   font, so weight 300 and italic cost no extra file — the page still
	   loads only two typefaces. (Fraunces was tried here and dropped: too
	   much character for a quiet page.) */
	font-family: var(--wp--preset--font-family--readex);
	font-weight: 300;
	font-style: italic;
	/* Between the body text and the x-large preset: big enough to read as a
	   highlight, small enough to stay comfortable in a narrow floating
	   column. Fluid, so it never overwhelms a phone. */
	font-size: clamp(1.5rem, 1.15rem + 0.9vw, 1.85rem);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast, currentColor);
	text-wrap: balance;
}
/* A light box instead of a rule: it holds the quote together as an object
   on the page, which a floating block needs, and the tinted ground keeps
   it from reading as a form field. Kept deliberately soft — a hard border
   would compete with the text it is quoting. */
.wp-block-pullquote,
.alligator-pull {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1, currentColor) 28%, transparent);
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1, currentColor) 5%, transparent);
}
.wp-block-pullquote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--readex);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent-4, currentColor);
}
/* The attribution line is set off with an em dash, added here rather than typed
   into the content: it stays out of the XML export and out of what a screen
   reader reads as text, and every pull quote on every site gets it for free. */
.wp-block-pullquote cite::before {
	content: "\2014\00a0";
}
/* No alignment: centred in the column. */
.wp-block-pullquote:not(.alignleft):not(.alignright),
.alligator-pull:not(.alignleft):not(.alignright) {
	text-align: center;
}

/* Narrow screens: no floating at all. An aligned quote is reset to the full
   column and centred, exactly like an unaligned one — a floating block beside
   a phone column would leave a ribbon of two words. */
@media (max-width: 65.99rem) {
	.wp-block-pullquote.alignleft,
	.wp-block-pullquote.alignright,
	.alligator-pull.alignleft,
	.alligator-pull.alignright {
		float: none;
		width: auto;
		max-width: 100%;
		margin-inline: 0;
		text-align: center;
	}
}

/* From 66rem there is room for a float AND a readable column beside it.
   The rule behind every step below: whatever the quote takes from the
   42rem text column, at least 24rem of text must remain — about eleven
   words a line, the point where prose still reads as prose. So the quote
   grows only as fast as the margin it can hang in. */
@media (min-width: 66rem) {
	.wp-block-pullquote.alignright,
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignright,
	.alligator-pull.alignleft {
		width: min(20rem, 45%);
		text-align: left;
		margin-block: 0.4rem 1.8rem;
	}
	.wp-block-pullquote.alignright,
	.alligator-pull.alignright {
		float: right;
		margin-left: 2.25rem;
		margin-right: -5rem;
	}
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignleft {
		float: left;
		margin-right: 2.25rem;
		margin-left: -5rem;
	}
}

@media (min-width: 80rem) {
	.wp-block-pullquote.alignright,
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignright,
	.alligator-pull.alignleft {
		width: min(22rem, 45%);
	}
	.wp-block-pullquote.alignright,
	.alligator-pull.alignright {
		margin-right: -9rem;
	}
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignleft {
		margin-left: -9rem;
	}
}

@media (min-width: 95rem) {
	.wp-block-pullquote.alignright,
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignright,
	.alligator-pull.alignleft {
		width: min(24rem, 48%);
	}
	.wp-block-pullquote.alignright,
	.alligator-pull.alignright {
		margin-right: -13rem;
	}
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignleft {
		margin-left: -13rem;
	}
}

/* A heading never starts beside a floating quote. */
h2.wp-block-heading,
h3.wp-block-heading {
	clear: both;
}
/* On the dark section the green would disappear — inherit instead. */
.alligator-bg-deep .wp-block-pullquote p,
.alligator-bg-deep .alligator-pull {
	color: inherit;
}
.alligator-bg-deep .wp-block-pullquote,
.alligator-bg-deep .alligator-pull {
	border-color: color-mix(in srgb, currentColor 30%, transparent);
	background: color-mix(in srgb, currentColor 8%, transparent);
}

/* ============================================================
   Alligator typographic refinements — magazine details that make a page
   feel looked-after without anyone being able to say why.
   ============================================================ */

/* Hanging punctuation: quotation marks and dashes sit a fraction outside
   the column, so the left edge of the text looks straight instead of
   nibbled. Supported in Safari today, ignored elsewhere — a refinement
   that costs nothing when it is missing. */
html {
	hanging-punctuation: first last;
}

/* Abbreviations in small capitals: WCAG, PDF, CMS and their kind stop
   shouting in the middle of a sentence. Applies to <abbr> — which is
   also where the expansion belongs, in its title attribute. */
abbr {
	font-variant-caps: all-small-caps;
	letter-spacing: 0.04em;
	text-decoration: none;
}
abbr[title] {
	cursor: help;
	border-bottom: 1px dotted color-mix(in srgb, currentColor 35%, transparent);
}

/* Page metadata — "Last updated: …" on legal pages. Quieter and smaller than
   body text, so it reads as a note about the document rather than as part of
   it. Add the class to the paragraph: block sidebar → Advanced →
   Additional CSS class(es) → alligator-update. */
.alligator-update {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent-4, #807D7A);
}
/* An offer/work card: heading sits close to its text, cards far apart. */
.alligator-card > h3 {
	margin-block-end: 0.5rem;
}
.alligator-card > p:not(:last-child) {
	margin-block-end: 0.75rem;
}
.alligator-card p.alligator-muted {
	font-size: var(--wp--preset--font-size--small);
}
/* Email addresses from [alligator_email]. The plain class is the DEFAULT and
   deliberately quiet: in body text an address should run along with the
   sentence, not shout. Only a long address gets permission to break. */
.alligator-email a {
	word-break: break-word;
}
/* The display version — [alligator_email size=big] — for a contact section
   where the address IS the call to action. The class also works by hand on a
   paragraph, for an address typed without the shortcode. */
.alligator-email--big a,
p.alligator-email--big a {
	font-family: var(--wp--preset--font-family--readex);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.02em;
	text-decoration: none;
}
.alligator-email--big a:hover {
	text-decoration: underline;
}
/* The mascot: never wider than its column, gently scaled. */
.alligator-mascot img {
	width: clamp(72px, 12vw, 120px);
	height: auto;
}

/* Kop naar beneden, bijvoorbeeld als de tekening naar de tekst eronder moet
   wijzen. Een halve draai en geen spiegeling: spiegelen keert de krul van de
   staart om, en dat valt op. */
.alligator-mascot--down img {
	transform: rotate(180deg);
}

/* ============================================================
   Alligator header nav — focus without the tall black bars.
   Mouse/touch focus shows nothing (that was the complaint: the
   browser's default outline drawn as vertical bars on inline links);
   keyboard focus (:focus-visible) shows a clear, rounded ring in the
   accent colour, so Tab-navigation always stays visible. WCAG 2.4.7.
   ============================================================ */
.alligator-hs-nav-desktop a:focus {
	outline: none;
	box-shadow: none;
}
.alligator-hs-nav-desktop a:focus-visible,
.alligator-hs-site-title:focus-visible,
.alligator-hs-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1, currentColor);
	outline-offset: 0.25em;
	border-radius: 0.25em;
}

/* ============================================================
   Alligator header (simple / one-pager) — layout of the flat HTML
   headers in patterns/header-simple.php and patterns/header-onepager.php.
   Lived in the Site Editor's "Extra CSS" (database) until 13 Sep 2026;
   now in the theme, so every clone and fresh install gets it.
   Position, glass and hide-on-scroll: see "Alligator sticky header".
   ============================================================ */
.alligator-site-header-simple {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem;
	min-height: 4.5rem;
	max-width: var(--wp--style--global--wide-size, 72rem);
	margin-inline: auto;
	padding-block: 0.75rem;
	padding-inline: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--medium);
}
.alligator-hs-brand {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}
.alligator-hs-site-title {
	font-family: var(--wp--preset--font-family--readex);
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-decoration: none;
	color: var(--wp--preset--color--contrast, currentColor);
	white-space: nowrap;
}
.alligator-hs-site-title:hover {
	color: var(--wp--preset--color--accent-1, currentColor);
}
.alligator-hs-middle {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1.5rem;
	min-width: 0;
}
.alligator-hs-nav-desktop {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
}
.alligator-hs-nav-desktop a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast, inherit);
	padding-block: 0.25rem;
	font-family: var(--wp--preset--font-family--readex);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.01em;
}
.alligator-hs-nav-desktop a:hover {
	color: var(--wp--preset--color--contrast, inherit);
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-color: var(--wp--preset--color--accent-1, currentColor);
}
.alligator-hs-cta {
	display: inline-block;
	padding: 0.55rem 1.3rem;
	border-radius: 2rem;
	/* Outlined, in the brand colour: the header stays two-tone (contrast +
	   accent-1); the filled clay button is reserved for the page itself. */
	border: 1.5px solid var(--wp--preset--color--accent-1, currentColor);
	background: transparent;
	color: var(--wp--preset--color--accent-1, currentColor);
	font-family: var(--wp--preset--font-family--readex);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.alligator-hs-cta:hover {
	background: var(--wp--preset--color--accent-1, currentColor);
	color: var(--wp--preset--color--base, #fff);
}
/* The hamburger (wp:navigation, header-simple only) is a phone thing. */
.alligator-nav-simple-mobile {
	display: none;
}
@media (max-width: 781px) {
	/* header-simple: hide the inline nav, show the hamburger next to the logo. */
	.alligator-site-header-simple:not(.alligator-site-header-onepager) .alligator-hs-middle {
		display: none;
	}
	.alligator-site-header-simple:not(.alligator-site-header-onepager) .alligator-nav-simple-mobile {
		display: block;
	}
	/* header-onepager: no hamburger — the nav wraps onto a second row. */
	.alligator-site-header-onepager {
		grid-template-columns: 1fr auto;
		row-gap: 0.5rem;
	}
	.alligator-site-header-onepager .alligator-hs-middle {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}
	.alligator-site-header-onepager .alligator-hs-nav-desktop {
		font-size: var(--wp--preset--font-size--small);
		gap: 0.25rem 1rem;
	}
}

/* ============================================================
   Alligator in-page navigation helpers (one-pager).
   ============================================================ */
/* Jumping to a section lands on its top edge, flush with the top of the
   window: the texture of the section you are going to starts exactly where
   the window starts, with no sliver of the previous one left above it.
   No allowance is made for the header, for two reasons: it hides itself on
   the way down (so any allowance would show up as an empty strip), and
   every section carries enough padding of its own to keep its heading clear
   of the header on the way up. Other anchor targets — a heading inside an
   article, say — do need the allowance, hence the second rule. */
section.wp-block-group[id] {
	scroll-margin-top: 0;
}

:where(h1, h2, h3, h4)[id],
.wp-block-group:not(section)[id] {
	scroll-margin-top: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
/* Losse blokken tekst die iets groter en rustiger mogen staan dan de
   lopende tekst — bijvoorbeeld de afgesloten projecten onder "Earlier work".
   Zet de class op de Group (blok → Geavanceerd → Extra CSS-class), niet op
   elke alinea apart: dan blijft de opmaak uit de inhoud, en verandert ze mee
   als de typografie van de site ooit verandert. */
.alligator-note-large p {
	font-size: 1.35rem;
	line-height: 1.3;
}

@media (max-width: 47.99rem) {
	.alligator-note-large p {
		font-size: 1.15rem;
	}
}

/* Small "↑ Top" link at the end of a section. */
.alligator-top {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.alligator-top a {
	text-decoration: none;
	color: var(--wp--preset--color--accent-4, currentColor);
	padding: 0.5rem 0.9rem;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 2rem;
}
.alligator-top a:hover,
.alligator-top a:focus-visible {
	color: var(--wp--preset--color--contrast, currentColor);
	border-color: currentColor;
}

/* ============================================================
   DBLA — text pages (Disclaimer, Colofon, Landen, Publicaties).
   The site's block spacing is 0, as on dbla.nl: the imported Raft pages
   carry their own spacing (Spacers, padding), also the country pages. A text
   page is recognised by a Title block as its first block; it gets space under
   the header, above the footer and between its blocks back.
   ============================================================ */
body.page .wp-block-post-content:has(> .wp-block-post-title:first-child) {
	padding-block-end: var(--wp--preset--spacing--70);
}
body.page .wp-block-post-content:has(> .wp-block-post-title:first-child) > * + * {
	margin-block-start: 1.2rem;
}
body.page .wp-block-post-content:has(> .wp-block-post-title:first-child) > :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--60);
}
/* A text page that continues with a full-width section (Landen): the title
   24px under the header, as on dbla.nl; the section brings its own spacing. */
body.page .wp-block-post-content:has(> .wp-block-post-title:first-child):has(> .alignfull) {
	padding-block-end: 0;
}
/* Landen: the Raft section carried its own copy of the texture (p6.webp,
   loaded from elsewhere) — that goes; the page's own texture shows through. */
body.page-parent .wp-block-post-content .alignfull.has-background:not([style*="background-color"]),
body.page .wp-block-post-content:has(> .wp-block-post-title:first-child) > .alignfull:not([style*="background-color"]) {
	background-image: none !important;
	background-color: transparent !important;
}
/* Landen gets the light texture of Waarom DBLA?, Netwerk and the blog,
   on the whole page (its own section stays transparent above). */
body.page-parent {
	background-color: #f7f7f7;
	background-image: url("assets/images/dbla-texture.webp");
	background-position: 50% 0;
}
body.page .wp-block-post-content:has(> .wp-block-post-title:first-child) > .alignfull {
	margin-block-start: 0;
}

/* ============================================================
   DBLA — "Juridische gids" accordion (inc/dbla.php), as on dbla.nl:
   items between thin lines, the heading in bold, an arrow on the right.
   ============================================================ */
.dbla-accordion__item {
	border-block: 1px solid var(--wp--preset--color--contrast);
	margin-block-start: -1px;
}
.dbla-accordion__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-block: 12px;
	cursor: pointer;
	list-style: none;
}
.dbla-accordion__header::-webkit-details-marker {
	display: none;
}
.dbla-accordion__header:focus-visible {
	outline-offset: 2px;
}
.dbla-accordion__arrow {
	flex: none;
	transition: transform 0.2s ease;
}
.dbla-accordion__item[open] .dbla-accordion__arrow {
	transform: rotate(180deg);
}
.dbla-accordion__panel {
	padding-block-end: 1.2rem;
}
.dbla-accordion__panel > * + * {
	margin-block-start: 1rem;
}
@media (prefers-reduced-motion: reduce) {
	.dbla-accordion__arrow { transition: none; }
}

/* ============================================================
   DBLA — one title, one place. Every page and every blog post shows its
   title in the same typeface, size and position as the country pages
   (the reference, and left untouched): 40px under the header
   (spacing 40 + spacing 30), Source Serif 4, H1 size. So the title
   doesn't jump when a visitor moves between pages.
   The page title is the Title block, or on the home page the first H1
   heading. The imported Raft pages put spacing (and Spacers) on the blocks
   around their title, each page differently; that is undone here. The
   space above the title is padding, not margin, so it stays inside a
   section with a background (Netwerk) instead of leaking out above it.
   Alignment (left, centre) stays as the page sets it.
   Country pages = children of Landen: body.page-child; every lawyer page
   (also Indonesië's two) carries .dbla-lawyer-page (inc/dbla.php, 14).
   ============================================================ */
:root {
	--dbla-title-top: calc(var(--wp--preset--spacing--40) + var(--wp--preset--spacing--30));
}
body:is(.page, .single) :is(h1.wp-block-heading, .wp-block-post-title:not(.wp-block-query *)) {
	font-family: var(--wp--preset--font-family--source-serif) !important;
	font-size: var(--wp--preset--font-size--xx-large) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
}
body.page:not(.page-child):not(.dbla-lawyer-page) .wp-block-post-content:has(:is(h1, .wp-block-post-title:not(.wp-block-query *))),
body.page:not(.page-child):not(.dbla-lawyer-page) .wp-block-post-content :not(.dbla-map, .dbla-map *, .dbla-home-intro):has(:is(h1, .wp-block-post-title:not(.wp-block-query *))) {
	padding-block-start: 0 !important;
	margin-block-start: 0 !important;
}
body.page:not(.page-child):not(.dbla-lawyer-page) .wp-block-post-content :is(.wp-block-spacer:has(~ :is(h1, .wp-block-post-title:not(.wp-block-query *))), .wp-block-spacer:has(~ :has(:is(h1, .wp-block-post-title:not(.wp-block-query *))))) {
	display: none;
}
/* (not the title of Home's introduction under the map: it has its own) */
body.page:not(.page-child):not(.dbla-lawyer-page) .wp-block-post-content :is(h1.wp-block-heading:not(.dbla-home-intro > h1), .wp-block-post-title:not(.wp-block-query *)) {
	margin-block: 0 var(--wp--preset--spacing--30) !important;
	padding-block: var(--dbla-title-top) 0 !important;
}

/* ============================================================
   DBLA — header as on dbla.nl: a light grey band (#EBEBEB, 96%) with a
   clear shadow, sticky, and it stays put while scrolling (no
   hide-on-scroll). Side spacing: in parts/header.html (spacing 60, 48px).
   ============================================================ */
header.wp-block-template-part {
	box-shadow: 6px 6px 9px 0 rgb(84 71 71 / 0.2);
}
/* (The header hides while scrolling down, on every page: see "the header
   on every page" near the end of this file.) */
header.wp-block-template-part::before {
	background-color: #ebebebf5;
	backdrop-filter: none;
}

/* ============================================================
   DBLA — blog. One build for the Weblog page (templates/page-weblog.html),
   every post (single.html) and the category pages (archive.html):
   the title "Weblog publicaties" with subtitle, content left (75%),
   parts/sidebar-blog.html right (25%). All blog pages carry
   .dbla-blog-heading; the rules below hang on that.
   ============================================================ */

/* Background: the light texture of Waarom DBLA? and Netwerk (Raft's
   p6.webp, an 8x8 tile of near-white greys). */
body:has(.dbla-blog-heading) {
	background-color: #f7f7f7;
	background-image: url("assets/images/dbla-texture.webp");
	background-position: 50% 0;
}

/* Width: as wide as the header (logo to LinkedIn). main has that one
   width and its contents fill it. */
:root {
	--dbla-page-width: calc(100vw - 2 * var(--wp--preset--spacing--60));
}
body:has(.dbla-blog-heading) main.wp-block-group {
	box-sizing: border-box;
	width: 100%;
	max-width: min(100%, var(--dbla-page-width)) !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
	/* Room between the last box (or the previous/next bar) and the footer. */
	padding-block-end: var(--wp--preset--spacing--70) !important;
}
body:has(.dbla-blog-heading) main.wp-block-group > :not(.dbla-blog-heading) {
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Title and subtitle, centred, in the place of every page title. */
.dbla-blog-heading,
.dbla-blog-heading > * {
	text-align: center;
}
.dbla-blog-title {
	font-family: var(--wp--preset--font-family--source-serif);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.2;
	margin-block: 0 calc(var(--wp--preset--spacing--30) / 2) !important;
	padding-block-start: var(--dbla-title-top);
}
.dbla-blog-title a {
	color: inherit;
	text-decoration: none;
}
.dbla-blog-title a:hover {
	color: var(--wp--preset--color--accent-1);
}
/* Subtitle under "Weblog publicaties" ("Sinds 2012"): small capitals
   with letter-spacing, centred, close under the title. */
p.dbla-subtitle {
	color: var(--wp--preset--color--accent-4) !important;
	font-family: var(--wp--preset--font-family--readex);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.6;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	text-align: center;
	margin-block-start: 0 !important;
}

/* The label just above the sidebar's white box ("Selecteer publicaties"):
   small capitals with letter-spacing, left-aligned on its box. */
.dbla-section-label {
	font-family: var(--wp--preset--font-family--readex);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-align: left !important;
}
/* In line with the text inside the box below it: the box's own inner
   spacing (content box 60, sidebar 40). */
.wp-block-column:has(> .dbla-content-box) > .dbla-section-label {
	padding-inline-start: var(--wp--preset--spacing--60) !important;
}
.wp-block-template-part:has(.dbla-blog-sidebar) > .dbla-section-label {
	padding-inline-start: var(--wp--preset--spacing--40) !important;
	/* Smaller, as before; the left white box starts level with its top. */
	font-size: 1rem;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-inline: 0 !important;
	min-height: calc(1.25rem * 1.5);
}
.dbla-section-label {
	color: var(--wp--preset--color--accent-4) !important;
	margin-block: 0 1rem !important;
}

/* Category pages: "Publicaties over België" / "Publicaties door …" as
   the title at the top of the white box, in the label's capitals.
   In the label's grey ink (accent-4), as before it moved into the box. */
.dbla-content-box > .dbla-box-title,
.dbla-box-head > .dbla-box-title {
	color: var(--wp--preset--color--accent-4) !important;
	font-family: var(--wp--preset--font-family--readex);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-block: 0 var(--wp--preset--spacing--40) !important;
}

/* The two columns: the left white box starts level with the top of the
   sidebar's label "Selecteer publicaties". */
.dbla-blog-layout {
	margin-block-start: var(--wp--preset--spacing--50);
	gap: var(--wp--preset--spacing--60);
}

/* Post list (Weblog page, category pages): title, excerpt, date and
   categories, a thin line between the posts. */
.dbla-post-list .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}
.dbla-post-item {
	padding-block: var(--wp--preset--spacing--40);
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
}
.dbla-post-item .wp-block-post-title {
	margin-block-end: 0.5rem;
}
.dbla-post-item .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.dbla-post-item .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-1);
}
.dbla-post-meta {
	color: var(--wp--preset--color--accent-4);
	margin-block-start: 0.75rem;
}
/* One line, left-aligned: "Gepubliceerd door (member) · (country) · (date)".
   The byline comes first in the templates; the date follows after a dot. */
.dbla-post-meta.is-layout-flex {
	justify-content: flex-start !important;
	column-gap: 0 !important;
}
.dbla-post-meta > .dbla-post-byline + .wp-block-post-date::before {
	content: "\00a0·\00a0";
}

/* One post: date and categories under the title, previous/next at the
   bottom. */
.dbla-post .dbla-post-meta {
	margin-block: 0 var(--wp--preset--spacing--50);
}
.dbla-post .wp-block-post-content > * + * {
	margin-block-start: 1rem;
}
/* Previous / next under the white box (inc/dbla.php, dbla/post-nav):
   a low see-through bar with two clickable halves — chevron, label on two
   lines, title on one line (cut off with …). */
.dbla-post-nav {
	display: flex;
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border-radius: 5px;
	font-size: var(--wp--preset--font-size--small);
}
.dbla-post-nav > * {
	flex: 1 1 50%;
	min-width: 0;
}
.dbla-post-nav > :last-child {
	border-inline-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
}
.dbla-post-nav a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	line-height: 1.3;
}
.dbla-post-nav__next {
	flex-direction: row-reverse;
	text-align: right;
}
/* Chevron: ‹ before "previous", › after "next" (row-reverse puts it right). */
.dbla-post-nav a::before {
	content: "";
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	border: solid currentColor;
	border-width: 0 0 2px 2px;
	transform: rotate(45deg);
	margin-inline: 0.2rem;
	transition: transform 0.2s ease;
}
.dbla-post-nav__next::before {
	transform: rotate(-135deg) !important;
}
.dbla-post-nav__prev:hover::before {
	transform: translateX(-3px) rotate(45deg);
}
.dbla-post-nav__next:hover::before {
	transform: translateX(3px) rotate(-135deg) !important;
}

.dbla-post-nav__label {
	flex: none;
	font-size: 0.7rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent-4);
}
.dbla-post-nav__title {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--wp--preset--font-family--source-serif);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 600px) {
	.dbla-post-nav { flex-direction: column; }
	.dbla-post-nav > :last-child {
		border-inline-start: 0;
		border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	}
}
@media (prefers-reduced-motion: reduce) {
	.dbla-post-nav a::before { transition: none; }
}

body.single:not(.page) h1.wp-block-post-title:not(.wp-block-query *) {
	font-size: var(--wp--preset--font-size--x-large) !important;
	margin-block: 0 var(--wp--preset--spacing--30) !important;
}

/* White boxes with a shadow to the right and below — the same for the
   sidebar and for the content: the post list (Weblog page, category pages)
   and the post itself. */
.dbla-blog-sidebar,
.dbla-content-box {
	background: #ffffff;
	color: var(--wp--preset--color--contrast);
	box-shadow: 6px 6px 9px 0 rgb(84 71 71 / 0.2);
	border-radius: 5px;
}
.dbla-blog-sidebar {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}
.dbla-content-box {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60) !important;
}
/* Inside the box: the first and last line of the list get no extra space
   against the box's edge. */
.dbla-post-list .wp-block-post:first-child .dbla-post-item {
	padding-block-start: 0;
}
/* The column holding the sidebar: stretch no further than its box. */
.dbla-blog-layout {
	align-items: flex-start;
}
.dbla-blog-sidebar > .dbla-sidebar-heading:first-child {
	margin-block-start: 0 !important;
}
.dbla-sidebar-heading {
	font-family: var(--wp--preset--font-family--source-serif);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin-block: var(--wp--preset--spacing--40) 0.35rem !important;
}
/* The lists: links next to one another, separated by a thin dot,
   centred, wrapping as needed. */
.dbla-category-list {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.8;
}
.dbla-category-list li {
	display: inline;
}
.dbla-category-list li + li::before {
	content: "·";
	margin-inline: 0.45em;
	color: var(--wp--preset--color--accent-4);
}
.dbla-category-list a {
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
	white-space: nowrap;
}
.dbla-category-list a:hover,
.dbla-category-list a[aria-current="page"] {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}
/* Inside the content box, text uses the box's full width (minus its
   padding), so the list and a post line up the same way. */
.dbla-content-box.is-layout-constrained > :not(.alignleft):not(.alignright):not(.aligncenter),
.dbla-content-box .is-layout-constrained > :not(.alignleft):not(.alignright):not(.aligncenter) {
	max-width: none;
	margin-inline: 0 !important;
}

/* Country pages: "Publicaties van …" and the list of posts ([catlist])
   sit in a column of 70% (95% on Spanje) next to an empty column, left
   over from Raft. Here the column with the list takes the full width and
   the empty column goes, so the heading isn't wrapped onto two lines.
   In CSS rather than in the ten pages, so nothing in the content changes. */
.wp-block-columns:has(> .wp-block-column .lcp_catlist) {
	flex-wrap: nowrap !important;
}
.wp-block-columns > .wp-block-column:has(.lcp_catlist) {
	flex-basis: 100% !important;
}
.wp-block-columns:has(> .wp-block-column .lcp_catlist) > .wp-block-column:empty {
	display: none;
}

/* The list of posts on a country page: the title in a light weight, at
   1rem, with the publication date after it on the same line, in grey. */
.lcp_catlist > li {
	margin-block-end: 0.5rem;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5;
}
/* A list of links: no underline at rest (the whole line is the link),
   underlined on hover and keyboard focus — as the formatting rule says. */
.lcp_catlist > li > a {
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
}
.lcp_catlist > li > a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-1) !important;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.lcp_catlist .lcp_date {
	display: inline;
	color: var(--wp--preset--color--accent-4);
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}
.lcp_catlist .lcp_date::before {
	content: "· ";
}

/* ============================================================
   DBLA — country pages (children of Actieve landen, page 42) and the other
   lawyer pages (Indonesië's two): body.dbla-lawyer-page, inc/dbla.php 14.
   The ten pages were built by hand in Raft, each a little different.
   Undone here, in CSS, so the content of the pages doesn't change.
   ============================================================ */

/* 1. The top: country name left, flag right — the same on every page,
   with Polen as the measure (its spacing, its title, its flag at 89 × 67).
   The flag is a fixed box of 89 × 67, not just a width: almost all flag
   images are 4:3, but Cambodja's is 1.56:1, which made its row 10px
   lower and the card below it jump. object-fit: cover fills the box and
   trims an off-ratio flag at its sides. */
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:first-child {
	align-items: center !important;
	flex-wrap: nowrap !important;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20) !important;
	margin-block: 0 !important;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:first-child > .wp-block-column {
	align-self: center !important;
	padding-block: 0 !important;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:first-child .wp-block-post-title {
	margin: 0 !important;
	padding: 0 !important;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:first-child .wp-block-image {
	margin: 0 0 0 auto !important;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:first-child .wp-block-image img {
	display: block;
	/* 64 × 48 since 27 Oct (was 89 × 67, Polen's size): quieter next to
	   the title. Still 4:3. */
	width: 64px !important;
	height: 48px !important;
	object-fit: cover;
	/* A hairline, so the white half of a flag (Polen) still has an edge. */
	box-shadow: 0 0 0 1px rgb(29 31 37 / 0.12);
	/* No Raft border on top of it (Indonesië's two pages had a grey one,
	   #abb8c3, with a rounded corner). */
	border: 0 !important;
	border-radius: 0 !important;
}

/* 2. The lawyer: a business card. A white card like the blog's boxes,
   instead of the navy box (#0f2947, each page its own shadow, corner and
   padding). Left: photo, name and LinkedIn, centred, with a thin line
   between them and the details; right: the details in two columns. */
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) {
	background: #ffffff !important;
	color: var(--wp--preset--color--contrast) !important;
	box-shadow: 6px 6px 9px 0 rgb(84 71 71 / 0.2) !important;
	border-radius: 5px !important;
	/* Equal top and bottom, narrower sides. */
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) !important;
	/* Close under the title and flag; spacing 40 below, to Publicaties. */
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) !important;
	gap: var(--wp--preset--spacing--50) !important;
	/* All three columns as tall as the tallest, so the lines between
	   them are the same length. */
	align-items: stretch !important;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) :is(p, h1, h2, h3, h4, h5, h6, strong) {
	color: var(--wp--preset--color--contrast) !important;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) p a {
	color: var(--wp--preset--color--accent-1) !important;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column {
	padding: 0 !important;
	align-self: stretch !important;
}
/* No extra room under the last line of a column: the card's own padding
   is the space at the bottom. */
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column > :last-child {
	margin-block-end: 0 !important;
}

/* The left column: photo first, then the name, then LinkedIn. */
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:has(.wp-block-social-links) {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:has(.wp-block-social-links) > .wp-block-image {
	order: -1;
	margin: 0 0 var(--wp--preset--spacing--30) !important;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:has(.wp-block-social-links) > .wp-block-image img {
	width: 150px !important;
	height: 150px !important;
	object-fit: cover;
	border-radius: 999px !important;
	/* A soft shadow, no ring: lifts a portrait on a white background off
	   the white card. Drawn outside the photo, so it keeps its size. */
	box-shadow: 0 3px 10px rgb(29 31 37 / 0.18);
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:has(.wp-block-social-links) > :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--wp--preset--font-family--source-serif) !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	text-align: center !important;
	margin: 0 0 var(--wp--preset--spacing--20) !important;
	padding: 0 !important;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) .wp-block-social-links {
	margin: 0 !important;
	justify-content: center;
}
/* The LinkedIn icon in white (the square with "in" cut out), on the blue
   circle. */
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) .wp-social-link {
	color: #ffffff !important;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) .wp-social-link svg {
	fill: currentColor !important;
}
/* "Titel: …" (moved into this column by dbla-titel-verhuizen.php): shown
   right under the name, LinkedIn after it. */
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:has(.wp-block-social-links) > p {
	font-size: var(--wp--preset--font-size--small) !important;
	line-height: 1.5;
	text-align: center !important;
	margin: 0 !important;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:has(.wp-block-social-links) > .wp-block-social-links {
	order: 1;
	margin-block-start: var(--wp--preset--spacing--30) !important;
}

/* A thin line between the columns, in the middle of the gap, so the three
   columns stay exactly equal: between 1 and 2, and between 2 and 3. */
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column + .wp-block-column {
	position: relative;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column + .wp-block-column::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: calc(var(--wp--preset--spacing--50) / -2);
	border-inline-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
}

/* Three columns: photo, name, title and LinkedIn | details | details.
   The first narrower (0.75 : 1 : 1, about 27% / 36.5% / 36.5%), so the
   details get more room. */
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column {
	flex: 1 1 0 !important;
	min-width: 0;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:has(.wp-block-social-links) {
	flex: 0.75 1 0 !important;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:not(:has(.wp-block-social-links)) {
	/* The space between the lines as a gap, not as margins: hidden empty
	   paragraphs then take no room, and nothing is left under the last line. */
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:not(:has(.wp-block-social-links)) > p {
	/* The details: 15px (was 13px, which read dense and hard), with more
	   line height; labels in a medium weight (500) instead of semi-bold.
	   Name and title are not touched. */
	font-size: 0.9375rem !important;
	line-height: 1.65;
	letter-spacing: normal;
	text-align: left !important;
	margin: 0 !important;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column > p:empty {
	display: none;
}

/* A phone: the card stacks; the lines lie between the stacked columns. */
@media (max-width: 781px) {
	body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column + .wp-block-column::before {
		inset-block: calc(var(--wp--preset--spacing--50) / -2) auto;
		inset-inline: 0;
		border-inline-start: 0;
		border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	}
}

/* 3. "Publicaties van …" and its list: no side padding of its own; its
   width and left edge follow the Juridische gids (the page's left
   edge, as the business card and the guide). The block came from Raft with 70 spacing of padding on both
   sides (the group "Blogposts by author"); the list keeps a small indent
   for its bullets, which sit just inside that edge. */
body.dbla-lawyer-page .wp-block-post-content > .wp-block-group:has(.lcp_catlist) {
	/* The same inset as the text inside the Juridische gids below (its
	   padding, spacing 40), so "Publicaties van …" starts on one line with
	   "Juridische gids …". */
	padding-inline: var(--wp--preset--spacing--40) 0 !important;
	/* Raft put spacing 60 above it; now only the business card's own margin
	   below it (spacing 40) separates the two. */
	margin-block-start: 0 !important;
	padding-block-start: 0 !important;
	/* And nothing extra below: the list ends, then the guide's own space. */
	margin-block-end: 0 !important;
	padding-block-end: 0 !important;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-group:has(.lcp_catlist) :is(.wp-block-columns, .wp-block-column, .wp-block-group) {
	margin-block: 0 !important;
	padding-block: 0 !important;
}
body.dbla-lawyer-page .lcp_catlist {
	margin-block-end: 0;
}
body.dbla-lawyer-page .lcp_catlist > li:last-child {
	margin-block-end: 0;
}
body.dbla-lawyer-page .wp-block-post-content > .wp-block-group:has(.lcp_catlist) :is(.wp-block-columns, .wp-block-column, .wp-block-group) {
	padding-inline: 0 !important;
	margin-inline: 0 !important;
}
body.dbla-lawyer-page .lcp_catlist {
	padding-inline-start: 1.2em;
	margin-inline: 0;
}

/* ============================================================
   DBLA — header: the site name next to the logo. (The header's side
   padding is 40, in parts/header.html.)
   ============================================================ */
/* The site name next to the logo: a step up from "large" (1.5rem), a
   little less than "x-large" (2.25rem). */
header.wp-block-template-part .wp-block-site-title {
	font-size: 1.875rem !important;
	line-height: 1.2;
}
@media (max-width: 781px) {
	header.wp-block-template-part .wp-block-site-title {
		font-size: 1.375rem !important;
	}
}

/* DBLA — footer: the copyright a little closer to the logo. The group
   spaces its three parts evenly (spacing 40); only the gap after the logo
   shrinks, to spacing 30. */
footer.wp-block-template-part .wp-block-site-logo {
	margin-inline-end: calc(var(--wp--preset--spacing--30) - var(--wp--preset--spacing--40));
}

/* ============================================================
   DBLA — the "Actieve landen" dropdown (Oct 2026).
   Fifteen countries in one column ran far down the page. On a screen
   wide enough for the inline menu (from 600px, where WordPress switches
   to the overlay), it becomes a compact panel: three columns of five,
   read top to bottom, in alphabetical order (parts/header.html). A white
   card with the blog's shadow, anchored to the right edge of its menu
   item so it never runs off the screen. The phone menu (the overlay)
   keeps its plain list.
   ============================================================ */
@media (min-width: 600px) {
	header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
		display: grid !important;
		grid-template-columns: repeat(3, max-content);
		/* Row 1: the label "Kies een land" across the panel; then five rows of countries. */
		grid-template-rows: auto repeat(5, auto);
		grid-auto-flow: column;
		column-gap: var(--wp--preset--spacing--30);
		row-gap: 2px;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) !important;
		left: auto !important;
		right: 0;
		background: #ffffff !important;
		color: var(--wp--preset--color--contrast) !important;
		border: 0 !important;
		border-radius: 5px;
		box-shadow: 6px 6px 9px 0 rgb(84 71 71 / 0.2);
	}
	header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		margin: 0 !important;
	}
	header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 0.35rem 0.6rem !important;
		border-radius: 3px;
		font-size: var(--wp--preset--font-size--medium);
		white-space: nowrap;
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
	}
	/* The top of the panel: a quiet label "Kies een land" across the three
	   columns (the panel's own ::after, so it is no link and not in the tab
	   order), set apart from the countries by a thin line. */
	header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu > .wp-block-navigation__submenu-container::after {
		content: "Kies een land";
		grid-row: 1;
		grid-column: 1 / -1;
		padding: 0.35rem 0.6rem 0.5rem;
		margin-block-end: 0.35rem;
		border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: var(--wp--preset--color--accent-4);
	}
	header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		grid-row: auto;
	}
	header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		background: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent);
		color: var(--wp--preset--color--accent-1);
	}
}

/* ============================================================
   DBLA — country pages: the Juridische gids with a sidebar (Oct 2026).
   inc/dbla.php (7) wraps the guide in .dbla-guide-layout and adds the
   sidebar "Juridische gidsen". The guide starts on the same left edge as
   the business card above it, narrower than the card, with less padding;
   the sidebar to its right lists every country with a guide and stays in
   view while you scroll through a long guide.
   The guide has the card's look: no navy border, the card's soft shadow
   and 5px corner.
   ============================================================ */
.dbla-guide-layout {
	display: grid;
	/* The sidebar 12rem (was 15rem): its names are short, the guide gets the rest. */
	grid-template-columns: minmax(0, 1fr) 12rem;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) !important;
}
.dbla-guide-layout > .wp-block-group {
	margin: 0 !important;
	max-width: none !important;
	border: 0 !important;
	border-radius: 5px !important;
	box-shadow: 6px 6px 9px 0 rgb(84 71 71 / 0.2) !important;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) !important;
}
/* A link to #juridische-gids lands under the sticky header, not behind it. */
#juridische-gids {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
}

.dbla-guide-sidebar {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
	/* No card: just a heading and a list on the page itself. */
	color: var(--wp--preset--color--contrast);
	padding: var(--wp--preset--spacing--40) 0 0;
}
.dbla-guide-sidebar__title {
	font-family: var(--wp--preset--font-family--source-serif) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 var(--wp--preset--spacing--20) !important;
}
.dbla-guide-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dbla-guide-sidebar__list a {
	display: block;
	padding: 0.2rem 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
}
.dbla-guide-sidebar__list a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.dbla-guide-sidebar__list a[aria-current="page"] {
	color: var(--wp--preset--color--accent-1);
	font-weight: 600;
}

/* Narrow screens: the sidebar under the guide, no longer sticky. */
@media (max-width: 899px) {
	.dbla-guide-layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.dbla-guide-sidebar {
		position: static;
	}
}

/* "Publicaties van …" on a country page: a modest heading, smaller than
   "Juridische gids …" — it introduces a short list. */
body.dbla-lawyer-page .wp-block-post-content > .wp-block-group:has(.lcp_catlist) :is(h2, h3, h4, h5) {
	font-size: var(--wp--preset--font-size--large) !important;
	line-height: 1.3 !important;
	padding: 0 !important;
	margin-block: 0 var(--wp--preset--spacing--20) !important;
}

/* ============================================================
   DBLA — printing (Oct 2026). assets/js/dbla-print.js does the rest:
   opens every section of a guide before printing, adds the line
   .dbla-print-note, and the button "Print deze gids".
   ============================================================ */

/* On screen: the button at the top right of the guide, on one line with
   the heading "Juridische gids …" and top-aligned with it; the note hidden. */
.dbla-guide-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}
.dbla-guide-head > :is(h1, h2, h3) {
	margin-block-start: 0 !important;
	padding-block-start: 0 !important;
}
.dbla-print-guide {
	display: flex;
	justify-content: flex-end;
	flex-shrink: 0;
	margin: 0 0 var(--wp--preset--spacing--20) !important;
}
.dbla-guide-head > .dbla-print-guide {
	margin: 0 !important;
}
.dbla-print-guide__button {
	font-family: var(--wp--preset--font-family--readex);
	font-size: var(--wp--preset--font-size--small);
	/* Ink at rest, a quiet grey border; terracotta on hover and focus. */
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
	border-radius: 3px;
	padding: 0.3rem 0.8rem;
	cursor: pointer;
}
.dbla-print-guide__button:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-1);
	border-color: var(--wp--preset--color--accent-1);
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent);
}
.dbla-print-note {
	display: none;
}

@media print {
	@page {
		margin: 18mm 16mm;
	}

	/* Black on white, no decoration. */
	html,
	body {
		background: #ffffff !important;
		color: #000000 !important;
	}
	*,
	*::before,
	*::after {
		box-shadow: none !important;
		text-shadow: none !important;
		filter: none !important;
	}
	.wp-block-group,
	.wp-block-columns,
	.wp-block-column {
		background: none !important;
		border-color: #cccccc !important;
	}

	/* What doesn't belong on paper. */
	header.wp-block-template-part,
	footer.wp-block-template-part,
	.wp-block-navigation,
	.wp-block-social-links,
	.dbla-guide-sidebar,
	.dbla-blog-sidebar,
	.dbla-post-nav,
	.dbla-print-guide,
	.dbla-accordion__arrow,
	.wp-block-search,
	iframe,
	video,
	audio {
		display: none !important;
	}

	/* The full width of the paper. */
	main,
	main .wp-block-post-content > *,
	.dbla-guide-layout,
	.dbla-guide-layout > .wp-block-group {
		max-width: none !important;
		width: auto !important;
		margin-inline: 0 !important;
		padding-inline: 0 !important;
	}
	.dbla-guide-layout {
		display: block !important;
	}

	/* Text: links underlined, and an outside link shows where it goes. */
	a {
		color: #000000 !important;
		text-decoration: underline !important;
	}
	main .wp-block-post-content a[href^="http"]:not([href*="dbla.nl"])::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		word-break: break-all;
	}

	/* Page breaks: no heading alone at the bottom of a page, no image or
	   list item cut in half, no single lines left behind. */
	h1, h2, h3, h4, h5, h6, summary {
		break-after: avoid;
	}
	img, figure, li, tr {
		break-inside: avoid;
	}
	p {
		orphans: 3;
		widows: 3;
	}

	/* The sections of a guide: open (the script opens them), each with its
	   heading in bold, without the arrow. */
	.dbla-accordion__header {
		list-style: none;
		font-weight: 700;
		margin-block: 1em 0.4em;
	}
	.dbla-accordion__header::-webkit-details-marker {
		display: none;
	}

	/* Where and when it was printed. */
	.dbla-print-note {
		display: block !important;
		margin-block-start: 2em !important;
		padding-block-start: 0.6em;
		border-top: 1px solid #cccccc;
		font-size: 9pt;
		color: #444444 !important;
	}

	/* "Print deze gids": only the guide (and the note). */
	html.dbla-print-guide-only main .wp-block-post-content > :not(.dbla-guide-layout) {
		display: none !important;
	}
}

/* ============================================================
   DBLA — the opening of a Juridische gids (Oct 2026).
   Most guides open with a title of their own and a few paragraphs before
   the accordion ("Land van harde werkers en carrièrevrouwen"). Each page
   built that differently: h1, h3 or h4, padding or margin of its own,
   a spacer of 7 to 45px before the accordion. Made equal here, for every
   guide, with the intro title lighter: Source Serif at normal weight,
   an invitation to read on rather than another heading.
   ============================================================ */
#juridische-gids :is(h2, .dbla-guide-head):not(.dbla-accordion *) {
	padding-block: 0 !important;
}
/* Close under "Juridische gids …" when an intro title follows. A guide
   without an intro keeps its distance: the accordion's own top margin
   (spacing 40) is the larger one and wins. */
#juridische-gids .dbla-guide-head,
#juridische-gids > h2:first-child {
	margin-block: 0 var(--wp--preset--spacing--20) !important;
}

/* The intro title. */
#juridische-gids :is(h1, h3, h4, h5, h6):not(.dbla-accordion *) {
	font-family: var(--wp--preset--font-family--source-serif) !important;
	font-size: 1.625rem !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: 0 !important;
	margin-block: 0 var(--wp--preset--spacing--30) !important;
}

/* The intro text: one size, one spacing. */
#juridische-gids p:not(.dbla-accordion *):not(.dbla-print-guide):not(.dbla-accordion-toggle) {
	font-size: var(--wp--preset--font-size--medium) !important;
	line-height: 1.6;
	padding: 0 !important;
	margin-block: 0 1em !important;
}
#juridische-gids .wp-block-columns:not(.dbla-accordion *) {
	padding: 0 !important;
	margin-block: 0 !important;
}

/* No spacers of their own; one fixed space before the accordion. */
#juridische-gids .wp-block-spacer:not(.dbla-accordion *) {
	display: none !important;
}
#juridische-gids .dbla-accordion {
	margin-block-start: var(--wp--preset--spacing--40) !important;
}

/* Country pages without "Publicaties van …" (Malta, Turkije, Curaçao …):
   the guide follows the business card directly, and gets more room above
   it (spacing 60 instead of 40), so the two white boxes don't crowd. */
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) + .dbla-guide-layout {
	margin-block-start: var(--wp--preset--spacing--60) !important;
}

/* "Juridische gids <country>": the country in ink (no longer the orange
   of the old pages), larger and lighter — Source Serif in italic at 300 —
   so the title names the country in a personal voice. The span comes from
   inc/dbla.php (7). */
#juridische-gids .dbla-guide-country {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--source-serif);
	font-style: italic;
	font-weight: 300;
	font-size: 1.15em;
	letter-spacing: 0.005em;
	/* A light terracotta tint behind the country, a little apart from "gids". */
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent);
	padding: 0 0.3em 0.05em;
	border-radius: 4px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Juridische gids — the section headings of the accordion. Clicking one
   used to leave the site's dark focus outline around it. Now: no outline
   after a mouse click, a soft terracotta tint on hover, and for keyboard
   users (who need to see where they are) the same tint plus a thin
   terracotta line on the left — softer than the rectangle, still visible. */
.dbla-accordion__header {
	border-radius: 4px;
	transition: background-color 0.15s ease;
	/* Room for the tint around the text, without moving the text. */
	padding-inline: 0.5rem;
	margin-inline: -0.5rem;
}
.dbla-accordion__header:focus:not(:focus-visible) {
	outline: none;
}
.dbla-accordion__header:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 7%, transparent);
}
.dbla-accordion__header:focus-visible {
	outline: none;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--accent-1);
}
@media (prefers-reduced-motion: reduce) {
	.dbla-accordion__header {
		transition: none;
	}
}

/* "Alles openklappen / Alles dichtklappen" above the accordion
   (assets/js/dbla-print.js): right-aligned, plain text in terracotta, no
   border — quieter than "Print deze gids", so the two don't compete. */
#juridische-gids p.dbla-accordion-toggle {
	display: flex;
	justify-content: flex-end;
	margin: var(--wp--preset--spacing--30) 0 0.25rem !important;
	padding: 0 !important;
}
#juridische-gids .dbla-accordion-toggle + .dbla-accordion {
	margin-block-start: 0 !important;
}
.dbla-accordion-toggle__button {
	font-family: var(--wp--preset--font-family--readex);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	background: none;
	border: 0;
	border-radius: 3px;
	padding: 0.2rem 0.4rem;
	cursor: pointer;
}
.dbla-accordion-toggle__button:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
@media print {
	.dbla-accordion-toggle {
		display: none !important;
	}
}

/* The signature under a guide ("Camila Borba Lefèvre, januari 2025"): the
   paragraph after the accordion. The spacers that held it apart are
   hidden (above), so it gets its own room here; plain, not italic or bold,
   a little smaller than the intro text, in grey ink. */
#juridische-gids .dbla-accordion ~ p:not(.dbla-accordion *):not(.dbla-print-guide):not(.dbla-accordion-toggle) {
	margin-block: var(--wp--preset--spacing--40) 0 !important;
	font-size: 0.95rem !important;
	font-weight: 400 !important;
	font-style: normal !important;
	color: var(--wp--preset--color--accent-4) !important;
}
#juridische-gids .dbla-accordion ~ p :is(em, i, strong, b) {
	font-style: normal;
	font-weight: inherit;
}

/* DBLA — header: a thin vertical line between the menu and the LinkedIn
   icon. */
header.wp-block-template-part .wp-block-social-links {
	border-inline-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	padding-inline-start: 27px;
	align-self: stretch;
	align-items: center;
}
@media (max-width: 599px) {
	header.wp-block-template-part .wp-block-social-links {
		border-inline-start: 0;
		padding-inline-start: 0;
	}
}

/* "Actieve landen" in the menu (a button since it has no link): no dark
   focus rectangle after a click. It turns terracotta while its panel is
   open (hover, click or keyboard), so label and panel read as one; with
   the keyboard it is also underlined, so the focus stays visible. */
header .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle:focus:not(:focus-visible) {
	outline: none;
}
header .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle:focus-visible {
	outline: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}
header .wp-block-navigation-submenu:is(:hover, :focus-within) > .wp-block-navigation-submenu__toggle,
header .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle[aria-expanded="true"] {
	color: var(--wp--preset--color--accent-1);
}
header .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle,
header .wp-block-navigation-submenu > .wp-block-navigation__submenu-icon {
	transition: color 0.15s ease;
}
header .wp-block-navigation-submenu:is(:hover, :focus-within) > .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--accent-1);
}
@media (min-width: 600px) {
	/* The panel opens a few pixels under the label, with a bridge so the
	   pointer doesn't lose it on the way down. */
	header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
		margin-top: 8px;
	}
	header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-start: -8px;
		height: 8px;
		/* A small white pointer at the top right, under "Actieve landen":
		   the panel visibly belongs to that menu item. */
		background: right 1.4rem bottom / 16px 8px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 8L8 0L16 8Z' fill='%23ffffff'/%3E%3C/svg%3E");
	}
}
@media (prefers-reduced-motion: reduce) {
	header .wp-block-navigation-submenu > :is(.wp-block-navigation-submenu__toggle, .wp-block-navigation__submenu-icon) {
		transition: none;
	}
}

/* ============================================================
   DBLA — the member cards on the home page: the look of the business
   card on the country pages. (The cards on Actieve landen are built
   differently — no photo, two h6 — and are not touched by this.) White,
   no black border, the card's soft shadow and 5px corner; the photo round
   with the same soft shadow; the name in Source Serif; the country in
   terracotta instead of the loose orange #ff6000.
   A member card = a column holding a round image and an h5 (the name).
   ============================================================ */
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5) {
	background: #ffffff !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 0 !important;
	border-radius: 5px !important;
	box-shadow: 6px 6px 9px 0 rgb(84 71 71 / 0.2) !important;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) !important;
}
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5) > .wp-block-image img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 999px;
	box-shadow: 0 3px 10px rgb(29 31 37 / 0.18);
}
/* The name. */
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5) > h5 {
	font-family: var(--wp--preset--font-family--source-serif) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5) > h5 a {
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: none;
}
/* The country. */
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5) > h6,
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5) > h6 a {
	color: var(--wp--preset--color--accent-1) !important;
	text-decoration: none;
	letter-spacing: 0.08em;
}
/* The title and office: small and light, in grey ink. */
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5) > p {
	font-size: 0.85rem !important;
	font-weight: 300 !important;
	line-height: 1.45 !important;
	color: var(--wp--preset--color--accent-4) !important;
}

/* The whole card is the link: the one link left, on the name
   (dbla-ledenkaarten-een-link.php took the photo's and the country's),
   is stretched over the card. Screen readers and the Tab key meet each
   member once. On hover the card lifts a little and the name turns
   terracotta; with the keyboard the card gets a terracotta outline. */
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5) {
	position: relative;
	transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5) > h5 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 5px;
}
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5):hover {
	/* A light terracotta tint over the white, and a slight lift. No
	   underline anywhere on the card. */
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 6%, #ffffff) !important;
	transform: translateY(-2px);
	box-shadow: 8px 10px 14px 0 rgb(84 71 71 / 0.25) !important;
}
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5):hover > h5 a {
	color: var(--wp--preset--color--accent-1) !important;
}
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5) > h5 a:focus-visible {
	outline: none;
}
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5):has(> h5 a:focus-visible) {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 6%, #ffffff) !important;
}
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5):has(> h5 a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5) {
		transition: none;
	}
	.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5):hover {
		transform: none;
	}
}

/* All member cards the same height. The cards sit in rows of five, each
   row its own Columns block, so each row could only equal itself. Here
   the group that holds them becomes one grid and the rows dissolve into
   it (display: contents): every card row is as tall as the tallest card
   on the page. On Home the heading and the intro line above the cards
   keep their own height (the first two rows) and run across the grid.
   Five per row on a wide screen, then three, two, one. */
.wp-block-group:has(> .wp-block-columns > .wp-block-column > .wp-block-image.is-style-rounded) {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	/* Between the cards: spacing 50 (was 40). */
	gap: var(--wp--preset--spacing--50);
	/* The group used to narrow its children to 85%; the same width now
	   comes from padding, since the cards fill their grid cells. */
	padding-inline: max(var(--wp--preset--spacing--30), 7.5%) !important;
}
.wp-block-group:has(> .wp-block-columns > .wp-block-column > .wp-block-image.is-style-rounded) > * {
	max-width: none !important;
	margin: 0 !important;
}
.wp-block-group:has(> .wp-block-columns > .wp-block-column > .wp-block-image.is-style-rounded) > :not(.wp-block-columns) {
	grid-column: 1 / -1;
}
.wp-block-group:has(> h1):has(> .wp-block-columns > .wp-block-column > .wp-block-image.is-style-rounded) {
	grid-template-rows: auto auto;
}
.wp-block-group:has(> h1):has(> .wp-block-columns > .wp-block-column > .wp-block-image.is-style-rounded) > p {
	margin-block-end: var(--wp--preset--spacing--30) !important;
}
.wp-block-group:has(> .wp-block-columns > .wp-block-column > .wp-block-image.is-style-rounded) > .wp-block-columns {
	display: contents !important;
}
.wp-block-group:has(> .wp-block-columns > .wp-block-column > .wp-block-image.is-style-rounded) > .wp-block-columns > .wp-block-column {
	margin: 0 !important;
	align-self: stretch !important;
	min-width: 0;
}
@media (max-width: 1100px) {
	.wp-block-group:has(> .wp-block-columns > .wp-block-column > .wp-block-image.is-style-rounded) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 781px) {
	.wp-block-group:has(> .wp-block-columns > .wp-block-column > .wp-block-image.is-style-rounded) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 479px) {
	.wp-block-group:has(> .wp-block-columns > .wp-block-column > .wp-block-image.is-style-rounded) {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* Member cards: no underline on their links, also not from the site's
   general hover rule for links. */
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5) a,
.wp-block-column:has(> .wp-block-image.is-style-rounded):has(> h5) a:is(:hover, :focus, :focus-visible) {
	text-decoration: none !important;
}

/* DBLA — header menu: no dark focus rectangle after a click. A mouse click
   leaves no outline; the keyboard gets a soft terracotta tint (with a thin
   line underneath, so it stays visible). "Actieve landen" turns terracotta
   while its list is open, so label and panel read as one. */
header.wp-block-template-part .wp-block-navigation :is(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle):focus:not(:focus-visible) {
	outline: none;
}
header.wp-block-template-part .wp-block-navigation :is(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle):focus-visible {
	outline: none;
	border-radius: 3px;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--accent-1);
}
header.wp-block-template-part .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
header.wp-block-template-part .wp-block-navigation-submenu:is(:hover, :focus-within) > :is(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle),
header.wp-block-template-part .wp-block-navigation-submenu:has(> [aria-expanded="true"]) > :is(.wp-block-navigation-item__content, .wp-block-navigation-submenu__toggle) {
	color: var(--wp--preset--color--accent-1);
}

/* ============================================================
   DBLA — Actieve landen: the country cards (inc/dbla.php, 9).
   One white card per country, in the look of the business card on the
   country pages (the blog's shadow, 5px corner): the country on top, then
   each lawyer with photo (round, soft shadow) and name. Indonesië has two
   lawyers side by side; its card spans two columns where there is room,
   each lawyer takes half of it, with a thin vertical line in between.
   ============================================================ */
.dbla-country-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--50) !important;
}
.dbla-country-card {
	background: #ffffff;
	color: var(--wp--preset--color--contrast);
	border-radius: 5px;
	box-shadow: 6px 6px 9px 0 rgb(84 71 71 / 0.2);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	text-align: center;
}
.dbla-country-card__country {
	font-family: var(--wp--preset--font-family--readex) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent-4);
	margin: 0 0 var(--wp--preset--spacing--30) !important;
	padding: 0 !important;
}
.dbla-country-card__country a {
	text-decoration: none;
}
.dbla-country-card__lawyers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
}
.dbla-country-card__lawyers a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.dbla-country-card__photo {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 999px;
	box-shadow: 0 3px 10px rgb(29 31 37 / 0.18);
}
.dbla-country-card__name {
	font-family: var(--wp--preset--font-family--source-serif);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}
/* The member's professional title under the name ("Advogada (São Paulo)"):
   small, grey, light, close under the name. */
.dbla-country-card__title {
	margin-block-start: -0.35rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
	line-height: 1.4;
	color: var(--wp--preset--color--accent-4);
}
/* Hover and keyboard: country and names terracotta, no underline — the
   whole card is the link and gets a tint (keyboard: an outline). */
.dbla-country-card__country a:is(:hover, :focus-visible),
.dbla-country-card__lawyers a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-1);
}

/* Actieve landen: the intro under the title ("De vereniging Dutch Business
   Lawyers Abroad bestaat uit 16 advocaten …"), centred like the title, at a
   comfortable reading width, a size larger than body text. */
p.dbla-intro {
	max-width: 44rem !important;
	margin: var(--wp--preset--spacing--30) auto var(--wp--preset--spacing--40) !important;
	text-align: center;
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}

/* The live numbers in the intro ([dbla_aantal], inc/dbla.php 10): a quiet
   lift — the same letter and colour as the text, a little larger and in a
   light weight (Readex Pro is a variable font, 160–700), with slightly
   tighter spacing. Size sets them apart, not weight: no bold mid-sentence. */
.dbla-aantal {
	font-size: 1.15em;
	font-weight: 300;
	letter-spacing: -0.01em;
	font-variant-numeric: lining-nums;
}

/* ============================================================
   DBLA — Home: one card per member (dbla/country-cards {"per":"lid"},
   inc/dbla.php 9). The same card as on Actieve landen — white, the
   card's shadow and 5px corner, round photo — with photo, name and title
   on top and the country at the bottom. The whole card is one link, to
   the member's page: on hover a light terracotta tint and a slight lift,
   the name terracotta; with the keyboard a terracotta outline.
   All cards on the page as tall as the tallest.
   ============================================================ */
.dbla-member-cards {
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	grid-auto-rows: 1fr;
}
.dbla-member-card {
	display: flex;
	background: #ffffff;
	border-radius: 5px;
	box-shadow: 6px 6px 9px 0 rgb(84 71 71 / 0.2);
	transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
.dbla-member-card__link {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	text-align: center;
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: none !important;
	border-radius: 5px;
}
.dbla-member-card .dbla-country-card__title {
	margin-block-start: -0.35rem;
}
/* The country at the bottom of the card, whatever the length above it. */
.dbla-member-card__country {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent-4);
}
.dbla-member-card:hover,
.dbla-member-card:has(.dbla-member-card__link:focus-visible) {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 6%, #ffffff);
	transform: translateY(-2px);
	box-shadow: 8px 10px 14px 0 rgb(84 71 71 / 0.25);
}
.dbla-member-card:hover .dbla-country-card__name,
.dbla-member-card__link:focus-visible .dbla-country-card__name {
	color: var(--wp--preset--color--accent-1);
}
.dbla-member-card__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.dbla-member-card {
		transition: none;
	}
	.dbla-member-card:hover,
	.dbla-member-card:has(.dbla-member-card__link:focus-visible) {
		transform: none;
	}
}

body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:not(:has(.wp-block-social-links)) > p strong {
	font-weight: 500;
}

/* Business card: the member's title under the name ("Advocaat (Amsterdam)
   en Abogado (Barcelona)") may use almost half of the gap on each side, so
   a long title wraps less. It stays clear of the separator line. */
body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:has(.wp-block-social-links) > p {
	margin-inline: calc(var(--wp--preset--spacing--50) / -2 + 0.5rem) !important;
	max-width: none !important;
	width: auto !important;
	align-self: stretch;
}

/* Home: "Ontmoet onze leden" (#leden) and the intro under it, exactly as the
   title and intro on Actieve landen: the page-title letter (Source Serif,
   xx-large, 600), then spacing 30 to the intro, then the cards. The
   heading's own Raft size (41px) and margins are undone. */
#leden {
	font-family: var(--wp--preset--font-family--source-serif) !important;
	font-size: var(--wp--preset--font-size--xx-large) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	margin-block: 0 !important;
	padding-block: 0 !important;
}
#leden ~ p.dbla-intro {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
	padding: 0 !important;
}
#leden ~ .dbla-country-cards {
	margin-block-start: var(--wp--preset--spacing--50) !important;
}

/* ============================================================
   DBLA — Actieve landen: the country's flag at the bottom of each country
   card (inc/dbla.php: the flag of the country page itself). 40 × 30, 4:3, with the same hairline as on the
   country pages. The card is a column, so the flags line up at the bottom
   whatever the length of the names above them.
   ============================================================ */
.dbla-country-card {
	display: flex;
	flex-direction: column;
}
.dbla-country-card__flag {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
	line-height: 0;
}
.dbla-country-card__flag-img {
	display: inline-block;
	width: 40px !important;
	height: 30px !important;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgb(29 31 37 / 0.12);
}

/* DBLA — the lawyer's title on the country and member cards: at most two
   lines, cut off with … ; the full title shows on hover (title attribute). */
.dbla-country-card__title {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

/* The flag is quiet (70%) and comes to full strength when the card is
   hovered; as a link to the country page it also lifts a little. */
.dbla-country-card__flag-img {
	opacity: 0.7;
	transition: opacity 0.2s ease;
}
.dbla-country-card:hover .dbla-country-card__flag-img {
	opacity: 1;
}
.dbla-country-card__flag a {
	display: inline-block;
	transition: transform 0.15s ease;
}
.dbla-country-card__flag a:hover {
	transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
	.dbla-country-card__flag a,
	.dbla-country-card__flag-img { transition: none; }
}

/* A country name that links to its country page is in terracotta, the
   site's link colour, so it reads as a link; on hover it turns ink and is
   underlined. A country without a page stays grey (plain text). */
.dbla-country-card__country a {
	color: var(--wp--preset--color--accent-1) !important;
}
.dbla-country-card__country a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* The dark banner at the bottom of Actieve landen ("Beter zaken doen in het
   buitenland!") and of Home ("Waren we maar eerder met u in contact
   gekomen!") — less room above and below (its own padding was spacing 80),
   and room between the banner and the footer. */
body.page-parent .wp-block-post-content > .alignfull[style*="background-color"],
:is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"] {
	padding-block: var(--wp--preset--spacing--50) !important;
	/* Room between the banner and the footer. */
	margin-block-end: var(--wp--preset--spacing--70) !important;
}
/* More room under the country cards, before the banner. */
body.page-parent .dbla-country-cards {
	margin-block-end: var(--wp--preset--spacing--70) !important;
}

/* Weblog page: "Alle publicaties" with the order switch on the same line,
   right (inc/dbla.php, section 11). A two-part switch: one rounded outline,
   the active order filled in ink with a check mark, the other light and
   terracotta, tinted on hover. Kept quiet: a faint outline, the active
   order on a soft grey instead of solid ink. */
.dbla-content-box > .dbla-box-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem var(--wp--preset--spacing--40);
	margin-block: 0 var(--wp--preset--spacing--40) !important;
}
.dbla-box-head > .dbla-box-title {
	margin: 0 !important;
}
.dbla-sort {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
}
.dbla-sort__switch {
	display: inline-flex;
	padding: 3px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 999px;
	background: transparent;
}
.dbla-sort__option {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
a.dbla-sort__option {
	color: var(--wp--preset--color--accent-1); /* full colour: 5.9:1 on white */
}
a.dbla-sort__option:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
	color: var(--wp--preset--color--accent-1);
}
a.dbla-sort__option:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 1px;
}
.dbla-sort__option.is-active {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 9%, transparent);
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	cursor: default;
}
/* A small check mark before the active order. */
.dbla-sort__option.is-active::before {
	content: "";
	width: 0.6em;
	height: 0.32em;
	border: solid currentColor;
	border-width: 0 0 2px 2px;
	transform: rotate(-45deg) translateY(-0.1em);
}
@media (prefers-reduced-motion: reduce) {
	.dbla-sort__option { transition: none; }
}

/* ============================================================
   DBLA — page navigation under the post lists (Weblog page, category
   pages), in the language of the order switch:
   - "‹ Nieuwer" left and "Ouder ›" right as quiet pill buttons, terracotta
     with a soft tint on hover; the page numbers in the middle, always
     centred, even on the first or last page where one button is missing;
   - the numbers in one faint rounded outline, the current page on a soft
     grey in ink (not a link), the others terracotta.
   ============================================================ */
.dbla-post-list .wp-block-query-pagination {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
}
.dbla-post-list .wp-block-query-pagination-previous {
	grid-column: 1;
	justify-self: start;
}
.dbla-post-list .wp-block-query-pagination-numbers {
	grid-column: 2;
	display: inline-flex;
	padding: 3px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 999px;
}
.dbla-post-list .wp-block-query-pagination-next {
	grid-column: 3;
	justify-self: end;
}
/* Shared pill shape: numbers and the two buttons. */
.dbla-post-list :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next),
.dbla-post-list .wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-width: 2rem;
	padding: 0.3rem 0.75rem;
	margin: 0 !important;
	border-radius: 999px;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.dbla-post-list :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	padding-inline: 0.9rem;
}
.dbla-post-list :is(a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next),
.dbla-post-list .wp-block-query-pagination-numbers a.page-numbers {
	color: var(--wp--preset--color--accent-1);
}
.dbla-post-list :is(a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next):is(:hover, :focus-visible),
.dbla-post-list .wp-block-query-pagination-numbers a.page-numbers:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
	color: var(--wp--preset--color--accent-1);
}
.dbla-post-list :is(a.wp-block-query-pagination-previous, a.wp-block-query-pagination-next):focus-visible,
.dbla-post-list .wp-block-query-pagination-numbers a.page-numbers:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 1px;
}
/* The current page: soft grey, ink, not a link. */
.dbla-post-list .wp-block-query-pagination-numbers .page-numbers.current {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 9%, transparent);
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}
.dbla-post-list .wp-block-query-pagination-numbers .page-numbers.dots {
	color: var(--wp--preset--color--accent-4);
	min-width: 1.25rem;
	padding-inline: 0.2rem;
}
/* Chevrons, the same as under a post: ‹ before "Nieuwer", › after "Ouder". */
.dbla-post-list .wp-block-query-pagination-previous::before,
.dbla-post-list .wp-block-query-pagination-next::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border: solid currentColor;
	border-width: 0 0 2px 2px;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}
.dbla-post-list .wp-block-query-pagination-next::after {
	transform: rotate(-135deg);
}
.dbla-post-list a.wp-block-query-pagination-previous:hover::before {
	transform: translateX(-2px) rotate(45deg);
}
.dbla-post-list a.wp-block-query-pagination-next:hover::after {
	transform: translateX(2px) rotate(-135deg);
}
/* Core's own arrows, if switched on in the block, would double ours. */
.dbla-post-list .wp-block-query-pagination-previous-arrow,
.dbla-post-list .wp-block-query-pagination-next-arrow {
	display: none;
}
@media (max-width: 600px) {
	/* On a phone: buttons above, the numbers on their own line under them. */
	.dbla-post-list .wp-block-query-pagination {
		grid-template-columns: 1fr 1fr;
	}
	.dbla-post-list .wp-block-query-pagination-numbers {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: center;
	}
	.dbla-post-list .wp-block-query-pagination-next {
		grid-column: 2;
	}
}
@media (prefers-reduced-motion: reduce) {
	.dbla-post-list :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next),
	.dbla-post-list .wp-block-query-pagination-numbers .page-numbers,
	.dbla-post-list .wp-block-query-pagination-previous::before,
	.dbla-post-list .wp-block-query-pagination-next::after { transition: none; }
}

/* Footer: "Site by Alligator Design" smaller than the rest of the footer. */
footer .dbla-credit {
	font-size: 0.75rem !important;
}

/* Blog: both white boxes — the content on the left (post list, post) and
   the sidebar — get a light edge, on every blog page. */
.dbla-content-box,
.dbla-blog-sidebar {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

/* Footer links (Disclaimer, Colofon, Alligator Design): no underline, in
   terracotta — the site's link colour — so they read as links; underlined
   on hover and keyboard focus. */
footer.wp-block-template-part p a {
	color: var(--wp--preset--color--accent-1) !important;
	text-decoration: none !important;
}
footer.wp-block-template-part p a:is(:hover, :focus-visible) {
	text-decoration: underline !important;
	text-underline-offset: 0.2em;
}

/* Sidebar: "Alle weblog publicaties" at the top, back to the start of the blog —
   a plain link in terracotta, a thin line under it before "Per land". On
   the start page itself it is plain ink (the current choice). */
.dbla-all-posts {
	margin-block: 0 var(--wp--preset--spacing--30) !important;
	margin-inline: 0 !important;
	max-width: none !important;
	padding-block-end: var(--wp--preset--spacing--30);
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
}
.dbla-all-posts a {
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
}
.dbla-all-posts a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.dbla-all-posts [aria-current] {
	color: var(--wp--preset--color--contrast);
}
/* Link and current choice exactly the same size and weight: only the
   colour changes. */
.dbla-all-posts :is(a, [aria-current]) {
	font-size: inherit !important;
	font-weight: 400 !important;
	font-family: inherit !important;
	letter-spacing: inherit !important;
}
/* The first heading follows the line: no extra room above it. */
.dbla-all-posts + .dbla-sidebar-heading {
	margin-block-start: 0 !important;
}

/* The two worlds, each with a thin terracotta line on top. */
.dbla-worlds {
	gap: var(--wp--preset--spacing--40) !important;
}

.dbla-worlds p {
	margin: 0 !important;
}
/* The Netwerk card at the bottom. */

@media (max-width: 781px) {
	.dbla-worlds { flex-direction: column; }
}

/* The dark banners (Actieve landen, Home): the quote left narrower (40%),
   the text right wider (60%), with less room on its left (was spacing 80). */
:is(body.page-parent .wp-block-post-content > .alignfull[style*="background-color"], :is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"]) .wp-block-columns > .wp-block-column:first-child {
	flex-basis: 40% !important;
}
:is(body.page-parent .wp-block-post-content > .alignfull[style*="background-color"], :is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"]) .wp-block-columns > .wp-block-column:last-child {
	flex-basis: 60% !important;
	padding-left: var(--wp--preset--spacing--40) !important;
}
/* … and the text in the right column centred vertically against the quote
   on the left, with no extra room above the first line of either. */
:is(body.page-parent .wp-block-post-content > .alignfull[style*="background-color"], :is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"]) .wp-block-columns {
	align-items: center !important;
}
:is(body.page-parent .wp-block-post-content > .alignfull[style*="background-color"], :is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"]) .wp-block-columns > .wp-block-column {
	align-self: center !important;
	padding-top: 0 !important;
}
:is(body.page-parent .wp-block-post-content > .alignfull[style*="background-color"], :is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"]) .wp-block-columns > .wp-block-column > :first-child,
:is(body.page-parent .wp-block-post-content > .alignfull[style*="background-color"], :is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"]) .wp-block-columns > .wp-block-column > :first-child > :first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
/* Centre the TEXT, not the boxes: the quote carried extra room at the bottom
   (its line ran on below the words), so its box centre sat lower than its
   text. No outer room on the quote or the paragraphs. */
:is(body.page-parent .wp-block-post-content > .alignfull[style*="background-color"], :is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"]) .wp-block-columns .wp-block-quote {
	margin: 0 !important;
	padding-block: 0 !important;
}
:is(body.page-parent .wp-block-post-content > .alignfull[style*="background-color"], :is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"]) .wp-block-columns :is(.wp-block-quote p, .wp-block-column > p) {
	margin-block: 0 !important;
	padding-block: 0 !important;
}
:is(body.page-parent .wp-block-post-content > .alignfull[style*="background-color"], :is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"]) .wp-block-columns > .wp-block-column {
	padding-bottom: 0 !important;
}
/* The banner's content exactly as wide as the cards above it (the page's
   content width: 80% of the page minus its side margins), so the quote's
   bar lines up with the left edge of the first card and the text ends at
   the right edge of the last; the two columns closer together. */
:is(body.page-parent .wp-block-post-content > .alignfull[style*="background-color"], :is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"]) > .alignwide {
	box-sizing: border-box;
	width: 100%;
	max-width: calc((100% - 2 * var(--wp--preset--spacing--50)) * 0.8) !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
}
:is(body.page-parent .wp-block-post-content > .alignfull[style*="background-color"], :is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"]) > .alignwide > .wp-block-columns {
	gap: var(--wp--preset--spacing--50) !important;
	margin: 0 !important;
}
:is(body.page-parent .wp-block-post-content > .alignfull[style*="background-color"], :is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"]) > .alignwide > .wp-block-columns > .wp-block-column {
	padding-inline: 0 !important;
}

/* Waarom DBLA?: "Thuis in twee werelden" centred — the heading and both
   columns. On one line above them: a globe over "Het land waar u zaken
   doet", the Dutch flag over "Uw Nederlandse achtergrond", and between the
   two, as the bridge, the DBLA logo itself — the logo file as it is,
   square, not stretched or edited (the media library's site logo). */
.dbla-worlds,
.dbla-worlds h3 {
	text-align: center;
}
.dbla-worlds {
	position: relative;
}
/* The logo, centred between the two columns, level with the icons. */
.dbla-worlds::before {
	position: absolute;
	top: 0;
	left: 50%;
	width: 3.5rem;
	height: 3.5rem;
	background: center / contain no-repeat url("/wp-content/uploads/2024/10/cropped-cropped-Logo_DBLA_main-120x120-1.png");
	pointer-events: none;
}
/* The icons above each column, the same height as the logo. */
.dbla-worlds > .wp-block-column::before {
	display: block;
	height: 3.5rem;
	margin-block-end: var(--wp--preset--spacing--40);
	background: center / contain no-repeat;
}
/* The globe in colour — a blue sea with white lines — so it holds its own
   next to the flag and the orange logo. Still a simple drawing. */
.dbla-worlds > .wp-block-column:first-child::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='21' fill='%233A78C2'/%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.6' opacity='.9'%3E%3Cellipse cx='24' cy='24' rx='9' ry='21'/%3E%3Cpath d='M3 24H45M6.5 13H41.5M6.5 35H41.5M24 3V45'/%3E%3C/g%3E%3C/svg%3E");
}
.dbla-worlds > .wp-block-column:last-child::before {
	/* The flag a little smaller than the box, with a hairline edge. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%23AE1C28' d='M0 0H9V2H0Z'/%3E%3Cpath fill='%23FFFFFF' d='M0 2H9V4H0Z'/%3E%3Cpath fill='%2321468B' d='M0 4H9V6H0Z'/%3E%3C/svg%3E");
	filter: drop-shadow(0 0 0.5px rgb(29 31 37 / 0.35));
}
@media (max-width: 781px) {
	/* Stacked on a phone: no logo between columns that are above each
	   other; each keeps its own icon. */
	.dbla-worlds::before { display: none; }
}
/* No line on top of the columns: the icons and the logo mark the two worlds. */
.dbla-worlds > .wp-block-column {
	border-block-start: 0 !important;
	padding-block-start: 0 !important;
}

/* Home banner ("Waren we maar eerder met u in contact gekomen!"): the text
   in the right column more open — more line height, a little letter-
   spacing, a lighter weight (Readex Pro is variable, 160–700). */
:is(body.page-parent .wp-block-post-content > .alignfull[style*="background-color"], :is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"]) > .alignwide > .wp-block-columns > .wp-block-column:last-child p {
	line-height: 1.8 !important;
	letter-spacing: 0.02em !important;
	font-weight: 300 !important;
}
/* The bold sentences in it stay a step heavier than the text around them. */
:is(body.page-parent .wp-block-post-content > .alignfull[style*="background-color"], :is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"]) > .alignwide > .wp-block-columns > .wp-block-column:last-child p strong {
	font-weight: 500 !important;
}

/* Home: the dark banner runs straight into the footer — no room between
   them (Actieve landen, now a draft, kept its room). */
:is(body.home, body.page) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"] {
	margin-block-end: 0 !important;
	/* 10% more room above and below than spacing 50. */
	padding-block: calc(var(--wp--preset--spacing--50) * 1.1) !important;
}

/* ============================================================
   DBLA — Waarom DBLA?, round of 30 Oct.
   ============================================================ */
/* 1. The two worlds: the text in the page's own size and line height. */
.dbla-worlds p {
	font-size: inherit !important;
	line-height: inherit !important;
}
/* 3. The logo one full height above the globe and the flag; the worlds
   make room for it, so it never touches the heading. */
.dbla-worlds::before {
	transform: translate(-50%, -100%) !important;
}

/* Waarom DBLA? (30 Oct, later): the DBLA logo moves from between the two
   worlds to above the heading "Thuis in twee werelden", centred — the logo
   file as it is, square, not stretched. The two icons (globe, flag) stay
   above their columns. */
.dbla-worlds::before {
	content: none !important;
}
.dbla-worlds {
	margin-block-start: var(--wp--preset--spacing--40) !important;
}

/* Waarom DBLA?: the headings of the two worlds ("Het land waar u zaken
   doet", "Uw Nederlandse achtergrond") as real titles: larger, in the
   heading serif, with room under them. */
.dbla-worlds h3 {
	font-family: var(--wp--preset--font-family--source-serif) !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	margin: 0 0 var(--wp--preset--spacing--30) !important;
}

/* ============================================================
   DBLA — Home, "Ontmoet onze leden": the country cards with a small
   sidebar to their right — the countries, each a link to its country
   page. The same look as the "Juridische gidsen" sidebar on the country
   pages (.dbla-guide-sidebar): no card, a heading and a light list,
   sticky while scrolling. Under the cards on narrow screens.
   ============================================================ */
.dbla-cards-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 10rem;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70) !important;
}
.dbla-cards-layout > .dbla-country-cards {
	margin: 0 !important;
}
.dbla-cards-sidebar {
	padding-block-start: 0;
}
.dbla-cards-sidebar .dbla-guide-sidebar__list span {
	display: block;
	padding: 0.2rem 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
	color: var(--wp--preset--color--accent-4);
}
@media (max-width: 899px) {
	.dbla-cards-layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.dbla-cards-sidebar {
		position: static;
	}
}

/* Home sidebar: the current filter (Indonesië) marked like the current
   guide; "Alle landen tonen" under the list, in terracotta. A link to
   #leden lands under the sticky header. */
.dbla-cards-sidebar .dbla-guide-sidebar__list a[aria-current] {
	color: var(--wp--preset--color--accent-1);
	font-weight: 600;
}
.dbla-cards-sidebar__all {
	margin: var(--wp--preset--spacing--30) 0 0 !important;
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	font-size: var(--wp--preset--font-size--small);
}
.dbla-cards-sidebar__all a {
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
}
.dbla-cards-sidebar__all a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Waarom DBLA?: the intro and "Voorkomen is beter dan oplossen" side by
   side, wider than the reading column — 60rem, the width of the two
   worlds below. Text left-aligned, both columns top-aligned; the
   heading of the second column a title like those of the two worlds. */
.wp-block-post-content > .dbla-intro-cols {
	box-sizing: border-box;
	width: min(60rem, 100% - 2 * var(--wp--preset--spacing--40)) !important;
	max-width: none !important;
	margin-inline: auto !important;
	gap: var(--wp--preset--spacing--60) !important;
	align-items: flex-start !important;
}
.dbla-intro-cols :is(h2, h3, p) {
	text-align: left !important;
}
.dbla-intro-cols > .wp-block-column > :first-child {
	margin-block-start: 0 !important;
}
.dbla-intro-cols > .wp-block-column > * + * {
	margin-block-start: 1rem !important;
}
.dbla-intro-cols p.dbla-intro,
.dbla-intro-cols > .wp-block-column:first-child > p {
	font-size: var(--wp--preset--font-size--medium) !important;
}
.dbla-intro-cols :is(h2, h3) {
	font-family: var(--wp--preset--font-family--source-serif) !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
}

/* Home, "Ontmoet onze leden": the cards filtered on the page itself.
   The chosen country's card(s) stay where they are; the others become a
   faint grey background — not meant to be read or clicked. */
.dbla-country-card[data-state="off"] {
	opacity: 0.2;
	filter: grayscale(1);
	pointer-events: none;
	transition: opacity 0.4s, filter 0.4s;
}

/* Home: a chosen card scrolled into view lands clear of the sticky header. */
.dbla-country-card {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
}

/* ============================================================
   DBLA — Waarom DBLA?, round of 31 Oct. The page now stands on its own
   blocks, without the .dbla-about wrapper; .dbla-worlds marks it.
   ============================================================ */
/* The page title and the section titles centred; the titles in the
   columns stay left-aligned, with their text. */
.wp-block-post-content:has(> .dbla-worlds) > :is(.wp-block-post-title, h2) {
	text-align: center !important;
}
/* The band "DBLA: anders dan een internationaal netwerk" is the exception:
   its title stays left-aligned, with its text. */

/* "Anders dan een internationaal netwerk": a dark band, full width, in
   the dark blue of the Home banner, white text. */
.wp-block-post-content > .dbla-banner {
	box-sizing: border-box;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-inline: calc(50% - 50vw) !important;
	margin-block: var(--wp--preset--spacing--60) !important;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) !important;
	background: #0f2947;
	color: #ffffff;
}
.dbla-banner :is(h2, h3, p) {
	color: inherit;
}
.dbla-banner > * + * {
	margin-block-start: 1rem !important;
}
.dbla-banner > h2 {
	margin-block-end: var(--wp--preset--spacing--30) !important;
}
/* More room between "DBLA en Nederlandse advocaten" and its two columns. */
.wp-block-post-content:has(> .dbla-worlds) > h2 + .dbla-intro-cols:not(.dbla-worlds) {
	margin-block-start: var(--wp--preset--spacing--50) !important;
}
/* The globe of "Het land waar u zaken doet", in white and a little larger,
   next to the title of the dark band — the lines in the band's own blue. */
.dbla-banner > h2::before {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='21' fill='%23F57D32'/%3E%3Cg fill='none' stroke='%230F2947' stroke-width='1.6'%3E%3Cellipse cx='24' cy='24' rx='9' ry='21'/%3E%3Cpath d='M3 24H45M6.5 13H41.5M6.5 35H41.5M24 3V45'/%3E%3C/g%3E%3C/svg%3E");
}
/* The globe and the title side by side: the globe on the left, the title
   vertically centred next to it. */
.dbla-banner > h2 {
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}
.dbla-banner > h2::before {
	flex-shrink: 0;
	margin-block-end: 0;
}
/* All the column blocks of the page (the intro, the two worlds, "DBLA en
   Nederlandse advocaten") and the title "DBLA en Nederlandse advocaten"
   in one width, on the same left edge as the text of the dark band: the
   band's content width (80% of the window minus the band's side padding),
   centred on the window. */
.wp-block-post-content:has(> .dbla-worlds) > h2:has(+ .dbla-intro-cols:not(.dbla-worlds)),
.wp-block-post-content:has(> .dbla-worlds) > .dbla-intro-cols {
	box-sizing: border-box;
	width: calc(0.8 * (100vw - 2 * var(--wp--preset--spacing--40))) !important;
	max-width: none !important;
	margin-inline: calc(50% - 0.4 * (100vw - 2 * var(--wp--preset--spacing--40))) !important;
}
.wp-block-post-content:has(> .dbla-worlds) > h2:has(+ .dbla-intro-cols:not(.dbla-worlds)) {
	text-align: left !important;
}
/* The globe and the flag above the two worlds left-aligned, with the
   titles and text under them. */
.dbla-worlds > .wp-block-column::before {
	background-position: left center !important;
}
/* Waarom DBLA?: the page background of Home — the light texture (Raft's
   p6.webp), as on Landen and the blog. */
body:has(.wp-block-post-content > .dbla-worlds) {
	background-color: #f7f7f7;
	background-image: url("assets/images/dbla-texture.webp");
	background-position: 50% 0;
}
/* The left world ("Het land waar u zaken doet") right-aligned — icon,
   title and text — so the two worlds meet in the middle. */
.dbla-worlds > .wp-block-column:first-child :is(h2, h3, p) {
	text-align: right !important;
}
.dbla-worlds > .wp-block-column:first-child::before {
	background-position: right center !important;
}
/* More room between the two worlds (spacing 80 instead of 60). */
.wp-block-post-content > .dbla-intro-cols.dbla-worlds {
	gap: var(--wp--preset--spacing--80) !important;
}
/* The Dutch flag a little smaller (2.2rem high instead of 2.6rem). */
.dbla-worlds > .wp-block-column:last-child::before {
	background-size: auto 2.2rem;
}

/* The globe and the flag centred above their titles rather than at the
   edge of the column: the icon moves from the column onto the title, and
   the title is only as wide as its text (the left one stays at the right
   edge, the right one at the left edge). */
.dbla-worlds > .wp-block-column::before {
	content: none !important;
}
.dbla-worlds > .wp-block-column > h3 {
	width: fit-content;
	max-width: 100%;
}
.dbla-worlds > .wp-block-column:first-child > h3 {
	margin-inline-start: auto !important;
}
.dbla-worlds > .wp-block-column > h3::before {
	content: "";
	display: block;
	height: 3.5rem;
	margin-block-end: var(--wp--preset--spacing--40);
	background: center / contain no-repeat;
}
.dbla-worlds > .wp-block-column:first-child > h3::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='21' fill='%233A78C2'/%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.6' opacity='.9'%3E%3Cellipse cx='24' cy='24' rx='9' ry='21'/%3E%3Cpath d='M3 24H45M6.5 13H41.5M6.5 35H41.5M24 3V45'/%3E%3C/g%3E%3C/svg%3E");
}
.dbla-worlds > .wp-block-column:last-child > h3::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%23AE1C28' d='M0 0H9V2H0Z'/%3E%3Cpath fill='%23FFFFFF' d='M0 2H9V4H0Z'/%3E%3Cpath fill='%2321468B' d='M0 4H9V6H0Z'/%3E%3C/svg%3E");
	background-size: auto 2.2rem;
	filter: drop-shadow(0 0 0.5px rgb(29 31 37 / 0.35));
}

/* Home, "Ontmoet onze leden": less room above and below the section — the
   group's padding from spacing 80 to 60, and no extra margin under the
   cards (it came on top of the padding). */
body.home .wp-block-post-content > .alignfull:has(> #leden) {
	padding-block: var(--wp--preset--spacing--60) !important;
}
body.home .wp-block-post-content > .alignfull:has(> #leden) .dbla-cards-layout {
	margin-block-end: 0 !important;
}

/* Home, "Wat biedt DBLA aan?": a text block in place of the world map with
   parallax — the title in the letter of "Ontmoet onze leden", then two
   columns with titles as on Waarom DBLA? (.dbla-intro-cols). */
body.home .dbla-aanbod > h2 {
	font-family: var(--wp--preset--font-family--source-serif) !important;
	font-size: var(--wp--preset--font-size--xx-large) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	/* centred: the text, and the box itself (margin 0 had pushed the box,
	   85% wide, to the left edge of the group) */
	text-align: center !important;
	margin-block: 0 !important;
	margin-inline: auto !important;
}
body.home .dbla-aanbod > .dbla-intro-cols {
	margin-block: var(--wp--preset--spacing--50) 0 !important;
	align-items: flex-start !important;
}
body.home .dbla-aanbod ul {
	padding-inline-start: 1.25rem;
}
body.home .dbla-aanbod li + li {
	margin-block-start: 0.4rem;
}

/* ============================================================
   DBLA — Home: Contact DBLA and the countries above the footer, as on
   dbla.nl (inc/dbla.php, 17): a light grey band (#cfcece at 60%, over the
   page texture), 64px above and below, 85% wide. Left the contact text with
   the mail address as a link; right, aligned right, the countries in
   three columns, bold, in terracotta.
   ============================================================ */
.dbla-contact {
	background: #cfcece99;
	padding: 64px var(--wp--preset--spacing--30);
}
.dbla-contact__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	width: 85%;
	margin-inline: auto;
}
.dbla-contact__mail {
	flex: 1 1 22rem;
	padding-inline-end: var(--wp--preset--spacing--80);
}
.dbla-contact__countries {
	flex: 1 1 22rem;
	text-align: right;
}
.dbla-contact :is(h2, h3) {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: inherit;
}
.dbla-contact__mail p {
	margin: 0 0 var(--wp--preset--spacing--30);
}
.dbla-contact__countries ul {
	columns: 3;
	column-gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}
.dbla-contact__countries li {
	break-inside: avoid;
	line-height: 1.6;
}
.dbla-contact__countries a {
	color: var(--wp--preset--color--accent-2);
	font-weight: 700;
	text-decoration: none;
}
.dbla-contact__countries a:is(:hover, :focus-visible) {
	color: #cf2e2e;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
@media (max-width: 781px) {
	.dbla-contact__mail { padding-inline-end: 0; }
	.dbla-contact__countries { text-align: left; }
}

/* Home: the bottom banner ("Waren we maar eerder met u in contact
   gekomen!") exactly as wide as the content of "Ontmoet onze leden" above
   it — that group's 85% of the page minus its side padding (spacing 30) —
   so the quote's bar lines up with the left edge of the cards. */
body.home .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"] > .alignwide {
	max-width: calc((100% - 2 * var(--wp--preset--spacing--30)) * 0.85) !important;
}

/* The bottom banner (inc/dbla-banner.html) on Waarom DBLA? too: room above
   it, its content as wide as the page's columns (80% of the window minus
   spacing 40 on both sides); on Home it keeps the width of the member
   cards (rule above). */
body.page:not(.home) .wp-block-post-content > .dbla-quote-banner {
	margin-block-start: var(--wp--preset--spacing--70) !important;
}
body.page:not(.home) .wp-block-post-content > .alignfull.dbla-quote-banner[style*="background-color"] > .alignwide {
	max-width: calc(0.8 * (100% - 2 * var(--wp--preset--spacing--40))) !important;
}

/* ============================================================
   DBLA — Home: the interactive world map between the welcome block and
   "Wat biedt DBLA aan?" (Custom HTML block on the page, the image in
   assets/images/dbla-wereldmap.webp). At most 72rem wide, centred, under
   the introduction; it scrolls with the page.
   ============================================================ */
.wp-block-post-content > .dbla-map {
	width: min(72rem, calc(100% - 2 * var(--wp--preset--spacing--40))) !important;
	max-width: none !important;
	margin-inline: auto !important;
	margin-block: calc(var(--wp--preset--spacing--50) - 0.75rem) 0 !important;
}
/* DBLA — the world map with the member countries as orange dots. Each dot
   is a link to Home, filtered on that country's cards; its name shows on
   hover and on keyboard focus. No script. */
.dbla-map {
	margin: 0;
}
/* The map and everything placed on it: the dots and the hint are placed
   in % of this box, which is exactly the image (the caption is outside). */
.dbla-map__stage {
	position: relative;
}
.dbla-map img {
	display: block;
	width: 100%;
	height: auto;
}
.dbla-map__dot {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: max(1.5rem, 2.6%);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	transition: box-shadow 0.2s;
}
/* On a touch screen (iPad, phone) the dots are larger targets for a
   finger, without changing what is drawn. */
@media (pointer: coarse) {
	.dbla-map__dot {
		width: max(2rem, 2.6%);
	}
}
.dbla-map__dot:is(:hover, :focus-visible) {
	box-shadow: 0 0 0 3px #ffffff;
	outline: none;
}
.dbla-map__dot span {
	position: absolute;
	bottom: calc(100% + 0.4rem);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.2rem 0.55rem;
	border-radius: 3px;
	background: #ffffff;
	color: #0f2947;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
}
.dbla-map__dot:is(:hover, :focus-visible) span {
	opacity: 1;
}
/* The DBLA logo in front of the country name, a small square at the height
   of the letters. */
.dbla-map__dot span {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}
.dbla-map__dot span::before {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	border-radius: 2px;
	background: center / cover no-repeat url("/wp-content/uploads/2024/10/cropped-cropped-Logo_DBLA_main-120x120-1-150x150.png");
}
/* The caption under the map, small and grey. */
.dbla-map figcaption {
	margin-block-start: 0.25rem !important;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	/* quiet: a lighter grey, a touch smaller */
	color: color-mix(in srgb, var(--wp--preset--color--accent-4, #404040) 65%, transparent);
	font-size: 0.8rem;
	text-align: center;
}
/* Full screen: the button in the map's top right corner (dbla-map.js adds
   it where the browser allows full screen), on the empty Arctic. On the
   full screen the map is as large as fits, centred on the map's own dark
   blue, the caption under it; --ratio (set by the script) keeps the dots
   on their countries. */
.dbla-map__full {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.85);
	color: #0f2947;
	cursor: pointer;
	transition: background 0.2s;
}
.dbla-map__full:is(:hover, :focus-visible) {
	background: #ffffff;
	outline: 2px solid #e8823f;
	outline-offset: 2px;
}
.dbla-map:fullscreen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #0a2744;
}
.dbla-map:fullscreen .dbla-map__stage {
	width: min(100vw, calc((100vh - 2.5rem) * var(--ratio, 2.25)));
}
.dbla-map:fullscreen figcaption {
	color: rgb(255 255 255 / 0.7);
}
.dbla-map:-webkit-full-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #0a2744;
}
.dbla-map:-webkit-full-screen .dbla-map__stage {
	width: min(100vw, calc((100vh - 2.5rem) * var(--ratio, 2.25)));
}
.dbla-map:-webkit-full-screen figcaption {
	color: rgb(255 255 255 / 0.7);
}
@media print {
	.dbla-map__full {
		display: none;
	}
}

/* Each dot pulses softly — an orange ring that grows and fades — to invite
   a click. The dots start at different moments, so they never pulse in
   step. Still for visitors who ask for less motion. */
@media (prefers-reduced-motion: no-preference) {
	.dbla-map__dot::after {
		content: "";
		position: absolute;
		inset: 22%;
		border: 2px solid #e8823f;
		border-radius: 50%;
		opacity: 0;
		animation: dbla-map-pulse 2.8s ease-out infinite;
		pointer-events: none;
	}
	.dbla-map__dot:nth-of-type(3n+2)::after { animation-delay: 0.9s; }
	.dbla-map__dot:nth-of-type(3n)::after { animation-delay: 1.8s; }
	.dbla-map__dot:is(:hover, :focus-visible)::after { animation: none; }
}
@keyframes dbla-map-pulse {
	0% { transform: scale(1); opacity: 0.9; }
	70% { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}
/* The country names appear one by one, each for three seconds, in a loop
   of 45 seconds (15 countries); --i on each dot sets its turn, and
   --start (set by the small script after the map) picks a random first
   country on every visit. While the
   visitor points at or tabs to a dot, only that dot's name shows. Not for
   visitors who ask for less motion. */
@media (prefers-reduced-motion: no-preference) {
	.dbla-map__dot span {
		animation: dbla-map-name 45s linear infinite;
		animation-delay: calc((var(--i) - var(--start, 0)) * 3s);
	}
	/* the names keep coming while the cursor is on the map; they stop
	   only on a dot (or a dot with keyboard focus) */
	.dbla-map:has(.dbla-map__dot:is(:hover, :focus-visible)) .dbla-map__dot span {
		animation: none;
	}
}
@keyframes dbla-map-name {
	/* 1.2 s in, 1.8 s fully visible, 1.2 s out — overlapping the next
	   name's fade-in, so one name hands over to the next. */
	0% { opacity: 0; }
	2.67% { opacity: 1; }
	6.67% { opacity: 1; }
	9.33% { opacity: 0; }
	100% { opacity: 0; }
}

/* Waarom DBLA?: the dark banner "Beter zaken doen in het buitenland dankzij
   DBLA" (from dbla.nl) at the bottom of the page, room above it, its
   content as wide as the columns above, and straight into Contact DBLA
   under it. */
.wp-block-post-content > .dbla-better-banner {
	margin-block: var(--wp--preset--spacing--70) 0 !important;
}
.dbla-better-banner > .alignwide {
	box-sizing: border-box;
	max-width: calc(0.8 * (100vw - 2 * var(--wp--preset--spacing--40))) !important;
	margin-inline: auto !important;
}
body.page .wp-block-post-content:has(> .dbla-better-banner:last-child) {
	padding-block-end: 0 !important;
}

/* The section it leads to lands clear of the sticky header. */
#aanbod {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
}

/* A link to #leden (the menu's "Leden") lands with the title near the top
   of the window. The header
   has slid away by then (scrolling down past the map). */
#leden {
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem) !important;
}

/* ============================================================
   DBLA — Home: the header.
   - It slides away while scrolling down and comes back on the way up
     (assets/js/header-hide.js of the base, which the other pages switch
     off with their fixed "top").
   ============================================================ */
/* Home: on the way up, the header comes back only in the top third of the
   page (assets/js/header-hide.js). */
/* The header on every page as on Home: it slides away while scrolling
   down (assets/js/header-hide.js) and comes back on the way up only in the
   top third of the page. */
body {
	--alligator-show-within: 0.33;
}
body.home {
	--alligator-show-within: 0.33;
	/* the header (with the hamburger on a phone) stays until 700px have
	   been scrolled, instead of 250px */
	--alligator-hide-after: 700px;
}

/* Header: every link turns terracotta on hover and on keyboard focus — the
   site title, the menu items, the countries in the "Actieve landen" panel
   and the LinkedIn icon (its drawing follows the link colour). */
header.wp-block-template-part a:is(:hover, :focus-visible),
header.wp-block-template-part a:is(:hover, :focus-visible) svg {
	color: var(--wp--preset--color--accent-1) !important;
	fill: currentColor;
}

/* Waarom DBLA?: in the dark band, the title and its globe in DBLA orange
   (the orange of the banners and the quote). */
.dbla-banner > h2 {
	color: #f57d32 !important;
}

/* Waarom DBLA?, "Beter zaken doen in het buitenland dankzij DBLA": less room
   above and below (spacing 60 instead of 80), and the text on the same left
   and right edges as the block above it: the columns fill the content
   width, the right column takes what the left one leaves. */
.wp-block-post-content > .dbla-better-banner {
	padding-block: var(--wp--preset--spacing--60) !important;
}
/* The band without side padding of its own; its content placed with
   exactly the same width and offset as the columns of "DBLA en Nederlandse
   advocaten" above it (80% of the window minus spacing 40 on both sides,
   centred). */
.wp-block-post-content > .dbla-better-banner {
	padding-inline: 0 !important;
}
.wp-block-post-content > .dbla-better-banner > .alignwide {
	box-sizing: border-box;
	width: calc(0.8 * (100vw - 2 * var(--wp--preset--spacing--40))) !important;
	max-width: none !important;
	margin-inline: calc(50% - 0.4 * (100vw - 2 * var(--wp--preset--spacing--40))) !important;
	padding-inline: 0 !important;
}
.dbla-better-banner > .alignwide > .wp-block-columns {
	width: 100%;
	gap: var(--wp--preset--spacing--60) !important;
}
.dbla-better-banner > .alignwide > .wp-block-columns {
	margin: 0 !important;
}
.dbla-better-banner > .alignwide > .wp-block-columns > .wp-block-column:last-child {
	flex: 1 1 0 !important;
	padding-right: 0 !important;
}

/* Waarom DBLA?, "DBLA en Nederlandse advocaten": the two columns as wide as
   those in the banner "Beter zaken doen…" under it, but the other way
   round — there the left column is half the width and the right one takes
   the rest; here the left one takes the rest and the right one is half. */
.wp-block-post-content:has(> .dbla-worlds) > h2 + .dbla-intro-cols:not(.dbla-worlds) > .wp-block-column:first-child {
	flex: 1 1 0 !important;
}
.wp-block-post-content:has(> .dbla-worlds) > h2 + .dbla-intro-cols:not(.dbla-worlds) > .wp-block-column:last-child {
	flex: 0 0 50% !important;
}
@media (max-width: 781px) {
	.wp-block-post-content:has(> .dbla-worlds) > h2 + .dbla-intro-cols:not(.dbla-worlds) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Blog post: previous / next in the house card, like the white boxes above
   it — white, a light edge, the soft shadow, 5px corners, a little more
   room inside. The halves tint softly terracotta on hover and keyboard
   focus; the divider is the same light line as the edge. */
.dbla-post-nav {
	background: #ffffff;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	box-shadow: 6px 6px 9px 0 rgb(84 71 71 / 0.2);
	overflow: hidden;
}
.dbla-post-nav > :last-child {
	border-inline-start-color: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}
.dbla-post-nav a {
	padding: 0.75rem 1rem;
	transition: background-color 0.2s, color 0.2s;
}
.dbla-post-nav a:hover,
.dbla-post-nav a:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 6%, #ffffff);
	color: var(--wp--preset--color--accent-1);
	outline: none;
}
@media (max-width: 600px) {
	.dbla-post-nav > :last-child {
		border-block-start-color: color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	}
}

/* Home: the introduction under the map (a group with class dbla-home-intro
   on the page): the page title "Thuis in Buitenlandse Zaken" in the letter
   of the other page titles, two sentences under it, all centred in a
   reading column. */
.dbla-home-intro {
	max-width: 44rem;
	margin-inline: auto !important;
	padding-inline: var(--wp--preset--spacing--40);
	text-align: center;
}
.dbla-home-intro > * + * {
	margin-block-start: 0.75rem !important;
}
/* centred, the title and both sentences, whatever the general page rules
   say about headings and paragraphs */
.wp-block-post-content > .dbla-home-intro,
.wp-block-post-content > .dbla-home-intro > * {
	text-align: center !important;
	margin-inline: auto !important;
}
/* under the map; the title on one line across the full width, the two
   sentences in a reading column */
.wp-block-post-content > .dbla-home-intro {
	box-sizing: border-box;
	max-width: none !important;
	margin-block-start: var(--wp--preset--spacing--40) !important;
}
.wp-block-post-content > .dbla-home-intro > h1 {
	max-width: none !important;
	/* close under the map: none of the room the page titles get above them */
	margin-block: 0 !important;
	padding-block: 0 !important;
}

.dbla-home-intro > p {
	font-size: var(--wp--preset--font-size--medium);
}

/* Home: the whole page on the light texture of the blocks below (Raft's
   p6.webp), so the map and the introduction at the top stand on the same
   background as "Wat biedt DBLA aan?" and "Ontmoet onze leden". */
body.home {
	background-color: #f7f7f7;
	background-image: url("assets/images/dbla-texture.webp");
	background-position: 50% 0;
}

/* Home, the introduction under the map: as wide as the map (and on its
   left and right edges), the title centred across the full width, the two
   sentences side by side in two columns, left-aligned. One column on a
   phone. */
.wp-block-post-content > .dbla-home-intro {
	display: grid;
	column-gap: var(--wp--preset--spacing--60);
	width: min(72rem, calc(100% - 2 * var(--wp--preset--spacing--40))) !important;
	padding-inline: 0 !important;
	margin-inline: auto !important;
}
.wp-block-post-content > .dbla-home-intro > h1 {
	grid-column: 1 / -1;
}
.wp-block-post-content > .dbla-home-intro > p {
	margin: 0 !important;
}
@media (max-width: 781px) {
	.wp-block-post-content > .dbla-home-intro {
		grid-template-columns: 1fr;
	}
}

/* Home, "Wat biedt DBLA aan?": the columns "Diensten" and "Vertrouwd in
   twee culturen" as wide as the two sentences of the introduction above
   (the width of the map, at most 72rem), on the same edges, with the same
   room between them. */
body.home .dbla-aanbod > .dbla-intro-cols {
	box-sizing: border-box;
	width: min(72rem, calc(100vw - 2 * var(--wp--preset--spacing--40))) !important;
	max-width: none !important;
	margin-inline: calc(50% - min(36rem, 50vw - var(--wp--preset--spacing--40))) !important;
	gap: var(--wp--preset--spacing--60) !important;
}
body.home .dbla-aanbod > .dbla-intro-cols > .wp-block-column {
	flex: 1 1 0 !important;
}

/* Home, "Wat biedt DBLA aan?": a dark band across the full width, as the
   other banners — so it reads as a banner between the map and the
   members. */
body.home .wp-block-post-content > .dbla-aanbod {
	/* the dark blue of the other banners, white text, titles in DBLA orange */
	background: #0f2947 !important;
	color: #ffffff;
	margin-block-start: var(--wp--preset--spacing--60) !important;
	padding-block: var(--wp--preset--spacing--60) !important;
}
body.home .dbla-aanbod :is(h2, h3) {
	color: #f57d32 !important;
}
body.home .dbla-aanbod :is(p, li) {
	color: #ffffff;
}
/* …the section title itself in white; the column titles stay orange */
body.home .dbla-aanbod > h2 {
	color: #ffffff !important;
}

/* Home: more room under "Thuis in Buitenlandse Zaken", before the two
   sentences. */
.wp-block-post-content > .dbla-home-intro > h1 {
	margin-block-end: var(--wp--preset--spacing--30) !important;
}

/* Home, the introduction under the map: the two sentences no longer side
   by side but one under the other, as paragraphs, centred in a reading
   column (overrides the two columns above). */
.wp-block-post-content > .dbla-home-intro {
	grid-template-columns: 1fr !important;
	row-gap: 1.25rem;
}
.wp-block-post-content > .dbla-home-intro > p {
	max-width: 44rem !important;
	margin-inline: auto !important;
	text-align: center !important;
}

/* Home: under the sentence of the introduction under the map, the globe of the
   site in DBLA orange with white lines, small and centred. */
.wp-block-post-content > .dbla-home-intro > p:last-child::after {
	content: "";
	display: block;
	margin: 2.25rem auto 0;
}

/* Home: the page title "Thuis in Buitenlandse Zaken" above the map, centred,
   with the room the page titles get on the other pages; the map closer
   under it. The two sentences stay under the map. */
.wp-block-post-content > .dbla-home-title {
	text-align: center !important;
}
.wp-block-post-content > .dbla-home-title + .dbla-map {
	margin-block-start: var(--wp--preset--spacing--30) !important;
}

/* Home: more air between the lines of the two sentences under the map. */
.wp-block-post-content > .dbla-home-intro > p {
	line-height: 1.75 !important;
}

/* Home: the first sentence ("DBLA is een uniek samenwerkingsverband …")
   under the page title, above the map: centred in a reading column, in the
   letter of the sentence under the map. */
.wp-block-post-content > .dbla-home-lead {
	max-width: 44rem !important;
	margin-inline: auto !important;
	margin-block: 0 !important;
	padding-inline: var(--wp--preset--spacing--40);
	text-align: center !important;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75 !important;
}
.wp-block-post-content > .dbla-home-lead + .dbla-map {
	margin-block-start: var(--wp--preset--spacing--40) !important;
}

/* Waarom DBLA?: the first column under the title ("Uw Nederlandse advocaat
   ter plaatse" and its text) right-aligned, facing "Voorkomen is beter dan
   oplossen" across the middle. */
.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title + .dbla-intro-cols > .wp-block-column:first-child :is(h2, h3, p) {
	text-align: right !important;
}

/* ============================================================
   DBLA — text pages made of a title and one group (Disclaimer, Colofon):
   one reading column of 48rem for the title and everything under it, so
   the title stands right above the text. The group's own uneven side
   padding (spacing 80 on the right only) goes; the spacing of a text page
   (between blocks, above the headings) reaches inside the group.
   ============================================================ */
body.page:not(.page-child) .wp-block-post-content:has(> .wp-block-post-title:first-child + .wp-block-group) > .wp-block-post-title,
body.page:not(.page-child) .wp-block-post-content:has(> .wp-block-post-title:first-child + .wp-block-group) > .wp-block-group > * {
	box-sizing: border-box;
	max-width: 48rem !important;
	margin-inline: auto !important;
	text-align: left;
}
body.page:not(.page-child) .wp-block-post-content:has(> .wp-block-post-title:first-child + .wp-block-group) > .wp-block-group {
	padding-inline: var(--wp--preset--spacing--40) !important;
}
body.page:not(.page-child) .wp-block-post-content:has(> .wp-block-post-title:first-child + .wp-block-group) > .wp-block-post-title {
	padding-inline: var(--wp--preset--spacing--40) !important;
	box-sizing: content-box;
}
body.page:not(.page-child) .wp-block-post-content:has(> .wp-block-post-title:first-child + .wp-block-group) > .wp-block-group > * + * {
	margin-block-start: 1.2rem !important;
}
body.page:not(.page-child) .wp-block-post-content:has(> .wp-block-post-title:first-child + .wp-block-group) > .wp-block-group > :is(h2, h3) {
	margin-block-start: var(--wp--preset--spacing--60) !important;
	padding-block: 0 !important;
}
body.page:not(.page-child) .wp-block-post-content:has(> .wp-block-post-title:first-child + .wp-block-group) > .wp-block-group > :first-child {
	margin-block-start: 0 !important;
}
body.page:not(.page-child) .wp-block-post-content:has(> .wp-block-post-title:first-child + .wp-block-group) > .wp-block-group > p {
	padding-block: 0 !important;
}

/* Waarom DBLA?, "Thuis in twee werelden": the icons no longer centred above
   their titles but on the titles' inner edges, facing each other across
   the middle — the globe right-aligned in the left column, the flag
   left-aligned in the right column. */
.dbla-worlds > .wp-block-column:first-child > h3::before {
	background-position: right center !important;
}
.dbla-worlds > .wp-block-column:last-child > h3::before {
	background-position: left center !important;
}

/* Waarom DBLA?: the band "DBLA: anders dan een internationaal netwerk"
   without its globe — the title alone. */
.dbla-banner > h2::before {
	content: none !important;
}
.dbla-banner > h2 {
	display: block !important;
}

/* ============================================================
   DBLA — the menu on a phone (the overlay WordPress opens with the
   hamburger, below 600px). It filled only a narrow strip on the right, as
   one long list. Now it fills the screen: the items left-aligned across
   the full width, each on its own line between thin rules, in a size made
   for a thumb; the countries of "Actieve landen" in two columns under it,
   a little smaller and indented. The open and close buttons: no dark
   rectangle after a tap (a soft terracotta ring for the keyboard only).
   ============================================================ */
@media (max-width: 599px) {
	header .wp-block-navigation__responsive-container.is-menu-open {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--60) !important;
	}
	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch !important;
		width: 100%;
		padding-top: var(--wp--preset--spacing--60) !important;
	}
	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: stretch !important;
		justify-content: flex-start !important;
		width: 100%;
		gap: 0 !important;
	}
	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		align-items: stretch !important;
		width: 100%;
		border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	}
	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 0.85rem 0 !important;
		font-size: var(--wp--preset--font-size--large);
		text-align: left;
	}
	/* "Actieve landen": the countries in two columns, indented */
	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--wp--preset--spacing--40);
		width: 100%;
		padding: 0 0 0.85rem 1rem !important;
	}
	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.4rem 0 !important;
		font-size: var(--wp--preset--font-size--medium);
		text-align: left;
	}
	/* the small arrow next to "Actieve landen" is no use when the list is open */
	header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
		display: none !important;
	}
}
/* The hamburger and the close button: no rectangle after a tap or a click,
   a soft terracotta ring with the keyboard. */
header :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close):focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}
header :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1) !important;
	outline-offset: 3px;
	border-radius: 3px;
}

/* ============================================================
   DBLA — one column (phones, small tablets: below 782px, where WordPress
   stacks the columns): all text left-aligned. Centred titles, right-aligned
   columns and the icons above them all start at the left edge; one line
   for the eye to follow. The member cards and the labels on the map keep
   their own layout.
   ============================================================ */
@media (max-width: 781px) {
	.wp-block-post-content :is(h1, h2, h3, h4, h5, h6, p, li, figcaption, blockquote):not(.dbla-country-card *, .dbla-map__dot *),
	.wp-block-post-content .has-text-align-center:not(.dbla-country-card *),
	.wp-block-post-content .has-text-align-right:not(.dbla-country-card *),
	.dbla-contact,
	.dbla-contact :is(h2, h3, p, li) {
		text-align: left !important;
	}
	/* "Thuis in twee werelden": the globe and the flag at the left, above
	   their titles */
	.dbla-worlds > .wp-block-column > h3 {
		margin-inline: 0 !important;
	}
	.dbla-worlds > .wp-block-column > h3::before {
		background-position: left center !important;
	}
	/* Home: the globe under the introduction at the left too */
	.wp-block-post-content > .dbla-home-intro > p:last-child::after {
		margin-inline: 0 !important;
	}
	/* buttons start at the left */
	.wp-block-post-content .wp-block-buttons {
		justify-content: flex-start !important;
	}
}

/* "Ontmoet onze leden" on a phone: two member cards side by side instead of
   one wide card per row; the cards a little more compact (smaller photo,
   less room inside, the name and title a step smaller). */
@media (max-width: 599px) {
	.dbla-country-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: var(--wp--preset--spacing--30) !important;
	}
	.dbla-country-card {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) !important;
	}
	.dbla-country-card__photo {
		width: 84px;
		height: 84px;
	}
	.dbla-country-card__country {
		font-size: var(--wp--preset--font-size--medium) !important;
	}
	.dbla-country-card__name {
		font-size: 0.95rem;
	}
	.dbla-country-card__title {
		font-size: 0.8rem;
	}
}

/* ============================================================
   Waarom DBLA? on the smallest screens (below 600px): every text on the
   same left edge as the logo in the header (the header's side padding,
   spacing 40). The page's narrower centred columns (80% of the width) and
   the reading columns give way to one edge; the dark bands stay full
   width with their text on that edge; Contact DBLA under the page too.
   ============================================================ */
@media (max-width: 599px) {
	/* (the page content already has the side padding of spacing 40 itself:
	   its blocks need no margin of their own) */
	.wp-block-post-content.wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > :not(.dbla-banner, .dbla-better-banner) {
		box-sizing: border-box;
		width: auto !important;
		max-width: none !important;
		margin-inline: 0 !important;
		padding-inline: 0 !important;
	}
	/* the two columns of "DBLA en Nederlandse advocaten" one under the
	   other, each full width (on wide screens they are 50/50 mirrored) */
	.wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > h2 + .dbla-intro-cols:not(.dbla-worlds) > .wp-block-column:is(:first-child, :last-child) {
		flex: 1 1 100% !important;
	}
	.wp-block-post-content:has(> .dbla-worlds) > .dbla-banner {
		padding-inline: var(--wp--preset--spacing--40) !important;
	}
	.wp-block-post-content:has(> .dbla-worlds) > .dbla-banner > * {
		max-width: none !important;
		margin-inline: 0 !important;
	}
	.wp-block-post-content:has(> .dbla-worlds) > .dbla-better-banner > .alignwide {
		width: auto !important;
		margin-inline: var(--wp--preset--spacing--40) !important;
	}
	body:has(.dbla-worlds) .dbla-contact {
		padding-inline: var(--wp--preset--spacing--40) !important;
	}
	body:has(.dbla-worlds) .dbla-contact__inner {
		width: auto !important;
	}
}

/* One column (below 782px): the right-aligned columns of Waarom DBLA? (the
   first block, "Uw Nederlandse advocaat ter plaatse", and the left world,
   "Het land waar u zaken doet") left-aligned as well — their own rules are
   stronger than the general one above, so they are named here. */
@media (max-width: 781px) {
	.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title + .dbla-intro-cols > .wp-block-column:first-child :is(h2, h3, p),
	.wp-block-post-content .dbla-worlds > .wp-block-column:first-child :is(h2, h3, p) {
		text-align: left !important;
	}
}
@media (max-width: 781px) {
	/* the page title and the section titles, centred on wide screens */
	.wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > :is(.wp-block-post-title, h2) {
		text-align: left !important;
	}
	/* "Het land waar u zaken doet": its box no longer pushed to the right */
	.wp-block-post-content .dbla-worlds > .wp-block-column:first-child > h3 {
		margin-inline: 0 !important;
	}
}
@media (max-width: 781px) {
	/* the globe above "Het land waar u zaken doet" at the left too */
	.wp-block-post-content .dbla-worlds > .wp-block-column:first-child > h3::before {
		background-position: left center !important;
	}
}

/* ============================================================
   Phones (below 600px), every page: one left edge for everything — the
   edge of the text in Contact DBLA at the bottom, which is the header's
   side padding (spacing 40, the left edge of the logo). Contact DBLA
   itself moves to that edge on every page; on Home the members, "Wat
   biedt DBLA aan?" and the quote banner follow (the map, the title and
   the introduction already stand there).
   ============================================================ */
@media (max-width: 599px) {
	.dbla-contact {
		padding-inline: var(--wp--preset--spacing--40) !important;
	}
	.dbla-contact__inner {
		width: auto !important;
	}
	/* Home: "Wat biedt DBLA aan?" */
	body.home .wp-block-post-content > .dbla-aanbod {
		padding-inline: var(--wp--preset--spacing--40) !important;
	}
	body.home .wp-block-post-content > .dbla-aanbod > * {
		max-width: none !important;
		margin-inline: 0 !important;
	}
	/* Home: "Ontmoet onze leden" and the cards */
	body.home .wp-block-post-content > .alignfull:has(> #leden) {
		padding-inline: var(--wp--preset--spacing--40) !important;
	}
	body.home .wp-block-post-content > .alignfull:has(> #leden) > * {
		max-width: none !important;
		margin-inline: 0 !important;
	}
	/* the quote banner at the bottom of Home */
	.wp-block-post-content > .dbla-quote-banner > .alignwide {
		max-width: none !important;
		margin-inline: var(--wp--preset--spacing--40) !important;
	}
}

/* Home on a phone and a narrow tablet (the country list stands under the
   member cards there): the countries side by side, wrapping over a few
   lines, as small links with a little room between them — "Alle landen"
   first — instead of one long column. */
@media (max-width: 899px) {
	.dbla-cards-sidebar .dbla-guide-sidebar__list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem 1rem;
	}
	.dbla-cards-sidebar .dbla-guide-sidebar__list > li {
		margin: 0;
	}
	.dbla-cards-sidebar .dbla-guide-sidebar__list a {
		display: inline-block;
		padding: 0.2rem 0 !important;
	}
}

/* ============================================================
   Country pages on a phone (below 600px): the white business card at the
   top was squeezed into three narrow columns (their fixed proportions
   kept them side by side) with wide margins around it. Now the card and
   the title row above it use the full width between the page's side
   margins (the left edge of the logo), the three columns stack — photo,
   name and LinkedIn first, then the details — and the text is a step
   smaller.
   ============================================================ */
@media (max-width: 599px) {
	body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:is(:first-child, :has(.wp-block-social-links)) {
		width: auto !important;
		max-width: none !important;
		margin-inline: 0 !important;
	}
	body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) {
		padding: var(--wp--preset--spacing--30) 2rem !important;
		/* and room around the card itself, inside the page's margins */
		margin-inline: 1.75rem !important;
	}
	body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column,
	body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:has(.wp-block-social-links) {
		flex: 1 1 100% !important;
	}
	body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:not(:has(.wp-block-social-links)) > p {
		font-size: 0.875rem !important;
		line-height: 1.55;
	}
	body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:has(.wp-block-social-links) > :is(h1, h2, h3, h4, h5, h6) {
		font-size: var(--wp--preset--font-size--large) !important;
	}
	body.dbla-lawyer-page .wp-block-post-content > .wp-block-columns:has(.wp-block-social-links) > .wp-block-column:has(.wp-block-social-links) > p {
		font-size: 0.875rem !important;
	}
}

/* Country pages on a phone (below 600px): the whole page on the left edge
   of the logo — every block between the page's own side margins (no
   narrower, centred 80% blocks), less padding inside the boxes: the
   publications without side padding, the guide's white box and the card
   with 20px inside, like the card. The country list of the guides wraps
   side by side, as on Home. */
@media (max-width: 599px) {
	body.dbla-lawyer-page .wp-block-post-content.wp-block-post-content > * {
		box-sizing: border-box;
		width: auto !important;
		max-width: none !important;
		margin-inline: 0 !important;
	}
	/* "Publicaties van …" with the same inset as the text in the card */
	body.dbla-lawyer-page .wp-block-post-content > .wp-block-group:has(.lcp_catlist) {
		padding-inline: calc(1.75rem + 2rem) !important;
	}
	body.dbla-lawyer-page .wp-block-post-content > .wp-block-group:has(.lcp_catlist) :is(.wp-block-columns, .wp-block-column) {
		margin-inline: 0 !important;
		padding-inline: 0 !important;
	}
	body.dbla-lawyer-page .wp-block-post-content .dbla-guide-layout > .wp-block-group,
	body.dbla-lawyer-page .wp-block-post-content > .wp-block-group.has-background {
		padding: var(--wp--preset--spacing--30) !important;
	}
	body.dbla-lawyer-page .wp-block-post-content .dbla-guide-layout > .wp-block-group > *,
	body.dbla-lawyer-page .wp-block-post-content > .wp-block-group.has-background > * {
		max-width: none !important;
		margin-inline: 0 !important;
	}
	body.dbla-lawyer-page .dbla-guide-sidebar .dbla-guide-sidebar__list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem 1rem;
	}
}

/* "Juridische gids <country>" on two lines (narrow screens): the country
   moves to the second line as a whole (no word of "Verenigde Staten" left
   behind), its tinted box starting at the left edge (the space after
   "gids" keeps it apart when it stays on the first line), and the two
   lines a little further apart, so the country sits a touch lower. */
h2:has(> .dbla-guide-country) {
	line-height: 1.45 !important;
}
#juridische-gids .dbla-guide-country,
h2 > .dbla-guide-country {
	display: inline-block;
	margin-inline-start: 0 !important;
}

/* Home, "Wat biedt DBLA aan?": at the bottom of the dark band, centred, a
   small sign of two linked rings — DBLA orange and white, the Dutch side
   and the local one, held together (as the globe closes the introduction
   above it). */
body.home .wp-block-post-content > .dbla-aanbod::after {
	content: "";
	display: block;
	margin: var(--wp--preset--spacing--50) auto 0;
}

/* Waarom DBLA?, "Thuis in twee werelden": the two worlds as two white
   cards side by side, in the house card (white, the soft shadow, 5px
   corners), each with its icon, title and text at the left — like the
   member cards on Home. On a phone the cards stack. */
body .wp-block-post-content.wp-block-post-content > .dbla-worlds {
	gap: var(--wp--preset--spacing--50) !important;
	align-items: stretch !important;
}
body .wp-block-post-content.wp-block-post-content > .dbla-worlds > .wp-block-column {
	background: #ffffff;
	border-radius: 5px;
	box-shadow: 6px 6px 9px 0 rgb(84 71 71 / 0.2);
	padding: var(--wp--preset--spacing--40) !important;
}
body .wp-block-post-content.wp-block-post-content > .dbla-worlds > .wp-block-column :is(h3, p) {
	text-align: left !important;
}
body .wp-block-post-content.wp-block-post-content > .dbla-worlds > .wp-block-column > h3 {
	width: auto !important;
	margin-inline: 0 !important;
}
body .wp-block-post-content.wp-block-post-content > .dbla-worlds > .wp-block-column > h3::before {
	background-position: left center !important;
}

/* Waarom DBLA?, the first block under the title: both columns left-aligned
   ("Uw Nederlandse advocaat ter plaatse" was right-aligned). */
body .wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title + .dbla-intro-cols > .wp-block-column:is(:first-child, :last-child) :is(h2, h3, p) {
	text-align: left !important;
}
/* …and its two columns lined up with the text in the two white cards of
   "Thuis in twee werelden" under it: the same room between the columns
   (spacing 50) and the same inset as the cards' padding (spacing 40). */
body .wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title + .dbla-intro-cols {
	gap: var(--wp--preset--spacing--50) !important;
}
body .wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title + .dbla-intro-cols > .wp-block-column:is(:first-child, :last-child) {
	padding-inline: var(--wp--preset--spacing--40) !important;
}
@media (max-width: 599px) {
	body .wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title + .dbla-intro-cols > .wp-block-column:is(:first-child, :last-child) {
		padding-inline: 0 !important;
	}
}

/* Waarom DBLA?, the first two blocks with more air: a little more room
   under the page title, a clear pause before "Thuis in twee werelden",
   the cards close enough under their title to belong to it, and a clear
   pause again before the band "DBLA: anders dan …". The paragraphs a touch
   more open. */
body.page:not(.page-child):not(.dbla-lawyer-page) .wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title.wp-block-post-title {
	margin-block-end: var(--wp--preset--spacing--50) !important;
}

body .wp-block-post-content.wp-block-post-content > .dbla-worlds {
	margin-block: 0 !important;
}

body .wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > :is(.wp-block-post-title + .dbla-intro-cols, .dbla-worlds) p {
	line-height: 1.7 !important;
}

/* Waarom DBLA?, "Thuis in twee werelden": the title and the two white cards
   on a band a little darker than the page — a warm light grey across the
   full width (a shadow spread out to the sides and clipped, so title and
   cards keep their own width), so the white cards stand out from it. */

body .wp-block-post-content.wp-block-post-content > h2:has(+ .dbla-worlds) {
	margin-block-end: 0 !important;
}

/* Contact DBLA: the mail address as a button again, as on dbla.nl — white
   on terracotta (5.9 : 1), small rounded corners, the site's soft shadow;
   ink on hover and keyboard focus. (footer.… in front: it outweighs the
   footer's own link colour.) */
footer.wp-block-template-part .dbla-contact__button a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 3px;
	background: var(--wp--preset--color--accent-1);
	color: #ffffff !important;
	text-decoration: none !important;
	box-shadow: 6px 6px 9px 0 rgb(84 71 71 / 0.2);
	transition: background-color 0.2s;
}
footer.wp-block-template-part .dbla-contact__button a:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--contrast);
	text-decoration: none !important;
	outline: none;
}
footer.wp-block-template-part .dbla-contact__button {
	margin-block-start: var(--wp--preset--spacing--30) !important;
}

/* Waarom DBLA?, the backgrounds of the first two blocks swapped: the soft
   grey band now lies behind the first block (under the title: "Uw
   Nederlandse advocaat ter plaatse" | "Voorkomen is beter dan
   oplossen"); "Thuis in twee werelden" with its two white cards stands on
   the page itself again. */
body .wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title + .dbla-intro-cols {
	padding-block: var(--wp--preset--spacing--60) !important;
}
body .wp-block-post-content.wp-block-post-content > h2:has(+ .dbla-worlds),
body .wp-block-post-content.wp-block-post-content > .dbla-worlds {
	background: none !important;
	box-shadow: none !important;
	clip-path: none !important;
}
body .wp-block-post-content.wp-block-post-content > h2:has(+ .dbla-worlds) {
	margin-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) !important;
	padding-block: 0 !important;
}
body .wp-block-post-content.wp-block-post-content > .dbla-worlds {
	padding-block-end: 0 !important;
}
/* room again between the cards and the dark band under them */
body .wp-block-post-content.wp-block-post-content > .dbla-worlds + .dbla-banner {
	margin-block-start: var(--wp--preset--spacing--70) !important;
}
/* …and the page title "Waarom DBLA?" on the same band: title and first
   block one grey field under the header. */
body.page:not(.page-child):not(.dbla-lawyer-page) .wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title.wp-block-post-title {
	margin-block-end: 0 !important;
	padding-block-end: var(--wp--preset--spacing--20) !important;
}
body .wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title + .dbla-intro-cols {
	margin-block-start: 0 !important;
	padding-block-start: var(--wp--preset--spacing--30) !important;
}

/* Waarom DBLA?: under the page title, centred on the grey band, the sign of
   two linked rings from Home — here the second ring drawn as a globe (in
   ink, with its meridian and parallels; the white of Home would vanish on
   the grey), a little larger. The orange ring passes over the globe at the
   top and under it at the bottom: the Netherlands and the world, held
   together. The gaps are cut in the light grey of the page. */
body.page:not(.page-child):not(.dbla-lawyer-page) .wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title::after {
	display: block;
	width: 4.5rem;
	height: 2.9rem;
	margin: var(--wp--preset--spacing--30) auto 0;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36'%3E%3Cg fill='none' stroke-width='2.2'%3E%3Cg stroke='%233A78C2'%3E%3Cg stroke-width='1.1'%3E%3Cellipse cx='36' cy='18' rx='6' ry='14'/%3E%3Cpath d='M22 18H50M24.3 10.5H47.7M24.3 25.5H47.7'/%3E%3C/g%3E%3Ccircle cx='36' cy='18' r='14'/%3E%3C/g%3E%3Ccircle cx='20' cy='18' r='14' stroke='%23F7F7F7' stroke-width='5.6'/%3E%3Ccircle cx='20' cy='18' r='14' stroke='%23F57D32' stroke-width='2.9'/%3E%3Cpath d='M31.21 31.16A14 14 0 0 1 25.28 27' stroke='%23F7F7F7' stroke-width='5.6'/%3E%3Cpath d='M31.21 31.16A14 14 0 0 1 25.28 27' stroke='%233A78C2'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 781px) {
	body.page:not(.page-child):not(.dbla-lawyer-page) .wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title::after {
		margin-inline: 0;
	}
}

/* Waarom DBLA?, the first block: its two columns as white cards, like the
   two worlds under it — white, the soft shadow, 5px corners, the same
   room inside and between them, equally tall. */
body .wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title + .dbla-intro-cols {
	align-items: stretch !important;
}
body .wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title + .dbla-intro-cols > .wp-block-column:is(:first-child, :last-child) {
	background: #ffffff;
	border-radius: 5px;
	box-shadow: 6px 6px 9px 0 rgb(84 71 71 / 0.2);
	padding: var(--wp--preset--spacing--40) !important;
}
@media (max-width: 599px) {
	body .wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title + .dbla-intro-cols > .wp-block-column:is(:first-child, :last-child) {
		padding: var(--wp--preset--spacing--40) !important;
	}
}

/* Waarom DBLA?: the grey band behind the title and the first block taken
   away again — the title, the sign and the two white cards on the page
   itself. */
body.page:not(.page-child):not(.dbla-lawyer-page) .wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title.wp-block-post-title,
body .wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title + .dbla-intro-cols {
	background: none !important;
	box-shadow: none !important;
	clip-path: none !important;
}
/* …and less room above "Thuis in twee werelden": without the band, the
   first block's own padding below is no longer needed. */
body .wp-block-post-content.wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title + .dbla-intro-cols {
	padding-block-end: 0 !important;
}
body .wp-block-post-content.wp-block-post-content > h2.wp-block-heading:has(+ .dbla-worlds) {
	margin-block-start: var(--wp--preset--spacing--60) !important;
}

/* Disclaimer: "Laatst bijgewerkt: …" at the bottom (inc/dbla.php, 20), in
   the page's reading column, small and quiet, after a thin line. */
.wp-block-post-content > .dbla-updated {
	box-sizing: border-box;
	width: calc(100% - 2 * var(--wp--preset--spacing--40));
	max-width: 48rem !important;
	margin: var(--wp--preset--spacing--60) auto 0 !important;
	padding: var(--wp--preset--spacing--30) 0 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--accent-4);
}

/* Waarom DBLA?, "Thuis in twee werelden": the globe and the flag out of the
   cards, above them — each centred over its card, in the room between the
   title and the cards. */
body .wp-block-post-content.wp-block-post-content > .dbla-worlds > .wp-block-column > h3::before {
	content: none !important;
}

body .wp-block-post-content.wp-block-post-content > .dbla-worlds > .wp-block-column {
	position: relative;
}
body .wp-block-post-content.wp-block-post-content > .dbla-worlds > .wp-block-column::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 3.5rem;
	height: 3.5rem;
	transform: translateX(-50%);
	background: center / contain no-repeat;
	pointer-events: none;
}
body .wp-block-post-content.wp-block-post-content > .dbla-worlds > .wp-block-column:first-child::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='21' fill='%233A78C2'/%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.6' opacity='.9'%3E%3Cellipse cx='24' cy='24' rx='9' ry='21'/%3E%3Cpath d='M3 24H45M6.5 13H41.5M6.5 35H41.5M24 3V45'/%3E%3C/g%3E%3C/svg%3E");
}
body .wp-block-post-content.wp-block-post-content > .dbla-worlds > .wp-block-column:last-child::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%23AE1C28' d='M0 0H9V2H0Z'/%3E%3Cpath fill='%23FFFFFF' d='M0 2H9V4H0Z'/%3E%3Cpath fill='%2321468B' d='M0 4H9V6H0Z'/%3E%3C/svg%3E");
	background-size: auto 2.2rem;
	filter: drop-shadow(0 0 0.5px rgb(29 31 37 / 0.35));
}
/* stacked on a phone: the second icon needs its room above the second
   card too */

/* Waarom DBLA?: less room under "Thuis in twee werelden", above the globe
   and the flag. */
body .wp-block-post-content.wp-block-post-content > h2.wp-block-heading:has(+ .dbla-worlds) {
	margin-block-end: var(--wp--preset--spacing--20) !important;
}

/* Waarom DBLA?: the sign of the two linked rings (orange ring and globe)
   moved from under the page title to above "Thuis in twee werelden",
   centred (at the left on a phone, with the title). */
body.page:not(.page-child):not(.dbla-lawyer-page) .wp-block-post-content:has(> .dbla-worlds) > .wp-block-post-title::after {
	content: none !important;
}
body .wp-block-post-content.wp-block-post-content > h2.wp-block-heading:has(+ .dbla-worlds)::before {
	display: block;
	width: 4.5rem;
	height: 2.9rem;
	margin: 0 auto var(--wp--preset--spacing--30);
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36'%3E%3Cg fill='none' stroke-width='2.2'%3E%3Cg stroke='%233A78C2'%3E%3Cg stroke-width='1.1'%3E%3Cellipse cx='36' cy='18' rx='6' ry='14'/%3E%3Cpath d='M22 18H50M24.3 10.5H47.7M24.3 25.5H47.7'/%3E%3C/g%3E%3Ccircle cx='36' cy='18' r='14'/%3E%3C/g%3E%3Ccircle cx='20' cy='18' r='14' stroke='%23F7F7F7' stroke-width='5.6'/%3E%3Ccircle cx='20' cy='18' r='14' stroke='%23F57D32' stroke-width='2.9'/%3E%3Cpath d='M31.21 31.16A14 14 0 0 1 25.28 27' stroke='%23F7F7F7' stroke-width='5.6'/%3E%3Cpath d='M31.21 31.16A14 14 0 0 1 25.28 27' stroke='%233A78C2'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 781px) {
	body .wp-block-post-content.wp-block-post-content > h2.wp-block-heading:has(+ .dbla-worlds)::before {
		margin-inline: 0;
	}
}
/* …mirrored: the globe on the left, the orange ring on the right. */
body .wp-block-post-content.wp-block-post-content > h2.wp-block-heading:has(+ .dbla-worlds)::before {
	transform: scaleX(-1);
}

/* Waarom DBLA?: more room between the globe and the flag and the cards
   under them (spacing 50 instead of 30). */
body .wp-block-post-content.wp-block-post-content > .dbla-worlds {
	padding-block-start: calc(3.5rem + var(--wp--preset--spacing--50)) !important;
}
body .wp-block-post-content.wp-block-post-content > .dbla-worlds > .wp-block-column::after {
	top: calc(-3.5rem - var(--wp--preset--spacing--50));
}
@media (max-width: 781px) {
	body .wp-block-post-content.wp-block-post-content > .dbla-worlds > .wp-block-column + .wp-block-column {
		margin-block-start: calc(3.5rem + var(--wp--preset--spacing--50) + var(--wp--preset--spacing--30)) !important;
	}
}

/* "Ontmoet onze leden": each card is one link as a whole — the member's
   link (photo, name, title) covers the card (inc/dbla.php no longer links
   the country and the flag). On hover and keyboard focus the card takes a
   light terracotta tint, the name turns terracotta and is underlined; with
   the keyboard a terracotta outline around the whole card. */
.dbla-country-card {
	position: relative;
	transition: background-color 0.2s ease;
}
.dbla-country-card__lawyers a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.dbla-country-card:has(a:is(:hover, :focus-visible)) {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 6%, #ffffff);
}
.dbla-country-card:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
}
.dbla-country-card__lawyers a:focus-visible {
	outline: none;
}
.dbla-country-card:has(a:is(:hover, :focus-visible)) .dbla-country-card__flag-img {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.dbla-country-card { transition: none; }
}

/* Home: under the introduction, in place of the orange globe, the sign of
   the two linked rings from Waarom DBLA? (orange ring and blue globe), the
   other way round than there: here the orange ring on the left, the globe
   on the right, and the globe in ink (#1D1F25). */
.wp-block-post-content > .dbla-home-intro > p:last-child::after {
	width: 4.5rem !important;
	height: 2.9rem !important;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36'%3E%3Cg fill='none' stroke-width='2.2'%3E%3Cg stroke='%231D1F25'%3E%3Cg stroke-width='1.1'%3E%3Cellipse cx='36' cy='18' rx='6' ry='14'/%3E%3Cpath d='M22 18H50M24.3 10.5H47.7M24.3 25.5H47.7'/%3E%3C/g%3E%3Ccircle cx='36' cy='18' r='14'/%3E%3C/g%3E%3Ccircle cx='20' cy='18' r='14' stroke='%23F7F7F7' stroke-width='5.6'/%3E%3Ccircle cx='20' cy='18' r='14' stroke='%23F57D32' stroke-width='2.9'/%3E%3Cpath d='M31.21 31.16A14 14 0 0 1 25.28 27' stroke='%23F7F7F7' stroke-width='5.6'/%3E%3Cpath d='M31.21 31.16A14 14 0 0 1 25.28 27' stroke='%231D1F25'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Home, "Wat biedt DBLA aan?": at the bottom of the dark band, centred, the
   DBLA logo (the file as it is, square), as tall as the sign of the rings
   under the introduction — in place of the two plain rings. */
body.home .wp-block-post-content > .dbla-aanbod::after {
	width: 2.9rem !important;
	height: 2.9rem !important;
	border-radius: 3px;
	background: center / contain no-repeat url("/wp-content/uploads/2024/10/cropped-cropped-Logo_DBLA_main-120x120-1.png") !important;
}

/* Waarom DBLA?: no sign of the two rings above "Thuis in twee werelden". */
body .wp-block-post-content.wp-block-post-content > h2.wp-block-heading:has(+ .dbla-worlds)::before {
	content: none !important;
}

/* Waarom DBLA?: at the bottom of "Thuis in twee werelden", centred under the
   two cards, the sign of the two rings from Home, mirrored (the globe in
   ink on the left, the orange ring on the right), the same size. Drawn as the block's own
   background at its foot, with room made for it below the cards. */

@media (max-width: 781px) {
	body .wp-block-post-content.wp-block-post-content.wp-block-post-content > .dbla-worlds {
		background-position: left bottom !important;
	}
}

/* ============================================================
   Waarom DBLA?, "Thuis in twee werelden": one rhythm for the whole block,
   replacing the separate tweaks above — the same pause before the block
   as after it (spacing 70), and inside it one step (spacing 40) between
   title, icons and cards, a slightly larger one (spacing 50) before the
   sign of the rings at the foot.
   ============================================================ */
body .wp-block-post-content.wp-block-post-content.wp-block-post-content > h2.wp-block-heading:has(+ .dbla-worlds) {
	margin-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40) !important;
	padding-block: 0 !important;
}
body .wp-block-post-content.wp-block-post-content.wp-block-post-content > .dbla-worlds {
	margin-block: 0 !important;
	padding-block-start: calc(3.5rem + var(--wp--preset--spacing--40)) !important;
}
body .wp-block-post-content.wp-block-post-content.wp-block-post-content > .dbla-worlds > .wp-block-column::after {
	top: calc(-3.5rem - var(--wp--preset--spacing--40)) !important;
}
body .wp-block-post-content.wp-block-post-content.wp-block-post-content > .dbla-worlds + .dbla-banner {
	margin-block-start: var(--wp--preset--spacing--70) !important;
}
@media (max-width: 781px) {
	body .wp-block-post-content.wp-block-post-content.wp-block-post-content > .dbla-worlds > .wp-block-column + .wp-block-column {
		margin-block-start: calc(3.5rem + 2 * var(--wp--preset--spacing--40)) !important;
	}
}

/* Waarom DBLA?: the sign of the two rings moves from the foot of "Thuis in
   twee werelden" to the title of the dark band under it, "DBLA: anders dan
   een internationaal netwerk": in front of the title, on one line with it,
   the globe in white, the ring in a lighter orange (#F9A46E) so it sits
   more softly on the dark blue, the gaps cut in that blue. */
body .wp-block-post-content.wp-block-post-content.wp-block-post-content > .dbla-worlds {
	background: none !important;
	padding-block-end: 0 !important;
}
body .wp-block-post-content.wp-block-post-content > .dbla-banner > h2.wp-block-heading {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}
body .wp-block-post-content.wp-block-post-content > .dbla-banner > h2.wp-block-heading::before {
	content: "" !important;
	flex: none;
	display: block;
	width: 3.75rem;
	height: 2.4rem;
	margin: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36'%3E%3Cg transform='translate%2856 0%29 scale%28-1 1%29'%3E%3Cg fill='none' stroke-width='2.2'%3E%3Cg stroke='%23FFFFFF'%3E%3Cg stroke-width='1.1'%3E%3Cellipse cx='36' cy='18' rx='6' ry='14'/%3E%3Cpath d='M22 18H50M24.3 10.5H47.7M24.3 25.5H47.7'/%3E%3C/g%3E%3Ccircle cx='36' cy='18' r='14'/%3E%3C/g%3E%3Ccircle cx='20' cy='18' r='14' stroke='%230F2947' stroke-width='5.6'/%3E%3Ccircle cx='20' cy='18' r='14' stroke='%23F9A46E' stroke-width='2.9'/%3E%3Cpath d='M31.21 31.16A14 14 0 0 1 25.28 27' stroke='%230F2947' stroke-width='5.6'/%3E%3Cpath d='M31.21 31.16A14 14 0 0 1 25.28 27' stroke='%23FFFFFF'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* …the sign hanging in the left margin of the band, so the title starts on
   the same left edge as the text under it. Where there is no room in the
   margin (narrower screens) it stands above the title. */
body .wp-block-post-content.wp-block-post-content > .dbla-banner > h2.wp-block-heading {
	display: block !important;
	position: relative;
}
body .wp-block-post-content.wp-block-post-content > .dbla-banner > h2.wp-block-heading::before {
	top: 50%;
	right: calc(100% + var(--wp--preset--spacing--50));
}
@media (max-width: 1100px) {
	body .wp-block-post-content.wp-block-post-content > .dbla-banner > h2.wp-block-heading::before {
		position: static;
		transform: none;
		margin-block-end: var(--wp--preset--spacing--20);
	}
}
/* …now just above the title, on its left edge, on every screen. */
body .wp-block-post-content.wp-block-post-content > .dbla-banner > h2.wp-block-heading::before {
	position: static !important;
	margin-block-end: var(--wp--preset--spacing--20) !important;
}
/* …mirrored: the orange ring on the left, the white globe on the right. */
body .wp-block-post-content.wp-block-post-content > .dbla-banner > h2.wp-block-heading::before {
	transform: scaleX(-1) !important;
}

/* DBLA — the bio under a business card (Indonesië's two, Cambodja), class
   dbla-bio on its group: room above and below, the paragraphs apart, the
   text starting on the same line as the text in the card. */
body.dbla-lawyer-page .wp-block-post-content > .dbla-bio {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70) !important;
	padding-inline: var(--wp--preset--spacing--40) !important;
}
body.dbla-lawyer-page .wp-block-post-content > .dbla-bio > p {
	max-width: 46rem;
	margin-inline: 0 auto !important;
	margin-block: 0 !important;
	line-height: 1.7;
}
body.dbla-lawyer-page .wp-block-post-content > .dbla-bio > p + p {
	margin-block-start: 1.1em !important;
}
/* Phones: the bio on the logo edge, like the title — a long text needs
   the full width. */
@media (max-width: 599px) {
	body.dbla-lawyer-page .wp-block-post-content > .dbla-bio {
		padding-inline: 0 !important;
	}
}

/* DBLA — printing (3 Nov 2026): the text stood against the edge of the
   paper. Full-width blocks pull themselves outward by the page's side
   padding (negative margins on .alignfull); on paper that put the text up
   to 9 mm outside the page margins. Here no side padding to pull from, no
   negative margins, the section headings of a guide in line with the text,
   and a little more room around the page. */
@media print {
	/* The side margins as padding on the page content, not as page margins:
	   Chrome's print dialog can set those to "none" or "minimal" and then
	   the text stood against the edge again. Top and bottom stay page
	   margins, so they repeat on every sheet. */
	@page {
		margin: 30mm 0;
	}
	/* Header and footer on every sheet (Chrome and Edge): the text comes
	   from assets/js/dbla-print.js, the look from here. The margin boxes
	   don't inherit from the page, so the typeface is named in full. */
	@page {
		@top-left {
			font-family: "Readex Pro", sans-serif;
			font-size: 8pt;
			color: #444444;
			padding-left: 18mm;
		}
		@top-right {
			font-family: "Readex Pro", sans-serif;
			font-size: 8pt;
			color: #444444;
			padding-right: 18mm;
		}
		@bottom-left {
			font-family: "Readex Pro", sans-serif;
			font-size: 8pt;
			color: #444444;
			padding-left: 18mm;
		}
		@bottom-right {
			font-family: "Readex Pro", sans-serif;
			font-size: 8pt;
			color: #444444;
			padding-right: 18mm;
		}
	}
	html body main {
		padding-inline: 18mm !important;
	}
	html body {
		--wp--style--root--padding-left: 0px !important;
		--wp--style--root--padding-right: 0px !important;
	}
	main .alignfull,
	main .alignwide {
		margin-inline: 0 !important;
	}
	.dbla-accordion__header {
		margin-inline: 0 !important;
		padding-inline: 0 !important;
	}
	/* No shadows on paper. The general rule higher up (`*`) lost against
	   the cards' own shadows, which carry !important with a more specific
	   selector (the business card, the white house cards). :not(#…) gives
	   this rule the weight of an id, so it wins everywhere. */
	html:not(#dbla-print) *,
	html:not(#dbla-print) *::before,
	html:not(#dbla-print) *::after {
		box-shadow: none !important;
		text-shadow: none !important;
		filter: none !important;
	}
}