/* =========================================================================
   in 't kerkje — hoofdstylesheet
   Huisstijl: zie docs/brand-identity.md. Kleuren zijn indicatief; bemonster
   definitieve waarden uit de merkbestanden.
   ========================================================================= */

/* Webfont: Gliker (self-hosted) ---------------------------------------- */
@font-face {
	font-family: "Gliker";
	src: url("../fonts/Gliker-Regular.woff2") format("woff2"),
		url("../fonts/Gliker-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Gliker";
	src: url("../fonts/Gliker-SemiBold.woff2") format("woff2"),
		url("../fonts/Gliker-SemiBold.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Gliker";
	src: url("../fonts/Gliker-Bold.woff2") format("woff2"),
		url("../fonts/Gliker-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Kleuren (indicatief) */
	--kerk-pink: #f5b4bf;
	--kerk-pink-soft: #f9d3da;
	--kerk-vermilion: #e8481e;
	--kerk-cream: #faf2e2;
	--kerk-blue: #7186cb;
	--kerk-blue-deep: #4a5aad; /* dieper blauw voor tekst op roze (leesbaarheid) */
	--kerk-ink: #3a2a2d;

	/* Rollen */
	--color-bg: var(--kerk-cream);
	--color-surface: #ffffff;
	--color-text: var(--kerk-ink);
	--color-accent: var(--kerk-vermilion);
	--color-accent-2: var(--kerk-blue);

	/* Typografie — Gliker (self-hosted), zie @font-face hierboven */
	--font-body: "Gliker", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-head: "Gliker", var(--font-body);

	/* Ritme */
	--space: clamp(2.5rem, 6vw, 5rem);
	--radius: 18px;
	--container: 1140px;
	--container-narrow: 720px;
}

/* Reset / basis --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-accent); }

h1, h2, h3 {
	font-family: var(--font-head);
	font-weight: 400; /* Gliker Regular — komt overeen met de merkbeelden */
	line-height: 1.15;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }

/* Toegankelijkheid ------------------------------------------------------ */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -999px; top: 0;
	background: var(--color-accent); color: #fff;
	padding: 0.75rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--color-accent-2); outline-offset: 2px; }

/* Layout-helpers -------------------------------------------------------- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space); }
.eyebrow {
	text-transform: lowercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	color: var(--color-accent);
	margin: 0 0 0.25rem;
}
.section__header { margin-bottom: 2rem; text-align: center; }

/* Knoppen --------------------------------------------------------------- */
.button {
	display: inline-block;
	font-family: var(--font-head);
	font-weight: 600;
	text-decoration: none;
	padding: 0.7em 1.4em;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.button:hover { transform: translateY(-2px); }
.button--cta { background: var(--color-accent); color: #fff; }
.button--cta:hover { background: #cf3e17; }
.button--ghost { background: transparent; border-color: currentColor; color: var(--color-text); }

/* Header ---------------------------------------------------------------- */
.site-header {
	background: var(--kerk-pink-soft); /* zelfde kleur als de contactsectie */
}
.site-header__inner {
	min-height: 96px; /* lege balk */
	padding-block: 0.75rem;
}
.site-title {
	display: inline-flex;
	align-items: center;   /* dots verticaal gecentreerd t.o.v. de tekst */
	gap: 0.3em;
	text-decoration: none;
	line-height: 1;
	font-family: var(--font-head);
	font-size: clamp(2.2rem, 6vw, 3.6rem); /* dots + naam schalen hiermee mee */
}
.site-title__dots { color: var(--color-accent-2); font-size: 0.72em; letter-spacing: 0.08em; line-height: 1; }
.site-title__name {
	font-weight: 400;
	font-size: 1em;
	color: var(--color-accent);
	line-height: 1;
	text-transform: lowercase; /* merknaam altijd in kleine letters */
}
.custom-logo { max-height: 56px; width: auto; }

.site-nav__menu { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; }
.site-nav__menu a { text-decoration: none; color: var(--color-text); font-weight: 600; }
.site-nav__menu a:hover { color: var(--color-accent); }

.site-nav__toggle {
	display: none; background: none; border: 0; padding: 0.5rem;
	width: 44px; height: 44px;
}
.site-nav__bars, .site-nav__bars::before, .site-nav__bars::after {
	display: block; width: 26px; height: 3px; border-radius: 3px;
	background: var(--color-text); position: relative;
}
.site-nav__bars::before, .site-nav__bars::after { content: ""; position: absolute; left: 0; }
.site-nav__bars::before { top: -8px; }
.site-nav__bars::after { top: 8px; }

/* Landingspagina: hero (kerk + animatie) ------------------------------- */
.landing-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;   /* links animatie, rechts foto */
	grid-template-rows: 140px 1fr;     /* boven: lichte strook (hoger), onder: animatieblok */
	min-height: clamp(380px, 60vh, 580px); /* hoger, zodat de foto groter wordt */
}
.landing-hero__top {
	grid-column: 1;
	grid-row: 1;
	background: var(--kerk-pink-soft); /* lichte "header"-strook, alleen links */
}
.landing-hero__brand {
	grid-column: 1;
	grid-row: 2;
	background: var(--kerk-pink);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;   /* horizontaal gecentreerd */
	text-align: center;
	gap: 1.1rem;
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem);
}
.landing-hero__dots {
	color: var(--kerk-cream);
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	letter-spacing: 0.15em;
	margin: 0;
	line-height: 1;
}
.landing-hero__tagline {
	max-width: 32ch;
	margin: 0;
	color: var(--kerk-ink);
	font-weight: 500;
	font-size: 1.05rem;
}
.landing-hero__actions { margin: 0; }
.landing-hero__media {
	grid-column: 2;
	grid-row: 1 / span 2;  /* foto full-bleed rechts, tot bovenaan */
	position: relative;
	overflow: hidden; /* hoogte volgt de rij; op mobiel via aspect-ratio */
	background: var(--kerk-pink);
}
.landing-hero__media img {
	position: absolute;
	left: 0;
	top: -12%;            /* extra hoogte boven/onder voor de parallax-beweging */
	width: 100%;
	height: 124%;
	object-fit: cover;
	object-position: center center; /* horizontaal (en verticaal) gecentreerd; boven/onder wordt afgesneden */
	will-change: transform;
}

/* Woord-animatie (slot-machine): "[woord] in 't kerkje" ---------------- */
.wordrotator {
	--wr-fs: clamp(1.9rem, 5.5vw, 3rem);
	--wr-mask: 6.4em;
	position: relative;
	padding-left: calc(var(--wr-mask) + 0.5em); /* ruimte voor de woordkolom links */
	display: flex;
	flex-direction: column;
	align-items: flex-start;   /* "in 't kerkje" + tagline/knop links uitgelijnd */
	text-align: left;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: var(--wr-fs);
	line-height: 1.15;
}
.wordrotator__mask {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;             /* volle hoogte van de wordrotator; toont enkele woorden */
	width: var(--wr-mask);
	overflow: hidden;
	text-align: right;
	/* onderin zachtjes laten wegvagen */
	-webkit-mask-image: linear-gradient(to bottom, #000 0 42%, transparent 92%);
	        mask-image: linear-gradient(to bottom, #000 0 42%, transparent 92%);
}
.wordrotator__track { display: flex; flex-direction: column; will-change: transform; }
.wordrotator__word {
	display: block;
	height: 1.15em;
	line-height: 1.15em;
	color: var(--kerk-blue-deep);
	white-space: nowrap;
	opacity: 0.5; /* niet-actieve woorden halftransparant */
	transition: opacity 0.4s ease;
}
.wordrotator__word.is-active { opacity: 1; } /* woord in focus */
.wordrotator__label { color: var(--color-accent); white-space: nowrap; }
/* Tagline + knop, gecentreerd onder "in 't kerkje". */
.wordrotator__support {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
	margin-top: 1.2rem;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text);
}

/* Contactsectie --------------------------------------------------------- */
.section--contact { background: var(--kerk-pink-soft); }

/* (Ongebruikt op de landingspagina, bewaard voor eventuele subpagina's.) */
.hero { position: relative; background: var(--kerk-pink); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__image { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
	position: relative;
	background: linear-gradient(180deg, rgba(58,42,45,0.15), rgba(58,42,45,0.55));
	color: #fff;
	padding-block: clamp(4rem, 14vw, 9rem);
}
.hero:not(:has(.hero__image)) .hero__overlay { background: transparent; color: var(--color-text); }
.hero__eyebrow { font-weight: 700; letter-spacing: 0.03em; }
.hero__title { font-size: clamp(2.5rem, 8vw, 5rem); margin: 0.2em 0; }
.hero__tagline { font-size: 1.15rem; max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hero:not(:has(.hero__image)) .button--ghost { color: var(--color-text); }

/* Wat kan er (uses) ----------------------------------------------------- */
.section--uses { background: var(--kerk-pink-soft); }
.uses-grid {
	display: grid; gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.use-card {
	background: var(--color-surface); border-radius: var(--radius);
	padding: 1.5rem; box-shadow: 0 6px 24px rgba(58,42,45,0.08);
}
.use-card__title { color: var(--color-accent); }
.use-card__words { color: var(--color-accent-2); font-family: var(--font-head); font-size: 0.95rem; margin: 0; }

/* Woordkruis ------------------------------------------------------------ */
.section--wordcross { background: var(--kerk-pink); text-align: center; }
.wordcross { position: relative; display: inline-block; }
.wordcross__vertical { list-style: none; margin: 0; padding: 0; }
.wordcross__word {
	font-family: var(--font-head); font-weight: 400;
	font-size: clamp(1.5rem, 4vw, 2.6rem); line-height: 1.1;
	color: var(--kerk-cream);
}
.wordcross__word.is-accent { color: var(--color-accent-2); }
.wordcross__horizontal {
	font-family: var(--font-head); font-weight: 400;
	font-size: clamp(1.5rem, 4vw, 2.6rem);
	color: var(--color-accent);
	display: block; margin-top: 0.4rem;
}

/* Galerij --------------------------------------------------------------- */
.gallery-grid {
	display: grid; gap: 0.75rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.gallery-grid__item { margin: 0; border-radius: var(--radius); overflow: hidden; }
.gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* CTA ------------------------------------------------------------------- */
.section--cta { background: var(--color-accent); color: #fff; }
.section--cta .cta__title { color: #fff; }
.section--cta .button--cta { background: #fff; color: var(--color-accent); }

/* Kaarten (overzichten) ------------------------------------------------- */
.card-grid {
	display: grid; gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card { background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: 0 6px 24px rgba(58,42,45,0.08); }
.card__link { text-decoration: none; color: inherit; display: block; }
.card__media { margin: 0; }
.card__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card__body { padding: 1.25rem; }
.card__more { color: var(--color-accent); font-weight: 700; }

/* Contact + formulier --------------------------------------------------- */
.contact-layout { display: grid; gap: 2.5rem; }
.contact-details { margin-top: 2rem; }
.aanvraagformulier {
	background: var(--color-surface); border-radius: var(--radius);
	padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 8px 30px rgba(58,42,45,0.1);
}
.form-row { margin-bottom: 1rem; }
.form-row label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.form-row input, .form-row select, .form-row textarea {
	width: 100%; padding: 0.7rem 0.9rem;
	border: 2px solid var(--kerk-pink-soft); border-radius: 12px;
	font: inherit; background: #fff;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
	border-color: var(--color-accent-2); outline: none;
}
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.form-row--narrow { max-width: 220px; }
.req { color: var(--color-accent); }
.form-hp { position: absolute; left: -9999px; }
.form-privacy { font-size: 0.85rem; opacity: 0.75; }
.form-notice { padding: 0.9rem 1rem; border-radius: 12px; margin-bottom: 1.25rem; font-weight: 600; }
.form-notice--success { background: #e3f3e6; color: #1f6b33; }
.form-notice--error { background: #fbe3dd; color: #b23214; }

/* Contact Form 7 — sluit aan op dezelfde .form-* structuur in de formulier-markup */
.wpcf7-form-control-wrap { display: block; }
.aanvraagformulier .form-row input,
.aanvraagformulier .form-row textarea,
.aanvraagformulier .form-row select { width: 100%; }
.wpcf7 .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.9rem 1rem;
	border: 0;
	border-radius: 12px;
	font-weight: 600;
	background: #fbe3dd;
	color: #b23214;
}
.wpcf7 form.sent .wpcf7-response-output { background: #e3f3e6; color: #1f6b33; }
.wpcf7-not-valid-tip { color: #b23214; font-size: 0.85rem; font-weight: 600; margin-top: 0.3rem; }
.aanvraagformulier input.wpcf7-not-valid,
.aanvraagformulier textarea.wpcf7-not-valid { border-color: #b23214; }
.wpcf7-spinner { margin: 0 0 0 0.5rem; }

/* Footer ---------------------------------------------------------------- */
.site-footer { background: var(--kerk-ink); color: var(--kerk-cream); margin-top: var(--space); }
.site-footer__inner { display: grid; gap: 2rem; padding-block: var(--space); grid-template-columns: 1fr; }
.site-footer a { color: var(--kerk-pink); }
.site-footer__menu { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.site-footer__bottom { background: rgba(0,0,0,0.2); padding-block: 1rem; }
.site-footer__words { color: var(--kerk-pink); font-family: var(--font-head); font-size: 0.9rem; margin: 0 0 0.5rem; }
.site-footer__copy { margin: 0; font-size: 0.85rem; opacity: 0.8; }

/* Paginakoppen ---------------------------------------------------------- */
.page-header { margin-bottom: 1.5rem; }
.page-thumbnail { margin: 0 0 1.5rem; border-radius: var(--radius); overflow: hidden; }

/* Responsief ------------------------------------------------------------ */
@media (min-width: 768px) {
	.contact-layout { grid-template-columns: 1fr 1.1fr; align-items: start; }
	.site-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; }
}

@media (max-width: 767px) {
	.landing-hero { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
	.landing-hero__top { display: none; }
	.landing-hero__brand { grid-area: auto; }
	.landing-hero__media { grid-area: auto; aspect-ratio: 16 / 9; }

	/* Rotator op mobiel: compacter, zodat woordkolom + tekst netjes passen. */
	.wordrotator { --wr-fs: clamp(1.5rem, 6vw, 2.2rem); --wr-mask: 5.6em; }
	.landing-hero__tagline { max-width: 24ch; }

	.form-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.button:hover { transform: none; }
	.landing-hero__media img { transform: none !important; }
}