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

body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

::-moz-selection { 
background: var(--at-primary);
color: var(--at-white);
}
::selection { 
background: var(--at-primary);
color: var(--at-white);
}

/* Stack divs */
.stack {
  display: grid;
  place-content: center;
  > * {
    grid-area: 1 / 1;
  }
}

sup {
  font-size: 0.5em;
  margin-bottom: 0.2em;
}

/* Active menu item */
a[aria-current="page"] {
  color: var(--at-primary-l-2);
}

/* Hover underline effect */
.hover-underline-animation {
  display: inline-block;
  position: relative;
}
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--at-primary-l-2);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.hover-underline-animation-light {
  display: inline-block;
  position: relative;
}
.hover-underline-animation-light::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--at-white);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation-light:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Typewriter effect */
span.typed {font-variation-settings: "wght" 700 !important;}

/* Hover image zoom */
.hover-image {
	position: relative;
	align-self: stretch;
	height: auto;
	flex-shrink: 0;
	object-fit: cover;
	max-width: 100%;
	overflow: hidden;
	transition: transform 0.3s ease-in-out;
}
.hover-image-wrapper { overflow: clip; }
.hover-image-wrapper:hover .hover-image {
	transform: scale(1.05);
}

/* Hover background image zoom */
.zoom-in::after,
.zoom-out::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  background-size: cover;
  transform-origin: center;
  transition: transform 0.4s ease-in-out;
}
.zoom-in:focus::after, .zoom-in:hover::after { transform: scale(1.05); }
.zoom-out::after { transform: scale(1.05); }
.zoom-out:focus::after, .zoom-out:hover::after { transform: scale(1); }

/* Colors */
.color-primary { color: var(--at-primary); }
.color-secondary { color: var(--at-secondary); }
.color-tertiary { color: var(--at-tertiary); }
.color-dark { color: var(--at-dark); }
.color-neutral { color: var(--at-neutral); }
.color-black { color: var(--at-black); }
.color-white { color: var(--at-white); }

/* Text */
.italic {font-style: italic;}
.serif {font-family: "Rowan", serif;}

/* Highlight text v1*/
.highlight {
  position: relative;
  display: inline-block;
  z-index: 1; 
}
.highlight::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130%; 
  height: 140%; 
  background-image: url('https://staging2.jobwriter.io/wp-content/uploads/circle1.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  pointer-events: none; 
}

/* Highlight text v2*/
.highlight-wrapper {
  position: relative;
  display: inline-block;
  white-space: nowrap; 
}
.highlight-text {
  position: relative;
  display: inline-block; 
}
.circle-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  overflow: visible; 
  pointer-events: none;
  z-index: 2; 
}

/* Blinking */
.blinking {
  -webkit-animation: 1s blink ease infinite;
  -moz-animation: 1s blink ease infinite;
  -ms-animation: 1s blink ease infinite;
  -o-animation: 1s blink ease infinite;
  animation: 1s blink ease infinite;
}
@keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-moz-keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-ms-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-o-keyframes "blink" {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* Gutenberg content styles */
h4.wp-block-heading {
  font-size: var(--at-heading--s);
  color: var(--at-primary-d-1);
  margin: 1.5em 0 1em 0;
}
h3.wp-block-heading {
  font-size: var(--at-heading--m);
  color: var(--at-primary-d-1);
  margin: 1.5em 0 1em 0;
}
h2.wp-block-heading {
  font-size: var(--at-heading--l);
  color: var(--at-primary-d-1);
  margin: 1.5em 0 1em 0;
}
ul.wp-block-list { margin-top: 0;}
.wp-block-list li { margin-bottom: 1em; }
strong {
  font-variation-settings: "wght" 600;
}