/*
 Theme Name:   Wise Education
 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
*/

@layer {
	/* Link style */
	body a:where(:not([class*= btn--])) {
		color: var(--link-color, var(--clr-primary));
		font-weight: var(--link-weight, inherit);
		-webkit-text-decoration: var(--link-decoration, inherit);
		text-decoration: var(--link-decoration, inherit);
		text-underline-offset: var(--link-underline-offset, 0.25em);
		transition: var(--link-transition, var(--transition));
	}

	/* 	body.bricks-is-frontend :focus-visible {
	box-shadow: 0 0 0 var(--focus-width, .1rem) var(--focus-color);
} */

	/* Hover style */
	@media (hover: hover) and (pointer: fine) {
		body a:where(:not([class*= button])):hover {
			color: var(--link-color-hover, var(--clr-primary-hover));
			-webkit-text-decoration: var(--link-decoration-hover, underline);
			text-decoration: var(--link-decoration-hover, underline);
			text-decoration-thickness: var(--link-underline-thickness, 1.5px);
		}
	}
}

/* Foucus style */
body.bricks-is-frontend.bricks-is-frontend :focus-visible {
	outline-style: solid;
	outline-color: var(--focus-color);
	outline-width: var(--focus-width);
	outline-offset: var(--focus-offset);
/* 	background-color: var(--focus-color); */
/* 	color: var(--text-dark); */
}

/* Reset figure margin */
figure {
	margin: 0;
}

/* Primary button hover */
:root .bricks-button[class*="primary"]:not(.outline):hover {
	background-color: var(--clr-white);
	color: var(--clr-primary);
	border-color: var(--clr-primary);

	& svg {
		fill: var(--clr-primary);
	}
}

/* Primary button outline hover */
:root .bricks-button[class*="primary"].outline:hover {
	background-color: var(--clr-primary);
	color: var(--text-light);
}

/* Secondary button */
:root .bricks-button[class*="secondary"]:not(.outline):hover {
	background-color: var(--clr-white);
	color: var(--clr-accent);
	border-color: var(--clr-accent);
	
	& svg {
		fill: var(--clr-accent);
	}
}

/* Dark button hover */
/* :root .bricks-button[class*="dark"]:not(.outline):hover {
	background-color: var(--clr-black-trans-80);
	color: var(--text-light);
} */

/* Dark button outline hover */
/* :root .bricks-button[class*="dark"].outline:hover {
	background-color: var(--clr-black);
	color: var(--text-light);
}
 */
/* Light button hover */
:root .bricks-button[class*="light"]:not(.outline):not(.bricks-lightbox):hover {
    background-color: var(--clr-primary);
	color: var(--text-light);
	border-color: var(--clr-white);
}

/* Light button outline hover */
:root .bricks-button[class*="light"].outline:hover {
	background-color: var(--clr-white);
	color: var(--text-dark);
}

/* Hidden accessible */
.hidden-accessible {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: rect(0, 0, 0, 0);
  white-space: nowrap;
  /* added line */
  border: 0;
}

.bricks-area .hidden-accessible {
  position: relative !important;
  inline-size: 2ch !important;
  block-size: 2ch !important;
  margin: 0;
  line-height: 1;
  visibility: hidden;
}
.bricks-area .hidden-accessible::before {
  content: "A";
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  background: #111;
  color: #f5f5f5;
  font-size: max(60%, 13px);
  padding: 0.5em;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 20px;
  block-size: 20px;
  visibility: visible;
  border-radius: 50%;
}

/* Global light box */
.pswp.brx .pswp__img {
  background-color: var(--bg-light);
}

.pswp__thumbnail-nav > * {
  background-color: var(--bg-light);
}

/* Fix sticky not working when enable click on expand */
body:has(.wp-lightbox-overlay) #brx-content {
    overflow: initial;
}

/* Form captcha */
.form-group.captcha {
	margin-block-end: 1em;
}

.wsf-field iframe {
	min-width: 100%!important;
	width: 100%!important;
}

/** Ws Form **/
.wsf-form .wsf-field-wrapper:last-child {
	margin-bottom: 0;
}

/* Avoid FUC on frontend*/
.bricks-is-frontend .animation-trigger{
  opacity:0;
}
 
/* Animated Class*/
.animate{
  animation-name: fadeAnimation;
  animation-delay: calc(var(--delay, 0) * 800ms);
  animation-duration: var(--duration, 800ms);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
 
/* Change translate Origin*/
.animation--left-to-right{
  --translate: -30px,0,0;
}
.animation--right-to-left{
  --translate: 30px,0,0;
}
.animation--top-to-bottom{
  --translate: 0,-30px,0;
}
.animation--bottom-to-top{
  --translate: 0,30px,0;
}
 
/* Keyframes */
@keyframes fadeAnimation{
  from{
    transform: translate3d(var(--translate));
  }
  to{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}