/*
Theme Name: Alex IT Pro
Theme URI: https://alexit.pro/
Author: Alex IT Pro B.V.
Description: Child theme op Twenty Twenty-Five in de stijl van de blokkendoos. Verdana, geen webfonts, geen cookies. Bron: projecten/website-thema/ in het Mainframe.
Template: twentytwentyfive
Version: 0.2.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: alexitpro
*/

/* ------------------------------------------------------------------ basis */

:root {
	--ap-rand: 4px solid var(--wp--preset--color--inkt);
}

body { -webkit-font-smoothing: antialiased; }

/* ------------------------------------------------------------------- kop */

.ap-kop {
	border-bottom: var(--ap-rand);
	background: var(--wp--preset--color--papier);
}
.ap-kop .ap-logo {
	padding: 1.25rem 2rem;
	border-right: var(--ap-rand);
	margin: 0;
}
.ap-kop .ap-logo img { height: 40px; width: auto; display: block; }
.ap-kop .ap-menu {
	flex-grow: 1;
	justify-content: flex-end;
	padding: 0 2rem;
	gap: 1.875rem;
}
.ap-kop .ap-menu p { margin: 0; }
.ap-kop .ap-menu a,
.ap-kop .ap-contact a {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.125em;
	text-transform: uppercase;
	color: var(--wp--preset--color--inkt);
	text-decoration: none;
}
.ap-kop .ap-menu a:hover { color: var(--wp--preset--color--rood); }
.ap-kop .ap-contact {
	margin: 0;
	background: var(--wp--preset--color--rood);
	border-left: var(--ap-rand);
	display: flex;
	align-items: center;
}
.ap-kop .ap-contact a {
	color: var(--wp--preset--color--wit);
	display: block;
	padding: 1.375rem 2.125rem;
}
.ap-kop .ap-contact a:hover { background: var(--wp--preset--color--inkt); text-decoration: none; }

@media (max-width: 781px) {
	.ap-kop { flex-wrap: wrap; }
	.ap-kop .ap-logo { border-right: 0; padding: 1rem; }
	.ap-kop .ap-logo img { height: 32px; }
	.ap-kop .ap-menu {
		order: 3;
		flex-basis: 100%;
		justify-content: flex-start;
		padding: 0.75rem 1rem;
		border-top: var(--ap-rand);
		gap: 1.25rem;
		flex-wrap: wrap;
	}
	.ap-kop .ap-contact { margin-left: auto; }
	.ap-kop .ap-contact a { padding: 1rem 1.25rem; }
}

/* ------------------------------------------------------------------- voet */

.ap-voet {
	background: var(--wp--preset--color--inkt);
	color: #BDBDBD;
	font-size: var(--wp--preset--font-size--klein);
}
.ap-voet a { color: var(--wp--preset--color--wit); }
.ap-voet a:hover { color: var(--wp--preset--color--wit); }
.ap-voet p { margin: 0; }

/* -------------------------------------------------------- paginatitel */

.ap-titel {
	border-bottom: var(--ap-rand);
}
.ap-titel h1 { margin: 0; }

/* ------------------------------------------------------ inhoudssecties */

/* Het omzetscript zet elke H2-sectie van een gewone pagina in een groep .ap-sectie.
   De blokken sluiten op elkaar aan, met een dikke lijn ertussen. */
.wp-block-post-content > .alignfull { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.wp-block-post-content > .alignfull + .alignfull { border-top: var(--ap-rand); }
.wp-block-post-content > .ap-band { border-top: 0 !important; }
.ap-sectie > .wp-block-heading:first-child { margin-top: 0; }

.ap-sectie.ap-label > h2 {
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grijs);
}
.ap-sectie.ap-grijs { background: var(--wp--preset--color--papier-donker); }

/* kaarten: een raster van blokken met een dikke rand */
.ap-kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: 1.25rem;
}
.ap-kaarten.ap-vier { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.ap-kaarten > .ap-kaart { margin: 0 !important; }
.ap-kaart {
	border: var(--ap-rand);
	background: var(--wp--preset--color--wit);
	padding: 1.625rem;
}
.ap-kaart:last-child.ap-accent,
.ap-kaarten.ap-laatste-rood > .ap-kaart:last-child { border-color: var(--wp--preset--color--rood); }
.ap-kaart h3 { margin: 0 0 0.625rem; font-size: 1.0625rem; line-height: 1.3; }
.ap-kaart p { font-size: 0.8125rem; line-height: 1.7; color: #4A4A4A; margin: 0; }
.ap-kaart p + p { margin-top: 0.75rem; }
.ap-kaart .ap-meta {
	font-size: 0.71875rem;
	line-height: 1.55;
	color: #7A7A7A;
}
.ap-kaart .ap-meta strong {
	display: inline-block;
	background: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit);
	font-size: 0.59375rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 0.3rem 0.55rem;
	margin-bottom: 0.5rem;
}
.ap-kaart .ap-meta .ap-klant {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--rood);
	margin-bottom: 0.25rem;
}

/* ------------------------------------------------------------------- held */

.ap-held > .wp-block-column { padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60); }
.ap-held > .wp-block-column:first-child { border-right: var(--ap-rand); }
.ap-held h1 {
	font-size: var(--wp--preset--font-size--held);
	line-height: 1.04;
	letter-spacing: -0.055em;
	margin: 0 0 1.625rem;
	text-wrap: pretty;
}
.ap-held h1 em { font-style: normal; color: var(--wp--preset--color--rood); }
.ap-held p { color: var(--wp--preset--color--tekst); max-width: 34rem; font-size: 0.97rem; }
.ap-held .ap-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.625rem; }
.ap-held .ap-labels span {
	background: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit);
	font-size: 0.65625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	padding: 0.5rem 0.75rem;
}
.ap-held .ap-rood {
	background: var(--wp--preset--color--rood);
	color: var(--wp--preset--color--wit);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.ap-held .ap-rood h2 {
	color: var(--wp--preset--color--wit);
	font-size: 1.6875rem;
	line-height: 1.3;
	letter-spacing: -0.035em;
	margin: 0 0 1.125rem;
}
.ap-held .ap-rood p { color: #FFE4E4; font-size: 0.84375rem; }
.ap-held .ap-rood .wp-block-button__link {
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--inkt);
	padding: 1.125rem 1.625rem;
	font-size: 0.875rem;
}
.ap-held .ap-rood .wp-block-button__link:hover { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--wit); text-decoration: none; }

@media (max-width: 781px) {
	.ap-held > .wp-block-column:first-child { border-right: 0; border-bottom: var(--ap-rand); }
}

/* ---------------------------------------------------- portret, wie je krijgt */

.ap-portret { gap: 0 !important; }
.ap-portret > .wp-block-column:first-child {
	background: #000;
	padding: 2.5rem;
	border-right: var(--ap-rand);
	color: var(--wp--preset--color--wit);
}
.ap-portret > .wp-block-column:first-child img { width: 100%; height: auto; display: block; }
.ap-portret > .wp-block-column:first-child p { margin: 1.375rem 0 0; font-weight: 700; font-size: 1.1875rem; }
.ap-portret > .wp-block-column:first-child p + p { margin-top: 0.3rem; font-weight: 400; font-size: 0.78rem; color: #9A9AA2; }
.ap-portret > .wp-block-column:last-child {
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ap-portret h2 { font-size: var(--wp--preset--font-size--kop); letter-spacing: -0.05em; line-height: 1.12; }
@media (max-width: 781px) {
	.ap-portret > .wp-block-column:first-child { border-right: 0; border-bottom: var(--ap-rand); }
	.ap-portret > .wp-block-column:first-child img { max-width: 280px; }
}

/* ------------------------------------------------------------ zwarte band */

.ap-band {
	background: var(--wp--preset--color--inkt);
	color: var(--wp--preset--color--wit);
}
.ap-band h2 {
	color: var(--wp--preset--color--wit);
	font-size: 2rem;
	letter-spacing: -0.045em;
	line-height: 1.2;
	margin: 0;
}
.ap-band p { color: #9A9A9A; font-size: 0.78rem; margin: 0.75rem 0 0; }
.ap-band .wp-block-button__link { padding: 1.25rem 2.125rem; font-size: 0.9375rem; }
.ap-band .wp-block-button__link:hover { background: var(--wp--preset--color--wit); color: var(--wp--preset--color--inkt); text-decoration: none; }

/* ------------------------------------------------------ juridische pagina's */

.juridisch-kop {
	border: var(--ap-rand);
	background: var(--wp--preset--color--wit);
	padding: 1.25rem 1.5rem;
	font-size: var(--wp--preset--font-size--klein);
}
.juridisch-kop p { margin: 0; }
.juridisch-kop p + p { margin-top: 0.5rem; }

/* tabellen en lijsten in lopende tekst */
.wp-block-table table { border-collapse: collapse; font-size: 0.875rem; }
.wp-block-table th, .wp-block-table td { border: 1px solid #D6D2CA; padding: 0.5rem 0.75rem; text-align: left; }
.wp-block-table thead { border-bottom: 2px solid var(--wp--preset--color--inkt); }
.wp-block-list li + li { margin-top: 0.35rem; }

/* tekst in een sectie blijft leesbaar smal, links in de kolom van 1280 */
.ap-sectie > :is(p, ul, ol, blockquote, h2, h3, figure):not(.ap-breed):not(.wp-block-table) {
	max-width: 760px;
	margin-left: max(0px, calc((100% - 1280px) / 2)) !important;
}
.ap-titel .wp-block-post-title { max-width: 1280px; }

/* kleine kop boven een blok, zoals WIE JE KRIJGT */
.ap-bovenkop {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grijs);
	margin: 0 0 1.25rem;
}

/* zwarte band: tekst links, knop rechts */
.ap-band-kolommen { gap: 2.5rem; }
.ap-band-rechts { text-align: right; }
.ap-band-rechts .wp-block-buttons { justify-content: flex-end; }
@media (max-width: 781px) {
	.ap-band-rechts { text-align: left; }
	.ap-band-rechts .wp-block-buttons { justify-content: flex-start; }
}

/* cases: drie naast elkaar, label boven de kop */
.ap-kaarten.ap-drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .ap-kaarten.ap-drie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ap-kaarten.ap-drie { grid-template-columns: 1fr; } }
.ap-kaart .ap-meta + h3 { margin-top: 0.875rem; }
.ap-kaart .ap-meta + h3 + p { margin-top: 0; }

/* kop, inhoud en voet sluiten op elkaar aan */
.wp-site-blocks > * { margin-block-start: 0 !important; }

/* een tabel zonder koptekst (zoals de bedrijfsgegevens) krijgt geen lege kopregel */
.wp-block-table thead:not(:has(th:not(:empty))) { display: none; }

/* losse tekst (juridische pagina's) in dezelfde linkerkolom als de titel */
.wp-block-post-content.is-layout-constrained > :not(.alignfull) {
	margin-left: max(0px, calc((100% - 1280px) / 2)) !important;
}

/* ------------------------------------------------------------- de doos */

/* De hele site staat in een kolom van 1280 breed, met een dikke rand links en rechts.
   Kop, held, secties, band en voet lopen zo allemaal gelijk. Besloten 2 oktober 2026. */
body { background: #E4E1DA; }
.wp-site-blocks {
	max-width: 1280px;
	margin: 0 auto;
	background: var(--wp--preset--color--papier);
	border-left: var(--ap-rand);
	border-right: var(--ap-rand);
	box-sizing: border-box;
	min-height: 100vh;
}
@media (max-width: 1288px) {
	body { background: var(--wp--preset--color--papier); }
	.wp-site-blocks { border-left: 0; border-right: 0; }
}

/* register van juridische documenten: tabel over de volle kolom, status als label */
.ap-sectie > .wp-block-table { margin-left: 0; margin-right: 0; }
.ap-sectie .wp-block-table table { width: 100%; background: var(--wp--preset--color--wit); border: var(--ap-rand); font-size: 0.875rem; }
.ap-sectie .wp-block-table th {
	font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--grijs); border: 0; border-bottom: 2px solid var(--wp--preset--color--inkt);
	padding: 0.75rem 1rem;
}
.ap-sectie .wp-block-table td { border: 0; border-bottom: 1px solid #D6D2CA; padding: 0.9rem 1rem; vertical-align: middle; }
.ap-sectie .wp-block-table tr:last-child td { border-bottom: 0; }
.ap-sectie .wp-block-table td:first-child { font-weight: 700; }
/* **Geldend** wordt een zwart label, *Bij de jurist* en de rest een licht label */
.ap-sectie .wp-block-table td :is(strong, em) {
	display: inline-block; white-space: nowrap; font-size: 0.625rem; letter-spacing: 0.1em;
	text-transform: uppercase; padding: 0.3rem 0.6rem; font-style: normal; font-weight: 700;
}
.ap-sectie .wp-block-table td strong { background: var(--wp--preset--color--inkt); color: var(--wp--preset--color--wit); }
.ap-sectie .wp-block-table td em { background: var(--wp--preset--color--papier-donker); color: var(--wp--preset--color--grijs); }
@media (max-width: 640px) {
	.ap-sectie .wp-block-table { overflow-x: auto; }
	.ap-sectie .wp-block-table table { min-width: 34rem; }
}

/* badges uit Credly: allemaal even groot en klikbaar naar de badge zelf */
.ap-badges { gap: 1.5rem; align-items: flex-end; margin: 1.5rem 0 2rem; }
.ap-badges > .wp-block-image { margin: 0; }
.ap-badges img { width: 170px; height: auto; display: block; }
@media (max-width: 640px) {
	.ap-badges img { width: 110px; }
}

/* Recent op LinkedIn: kaart met het beeld van de post bovenaan, rand tot rand */
.ap-post { display: flex; flex-direction: column; padding: 0; }
.ap-post > .wp-block-image { margin: 0; border-bottom: var(--ap-rand); }
.ap-post > .wp-block-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ap-post > p { padding: 0 1.625rem; }
.ap-post > p:first-of-type { padding-top: 1.25rem; }
.ap-post > .ap-verder { margin-top: auto !important; padding-top: 0.9rem; padding-bottom: 1.5rem; }
.ap-verder a { font-weight: 700; color: var(--wp--preset--color--inkt); }
.ap-linkedin > .ap-verder { margin-top: 1.5rem; }
.ap-post > .wp-block-image { margin: 0 !important; }
.ap-post > .wp-block-image a { display: block; }

/* foto's: een strook van drie onder een sectie, en een foto in het rode vlak van de held */
.ap-fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem; margin-top: 2rem; }
.ap-fotos > .wp-block-image { margin: 0; }
.ap-fotos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--ap-rand); }
.ap-fotos figcaption, .ap-held-foto figcaption { font-size: 0.75rem; margin: 0.5rem 0 0; text-align: left; }
.ap-held .ap-rood .ap-held-foto { margin: 1.5rem 0; }
.ap-held .ap-rood .ap-held-foto img { display: block; width: 100%; max-width: 26rem; aspect-ratio: 4 / 3; object-fit: cover; border: 3px solid var(--wp--preset--color--wit); }
.ap-held .ap-rood .ap-held-foto figcaption { color: #FFE4E4; }