/*
Theme Name: Ollie Legal
Theme URI: https://example.com/ollie-legal
Description: Child theme van Ollie voor Van Doorn & Meijer Advocaten. Filmische, klassieke uitstraling met bijna zwart, marineblauw en gedempt goud.
Author: Van Doorn & Meijer Advocaten
Template: ollie
Version: 3.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: ollie-legal
*/

/* ==========================================================================
   1. Lettertype
   ========================================================================== */

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/cormorant-garamond-variable.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. Variabelen
   Eén stapelvolgorde en één verticale schaal voor de hele site.
   ========================================================================== */

:root {
	--legal-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
	--legal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Verticale ritme. Op mobiel minder lucht, nooit zo weinig dat secties
	   tegen elkaar plakken. */
	--legal-section-y: clamp(3.5rem, 7vw, 8rem);
	--legal-gutter: clamp(1.25rem, 4vw, 3rem);
	/* Deze twee waarden sturen alleen de footer van het mobiele menu. */
	--legal-drawer-social-gap: clamp(2.5rem, 8vw, 3.5rem);

	/* Overlap blijft ruim onder de grens van 8rem. */
	--legal-overlap: clamp(2rem, 5vw, 6rem);

	/* Stapelvolgorde. Alles hieronder, de header altijd bovenop. */
	--z-media: 0;
	--z-scrim: 1;
	--z-scrim-2: 2;
	--z-content: 4;
	--z-header: 1000;
}

/* ==========================================================================
   3. Ritme en breedte
   ========================================================================== */

.legal-section {
	padding-block: var(--legal-section-y);
	padding-inline: var(--legal-gutter);
	margin-block: 0;
}

.legal-section--tight {
	padding-block: calc(var(--legal-section-y) * 0.6);
}

.legal-section--flush-top {
	padding-top: 0;
}

/* De contentband. Elke sectie, ook een cover, houdt dezelfde linkerlijn aan.
   Core zet de inner container van een cover met een eigen contentpositie op
   margin:0, met een selector van vier klassen diep; daar gaat de herhaalde
   klasse hieronder overheen. Voor z-index gaat dat niet op: core forceert
   daar z-index:1 met een selector van zes klassen, precies de waarde die de
   scrim ook heeft, waardoor de scrim op DOM-volgorde boven de tekst kwam.
   Dat is alleen met !important te winnen. */
.legal-band {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

body .wp-block-cover.legal-hero > .wp-block-cover__inner-container.wp-block-cover__inner-container.wp-block-cover__inner-container,
body .wp-block-cover.legal-cta > .wp-block-cover__inner-container.wp-block-cover__inner-container.wp-block-cover__inner-container {
	position: relative;
	z-index: var(--z-content) !important;
}

/* Core maakt de inner-container bij een links geplaatste Cover `width: auto`.
   Dat is correct zonder de toggle, maar voorkomt dat een ingeschakelde
   constrained layout zijn globale contentbreedte kan centreren. */
body .wp-block-cover.legal-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container.is-layout-constrained,
body .wp-block-cover.legal-cta.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container.is-layout-constrained {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* Verticale afstand binnen een tekstkolom, overal gelijk. */
.legal-stack-sm > * + * {
	margin-top: clamp(0.85rem, 1.5vw, 1.25rem);
}

.legal-stack-md > * + * {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ==========================================================================
   4. Typografie
   ========================================================================== */

body {
	font-size: 1.05rem;
	line-height: 1.7;
}

/* Nooit een woord in tweeën. Geldt voor alles, ook voor wat het moederthema
   of core op break-word zet. */
html,
body,
body *,
body *::before,
body *::after {
	-webkit-hyphens: none;
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
	word-wrap: normal;
}

h1, h2, h3,
.wp-block-post-title,
.legal-quote,
.legal-bignum,
.has-secondary-font-family {
	font-family: var(--legal-serif);
	font-weight: 300;
	letter-spacing: 0.01em;
	line-height: 1.08;
	text-wrap: balance;
}

h4, h5, h6 {
	font-family: var(--legal-serif);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.3;
}

p, li {
	line-height: 1.7;
}

.wp-block-list {
	line-height: 1.7;
}

/* Klein bovenkopje. Goud donker op lichte vlakken, goud licht op donkere.
   Beide zitten ruim boven 4.5:1. */
.legal-eyebrow {
	font-size: 0.85rem !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	line-height: 1.5;
	color: var(--wp--preset--color--accent-ink);
	margin-bottom: 0.4rem;
}

.wp-block-cover .legal-eyebrow,
.has-main-background-color .legal-eyebrow,
.has-primary-alt-background-color .legal-eyebrow,
.legal-panel--dark .legal-eyebrow {
	color: var(--wp--preset--color--primary-accent);
}

/* Tekstlink met uitlopende onderlijn. */
.legal-textlink a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	padding-bottom: 0.5rem;
	color: var(--wp--preset--color--accent-ink);
}

.wp-block-cover .legal-textlink a,
.has-main-background-color .legal-textlink a,
.has-primary-alt-background-color .legal-textlink a,
.legal-panel--dark .legal-textlink a {
	color: var(--wp--preset--color--primary-accent);
}

.legal-textlink a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.5rem;
	height: 1px;
	background-color: currentColor;
	transition: width 0.5s var(--legal-ease);
}

.legal-textlink a:hover::after,
.legal-textlink a:focus-visible::after {
	width: 100%;
}

/* Uitspraak over de volle breedte. */
.legal-quote {
	font-size: clamp(1.8rem, 4.6vw, 3.9rem);
	line-height: 1.12;
}

/* Groot getal als grafisch element. Het krijgt zijn eigen regelhoogte, zodat
   het nooit in de sectie eronder doorloopt. */
.legal-bignum {
	font-size: clamp(3.5rem, 11vw, 9rem);
	line-height: 1;
	letter-spacing: -0.01em;
	display: block;
	margin: 0;
}

.legal-rownum {
	font-family: var(--legal-serif);
	font-size: clamp(2.2rem, 4.5vw, 3.6rem);
	line-height: 1.1;
	font-weight: 300;
	color: var(--wp--preset--color--accent-ink);
	margin: 0;
}

.has-main-background-color .legal-rownum,
.has-primary-alt-background-color .legal-rownum,
.legal-panel--dark .legal-rownum,
.wp-block-cover .legal-rownum {
	color: var(--wp--preset--color--primary-accent);
}

/* ==========================================================================
   5. Header, altijd boven alles
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	isolation: isolate;
	background-color: var(--wp--preset--color--main);
	border-bottom: 1px solid rgba(176, 138, 74, 0.28);
	color: var(--wp--preset--color--base);
	transition: background-color 0.45s var(--legal-ease),
		border-color 0.45s var(--legal-ease);
}

/* De header houdt dezelfde goot aan als elke sectie, zodat het logo en het
   menu op dezelfde marge staan als de inhoud eronder. */
.site-header .legal-header-bar {
	padding-inline: var(--legal-gutter);
}

/* De navigatie is een vaste laag boven de hero, nooit een documentrij boven
   de hero. De brede selector wint ook van de layoutregels van het parent. */
body.legal-has-hero .wp-site-blocks > header.site-header.site-header {
	position: fixed !important;
	top: var(--wp-admin--admin-bar--height, 0px) !important;
	left: 0;
	right: 0;
	margin: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	border-bottom-color: transparent !important;
	z-index: 9999 !important;
	color: var(--wp--preset--color--base) !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* WordPress verplaatst de documentcanvas voor ingelogde gebruikers al onder
   de adminbar. Een tweede offset op de vaste header maakt dan een loze strook
   tussen adminbar en navigatie. */
body.admin-bar.legal-has-hero .wp-site-blocks > header.site-header.site-header {
	top: 0 !important;
}

body.legal-has-hero .wp-site-blocks > header.site-header.is-scrolled {
	background-color: rgba(11, 13, 18, 0.97) !important;
	border-bottom-color: rgba(176, 138, 74, 0.35) !important;
	-webkit-backdrop-filter: saturate(150%) blur(10px);
	backdrop-filter: saturate(150%) blur(10px);
}

/* De vaste header neemt geen ruimte meer in. Zonder deze reset krijgt main
   alsnog de globale block-gap van WordPress en ontstaat er een witte strook
   boven de hero. */
body.legal-has-hero .wp-site-blocks > main {
	margin-block-start: 0 !important;
}

/* A fallback for a page template saved in the database with Ollie's post
   title block. The title already lives in the hero and must not create a
   second white strip above it. */
body.legal-has-hero .wp-site-blocks > main > .wp-block-post-title,
body.legal-has-hero .wp-site-blocks > main > h1.wp-block-post-title {
	display: none !important;
}

/* Template-part gaps should never leave an empty pale band before the footer. */
body .wp-site-blocks > main + footer.site-footer {
	margin-block-start: 0 !important;
}

/* Core zet de menu-items met drie klassen op color:inherit. Daar moet het
   child theme overheen, anders erven ze het grijsblauw van de body en is er
   in beide staten niets te lezen. */
.site-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content,
.site-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content .wp-block-navigation-item__label,
.site-header .wp-block-navigation a,
.site-header .wp-block-site-title a {
	color: var(--wp--preset--color--base) !important;
	text-decoration: none;
	text-shadow: 0 1px 12px rgba(11, 13, 18, 0.9);
}

.wp-block-site-title a {
	font-family: var(--legal-serif);
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: 0.06em;
}

.site-header .wp-block-navigation a,
.site-header .wp-block-navigation .wp-block-navigation-item__content {
	text-transform: uppercase;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	transition: color 0.3s var(--legal-ease);
}

.site-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible,
.site-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary-accent);
}

.site-header .wp-block-navigation__responsive-container-open {
	margin-left: auto;
	padding: 0.5rem;
	color: var(--wp--preset--color--base) !important;
}

.site-header .wp-block-navigation__responsive-container-open svg {
	fill: currentColor;
}

/* Mobiel menu. Het overlaypaneel is standaard wit; met witte letters daarin
   is er niets te lezen. Daarom hier expliciet donker met lichte tekst. */
.wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100vw;
	height: 100svh;
	min-height: 100svh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--wp--preset--color--main) !important;
	color: var(--wp--preset--color--base) !important;
	padding: 6rem var(--legal-gutter) 3rem;
	z-index: calc(var(--z-header) + 10);
}

.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
	color: var(--wp--preset--color--base) !important;
	font-family: var(--legal-serif);
	font-size: 1.75rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0.02em;
}

.wp-block-navigation__responsive-container.is-menu-open a:hover {
	color: var(--wp--preset--color--primary-accent) !important;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: currentColor !important;
}

.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	background-color: transparent;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--base) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.legal-mobile-drawer-footer {
	display: none;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--large);
	border-top: 1px solid var(--wp--preset--color--border-dark);
	color: var(--wp--preset--color--main-accent);
}

/* De naam komt uit de sitetitel en wordt door legal-motion.js in de drawer
   gezet. Zo blijft de mobiele navigatie herkenbaar als eigen onderdeel van
   de site, zonder een tweede, handmatig bijgehouden logo. */
.legal-mobile-drawer-brand {
	display: none;
	margin: 0 0 var(--wp--preset--spacing--large);
	color: var(--wp--preset--color--base);
	font-family: var(--legal-serif);
	font-size: clamp(1.25rem, 6vw, 1.75rem);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.15;
}

.wp-block-navigation__responsive-container.is-menu-open .legal-mobile-drawer-brand {
	display: block;
}

.wp-block-navigation__responsive-container.is-menu-open .legal-mobile-drawer-footer {
	display: block;
}

.legal-mobile-drawer-copyright {
	margin: 0;
	padding-bottom: var(--legal-drawer-social-gap);
	font-size: 0.8rem;
	line-height: 1.5;
}

.legal-mobile-drawer-socials {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.legal-mobile-drawer-socials a {
	display: grid;
	width: 2.5rem;
	height: 2.5rem;
	place-items: center;
	border: 1px solid var(--wp--preset--color--border-dark);
	border-radius: 50%;
	color: var(--wp--preset--color--base) !important;
}

.legal-mobile-drawer-socials a:hover,
.legal-mobile-drawer-socials a:focus-visible {
	border-color: var(--wp--preset--color--primary-accent);
	color: var(--wp--preset--color--primary-accent) !important;
}

.legal-mobile-drawer-socials svg {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

/* ==========================================================================
   6. Hero
   De verduistering ligt onder de tekst, nooit erover.
   ========================================================================== */

.legal-hero,
.legal-cta {
	position: relative;
	isolation: isolate;
}

.legal-hero {
	min-height: 100svh;
}

.legal-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: var(--z-scrim);
	background: linear-gradient(
		100deg,
		rgba(11, 13, 18, 0.86) 0%,
		rgba(11, 13, 18, 0.66) 45%,
		rgba(11, 13, 18, 0.42) 100%
	);
}

.legal-hero-title {
	font-size: clamp(2.15rem, 6.4vw, 5.5rem);
	max-width: 17ch;
	margin-block: 1.5rem 2rem;
}

.legal-hero-rule.wp-block-separator {
	width: 4rem;
	max-width: 4rem;
	margin: 0 0 2rem;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--primary-accent);
	opacity: 1;
}

/* Kleinere paginahero op de subpagina's. */
.legal-subhero {
	min-height: clamp(24rem, 60vh, 38rem);
}

/* Subpagina's gebruiken dezelfde brede compositie als de bestaande demo,
   maar houden de leesbare hero-kolom bewust begrensd. */
.legal-page-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* A compact orientation point directly after the image hero. */
.legal-breadcrumbs {
	width: 100%;
	margin: 0;
	padding: 0.9rem var(--legal-gutter);
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	color: var(--wp--preset--color--main-accent);
	font-size: 0.8rem;
}

.legal-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	width: min(100%, var(--wp--style--global--wide-size));
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.legal-breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.45rem;
	color: var(--wp--preset--color--primary-accent);
}

.legal-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.legal-breadcrumbs a:hover,
.legal-breadcrumbs a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.legal-section.has-primary-alt-background-color,
.legal-section.has-primary-alt-background-color .wp-block-heading,
.legal-section.has-primary-alt-background-color p,
.legal-section.has-primary-alt-background-color li {
	color: var(--wp--preset--color--base);
}

.legal-document-grid {
	gap: clamp(1rem, 2.5vw, 2.25rem);
}

.legal-document-grid + .legal-document-grid {
	margin-top: clamp(1rem, 2.5vw, 2.25rem) !important;
}

.legal-document-card {
	min-height: 100%;
	padding: clamp(1.5rem, 3.5vw, 3rem);
	border-top: 2px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--base);
}

.legal-document-card--dark {
	border-top-color: var(--wp--preset--color--primary-accent);
	background: var(--wp--preset--color--primary-alt) !important;
}

.legal-document-card--dark p:not(.legal-eyebrow) {
	color: var(--wp--preset--color--primary-alt-accent);
}

.legal-document-contact {
	padding-block: clamp(4rem, 9vw, 8rem);
}

.legal-hero-copy {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
}

.legal-hero-copy > * {
	align-self: stretch;
}

/* De oorspronkelijke homepage gebruikt deze groep in plaats van de nieuwere
   legal-hero-copy-class. Hij krijgt exact dezelfde brede contentband. */
body .wp-block-cover.legal-hero > .wp-block-cover__inner-container.is-layout-constrained > .wp-block-group.legal-reveal {
	width: min(100%, var(--wp--style--global--wide-size)) !important;
	max-width: var(--wp--style--global--wide-size) !important;
	margin-inline: auto !important;
	min-width: 0;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
}

body .wp-block-cover.legal-hero > .wp-block-cover__inner-container.is-layout-constrained > .wp-block-group.legal-reveal > * {
	align-self: stretch;
}

.legal-cta-band {
	padding: clamp(3rem, 7vw, 7rem) var(--legal-gutter);
}

.legal-feature-row {
	padding-block: clamp(1.75rem, 3.5vw, 3.5rem);
}

.legal-feature-layout {
	gap: clamp(2.5rem, 8vw, 9rem);
}

.legal-feature-list {
	min-width: 0;
}

.legal-card-grid {
	margin-block: 0 !important;
	gap: clamp(2rem, 5vw, 5rem);
}

.legal-card-grid + .legal-card-grid {
	margin-top: clamp(2.5rem, 5vw, 5rem) !important;
}

.legal-card-grid__item {
	min-width: 0;
	padding-top: var(--wp--preset--spacing--large);
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.legal-card-grid__image {
	margin: 0 !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.legal-card-grid__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Kaartgrids zijn wide. Core centreert losse headings in een constrained
   group standaard op contentSize; deze drie regels houden kop, bovenkopje en
   kaarten op precies dezelfde linkerlijn. */
.legal-section > .wp-block-group.alignwide.legal-stack-md.is-layout-constrained > .legal-eyebrow,
.legal-section > .wp-block-group.alignwide.legal-stack-md.is-layout-constrained > .wp-block-heading,
.legal-stats > .wp-block-group.alignwide.legal-stack-md.is-layout-constrained > .legal-eyebrow,
.legal-stats > .wp-block-group.alignwide.legal-stack-md.is-layout-constrained > .wp-block-heading {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.legal-card-grid__image--portrait {
	aspect-ratio: 2 / 3;
	width: min(100%, 28rem);
	max-height: none;
}

.legal-section .legal-home-team__intro {
	width: min(100%, 52rem);
	max-width: 52rem;
}

/* Team directory: a native Query Loop. Twelve profiles per page prevent a
   large office from becoming an endless static list. */
.legal-team-directory__grid {
	gap: clamp(2rem, 4vw, 4rem) !important;
}

.legal-team-directory__card {
	min-width: 0;
	padding-top: var(--wp--preset--spacing--large);
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.legal-team-directory__image {
	margin: 0 !important;
	overflow: hidden;
	max-height: 34rem;
}

.legal-team-directory__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.legal-team-directory__title {
	margin: 0 !important;
}

.legal-team-directory__excerpt {
	margin: 0 !important;
}

.legal-team-directory .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--x-large);
	padding-top: var(--wp--preset--spacing--large);
	border-top: 1px solid var(--wp--preset--color--border-light);
}

/* Legal pages are documents, not promotional cards. The side column provides
   orientation while the full-width document column remains easy to read. */
.legal-document-page {
	padding-block: var(--legal-section-y);
}

.legal-document-page__layout {
	gap: clamp(2rem, 7vw, 8rem) !important;
}

.legal-document-page__aside {
	position: sticky;
	top: 8rem;
	align-self: flex-start;
}

.legal-document-page__content {
	max-width: none;
}

.legal-document-page__content > h2:not(:first-child) {
	margin-top: var(--wp--preset--spacing--x-large);
	padding-top: var(--wp--preset--spacing--large);
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.legal-document-page__content p {
	max-width: 62rem;
}

/* Redactionele beeld-tekstcompositie voor de uitgebreide rechtsgebieden en
   vacature. Het vlak heeft een andere functie dan een gewone contentrij. */
.legal-story-layout {
	gap: 0;
}

.legal-story-media,
.legal-story-panel {
	min-width: 0;
}

.legal-story-image {
	margin: 0 !important;
	height: 100%;
	min-height: clamp(20rem, 36vw, 33rem);
}

.legal-story-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.legal-story-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.5rem, 6vw, 7rem);
}

.legal-story-panel .wp-block-heading {
	max-width: 16ch;
}

.legal-stats .wp-block-heading {
	max-width: 18ch;
}

.legal-stat-grid {
	gap: clamp(2rem, 5vw, 6rem);
	padding-top: var(--wp--preset--spacing--large);
	border-top: 1px solid var(--wp--preset--color--border-dark);
}

.legal-stat-grid > .wp-block-column {
	min-width: 0;
}

.legal-faq-item {
	margin: 0;
	padding: var(--wp--preset--spacing--large) 0;
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.legal-faq-item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.legal-faq-item summary {
	cursor: pointer;
	font-family: var(--legal-serif);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.15;
}

.legal-faq-item p {
	max-width: 62ch;
	margin: var(--wp--preset--spacing--medium) 0 0;
}

/* Eén gedeelde contentband voor nieuwe én bestaande legal-secties. Alleen de
   tekstmaat verschilt per onderdeel; de linker- en rechterlijn nooit. */
.legal-section > .alignwide,
.legal-section > .wp-block-group.alignwide,
.legal-section > .wp-block-columns.alignwide,
.legal-cta-band > .alignwide,
.legal-page-hero .legal-hero-copy.alignwide {
	width: min(100%, var(--wp--style--global--wide-size));
	margin-inline: auto;
}

/* Secties regelen zelf hun ritme. Een top-level blockgap mag geen witte
   naad tussen een lichte sectie en de donkere slotoproep toevoegen. */
main.wp-block-group.alignfull > .wp-block-group.alignfull {
	margin-block: 0 !important;
}

main.wp-block-group.alignfull > .legal-section + .legal-cta-band {
	margin-top: 0 !important;
}

/* Donkere oppervlakken hebben altijd lichte body- en koptekst. Presetkleuren
   zoals main-accent blijven door hun eigen class vervolgens intact. */
.legal-cta-band :where(h1, h2, h3, h4, h5, h6, p, li),
.legal-panel--dark :where(h1, h2, h3, h4, h5, h6, p, li),
.has-main-background-color :where(h1, h2, h3, h4, h5, h6, p, li),
.has-primary-alt-background-color :where(h1, h2, h3, h4, h5, h6, p, li) {
	color: var(--wp--preset--color--base);
}

/* ==========================================================================
   7. Slotoproep
   Het zwaarste blok van de pagina: ontkleurd beeld, een schuin vlak dat er
   half overheen ligt, en daarboven pas de tekst.
   ========================================================================== */

/* De slotoproep is het zwaarste blok: bijna schermvullend en met de grootste
   kop van de pagina, groter nog dan de hero. */
.legal-cta.wp-block-cover {
	min-height: clamp(25rem, 54vw, 38rem);
}

.legal-cta .wp-block-cover__image-background {
	filter: grayscale(1) contrast(1.06);
}

/* Het schuine vlak. */
.legal-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: var(--z-scrim);
	background-color: var(--wp--preset--color--main);
	opacity: 0.85;
	-webkit-clip-path: polygon(0 0, 58% 0, 38% 100%, 0 100%);
	clip-path: polygon(0 0, 58% 0, 38% 100%, 0 100%);
}

/* De leesbaarheidslaag over het geheel. */
.legal-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: var(--z-scrim-2);
	background: linear-gradient(
		94deg,
		rgba(11, 13, 18, 0.74) 0%,
		rgba(11, 13, 18, 0.58) 50%,
		rgba(11, 13, 18, 0.46) 100%
	);
}

.legal-cta-title {
	font-size: clamp(2.5rem, 7.6vw, 6.5rem);
	max-width: 15ch;
	line-height: 1.02;
	margin-block: 1.25rem 1.75rem;
}

.legal-cta .wp-block-button__link {
	font-size: 1rem;
	padding: 1.15rem 2.5rem;
}

/* ==========================================================================
   8. Asymmetrie
   De sectie als geheel is asymmetrisch: kolomverhoudingen en beeld dat
   uitbloedt. Binnen een sectie lijnt alles op een gedeelde baseline.
   Losse elementen krijgen dus nooit een eigen verspringing.
   ========================================================================== */

@media (min-width: 782px) {
	/* Beeld of vlak dat aan één kant tot de schermrand bloedt. */
	.legal-bleed-r {
		margin-right: calc(
			-1 *
				max(
					var(--legal-gutter),
					(100vw - var(--wp--style--global--wide-size)) / 2
				)
		);
	}

	.legal-bleed-l {
		margin-left: calc(
			-1 *
				max(
					var(--legal-gutter),
					(100vw - var(--wp--style--global--wide-size)) / 2
				)
		);
	}

	/* Bloedt een paneel met tekst uit, dan houdt de tekst binnen de band. */
	.legal-panel.legal-bleed-r {
		padding-right: max(
			2.5rem,
			calc((100vw - var(--wp--style--global--wide-size)) / 2 + 2rem)
		);
	}

	.legal-panel.legal-bleed-l {
		padding-left: max(
			2.5rem,
			calc((100vw - var(--wp--style--global--wide-size)) / 2 + 2rem)
		);
	}

	/* Verspringing bestaat alleen op kolomniveau, maximaal één per sectie. */
	.wp-block-column.legal-offset {
		margin-top: clamp(2rem, 5vw, 5rem);
	}

	.wp-block-column.legal-offset-lg {
		margin-top: clamp(4rem, 8vw, 8rem);
	}

	/* Beeld blijft staan terwijl de tekst eroverheen scrolt. */
	.legal-sticky-media {
		position: sticky;
		top: 6rem;
		align-self: start;
	}

	/* Overlappende secties, begrensd tot ruim onder 8rem. */
	.legal-overlap-panel {
		margin-top: calc(var(--legal-overlap) * -1);
		position: relative;
		z-index: 3;
	}

	.legal-overlap-image {
		margin-top: calc(var(--legal-overlap) * -0.7);
		margin-bottom: calc(var(--legal-overlap) * -0.7);
		position: relative;
		z-index: 2;
	}
}

/* Gekleurd vlak met eigen padding. Een echt element, geen pseudo-vlak dat
   half over de inhoud van de sectie eronder valt. */
.legal-panel {
	position: relative;
	padding: clamp(2rem, 4.5vw, 3.75rem) clamp(1.5rem, 3.5vw, 3rem);
}

/* Een paneel is een flex-item met tekst, geen decoratief beeld. De oude
   bleed-padding groeide op brede schermen mee met de viewport en at de hele
   inhoudsbreedte van de kolom op. Alleen media mogen daarom uit de grid
   bloeden; tekstpanelen blijven binnen hun kolom en houden een vaste,
   responsieve binnenruimte. */
@media (min-width: 782px) {
	.legal-section .wp-block-column {
		min-width: 0;
	}

	.legal-panel.legal-bleed-l {
		box-sizing: border-box;
		margin-left: 0;
		padding-left: clamp(1.5rem, 3.5vw, 3rem);
	}

	.legal-panel.legal-bleed-r {
		box-sizing: border-box;
		margin-right: 0;
		padding-right: clamp(1.5rem, 3.5vw, 3rem);
	}
}

/* ==========================================================================
   9. Onthullen bij scroll
   ========================================================================== */

.legal-js .legal-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.75s var(--legal-ease), transform 0.75s var(--legal-ease);
	will-change: opacity, transform;
}

.legal-js .legal-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   10. Kaarten en rijen
   ========================================================================== */

.legal-card {
	overflow: hidden;
}

.legal-card .wp-block-cover__image-background {
	transition: transform 0.9s var(--legal-ease);
}

.legal-card .wp-block-cover__background {
	transition: opacity 0.5s var(--legal-ease);
}

.legal-card:hover .wp-block-cover__image-background {
	transform: scale(1.05);
}

/* Rij die op hover een gouden lijn oplicht. */
.legal-row {
	border-top: 1px solid var(--wp--preset--color--border-light);
	transition: border-color 0.4s var(--legal-ease);
}

.legal-row:hover {
	border-top-color: var(--wp--preset--color--primary);
}

.has-main-background-color .legal-row,
.has-primary-alt-background-color .legal-row,
.legal-panel--dark .legal-row {
	border-top-color: var(--wp--preset--color--border-dark);
}

/* ==========================================================================
   11. Kaart van Google
   Verweven met de contactgegevens: vult de kolom ernaast en schaalt mee.
   ========================================================================== */

.legal-map {
	position: relative;
	width: 100%;
	min-height: clamp(18rem, 52vw, 34rem);
	height: 100%;
	background-color: var(--wp--preset--color--main);
}

.legal-map iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1) contrast(1.05);
}

/* De kolom met de kaart rekt mee met de tekstkolom ernaast. */
@media (min-width: 782px) {
	.wp-block-column.legal-map-col {
		display: flex;
		align-items: flex-start;
		align-self: stretch;
	}

	/* De kaart houdt een eigen hoogte en blijft staan terwijl de
	   contactgegevens ernaast doorlopen. Zonder deze begrenzing rekt hij mee
	   met de hele kolom en wordt hij meer dan 1300px hoog. */
	.legal-map-col > .legal-map {
		flex: 1 1 auto;
		height: clamp(26rem, 38vw, 40rem);
		min-height: 0;
		position: sticky;
		top: 6rem;
	}
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
	border-top: 1px solid rgba(176, 138, 74, 0.35);
}

.site-footer a {
	text-decoration: none;
	color: var(--wp--preset--color--main-accent);
}

.site-footer a:hover,
.site-footer .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary-accent);
}

.site-footer .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--main-accent);
}

.legal-footer-name {
	font-family: var(--legal-serif);
	font-size: 1.6rem;
	letter-spacing: 0.04em;
	line-height: 1.2;
}

.legal-footer-legal {
	gap: var(--wp--preset--spacing--medium);
	color: var(--wp--preset--color--main-accent);
}

.legal-footer-legal > .wp-block-navigation {
	gap: var(--wp--preset--spacing--medium);
}

.legal-footer-legal .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-small);
}

/* ==========================================================================
   13. Correcties
   ========================================================================== */

/* Op donkere vlakken zijn links licht goud, nooit donkerblauw of donkergoud. */
.has-main-background-color a,
.has-primary-alt-background-color a,
.legal-panel--dark a,
.wp-block-cover a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--primary-accent);
}

.wp-block-button__link,
.wp-block-search__button {
	border-radius: 0;
	text-transform: uppercase;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.wp-block-cover.alignfull,
.legal-section {
	overflow-x: clip;
}

/* Lijsten met genoeg lucht om te lezen. */
.wp-block-list li + li {
	margin-top: 0.5rem;
}

/* ==========================================================================
   14. Mobiel en tablet
   Alle overlappen, verspringingen en uitbloedingen vallen weg. Alles stapelt
   netjes en beelden worden gewoon volle breedte.
   ========================================================================== */

@media (max-width: 781px) {
	.legal-page-hero .legal-hero-copy,
	.legal-page-hero .legal-hero-copy > *,
	.legal-page-hero .legal-hero-copy p {
		min-width: 0 !important;
		max-width: 100% !important;
		white-space: normal !important;
	}

	.legal-page-hero .legal-hero-copy p {
		overflow-wrap: break-word;
		width: 100% !important;
	}

	.legal-story-layout {
		gap: 0;
	}

	.legal-story-panel {
		padding: clamp(2rem, 9vw, 3.5rem) var(--legal-gutter);
	}

	.legal-story-image {
		min-height: clamp(15rem, 58vw, 23rem);
	}

	.legal-stat-grid {
		gap: var(--wp--preset--spacing--large);
	}
	.legal-bleed-l,
	.legal-bleed-r {
		margin-left: calc(-1 * var(--legal-gutter));
		margin-right: calc(-1 * var(--legal-gutter));
		width: auto;
	}

	.legal-panel.legal-bleed-l,
	.legal-panel.legal-bleed-r {
		padding-inline: var(--legal-gutter);
	}

	.legal-offset,
	.legal-offset-lg,
	.wp-block-column.legal-offset,
	.wp-block-column.legal-offset-lg {
		margin-top: 0;
	}

	.legal-overlap-panel,
	.legal-overlap-image {
		margin-top: 0;
		margin-bottom: 0;
	}

	.legal-sticky-media {
		/* Sticky valt op klein scherm weg, maar een Cover moet relatief blijven
		   zodat zijn absoluut gepositioneerde afbeelding binnen het beeld blijft. */
		position: relative;
	}

	/* Beeld dat op desktop uitbloedt, is hier gewoon volle breedte en niet
	   onnodig hoog. */
	.legal-card.wp-block-cover,
	.legal-sticky-media.wp-block-cover {
		min-height: clamp(15rem, 58vw, 22rem) !important;
	}

	/* De drie kaarten in “Het team” krijgen vanuit Gutenberg inline
	   aspect-ratio: unset. Op één kolom zouden ze daardoor liggend worden;
	   deze gerichte override houdt iedere teamfoto portret. */
	.legal-section.has-base-background-color > .wp-block-columns > .wp-block-column > .legal-card.has-custom-content-position.is-position-bottom-left {
		aspect-ratio: 2 / 3 !important;
		min-height: 0 !important;
	}

	.legal-cta.wp-block-cover {
		min-height: clamp(26rem, 78vh, 34rem);
	}

	.legal-cta::before {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 58%, 0 100%);
		clip-path: polygon(0 0, 100% 0, 100% 58%, 0 100%);
	}

	.legal-hero {
		min-height: 100svh;
	}

	/* Ollie zet mobiele Covers standaard op 430px met !important. Alleen de
	   schermvullende hero krijgt een even sterke, dynamische viewportmaat. */
	.legal-hero.wp-block-cover {
		min-height: 100svh !important;
	}

	.legal-subhero.wp-block-cover {
		min-height: clamp(24rem, 60vh, 38rem) !important;
		padding-top: 0;
	}

	/* De header ligt hier vast over het beeld. De inhoud van een hero staat
	   verticaal gecentreerd, dus extra kopruimte schuift het midden omlaag
	   tot voorbij de header. Zonder dit valt de balk over het bovenkopje. */
	.legal-has-hero .legal-hero.legal-section {
		padding-top: calc(var(--legal-section-y) + 9rem);
	}

	/* Deze kolommen worden expliciet gestapeld, zodat het beeld nooit onder
	   de tekst terechtkomt. De DOM-volgorde is beeld, daarna tekst. */
	.legal-services-process {
		flex-direction: column;
		row-gap: var(--wp--preset--spacing--x-large);
	}

	.legal-services-process > .wp-block-column {
		width: 100% !important;
		flex-basis: auto !important;
	}

	.legal-services-process .legal-sticky-media.wp-block-cover {
		min-height: clamp(12rem, 52vw, 16rem) !important;
	}

	.legal-feature-row .wp-block-columns {
		gap: var(--wp--preset--spacing--small);
	}

	.legal-feature-layout {
		gap: var(--wp--preset--spacing--x-large);
	}

	.legal-card-grid + .legal-card-grid {
		margin-top: var(--wp--preset--spacing--x-large) !important;
	}

	/* De teamkaarten worden hier één kolom breed. De desktopbegrenzing zou
	   die brede beelden anders terugduwen naar een liggend kader. */
	.legal-team-directory__image {
		aspect-ratio: 2 / 3;
		max-height: none;
	}

	.legal-team-directory__grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.legal-document-page__layout {
		gap: var(--wp--preset--spacing--x-large) !important;
	}

	.legal-document-page__aside {
		position: static;
	}

	.legal-footer-legal {
		align-items: flex-start;
	}

	.legal-footer-legal > .wp-block-navigation,
	.legal-footer-legal .wp-block-navigation__container {
		justify-content: flex-start !important;
	}
}

@media (min-width: 782px) {
	/* Subpaginahero's leave enough room for the transparent navigation. */
	.legal-has-hero .legal-subhero.wp-block-cover {
		min-height: clamp(35rem, 76svh, 50rem);
		padding-top: 0;
	}

	.legal-page-hero .legal-hero-title {
		max-width: 30ch;
		font-size: clamp(2.5rem, 5.4vw, 5.5rem);
	}

	.legal-team-directory__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 782px) and (max-width: 1366px) {
	.legal-team-directory__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* De merknaam blijft op de smalste schermen naast de knop staan. Het woord
   'menu' zakt daardoor niet naar een tweede regel; alleen de lettergrootte
   schaalt gecontroleerd terug. */
@media (max-width: 1366px) {
	body:not(.admin-bar).legal-has-hero .wp-site-blocks > header.site-header.site-header {
		top: 0 !important;
	}

	body.legal-has-hero .wp-site-blocks > header.site-header.site-header {
		position: fixed !important;
		top: var(--wp-admin--admin-bar--height, 0px) !important;
		left: 0;
		right: 0;
	}

	.site-header .legal-header-bar > .wp-block-group {
		flex-wrap: nowrap !important;
		gap: 0.75rem;
	}

	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.site-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		color: var(--wp--preset--color--base) !important;
	}

	.site-header .wp-block-navigation__responsive-container-open svg {
		display: block !important;
		fill: var(--wp--preset--color--base) !important;
	}

	.site-header .wp-block-navigation {
		flex: 0 0 auto;
		display: flex !important;
	}

	/* Op telefoon en tablet is de drawer een zelfstandig viewportpaneel,
	   los van de hoogte van de vaste header. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		inset: 0 !important;
		width: 100vw !important;
		height: 100svh !important;
		max-width: none !important;
		padding: max(5.5rem, calc(var(--wp-admin--admin-bar--height, 0px) + 4.5rem)) var(--legal-gutter) 2.5rem !important;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		min-height: 0;
		height: 100%;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		flex: 0 0 auto !important;
		min-height: 0 !important;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		flex: 1 1 auto !important;
		min-height: 0 !important;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		width: 100%;
	}

	/* Seven primary links, branding and the drawer footer should fit without
	   wasting most of a phone viewport on padding and link gaps. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		overflow: hidden !important;
		padding: 1rem var(--legal-gutter) !important;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 1rem !important;
		gap: 0 !important;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		display: flex !important;
		flex: 1 1 auto !important;
		flex-direction: column !important;
		height: 100% !important;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex !important;
		flex: 1 1 auto !important;
		flex-direction: column !important;
		height: 100% !important;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .legal-mobile-drawer-brand {
		margin: 0 0 2rem !important;
		font-size: clamp(1.1rem, 5vw, 1.35rem);
		line-height: 1.2;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 0.55rem !important;
		padding-bottom: 1.5rem;
		border-bottom: 1px solid rgba(176, 138, 74, 0.32);
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding-block: 0.4rem !important;
		font-size: clamp(1.2rem, 5.3vw, 1.45rem);
		line-height: 1.15;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .legal-mobile-drawer-footer {
		margin-top: auto !important;
		padding-top: 1.5rem;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .legal-mobile-drawer-copyright {
		padding-bottom: 1rem;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .legal-mobile-drawer-socials a {
		width: 2.15rem;
		height: 2.15rem;
	}
}

@media (max-width: 1366px) and (max-height: 620px) {
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		overflow-y: auto !important;
	}
}

@media (max-width: 480px) {
	.site-header .legal-header-bar > .wp-block-group {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		width: 100%;
	}


	.site-header .wp-block-site-title {
		min-width: 0;
		flex: 1 1 auto;
		overflow: hidden;
	}

	.site-header .wp-block-site-title a {
		display: block;
		font-size: clamp(0.85rem, 4.1vw, 1.1rem);
		letter-spacing: 0.04em;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.site-header .wp-block-navigation {
		min-width: 2.75rem;
		justify-content: flex-end;
	}

	body .site-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

}

/* ==========================================================================
   15. Bewegingsvoorkeur
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.legal-js .legal-reveal,
	.legal-js .legal-reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.legal-card .wp-block-cover__image-background,
	.legal-card:hover .wp-block-cover__image-background,
	.site-header,
	.legal-textlink a::after {
		transition: none;
		transform: none;
	}

	.legal-sticky-media {
		position: relative;
	}
}