/* MK Academy SEO & techniek: stijlen in de huisstijl van mkfotowerken.nl */

/* Heading-fixes: visueel gelijk aan de oorspronkelijke weergave */
h2.mka-h1 { font-size: 24px; letter-spacing: 8px; }
@media all and (min-width: 600px) { h2.mka-h1 { font-size: 30px; } }
.page-template-template-portfolio > div h2.mka-h1,
.portfoliochild h2.mka-h1 { font-family: "Montserrat", Arial, sans-serif; font-size: 18px; line-height: 24px; letter-spacing: 2px; font-weight: 700; text-transform: capitalize; overflow-wrap: break-word; hyphens: auto; color: #333; }
@media all and (max-width: 824px), all and (min-width: 1100px) {
	.page-template-template-portfolio > div h2.mka-h1,
	.portfoliochild h2.mka-h1 { font-size: 24px; line-height: 32px; }
}
.page-template-template-portfolio > div h2.mka-h1 + h2,
.portfoliochild h2.mka-h1 + h2 { line-height: 24px; font-weight: 400; text-transform: uppercase; }
.single h2.mka-h1 { font-size: 20px; letter-spacing: 6px; }
h1.mka-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
h1.mka-h1-promoted { font-size: 16px; line-height: 32px; letter-spacing: 3px; }

/* Landingspagina's */
.mka-lead { font-size: 16px; line-height: 30px; }
.mk-academy article h2, .mka-page article h2 { margin-top: 48px; }
.mk-academy article h3, .mka-page article h3 { margin-top: 28px; font-size: 15px; letter-spacing: 2px; }
.mka-page article ul, .mk-academy article ul { margin-top: 16px; }

.mka-facts { list-style: none !important; margin: 32px 0 !important; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
@media all and (min-width: 768px) { .mka-facts { grid-template-columns: repeat(4, 1fr); } }
.mka-facts li { background: #f4f1ec; padding: 18px 14px; text-align: center; line-height: 22px; }
.mka-facts strong { display: block; font-family: "Noto Serif JP", serif; font-size: 22px; line-height: 34px; color: #404041; }
.mka-facts span { font-size: 13px; color: #555; }

.mka-cta { margin: 40px 0; padding: 28px 24px; background: #e3dbce; border: 0; text-align: center; }
@media all and (min-width: 600px) { .mka-cta { padding: 36px 48px; } }
.mka-cta--contact { background: #f4f1ec; border: 1px solid #c7b79e; }
.mka-cta__title { margin: 0 !important; font-family: "Noto Serif JP", serif; font-weight: 600; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; color: #404041; }
.mka-cta__text { margin: 10px auto 0 !important; max-width: 620px; }
.mka-cta__actions { margin-top: 22px !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.mka-btn, .mka-btn:visited { display: inline-block; padding: 12px 26px; background: #404041; color: #fff !important; text-decoration: none !important; font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; line-height: 22px; border: 1px solid #404041; transition: background .2s, color .2s; }
.mka-btn:hover, .mka-btn:focus { background: #c7b79e; border-color: #c7b79e; color: #fff !important; }
.mka-btn--ghost, .mka-btn--ghost:visited { background: transparent; color: #404041 !important; }
.mka-btn--ghost:hover, .mka-btn--ghost:focus { background: #404041; border-color: #404041; color: #fff !important; }
.mka-btn:focus-visible { outline: 2px solid #404041; outline-offset: 3px; }

.mka-reviews { margin: 32px 0; }
.mka-reviews__score { margin: 0 0 12px !important; }
.mka-reviews ul { list-style: none !important; margin: 0 !important; padding: 0; display: grid; gap: 16px; }
@media all and (min-width: 825px) { .mka-reviews ul { grid-template-columns: repeat(3, 1fr); } }
.mka-reviews li { background: #fff; border: 1px solid #e3dbce; padding: 20px; }
.mka-reviews blockquote { margin: 0; }
.mka-reviews blockquote p { margin: 8px 0 0 !important; line-height: 24px; }
.mka-reviews .mka-reviews__title { margin-top: 0 !important; font-weight: 700; }
.mka-reviews footer { margin-top: 12px; font-size: 12px; color: #776a55; background: none; padding: 0; }
.mka-reviews footer:before { display: none; }

.mka-cards { list-style: none !important; margin: 24px 0 !important; padding: 0; display: grid; gap: 12px; }
@media all and (min-width: 768px) { .mka-cards { grid-template-columns: repeat(2, 1fr); } }
.mka-cards a { display: block; height: 100%; padding: 18px 20px; background: #f4f1ec; text-decoration: none; color: #404041; border-left: 3px solid #c7b79e; transition: background .2s; }
.mka-cards a:hover { background: #e3dbce; }
.mka-cards strong { display: block; font-family: "Noto Serif JP", serif; letter-spacing: 1px; }
.mka-cards span { display: block; font-size: 13px; line-height: 22px; margin-top: 4px; }

.mka-programma { margin: 24px 0; }
.mka-programma details { border-bottom: 1px solid #e3dbce; }
.mka-programma summary { cursor: pointer; padding: 12px 0; font-weight: 700; list-style-position: outside; }
.mka-programma summary span { font-weight: 400; color: #776a55; }
.mka-programma ul { margin: 0 0 16px 18px !important; }

/* FAQ (Details-blok met klasse mka-faq) */
details.mka-faq { border-bottom: 1px solid #e3dbce; padding: 0; margin: 0 !important; }
details.mka-faq:first-of-type { border-top: 1px solid #e3dbce; }
details.mka-faq > summary { cursor: pointer; padding: 14px 28px 14px 0; font-weight: 700; position: relative; list-style: none; }
details.mka-faq > summary::-webkit-details-marker { display: none; }
details.mka-faq > summary:after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 20px; font-weight: 400; }
details.mka-faq[open] > summary:after { content: "–"; }
details.mka-faq > *:not(summary) { margin: 0 0 16px !important; }

/* Lijsten op academy-pagina's: links uitgelijnd binnen een smalle kolom */
.mka-page ul.wp-block-list {
	text-align: left;
	max-width: 680px;
	margin: 0 auto 1.5em;
	padding-left: 1.4em;
}
.mka-page ul.wp-block-list li { margin-bottom: .4em; }

/* Fotorij: 4 vierkante foto's over de volle breedte, zoals op de contactpagina */
body.mka-page { overflow-x: hidden; }
.mka-fotorij {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px;
	width: 100vw;
	margin: 2.5em 0 2.5em calc(50% - 50vw);
	padding: 0;
}
.mka-fotorij a, .mka-fotorij span { display: block; overflow: hidden; }
.mka-fotorij img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	transition: transform .6s ease;
}
.mka-fotorij a:hover img { transform: scale(1.03); }
@media (min-width: 600px) {
	.mka-fotorij {
		grid-template-columns: repeat(4, 1fr);
		width: calc(100vw - 75px);
		margin-left: calc(50% - 50vw + 75px);
	}
	.mka-fotorij--3 { grid-template-columns: repeat(3, 1fr); }
	.mka-fotorij--2 { grid-template-columns: repeat(2, 1fr); }
}