/*
Theme Name: Kena Advocaten
Theme URI: https://kena-advocaten.be
Author: Solvate
Author URI: https://solvate.be
Description: Childthema van Twenty Twenty-Five voor Advocatenkantoor Kruijen & Aboulakil. Zwart-wit, compacte typografie, zonder accentkleur.
Template: twentytwentyfive
Version: 0.4.5
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: kena
*/

:root {
	--kena-black: #141414;
	--kena-white: #ffffff;
	--kena-grey: #f4f4f4;
	--kena-line: #dcdcdc;
	--kena-line-dark: #333333;
	--kena-muted: #5c5c5c;
	--kena-head: "Jost", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Header: wit, compact ---------- */
.kena-header {
	border-bottom: 1px solid var(--kena-line);
	padding-top: 1.15rem !important;
	padding-bottom: 1.15rem !important;
}
.kena-header a { text-decoration: none; }
.kena-wordmark,
.kena-wordmark a {
	font-family: var(--kena-head);
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: inherit;
	line-height: 1.2;
	margin: 0;
}
.kena-baseline {
	font-family: var(--kena-head);
	font-size: 0.6rem;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--kena-muted);
	margin: 0.3rem 0 0 !important;
}
.kena-header .wp-block-navigation {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	gap: 1.75rem;
}
.kena-header .wp-block-navigation a:hover,
.kena-header .wp-block-navigation a:focus {
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 1px;
}

/* ---------- Secties ---------- */
.page-template-page-landing .wp-site-blocks > main,
.page-template-page-landing .wp-site-blocks > footer,
.page-template-page-landing .wp-block-post-content > .alignfull {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.kena-section {
	padding-top: clamp(3.5rem, 7vw, 6rem) !important;
	padding-bottom: clamp(3.5rem, 7vw, 6rem) !important;
}
.kena-grey { background: var(--kena-grey); }
.kena-dark { background: var(--kena-black); color: var(--kena-white); }
.kena-dark a { color: inherit; }

/* Kleine labels (enkel hier nog hoofdletters) */
.kena-label,
.kena-eyebrow {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kena-muted);
	margin: 1.6rem 0 0.35rem !important;
}
.kena-label:first-child { margin-top: 0 !important; }
.kena-dark .kena-label, .kena-footer .kena-label { color: #9a9a9a; }

.kena-small { font-size: 0.8125rem; color: var(--kena-muted); }
.kena-arrowlink { font-size: 0.875rem; font-weight: 500; }
.kena-arrowlink a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.kena-arrowlink a:hover { border-bottom-color: transparent; }

.kena-placeholder {
	outline: 1px dashed currentColor;
	outline-offset: 4px;
	opacity: 0.5;
}

/* Tweedeling: titel links, inhoud rechts */
.kena-split { gap: clamp(2rem, 5vw, 5rem) !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.kena-split > .wp-block-column:first-child h2 { margin-top: 0; }
.kena-split h2 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); }

/* ---------- Hero ---------- */
.kena-hero { display: flex; flex-direction: column; justify-content: flex-end; }
.kena-hero.kena-section { padding-top: clamp(2.75rem, 5vw, 4rem) !important; padding-bottom: clamp(2.75rem, 5vw, 4rem) !important; }
.kena-hero > * { width: 100%; max-width: 1200px; margin-left: auto !important; margin-right: auto !important; }
.kena-hero-cols { align-items: flex-end !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.kena-hero h1 {
	font-family: var(--wp--preset--font-family--citaat);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(2.1rem, 4.2vw, 3.2rem);
	line-height: 1.12;
	letter-spacing: 0;
	max-width: 22ch;
	margin: 0 0 1.25rem;
	text-wrap: balance;
}
.kena-hero-meta { font-size: 0.875rem; color: #b5b5b5; margin: 0 0 1.5rem; }
.kena-monogram {
	/* tekst "K/A" blijft in de pagina, het echte monogram komt als beeld */
	font-size: 0 !important;
	color: transparent;
	width: clamp(7rem, 14vw, 11rem);
	aspect-ratio: 3864 / 2912;
	margin: 0 0 0 auto;
	background: url(assets/logo/kena-monogram-wit.svg) no-repeat center / contain;
	opacity: 0.9;
}

/* ---------- Rechtstakken als lijst ---------- */
.kena-rows { border-bottom: 1px solid var(--kena-line); }
.kena-row {
	display: grid !important;
	grid-template-columns: 2.5rem 13rem minmax(0, 1fr);
	column-gap: 1.25rem;
	align-items: baseline;
	border-top: 1px solid var(--kena-line);
	padding: 1rem 0;
	margin: 0 !important;
}
.kena-row > * { margin: 0 !important; }
.kena-row .kena-num { font-size: 0.75rem; color: var(--kena-muted); font-variant-numeric: tabular-nums; }
.kena-row h3 { font-size: 1.05rem; font-weight: 500; }
.kena-row p:last-child { font-size: 0.875rem; }

/* ---------- Team ---------- */
.kena-people {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}
.kena-person { border-top: 1px solid var(--kena-black); padding-top: 1rem; margin: 0 !important; }
.kena-person > * { margin: 0 0 0.5rem !important; }
.kena-person h3 { font-size: 1.05rem; font-weight: 500; }
.kena-person .kena-role { font-size: 0.8125rem; color: var(--kena-muted); margin-bottom: 0.9rem !important; }
.kena-person p { font-size: 0.875rem; }

/* ---------- Kaart ---------- */
.kena-map {
	aspect-ratio: 4 / 3;
	background: #ececec;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--kena-muted);
	padding: 2rem !important;
	margin-bottom: 0.75rem !important;
	overflow: hidden;
}
.kena-map-btn {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--kena-black);
	background: transparent;
	border: 1px solid var(--kena-black);
	border-radius: 0;
	padding: 0.6rem 1.2rem;
	cursor: pointer;
}
.kena-map-btn:hover, .kena-map-btn:focus-visible { background: var(--kena-black); color: var(--kena-white); }
.kena-map-note { font-size: 0.75rem !important; max-width: 22rem; margin: 0 !important; }
.kena-map.is-loaded { padding: 0 !important; display: block; }
.kena-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1); }
.kena-map-route { font-size: 0.8125rem !important; margin: 0 0 1.5rem !important; }
.kena-map-route a { text-decoration: none; border-bottom: 1px solid currentColor; }

/* ---------- Knoppen ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link { border: 1px solid currentColor; background: transparent; }

/* ---------- Footer ---------- */
.kena-footer {
	font-size: 0.8125rem;
	padding-top: clamp(3rem, 6vw, 4.5rem) !important;
	padding-bottom: 2rem !important;
}
.kena-footer p { margin: 0 0 0.3rem; }
.kena-footer a { text-decoration: none; }
.kena-footer a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.kena-footer .kena-baseline { color: #9a9a9a; }
.kena-footer-bottom {
	border-top: 1px solid var(--kena-line-dark);
	margin-top: 2.5rem !important;
	padding-top: 1.25rem;
	font-size: 0.75rem;
	color: #9a9a9a;
}

/* ---------- Tabellen ---------- */
.wp-block-table table { border-collapse: collapse; font-size: 0.875rem; }
.wp-block-table th,
.wp-block-table td { border: 1px solid var(--kena-line); padding: 0.6rem 0.85rem; text-align: left; vertical-align: top; }
.wp-block-table thead { border-bottom: 1px solid var(--kena-black); }
.wp-block-table th { font-weight: 600; }

/* ---------- Mobiel ---------- */
@media (max-width: 781px) {
	.kena-hero { min-height: 0; }
	.kena-monogram { width: 8rem; margin: 2rem 0 0; }
	.kena-hero-cols { flex-direction: column-reverse; align-items: flex-start !important; }
	.kena-row { grid-template-columns: 2rem minmax(0, 1fr); }
	.kena-row > p:last-child { grid-column: 2; }
	.kena-people { grid-template-columns: minmax(0, 1fr); }
	.kena-header .wp-block-navigation { gap: 1rem; }
}

/* =========================================================
   Tekstpagina (algemene voorwaarden, privacy)
   Compacte leesopmaak: titel in zinsopbouw, inhoudstafel
   links, tekstkolom van ca. 70 tekens rechts.
   ========================================================= */
.kena-tekstpagina {
	padding-top: clamp(3rem, 6vw, 5rem) !important;
	padding-bottom: clamp(4rem, 8vw, 6rem) !important;
}
.kena-tekstpagina .kena-doc-title {
	font-family: var(--kena-head);
	font-weight: 400;
	font-size: clamp(1.7rem, 2.6vw, 2.1rem);
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.15;
	margin: 0 0 0.6rem;
}
.kena-tekstpagina .kena-doc-content { margin-top: 0; }

.kena-doc-sub {
	font-size: 0.875rem;
	color: #5c5c5c;
	margin: 0 0 clamp(2.5rem, 5vw, 4rem) !important;
}

.kena-doc {
	display: grid;
	grid-template-columns: 13rem minmax(0, 42rem);
	column-gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}

/* Inhoudstafel */
.kena-toc {
	position: sticky;
	top: 2.5rem;
	font-size: 0.78rem;
	line-height: 1.45;
	border-top: 1px solid var(--kena-black);
	padding-top: 0.9rem;
}
.admin-bar .kena-toc { top: calc(2.5rem + 32px); }
.kena-toc .kena-toc-label {
	font-family: var(--kena-head);
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 0.9rem;
}
.kena-toc ol {
	list-style: none;
	padding: 0 !important;
	margin: 0;
}
.kena-toc li { margin: 0 0 0.55rem; }
.kena-toc a {
	color: #5c5c5c;
	text-decoration: none;
}
.kena-toc a:hover { color: var(--kena-black); text-decoration: underline; text-underline-offset: 0.2em; }

/* Tekstkolom */
.kena-doc-body {
	font-size: 0.875rem;
	line-height: 1.7;
}
.kena-doc-body > * { margin-top: 0; }
.kena-doc-body p { margin: 0 0 0.9em; }
.kena-doc-body h2 {
	font-family: var(--kena-head);
	font-weight: 500;
	font-size: 1.15rem;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.3;
	border-top: 1px solid var(--kena-line);
	padding-top: 1.6rem;
	margin: 2.75rem 0 1.1rem !important;
	scroll-margin-top: 2rem;
}
.kena-doc-body > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0 !important; }
.kena-doc-body h3 {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.4;
	margin: 1.9rem 0 0.5rem !important;
}
.kena-doc-body ul,
.kena-doc-body ol { margin: 0 0 1.1em; padding-left: 1.15em; }
.kena-doc-body li { margin: 0 0 0.35em; }
.kena-doc-body ol > li { padding-left: 0.3em; margin-bottom: 0.7em; }
.kena-doc-body a { text-underline-offset: 0.15em; text-decoration-thickness: 1px; }

/* Tarieven als prijslijst */
.kena-doc-body ul.kena-tarieven {
	list-style: none;
	padding: 0;
	border-top: 1px solid var(--kena-line);
	margin-bottom: 1.4em;
}
.kena-tarieven li {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin: 0 !important;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--kena-line);
}
.kena-tarieven li span:last-child {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Tabel in tekstpagina iets compacter */
.kena-doc-body .wp-block-table table { font-size: 0.875rem; }

@media (max-width: 900px) {
	.kena-doc { grid-template-columns: minmax(0, 1fr); }
	.kena-toc {
		position: static;
		margin-bottom: 2.5rem;
		border-bottom: 1px solid var(--kena-line);
		padding-bottom: 0.75rem;
	}
	.kena-toc ol { columns: 2; column-gap: 1.5rem; }
}

/* Inhoudstafel: delen donker, artikels ingesprongen */
.kena-toc > ol > li { margin-bottom: 0.95rem; }
.kena-toc > ol > li > a { color: var(--kena-black); font-weight: 500; }
.kena-toc ol ol {
	margin: 0.45rem 0 0 0.1rem;
	padding-left: 0.75rem !important;
	border-left: 1px solid var(--kena-line);
}
.kena-toc ol ol li { margin-bottom: 0.35rem; }
@media (max-width: 900px) {
	.kena-toc ol ol { display: none; }
	.kena-toc > ol > li { margin-bottom: 0.45rem; break-inside: avoid; }
}

/* =========================================================
   Over ons (overzicht) en profielpagina's
   ========================================================= */
.kena-intro { font-size: 0.9375rem; max-width: 42rem; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem) !important; }

.kena-members { max-width: 60rem; border-bottom: 1px solid var(--kena-line); }
.kena-member {
	display: grid !important;
	grid-template-columns: 11rem minmax(0, 1fr);
	column-gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	border-top: 1px solid var(--kena-line);
	padding: 2.25rem 0;
	margin: 0 !important;
}
.kena-member > .kena-portrait { grid-row: span 6; }
.kena-member > *:not(.kena-portrait) { grid-column: 2; margin: 0 0 0.45rem !important; }
.kena-member h2 { font-size: 1.25rem; font-weight: 500; margin-bottom: 0.2rem !important; }
.kena-member h2 a { text-decoration: none; }
.kena-member h2 a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.kena-member p { font-size: 0.875rem; }
.kena-member .kena-role { font-size: 0.8125rem; color: var(--kena-muted); margin-bottom: 0.9rem !important; }
.kena-member .kena-arrowlink { margin-top: 0.6rem !important; }

/* Portret (plaatshouder tot de foto's er zijn) */
.kena-portrait {
	aspect-ratio: 4 / 5;
	background: #ececec;
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
}
.kena-portrait p {
	font-family: var(--kena-head);
	font-size: 1.5rem;
	letter-spacing: 0.08em;
	color: #a3a3a3;
	margin: 0 !important;
}
.kena-portrait img { width: 100%; height: 100%; object-fit: cover; }

/* Fiche op de profielpagina */
.kena-fiche { font-size: 0.8125rem; line-height: 1.55; }
.kena-fiche .kena-portrait { margin-bottom: 1.5rem !important; }
.kena-fiche .kena-label { margin-top: 1.1rem !important; }
.kena-fiche p { margin: 0 0 0.2rem; }
.kena-doc-body .kena-others { border-top: 1px solid var(--kena-line); padding-top: 1.4rem; margin-top: 2.5rem !important; }

@media (max-width: 781px) {
	.kena-member { grid-template-columns: minmax(0, 1fr); }
	.kena-member > .kena-portrait { grid-row: auto; width: 8rem; margin-bottom: 1.25rem !important; }
	.kena-member > *:not(.kena-portrait) { grid-column: 1; }
}
@media (max-width: 900px) {
	.kena-fiche .kena-portrait { width: 9rem; }
	.kena-fiche { margin-bottom: 2.5rem; }
}

/* Namen in de teamsectie linken naar het profiel */
.kena-person h3 a { text-decoration: none; }
.kena-person h3 a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* =========================================================
   Zwarte paginakop (sjabloon Tekstpagina)
   ========================================================= */
.kena-pagehead,
.kena-pagehead + main { margin-top: 0 !important; }
.kena-pagehead {
	position: relative;
	overflow: hidden;
	padding-top: clamp(3rem, 6vw, 4.5rem) !important;
	padding-bottom: clamp(2.75rem, 5vw, 4rem) !important;
}
.kena-pagehead > * { position: relative; z-index: 1; }
.kena-pagehead::after {
	content: "";
	position: absolute;
	right: max(1.25rem, calc(50% - 600px));
	bottom: -12%;
	width: clamp(11rem, 24vw, 19rem);
	aspect-ratio: 3864 / 2912;
	background: url(assets/logo/kena-monogram-wit.svg) no-repeat center / contain;
	opacity: 0.09;
	pointer-events: none;
	z-index: 0;
}
.kena-pagehead .kena-doc-title {
	font-family: var(--kena-head);
	font-weight: 400;
	font-size: clamp(1.7rem, 2.6vw, 2.1rem);
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.15;
	margin: 0;
}
.kena-pagehead-sub {
	font-size: 0.875rem;
	color: #b5b5b5;
	margin-top: 0.6rem !important;
	margin-bottom: 0 !important;
}
.kena-pagehead-sub:empty { display: none; }
.kena-tekstpagina {
	padding-top: clamp(2.5rem, 5vw, 4rem) !important;
	overflow-x: clip;
}

/* Zwarte band over de volle breedte binnen een tekstpagina */
.kena-quoteband {
	width: 100vw;
	max-width: none !important;
	margin: clamp(2.5rem, 5vw, 3.5rem) calc(50% - 50vw) !important;
	background: var(--kena-black);
	color: var(--kena-white);
	padding-top: clamp(3rem, 6vw, 4.5rem) !important;
	padding-bottom: clamp(3rem, 6vw, 4.5rem) !important;
	/* tekst lijnt uit met de inhoudskolom: compenseert exact de negatieve marge */
	padding-left: calc(50vw - 50%) !important;
	padding-right: calc(50vw - 50%) !important;
	box-sizing: border-box;
}
.kena-quote {
	font-family: var(--wp--preset--font-family--citaat);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.7rem, 3.2vw, 2.5rem);
	line-height: 1.2;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.kena-quote span { display: block; max-width: 30ch; }

/* Donkere portretvakken (tot de foto's er zijn) */
.kena-portrait { background: var(--kena-black); }
.kena-portrait p { color: #5c5c5c; }

/* =========================================================
   Contactpagina en formulier
   ========================================================= */
.kena-contactpage { margin-top: 0 !important; }
.kena-contactpage p:not(.kena-label):not(.kena-form-note) { font-size: 0.9375rem; }
.kena-contactpage h2 { margin-bottom: 1.4rem !important; }
.kena-contactpage .kena-map { aspect-ratio: 16 / 10; margin-top: 2rem !important; }
.kena-section-title {
	font-size: clamp(1.35rem, 2.2vw, 1.6rem);
	border-top: 1px solid var(--kena-line);
	padding-top: clamp(2rem, 4vw, 3rem);
	margin: clamp(2rem, 4vw, 3rem) 0 0.5rem !important;
}
.kena-section-title + p { font-size: 0.875rem; color: var(--kena-muted); margin-bottom: 1.5rem !important; }
.kena-direct { line-height: 1.7; }

.kena-form { font-size: 0.875rem; margin: 0; }
.kena-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1.25rem;
}
.kena-field { margin: 0 0 1.1rem !important; }
.kena-field label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kena-muted);
	margin-bottom: 0.4rem;
}
.kena-field label span { text-transform: none; letter-spacing: 0; }
.kena-field input,
.kena-field select,
.kena-field textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--kena-black);
	background: var(--kena-white);
	border: 1px solid var(--kena-line);
	border-radius: 0;
	padding: 0.7rem 0.8rem;
	transition: border-color 0.15s ease;
}
.kena-field select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--kena-black) 50%), linear-gradient(135deg, var(--kena-black) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 52%, calc(100% - 0.8rem) 52%;
	background-size: 0.3rem 0.3rem;
	background-repeat: no-repeat;
	padding-right: 2.2rem;
}
.kena-field textarea { resize: vertical; min-height: 9rem; }
.kena-field input:focus,
.kena-field select:focus,
.kena-field textarea:focus { outline: none; border-color: var(--kena-black); }
.kena-form-note { font-size: 0.8125rem !important; color: var(--kena-muted); max-width: 38rem; margin: 0.25rem 0 1.4rem !important; }
.kena-form-submit { margin: 0 !important; }
.kena-form button {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--kena-white);
	background: var(--kena-black);
	border: 1px solid var(--kena-black);
	border-radius: 0;
	padding: 0.8rem 1.6rem;
	cursor: pointer;
}
.kena-form button:hover,
.kena-form button:focus-visible { background: var(--kena-white); color: var(--kena-black); }
.kena-form-status { border-left: 2px solid var(--kena-black); padding: 0.2rem 0 0.2rem 0.9rem; margin: 0 0 1.5rem !important; }
.kena-form-status--fout,
.kena-form-status--velden { color: #8a1c1c; border-left-color: #8a1c1c; }
.kena-form-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#formulier { scroll-margin-top: 6rem; }

@media (max-width: 600px) {
	.kena-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Logo (vectorversie van het aangeleverde logo)
   ========================================================= */
.kena-logo { margin: 0 !important; line-height: 0; }
.kena-logo a { display: inline-block; }
.kena-logo img { display: block; height: 44px; width: auto; max-width: none; }
.kena-footer .kena-logo img { height: auto; width: 220px; }
@media (max-width: 600px) {
	.kena-header .kena-logo img { height: 34px; }
	.kena-footer .kena-logo img { width: 190px; }
}