/*
 * Blog articles (single posts). Markup: scripts/content/ARTICLE-SPEC.md.
 * Uses the site's own fonts (Cormorant Garamond headings, Open Sans body) so nothing extra is loaded.
 */

.mmt-artikel,
.mmt-artikel-kop,
.mmt-auteur {
	--mmt-tekst: #2c2d33;
	--mmt-zacht: #6b5f55;
	--mmt-goud: #b48a4a;
	--mmt-bruin: #3d2508;
	--mmt-taupe: #c2af99;
	--mmt-lijn: #e3dcd2;
	--mmt-vlak: #f7f4ef;
	--mmt-groen: #2d6a4f;
	--mmt-rood: #9b3b2a;
	--mmt-kop: 'Cormorant Garamond', Georgia, serif;
	--mmt-radius: 6px;
}

/* Divi's Post Title module (the <h1>): same column as the article. This file only loads on converted posts. */
.single-post .et_pb_post_title {
	max-width: 46rem;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0;
}
.single-post .et_pb_post_title .entry-title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem);
	line-height: 1.12;
	color: #3d2508;
	text-wrap: balance;
	padding-bottom: 0.75rem;
}

/* Byline + breadcrumbs above the article */
.mmt-artikel-kop {
	max-width: 46rem;
	margin: 0 auto 1.5rem;
	color: var(--mmt-zacht);
	font-size: 0.9rem;
	line-height: 1.6;
}
.mmt-artikel-kop .rank-math-breadcrumb p { margin: 0 0 0.5rem; }
.mmt-artikel-kop a { color: var(--mmt-zacht); }
.mmt-byline { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; }

/* Article body */
.mmt-artikel {
	max-width: 46rem;
	margin: 0 auto;
	color: var(--mmt-tekst);
	font-size: 1.0625rem;
	line-height: 1.75;
}
.mmt-artikel > * + * { margin-top: 1.25rem; }
.mmt-artikel p { margin: 0; padding: 0; }
.mmt-artikel p + p { margin-top: 1rem; }
.mmt-artikel h2,
.mmt-artikel h3,
.mmt-artikel h4 {
	font-family: var(--mmt-kop);
	color: var(--mmt-bruin);
	line-height: 1.2;
	padding: 0;
	text-wrap: balance;
}
.mmt-artikel h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); margin-top: 2.75rem; }
.mmt-artikel h3 { font-size: 1.4rem; margin-top: 1.75rem; }
.mmt-artikel h4 { font-size: 1.15rem; margin-top: 1.25rem; }
.mmt-artikel h2 + *,
.mmt-artikel h3 + * { margin-top: 0.75rem; }
.mmt-artikel a { color: var(--mmt-bruin); text-decoration: underline; text-decoration-color: var(--mmt-goud); text-underline-offset: 0.2em; }
.mmt-artikel a:hover { text-decoration-thickness: 2px; }
.mmt-artikel strong { font-weight: 600; }
.mmt-artikel ul,
.mmt-artikel ol { margin-left: 0; padding-left: 1.25rem; }
.mmt-artikel li + li { margin-top: 0.4rem; }

.mmt-artikel .mmt-intro { font-size: 1.2rem; line-height: 1.65; color: var(--mmt-tekst); }

.mmt-artikel figure { margin: 2rem 0; }
.mmt-artikel img { display: block; max-width: 100%; height: auto; border-radius: var(--mmt-radius); }
/* Portrait photos would otherwise fill the whole screen. */
.mmt-artikel figure img { width: auto; max-height: min(36rem, 80vh); margin: 0 auto; }
.mmt-artikel figcaption { margin-top: 0.5rem; color: var(--mmt-zacht); font-size: 0.875rem; }

/* Boxes */
.mmt-artikel aside { padding: 1.1rem 1.25rem; border-radius: var(--mmt-radius); }
.mmt-artikel .mmt-kort { background: var(--mmt-vlak); border-left: 4px solid var(--mmt-goud); }
.mmt-artikel .mmt-tip { background: #eef5f0; border-left: 4px solid var(--mmt-groen); }
.mmt-artikel .mmt-let-op { background: #fbf0ec; border-left: 4px solid var(--mmt-rood); }

/* Cards */
.mmt-artikel .mmt-kaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: 1rem;
}
.mmt-artikel .mmt-kaart {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 1.1rem;
	border: 1px solid var(--mmt-lijn);
	border-radius: var(--mmt-radius);
	background: #fff;
}
.mmt-artikel .mmt-kaart > * { margin: 0; }
.mmt-artikel .mmt-kaart h3 { font-size: 1.25rem; margin: 0; }
.mmt-artikel .mmt-kaart img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.mmt-artikel .mmt-kaart-link { margin-top: auto; font-weight: 600; }

/* Steps and timeline */
.mmt-artikel .mmt-stappen { list-style: none; padding: 0; counter-reset: stap; }
.mmt-artikel .mmt-stappen li {
	position: relative;
	padding-left: 2.75rem;
	counter-increment: stap;
}
.mmt-artikel .mmt-stappen li + li { margin-top: 1rem; }
.mmt-artikel .mmt-stappen li::before {
	content: counter(stap);
	position: absolute;
	left: 0;
	top: 0.1rem;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--mmt-bruin);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.9rem;
	text-align: center;
}
.mmt-artikel .mmt-tijdlijn { list-style: none; padding: 0 0 0 1.25rem; border-left: 2px solid var(--mmt-taupe); }
.mmt-artikel .mmt-tijdlijn li { position: relative; }
.mmt-artikel .mmt-tijdlijn li + li { margin-top: 1rem; }
.mmt-artikel .mmt-tijdlijn li::before {
	content: '';
	position: absolute;
	left: calc(-1.25rem - 6px);
	top: 0.55rem;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mmt-goud);
}
.mmt-artikel .mmt-jaar { display: block; font-weight: 600; color: var(--mmt-bruin); }

/* Facts and tables */
.mmt-artikel .mmt-feiten {
	display: grid;
	grid-template-columns: minmax(8rem, max-content) 1fr;
	gap: 0;
	border: 1px solid var(--mmt-lijn);
	border-radius: var(--mmt-radius);
	overflow: hidden;
}
.mmt-artikel .mmt-feiten dt,
.mmt-artikel .mmt-feiten dd { margin: 0; padding: 0.6rem 0.9rem; border-top: 1px solid var(--mmt-lijn); }
.mmt-artikel .mmt-feiten dt { background: var(--mmt-vlak); font-weight: 600; }
.mmt-artikel .mmt-feiten dt:first-of-type,
.mmt-artikel .mmt-feiten dt:first-of-type + dd { border-top: 0; }
.mmt-artikel .mmt-tabel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mmt-artikel table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 0; border: 0; }
.mmt-artikel th,
.mmt-artikel td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--mmt-lijn); text-align: left; vertical-align: top; }
.mmt-artikel th { background: var(--mmt-vlak); font-weight: 600; }

.mmt-artikel .mmt-citaat {
	margin: 2rem 0;
	padding: 0 0 0 1.25rem;
	border-left: 3px solid var(--mmt-goud);
	font-family: var(--mmt-kop);
	font-size: 1.35rem;
	font-style: italic;
	color: var(--mmt-bruin);
}

/* FAQ */
.mmt-artikel .mmt-faq details { border-bottom: 1px solid var(--mmt-lijn); }
.mmt-artikel .mmt-faq details:first-of-type { border-top: 1px solid var(--mmt-lijn); }
.mmt-artikel .mmt-faq summary {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.mmt-artikel .mmt-faq summary::-webkit-details-marker { display: none; }
.mmt-artikel .mmt-faq summary::after { content: '+'; color: var(--mmt-goud); font-size: 1.4rem; line-height: 1; }
.mmt-artikel .mmt-faq details[open] summary::after { content: '−'; }
.mmt-artikel .mmt-faq-antwoord { padding: 0 0 1rem; }

/* Related links and call to action */
.mmt-artikel .mmt-links { padding: 1.25rem; background: var(--mmt-vlak); border-radius: var(--mmt-radius); }
.mmt-artikel .mmt-links h2 { margin-top: 0; font-size: 1.5rem; }
.mmt-artikel .mmt-cta { margin-top: 2.5rem; padding: 1.5rem; background: var(--mmt-bruin); color: #fff; }
.mmt-artikel .mmt-cta a:not(.mmt-knop) { color: #fff; }
.mmt-artikel .mmt-cta-titel { font-family: var(--mmt-kop); font-size: 1.6rem; line-height: 1.2; }
.mmt-artikel .mmt-knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.mmt-artikel .mmt-knop {
	display: inline-block;
	padding: 0.7rem 1.2rem;
	border: 1px solid var(--mmt-goud);
	border-radius: var(--mmt-radius);
	background: var(--mmt-goud);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.mmt-artikel .mmt-knop:hover { background: #9c7438; }
.mmt-artikel .mmt-knop-lijn { background: transparent; color: var(--mmt-bruin); }
.mmt-artikel .mmt-cta .mmt-knop-lijn { color: #fff; border-color: rgba(255, 255, 255, 0.6); }

/* Related shop categories and author box below the article */
.mmt-gerelateerd,
.mmt-auteur { max-width: 46rem; margin: 2.5rem auto 0; }
.mmt-gerelateerd h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; color: #3d2508; }
.mmt-gerelateerd ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0.75rem 0 0; }
.mmt-gerelateerd a { display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid #e3dcd2; border-radius: 999px; color: #3d2508; text-decoration: none; }
.mmt-gerelateerd a:hover { border-color: #b48a4a; }
.mmt-auteur {
	padding: 1.25rem;
	border: 1px solid var(--mmt-lijn);
	border-radius: var(--mmt-radius);
	color: var(--mmt-tekst);
	font-size: 0.95rem;
	line-height: 1.6;
}
.mmt-auteur p { margin: 0; padding: 0; }
.mmt-auteur p + p { margin-top: 0.5rem; }
.mmt-auteur-naam { font-family: var(--mmt-kop); font-size: 1.3rem; color: var(--mmt-bruin); }

@media (max-width: 600px) {
	.mmt-artikel { font-size: 1rem; }
	.mmt-artikel .mmt-intro { font-size: 1.1rem; }
	.mmt-artikel .mmt-feiten { grid-template-columns: 1fr; }
	.mmt-artikel .mmt-feiten dd { border-top: 0; padding-top: 0; }
}