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

: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;
}