/*
Theme Name: Bouw Atelier Essentie
Author: Bouw Atelier Essentie
Description: Maatwerk blokthema voor Bouw Atelier Essentie — architectuur, procesbegeleiding en bouw. Alles is aan te passen via de pagina's zelf en via Weergave → Editor.
Version: 1.4.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atelier-essentie
*/

/* Kleuren, lettertypen en afstanden staan in theme.json.
   Hier staat alleen wat niet via de editor in te stellen is. */

:root {
	--ae-lijn: rgba(197, 175, 143, .6);
	--ae-ease: cubic-bezier(.22, .61, .36, 1);
	--ae-snel: .3s;
	--ae-rustig: .9s;
	--ae-header-h: 5rem;
	--ae-rand: clamp(1.25rem, 4vw, 3rem);
	--ae-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 5h38M33.5 1l4.5 4-4.5 4' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Secties sluiten naadloos op elkaar aan */
.wp-site-blocks > * { margin-block-start: 0; }
.entry-content > .alignfull,
.is-root-container > .alignfull { margin-block-start: 0; }

/* ---------- Typografie ---------- */

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
p:empty { display: none; }

/* Cursief in een kop = gouden accent */
:is(h1, h2, h3) em { color: var(--wp--preset--color--goud-donker); }
:is(.has-antraciet-background-color, .wp-block-cover) :is(h1, h2, h3) em { color: var(--wp--preset--color--goud); }

/* Stijl "Klein kopje": gespatieerde kapitalen in goud */
.is-style-ae-kicker {
	font-family: var(--wp--preset--font-family--sans);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--goud-donker);
}
:is(.has-antraciet-background-color, .wp-block-cover) .is-style-ae-kicker { color: var(--wp--preset--color--goud); }
.is-style-ae-kicker a { text-decoration: none; }

/* Stijl "Met gouden lijn" voor koppen */
.is-style-ae-lijn::after {
	content: "";
	display: block;
	width: 4rem;
	height: 1px;
	margin-top: 1.25rem;
	background: var(--wp--preset--color--goud);
}
.is-style-ae-lijn.has-text-align-center::after { margin-inline: auto; }

/* Stijl "Link met pijl": vette tekst met een lange, dunne pijl */
.is-style-ae-pijl a {
	display: inline-flex;
	align-items: center;
	gap: .9rem;
	font-weight: 500;
	text-decoration: none;
}
.is-style-ae-pijl a::after {
	content: "";
	flex: none;
	width: 2.5rem;
	height: .625rem;
	background: currentColor;
	-webkit-mask: var(--ae-pijl) no-repeat center / contain;
	mask: var(--ae-pijl) no-repeat center / contain;
	transition: transform var(--ae-snel) var(--ae-ease);
}
.is-style-ae-pijl a:hover::after { transform: translateX(.4rem); }

/* Labeltje met een dun kader, bijv. "Uitgelicht" */
.ae-tag {
	width: fit-content;
	padding: .3rem .9rem;
	border: 1px solid currentColor;
	font-size: var(--wp--preset--font-size--small);
}

/* Knoppen */
.wp-block-button__link { transition: background-color var(--ae-snel) var(--ae-ease), color var(--ae-snel) var(--ae-ease), border-color var(--ae-snel) var(--ae-ease); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid currentColor;
	padding: calc(1rem - 1px) calc(2rem - 1px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--goud);
	border-color: var(--wp--preset--color--goud);
	color: var(--wp--preset--color--antraciet);
}
.wp-block-button__link.has-goud-background-color:hover { background: var(--wp--preset--color--ivoor) !important; }

/* ---------- Header ---------- */

.ae-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	color: var(--wp--preset--color--antraciet);
	transition: color .4s var(--ae-ease), box-shadow .4s var(--ae-ease);
}
@media (max-width: 600px) { .ae-header { top: 0; } }
.ae-header > .wp-block-group { transition: background-color .4s var(--ae-ease); }
.ae-header.is-scrolled { box-shadow: 0 1px 0 var(--ae-lijn); }

.ae-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
}
.ae-header__inner > * { margin: 0; }
.ae-header__inner > :last-child { justify-self: end; }
.ae-logo { line-height: 0; }
.ae-logo img { aspect-ratio: 498 / 210; height: auto; }

/* Menu-links: dun lijntje dat bij hover uitschuift */
.ae-header .wp-block-navigation-item__content {
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
	padding-bottom: .2rem;
	transition: background-size var(--ae-snel) var(--ae-ease);
}
.ae-header .wp-block-navigation-item__content:hover,
.ae-header .current-menu-item > .wp-block-navigation-item__content { background-size: 100% 1px; }

/* Begint de pagina met een hero? Dan ligt de header er transparant overheen
   tot je gaat scrollen. */
.entry-content > .ae-hero:first-child { margin-top: calc(-1 * var(--ae-header-h)); }
body:has(.entry-content > .ae-hero:first-child) .ae-header:not(.is-scrolled) { color: var(--wp--preset--color--ivoor); }
body:has(.entry-content > .ae-hero:first-child) .ae-header:not(.is-scrolled) > .wp-block-group { background-color: transparent !important; }
body:has(.entry-content > .ae-hero:first-child) .ae-header:not(.is-scrolled) .ae-logo img { content: url(assets/images/logo-monogram-licht.png); }

/* Hamburgermenu tot en met tablet (menu links, logo in het midden) */
@media (max-width: 1023px) {
	.ae-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.ae-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.ae-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--ivoor) !important;
	color: var(--wp--preset--color--antraciet) !important;
	padding: 1.5rem var(--ae-rand);
}
.ae-header .is-menu-open .wp-block-navigation__container { gap: 1.25rem; padding-top: 2rem; }
.ae-header .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 2.25rem;
	font-weight: 500;
}
@media (max-width: 599px) {
	.ae-logo img { width: 92px !important; }
	.ae-header__cta a::after { display: none; }
}

/* ---------- Hero ---------- */

.ae-hero { position: relative; min-height: 100svh !important; overflow: hidden; }
/* Tekst blijft leesbaar, ook waar de foto licht is */
.ae-hero :is(h1, p) { text-shadow: 0 1px 1.5rem rgba(20, 18, 16, .55); }
/* Zachte schaduw bovenaan zodat het menu leesbaar blijft op een lichte foto */
.ae-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 14rem;
	background: linear-gradient(rgba(30, 28, 25, .5), transparent);
	z-index: 1;
	pointer-events: none;
}
/* Dun gouden lijntje onderaan: nodigt uit om te scrollen */
.ae-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 1px;
	height: 4.5rem;
	background: linear-gradient(transparent, var(--wp--preset--color--goud));
	z-index: 1;
}

/* Grote foto's over de volle breedte: tekst lijnt uit met de rest van de pagina */
.wp-block-cover.alignfull { padding: var(--wp--preset--spacing--50) var(--ae-rand); }
.wp-block-cover.alignfull.has-custom-content-position .wp-block-cover__inner-container { width: 100% !important; max-width: 1240px; margin-inline: auto !important; }
.wp-block-cover.alignfull.has-custom-content-position .wp-block-cover__inner-container > * { max-width: none; margin-inline: 0 !important; }

/* ---------- Beeld naast tekst ---------- */

.ae-beeld { overflow: hidden; }
.ae-beeld img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ae-beeld.is-liggend img { aspect-ratio: 3 / 2; }

/* ---------- Samenwerken: drie kolommen met foto ---------- */

.ae-samenwerken .wp-block-image { overflow: hidden; border-radius: 14px; }
.ae-samenwerken .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 1.2s var(--ae-ease);
}
.ae-samenwerken .wp-block-column:hover .wp-block-image img { transform: scale(1.04); }

/* ---------- Schuifbare rijen: procesbalk en projectcarrousel ---------- */

.ae-slider,
.ae-carrousel .wp-block-post-template {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: clamp(1rem, 2vw, 1.75rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-block: .5rem;
}
.ae-slider::-webkit-scrollbar,
.ae-carrousel .wp-block-post-template::-webkit-scrollbar { display: none; }
.ae-slider > * {
	flex: 0 0 min(80vw, 370px);
	scroll-snap-align: start;
	margin: 0;
}

/* Projectcarrousel loopt aan beide kanten het scherm uit */
.ae-carrousel { --ae-inspring: max(var(--ae-rand), calc((100vw - 1240px) / 2)); }
.ae-carrousel .wp-block-post-template {
	margin: 0;
	padding-inline: var(--ae-inspring);
	scroll-padding-inline: var(--ae-inspring);
	list-style: none;
}
.ae-carrousel .wp-block-post-template > li {
	flex: 0 0 min(82vw, 44rem);
	scroll-snap-align: start;
	margin: 0;
}
.ae-carrousel .wp-block-post-featured-image { overflow: hidden; margin-bottom: 1rem; }
.ae-carrousel .wp-block-post-featured-image img { transition: transform 1.2s var(--ae-ease); }
.ae-carrousel li:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.ae-carrousel .wp-block-post-title { margin: 0; }
.ae-carrousel .wp-block-post-title a { text-decoration: none; }
.ae-carrousel .ae-slider-nav { max-width: 1240px; margin-inline: auto; padding-inline: var(--ae-rand); box-sizing: content-box; }

.ae-kaart {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ae-lijn);
	border-radius: 6px;
	transition: border-color var(--ae-snel) var(--ae-ease), background-color var(--ae-snel) var(--ae-ease), translate .5s var(--ae-ease);
}
.ae-kaart:hover { border-color: var(--wp--preset--color--goud-donker); background: rgba(255, 255, 255, .4); translate: 0 -4px; }
.ae-kaart__nr {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 3.5rem;
	line-height: 1;
	color: var(--wp--preset--color--goud);
}

.ae-slider-nav { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.ae-slider-nav[hidden] { display: none; }
.ae-slider-nav__lijn { position: relative; flex: 1; height: 1px; margin-right: 1rem; background: var(--ae-lijn); }
.ae-slider-nav__lijn span { position: absolute; top: -1px; bottom: -1px; background: var(--wp--preset--color--antraciet); }
.ae-slider-nav button {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border: 1px solid var(--wp--preset--color--antraciet);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--antraciet);
	cursor: pointer;
	transition: background-color var(--ae-snel) var(--ae-ease), color var(--ae-snel) var(--ae-ease), opacity var(--ae-snel);
}
.ae-slider-nav button::before {
	content: "";
	width: 1.5rem;
	height: .5rem;
	background: currentColor;
	-webkit-mask: var(--ae-pijl) no-repeat center / contain;
	mask: var(--ae-pijl) no-repeat center / contain;
}
.ae-slider-nav button:first-of-type::before { transform: scaleX(-1); }
.ae-slider-nav button:hover:not(:disabled) { background: var(--wp--preset--color--antraciet); color: var(--wp--preset--color--ivoor); }
.ae-slider-nav button:disabled { opacity: .3; cursor: default; }

/* ---------- Projecten (raster) ---------- */

.ae-projecten .wp-block-post-featured-image { overflow: hidden; margin-bottom: 1rem; }
.ae-projecten .wp-block-post-featured-image img { transition: transform 1.2s var(--ae-ease); }
.ae-projecten li:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.ae-projecten .wp-block-post-title { margin-top: .25rem; }
.ae-projecten .wp-block-post-title a { text-decoration: none; }
@media (min-width: 601px) and (max-width: 900px) {
	.ae-projecten .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Filter op projecttype boven het overzicht */
.ae-filter { gap: .6rem; }
.ae-filter > * { margin: 0; }
.ae-filter ul { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ae-filter a {
	display: inline-block;
	padding: .45rem 1.1rem;
	border: 1px solid var(--ae-lijn);
	border-radius: 99px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-decoration: none;
	transition: background-color var(--ae-snel) var(--ae-ease), color var(--ae-snel) var(--ae-ease), border-color var(--ae-snel) var(--ae-ease);
}
.ae-filter a:hover,
.ae-filter .current-cat > a,
.post-type-archive-project .ae-filter__alle a {
	background: var(--wp--preset--color--antraciet);
	border-color: var(--wp--preset--color--antraciet);
	color: var(--wp--preset--color--ivoor);
}

/* ---------- Galerijen ---------- */

.wp-block-gallery.has-nested-images figure.wp-block-image { overflow: hidden; }
.wp-block-gallery.has-nested-images figure.wp-block-image img { transition: transform 1.2s var(--ae-ease); }
.wp-block-gallery.has-nested-images figure.wp-block-image:hover img { transform: scale(1.04); }
.ae-galerij .wp-block-gallery.has-nested-images figure.wp-block-image { aspect-ratio: 4 / 3; }
/* Vergroot-knop van WordPress: rustig, in huisstijl */
.wp-lightbox-container button { border-radius: 0; background: rgba(49, 47, 42, .6); }
.wp-lightbox-overlay .scrim { background-color: var(--wp--preset--color--antraciet) !important; }
.wp-lightbox-overlay .close-button { color: var(--wp--preset--color--ivoor); }
.wp-lightbox-overlay .close-button svg { fill: currentColor; }

/* ---------- Veelgestelde vragen ---------- */

.wp-block-details { border-bottom: 1px solid var(--ae-lijn); padding-block: 1.1rem; }
.wp-block-details summary {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	cursor: pointer;
}
.wp-block-details summary::marker { color: var(--wp--preset--color--goud); }

/* ---------- Contactformulier (plugin "Atelier Essentie Contact") ---------- */

.ae-form { display: grid; gap: 1.5rem; }
.ae-form__rij { display: grid; gap: 1.5rem; }
@media (min-width: 600px) { .ae-form__rij { grid-template-columns: 1fr 1fr; } }
.ae-form label { display: block; font-size: var(--wp--preset--font-size--small); font-weight: 400; letter-spacing: .04em; }
.ae-form :is(input[type=text], input[type=email], input[type=tel], textarea) {
	display: block;
	width: 100%;
	margin-top: .35rem;
	padding: .7rem 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--taupe);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	transition: border-color var(--ae-snel) var(--ae-ease);
}
.ae-form :is(input, textarea):focus { outline: none; border-bottom-color: var(--wp--preset--color--antraciet); box-shadow: 0 1px 0 var(--wp--preset--color--antraciet); }
.ae-form textarea { min-height: 8rem; resize: vertical; }
.ae-form__akkoord { display: flex; gap: .75rem; align-items: flex-start; }
.ae-form__akkoord input { margin-top: .45rem; accent-color: var(--wp--preset--color--antraciet); }
.ae-form__val { position: absolute; left: -9999px; }
.ae-form button {
	justify-self: start;
	padding: 1rem 2rem;
	border: 0;
	background: var(--wp--preset--color--antraciet);
	color: var(--wp--preset--color--ivoor);
	font-family: inherit;
	font-size: .8125rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--ae-snel) var(--ae-ease), color var(--ae-snel) var(--ae-ease);
}
.ae-form button:hover { background: var(--wp--preset--color--goud); color: var(--wp--preset--color--antraciet); }
.ae-melding { padding: 1rem 1.25rem; border-left: 2px solid var(--wp--preset--color--goud); background: var(--wp--preset--color--zand); }
.ae-melding.is-fout { border-left-color: #a4372a; }

/* ---------- Footer ---------- */

.ae-footer a { text-decoration: none; transition: color var(--ae-snel) var(--ae-ease); }
.ae-footer a:hover { color: var(--wp--preset--color--goud); }
.ae-footer .wp-block-navigation__container { gap: .4rem; }
.ae-footer .wp-block-separator { opacity: .4; }

/* ---------- Beweging ----------
   Subtiel, en uit voor wie "minder beweging" heeft ingesteld. */

@media (prefers-reduced-motion: no-preference) {

	/* Zachte overgang tussen pagina's (in browsers die dat ondersteunen) */
	@view-transition { navigation: auto; }
	::view-transition-old(root),
	::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ae-ease); }

	/* Hero: foto zoomt bij laden langzaam uit, tekst komt rustig op */
	.ae-hero .wp-block-cover__image-background { animation: ae-zoom-uit 2.6s var(--ae-ease) both; }
	.ae-hero .wp-block-cover__inner-container > * { animation: ae-opkomen 1.1s var(--ae-ease) both; }
	.ae-hero .wp-block-cover__inner-container > :nth-child(1) { animation-delay: .25s; }
	.ae-hero .wp-block-cover__inner-container > :nth-child(2) { animation-delay: .45s; }
	.ae-hero .wp-block-cover__inner-container > :nth-child(3) { animation-delay: .65s; }
	.ae-hero .wp-block-cover__inner-container > :nth-child(n+4) { animation-delay: .85s; }
	.ae-hero::after { animation: ae-lijn-groei 1.4s var(--ae-ease) 1s both; transform-origin: bottom; }

	/* Grote foto's bewegen iets trager mee dan de pagina (parallax) */
	@supports (animation-timeline: view()) {
		.entry-content > .wp-block-cover:not(.ae-hero) .wp-block-cover__image-background {
			scale: 1.14;
			animation: ae-parallax linear both;
			animation-timeline: view();
		}
	}

	/* Secties komen rustig op bij scrollen; kolommen en kaarten na elkaar */
	.ae-js .ae-reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity var(--ae-rustig) var(--ae-ease), transform var(--ae-rustig) var(--ae-ease); }
	.ae-js .ae-reveal.is-zichtbaar { opacity: 1; transform: none; }
	.ae-js .ae-reveal:is(.wp-block-columns, .ae-slider) { opacity: 1; transform: none; }
	.ae-js .ae-reveal:is(.wp-block-columns, .ae-slider) > * { opacity: 0; transform: translateY(1.5rem); transition: opacity var(--ae-rustig) var(--ae-ease), transform var(--ae-rustig) var(--ae-ease); }
	.ae-js .ae-reveal.is-zichtbaar:is(.wp-block-columns, .ae-slider) > * { opacity: 1; transform: none; }
	.ae-js .ae-reveal > :nth-child(2) { transition-delay: .12s; }
	.ae-js .ae-reveal > :nth-child(3) { transition-delay: .24s; }
	.ae-js .ae-reveal > :nth-child(4) { transition-delay: .36s; }

	/* Foto naast tekst: zoomt zacht uit zodra hij in beeld komt */
	.ae-js .ae-reveal .ae-beeld img { transform: scale(1.08); transition: transform 1.6s var(--ae-ease); }
	.ae-js .ae-reveal.is-zichtbaar .ae-beeld img { transform: none; }

	/* Gouden lijntje onder een kop tekent zich uit */
	.ae-js .ae-reveal.is-style-ae-lijn::after { width: 0; transition: width 1s var(--ae-ease) .3s; }
	.ae-js .ae-reveal.is-zichtbaar.is-style-ae-lijn::after { width: 4rem; }
}

@keyframes ae-zoom-uit { from { scale: 1.1; } to { scale: 1; } }
@keyframes ae-opkomen { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes ae-lijn-groei { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ae-parallax { from { translate: 0 -5%; } to { translate: 0 5%; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

:focus-visible { outline: 2px solid var(--wp--preset--color--goud-donker); outline-offset: 3px; }