/****************
Wherever possible AT Framework variables and Classes are defined in the Bricks Class System.
This stylesheet is for any rules that we want to be always output, even if they are not added to a Bricks Elements.
****************/

/****************
BRICKS OVERRIDES 
****************/

/* fix P margins in Bricks Blocks */
.brxe-block>p {
  margin: 0;
}

.brxe-div>p {
  margin: 0;
}

/* ensure footer goes to bottom, even if there isn not enough content*/
body {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

/****************
ALTERNATE SECTION BACKGROUND

Add the classes to the page classes.
Apply to #brx-content > section elements
****************/

:where(.at-section--alt-odd #brx-content > section:nth-child(odd)) {
  background: var(--at-section--alt-background);
}

:where(.at-section--alt-even #brx-content > section:nth-child(even)) {
  background: var(--at-section--alt-background);
}

/****************
STICKY HEADERS

Set a variable for the Bricks Header height.
This may be useful for when the headers are sticky.

We recommend keeping the varuable dymamic with JavaScript
@see https://gist.github.com/wpeasy/66995b6b153edd8142dd4646df41cd19
Add this to your code manage and comment out below

Manually set the header height at different breakpoints.
Comment all of this out if you impliment the JavaScript linked above
****************/

@media(max-width: 477px) {
  body {
    --at-header-height: 150px;
    /* Mobile - Measure and set manually */
  }
}

@media(max-width: 766px) {
  body {
    --at-header-height: 150px;
    /* Mobile Landscape - Measure and set manually */
  }
}

@media(max-width: 990px) {
  body {
    --at-header-height: 150px;
    /* Tablet Portrait - Measure and set manually */
  }
}

@media(min-width: 991px) {
  body {
    --at-header-height: 150px;
    /* Desktop and Above - Measure and set manually */
  }
}

/***************
A11y 
****************/

/* focus offset styles */
body.bricks-is-frontend :focus-visible {
  outline-offset: var(--at-focus-outline-offset);
  z-index: 1;
}

/* reduced motion styles */
@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;
  }
}