/*
 Theme Name:   Caftan Gallery (Bricks Child)
 Theme URI:    https://caftangallery.nl/
 Description:  Child theme voor Caftan Gallery: lichte motion-laag, toegankelijkheid en kleine performance-instellingen. Opmaak zelf staat in Bricks (Stijlmanager).
 Author:       Caftan Gallery
 Template:     bricks
 Version:      1.3.1
 Text Domain:  caftan-gallery
*/

/* 1. Basis ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--cg-espresso, #45291f); color: var(--cg-ivoor, #efede6); }
img { height: auto; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 1px solid var(--cg-espresso, #45291f);
	outline-offset: 3px;
}

/* 2. Header ------------------------------------------------------------------ */
/* Vaste header via native sticky: blijft in de paginaflow, geen overlap, geen script. */
#brx-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 998;
}
@media (max-width: 600px) {
	/* Onder 600px scrolt de WordPress-beheerbalk mee; de header plakt dan aan de bovenkant. */
	#brx-header { top: 0; }
}

/* Zoekbalk: ligt als laag onder de header en vervaagt in (alleen opacity/transform, dus soepel). */
[data-cg-search-panel] {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, -.6rem, 0);
	transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s;
}
[data-cg-search-panel][data-open] {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}
[data-cg-search-toggle] { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; line-height: 1; }

/* 3. Reveal ------------------------------------------------------------------ */
/*
 * Gebruik in Bricks: attribuut data-cg-reveal (leeg of "image"), optioneel data-cg-delay="1".."4".
 * Alleen onderdelen die bij het laden NIET in beeld zijn worden verborgen (klasse .cg-wacht via JS).
 * Wat bovenaan staat is dus altijd direct zichtbaar.
 */
.cg-wacht {
	opacity: 0;
	transform: translate3d(0, 1.6rem, 0);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--cg-delay, 0) * 70ms);
}
.cg-wacht[data-cg-reveal="image"] { transform: none; transition: opacity .8s ease; }
.cg-wacht.is-revealed { opacity: 1; transform: none; }

[data-cg-delay="1"] { --cg-delay: 1; }
[data-cg-delay="2"] { --cg-delay: 2; }
[data-cg-delay="3"] { --cg-delay: 3; }
[data-cg-delay="4"] { --cg-delay: 4; }

/* 4. Minder beweging --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
}