/*
Theme Name: Bistervelts
Theme URI: https://github.com/Qurious23/bistervelts-theme
Author: Quinn Rooswinkel
Description: Maatwerkthema voor Allround Klus Bistervelts, Venray.
Version: 0.4.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: bistervelts
GitHub Theme URI: https://github.com/Qurious23/bistervelts-theme
Primary Branch: main
*/

/* ---------- Basis ---------- */
/* Gevulde en outline-knoppen even groot: beide een rand van 1.5px */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link { border: 1.5px solid var(--wp--preset--color--blauw); box-sizing: border-box; }
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { border-color: var(--wp--preset--color--blauw-diep); }
.wp-block-button.is-style-outline > .wp-block-button__link { padding: 1rem 1.6rem; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; }
:where(a) { text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* Kleine label boven koppen: "— 01  Werkzaamheden" */
.bv-eyebrow {
	display: flex; align-items: center; gap: .75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--wp--preset--color--blauw);
	margin: 0 0 1.25rem;
}
.bv-eyebrow::before { content: ""; width: 2rem; height: 2px; background: currentColor; }
.bv-on-dark .bv-eyebrow { color: var(--wp--preset--color--wit); }

/* Homepage-secties sluiten op elkaar aan, net als toen ze direct in het template stonden */
.wp-block-post-content.bv-home > * { margin-block: 0; }

/* ---------- Header ---------- */
.bv-header { border-bottom: 1px solid var(--wp--preset--color--lijn); }
.bv-header { position: relative; z-index: 10; }
/* Navigatie als blauwe, afgeronde knoppen */
.bv-header .wp-block-navigation-item__content {
	display: inline-block; padding: .7rem 1.1rem; border-radius: 999px;
	background: var(--wp--preset--color--blauw); color: var(--wp--preset--color--wit) !important;
	font-family: var(--wp--preset--font-family--display); font-weight: 600; line-height: 1.2;
	transition: background .2s;
}
.bv-header .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--blauw-diep); }
.bv-header .bv-header-bel .wp-block-button__link { border-radius: 999px; font-size: .95rem; line-height: 1.2; }
.bv-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { margin-bottom: .5rem; }
/* Logo groter, valt over de rand heen zonder dat de header hoger wordt */
.bv-logo { height: 56px; margin: 0; }
.bv-logo img { width: 210px !important; height: auto; mix-blend-mode: multiply; position: relative; top: -4px; }

/* ---------- Hero ---------- */
.bv-hero h1 { text-wrap: balance; }
.bv-hero h1 em { font-style: normal; color: var(--wp--preset--color--blauw); }
.bv-hero-foto { position: relative; }
/* Bewerkbare blokken (afbeelding/alinea) zonder extra marges, zodat het er hetzelfde uitziet */
.bv-hero-foto > *, .bv-projecten > *, .bv-carl .wp-block-image { margin: 0 !important; }
.bv-hero-foto img { aspect-ratio: 4/5; object-fit: cover; width: 100%; border-radius: 2px; }
.bv-stempel {
	position: absolute; left: -2.25rem; bottom: 2.25rem;
	background: var(--wp--preset--color--blauw); color: var(--wp--preset--color--wit);
	padding: 1.1rem 1.4rem; font-family: var(--wp--preset--font-family--display); line-height: 1;
	box-shadow: 0 10px 30px -12px rgba(0,0,0,.45);
}
.bv-stempel strong { display: block; font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; }
.bv-stempel span { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* Feitenbalk */
.bv-feiten { background: var(--wp--preset--color--steen); padding: 1.75rem 2rem !important; }
.bv-feiten p { margin: 0; }
.bv-feiten strong { font-family: var(--wp--preset--font-family--display); font-size: 1.05rem; color: var(--wp--preset--color--inkt); }

/* ---------- Werkzaamheden ---------- */
.bv-diensten h3 {
	font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
	padding-bottom: .9rem; border-bottom: 2px solid var(--wp--preset--color--inkt);
}
.bv-diensten.bv-on-dark h3 { border-bottom-color: var(--wp--preset--color--wit); }
.bv-diensten.bv-on-dark .bv-lijst li { border-bottom-color: rgba(255,255,255,.18); }
.bv-lijst { list-style: none; padding: 0; margin: 0; }
.bv-lijst li {
	padding: .8rem 0; border-bottom: 1px solid var(--wp--preset--color--lijn);
	font-size: 1.05rem;
}

/* ---------- Projecten ---------- */
.bv-projecten { display: grid; gap: 12px; grid-template-columns: repeat(24, 1fr); grid-auto-rows: 180px; }
.bv-projecten figure { margin: 0; position: relative; overflow: hidden; background: var(--wp--preset--color--steen); }
.bv-projecten img, .bv-projecten .wp-block-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.bv-projecten figure:hover img { transform: scale(1.03); }
.bv-projecten figcaption {
	position: absolute; left: 0; bottom: 0; padding: .45rem .7rem;
	background: var(--wp--preset--color--papier); color: var(--wp--preset--color--inkt);
	font-size: .78rem; font-weight: 600; letter-spacing: .04em;
	margin: 0; text-align: left; line-height: inherit;
}
.bv-p1 { grid-column: span 14; grid-row: span 3; }
.bv-p2 { grid-column: span 10; grid-row: span 2; }
.bv-p3 { grid-column: span 10; grid-row: span 1; }
.bv-p4 { grid-column: span 9; grid-row: span 2; }
.bv-p5 { grid-column: span 9; grid-row: span 2; }
.bv-p6 { grid-column: span 6; grid-row: span 2; } /* staand */

/* ---------- Over Carl ---------- */
.bv-carl img { aspect-ratio: 1/1; object-fit: cover; width: 100%; filter: saturate(.85); }
.bv-quote { font-family: var(--wp--preset--font-family--display); font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }

/* ---------- Werkwijze ---------- */
.bv-stap { border-top: 1px solid rgba(255,255,255,.2); padding-top: 1.5rem; }
.bv-stap .bv-nr { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 3.2rem; line-height: 1; color: var(--wp--preset--color--wit); margin: 0 0 1rem; }

/* ---------- CTA ---------- */
.bv-bel { font-family: var(--wp--preset--font-family--display); font-weight: 800; letter-spacing: -.02em; }
.bv-bel a { text-decoration: none; }
.bv-bel a:hover { text-decoration: underline; text-decoration-thickness: 3px; }

/* ---------- Footer ---------- */
.bv-footer a { color: inherit; text-decoration: none; }
.bv-footer a:hover { text-decoration: underline; }

/* ---------- Mobiel ---------- */
@media (max-width: 781px) {
	.bv-header .bv-header-bel { display: none !important; }
	.bv-logo { height: 48px; }
	.bv-logo img { width: 150px !important; }
	.bv-hero { padding-top: 4.5rem !important; }
	.bv-stempel { left: 1rem; bottom: 1rem; }
	.bv-projecten { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
	.bv-projecten figure { grid-column: span 1 !important; grid-row: span 1 !important; }
	.bv-projecten .bv-p1 { grid-column: span 2 !important; grid-row: span 2 !important; }
}