/*
Theme Name: Rolf Winter CV
Theme URI: https://rolfwinter.nl
Description: Portfolio- en cv-thema voor rolfwinter.nl. Kindthema van Twenty Twenty-Five in dezelfde huisstijl als rolfwinter.com: petrolgroen, Baloo 2 en Mulish, en de punt achter de naam als merkteken.
Author: Rolf Winter
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
License: GNU General Public License v2 or later
Text Domain: rolfwinter-cv
*/

:root {
	/* Breedte van de kop- en voetbalk. Bewust breder dan de tekstkolom, en
	   op één plek geregeld zodat ze niet uit elkaar kunnen lopen. */
	--rw-band-width: 64rem;
}

/* De punt achter de naam is het merkteken: zelfde grootte, alleen petrol. */
.rw-dot {
	color: var(--wp--preset--color--petrol);
}

/*
 * Voettekst onderaan houden, ook op korte pagina's.
 * De width-regel is nodig omdat blokken in een flexcontainer anders krimpen
 * tot hun eigen breedte en door WordPress' margin:auto gecentreerd worden.
 */
.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > * {
	width: 100%;
	/* Zonder border-box telt de eigen marge bij de volle breedte op en steekt
	   de kop- en voettekst aan de rechterkant buiten het venster. */
	box-sizing: border-box;
}

.wp-site-blocks > main {
	flex: 1;
}

/* Koptekst: woordmerk links, navigatie rechts, uitgelijnd op de tekstkolom. */
.rw-header {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) 0;
}

.rw-header__inner {
	max-width: var(--rw-band-width);
	margin-inline: auto;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
}

.rw-wordmark {
	display: block;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.rw-wordmark__name {
	display: block;
	font-family: var(--wp--preset--font-family--baloo);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
}

/* De regel onder de naam, in petrol — net als op het visitekaartje. */
.rw-wordmark__payoff {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--petrol);
}

/* Op smalle schermen moeten de drie links naar een tweede regel kunnen. */
.rw-nav ul {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

/*
 * WordPress zet de linkkleur in het navigatieblok zelf op 'inherit' met een
 * verdubbelde klasse, wat zwaarder weegt dan een eigen regel op de link.
 * Daarom kleuren we het omhullende element; de link neemt het over.
 */
.rw-nav {
	color: var(--wp--preset--color--contrast);
}

.rw-nav a {
	text-decoration: none;
}

.rw-wordmark:hover,
.rw-wordmark:focus-visible,
.rw-nav a:hover,
.rw-nav a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* De pagina waar je bent, in petrol — geen extra markering nodig. */
.rw-nav .current-menu-item {
	color: var(--wp--preset--color--petrol);
}

/*
 * Voettekst = de achterkant van het visitekaartje: volvlak petrol, witte tekst,
 * drie blokken met een vet kopje en de regels eronder.
 */
.rw-footer {
	margin-top: var(--wp--preset--spacing--80);
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--base);
	/* Lettergrootte en regelhoogte op de voettekst zelf, zodat de contactregels
	   in het HTML-blok exact hetzelfde ritme krijgen als de andere kolommen. */
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

.rw-footer__inner {
	max-width: var(--rw-band-width);
	margin-inline: auto;
}

.rw-footer__inner > * {
	margin-block: 0;
}

/* Het woordmerk krijgt een eigen regel boven de kolommen. */
.rw-footer__mark {
	margin-bottom: var(--wp--preset--spacing--60);
}

.rw-footer__wordmark {
	display: block;
	font-family: var(--wp--preset--font-family--baloo);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
}

/* Strak onder de naam: de regelhoogte van de voettekst (1,7) gaf hier
   dubbel zoveel lucht als gewenst. */
.rw-footer__role {
	display: block;
	line-height: 1.2;
}

/*
 * auto-fit met een minimum van 11rem: vier kolommen als het past, anders
 * twee, en op een telefoon één. Geen aparte breekpunten nodig.
 */
.rw-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	align-items: start;
}

.rw-footer__cols > * {
	margin-block: 0;
}

.rw-footer__block > * {
	margin-block: 0;
}

.rw-footer__block > * + * {
	margin-top: 0.35rem;
}

/* Kopjes drie gewichtsstappen zwaarder, zoals op het kaartje. */
.rw-footer__label {
	font-weight: 800;
	margin-bottom: 0.6rem;
}


.rw-footer a {
	color: inherit;
}

/* Contactregels: Tabler-lijnicoon links, tekst erachter, verticaal uitgelijnd. */
.rw-contact {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.rw-contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.rw-contact a:hover,
.rw-contact a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.rw-contact svg {
	flex: none;
	color: var(--wp--preset--color--petrol);
}

/*
 * In de petrolgroene voettekst nemen link én icoon de witte tekstkleur over.
 * Deze regels staan bewust achteraan: ze hebben dezelfde specificiteit als de
 * kleurregels hierboven, dus de volgorde beslist — geen !important nodig.
 */
.rw-contact--footer a,
.rw-contact--footer svg {
	color: inherit;
}

/* Een telefoonnummer of mailadres mag nooit middenin afbreken. */
.rw-contact a {
	white-space: nowrap;
}

/* In de voettekst volgen de contactregels de regelhoogte in plaats van een
   eigen tussenruimte, zodat ze op dezelfde hoogte liggen als de adresregels. */
.rw-contact--footer {
	gap: 0;
}

/* ------------------------------------------------------------------------
 * Cv-onderdelen. Alles is opgebouwd uit gewone blokken met een klasse, zodat
 * de inhoud in de editor aan te passen blijft.
 * --------------------------------------------------------------------- */

/* Kleine petrol kop boven een sectie, als de kopjes op het visitekaartje. */
.rw-kicker {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	color: var(--wp--preset--color--petrol);
	margin-bottom: 0;
}

.rw-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

/*
 * Tijdlijn: een dunne petrol lijn met per functie een punt erop — de punt
 * achter de naam, hier als markering.
 */
.rw-timeline {
	border-left: 2px solid var(--wp--preset--color--petrol);
	padding-left: var(--wp--preset--spacing--40);
}

.rw-timeline > * + * {
	margin-top: var(--wp--preset--spacing--60);
}

.rw-entry {
	position: relative;
}

.rw-entry::before {
	content: "";
	position: absolute;
	/* Op de lijn: inspringing + halve lijndikte + halve punt terug. */
	left: calc(-1 * var(--wp--preset--spacing--40) - 1px - 0.4rem);
	top: 0.45rem;
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--petrol);
}

/* Een afgesloten functie krijgt een open punt. */
.rw-entry--past::before {
	background-color: var(--wp--preset--color--base);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--petrol);
}

.rw-entry > * {
	margin-block: 0;
}

.rw-entry__period {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--petrol);
	font-variant-numeric: tabular-nums;
}

.rw-entry__role {
	margin-top: 0.15rem;
	font-size: var(--wp--preset--font-size--large);
}

.rw-entry__org {
	font-weight: 700;
}

.rw-entry__org + * {
	margin-top: 0.5rem;
}

/* Portfolio: kaarten in de brede kolom, twee naast elkaar als het past. */
.rw-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--wp--preset--spacing--40);
}

/* WordPress geeft kinderen van een constrained groep een eigen marge;
   in het raster regelt gap de ruimte. */
.rw-cards > * {
	margin-block: 0 !important;
}

.rw-card {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
	border-radius: 0.75rem;
}

.rw-card > * {
	margin-block: 0;
}

.rw-card > * + * {
	margin-top: 0.6rem;
}

.rw-card__title {
	font-size: var(--wp--preset--font-size--large);
}

/* De link onderaan de kaart zakt naar de bodem, ook bij kortere tekst. */
.rw-card__link {
	margin-top: auto !important;
	padding-top: 0.6rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* Status: volvlak petrol voor wat loopt, een omlijning voor wat verkocht is. */
.rw-status {
	align-self: flex-start;
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.6;
	background-color: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--base);
}

.rw-status--sold {
	background-color: transparent;
	color: var(--wp--preset--color--petrol);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--petrol);
}

/* Vaardigheden als labels. Een gewone lijst, dus ook zonder css leesbaar. */
.rw-kicker + .rw-tags {
	margin-top: 0.5rem;
}

.rw-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.rw-tags li {
	margin: 0;
	padding: 0.2rem 0.75rem;
	border: 1px solid var(--wp--preset--color--petrol);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}