/* ==========================================================================
   JVDL — maatwerk blockthema
   Signatuur: visgraat. Rustig, licht, tactiel. Eén accent: messing.
   ========================================================================== */

:root {
	--jvdl-line: color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
	--jvdl-line-strong: color-mix(in srgb, var(--wp--preset--color--ink) 24%, transparent);
	--jvdl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Font finishing ------------------------------------------------------ */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
	font-feature-settings: "ss01", "cv01";
}

::selection { background: var(--wp--preset--color--brass); color: var(--wp--preset--color--white); }

/* Nette focus voor toetsenbordgebruik */
:where(a, button, input, .wp-block-button__link, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--brass-deep);
	outline-offset: 3px;
	border-radius: 1px;
}

/* --- Eyebrow / kicker label ---------------------------------------------- */
.jvdl-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	margin: 0 0 0.25rem;
}
.jvdl-eyebrow::before {
	content: "";
	width: 2.25rem;
	height: 2px;
	background: var(--wp--preset--color--brand-red);
	flex: none;
}
.jvdl-eyebrow.is-centered { justify-content: center; }

/* Kleine indexnummers (mono) voor echte reeksen, bv. werkwijze */
.jvdl-index {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--brass-deep);
}

/* --- Visgraat-deler (signatuur) ------------------------------------------ */
.jvdl-herringbone {
	height: 22px;
	width: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cg fill='none' stroke='%234161AD' stroke-width='1.4' stroke-opacity='0.55'%3E%3Cpath d='M0 21 L11 1 L22 21 L33 1 L44 21'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center;
	opacity: 0.9;
}

/* --- Content links -------------------------------------------------------- */
.entry-content a,
.wp-block-post-content a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--jvdl-line-strong);
}

/* --- Afbeeldingen: rustige overgang + messing kader ---------------------- */
.wp-block-image img { transition: transform 0.7s var(--jvdl-ease); }

.wp-block-image.is-style-frame { position: relative; }
.wp-block-image.is-style-frame img { position: relative; z-index: 1; }
.wp-block-image.is-style-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	translate: 14px 14px;
	border: 1px solid var(--wp--preset--color--brass);
	z-index: 0;
	pointer-events: none;
}

/* --- Groep met haarlijn boven -------------------------------------------- */
.wp-block-group.is-style-hairline-top {
	border-top: 1px solid var(--jvdl-line);
	padding-top: var(--wp--preset--spacing--50);
}

/* --- Kaarten (diensten / vloervarianten) --------------------------------- */
.jvdl-card { position: relative; height: 100%; }
.jvdl-card .wp-block-image { overflow: clip; margin-bottom: 1.1rem; }
.jvdl-card .wp-block-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.jvdl-card:hover .wp-block-image img { transform: scale(1.035); }
.jvdl-card h3 { margin: 0 0 0.35rem; }
.jvdl-card .jvdl-card__link {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-deep);
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
}
.jvdl-card .jvdl-card__link::after { content: "\2192"; transition: translate 0.35s var(--jvdl-ease); }
.jvdl-card:hover .jvdl-card__link::after { translate: 4px 0; }

/* Maak de hele kaart klikbaar als er een overlay-link is */
.jvdl-card__cover { position: absolute; inset: 0; z-index: 3; }

/* --- Split hero ----------------------------------------------------------- */
.jvdl-hero { position: relative; }
.jvdl-hero .jvdl-hero__media img {
	width: 100%;
	height: 100%;
	min-height: clamp(360px, 62vh, 680px);
	object-fit: cover;
	display: block;
}
.jvdl-hero__title { font-weight: 730; letter-spacing: -0.016em; text-wrap: balance; }
.jvdl-hero__title em {
	font-style: normal;
	color: var(--wp--preset--color--brand-red);
}

/* --- "Gelegde parket" galerij (signatuur, verspringend) ------------------ */
.jvdl-parquet {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(0.6rem, 1.4vw, 1.1rem);
	align-items: start;
}
.jvdl-parquet .wp-block-image { margin: 0; overflow: clip; }
.jvdl-parquet .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jvdl-parquet .wp-block-image:nth-child(odd) { translate: 0 1.6rem; }
.jvdl-parquet .wp-block-image:hover img { transform: scale(1.04); }

/* --- Meta / contact spec-lijst ------------------------------------------- */
.wp-block-list.is-style-spec { list-style: none; margin: 0; padding: 0; }
.wp-block-list.is-style-spec li {
	display: grid;
	grid-template-columns: 8.5rem 1fr;
	gap: 1rem;
	padding: 0.85rem 0;
	border-top: 1px solid var(--jvdl-line);
	font-size: 1rem;
}
.wp-block-list.is-style-spec li::before {
	content: attr(data-label);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	padding-top: 0.15em;
}

/* --- Spec-lijst (dl) ------------------------------------------------------ */
.jvdl-specs { margin: 0; display: grid; }
.jvdl-specs div {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: 1rem;
	padding: 0.85rem 0;
	border-top: 1px solid var(--jvdl-line);
	align-items: baseline;
}
.jvdl-specs dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.jvdl-specs dd { margin: 0; }
@media (max-width: 600px) {
	.jvdl-specs div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --- Header / navigatie --------------------------------------------------- */
.jvdl-brand { margin: 0; }
.jvdl-brand img { height: 46px; width: auto; display: block; }
@media (max-width: 600px) { .jvdl-brand img { height: 38px; } }
.wp-block-navigation { font-family: var(--wp--preset--font-family--mono); }
.wp-block-navigation a {
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}
.wp-block-navigation .wp-block-navigation-item__content:hover { text-decoration-color: var(--wp--preset--color--brass); }
.jvdl-site-header { border-bottom: 1px solid var(--jvdl-line); }

/* --- Footer --------------------------------------------------------------- */
.jvdl-footer { border-top: 1px solid var(--jvdl-line); }
.jvdl-footer a { color: inherit; }

/* --- Lead-alinea ---------------------------------------------------------- */
.jvdl-lead { font-size: var(--wp--preset--font-size--x-large); line-height: 1.42; font-weight: 440; color: var(--wp--preset--color--ink-80); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 781px) {
	.jvdl-parquet { grid-template-columns: repeat(2, 1fr); }
	.jvdl-parquet .wp-block-image:nth-child(odd) { translate: 0 0.8rem; }
	.jvdl-hero .jvdl-hero__media img { min-height: 56vh; }
	.wp-block-list.is-style-spec li { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --- Footer logo ---------------------------------------------------------- */
.jvdl-footer__logo { margin: 0; max-width: 380px; }
.jvdl-footer__logo img { width: 100%; height: auto; display: block; }

/* --- Skip link + screen-reader-text -------------------------------------- */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
	position: fixed; top: 0.75rem; left: 0.75rem; z-index: 1000;
	width: auto; height: auto; clip: auto; clip-path: none; margin: 0;
	padding: 0.75rem 1.25rem; background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem; letter-spacing: 0.05em; text-decoration: none; border-radius: 2px;
}

/* --- Contactformulier ----------------------------------------------------- */
.jvdl-form { max-width: 34rem; }
.jvdl-field { margin: 0 0 1.2rem; }
.jvdl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.jvdl-form label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.5rem;
}
.jvdl-form input,
.jvdl-form textarea {
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--jvdl-line-strong);
	border-radius: 2px;
	padding: 0.75rem 0.9rem;
	transition: border-color 0.25s var(--jvdl-ease);
}
.jvdl-form input:focus,
.jvdl-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--brass-deep);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--brass) 22%, transparent);
}
.jvdl-form textarea { resize: vertical; min-height: 8rem; }
.jvdl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jvdl-form-note {
	padding: 0.9rem 1.1rem;
	border-radius: 2px;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
	border: 1px solid transparent;
}
.jvdl-form-note.is-success { background: color-mix(in srgb, var(--wp--preset--color--brass) 16%, var(--wp--preset--color--base)); border-color: var(--wp--preset--color--brass); color: var(--wp--preset--color--ink); }
.jvdl-form-note.is-error { background: #f3e2e0; border-color: #b5443b; color: #7a2a24; }
@media (max-width: 600px) {
	.jvdl-field-row { grid-template-columns: 1fr; gap: 0; }
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wp-block-image img,
	.jvdl-card .jvdl-card__link::after,
	.jvdl-parquet .wp-block-image img { transition: none !important; }
	.jvdl-card:hover .wp-block-image img,
	.jvdl-parquet .wp-block-image:hover img { transform: none; }
	html { scroll-behavior: auto; }
}