/**
 * Rexcom Fase 3 -- designtaal-CSS voor de data-driven archieven.
 * Tokens uit reference/rexcom-website/gutenberg-stijl.md (blauw-ladder, IBM Plex,
 * radius 10/7, 1px --line, mono eyebrows). Light-only. Scoped op .rexcom-* zodat
 * de Storefront-shop-chrome ongemoeid blijft.
 */

.rexcom-archief,
.rexcom-archief-header,
.rexcom-sibling-nav,
.rexcom-systemen {
	--rx-brand: #00588b;
	--rx-brand-deep: #003a5c;
	--rx-accent: #ff6900;
	--rx-accent-ink: #c85400;
	--rx-ink: #1e2a33;
	--rx-body: #4b5563;
	--rx-muted: #6b7280;
	--rx-surface-alt: #f8f9fa;
	--rx-line: #e5e7eb;
	--rx-note: #eef4f8;
	--rx-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--rx-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
	--rx-radius: 10px;
	--rx-radius-sm: 7px;
}

/* ---- Archief-header -------------------------------------------------- */
/* Storefront centreert de products-header; wij maken er een samenhangend,
   links-uitgelijnd introblok van (H1 + lead-intro delen dezelfde linkerrand).
   Dubbele class = wint van Storefront's .woocommerce-products-header (gelijke
   specificiteit, latere bron). */
.woocommerce-products-header.rexcom-archief-header {
	font-family: var(--rx-sans);
	text-align: left !important; /* Storefront zet hier center via een latere gelijk-specifieke regel */
	margin-bottom: 2rem;
}
.rexcom-archief-header .page-title,
.rexcom-archief-header .term-description h1 {
	color: var(--rx-brand);
	font-weight: 700;
	line-height: 1.15;
	font-size: clamp(2.1rem, 5vw, 3rem);
	margin: 0 0 .5rem;
}
.rexcom-archief-header .term-description,
.rexcom-archief-header p {
	color: var(--rx-body);
	max-width: 90ch;
	margin: 0;
	font-size: 1rem; /* body-maat (SSOT): gelijk aan de site-basis, 1 stap boven de 14px-tabel */
	line-height: 1.7;
}
/* Lead = alleen de alinea direct onder de H1 (editoriaal accent, SSOT 1.16rem).
   Vóór 2026-08-26 kreeg álle lopende content de lead-maat; dat sloeg de
   type-schaal plat en liet de content zweven boven de 14/16px-chrome. */
.rexcom-archief-header .term-description h1 + p {
	font-size: 1.16rem;
}
/* Tabel-intro = de gebruiksaanwijzing van de tabel ("de tabel toont..., filter op...").
   Opt-in via class in de content, zelfde patroon als de eigen <h1> (DEC-45): geen
   configveld, bestaande beschrijvingen veranderen niet. Klein (maat van de zoek-tabel),
   gedempt en op volle contentbreedte: hoort visueel bij de tabel eronder, niet bij de
   lead erboven. Drie classes winnen van de h1 + p-leadregel (2 classes) als de intro
   direct onder de H1 staat. Vuistregel: boven de tabel max twee alinea's, lead +
   tabel-intro; langere verdieping gaat via de rexcom:onderaan-markering onder de tabel. */
.rexcom-archief-header .term-description p.tabel-intro {
	font-size: .9rem;
	color: var(--rx-muted);
	max-width: none;
	margin: .9rem 0 0;
}

/* ---- Gemeenschappelijk ----------------------------------------------- */
.rexcom-archief {
	font-family: var(--rx-sans);
	color: var(--rx-body);
}

/* ---- Categorie-content onder de fotoknoppen / onderaan ---------------- */
/* Zelfde kleur en ritme als de header-tekst; body-maat (1rem), de lead-maat is
   voorbehouden aan de openingsalinea onder de H1. */
.rexcom-archief__content {
	color: var(--rx-body);
	max-width: 110ch;
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 0 2rem;
}

/* Content-koppen volgens de SSOT-type-schaal (h2: clamp 1.6-2rem, bold, brand).
   De legacy Customizer-CSS zette hier een 37px light-oranje kop; dubbele scope
   (.rexcom-archief + blok) geeft deze regels hogere specificiteit dan die
   content-CSS, die als Extra CSS ná dit bestand laadt. */
.rexcom-archief .rexcom-archief__content h2,
.rexcom-archief-header .term-description h2 {
	font-family: var(--rx-sans);
	color: var(--rx-brand);
	font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2rem);
	line-height: 1.25;
	margin: 2rem 0 .75rem;
}
.rexcom-archief__content--onderaan {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--rx-line);
}

/* ---- Photo-buttons (sub-categorie-grid) ------------------------------ */
/* EEN knop-familie met de sibling-nav hieronder: dezelfde rand, radius, kleur, font en
   hover. Verschil is uitsluitend het mediavlak. Verberg dat (--zonder-foto) en er staat
   exact een knop -- het principe van rexcom.nl (.navigatie / .navigatie-foto), waar het
   enige verschil tussen de twee lagen `display:none` op de img was.
   Het raster blijft wel: gelijke breedtes, uitgelijnd (variant C, Ron 2026-08-25). */
.rexcom-photo-buttons {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.25rem;
}
.rexcom-photo-button {
	margin: 0;
}
.rexcom-photo-button > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--rx-brand);
	border-radius: var(--rx-radius-sm);
	overflow: hidden;
	background: #fff;
	text-decoration: none;
	color: var(--rx-brand);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.rexcom-photo-button > a:hover,
.rexcom-photo-button > a:focus-visible {
	background: var(--rx-brand);
	color: #fff;
}
.rexcom-photo-button__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--rx-surface-alt);
	padding: 0;
	/* Scheidingslijn hoort BIJ het mediavlak, niet bij het label: zo verdwijnt hij mee
	   zodra de foto verborgen wordt, en houd je een schone knop over. */
	border-bottom: 1px solid var(--rx-line);
}
.rexcom-photo-button__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply; /* witte productachtergronden opnemen in de tint */
}
/* Identiek aan de knop-opmaak van .rexcom-sibling-nav a hieronder. */
.rexcom-photo-button__label {
	padding: .4rem .9rem;
	font-size: .95rem;
	line-height: 1.3;
	text-align: center;
}
/* De volgende stap: dezelfde rij, foto uit. Nog niet vanuit PHP aangestuurd -- de
   vraag welke niveaus foto's tonen staat nog open. */
.rexcom-photo-buttons--zonder-foto .rexcom-photo-button__media {
	display: none;
}

/* ---- Sibling-nav (leaf: zusters) + systeem-nav (verzameling) --------- */
.rexcom-sibling-nav,
.rexcom-systeem-nav {
	margin: 0 0 1.75rem;
	/* Stond alleen op .rexcom-archief en de header, waardoor deze nav terugviel op
	   Storefront's Source Sans Pro terwijl de fotorij ernaast IBM Plex kreeg. */
	font-family: var(--rx-sans);
}
.rexcom-systeem-nav__titel {
	display: block;
	font-family: var(--rx-mono);
	font-size: .76rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--rx-accent-ink);
	margin-bottom: .6rem;
}
.rexcom-sibling-nav ul,
.rexcom-systeem-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.rexcom-sibling-nav li,
.rexcom-systeem-nav li {
	margin: 0;
}
.rexcom-sibling-nav a,
.rexcom-systeem-nav a,
.rexcom-sibling-nav li.is-actief,
.rexcom-systeem-nav li.is-actief {
	display: inline-block;
	padding: .4rem .9rem;
	border: 1px solid var(--rx-brand);
	border-radius: var(--rx-radius-sm);
	font-size: .95rem;
	line-height: 1.3;
	text-decoration: none;
	background: #fff;
	color: var(--rx-brand);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Een hover-gedrag voor beide lagen: vullen met merkblauw (rexcom.nl-model). */
.rexcom-sibling-nav a:hover,
.rexcom-systeem-nav a:hover,
.rexcom-sibling-nav a:focus-visible,
.rexcom-systeem-nav a:focus-visible {
	background: var(--rx-brand);
	color: #fff;
}
.rexcom-sibling-nav li.is-actief,
.rexcom-systeem-nav li.is-actief {
	background: var(--rx-brand);
	border-color: var(--rx-brand);
	color: #fff;
	font-weight: 600;
}

/* ---- Systemen-lijst (niet-leaf overzicht) ---------------------------- */
.rexcom-systemen {
	margin: 2.5rem 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--rx-line);
}
.rexcom-systemen__kop {
	font-family: var(--rx-sans);
	color: var(--rx-brand);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1.25rem;
}
.rexcom-systemen__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.75rem;
}
.rexcom-systemen__titel {
	font-family: var(--rx-mono);
	font-size: .76rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--rx-accent-ink);
	margin: 0 0 .75rem;
}
.rexcom-systemen__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rexcom-systemen__lijst li {
	margin: 0 0 .35rem;
}
.rexcom-systemen__lijst a {
	color: var(--rx-brand);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease;
}
.rexcom-systemen__lijst a:hover,
.rexcom-systemen__lijst a:focus-visible {
	border-bottom-color: var(--rx-brand);
}

/* ---- Systemen-overzicht op een pagina (shortcode in .entry-content) --- */
/* Op /systemen/ (pagina 3556) staat de sectie in .entry-content, zonder
   .rexcom-archief-voorouder. De tokens draagt de sectie sinds 2026-08-26 zelf
   (scope-lijst bovenaan), maar de content-CSS van pagina's (Storefront + legacy
   Extra CSS) stylet a/h3 met gelijke specificiteit en een latere bron. Deze
   regels herhalen de archief-stijl met een .entry-content-anker (hogere
   specificiteit), zodat de lijsten op /systemen/ en op de categoriepagina's
   identiek renderen. */
.entry-content .rexcom-systemen {
	font-family: var(--rx-sans);
	color: var(--rx-body);
}
.entry-content .rexcom-systemen__titel {
	font-family: var(--rx-mono);
	color: var(--rx-accent-ink);
}
.entry-content .rexcom-systemen__lijst a {
	color: var(--rx-brand);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.entry-content .rexcom-systemen__lijst a:hover,
.entry-content .rexcom-systemen__lijst a:focus-visible {
	border-bottom-color: var(--rx-brand);
}

/* ---- Barn2-tabel: brede databak, niet in de leesmaat persen ---------- */
.rexcom-archief__tabel {
	margin-top: .5rem;
	overflow-x: auto; /* smalle viewports: horizontaal scrollen i.p.v. body-overflow */
}

/* Ingeklapte kolommen (DataTables responsive child-rij): de labelkolom een vaste
   minimumbreedte, zodat de waarden onder elkaar uitlijnen i.p.v. te verspringen met de
   lengte van het label.

   De voor de hand liggende selector (table.dataTable > tbody > tr.child span.dtr-title)
   werkt NIET: datatables.min.css draagt exact diezelfde selector met min-width:75px en
   laadt na ons (positie 33 tegen onze 23), dus bij gelijke specificiteit wint Barn2.
   Vandaar de langere selector -- (0,4,6) tegen hun (0,4,4) -- zonder !important.

   Structuur: table.wc-product-table > tbody > tr.child > td.child > ul.dtr-details >
   li > span.dtr-title, waarbij de li een FLEXCONTAINER is. Barn2's styles.css zet
   daar `flex: 0 1 80px`, dus de breedte komt normaal uit flex-basis; min-width is de
   ondergrens die het flexitem niet mag onderschrijden en wint daarvan.

   LET OP: dit is de enige regel in dit bestand die niet op .rexcom-* gescoped is. Het
   bereik blijft beperkt doordat rexcom-archief.css alleen op product-archieven en de
   zoekpagina wordt ingeladen (functions.php). */
table.wc-product-table > tbody > tr.child ul.dtr-details > li > span.dtr-title {
	min-width: 110px;
}

/* ---- Zoekresultaten (prototype zoek-migratie / DEC-45) --------------- */
.rexcom-zoek__telling {
	font-family: var(--rx-mono);
	font-size: .8rem;
	letter-spacing: .02em;
	color: var(--rx-muted);
}
.rexcom-zoek__sectie {
	margin-bottom: 2.5rem;
}
.rexcom-zoek__kop {
	font-family: var(--rx-sans);
	color: var(--rx-brand);
	font-size: 1.15rem;
	font-weight: 700;
	border-bottom: 1px solid var(--rx-line);
	padding-bottom: .4rem;
	margin-bottom: 1.1rem;
}
.rexcom-zoek__kaarten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: .9rem;
}
.rexcom-zoek__kaart-link {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	height: 100%;
	padding: 1rem 1.1rem;
	background: #fff;
	border: 1px solid var(--rx-line);
	border-radius: var(--rx-radius-sm);
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rexcom-zoek__kaart-link:hover {
	border-color: var(--rx-brand);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 88, 139, .08);
}
.rexcom-zoek__kaart-type {
	font-family: var(--rx-mono);
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--rx-accent-ink);
}
.rexcom-zoek__kaart-titel {
	font-family: var(--rx-sans);
	font-weight: 700;
	color: var(--rx-ink);
	line-height: 1.25;
}
.rexcom-zoek__kaart-fragment {
	font-family: var(--rx-sans);
	font-size: .85rem;
	color: var(--rx-body);
	line-height: 1.4;
}
.rexcom-zoek__leeg {
	font-family: var(--rx-sans);
	color: var(--rx-muted);
}
.rexcom-zoek__tabel {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--rx-sans);
	font-size: .9rem;
}
.rexcom-zoek__tabel thead th {
	background: var(--rx-brand);
	color: #fff;
	text-align: left;
	font-weight: 600;
	padding: .6rem .7rem;
	white-space: nowrap;
}
.rexcom-zoek__tabel tbody td {
	border-bottom: 1px solid var(--rx-line);
	padding: .5rem .7rem;
	color: var(--rx-body);
	vertical-align: middle;
}
.rexcom-zoek__tabel tbody tr:nth-child(even) {
	background: var(--rx-surface-alt);
}
.rexcom-zoek__tabel-img img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	display: block;
}
.rexcom-zoek__tabel-naam a {
	color: var(--rx-brand);
	font-weight: 600;
	text-decoration: none;
}
.rexcom-zoek__tabel-naam a:hover {
	text-decoration: underline;
}
.rexcom-zoek__tabel-prijs {
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Gerede content (2026-08-26)
   --------------------------------------------------------------------------- */

/* Brede takken: de 90ch-leeslimiet loslaten. De geredde AEM-pagina's zijn met
   media-text en galerijen over de volle kolom gebouwd en vallen anders in elkaar.
   Tijdelijk, tot die content in de designtaal is herschreven. */
.rexcom-breed .rexcom-archief-header .term-description {
	max-width: none;
}

/* Outline-knoppen in een term-description. VALKUIL: Gutenberg zet de outline-stijl
   (transparante achtergrond) in CSS die PER PAGINA wordt gegenereerd -- die lift niet
   mee als de content naar een term-description verhuist. Zonder die regel blijft de
   basis-achtergrond staan terwijl de tekst de outline-kleur houdt: dezelfde kleur voor
   letter en vlak, contrast 1.0, onleesbaar. Daarom zetten we de outline hier zelf, in
   designtaal-tokens. */
.rexcom-archief-header .term-description .wp-block-button.is-style-outline > .wp-block-button__link,
.rexcom-archief .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--rx-brand);
	/* border-color expliciet, niet currentColor: een specifiekere Gutenberg-regel zet
	   de randkleur nog op de oude sitekleur en zou currentColor overrulen. */
	border: 2px solid var(--rx-brand);
}
.rexcom-archief-header .term-description .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.rexcom-archief-header .term-description .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
.rexcom-archief .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.rexcom-archief .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--rx-brand);
	color: #fff;
}

/* Terugkerend verwijzingen-blok: content die bij de tak hoort maar geen productgroep is. */
.rexcom-extra-paginas {
	margin: 2.5rem 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--rx-line);
}
.rexcom-extra-paginas__kop {
	font-family: var(--rx-sans);
	color: var(--rx-brand);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1rem;
}
.rexcom-extra-paginas__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rexcom-extra-paginas__lijst li {
	margin: 0 0 .5rem;
}
.rexcom-extra-paginas__lijst a {
	font-weight: 600;
}
.rexcom-extra-paginas__uitleg {
	color: var(--rx-muted, #6B7280);
}

/* Media-blok: beeld naast tekst in een categorie-beschrijving. Gemaakt voor
   productfoto's op wit (600x600 en kleiner) -- die mag je niet over de volle
   tekstkolom uitrekken, dus het beeld houdt een eigen kolom en de tekst loopt
   ernaast. Onder 640px stapelt het. */
.rexcom-media {
	display: grid;
	grid-template-columns: minmax(180px, 280px) 1fr;
	gap: 2rem;
	align-items: start;
	margin: 0 0 1.75rem;
}
.rexcom-media__beeld {
	margin: 0;
}
.rexcom-media__beeld img {
	display: block;
	width: 100%;
	height: auto;
	/* Lichte grondtoon onder een wit uitgesneden foto: zonder vlak zweeft het
	   product op de pagina, met vlak leest het als een bewuste plaat. */
	background: var(--rx-surface-alt);
	border: 1px solid var(--rx-line);
	border-radius: var(--rx-radius);
}
.rexcom-media__beeld figcaption {
	font-family: var(--rx-mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rx-accent-ink);
	margin-top: .65rem;
	line-height: 1.45;
}
.rexcom-media__tekst > :first-child {
	margin-top: 0;
}
.rexcom-media__tekst > :last-child {
	margin-bottom: 0;
}
@media (max-width: 640px) {
	.rexcom-media {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	.rexcom-media__beeld {
		max-width: 280px;
	}
}

/* Tabellen in een categorie-beschrijving.
   VALKUIL: `body` heeft overflow-x:hidden, dus een te brede tabel geeft GEEN scrollbar
   maar wordt stil afgeknipt -- op 375px stak deze 213px buiten zijn kolom en was de
   laatste kolom onbereikbaar. `display:block` + overflow-x:auto laat de tabel binnen zijn
   eigen kader schuiven. Scoped op .term-description: de Barn2-producttabellen hebben hun
   eigen afhandeling en blijven ongemoeid. */
.rexcom-archief-header .term-description table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: .97rem;
}
.rexcom-archief-header .term-description table th,
.rexcom-archief-header .term-description table td {
	text-align: left;
	vertical-align: top;
	padding: .6rem .9rem;
	border-bottom: 1px solid var(--rx-line);
}
.rexcom-archief-header .term-description table th {
	font-family: var(--rx-mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rx-accent-ink);
	border-bottom-width: 2px;
	white-space: nowrap;
}
/* Maten en typeaanduidingen zijn data: mono geeft ze de rust van een specblad. */
.rexcom-archief-header .term-description table td:not(:first-child) {
	font-family: var(--rx-mono);
	font-size: .88rem;
	color: var(--rx-body);
}
.rexcom-archief-header .term-description table tbody tr:last-child th,
.rexcom-archief-header .term-description table tbody tr:last-child td {
	border-bottom: 0;
}