/*
 * Button 029 (Osmo Supply). Structuur en animatie ongewijzigd; kleuren uit theme.json.
 * Standaard: doorzichtig met 1px rand in nacht, hover bordeaux dat van onder naar
 * boven komt (lichte secties). thema="licht": rand en tekst in zand (donkere secties).
 */

:root {
	--button-029-color: var(--wp--preset--color--ink, #1b0b09);
	--button-029-color-background: transparent;
	--button-029-color-border: var(--wp--preset--color--ink, #1b0b09);
	--button-029-hover-color: var(--wp--preset--color--cream, #ebe0d6);
	--button-029-hover-color-background: var(--wp--preset--color--wine, #70041c);
	--button-029-color-focus: var(--wp--preset--color--ink, #1b0b09);
	--button-029-padding: 0.85em 1.35em;
	--button-029-border-radius: 2.5em;
	--button-029-focus-inset: -0.125em;
	--button-029-click-scale: 0.955 0.925;
	/* Van onder naar boven: bovenkant volledig weggeknipt, ronde hoeken op de
	   opkomende rand. (Osmo: van links, inset(0 100% 0 0 round 0 .75em .75em 0).) */
	--button-029-clip-path: inset(100% 0 0 0 round 0.75em 0.75em 0 0);
	--button-029-clip-path-hover: inset(0 0 0 0 round 0);
	--button-029-ease-click: cubic-bezier(0.4, 0, 0.2, 1);
	--button-029-ease-hover: cubic-bezier(0.32, 0.72, 0, 1);
	--button-029-ease-focus: cubic-bezier(0.32, 0.72, 0, 1);
}

.button-029[data-theme='licht'] {
	--button-029-color: var(--wp--preset--color--cream, #ebe0d6);
	--button-029-color-border: var(--wp--preset--color--cream, #ebe0d6);
	--button-029-color-focus: var(--wp--preset--color--cream, #ebe0d6);
}

/* Valkuil 5: Webflow rekent met border-box, WordPress niet. Zonder dit wordt de
   binnenlaag (width 100% + padding) groter dan de pil en schuift de tekst uit het
   midden. Geldt voor elke Osmo-component. */
.button-029,
.button-029 * {
	box-sizing: border-box;
}

.button-029 {
	-webkit-user-select: none;
	user-select: none;
	background-color: #0000;
	outline-style: none;
	padding: 0;
	line-height: 1;
	text-decoration: none;
	display: inline-grid;
	position: relative;
	-webkit-tap-highlight-color: transparent;
	transition: scale 0.15s var(--button-029-ease-click);
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
}

.button-029::after {
	content: '';
	display: block;
	position: absolute;
	inset: var(--button-029-focus-inset);
	border-radius: var(--button-029-border-radius);
	transition: box-shadow 0.3s var(--button-029-ease-focus);
	pointer-events: none;
	z-index: 1;
}

.button-029:is(:focus-visible)::after {
	box-shadow: 0 0 0 0.125em var(--button-029-color-focus);
}

.button-029:active {
	scale: var(--button-029-click-scale);
}

.button-029__inner {
	grid-area: 1 / 1;
	place-items: center;
	width: 100%;
	height: 100%;
	display: grid;
}

.button-029__default {
	width: 100%;
	height: 100%;
	color: var(--button-029-color);
	grid-area: 1 / 1;
	display: grid;
}

.button-029__default-bg {
	background-color: var(--button-029-color-background);
	border: 1px solid var(--button-029-color-border);
	border-radius: var(--button-029-border-radius);
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	padding: 0;
}

.button-029__default-inner,
.button-029__hover-inner {
	grid-column-gap: 0.125em;
	grid-row-gap: 0.125em;
	width: 100%;
	height: 100%;
	padding: var(--button-029-padding);
	grid-area: 1 / 1;
	justify-content: center;
	align-items: center;
	display: flex;
}

.button-029__hover {
	color: var(--button-029-hover-color);
	grid-area: 1 / 1;
	width: calc(100% + 1px);
	height: calc(100% + 1px);
	display: grid;
	clip-path: var(--button-029-clip-path);
	transition: clip-path 0.5s var(--button-029-ease-hover);
}

.button-029__hover-bg {
	border-radius: var(--button-029-border-radius);
	background-color: var(--button-029-hover-color-background);
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	padding: 0;
}

.button-029__icon {
	flex: none;
	width: 0.75em;
	height: 0.75em;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.button-029:is(:hover, :focus-visible) .button-029__hover,
	[data-hover]:is(:hover, :focus-visible) .button-029 .button-029__hover {
		clip-path: var(--button-029-clip-path-hover);
		transition: clip-path 0.55s 0.05s var(--button-029-ease-hover);
	}
}