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

:root {

  --dark: hsl(0, 0%, 10%);
  --dark-light: color-mix(in oklch, var(--dark) 50%, transparent);
  --dark-ultra-light: color-mix(in oklch, var(--dark) 10%, transparent);

  --light: hsl(0, 0%, 100%);

  --cancel: hsla(350, 96%, 40%, 1);
  --cancel-light: color-mix(in oklch, var(--cancel) 50%, transparent);
  --cancel-ultra-light: color-mix(in oklch, var(--cancel) 10%, transparent);

  --bg-body: hsla(216, 56%, 98%, 1);
  --bg-surface: var(--light);
  --bg-hover: var(--primary-ultra-light);
  --shadow-primary: var(--dark-ultra-light);
  --bg-hover-cancel: var(--cancel-ultra-light);
  --border-cancel: var(--cancel);
  --color-body: var(--dark);
  --color-body-reverse: var(--light);
  --color-title: var(--primary);
  --color-title-reverse: var(--light);
  --color-link: var(--primary);

  --space-4xs: clamp(0.33rem, calc(-0.06vw + 0.35rem), 0.3rem);
  --space-3xs: clamp(0.41rem, calc(-0.03vw + 0.42rem), 0.4rem);
  --space-2xs: clamp(0.51rem, calc(0.03vw + 0.5rem), 0.53rem);
  --space-xs: clamp(0.64rem, calc(0.13vw + 0.6rem), 0.7rem);
  --space-s: clamp(0.8rem, calc(0.27vw + 0.72rem), 0.94rem);
  --space-m: clamp(1rem, calc(0.5vw + 0.85rem), 1.25rem);
  --space-l: clamp(1.25rem, calc(0.83vw + 1rem), 1.67rem);
  --space-xl: clamp(1.56rem, calc(1.31vw + 1.17rem), 2.22rem);
  --space-2xl: clamp(1.95rem, calc(2.01vw + 1.35rem), 2.96rem);
  --space-3xl: clamp(2.44rem, calc(3vw + 1.54rem), 3.95rem);
  --space-4xl: clamp(3.05rem, calc(4.41vw + 1.74rem), 5.26rem);

  --text-xs: clamp(0.77rem, calc(0.04vw + 0.76rem), 0.79rem);
  --text-s: clamp(0.82rem, calc(0.14vw + 0.78rem), 0.89rem);
  --text-m: clamp(0.88rem, calc(0.25vw + 0.8rem), 1rem);
  --text-l: clamp(0.93rem, calc(0.38vw + 0.82rem), 1.13rem);
  --text-xl: clamp(1rem, calc(0.54vw + 0.84rem), 1.27rem);
  --text-2xl: clamp(1.06rem, calc(0.72vw + 0.85rem), 1.42rem);
  --text-3xl: clamp(1.13rem, calc(0.93vw + 0.86rem), 1.6rem);
  --text-4xl: clamp(1.21rem, calc(1.18vw + 0.86rem), 1.8rem);

  --h1: var(--text-4xl);
  --h2: var(--text-3xl);
  --h3: var(--text-2xl);
  --h4: var(--text-xl);
  --h5: var(--text-l);
  --h6: var(--text-m);

  --line-height-xs: 1;
  --line-height-s: 1.1;
  --line-height-m: 1.2;
  --line-height-l: 1.3;
  --line-height-xl: 1.5;

  --text-width-xs: 40ch;
  --text-width-s: 50ch;
  --text-width-m: 65ch;
  --text-width-l: 75ch;
  --text-width-xl: 90ch;
  --text-width-2xl: 110ch;
  --text-width-3xl: 125ch;

  --section-padding-block: clamp(1rem, calc(-1vw + 1.8rem), 1.5rem);
  --section-padding-inline: clamp(1rem, calc(-1vw + 1.8rem), 1.5rem);
  --container-padding: clamp(1rem, calc(-1vw + 1.8rem), 1.5rem);
  --header-pad: clamp(0.5rem, calc(-1vw + 1.3rem), 1rem);
  --footer-pad: clamp(0.5rem, calc(-1vw + 1.3rem), 1rem);
  --container-gap: clamp(1rem, calc(-2vw + 2.6rem), 2rem);
  --grid-gap: clamp(1rem, calc(-2vw + 2.6rem), 2rem);

  --site-max-width: 100rem;

  --width-xs: calc(var(--site-max-width) * 0.2);
  --width-s: calc(var(--site-max-width) * 0.4);
  --width-m: calc(var(--site-max-width) * 0.6);
  --width-l: calc(var(--site-max-width) * 0.8);

  --width-header: clamp(14.06rem, calc(-3.12vw + 16.56rem), 15.63rem);

  @media (max-width: 767px) {
    --width-header: 20rem;
  }

  --icon-width: 1rem;
  --avatar-width: clamp(2rem, calc(-2vw + 3.6rem), 3rem);
  --footer-height: 4rem;
  --topbar-height: 4.5rem;

  --btn-pad-xs: var(--space-4xs);
  --btn-pad-s: var(--space-3xs);
  --btn-pad-m: var(--space-2xs);
  --btn-pad-l: var(--space-xs);
  --btn-pad-xl: var(--space-s);
  --btn-pad-2xl: var(--space-m);
  --btn-pad-3xl: var(--space-l);

  --columns-1: repeat(1, minmax(0, 1fr));
  --columns-2: repeat(2, minmax(0, 1fr));
  --columns-3: repeat(3, minmax(0, 1fr));
  --columns-4: repeat(4, minmax(0, 1fr));
  --columns-5: repeat(5, minmax(0, 1fr));
  --columns-6: repeat(6, minmax(0, 1fr));
  --columns-7: repeat(7, minmax(0, 1fr));
  --columns-8: repeat(8, minmax(0, 1fr));

  --global-grid: repeat(12, 1fr);
  --global-grid-mid: repeat(10, 1fr);

  --columns-fill-5: repeat(auto-fill, minmax(5rem, 1fr));
  --columns-fill-10: repeat(auto-fill, minmax(10rem, 1fr));
  --columns-fill-20: repeat(auto-fill, minmax(20rem, 1fr));
  --columns-fill-30: repeat(auto-fill, minmax(25rem, 1fr));
  --columns-fill-40: repeat(auto-fill, minmax(35rem, 1fr));
  --columns-fill-50: repeat(auto-fill, minmax(50rem, 1fr));
  --columns-fill-60: repeat(auto-fill, minmax(60rem, 1fr));
  --columns-fill-70: repeat(auto-fill, minmax(70rem, 1fr));

  --columns-fit-5: repeat(auto-fit, minmax(5rem, 1fr));
  --columns-fit-10: repeat(auto-fit, minmax(10rem, 1fr));
  --columns-fit-20: repeat(auto-fit, minmax(20rem, 1fr));
  --columns-fit-30: repeat(auto-fit, minmax(25rem, 1fr));
  --columns-fit-40: repeat(auto-fit, minmax(35rem, 1fr));
  --columns-fit-50: repeat(auto-fit, minmax(50rem, 1fr));
  --columns-fit-60: repeat(auto-fit, minmax(60rem, 1fr));
  --columns-fit-70: repeat(auto-fit, minmax(70rem, 1fr));

  --radius-global: clamp(0.25rem, calc(-0.5vw + 0.65rem), 0.5rem);
  --radius-full: 999rem;

  --shadow-global: 0px 0px 8px var(--shadow-primary);

  --border-width: 0.1rem;
  --border-style: solid;
  --border-color: var(--dark-ultra-light);
  --border-global: var(--border-width) var(--border-style) var(--border-color);
  --border-primary: var(--border-width) var(--border-style) var(--primary);

  --transition-bezier: cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-time-s: 0.1s;
  --transition-time-m: 0.3s;
  --transition-time-l: 0.5s;
  --transition-time-xl: 1s;
  --transition-global-all: all var(--transition-m) var(--transition-bezier);
  --transition-global: var(--transition-m) var(--transition-bezier);

  --focus-width: 2px;
  --focus-color: var(--primary);
  --focus-offset: var(--space-4xs);
  --focus-style: solid;
  --focus-outline: var(--focus-width) var(--focus-style) var(--focus-color);

}

@layer {

  body {
    block-size: 100vh;
    block-size: 100svh;
    block-size: 100dvh;

    background-color: var(--bg-body);
    color: var(--color-body);
    font-size: var(--text-m);
    font-family: 'Helvetica';
    line-height: var(--line-height-xl);
    text-wrap: pretty;

    & :is(p, ul, ol) {
      margin: unset;
    }

    & :is(ul, ol) {
      padding-inline-start: var(--space-m);
    }

    :focus {
      outline-color: transparent;
    }

    :focus-visible {
      outline: var(--focus-outline);
      outline-offset: var(--focus-offset);
    }
  }

  :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    font-weight: 700;
    color: var(--color-title);
    text-wrap: balance;
    line-height: var(--line-height-m);
  }

  :is(h1, .h1) {
    font-size: var(--h1);
  }

  :is(h2, .h2) {
    font-size: var(--h2);
  }

  :is(h3, .h3) {
    font-size: var(--h3);
  }

  :is(h4, .h4) {
    font-size: var(--h4);
  }

  :is(h5, .h5) {
    font-size: var(--h5);
  }

  :is(h6, .h6) {
    font-size: var(--h6);
  }

  main {
    display: flex;
    flex-direction: column;
    block-size: calc(100% - var(--footer-height));
    overflow-y: clip;
  }

  .brxe-section {
    display: flex;
    flex-direction: column;
    padding-block: var(--section-padding-block);
    padding-inline: var(--section-padding-inline);
    align-items: center;
  }

  .brxe-container {
    inline-size: 100%;
    gap: var(--container-gap);
    flex-wrap: nowrap;
  }

  ul:is(.brxe-container, .brxe-div) {
    padding-inline-start: 0;
    margin-block: 0;
  }

  a {
    color: var(--color-link);
  }

  a:not(.btn, .brxe-text-link, .page-numbers, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a),
  .link {
    text-decoration: underline;
    color: var(--color-link);
  }

  [target="_blank"] {
    &::after {
      content: '2197';
      z-index: 1;
      transition: var(--transition-global-all);
      color: currentColor;
    }

    &:is(:hover, :focus-visible)::after {
      transform: rotate(45deg);
    }
  }
}

.brxe-text {
  * {
    margin: unset;
    inline-size: 100%;
  }

  *+* {
    margin-block-start: 1em;
  }

  *+ :is(.wp-block-image, .wp-block-embed) {
    margin-block-start: 1.5em;
    margin-block-end: 0.5em;
  }

  *+ :is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 2em;
  }
}

.btn,
.wp-block-button__link,
.bricks-button,
.comment-reply-link,
#cancel-comment-reply-link {
  background-color: transparent;
  border: var(--border-primary);
  border-radius: var(--radius-full);
  color: var(--primary);
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--btn-pad-l) var(--btn-pad-2xl);
  text-decoration: none;

  &:is(:hover, :focus-visible) {
    background-color: var(--bg-hover);
  }
}

.comment-reply-link {
  font-size: var(--text-xs);
  padding: var(--btn-pad-m) var(--btn-pad-xl);
  font-weight: 400;
  text-transform: capitalize;
}

#cancel-comment-reply-link {
  font-size: var(--text-xs);
  padding: var(--btn-pad-m) var(--btn-pad-xl);
  color: var(--cancel);
  border-color: var(--border-cancel);

  &:is(:hover, :focus-visible) {
    background-color: var(--bg-hover-cancel);
  }
}

.comment-reply-title {
  font-size: var(--h4);
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.grecaptcha-badge {
  visibility: hidden !important;
}

.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}


@media (prefers-reduced-motion: reduce) {

  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* allow for transitions that fade in staring with low opacity */
  [class*=fade-],
  [class*=-fade] {
    opacity: 1 !important;
  }
}