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

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

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

/* Siblings fade effect */
.sibling-fade { visibility: hidden; }
.sibling-fade > * { visibility: visible;  transition: opacity 150ms linear 100ms; }
.sibling-fade:hover > * { opacity: 0.4; }
.sibling-fade > *:hover { opacity: 1; transition-delay: 0ms, 0ms; }
.sibling-fade > *:hover .sibling-fade-heading { color: #E40428; }

/* Padding */
.at-padding-l {padding: var(--at-space--l)};
.at-padding-xl {padding: var(--at-space--xl)};

/* Utility Classes */
.at-shadow--s {box-shadow: var(--at-shadow--s);}
.at-shadow--m {box-shadow: var(--at-shadow--m);}
.at-shadow--l {box-shadow: var(--at-shadow--l);}
.at-shadow--xl {box-shadow: var(--at-shadow--xl);}
.at-shadow--2xl {box-shadow: var(--at-shadow--2xl);}

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

/* Border Radius */
.border-radius-3xl {border-radius: var(--at-radius--3xl);}
.border-radius-2xl {border-radius: var(--at-radius--2xl);}
.border-radius-l {border-radius: var(--at-radius--l);}
.border-radius-m {border-radius: var(--at-radius--m);}
.border-radius-s {border-radius: var(--at-radius--s);}
.border-radius-xs {border-radius: var(--at-radius--xs);}
.border-radius-2xs {border-radius: var(--at-radius--2xs);}

/* Text Size */
.text-xl {font-size: var(--at-text--xl);}
.text-l {font-size: var(--at-text--l);}
.text-m {font-size: var(--at-text--m);}
.text-s {font-size: var(--at-text--s);}

.ar-1 {aspect-ration: 1;}
.ar-2 {aspect-ration: 2;}

.capacity-section__block-list-wrapper > h4.capacity-section__block-list-title:first-of-type {
	margin-top: 0;
}

/* Gutenberg content styles */
h4.wp-block-heading {
  font-size: var(--at-heading--s);
  margin-bottom: 1em;
}
h3.wp-block-heading {
  font-size: var(--at-heading--m);
  margin-bottom: 1em;
}
h2.wp-block-heading {
  font-size: var(--at-heading--l);
  margin: 1em 0;
}
ul.wp-block-list { margin-top: 0;}