/*
Theme Name: ReadMarks
Theme URI: https://readmarks.nl
Author: ReadMarks
Description: Lichtgewicht block theme voor ReadMarks. Warm, rustig en editorial, met de fotografie in de hoofdrol. Ontworpen voor WooCommerce zonder pagebuilder.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.13.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: readmarks
Tags: block-theme, full-site-editing, e-commerce, accessibility-ready
*/

/* Alles wat via theme.json kan, staat in theme.json.
   Hieronder alleen wat theme.json niet dekt. */

/* Toegankelijkheid: zichtbare focus, nooit alleen kleur. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--cocoa);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--cocoa);
	color: var(--wp--preset--color--warm-white);
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
}

/* Regellengte begrenzen zonder de bloklayout te breken. */
.rm-measure p,
.rm-measure li {
	max-width: var(--wp--custom--measure);
}

/* Cijfers in prijzen en tabellen uitlijnen. */
.woocommerce-Price-amount,
.wc-block-formatted-money-amount,
table {
	font-variant-numeric: tabular-nums;
}

/* Logo in de header en footer stuurt op currentColor. */
/* Het woordmerk is een schreefletter met dunne haarlijnen. Onder ongeveer
   190 px valt een deel van die lijnen tussen twee beeldpunten en vult de
   browser ze met grijs; het logo oogt dan zacht. Gemeten: op 148 px is 66
   procent van het logo halfgrijs, op 190 px nog 40 procent.

   Vaste breedtes in plaats van een vloeiende schaal, want een gebroken
   breedte laat elke rand tussen twee beeldpunten vallen. */
.rm-logo {
	display: block;
	width: 190px;
	height: auto;
	color: var(--wp--preset--color--cocoa);
}
@media (max-width: 782px) {
	.rm-logo { width: 150px; }
}
@media (max-width: 480px) {
	.rm-logo { width: 128px; }
}
.rm-logo--footer { color: var(--wp--preset--color--terracotta); }
.rm-logo svg { display: block; width: 100%; height: auto; fill: currentColor; }

/* Beelden nooit zonder afmetingen laten verspringen. */
img { height: auto; max-width: 100%; }

/* Beweging is decoratie, geen functie. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Plaatshouders voor fotografie. Vervang de group door een Afbeelding-blok
   zodra het echte beeld er is; de klasse mag dan weg. */
.rm-photo {
	background: var(--wp--preset--color--paper-sand);
	border-radius: var(--wp--custom--radius--lg);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--30);
}
.rm-photo--tall { aspect-ratio: 3 / 4; }
.rm-photo--square { aspect-ratio: 1 / 1; }
.rm-photo--onDark { background: rgba(255, 249, 243, .09); }
.rm-photo__label {
	margin: 0;
	max-width: 26ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	opacity: .55;
}

/* Uitklapbare vragen en het fabrikantenblok. */
.rm-faq .wp-block-details,
.rm-gpsr .wp-block-details {
	border-top: 1px solid var(--wp--custom--rule);
	padding: var(--wp--preset--spacing--30) 0;
}
.rm-faq .wp-block-details:last-child { border-bottom: 1px solid var(--wp--custom--rule); }
.rm-faq summary,
.rm-gpsr summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	list-style: none;
	position: relative;
	padding-right: 2rem;
}
.rm-gpsr summary { font-size: var(--wp--preset--font-size--medium); }
.rm-faq summary::-webkit-details-marker,
.rm-gpsr summary::-webkit-details-marker { display: none; }
.rm-faq summary::after,
.rm-gpsr summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 0;
	font-weight: 400;
	color: var(--wp--preset--color--terracotta-deep);
}
.rm-faq details[open] summary::after,
.rm-gpsr details[open] summary::after { content: "\2212"; }

/* Secundaire knop: contour in plaats van vlak. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--cocoa);
	border-color: var(--wp--preset--color--cocoa);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--cocoa);
	color: var(--wp--preset--color--warm-white);
}

/* Herroepingsformulier. Wettelijk verplicht sinds 19 juni 2026; de opschriften
   van de twee knoppen liggen vast en mogen niet worden verfraaid. */
.rm-herroeping { max-width: 100%; }
.rm-herroeping > p:first-child { margin-top: 0; }
/* Het formulier zelf mag smaller dan de leestekst eromheen: invoervelden die
   de volle regelbreedte vullen lezen als een formulier uit 2004. */
.rm-herroeping__form { max-width: 26rem; }
.rm-herroeping__form { margin-top: var(--wp--preset--spacing--40); }
.rm-veld { display: flex; flex-direction: column; margin: 0 0 var(--wp--preset--spacing--30); }
.rm-veld label { font-weight: 500; margin-bottom: .35rem; }
.rm-veld input {
	padding: .7rem .9rem;
	border: 1px solid var(--wp--custom--rule);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--warm-white);
	font: inherit;
	color: inherit;
}
.rm-veld input:focus-visible { outline: 2px solid var(--wp--preset--color--terracotta-deep); outline-offset: 2px; }
.rm-veld__hulp {
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--preset--color--cocoa) 72%, transparent);
	margin-top: .35rem;
}
/* De opschriften van deze twee knoppen liggen wettelijk vast en zijn lang.
   Ze moeten dus ruimte krijgen in plaats van te worden ingekort. */
.rm-herroeping__knop {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--medium);
	padding: 1rem 1.9rem;
	line-height: 1.25;
}
.rm-herroeping__fout {
	border-left: 3px solid var(--wp--preset--color--terracotta-deep);
	background: var(--wp--preset--color--blush);
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--sm);
	margin-bottom: var(--wp--preset--spacing--40);
}
.rm-herroeping__fout ul { margin: 0; padding-left: 1.1rem; }
.rm-herroeping__overzicht {
	display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.5rem;
	background: var(--wp--preset--color--paper-sand);
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--md);
	margin: var(--wp--preset--spacing--30) 0;
}
.rm-herroeping__overzicht dt { font-weight: 500; opacity: .75; }
.rm-herroeping__overzicht dd { margin: 0; }
.rm-herroeping__terug { margin-top: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); }
/* Spamval: staat buiten beeld maar blijft in de DOM. */
.rm-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Beelden die via [readmarks_beeld] worden geplaatst. De verhoudingen komen
   overeen met de uitsnedes die rmfoto exporteert, zodat er geen sprongen in de
   opmaak ontstaan terwijl het beeld laadt. */
.rm-beeld {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
	object-fit: cover;
}
.rm-beeld--tall { aspect-ratio: 3 / 4; }
.rm-beeld--square { aspect-ratio: 1 / 1; }
.rm-beeld--wide { aspect-ratio: 4 / 3; }

/* Wat de klant moet weten vóór hij op de knop drukt. Niet in een tabblad;
   dit is het punt waarop mensen afhaken, en de melding over retourkosten is
   wettelijk vereist vóór de koop. */
.rm-koopinfo {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--preset--color--cocoa) 78%, transparent);
	max-width: 34rem;
}

/* --- Tijdelijk, tot MT de collectienamen geven --- */

/* De standaardcategorie heet "Geen categorie" en dat leest als een half
   afgemaakte winkel. Zodra er echte collectiecategorieën zijn kan dit blok
   eruit; dan hoort de categorie er juist te staan. */
.product_meta .posted_in,
.wc-block-components-product-details__category { display: none; }

/* --- Verzending zit in de prijs --- */

/* Het cart-blok toont "De verzending wordt bij het afrekenen berekend". Dat
   spreekt de productpagina tegen en staat precies op het punt waar mensen
   afhaken. De nettere oplossing is de verzendcalculator uitzetten in de
   blokinstellingen van de pagina Winkelwagen; dit is de vangnetregel. */
.wc-block-components-totals-shipping__via,
.wc-block-components-shipping-calculator,
.wc-block-components-totals-shipping__change-address-button { display: none; }

/* De aanloopzin boven de hoofdkop. Geen kicker: die is kort en in kapitalen,
   dit is een volle zin die de vergelijking opzet. Dus gewone letter, iets
   kleiner en teruggenomen in kleur, zodat de kop eronder het overneemt. */
.rm-aanloop {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--cocoa);
	margin: 0 0 1.1rem;
	max-width: 32rem;
}

/* ---------------------------------------------------------------------------
   Header in terracotta, op verzoek van MT, 21 augustus 2026.

   Niet alles in dezelfde kleur: de volle terracotta haalt 3,1:1 op warm white
   en is daarmee te zwak voor kleine tekst. Menu en pictogrammen krijgen de
   donkere variant, 4,8:1. Het logo is een grafisch element en mag de volle
   kleur hebben; daar gelden geen contrasteisen voor.
--------------------------------------------------------------------------- */
header.wp-block-template-part {
	color: var(--wp--preset--color--terracotta-deep);
}

header.wp-block-template-part .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation a:visited,
header.wp-block-template-part .wp-block-navigation__responsive-container-open,
header.wp-block-template-part .wp-block-navigation__responsive-container-close,
header.wp-block-template-part .wc-block-mini-cart__button {
	color: var(--wp--preset--color--terracotta-deep);
}

header.wp-block-template-part .rm-logo {
	color: var(--wp--preset--color--terracotta);
}

/* Uitgeklapt mobiel menu: items op dezelfde marge als de rest van de site,
   niet tegen de schermrand. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-inline: var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------------------------
   Stappenbalk op de homepage.

   Smalle onderbreking tussen twee grote vlakken: drie iconen, drie woorden,
   geen uitleg. De uitleg staat op Zo werkt het, en verderop op de homepage
   staat de driestap met foto's al uitgewerkt.
--------------------------------------------------------------------------- */
.rm-stappenbalk__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, 7vw, 5.5rem);
}

.rm-stappenbalk__stap {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--cocoa);
}

.rm-stappenbalk__woord {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.125rem, 2.2vw, 1.5rem);
	line-height: 1;
}

.rm-icoon svg {
	display: block;
	width: clamp(28px, 4vw, 38px);
	height: auto;
}

/* ---------------------------------------------------------------------------
   Driestap op de pagina Zo werkt het: meer beeld, minder marge.
   MT vonden het blok daar te klein.
--------------------------------------------------------------------------- */
.rm-driestap .wp-block-columns.alignwide {
	max-width: min(1440px, 92vw);
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Retouradres pas tonen na een klik, zodat een woonadres niet ongevraagd
   op het scherm staat.
--------------------------------------------------------------------------- */
.rm-retouradres summary {
	cursor: pointer;
	color: var(--wp--preset--color--terracotta-deep);
}

/* ---------------------------------------------------------------------------
   Meelopende header.

   Let op waar 'sticky' staat. WordPress wikkelt een templateonderdeel in een
   eigen <header class="wp-block-template-part">, en daarbinnen staat de groep
   uit parts/header.html. Zet je sticky op die binnenste groep, dan plakt hij
   binnen zijn ouder, en die ouder is precies zo hoog als de balk zelf. Er is
   dan geen ruimte om te plakken en de balk scrollt gewoon weg. Sticky hoort
   dus op de buitenste wikkel, waarvan de ouder .wp-site-blocks de hele pagina
   beslaat.

   Om dezelfde reden staat de padding niet meer als inline stijl in het blok:
   een style-attribuut wint van elke klasse, dus de compacte stand kwam er
   nooit doorheen.

   Op mobiel krimpt de balk niet maar schuift hij weg bij naar beneden
   scrollen en komt hij terug bij omhoog scrollen. Daar is schermhoogte
   schaarser en is de balk al compact.
--------------------------------------------------------------------------- */
header.wp-block-template-part.rm-header-vast {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--warm-white);
	transition: transform 240ms ease;
}

.rm-header-vast .rm-header {
	padding-block: var(--wp--preset--spacing--30);
	transition: padding-block 240ms ease;
}

.rm-header-vast .rm-logo {
	transition: width 240ms ease;
}

.rm-header-vast.rm-header--compact .rm-header {
	padding-block: var(--wp--preset--spacing--10);
}

.rm-header-vast.rm-header--compact .rm-logo {
	width: 100px;
}

/* Ankerlinks en toetsenbordfocus mogen niet onder de balk verdwijnen. */
html {
	scroll-padding-top: 6rem;
}

/* De beheerbalk staat op desktop vast bovenaan; de header schuift eronder. */
.admin-bar header.wp-block-template-part.rm-header-vast {
	top: 32px;
}

@media screen and (max-width: 782px) {
	/* Onder 782px scrollt de beheerbalk gewoon mee. */
	.admin-bar header.wp-block-template-part.rm-header-vast {
		top: 0;
	}

	.rm-header-vast.rm-header--compact .rm-logo {
		width: 104px;
	}

	.rm-header-vast.rm-header--verborgen {
		transform: translateY(-100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part.rm-header-vast,
	.rm-header-vast .rm-header,
	.rm-header-vast .rm-logo {
		transition: none;
	}

	/* Wegschuiven is beweging die niet nodig is; dan blijft de balk staan. */
	.rm-header-vast.rm-header--verborgen {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Kruimelpad.

   WooCommerce zet er zelf een op de winkel- en productpagina's. Op de overige
   pagina's kwam hij uit [readmarks_kruimelpad]. Beide krijgen hier dezelfde
   opmaak, zodat "Home / Collecties" niet langer een uitzondering is.
--------------------------------------------------------------------------- */
.rm-kruimelpad,
.woocommerce-breadcrumb {
	font-size: var(--wp--preset--font-size--small);
	color: color-mix(in srgb, var(--wp--preset--color--cocoa) 70%, transparent);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.rm-kruimelpad a,
.woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.rm-kruimelpad a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--terracotta-deep);
	text-decoration: underline;
}

.rm-kruimelpad__scheiding {
	margin-inline: 0.5em;
	opacity: .6;
}

/* ---------------------------------------------------------------------------
   Paginakoppen.

   MT vonden de titels van de subpagina's te groot en te schreeuwend. De
   presets in theme.json zijn daarom verkleind; deze regel haalt de paginakop
   nog een stap terug, zodat hij niet met de hero op de homepage concurreert.
   De inspringing is gelijk aan die van de winkelpagina, zodat Collecties niet
   verder naar links staat dan de andere titels.
--------------------------------------------------------------------------- */
.rm-paginakop,
.woocommerce-products-header__title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-block: 0 var(--wp--preset--spacing--40);
}

/* De winkelpagina rendert buiten de rm-measure-wikkel en kreeg daardoor een
   andere linkermarge dan de gewone pagina's. */
.woocommerce-products-header {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Footer: logo in het midden, twee kolommen links en twee rechts.
   Gewijzigd op verzoek van MT, 7 september 2026.
--------------------------------------------------------------------------- */
.rm-footer__merk .rm-logo {
	margin-inline: auto;
	width: 150px;
}

.rm-footer__kolom h2:first-child {
	margin-top: 0;
}

@media (min-width: 782px) {
	/* Het logo is de middenas; de kolommen kijken ernaartoe. */
	.rm-footer__kolom--links {
		text-align: right;
	}
}

/* ---------------------------------------------------------------------------
   Hero.

   Twee klachten van 7 september: op mobiel stond er een lege band tussen de
   header en de eerste zin, en de foto viel helemaal onder de tekst waardoor er
   boven de vouw geen beeld te zien was.

   De lege band had twee bronnen die bij elkaar opgeteld werden: de bovenmarge
   die .wp-site-blocks aan elk direct kind geeft, 2rem, en de eigen bovenpadding
   van de hero, 3rem. Samen 5rem boven een kop die zelf al ruim staat. De marge
   is in front-page.html op nul gezet; de padding staat nu hier, zodat mobiel en
   desktop kunnen verschillen.

   De volgorde draait alleen op mobiel om. Op desktop staan tekst en beeld naast
   elkaar en klopt de leesvolgorde; op mobiel stapelen de kolommen en hoort het
   beeld eerst, anders begint de pagina met alleen tekst. De DOM-volgorde blijft
   ongewijzigd, dus voor een schermlezer verandert er niets.
--------------------------------------------------------------------------- */
.rm-hero {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

@media (max-width: 781px) {
	.rm-hero {
		padding-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	}

	.rm-hero .wp-block-column:first-child { order: 2; }
	.rm-hero .wp-block-column:last-child { order: 1; }

	/* Het herobeeld is een staande opname. Onbeperkt hoog zou hij het hele
	   scherm vullen en de kop weer wegduwen; daarom een liggende uitsnede met
	   een harde bovengrens, zodat kop en eerste alinea meekomen. */
	.rm-hero .rm-beeld,
	.rm-hero .rm-photo {
		width: 100%;
		max-height: 38vh;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: var(--wp--custom--radius--lg);
	}
}

/* ---------------------------------------------------------------------------
   Banden op de homepage.

   MT wilden op 7 september dat elke band een eigen achtergrondkleur krijgt en
   dat de witruimte ertussen dan kleiner wordt. De volgorde is licht, donker,
   licht, donker, de zandkleurige iconenbalk, licht.

   De banden staan strak tegen elkaar: marges op nul in de blokken zelf, en de
   binnenruimte hier, zodat mobiel en desktop kunnen verschillen.
--------------------------------------------------------------------------- */
.rm-band {
	padding-block: var(--wp--preset--spacing--60);
}

@media (max-width: 781px) {
	.rm-band {
		padding-block: var(--wp--preset--spacing--50);
	}
}

/* Een beeldplek zonder foto toont een gekleurd vlak met een label. Op een
   donkere band moet dat vlak meekleuren, anders staat er een lichte doos in. */
.rm-band--donker .rm-photo {
	background: rgba(255, 249, 243, .09);
}

/* Instagram in de header. Zelfde optische gewicht als het winkelwagenicoon. */
.rm-instagram {
	display: inline-flex;
	align-items: center;
	color: inherit;
}

.rm-icoon--klein svg {
	width: 22px;
	height: 22px;
}

/* Aanduiding bij een product dat niet te bestellen is, in het collectieraster. */
.rm-uitverkocht {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--cocoa) 65%, transparent);
}

/* De menuknop op mobiel was 24 bij 24 pixels. De gangbare ondergrens voor een
   aanraakdoel is 44 bij 44; dat haalt hij nu zonder dat het icoon groter
   wordt. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}