/*
Theme Name:   Astra Child rentinholland
Theme URI:    https://rentinholland.nl/
Description:  Child theme van Astra voor rentinholland.nl. Hier komt de custom styling van de site, zodat Astra-updates de aanpassingen niet overschrijven.
Author:       Rick
Author URI:   https://rentinholland.nl/
Template:     astra
Version:      1.6.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-child-rentinholland
*/

/* ==========================================================================
   rentinholland.nl, Fase C stijllaag (2026-06-07)

   Designsysteem:
   - Deep Navy   #0D1937   koppen, knoppen, header-accent
   - Brand Gold  #F2B705   accent, signatuur
   - Soft Cream  #FEF6DA   CTA-blok-achtergrond
   - Slate       #5E667A   subtekst, dividers
   - Charcoal    #2D3748   body-tekst
   Manrope (koppen), Inter (tekst). 8px spacing-grid.
   ========================================================================== */

/* ---------- Self-hosted fonts (latin subset) ---------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/inter-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/inter-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/inter-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/inter-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/manrope-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('fonts/manrope-800.woff2') format('woff2');
}

/* ---------- Designsysteem-variabelen ---------- */
:root {
	--rih-navy: #0D1937;
	--rih-gold: #F2B705;
	--rih-gold-soft: #F6E2A8;
	--rih-cream: #FEF6DA;
	--rih-slate: #5E667A;
	--rih-charcoal: #2D3748;
	--rih-white: #FFFFFF;
	--rih-tint: #F3F5F9;
	--rih-border: #E3E8F0;
	--rih-font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
	--rih-font-head: 'Manrope', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Basis ---------- */
body {
	font-family: var(--rih-font-body);
	color: var(--rih-charcoal);
	font-size: 1.0625rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.entry-content p {
	margin-bottom: 1.5em;
}

/* ---------- Koppen ---------- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.ast-archive-title {
	font-family: var(--rih-font-head);
	color: var(--rih-navy);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.012em;
}

.entry-title,
.entry-content h1 {
	font-weight: 800;
	font-size: clamp(2rem, 4.6vw, 2.85rem);
	line-height: 1.12;
}

.entry-content h2 {
	font-size: clamp(1.5rem, 3vw, 2.05rem);
	font-weight: 800;
	margin-top: 2.6em;
	margin-bottom: 0.55em;
}

/* Gold signatuur-accent onder elke H2 */
.entry-content h2::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: 0.55rem;
	background: var(--rih-gold);
	border-radius: 2px;
}

.entry-content h3 {
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	margin-top: 1.9em;
	margin-bottom: 0.5em;
}

.entry-content h4 {
	font-size: 1.2rem;
	margin-top: 1.6em;
}

/* ---------- Links in de tekst ---------- */
.entry-content a {
	color: var(--rih-navy);
	text-decoration: underline;
	text-decoration-color: var(--rih-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.16em;
	transition: color 0.15s ease;
}
.entry-content a:hover,
.entry-content a:focus {
	color: var(--rih-gold);
}

/* ---------- Lijsten ---------- */
.entry-content ul li,
.entry-content ol li {
	margin-bottom: 0.5em;
}
.entry-content ul li::marker {
	color: var(--rih-gold);
}

/* ---------- Blockquote ---------- */
.entry-content blockquote {
	border-left: 4px solid var(--rih-gold);
	background: var(--rih-tint);
	padding: 1.1rem 1.5rem;
	margin: 2rem 0;
	color: var(--rih-slate);
	font-style: italic;
	border-radius: 0 8px 8px 0;
}
.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

/* ---------- Etsy CTA-blokken (paragrafen met de 👉-template-emoji): productkaart ---------- */
/* Basis: witte kaart met diepte (voor zowel losse CTA als de lijst) */
.entry-content p:has(img[src*="1f449"]) {
	position: relative;
	background: #ffffff;
	border: 1px solid var(--rih-border);
	border-radius: 16px;
	padding: 1.4rem 1.5rem;
	margin: 2rem 0;
	color: var(--rih-charcoal);
	line-height: 1.6;
	box-shadow: 0 10px 28px rgba(13, 25, 55, 0.09);
}
/* verberg de 👉 (WP core zet emoji-CSS met !important) */
.entry-content p:has(img[src*="1f449"]) img.emoji {
	display: none !important;
}

/* === Losse CTA (één Etsy-link): productkaart met voorbeeld-thumbnail === */
.entry-content p:has(img[src*="1f449"]):not(:has(a[href*="etsy.com"] ~ a[href*="etsy.com"])) {
	min-height: 168px;
	padding-left: 158px;
}
.entry-content p:has(img[src*="1f449"]):not(:has(a[href*="etsy.com"] ~ a[href*="etsy.com"]))::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 18px;
	bottom: 18px;
	width: 118px;
	background: url('images/template-preview.svg') center / cover no-repeat, var(--rih-navy);
	border-radius: 11px;
	box-shadow: 0 8px 20px rgba(13, 25, 55, 0.22);
}

/* echte Etsy-covers per template (listing-ID in de link bepaalt de cover; SVG blijft fallback) */
.entry-content p:has(img[src*="1f449"]):not(:has(a[href*="etsy.com"] ~ a[href*="etsy.com"])):has(a[href*="4482620699"])::before {
	background: url('images/etsy-rentincrease.jpg') center / cover no-repeat, var(--rih-navy);
}
.entry-content p:has(img[src*="1f449"]):not(:has(a[href*="etsy.com"] ~ a[href*="etsy.com"])):has(a[href*="4481753938"])::before {
	background: url('images/etsy-huurcommissie.jpg') center / cover no-repeat, var(--rih-navy);
}
.entry-content p:has(img[src*="1f449"]):not(:has(a[href*="etsy.com"] ~ a[href*="etsy.com"])):has(a[href*="4481912894"])::before {
	background: url('images/etsy-deposit.jpg') center / cover no-repeat, var(--rih-navy);
}
.entry-content p:has(img[src*="1f449"]):not(:has(a[href*="etsy.com"] ~ a[href*="etsy.com"])):has(a[href*="4483108572"])::before {
	background: url('images/etsy-servicecharges.jpg') center / cover no-repeat, var(--rih-navy);
}
.entry-content p:has(img[src*="1f449"]):not(:has(a[href*="etsy.com"] ~ a[href*="etsy.com"])):has(a[href*="4485005875"])::before {
	background: url('images/etsy-checklist.jpg') center / cover no-repeat, var(--rih-navy);
}
.entry-content p:has(img[src*="1f449"]):not(:has(a[href*="etsy.com"] ~ a[href*="etsy.com"])):has(a[href*="4483347180"])::before {
	background: url('images/etsy-bundel.jpg?v=2') center / cover no-repeat, var(--rih-navy);
}

/* badge + navy kop (de <strong> intro) */
.entry-content p:has(img[src*="1f449"]) strong {
	display: block;
	color: var(--rih-navy);
	font-family: var(--rih-font-head);
	font-weight: 800;
	font-size: 1.16rem;
	line-height: 1.25;
	margin-bottom: 0.4rem;
}
.entry-content p:has(img[src*="1f449"]) strong::before {
	content: "Etsy template";
	display: block;
	width: fit-content;
	background: var(--rih-cream);
	color: #9a7b12;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
	margin-bottom: 0.7rem;
}

/* navy knop met gouden pijl (losse CTA) */
.entry-content p:has(img[src*="1f449"]) a[href*="etsy.com"] {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--rih-navy);
	color: #ffffff;
	font-family: var(--rih-font-head);
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1.3;
	text-decoration: none;
	padding: 0.62rem 1.1rem;
	border-radius: 9px;
	margin: 0.8rem 0.5rem 0.2rem 0;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.entry-content p:has(img[src*="1f449"]) a[href*="etsy.com"]::after {
	content: " \2197";
	color: var(--rih-gold);
	font-weight: 700;
}
.entry-content p:has(img[src*="1f449"]) a[href*="etsy.com"]:hover {
	background: #1b2c57;
	transform: translateY(-1px);
}

/* === Lijst-CTA (meerdere Etsy-links): compacte navy knoppen met document-icoon === */
.entry-content p:has(img[src*="1f449"]):has(a[href*="etsy.com"] ~ a[href*="etsy.com"]) a[href*="etsy.com"] {
	background: var(--rih-navy);
	color: #ffffff;
	margin: 0.32rem 0.5rem 0.32rem 0;
	box-shadow: 0 2px 8px rgba(13, 25, 55, 0.18);
}
.entry-content p:has(img[src*="1f449"]):has(a[href*="etsy.com"] ~ a[href*="etsy.com"]) a[href*="etsy.com"]::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background: url('images/doc-icon.svg') center / contain no-repeat;
}
.entry-content p:has(img[src*="1f449"]):has(a[href*="etsy.com"] ~ a[href*="etsy.com"]) a[href*="etsy.com"]::after {
	color: var(--rih-gold);
}
.entry-content p:has(img[src*="1f449"]):has(a[href*="etsy.com"] ~ a[href*="etsy.com"]) a[href*="etsy.com"]:hover {
	background: #1b2c57;
}

/* 👉 en andere emoji: vaste maat, nette uitlijning, geen mini-shift */
img.emoji,
img.wp-smiley {
	width: 1.1em;
	height: 1.1em;
	vertical-align: -0.18em;
	margin: 0 0.18em 0 0;
	display: inline;
}

/* ---------- Knoppen ---------- */
.wp-block-button__link,
.ast-button,
.ast-custom-button,
input[type="submit"],
button.menu-toggle {
	background-color: var(--rih-navy);
	color: var(--rih-white);
	border-radius: 8px;
	font-family: var(--rih-font-head);
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.wp-block-button__link:hover,
.ast-button:hover,
input[type="submit"]:hover {
	background-color: var(--rih-gold);
	color: var(--rih-navy);
	transform: translateY(-1px);
}

/* ---------- Header / site-title / navigatie (sticky + verfijning) ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 99;
	background: #ffffff;
	box-shadow: 0 2px 14px rgba(13, 25, 55, 0.07);
}
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

.site-title,
.site-title a,
.ast-site-title-wrap .site-title a {
	font-family: var(--rih-font-head);
	font-weight: 800;
	color: var(--rih-navy);
	letter-spacing: -0.02em;
}
/* gold merkteken vóór de naam */
.site-title a::before {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	background: var(--rih-gold);
	border-radius: 3px;
	margin-right: 10px;
	vertical-align: 1px;
}
.main-header-menu .menu-link,
.ast-builder-menu .menu-link {
	font-family: var(--rih-font-head);
	font-weight: 600;
}
.main-header-menu .menu-item > .menu-link:hover { color: var(--rih-gold); }
/* actieve pagina: navy met een gouden onderlijn */
.main-header-menu .current-menu-item > .menu-link {
	color: var(--rih-navy);
	position: relative;
}
.main-header-menu .current-menu-item > .menu-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% + 13px);
	height: 2px;
	background: var(--rih-gold);
	border-radius: 2px;
}
/* mobiele off-canvas menu: geen volle-breedte onderlijn, wel gold active-tekst */
.ast-mobile-header-content .main-header-menu .current-menu-item > .menu-link::after { display: none; }
.ast-mobile-header-content .main-header-menu .current-menu-item > .menu-link { color: var(--rih-gold); background-color: transparent; }
/* mobiel menu speelser: groter + een navy icoon per item */
.ast-mobile-header-content .main-header-menu .menu-item > .menu-link {
	font-size: 1.15rem;
	padding-top: 0.78rem;
	padding-bottom: 0.78rem;
	padding-left: 48px !important;
	background-repeat: no-repeat !important;
	background-position: left 12px center !important;
	background-size: 20px 20px !important;
}
.ast-mobile-header-content .main-header-menu a[href$="rentinholland.nl/"] { background-image: url('images/menu-home.svg?3') !important; }
.ast-mobile-header-content .main-header-menu a[href$="/articles/"] { background-image: url('images/menu-articles.svg?3') !important; }
.ast-mobile-header-content .main-header-menu a[href$="/templates/"] { background-image: url('images/menu-templates.svg?3') !important; }
.ast-mobile-header-content .main-header-menu a[href$="/about/"] { background-image: url('images/menu-about.svg?3') !important; }

/* ---------- Auteurslijn / meta ---------- */
.entry-meta,
.entry-meta a,
.post-meta,
.ast-blog-single-element {
	color: var(--rih-slate);
	font-family: var(--rih-font-body);
}
.entry-meta a:hover {
	color: var(--rih-gold);
}

/* ---------- Inhoudsopgave (Easy Table of Contents) ---------- */
.ez-toc-container,
div.ez-toc-container {
	background: var(--rih-tint);
	border: 1px solid var(--rih-border);
	border-radius: 10px;
	padding: 1.1rem 1.3rem;
}
.ez-toc-title {
	font-family: var(--rih-font-head);
	font-weight: 700;
	color: var(--rih-navy);
}
.ez-toc-container a {
	color: var(--rih-slate);
	text-decoration: none;
}
.ez-toc-container a:hover {
	color: var(--rih-gold);
}

/* ========== Homepage (page-id 12), Fase C richting B ========== */
.page-id-12 .entry-title { display: none; }
body.page-id-12 { overflow-x: clip; }
.rih-home { margin: 0; }
.rih-home a, .rih-home a:hover, .rih-home a:focus { text-decoration: none !important; }

/* full-bleed voor hero en templates */
.rih-hero,
.rih-templates {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* --- HERO --- */
.rih-hero {
	background:
		radial-gradient(480px 340px at 86% -10%, rgba(242, 183, 5, 0.30), transparent 60%),
		linear-gradient(135deg, #0D1937, #16264f);
	color: #fff;
	padding: 64px 24px 58px;
	text-align: center;
}
.rih-hero-inner { max-width: 720px; margin: 0 auto; }
.rih-eyebrow {
	font-family: var(--rih-font-head); font-weight: 700; font-size: 0.85rem;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--rih-gold); margin: 0 0 0.6rem;
}
.rih-h1 {
	font-family: var(--rih-font-head); font-weight: 800; color: #fff;
	font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.85rem;
}
.rih-hero-p { color: rgba(255, 255, 255, 0.92); font-size: 1.05rem; max-width: 56ch; margin: 0 auto 1.6rem; }
.rih-search-wrap { position: relative; max-width: 540px; margin: 0 auto; }
.rih-search {
	display: flex; background: #fff;
	border-radius: 12px; padding: 6px 6px 6px 16px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}
.rih-suggest {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; text-align: left;
	background: #fff; border-radius: 12px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28); overflow: hidden;
}
.rih-suggest a {
	display: block; padding: 11px 16px; color: var(--rih-navy);
	font-family: var(--rih-font-head); font-weight: 600; font-size: 0.92rem; border-bottom: 1px solid var(--rih-tint);
}
.rih-suggest a:last-child { border-bottom: 0; }
.rih-suggest a:hover { background: var(--rih-cream); }
.rih-search input {
	border: 0; outline: 0; flex: 1; background: transparent;
	font-family: var(--rih-font-body); font-size: 0.95rem; color: var(--rih-charcoal);
}
.rih-search button {
	background: var(--rih-gold); color: var(--rih-navy); border: 0; cursor: pointer;
	font-family: var(--rih-font-head); font-weight: 700; padding: 10px 18px; border-radius: 9px; transition: background 0.15s;
}
.rih-search button:hover { background: #FFCF45; }
.rih-chips { display: flex; gap: 9px; justify-content: space-between; flex-wrap: wrap; margin: 1.1rem auto 0; max-width: 540px; }
.rih-chips a {
	font-family: var(--rih-font-head); font-weight: 600; font-size: 0.82rem; text-decoration: none;
	color: rgba(255, 255, 255, 0.88); border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px; padding: 6px 14px; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rih-chips a:hover { background: var(--rih-gold); color: var(--rih-navy); border-color: var(--rih-gold); }

/* --- sectie-titels (override van de artikel-h2 met gold-streep) --- */
.rih-home .rih-sec-title {
	font-family: var(--rih-font-head); font-weight: 800; color: var(--rih-navy);
	font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.01em; margin: 0 0 0.3rem;
}
.rih-home .rih-sec-title::after { content: none; }
.rih-rule { width: 4.1rem; height: 3px; background: var(--rih-gold); border-radius: 2px; margin: 0.5rem 0 1.6rem; }

/* --- GUIDES --- */
.rih-guides { padding: 50px 0 8px; }
.rih-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rih-card {
	display: block; border: 1px solid rgba(13, 25, 55, 0.14); border-radius: 14px; padding: 20px;
	background: #fff; text-decoration: none; box-shadow: 0 1px 4px rgba(13, 25, 55, 0.05); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.rih-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(13, 25, 55, 0.10); border-color: var(--rih-gold-soft); }
.rih-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--rih-navy); margin-bottom: 14px; }
.rih-card h3 { font-family: var(--rih-font-head); font-weight: 700; color: var(--rih-navy); font-size: 1.05rem; margin: 0 0 6px; }
.rih-card p { color: var(--rih-charcoal); font-size: 0.95rem; line-height: 1.58; margin: 0 0 12px; }
.rih-more { font-family: var(--rih-font-head); font-weight: 700; font-size: 0.86rem; color: var(--rih-gold); }

/* --- TEMPLATES --- */
.rih-templates { background: linear-gradient(180deg, #FFFDF6, #FEF6DA); padding: 48px 24px; margin-top: 50px; }
.rih-templates-inner { max-width: 1080px; margin: 0 auto; }
.rih-badge {
	display: inline-block; background: var(--rih-gold); color: var(--rih-navy);
	font-family: var(--rih-font-head); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.07em;
	text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
}
.rih-tpl-flex { display: flex; gap: 30px; align-items: center; max-width: 1080px; margin: 0 auto; }
.rih-tpl-thumb {
	flex: 0 0 134px; align-self: stretch; min-height: 172px;
	background: url('images/template-preview.svg') center / cover no-repeat, var(--rih-navy);
	border-radius: 14px; box-shadow: 0 14px 30px rgba(13, 25, 55, 0.25);
}
.rih-tpl-body { flex: 1; }
.rih-tpl-body h2 { margin-top: 0.7rem; }
.rih-tpl-lead { color: #6b5f3a; max-width: 60ch; margin: 0.5rem 0 1.4rem; }
.rih-tpl-cta {
	display: inline-flex; align-items: center; gap: 8px; background: var(--rih-gold); color: var(--rih-navy);
	font-family: var(--rih-font-head); font-weight: 700; font-size: 0.98rem; padding: 12px 22px; border-radius: 10px;
	text-decoration: none; box-shadow: 0 6px 18px rgba(242, 183, 5, 0.32); transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.rih-tpl-cta::after { content: "\2192"; font-weight: 800; }
.rih-tpl-cta:hover { background: #FFCF45; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(242, 183, 5, 0.4); }

/* --- ABOUT --- */
.rih-about {
	display: flex; gap: 22px; align-items: center; background: var(--rih-navy); color: #fff;
	border-radius: 16px; padding: 30px 32px; margin: 50px 0 8px; position: relative; overflow: hidden;
}
.rih-about::before { content: ""; position: absolute; right: -60px; top: -70px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(242, 183, 5, 0.28), transparent 68%); pointer-events: none; }
.rih-avatar {
	flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%;
	background: linear-gradient(135deg, var(--rih-gold), #d99e04); display: flex; align-items: center; justify-content: center;
	font-family: var(--rih-font-head); font-weight: 800; font-size: 1.9rem; color: var(--rih-navy);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); position: relative;
}
.rih-about-body { position: relative; }
.rih-home .rih-about-title { color: #fff; }
.rih-about-body p { color: rgba(255, 255, 255, 0.82); margin: 0; }

/* --- mobiel --- */
@media (max-width: 880px) { .rih-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
	.rih-cards { grid-template-columns: 1fr; }
	.rih-card h3 { font-size: 1.2rem; }
	.rih-card p { font-size: 1.05rem; line-height: 1.62; }
	.rih-tpl-flex { flex-direction: column; text-align: center; }
	.rih-tpl-thumb { flex-basis: auto; width: 150px; min-height: 192px; align-self: center; }
	.rih-about { flex-direction: column; text-align: center; }
	.rih-hero { padding: 48px 20px 44px; }
}

/* ---------- Footer (eigen footer, vervangt de Astra-footer) ---------- */
.site-footer { display: none; }

.rih-footer {
	background: var(--rih-navy);
	color: rgba(255, 255, 255, 0.82);
	font-family: var(--rih-font-body);
}
.rih-footer-inner {
	max-width: 1248px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 34px;
	padding: 52px 24px 30px;
}
.rih-footer a { color: #ffffff; text-decoration: none; transition: color 0.15s; }
.rih-footer a:hover { color: var(--rih-gold); }
.rih-footer-logo {
	font-family: var(--rih-font-head);
	font-weight: 800;
	color: #ffffff;
	font-size: 1.18rem;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: 10px;
}
.rih-footer-logo::before {
	content: "";
	width: 12px;
	height: 12px;
	background: var(--rih-gold);
	border-radius: 3px;
	display: inline-block;
	flex: 0 0 auto;
}
.rih-footer-tag {
	color: rgba(255, 255, 255, 0.60);
	font-size: 0.9rem;
	line-height: 1.55;
	margin: 12px 0 0;
	max-width: 270px;
}
.rih-footer-col h4 {
	font-family: var(--rih-font-head);
	font-weight: 700;
	color: var(--rih-gold);
	font-size: 0.76rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin: 4px 0 16px;
}
.rih-footer-col ul { list-style: none; margin: 0; padding: 0; }
.rih-footer-col li { margin: 0 0 11px; font-size: 0.93rem; }
.rih-footer-bottom {
	max-width: 1248px;
	margin: 0 auto;
	padding: 16px 24px 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.52);
}

@media (max-width: 768px) {
	.rih-footer-inner { grid-template-columns: 1fr; gap: 26px; padding: 38px 24px 20px; }
	.rih-footer-tag { max-width: none; }
}

/* ---------- Mobiel ---------- */
@media (max-width: 768px) {
	html {
		font-size: 108%;
	}
	body {
		font-size: 1rem;
		line-height: 1.7;
	}
	body:not(.page-id-12) .entry-header {
		padding-top: 1.5rem;
	}
	body:not(.page-id-12) .rih-footer {
		margin-top: 2.5rem;
	}
	.rih-about-page p {
		font-size: 1.08rem;
	}
	.single-post .entry-content p,
	.single-post .entry-content li {
		font-size: 1.15rem;
		line-height: 1.8;
	}
	.entry-content h2 {
		margin-top: 2.1em;
	}
	.entry-content p:has(img[src*="1f449"]):has(a[href*="etsy.com"] ~ a[href*="etsy.com"]) {
		padding: 1.3rem 1.3rem;
	}
	/* losse productkaart op mobiel: voorbeeld bovenaan, tekst eronder */
	.entry-content p:has(img[src*="1f449"]):not(:has(a[href*="etsy.com"] ~ a[href*="etsy.com"])) {
		padding: 222px 1.25rem 1.3rem;
		min-height: 0;
	}
	.entry-content p:has(img[src*="1f449"]):not(:has(a[href*="etsy.com"] ~ a[href*="etsy.com"]))::before {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		top: 1.4rem;
		bottom: auto;
		width: 150px;
		height: 193px;
		background-color: var(--rih-navy);
		background-size: cover;
		background-position: center;
	}
	.entry-content p:has(img[src*="1f449"]):not(:has(a[href*="etsy.com"] ~ a[href*="etsy.com"])) a[href*="etsy.com"] {
		display: flex;
		width: fit-content;
		margin-top: 1rem;
	}
}

/* ========== Content-pagina's: Articles, About, Templates ========== */
.rih-page { margin: 0; }
.rih-page a, .rih-page a:hover, .rih-page a:focus { text-decoration: none !important; }
.rih-page .rih-sec-title {
	font-family: var(--rih-font-head);
	font-weight: 800;
	color: var(--rih-navy);
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	letter-spacing: -0.01em;
	margin: 0 0 0.3rem;
}
.rih-page .rih-sec-title::after { content: none; }
.rih-page-intro {
	color: var(--rih-slate);
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 2.6rem;
	max-width: 760px;
}

/* --- Articles --- */
.rih-art-section { background: var(--rih-tint); border-radius: 18px; padding: 32px 32px 16px; margin: 0 0 26px; }
.rih-sec-lead { color: var(--rih-slate); font-style: italic; margin: 0 0 1.5rem; }

/* --- About-pagina --- */
.rih-about-page { max-width: 768px; }
.rih-ahero { display: flex; align-items: center; gap: 22px; padding: 8px 0 28px; }
.rih-ahero .rih-avatar { flex: 0 0 76px; width: 76px; height: 76px; font-size: 1.7rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20); }
.rih-ahero-name { font-family: var(--rih-font-head); font-weight: 800; color: var(--rih-navy); font-size: 1.5rem; margin: 0 0 6px; letter-spacing: -0.01em; }
.rih-ahero-role { color: var(--rih-slate); font-size: 1rem; line-height: 1.55; margin: 0; }
.rih-abody p { color: var(--rih-charcoal); line-height: 1.7; margin: 0 0 1.2rem; }
.rih-disclaimer {
	background: var(--rih-tint);
	border-left: 3px solid var(--rih-gold);
	border-radius: 10px;
	padding: 20px 24px;
	margin: 1.8rem 0;
}
.rih-disclaimer-label {
	display: block;
	font-family: var(--rih-font-head);
	font-weight: 700;
	color: var(--rih-navy);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.rih-disclaimer p { color: var(--rih-slate); font-size: 0.93rem; line-height: 1.6; margin: 0; }
.rih-acta { margin: 2.4rem 0 0; }
.rih-acta-text { color: var(--rih-charcoal); line-height: 1.7; margin: 0 0 1.3rem; }
.rih-acta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--rih-gold);
	color: var(--rih-navy);
	font-family: var(--rih-font-head);
	font-weight: 700;
	padding: 13px 26px;
	border-radius: 10px;
	transition: background 0.15s;
}
.rih-acta-btn:hover { background: #e0a800; }

/* --- Templates-pagina --- */
.page-id-394 .entry-title { display: none; }
.rih-tpl-hero {
	background: var(--rih-cream);
	border-radius: 16px;
	padding: 40px 40px 34px;
	margin: 0 0 2.4rem;
}
.rih-tpl-h1 {
	font-family: var(--rih-font-head);
	font-weight: 800;
	color: var(--rih-navy);
	font-size: clamp(1.7rem, 4vw, 2.3rem);
	letter-spacing: -0.02em;
	margin: 0 0 0.6rem;
	line-height: 1.15;
}
.rih-tpl-intro {
	color: var(--rih-charcoal);
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 1.5rem;
	max-width: 660px;
}
.rih-tpl-badges { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.rih-tpl-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--rih-font-head);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--rih-navy);
}

@media (max-width: 600px) {
	.rih-ahero { gap: 16px; }
	.rih-ahero .rih-avatar { flex-basis: 60px; width: 60px; height: 60px; font-size: 1.4rem; }
	.rih-tpl-hero { padding: 28px 22px 24px; }
	.rih-chips { justify-content: center; max-width: none; }
	.rih-art-section { padding: 24px 18px 10px; }
}