/*
 * Theme "Content" — CSS-only skin (Fase A multi-template, jul 2026).
 *
 * Leesgericht/redactioneel: serif-koppen, rustige lichte paginakop, vlakke
 * kaarten met dunne rand, ruime regelafstand. Bedoeld voor content-sites,
 * maar werkt ook op review-sites.
 *
 * Regels: alles geprefixt met body.theme-content (laadt ná style.css en wint
 * dan altijd); kleuren via de site-CSS-variabelen; geen img-sizing; RTL-neutraal.
 */

/* ---------- Typografie ---------- */
body.theme-content {
	font-family: Georgia, "Times New Roman", "Noto Serif", serif;
	font-size: 17px;
	color: #2d2d2d;
	background-color: #fffdfa;
}
body.theme-content p {
	line-height: 1.8;
}
body.theme-content h2,
body.theme-content h3,
body.theme-content h4 {
	font-family: Georgia, "Times New Roman", "Noto Serif", serif;
	font-weight: 700;
	color: #191919;
}
body.theme-content a { color: var(--main-color); }

/* ---------- Header / navigatie ---------- */
body.theme-content #main-nav {
	background-color: #fffdfa;
	border-bottom: 1px solid #e8e4dc;
}
body.theme-content .header-logo a {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 700;
	letter-spacing: 0.01em;
}
body.theme-content ul#main-menu > li > a {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
}
body.theme-content .sm-mint ul,
body.theme-content .sm-mint a.highlighted { background-color: #fffdfa; }
body.theme-content #top_bar {
	background-color: #f6f2ea;
	font-size: 13px;
}
body.theme-content.container #top_bar {
	border-top: solid 3px var(--main-color);
}

/* Paginakop: licht met donkere tekst i.p.v. donker vlak (let op: style.css
   zet h1 op wit — hier dus expliciet donker). */
body.theme-content .header_h1 {
	background-color: #fffdfa;
	background-image: none;
	border-top: 0;
	border-bottom: 3px double #e0dacd;
	padding: 30px 0 22px 0;
}
body.theme-content .header_h1 h1,
body.theme-content h1 {
	font-family: Georgia, "Times New Roman", serif;
	color: #191919;
	font-weight: 700;
	font-size: 34px;
}
body.theme-content #breadcrumbs,
body.theme-content #breadcrumbs a {
	color: #8a8377;
}

/* ---------- Kaarten / listings: vlak, dunne rand ---------- */
body.theme-content .card,
body.theme-content .post-block,
body.theme-content .summary_div {
	border: 1px solid #e8e4dc;
	border-radius: 4px;
	box-shadow: none;
	background-color: #fff;
}
body.theme-content .card-footer {
	background-color: #faf8f3;
	border-top: 1px solid #e8e4dc;
}
body.theme-content .site_title {
	text-transform: none;
	font-family: Georgia, "Times New Roman", serif;
}

/* ---------- Knoppen: ingetogen, rechte hoeken ---------- */
body.theme-content .btn {
	border-radius: 3px;
	font-weight: 600;
	letter-spacing: 0.02em;
	box-shadow: none;
}

/* ---------- Formulieren ---------- */
body.theme-content .form-control {
	border-radius: 3px;
	border-color: #d9d3c7;
	background-color: #fff;
}
body.theme-content .form-control:focus {
	border-color: var(--main-color);
	box-shadow: none;
}

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

/* ---------- Footer ---------- */
body.theme-content footer {
	background-color: #2b2723;
	margin-top: 48px;
}
body.theme-content .footer_ul_amrc li a,
body.theme-content footer p {
	color: #b8b0a3;
}

/* ---------- Artikelen ---------- */
body.theme-content .blog-posts article,
body.theme-content div.post-content {
	font-size: 17px;
}
body.theme-content .post-meta {
	color: #8a8377;
	font-size: 13px;
}

/* ---------- Product cards (review listing) — nieuwe redactionele kaart ----------
   Herbouw van de product-box (src/design.php → show_site, tak rt_theme()==='content').
   Nieuwe markup: .product-box-content > .pbc-top (.pbc-left 65% | .pbc-right 35%)
   > .pbc-divider > .pbc-body > .pbc-action. Doel (mail Rutger 21 aug 2026):
   witte kaart met rand + 8px hoeken, ronde rang-badge naast de titel, gouden
   fade-divider, goud-getinte meta en sterren, Bezoek-knop over de volle breedte
   onderaan. Kaart lijnt exact met de content-breedte (geen negatieve .row-marges). */

/* Kaart-omhulsel. display:flex/column overschrijft Bootstrap's .figure
   (display:inline-block). De margin 0 0 1rem 0 !important dood de negatieve
   marges/verticale ruimte die style.css zou geven en lijnt de kaart met de
   .container-breedte; !important op de border overschrijft de inline
   border-bottom die design.php op de oude markup zette (hier niet meer aanwezig,
   maar defensief bewaard). */
body.theme-content section.product-box-content {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border: 1px solid #e5e1d8 !important;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	padding: 1.5rem;
	margin: 0 0 1rem 0 !important;
}

/* Bovenste identiteitssectie: tekst links (65%), afbeelding rechts (35%). */
body.theme-content .product-box-content .pbc-top {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 1.25rem;
}
body.theme-content .product-box-content .pbc-left {
	flex: 0 0 65%;
	max-width: 65%;
	min-width: 0;
}
body.theme-content .product-box-content .pbc-right {
	flex: 0 0 35%;
	max-width: 35%;
	display: flex;
	align-items: flex-start;
	position: relative;
}
/* Afbeelding vult de rechterkolom en lijnt zo met de rechterrand van de
   knop eronder. object-fit: contain houdt het logo onvervormd. */
body.theme-content .product-box-content .pbc-right a {
	display: block;
	width: 100%;
}
body.theme-content .product-box-content .pbc-right img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Titel + ronde rang-badge. De h2 is een flex-row; de badge rekt mee met de
   hoogte van titel + metaregel (align-items: stretch) en wordt via
   aspect-ratio:1 een perfecte cirkel van die hoogte. De .pbc-titlewrap-kolom
   staat rechts van de badge, dus de metaregel begint precies onder de eerste
   letter van de titel (badge overgeslagen). */
body.theme-content .product-box-content h2.site_title {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 0.6rem;
	margin-bottom: 0;
	font-family: Georgia, "Times New Roman", "Noto Serif", serif;
	font-weight: 700;
	line-height: 1.25;
}
body.theme-content .product-box-content h2.site_title .badge.wd-badge {
	align-self: stretch;
	aspect-ratio: 1 / 1;
	height: auto;
	padding: 0;
	background-color: transparent !important;
	color: var(--main-color);
	border: 1.5px solid var(--main-color);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-weight: 700;
	flex: 0 0 auto;
}
body.theme-content .product-box-content .pbc-titlewrap {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
body.theme-content .product-box-content h2.site_title .active-color {
	color: #191919;
}

/* Metaregel (categorie): goud, halfvet, 15px; direct onder de titel. */
body.theme-content .product-box-content .site_meta,
body.theme-content .product-box-content .site_meta a {
	color: rgb(184, 176, 163);
	font-weight: 600;
	font-size: 15px;
}
body.theme-content .product-box-content .site_meta {
	margin-top: 0.15rem;
}

/* Sterren: fel goud met subtiele schaduw voor diepte. De inline color op de
   <i>-sterren (design.php: color:#f2b01e) vereist !important. */
body.theme-content .product-box-content .pbc-rating {
	margin-top: 0.75rem;
}
body.theme-content .product-box-content .rating i.fas,
body.theme-content .product-box-content .rating i.far {
	color: #ffc107 !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
body.theme-content .product-box-content .pbc-edit {
	float: right;
}

/* Fancy divider: 1px hoge gouden gradient die aan de randen uitfadet. */
body.theme-content .product-box-content .pbc-divider {
	height: 1px;
	border: 0;
	margin: 1.1rem 0;
	background: linear-gradient(to right,
		rgba(184, 176, 163, 0) 0%,
		rgba(184, 176, 163, 0.9) 50%,
		rgba(184, 176, 163, 0) 100%);
}

/* Body-tekst: hoog contrast, prettige regelafstand. De "Lees verder"-link
   staat in design.php met float-right in de excerpt — hier strikt links. */
body.theme-content .product-box-content .pbc-body {
	color: #444;
	line-height: 1.7;
}
body.theme-content .product-box-content .pbc-body a.float-right {
	float: none !important;
	display: inline-block;
	margin-top: 0.35rem;
}

/* Bezoek-knop: over de volle kaartbreedte, onderaan, ingetogen (navy) CTA. */
body.theme-content .product-box-content .pbc-action {
	margin-top: auto;
	padding-top: 1rem;
}
body.theme-content .product-box-content .pbc-action .btn {
	width: 100%;
	margin: 0;
}
body.theme-content .product-box-content .btn-success {
	background-color: #1f2a44;
	border-color: #1f2a44;
	color: #fff;
}
body.theme-content .product-box-content .btn-success:hover,
body.theme-content .product-box-content .btn-success:focus {
	background-color: #161f33;
	border-color: #161f33;
	color: #fff;
}

/* Responsive: op mobiel stapelen afbeelding en tekst (afbeelding onder de
   identiteit). */
@media (max-width: 767px) {
	body.theme-content .product-box-content .pbc-top {
		flex-direction: column;
	}
	body.theme-content .product-box-content .pbc-left,
	body.theme-content .product-box-content .pbc-right {
		flex: 0 0 100%;
		max-width: 100%;
	}
	body.theme-content .product-box-content .pbc-right {
		order: 2;
		margin-top: 1rem;
	}
}