/*
 * Theme "Modern" — CSS-only skin (Fase A multi-template, jul 2026).
 *
 * Laadt NA style.css; alle regels zijn geprefixt met body.theme-modern zodat
 * ze alleen op sites met dit theme gelden en altijd van style.css winnen.
 * Zelfde markup, zelfde CSS-variabelen (--main-color / --secondary-color /
 * --tertiary-color) als classic — de kleurkiezer in het CMS blijft dus werken.
 *
 * Bewust CSS-only: geen layout-herindeling, geen img-sizing (zie de
 * `.container img !important`-valkuil), RTL-neutraal (symmetrische spacing).
 */

/* ---------- Typografie ---------- */
body.theme-modern {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	color: #3a4149;
	background-color: #f6f8fa;
}
body.theme-modern h2,
body.theme-modern h3,
body.theme-modern h4 {
	font-weight: 700;
	color: #1d2530;
	letter-spacing: -0.015em;
}
body.theme-modern h2 { line-height: 1.25; }
body.theme-modern p { line-height: 1.65; }
body.theme-modern a { color: var(--main-color); }

/* ---------- Header / navigatie ---------- */
body.theme-modern #main-nav {
	background-color: #fff;
	box-shadow: 0 1px 12px rgba(29, 37, 48, 0.08);
}
body.theme-modern .header-logo a {
	font-weight: 800;
	letter-spacing: -0.02em;
}
body.theme-modern ul#main-menu > li > a {
	font-size: 13px;
	text-transform: none;
	font-weight: 600;
	border-radius: 999px;
}
body.theme-modern .sm-mint a:hover,
body.theme-modern .sm-mint a:focus,
body.theme-modern .sm-mint a:active,
body.theme-modern .sm-mint a.highlighted {
	border-radius: 999px;
}
body.theme-modern #top_bar {
	background-color: #eef1f5;
	font-size: 13px;
}
body.theme-modern.container #top_bar {
	border-top: solid 4px var(--main-color);
}

/* Paginakop: kleurverloop op de hoofdkleur i.p.v. vlakke tertiary + randen */
body.theme-modern .header_h1 {
	background-color: var(--main-color);
	background-image: linear-gradient(135deg,
		var(--main-color),
		color-mix(in srgb, var(--main-color), #101820 38%));
	border-top: 0;
	border-bottom: 0;
	padding: 26px 0;
}
body.theme-modern .header_h1 h1 {
	font-weight: 800;
	letter-spacing: -0.02em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
body.theme-modern #breadcrumbs,
body.theme-modern #breadcrumbs a {
	color: rgba(255, 255, 255, 0.85);
}

/* ---------- Kaarten (top10, reviews, artikelen) ---------- */
body.theme-modern .card,
body.theme-modern .post-block,
body.theme-modern .summary_div {
	border: 0;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(29, 37, 48, 0.07);
	overflow: hidden;
}
body.theme-modern .card-footer {
	background-color: #fafbfc;
	border-top: 1px solid #eef1f5;
}
body.theme-modern section.figure.product-box {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(29, 37, 48, 0.07);
	padding: 1.25rem !important;
	margin-bottom: 1.25rem;
	border-bottom: 0 !important;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
body.theme-modern section.figure.product-box:hover {
	box-shadow: 0 6px 24px rgba(29, 37, 48, 0.12);
	transform: translateY(-2px);
}
body.theme-modern .image,
body.theme-modern .product.image {
	border-radius: 10px;
}
body.theme-modern .site_title {
	text-transform: none;
	font-weight: 800;
}
body.theme-modern .site_meta {
	font-size: 13px;
	color: #7a8494;
}

/* Ranking-badge (#1, #2, ...) als pil in de hoofdkleur */
body.theme-modern .badge.wd-badge {
	background-color: var(--main-color) !important;
	color: #fff;
	border-radius: 999px;
	padding: 0.4em 0.75em;
	font-weight: 700;
}

/* ---------- Knoppen ---------- */
body.theme-modern .btn {
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}
body.theme-modern .btn-success,
body.theme-modern .btn-primary {
	border: 0;
	box-shadow: 0 3px 10px rgba(29, 37, 48, 0.16);
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}
body.theme-modern .btn-success:hover,
body.theme-modern .btn-primary:hover {
	box-shadow: 0 5px 16px rgba(29, 37, 48, 0.22);
}

/* ---------- Formulieren ---------- */
body.theme-modern .form-control {
	border-radius: 10px;
	border-color: #dde3ea;
}
body.theme-modern .form-control:focus {
	border-color: var(--main-color);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--main-color), transparent 78%);
}
body.theme-modern .input-group-append .btn {
	border-radius: 0 999px 999px 0;
}

/* ---------- Paginering ---------- */
body.theme-modern .pagination > li > a,
body.theme-modern .pagination > li > span,
body.theme-modern .pagination .page-link {
	border-radius: 8px;
	margin: 0 2px;
	border-color: #e4e9ef;
}

/* ---------- Footer ---------- */
body.theme-modern footer {
	background-color: #1d2530;
	margin-top: 56px;
}
body.theme-modern .footer_ul_amrc li a,
body.theme-modern footer p {
	color: #aeb8c4;
}

/* ---------- Diversen ---------- */
body.theme-modern .pricetag { border-radius: 8px; }
body.theme-modern .suggestions { border-radius: 10px; overflow: hidden; }
body.theme-modern #myBtn { border-radius: 999px; }

/* =====================================================================
 * Artikel-layout & mobiel (mail Rutger 16 jul 2026) — alleen theme modern.
 * Bijbehorende markup: templates/themes/modern/modules/{article_content,
 * article_toc}.php + de sidebar-zoek in sidebar.php (rt_theme()-guard).
 * ===================================================================== */

/* --- Titel direct onder de breadcrumbs (overtollige marges weg) --- */
body.theme-modern .header_h1 #breadcrumbs { margin-bottom: 0.4rem; }
body.theme-modern .header_h1 h1 { margin-top: 0.1rem; margin-bottom: 0; }

/* --- Breadcrumbs horizontaal scrollbaar op mobiel, scrollbar verborgen --- */
@media (max-width: 767.98px) {
	body.theme-modern #breadcrumbs {
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: none;   /* IE/Edge legacy */
		scrollbar-width: none;      /* Firefox */
	}
	body.theme-modern #breadcrumbs::-webkit-scrollbar { display: none; } /* WebKit */
}

/* --- Artikel-body in een witte kaart --- */
body.theme-modern .mdn-article-card {
	background: #fff;
	border-radius: 14px;
	padding: 1.75rem 1.9rem;
	box-shadow: 0 2px 14px rgba(29, 37, 48, 0.07);
	margin-bottom: 1.5rem;
}
@media (max-width: 767.98px) {
	body.theme-modern .mdn-article-card { padding: 1.15rem; }
}

/* --- Subkoppen (h2) kleiner dan de titel + meer ruimte erboven --- */
body.theme-modern .mdn-article-card h2 {
	font-size: 1.75rem;
	margin-top: 2rem;
	line-height: 1.3;
}
@media (max-width: 767.98px) {
	body.theme-modern .mdn-article-card h2 {
		font-size: 1.35rem;
		margin-top: 1.5rem;
	}
}

/* --- Auteursblok als eigen kaart met lichte achtergrond --- */
body.theme-modern .post-author {
	background: #f8fafc;
	padding: 1.5rem 1.75rem;
	margin-top: 1.5rem;
}
body.theme-modern .post-author .heading-primary { margin-top: 0; }

/* --- Geconsolideerde sidebar-zoekbalk --- */
body.theme-modern .mdn-sidebar-search .input-group-append .btn {
	border-radius: 0 999px 999px 0;
}

/* --- Inhoudsopgave: desktop sticky rechter-rail, volgt de scroll --- */
body.theme-modern .mdn-toc-toggle { display: none; }
body.theme-modern .mdn-toc {
	display: block;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(29, 37, 48, 0.07);
	padding: 1rem 1.15rem;
	margin: 0 0 1.5rem;
}
body.theme-modern .mdn-toc-tab {
	display: block;
	margin: 0 0 0.6rem;
	font-weight: 700;
	color: #1d2530;
	cursor: default;
}
body.theme-modern .mdn-toc-caret { display: none; } /* pijl is enkel voor de mobiele tab */
body.theme-modern .mdn-toc .list-group-item { padding: 0.4rem 0.5rem; }

/* In de sidebar-aside (blog): sticky rail die de scroll volgt op desktop. In de
 * module-flow (bv. content-sites zonder aside) blijft het een gewone kaart. */
@media (min-width: 768px) {
	body.theme-modern .sidebar .mdn-toc {
		position: sticky;
		top: 88px;
		max-height: calc(100vh - 110px);
		overflow-y: auto;
	}
}

/* --- Inhoudsopgave op mobiel: sticky tab onderaan, klapt omhoog open --- */
@media (max-width: 767.98px) {
	body.theme-modern .mdn-toc {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		z-index: 1035;
		width: auto;
		max-width: calc(100% - 16px);
		margin: 0;
		padding: 0;
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: visible;
	}
	/* Tab onderaan (order 2), paneel erboven (order 1) => opent naar boven. */
	body.theme-modern .mdn-toc-tab {
		order: 2;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		margin: 0;
		padding: 0.5rem 1.35rem;
		background-color: var(--main-color);
		color: #fff;
		font-size: 14px;
		border-radius: 999px 999px 0 0;
		box-shadow: 0 -4px 16px rgba(29, 37, 48, 0.22);
		cursor: pointer;
	}
	body.theme-modern .mdn-toc-caret {
		display: inline-block;
		transition: transform 0.2s ease;
	}
	body.theme-modern .mdn-toc-body {
		order: 1;
		width: min(92vw, 420px);
		background: #fff;
		border-radius: 14px 14px 0 0;
		box-shadow: 0 -6px 24px rgba(29, 37, 48, 0.2);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.28s ease;
	}
	body.theme-modern .mdn-toc-toggle:checked ~ .mdn-toc .mdn-toc-body {
		max-height: 60vh;
		overflow-y: auto;
	}
	body.theme-modern .mdn-toc-toggle:checked ~ .mdn-toc .mdn-toc-caret {
		transform: rotate(180deg);
	}
}

/* --- Primaire review-CTA als zwevende pil op mobiel --- */
@media (max-width: 767.98px) {
	body.theme-modern .product-details-gallery > a.btn-success.btn-block {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 100px;             /* boven een eventuele footer-navigatie */
		z-index: 1030;
		display: inline-block;
		width: auto;
		min-width: 260px;
		max-width: calc(100% - 32px);
		margin: 0 !important;
		padding: 0.55rem 2rem;
		border-radius: 999px;
		box-shadow: 0 6px 20px rgba(29, 37, 48, 0.3);
	}
}