/*
 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
*/

@layer {
	/* Color system with color-mix way, fallback */
	:root {
		--clr-primary: hsla(213, 30%, 26%, 1);
		--clr-primary-hover: color-mix(in oklab,var(--clr-primary) 80%, white);

		--clr-primary-semi-light: color-mix(in oklab,var(--clr-primary) 60%, white);
		--clr-primary-light: color-mix(in oklab,var(--clr-primary) 40%, white);
		--clr-primary-ultra-light: color-mix(in oklab,var(--clr-primary) 20%, white);

		--clr-primary-semi-dark: color-mix(in oklab,var(--clr-primary) 80%, black);
		--clr-primary-dark: color-mix(in oklab,var(--clr-primary) 60%, black);
		--clr-primary-ultra-dark: color-mix(in oklab,var(--clr-primary) 40%, black);

		--clr-secondary: hsla(200, 24%, 45%, 1);
		--clr-secondary-hover: color-mix(in oklab,var(--clr-secondary) 80%, white);

		--clr-secondary-semi-light: color-mix(in oklab,var(--clr-secondary) 60%, white);
		--clr-secondary-light: color-mix(in oklab,var(--clr-secondary) 40%, white);
		--clr-secondary-ultra-light: color-mix(in oklab,var(--clr-secondary) 20%, white);

		--clr-secondary-semi-dark: color-mix(in oklab,var(--clr-secondary) 80%, black);
		--clr-secondary-dark: color-mix(in oklab,var(--clr-secondary) 60%, black);
		--clr-secondary-ultra-dark: color-mix(in oklab,var(--clr-secondary) 40%, black);
		
		--clr-tertiary: hsla(200, 24%, 45%, 1);
		--clr-tertiary-hover: color-mix(in oklab,var(--clr-tertiary) 80%, white);

		--clr-tertiary-semi-light: color-mix(in oklab,var(--clr-tertiary) 60%, white);
		--clr-tertiary-light: color-mix(in oklab,var(--clr-tertiary) 40%, white);
		--clr-tertiary-ultra-light: color-mix(in oklab,var(--clr-tertiary) 20%, white);

		--clr-tertiary-semi-dark: color-mix(in oklab,var(--clr-tertiary) 80%, black);
		--clr-tertiary-dark: color-mix(in oklab,var(--clr-tertiary) 60%, black);
		--clr-tertiary-ultra-dark: color-mix(in oklab,var(--clr-tertiary) 40%, black);
		
		--clr-accent: hsla(27, 28%, 50%, 1);
		--clr-accent-hover: color-mix(in oklab,var(--clr-accent) 80%, white);

		--clr-accent-semi-light: color-mix(in oklab,var(--clr-accent) 60%, white);
		--clr-accent-light: color-mix(in oklab,var(--clr-accent) 40%, white);
		--clr-accent-ultra-light: color-mix(in oklab,var(--clr-accent) 20%, white);

		--clr-accent-semi-dark: color-mix(in oklab,var(--clr-accent) 80%, black);
		--clr-accent-dark: color-mix(in oklab,var(--clr-accent) 60%, black);
		--clr-accent-ultra-dark: color-mix(in oklab,var(--clr-accent) 40%, black);

		--clr-neutral: hsla(225, 61%, 10%, 1);
		--clr-neutral-hover: color-mix(in oklab,var(--clr-neutral) 80%, white);

		--clr-neutral-semi-light: color-mix(in oklab,var(--clr-neutral) 60%, white);
		--clr-neutral-light: color-mix(in oklab,var(--clr-neutral) 40%, white);
		--clr-neutral-ultra-light: color-mix(in oklab,var(--clr-neutral) 20%, white);

		--clr-neutral-semi-dark: color-mix(in oklab,var(--clr-neutral) 80%, black);
		--clr-neutral-dark: color-mix(in oklab,var(--clr-neutral) 60%, black);
		--clr-neutral-ultra-dark: color-mix(in oklab,var(--clr-neutral) 40%, black);
		
		--bg-light: hsla(206, 67%, 99%, 1);
	}
}

@layer {
	/* Link style */
	body a:where(:not([class*="btn--"]):not([class*="button"])) {
		color: var(--link-color, var(--clr-secondary));
		font-weight: var(--link-weight, inherit);
		-webkit-text-decoration: var(--link-decoration, inherit);
		text-decoration: var(--link-decoration, inherit);
 		text-decoration-thickness: var(--link-underline-thickness, 1.5px);
		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-secondary-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);
		}
	}
	
	/* Default section space */
	.brxe-section {
		padding-block: var(--section-space-s);
		padding-inline: var(--gutter);
		gap: var(--container-gap);
	}

}

/* 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;
}

/* Scroll offset */
html {
	scroll-padding-top: 144px;
	scroll-behavior: smooth;
}

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

	&:hover {
		background-color: var(--clr-white);
		border-color: var(--clr-accent);
		color: var(--clr-accent);
	}	
}

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

/* 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-ultra-light);
}

.pswp__thumbnail-nav > * {
  background-color: var(--bg-ultra-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;
}

/* .wsf-form button.wsf-button.wsf-button-primary {
	box-shadow: 8px 8px 10px 0px hsla(0, 0%, 0%, 0.25);
} */

/* Feat: Is Background */
:has(> .is-bg) {
  position: relative;
  isolation: isolate;
}
:is(*, img, figure, picture).is-bg {
  position: var(--bg-position, absolute) !important;
  inset: var(--bg-inset, 0);
  inline-size: var(--bg-width, 100%);
  max-inline-size: 100%;
  block-size: var(--bg-height, 100%);
  border-radius: var(--bg-radius, 0);
  object-fit: var(--bg-object-fit, cover);
  object-position: var(--bg-object-position, center);
  z-index: var(--bg-z-index, -2);
  border-radius: var(--bg-radius, 0);
  pointer-events: none;
}
:is(*, img, figure, picture).is-bg > img {
  object-fit: var(--bg-object-fit, cover);
  object-position: var(--bg-object-position, center);
}
.content-grid > :is(*, img, figure, picture).is-bg {
  grid-column: full;
}
/* Feat: Content Grid */
:where(.content-grid) {
  --full: minmax(var(--gutter), 1fr);
  padding-inline: 0;
  column-gap: 0 !important;
  display: grid !important;
  grid-template-columns: [full-start] var(--full) [feature-max-start] minmax(0, var(--feature-max-width, 100px)) [feature-start] minmax(0, var(--feature-width, 50px)) [content-start] min(var(--content-width), 100% - var(--gutter) * 2) [content-end] minmax(0, var(--feature-width, 50px)) [feature-end] minmax(0, var(--feature-max-width, 100px)) [feature-max-end] var(--full) [full-end];
}
:where(.content-grid) > :not(.content--feature, .content--feature-max, .content--full, .content--full-safe) {
  width: 100%;
  max-width: 100%;
}
:where(.content-grid) > :where(:not(.content--feature, .content--feature-max, .content--full, .content--full-safe)) {
  grid-column: content;
}
.content--feature {
  grid-column: feature;
}
.content--feature-max {
  grid-column: feature-max;
}
.content--full {
  grid-column: full;
}
.content--full-safe {
  grid-column: full;
  padding-inline: var(--gutter);
}
.content-grid:where(.content--full-safe) {
  padding-inline: var(--gutter);
}
:is(.content--feature, .content--feature-max, .content--full, .content--full-safe):not(.content-grid--off :is(.content--feature, .content--feature-max, .content--full, .content--full-safe)) {
  width: 100% !important;
  max-width: 100%;
}
:is(.content--feature, .content--feature-max, .content--full, .content--full-safe) :is(figure img, picture img) {
  width: 100%;
}

/* 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);
  }
}