/*
 * Theme "Minimalistic" — CSS-only skin (Fase A multi-template, aug 2026).
 *
 * Ingetogen en luchtig: veel wit, haarlijn-randen, rustige typografie en
 * nauwelijks decoratie. De merkkleur (--main-color) wordt spaarzaam gebruikt
 * als accent (links, focus, dunne lijnen) — de rest is monochroom.
 *
 * Regels: alles geprefixt met body.theme-minimalistic (laadt ná style.css en
 * wint dan altijd); kleuren via de site-CSS-variabelen waar het accenten
 * betreft; geen img-sizing (zie de `.container img !important`-valkuil);
 * RTL-neutraal (symmetrische spacing). Geen externe fonts: systeem-stack.
 */

/* ---------- Typografie ---------- */
body.theme-minimalistic {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	color: #444;
	background-color: #fff;
}
body.theme-minimalistic p { line-height: 1.75; }
body.theme-minimalistic h2,
body.theme-minimalistic h3,
body.theme-minimalistic h4 {
	font-weight: 600;
	color: #1a1a1a;
	letter-spacing: -0.01em;
}
body.theme-minimalistic h2 { line-height: 1.3; }
body.theme-minimalistic a { color: var(--main-color); }

/* ---------- Header / navigatie ---------- */
/* Zwevende pil-navigatie (mail tkcheringa 27 aug 2026, herzien 27 aug): #main-nav
   is een gecentreerde, WITTE pil die "zweeft" boven een licht-grijze header-band.
   De outer header krijgt daarom een licht-grijze achtergrond (zie regel
   hieronder), zodat de witte pil zich er duidelijk van losmaakt. De pil zelf is
   wit met een verfijnde schaduw + haarlijn-rand voor zichtbaarheid tegen het
   grijs. Uitgelijnd op de site-container (max 1140px); width met calc houdt op
   smalle schermen 12px lucht aan weerszijden; margin:auto centreert de pil. */
body.theme-minimalistic header {
	background-color: #f1f1f3;
}
body.theme-minimalistic #main-nav {
	max-width: 1140px;
	width: calc(100% - 24px);
	margin: 14px auto;
	background-color: #fff;
	border: 1px solid #e6e6e9;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
/* Scroll-'jump'-fix (mail tkcheringa 27 aug 2026): stick_in_parent (sticky-kit,
   footer.php) maakt #main-nav bij het scrollen position:fixed met inline width/
   left, waardoor de margin:auto-centrering wegvalt en de pil naar links "sprong".
   Bij .is_stuck forceren we links=rechts=0 met auto-marges en een max-width, zodat
   een fixed element betrouwbaar gecentreerd blijft t.o.v. de viewport. De inline
   px-width van sticky-kit wordt overschreven met dezelfde calc als in rust. */
body.theme-minimalistic #main-nav.is_stuck {
	left: 0 !important;
	right: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: calc(100% - 24px) !important;
	max-width: 1140px !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}
/* Compacte pil: minimale verticale padding, ruime horizontale inset zodat de
   inhoud (logo links, menu rechts) niet tegen de ronding valt. */
body.theme-minimalistic #main-nav .main-nav {
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 36px;
	padding-right: 36px;
}
/* Logo strak in de pil: vaste 250x80-box, geen marges/padding op de <img>
   (verslaat de Bootstrap .my-3) noch op de omliggende <a>. object-fit houdt
   de verhouding binnen de box. !important omdat `.container img` in style.css
   height/max-width met !important forceert (de img zit in .main-nav.container). */
body.theme-minimalistic #main-nav .main-nav > a {
	margin: 0;
	padding: 0;
	line-height: 0;
}
body.theme-minimalistic #main-nav .main-nav > a img {
	width: 250px !important;
	height: 80px !important;
	object-fit: contain;
	margin: 0 !important;
	padding: 0 !important;
}
/* Logo: kaal woordmerk i.p.v. de "dubbele knop" uit style.css (border +
   box-shadow + padding op .header-logo). Donker, licht gespatieerd; de
   merkkleur blijft voor accenten. */
body.theme-minimalistic .header-logo {
	border: 0;
	box-shadow: none;
	padding: 0;
}
body.theme-minimalistic .header-logo a {
	display: inline-block;
	font-family: inherit;
	font-weight: 600;
	font-size: 29px;
	letter-spacing: 0.01em;
	word-spacing: normal;
	color: #1a1a1a;
	background-color: transparent;
	padding: 0;
	transition: color 0.15s ease;
}
body.theme-minimalistic .header-logo a:hover {
	color: var(--main-color);
	text-decoration: none;
}
/* Nav-links (mail tkcheringa 27 aug 2026): proportioneel groter (15px) en zonder
   all-caps (text-transform:none verslaat de uppercase uit style.css); tracking
   normaal, past beter bij kleine letters. Kleuren strikt via de merk-CSS-vars:
   rust = primair (--main-color), hover = secundair (--secondary-color), niet
   langer het standaard-grijs. De desktop-pill-hover (gevulde main-color-
   achtergrond + witte tekst) komt uit smartmenu.min.css en blijft leidend. */
body.theme-minimalistic ul#main-menu > li > a {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	color: var(--main-color);
	transition: color 0.15s ease;
}
body.theme-minimalistic ul#main-menu > li > a:hover,
body.theme-minimalistic ul#main-menu > li > a:focus {
	color: var(--secondary-color);
}
body.theme-minimalistic #top_bar {
	background-color: #fafafa;
	font-size: 13px;
}
body.theme-minimalistic.container #top_bar {
	border-top: solid 1px var(--main-color);
}

/* ---------- Paginakop: lichte band met donkere kop ----------
   style.css zet hier de tertiary-kleur + dikke randen en (belangrijk) een
   WITTE h1 en witte breadcrumbs. Hier wordt de band bijna wit, dus kop en
   kruimels moeten expliciet donker. */
body.theme-minimalistic .header_h1 {
	background-color: #fcfcfc;
	background-image: none;
	border-top: 0;
	border-bottom: 1px solid #ececec;
	padding: 34px 0;
}
body.theme-minimalistic .header_h1 h1,
body.theme-minimalistic h1 {
	color: #1a1a1a;
	font-weight: 300;
	letter-spacing: -0.01em;
	text-shadow: none;
}
body.theme-minimalistic #breadcrumbs,
body.theme-minimalistic #breadcrumbs a {
	color: #9a9a9a;
}
body.theme-minimalistic #breadcrumbs {
	font-size: 12px;
	letter-spacing: 0.02em;
	text-shadow: none;
}
/* Bootstrap-separators (::before) erven de kruimelkleur; expliciet gedempt. */
body.theme-minimalistic .breadcrumb > li + li::before,
body.theme-minimalistic .breadcrumb-item + .breadcrumb-item::before {
	color: #c4c4c4;
}

/* ---------- Kaarten / listings: vlak, haarlijn ---------- */
body.theme-minimalistic .card,
body.theme-minimalistic .post-block,
body.theme-minimalistic .summary_div {
	background-color: #fff;
	border: 1px solid #ececec;
	border-radius: 2px;
	box-shadow: none;
}
/* Reactieblok (.post-block.post-comments) los, zonder kader/vulling (mail tkcheringa
   27 aug 2026): de gedeelde .post-block-kaartstijl hierboven geldt niet voor het
   reactieblok — transparante achtergrond, geen rand/hoeken/schaduw. Hogere
   specificiteit (2 classes) + plaatsing ná de gedeelde regel wint, zodat andere
   .post-block-kaarten ongemoeid blijven. */
body.theme-minimalistic .post-block.post-comments {
	border: none;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}
body.theme-minimalistic .card-footer {
	background-color: #fafafa;
	border-top: 1px solid #ececec;
}
body.theme-minimalistic section.figure.product-box {
	border-bottom: 1px solid #ececec !important;
}
body.theme-minimalistic .site_title {
	text-transform: none;
	font-weight: 600;
}
body.theme-minimalistic .site_meta {
	font-size: 13px;
	color: #999;
}

/* Product-samenvatting (offer-pagina): de donkere tabel uit style.css
   (#313334 met lichte tekst) wordt een lichte kaart met haarlijnen. Alle
   td-varianten expliciet donker, anders blijft er lichte tekst op wit staan. */
body.theme-minimalistic .summary_div { padding: 16px; }
body.theme-minimalistic .summary_div table { background: transparent; }
body.theme-minimalistic .summary_div table td {
	color: #444;
	font-weight: 500;
}
body.theme-minimalistic .summary_div table td.criteria {
	border-bottom: 1px solid #ececec;
}
body.theme-minimalistic .summary_div table td.summary {
	border-right: 1px solid #ececec;
	font-weight: 400;
}
body.theme-minimalistic .summary_div table td.summary .summary-text { color: #666; }

/* Ranking-badge (#1, #2, ...): stille outline i.p.v. gevulde kleurpil.
   !important omdat style.css de badge-achtergrond ook met !important zet. */
body.theme-minimalistic .badge.wd-badge {
	background-color: transparent !important;
	color: #1a1a1a;
	border: 1px solid #d8d8d8;
	border-radius: 2px;
	font-weight: 600;
}

/* ---------- Knoppen: vlak, rechte hoeken, geen schaduw ---------- */
body.theme-minimalistic .btn {
	border-radius: 0;
	font-weight: 500;
	letter-spacing: 0.04em;
	box-shadow: none;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}
body.theme-minimalistic .btn:hover { opacity: 0.88; }
/* Contrast-fix (zelfde les als theme modern): gevulde knoppen zijn vaak
   <a>-links en zouden anders de link-kleur (= vaak hun eigen achtergrond)
   erven. Outline-knoppen bewust met rust gelaten. */
body.theme-minimalistic .btn-primary,
body.theme-minimalistic .btn-secondary,
body.theme-minimalistic .btn-success,
body.theme-minimalistic .btn-danger,
body.theme-minimalistic .btn-info,
body.theme-minimalistic .btn-dark {
	color: #fff;
}

/* ---------- Formulieren ---------- */
body.theme-minimalistic .form-control {
	border-radius: 0;
	border-color: #ddd;
	background-color: #fff;
}
body.theme-minimalistic .form-control:focus {
	border-color: var(--main-color);
	box-shadow: none;
}

/* ---------- Paginering ---------- */
body.theme-minimalistic .pagination > li > a,
body.theme-minimalistic .pagination > li > span,
body.theme-minimalistic .pagination .page-link {
	border-radius: 0;
	border-color: #ececec;
	color: #666;
}

/* ---------- Footer: monochroom donker ---------- */
body.theme-minimalistic footer {
	background-color: #161616;
	margin-top: 56px;
}
body.theme-minimalistic .footer_ul_amrc li a,
body.theme-minimalistic footer p {
	color: #9a9a9a;
}

/* ---------- Diversen ---------- */
body.theme-minimalistic .pricetag { border-radius: 2px; }
body.theme-minimalistic .suggestions { border: 1px solid #ececec; }
body.theme-minimalistic #myBtn { border-radius: 0; }