/*
 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
*/
/* text fonts classes */
.heading--100 {
  font-size: var(--fs-100);
}

.heading--200 {
  font-size: var(--fs-200);
}

.heading--300 {
  font-size: var(--fs-300);
}

.heading--400 {
  font-size: var(--fs-400);
}

.heading--500 {
  font-size: var(--fs-500);
}

.heading--600 {
  font-size: var(--fs-600);
}

.heading--700 {
  font-size: var(--fs-700);
}

.heading--800 {
  font-size: var(--fs-800);
}

.heading--900 {
  font-size: var(--fs-900);
}

/* Text transform */
.heading--upper {
  text-transform: var(--upper);
}

.heading--cap {
  text-transform: var(--cap);
}

.heading--lower {
  text-transform: var(--lower);
}


/* background colors classes */
.bg-primary-100 {
  background-color: var(--bg-primary-100);
}

.bg-primary-200 {
  background-color: var(--bg-primary-200);
}

.bg-primary-300 {
  background-color: var(--bg-primary-300);
}

.bg-primary-400 {
  background-color: var(--bg-primary-400);
}

.bg-primary-500 {
  background-color: var(--bg-primary-500);
}

.bg-primary-600 {
  background-color: var(--bg-primary-600);
}

.bg-primary-700 {
  background-color: var(--bg-primary-700);
}

.bg-primary-800 {
  background-color: var(--bg-primary-800);
}

/* padding classes */
/* gap classes */
.gap-4xs {
  gap: var(--space-4xs);
}

.gap-3xs {
  gap: var(--space-3xs);
}

.gap-2xs {
  gap: var(--space-2xs);
}

.gap-xs {
  gap: var(--space-xs);
}

.gap-sm {
  gap: var(--space-sm);
}

.gap-m {
  gap: var(--space-m);
}

.gap-l {
  gap: var(--space-l);
}

.gap-xl {
  gap: var(--space-xl);
}

.gap-2xl {
  gap: var(--space-2xl);
}

.gap-3xl {
  gap: var(--space-3xl);
}

.gap-4xl {
  gap: var(--space-4xl);
}

/* column gap classes */
/* ------------------------------- */
/* --------Roots variables-------- */
/* ------------------------------- */
:root {
  /* Fonts variables */
  --fs-100: clamp(0.75rem, 0.48vw + 0.51rem, 0.95rem);
  --fs-200: clamp(0.8rem, 0.58vw + 0.55rem, 1.1rem);
  --fs-300: clamp(0.85rem, 0.71vw + 0.63rem, 1.25rem);
  --fs-400: clamp(1.2rem, 1.05vw + 0.77rem, 1.55rem);
  --fs-500: clamp(1.3rem, 1.52vw + 0.95rem, 2.3rem);
  --fs-600: clamp(1.4rem, 1.72vw + 1.05rem, 2.7rem);
  --fs-700: clamp(1.65rem, 2.19vw + 1.16rem, 3.1rem);
  --fs-800: clamp(2.1rem, 3.13vw + 1.41rem, 4.15rem);
  --fs-900: clamp(2.7rem, 4.45vw + 1.71rem, 5.6rem);
  /* Colors variables */
  --primary-100: #ffffff;
  --primary-200: #f3f3f3;
  --primary-300: #4db3ff;
  --primary-400: #3885bc;
  --primary-500: #50d3d7;
  --primary-600: #39419d;
  --primary-700: #7a5c00;
  --primary-800: #0f172b;
  /* Background Colors variables */
  --bg-primary-100: #ffffff;
  --bg-primary-200: #f3f3f3;
  --bg-primary-300: #4db3ff;
  --bg-primary-400: #3885bc;
  --bg-primary-500: #50d3d7;
  --bg-primary-600: #39419d;
  --bg-primary-700: #7a5c00;
  --bg-primary-800: #0f172b;
  /* spaces variables*/
  --space-4xs: clamp(0.33rem, 0.04vw + 0.32rem, 0.35rem);
  --space-3xs: clamp(0.41rem, 0.13vw + 0.38rem, 0.5rem);
  --space-2xs: clamp(0.51rem, 0.28vw + 0.46rem, 0.71rem);
  --space-xs: clamp(0.64rem, 0.51vw + 0.54rem, 1rem);
  --space-sm: clamp(0.8rem, 0.88vw + 0.62rem, 1.41rem);
  --space-m: clamp(1rem, 1.43vw + 0.71rem, 2rem);
  --space-l: clamp(1.25rem, 2.25vw + 0.8rem, 2.83rem);
  --space-xl: clamp(1.56rem, 3.48vw + 0.87rem, 4rem);
  --space-2xl: clamp(1.95rem, 5.29vw + 0.9rem, 5.65rem);
  --space-3xl: clamp(2.44rem, 7.93vw + 0.85rem, 8rem);
  --space-4xl: clamp(3.05rem, 11.79vw + 0.69rem, 11.3rem);
  /* Heights (dvh) variables */
  --min-h-50: 50svh;
  --min-h-60: 60svh;
  --min-h-70: 70svh;
  --min-h-80: 80svh;
  --min-h-90: 90svh;
  --min-h-100: 100svh;
  /* Text transform */
  --upper: uppercase;
  --cap: capitalize;
  --lower: lowercase;
}

/* Heights (svh) classes */
.min-height-50 {
  min-height: var(--min-h-50);
}

.min-height-60 {
  min-height: var(--min-h-60);
}

.min-height-70 {
  min-height: var(--min-h-70);
}

.min-height-80 {
  min-height: var(--min-h-80);
}

.min-height-90 {
  min-height: var(--min-h-90);
}

.min-height-100 {
  min-height: var(--min-h-100);
}

/* ------------------------------- */
/* ------------Resets------------- */
/* ------------------------------- */
/* Reset */

html {
  color-scheme: dark light;
  hanging-punctuation: first last;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

input,
textarea {
  min-width: 0;
}

body {
  min-height: var(--min-h-100);
  font-size: var(--fs-400);
  font-family: inherit;
  line-height: 1.5;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

@media (width > 767px) {
  h1,
  h2,
  h3 {
    text-wrap: balance;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  line-height: 1.2;
}

p,
li {
  text-wrap: pretty;
}

h1 span,
h2 span,
h3 span,
h4 span {
    --color: var(--primary-700);
    color: var(--color);
}


.stacked > * {
  grid-column: 1/-1;
  grid-row: 1/-1;
}

.wrapper {
  max-width: min(100% - 2.5rem, var(--max-width, 77.5em)); /* 1240px */
  margin-inline: auto;
}

.wrapper--med {
  --max-width: 60em; /* 960px */
}

.wrapper--min {
  --max-width: 45em; /* 720px */
}

/* ------------------------------- */
/* --------Utility Classes-------- */
/* ------------------------------- */
.flow > * + * {
  padding-block: 5rem;
}

/* .visually-hidden */
.visually-hidden:not(:focus):not(:active) {
  clip: rect(O O O O);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.list-none {
  list-style: none;
}

/* clickable parent */
.clickable_parent {
  position: relative;
}
.clickable_parent__heading a::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 1;
}

/* remove img from mouse detection */
.hidden-img {
  pointer-events: none;
  cursor: default;
  user-select: -moz-none;
  user-select: none;
}

.display-none {
  display: none;
}

.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

/* Alternative to wrapper */
.content-grid {
  --padding-inline: 3rem;
  --content-max-width: 0px;
  --breakout-max-width: 77.5em;

  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width)) / 2
  );

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

/*.content-grid > :not(.breakout, .full-width),*/
/*.full-width > :not(.breakout, .full-width) {*/
/*  grid-column: content;*/
/*}*/

/*.content-grid > .breakout {*/
/*  grid-column: breakout;*/
/*}*/

/*.content-grid > .full-width {*/
/*  grid-column: full-width;*/

/*  display: grid;*/
/*  grid-template-columns: inherit;*/
/*}*/

/*img.full-width {*/
/*  width: 100%;*/
/*  max-height: 45vh;*/
/*  object-fit: cover;*/
/*}*/


/*facilities classes*/

.list-items {
  display: grid;
  grid-gap: var(--space-xs);
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.list-item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-3xs);
  width: 100%;
  font-size: .8em;
  aspect-ratio: 1;
  background-color: var(--primary-200);
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  transition: all .3s ease-in-out;

}

.list-item:hover {
  background-color: var(--primary-100);
  scale: 1.05;
}


/*animations*/

.scale-animation > * {
  --animation-name: scale-anim;
  --animation-type: linear;
  --animation-timeline: view();
  --animation-range: entry 8% cover 20%;
  
  animation: var(--animation-name) var(--animation-type) both;
  animation-timeline: var(--animation-timeline);
  animation-range: var(--animation-range);  
}

@keyframes scale-anim {
  from {
    transform: scale(.5);
  }
  to {
    transform: scale(1);
  }
}