/*
 Theme Name:   Griffiths
 Theme URI:    https://griffithsadvocaten.nl/
 Description:  Custom template for Griffiths Advocaten
 Author:       107 ideas
 Author URI:   https://107ideas.com/
 Template:     bricks
 Version:      1.1
 Text Domain:  griffiths
*/

.fr-profile-card-echo__media-wrapper img {
	-webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.brxe-button {
	position: relative;
	display: inline-block;
	perspective: 2000px;
	-webkit-perspective: 2000px;
	color: transparent;
	overflow: hidden;
	background: transparent !important;
	border: none !important;
	cursor: pointer;
}
.brxe-button::before,
.brxe-button::after {
	content: attr(data-label);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.35s ease;
	transform-origin: center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	pointer-events: none;
	border-radius: inherit;
	font: inherit;
}
.brxe-button::before {
	background: var(--primary);
	color: #fff;
	transform: translateY(50%) rotateX(-90deg);
	z-index: 2;
	perspective-origin: top;
}
.brxe-button::after {
	background: var(--primary-dark);
	color: #fff;
	transform: translateY(0) rotateX(0);
	z-index: 1;
	perspective-origin: bottom;
}
.brxe-button:hover::before {
	transform: translateY(0) rotateX(0);
}
.brxe-button:hover::after {
	transform: translateY(-50%) rotateX(110deg);
}

/* Artikel filters */

.brxe-filter-radio .bricks-button {
	position: relative;
	display: inline-block;
	perspective: 2000px;
	-webkit-perspective: 2000px;
	color: transparent;
	overflow: hidden;
	background: transparent !important;
	border: none !important;
}
.brxe-filter-radio .bricks-button::before,
.brxe-filter-radio .bricks-button::after {
	content: attr(data-label);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s ease;
	transform-origin: center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	pointer-events: none;
	border-radius: inherit;
	font: inherit;
}
.brxe-filter-radio .bricks-button::before {
	background: var(--primary);
	color: #fff;
	transform: translateY(50%) rotateX(-90deg);
	z-index: 2;
	perspective-origin: top;
}
.brxe-filter-radio .bricks-button::after {
	background: var(--white);
	color: var(--black);
	transform: translateY(0) rotateX(0);
	z-index: 1;
	perspective-origin: bottom;
}
.brxe-filter-radio .bricks-button:hover::before {
	transform: translateY(0) rotateX(0);
}
.brxe-filter-radio .bricks-button:hover::after {
	transform: translateY(-50%) rotateX(110deg);
}

/* Active */

.brxe-filter-radio .bricks-button.brx-option-active {
	background: var(--primary) !important;
	color: var(--white) !important;
}
.brxe-filter-radio .bricks-button.brx-option-active::before,
.brxe-filter-radio .bricks-button.brx-option-active::after {
	display: none;
}

/* Article cards overflow */

.fr-article-grid-india .swiper-slide h3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

.fr-article-grid-india .swiper-slide h3,
.fr-article-card-india__heading {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}


#brxe-740a48 .bricks-nav-menu .sub-menu {
	line-height: 2;
}
:root {
	--primary-h: 199;
	--primary-s: 100%;
	--primary-l: 45%;

	--black-trans-50: color-mix(in oklch, var(--black) 50%, transparent);
	--neutral-light-trans-10: color-mix(in oklch, var(--neutral-light) 10%, transparent);
	--neutral-light-trans-20: color-mix(in oklch, var(--neutral-light) 20%, transparent);

	--fr-card-padding: var(--card-padding);
	--fr-card-gap: var(--card-gap);
	--fr-grid-gap: var(--grid-gap);
	--fr-content-gap: var(--content-gap);
}

:is(h1, h2, h3, h4, h5, h6) a { color: inherit; }
#brx-content .brx-filter-options li { margin-left: 0; }
#brx-content .brx-filter-options li::before { content: none; }

.brxe-filter-radio[data-mode="button"] label:focus-within .bricks-button {
	outline: none;
}