/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ****************** Gloal ****************** */

html{
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
}

@media(max-width:575px){
 html{
	scroll-padding-top: 40px;
}
}

/* #brx-content .elevated-instagram-feed .transition-colors {
    padding: var(--spacing-lg) 1.125em !important;
    font-size: 1rem;
    line-height: 1.5;
    gap: 0.5rem;
    color: var(--button-secondary-fg) !important;
    background-color: var(--button-secondary-bg) !important;
    box-shadow: 0 0 0 1px var(--button-secondary-border) inset,0 0 0 1px rgba(10, 13, 18, 0.18) inset, 0 -2px 0 0 rgba(10, 13, 18, 0.05) inset, 0 1px 2px 0 rgba(10, 13, 18, 0.05);
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
}

#brx-content .elevated-instagram-feed .transition-colors:hover{
    background-color: var(--button-secondary-bg_hover) !important;
    color: var(--button-secondary-fg_hover) !important;
} */

/* ****************** Gloal ****************** */
/* ****************** Header ****************** */
#brx-header {
    position: sticky;
    top: 0;
    z-index: 999;
    transition: var(--base-transition)
}

#brx-header.custom_sticky {
    box-shadow: var(--shadows--shadow-sm);
}
/* ****************** Header ****************** */
.wpml-custom-switcher:focus{
    box-shadow: 0 0 0 1px var(--button-secondary-border) inset, 0 0 0 1px rgba(10, 13, 18, 0.18) inset, 0 -2px 0 0 rgba(10, 13, 18, 0.05) inset, 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 0 0 2px #FFF, 0 0 0 4px var(--brand--500);
}
.wpml-custom-switcher {
	padding-top: 10px;
	padding-right: var(--spacing-lg) ;
	padding-bottom: 10px;
	padding-left:var(--spacing-lg) ;
	position: relative;
	display: inline-block;
	box-shadow: 0 0 0 1px var(--button-secondary-border) inset,0 0 0 1px rgba(10, 13, 18, 0.18) inset, 0 -2px 0 0 rgba(10, 13, 18, 0.05) inset, 0 1px 2px 0 rgba(10, 13, 18, 0.05);
	outline: none !important;
	background: var(--button-secondary-bg);
	transition: var(--base-transition);
	border-radius: var(--radius-md);
}
.wpml-active-lang {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}
.wpml-active-lang .flag {
	display: flex;
}
.wpml-active-lang .flag img,
.wpml-lang-item .flag img{
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}
.wpml-active-lang .code,
.wpml-lang-item .code {
	font-weight: 500;
	color: var(--text-primary-900);
	font-size: var(--text-md);
	line-height: var(--line-height-text-md);
}
.wpml-active-lang .arrow img {
	width: 16px;
	height: 16px;
	object-fit: contain;
filter: brightness(0) saturate(100%) invert(87%) sepia(9%) saturate(197%) hue-rotate(184deg) brightness(77%) contrast(83%);
	transition: var(--base-transition);
}
.wpml-custom-switcher.active .wpml-lang-list {
	display: block;
}
.wpml-lang-list {
	display: none;
	position: absolute;
	top: 115%;
	left: 0;
	z-index: 99;
	width: 100%;
	padding-top: 10px;
	padding-right: var(--spacing-lg) ;
	padding-bottom: 10px;
	padding-left:var(--spacing-lg) ;
	box-shadow: 0 0 0 1px var(--button-secondary-border) inset,0 0 0 1px rgba(10, 13, 18, 0.18) inset, 0 -2px 0 0 rgba(10, 13, 18, 0.05) inset, 0 1px 2px 0 rgba(10, 13, 18, 0.05);
	outline: none !important;
	background: var(--button-secondary-bg);
	transition: var(--base-transition);
	border-radius: var(--radius-md);
}

.wpml-lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color:var(--body-color);
    text-decoration: none;
    transition: background 0.2s ease;
}
.wpml-lang-item .flag {
	display: flex;
}

.wpml-custom-switcher.active  .arrow img{
	transform:rotate(180deg);
}

@media(max-width:575px){
.wpml-custom-switcher,
	.wpml-lang-list{
	padding-top: 6px;
	padding-right: 8px;
	padding-bottom: 6px;
	padding-left: 8px;
}
.wpml-active-lang .flag img,
.wpml-lang-item .flag img {
	width: 20px;
	height: 20px;
}
	.wpml-active-lang {
	gap: 4px;
}
}

.brxe-text a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: var(--base-transition);
}

.brxe-text a:hover {
    color: var(--brand--900);
}