/*
 Theme Name:   RiderWorks
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Doug Rider
 Author URI:   https://riderworks.com
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/*****************************

  00* - FONTS
  01* - HTML & CSS DEFAULTS
  02* - ACCESSIBILITY SETTINGS
  03* - OTHER UTILITY SETTINGS
  04* - STRUCTURE & LANDMARKS
  
  05* - BODY & HTML
  06* - HEADER SETTINGS
  07* - FOOTER SETTINGS
  08* - OTHER INFO SETTINGS
  09* - HEADING SETTINGS

  10* - INFO BOX CLASSES
  11* - ABOUT, CONTRIBUTORS, CONTACT
  12* - CONTRIBUTOR SINGLE
  13* - STORE
  14* - HOME

  15* - PRODUCT SINGLE
  16* - WOOCOMMERCE CART
  17* - WOOCOMMERCE MINI CART
  18* - WOOCOMMERCE CHECKOUT
  19* - WOOCOMMERCE MY ACCOUNT

  20* - IMAGES
  21* - BUTTONS
  22* - WS FORMS
  23* - SITEMAP
  24* - POLICIES

*****************************/


/** 
 * 00* - Fonts
 *
 */

 @font-face{
  font-display: swap;
	font-family: 'ReadExpro';
  font-style: normal;
  font-weight: 160 700;
  font-variation-settings: "wght" var(--font-weight--body), "HEXP" 0;
	src:url('/wp-content/uploads/fonts/Readexpro-VF_HEXP,wght.woff2') format('woff2-variations');
}

@font-face {
  font-display: swap;
  font-family: 'Roraima';
  font-style: normal;
  font-weight: 100 900;
  font-variation-settings: "wght" var(--font-weight--heading);
  src: url('/wp-content/uploads/fonts/Roraima-EP-VF_wght.woff2') format('woff2-variations');
}


/** 
 * 01* - Default HTML CSS RESET
 * @link https://www.joshwcomeau.com/css/custom-css-reset/
 */

/*  https://piccalil.li/blog/a-more-modern-css-reset/  */
/*  Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
  block-size: 100%;

  color-scheme: light dark;
  
  background-color: var(--primary-light--2);
  accent-color: var(--primary--base); /*  Form checkbox and radio buttons  */

  @media (prefers-color-scheme: dark) {
    background-color: var(--primary-dark--2);
    accent-color: var(--primary--base);
  }
}

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

/*  Override Bricks default border color  */
* {
  margin: 0;
  padding: 0;
  
  border-color: var(--bg-light--3);

  @media (prefers-color-scheme: dark) {
    border-color: var(--bg-dark--3);
  }
}

/*  Remove default margin in favour of better control in authored CSS  */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/*  Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'], ol[role='list'] {
  list-style: none;
}

p {
  hanging-punctuation: first last; /*  Safari Only  */
  text-wrap: pretty;
}

:where(select, textarea, input, button) {
  font: inherit;
}

:is(h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
  text-wrap: balance;
}

:is(img, picture, figure, video, svg, canvas, audio, iframe, embed, object) {
  display: block;
  max-inline-size: 100%;
}
:is(img, video) {
  block-size: auto;
}

/** 
 * CSS Tips - Practical img Element Defaults 
 * @link https://www.youtube.com/watch?v=mA-FxOYlpCs 
 */
img {
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}


/*****************************
 *
 * 02* - Accessibility Settings 
 * @link https://gist.github.com/zackpyle/64f9dd05f096265e07570605dc54f695
 */

/* @media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-delay: 0.01ms !important;
            animation-delay: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    translate: 0 0 !important;
    -webkit-transition-delay: 0.01ms !important;
            transition-delay: 0.01ms !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
  }
} */
@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth; 
    scroll-padding-top: var(--space-block--m);
  }
}

/*  Reduce IMG Brightness on Dark Themes  */
@media (prefers-color-scheme: dark) {
  img, svg {
    filter: brightness(85%);
  }
  .irw-logo svg {
    filter: brightness(100%);
  }
}

/*  Skip Links styling - No Dark Mode  */
.skip-link {
  padding-block: 0.5em;;
  padding-inline: 1.5em;
  font-variation-settings: "wght" var(--font-weight--bold);
  
  background-color: var(--bg-dark--5);
  color: var(--body-light--1);
}
.admin-bar .skip-link {
  margin-block-start: 32px;
}


/*****************************
 *
 * 03* - Other Utility Settings
 * @link https://gist.github.com/zackpyle/64f9dd05f096265e07570605dc54f695
 */

#wpadminbar {
  background-color: var(--primary-dark--2);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
#wpadminbar .menupop .ab-sub-wrapper,
#wpadminbar .shortlink-input {
  background-color: var(--primary-dark--1);
}
#wpadminbar .ab-top-menu > li.hover > .ab-item,
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus {
  background-color: var(--primary-dark--3);
}
#wpadminbar #wp-toolbar .apspider_highlighted a,
#wpadminbar .quicklinks .menupop ul li a,
#wpadminbar input.apspider_search {
  color: var(--bg-light--2) !important;
}
#wpadminbar #wp-admin-bar-site-name > .ab-item:before {
  display: none;
}
li#wp-admin-bar-wlcms-admin-logo img {
  max-inline-size: 30px;
}

/*  Strikethrough Styling  */
s::before, s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  block-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  inline-size: 1px;
}
s::before {
  content: " [start of stricken text] ";
}
s::after {
  content: " [end of stricken text] ";
}

/*  Selection Styling & Marker  */
::selection, ::-moz-selection {
  text-shadow: none;

  background-color: var(--primary--dark);
  -webkit-text-fill-color: var(--body-light--1);
  color: var(--body-light--1);

  @media (prefers-color-scheme: dark) {
    background-color: var(--primary--light);
    -webkit-text-fill-color: var(--body-dark--1);
    color: var(--body-dark--1);
  }
}
::marker {
  color: var(--primary--dark);

  @media (prefers-color-scheme: dark) {
    color: var(--primary--light);
  }
}

/*  Focus Styling  */
body.bricks-is-frontend :focus {
  outline: none;
  box-shadow: none;
}
body.bricks-is-frontend :focus-visible,
body.bricks-is-frontend a:focus-visible {
  outline-style: solid;
  outline-width: var(--focus--width);
  outline-offset: var(--focus--offset);
  border-radius: var(--border-radius--xs);

  outline-color: var(--primary--dark);
  transition: all var(--transition--s);

  @media (prefers-color-scheme: dark) {
    outline-color: var(--primary--light);
  }
}

/*  Placeholder color in Forms  */
input::placeholder {
  color: hsla(var(--hsl-body-dark--1) / 0.75);
}


/*****************************
 *
 * 04* - Structure & Landmark Settings
 */

/*  Inline Padding for Sections and Container widths  */
.brxe-section {
  padding-inline: var(--space-inline);
  
  background-color: var(--bg-light--3);
  
  @media (prefers-color-scheme: dark) {
    background-color: var(--bg-dark--3);
  }
}
.brxe-section:not(.irw-section-relative) {
  padding-block: var(--space-block--m);
}
.brxe-section:has(.brxe-container) {
  row-gap: var(--space-container--m);
}

/*  Inline Width for Containers Overrides  */
.brxe-container {
  display: grid;
  inline-size: 100%;
  max-inline-size: var(--width--container);
  align-items: stretch;
  grid-template-columns: repeat(1,minmax(0,1fr));
  grid-template-rows: repeat(1,minmax(0,1fr)) auto; 

  @media (min-width: 896px) {
    grid-template-columns: repeat(2,minmax(0,1fr)); 
    grid-template-rows: repeat(1,minmax(0,1fr)); 
  }

  & .irw-content-wrapper {
    gap: var(--space-content--2xl);
    padding: var(--space-card--2xl);
    order: 1;

    background-color: var(--bg-light--1);
    
    @media (prefers-color-scheme: dark) {
      background-color: var(--bg-dark--1);
    }

    @media (max-width: 895px) {
      order: 0;
    }
  }

  & .irw-media-wrapper {
    position: relative;

    & img {
      block-size: 100%;

      @media (max-width: 895px) {
        position: static;
        object-position: 50% 0%;
        aspect-ratio: 1.5;
      }
    }
  }
}

.brxe-container.irw-width-ch {
  max-inline-size: var(--width--ch);
}
.brxe-container.irw-width-3xs {
  max-inline-size: var(--width--3xs);
}
.brxe-container.irw-width-2xs {
  max-inline-size: var(--width--2xs);
}
.brxe-container.irw-width-xs {
  max-inline-size: var(--width--xs);
}
.brxe-container.irw-width-s {
  max-inline-size: var(--width--s);
}
.brxe-container.irw-width-l {
  max-inline-size: var(--width--l);
}


/*****************************
 *
 * 05* - Body styling 
 */

body {
  font-family: var(--font-family--body);
  font-size: var(--font-size-body--m);
  font-variation-settings: "wght" var(--font-weight--body);
  font-style: normal;
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing--body);
  word-spacing: var(--word-spacing--body);

  min-block-size: 100dvh;
  text-overflow: ellipsis;
  overflow-x: hidden;

  background-color: var(--bg-light--2);
  color: var(--body-dark--2);

  @media (prefers-color-scheme: dark) {
    background-color: var(--bg-dark--2);
    color: var(--body-light--2);
  }
  
  @media print {
    font-size: 8pt;
  }
}


/*****************************
 *
 * 06* - Header Styling
 */

#brx-header .irw-header {
  position: fixed;
  inset: 0;
  inset-block-end: calc(100vh - 120px);
  z-index: 2;

  border-block-end: var(--border--s);

  border-block-end-color: var(--primary-light--3);

  @media (prefers-color-scheme: dark) {
    border-block-end-color: var(--primary-dark--3);
  }
}

#brx-header .brxe-section {
  --_opc--shadow: 0.5;
  --_opc--bg: 0.95;
  
  min-block-size: 80px;
  padding-block: 0;
  justify-content: center;

  background-color: var(--primary-light--2);

  @media (prefers-color-scheme: dark) {
    background-color: var(--primary-dark--2);
  }

  &.irw-navigation {
    border-block-end: var(--border--s);

    border-color: var(--primary-base--20);
    box-shadow: 0 8px 24px -4px hsl(from var(--primary-light--4) h s l / var(--_opc--shadow));
    background-color: hsl(from var(--primary-light--2) h s l / var(--_opc--bg));
  
    @media (prefers-color-scheme: dark) {
      border-color: var(--primary-base--10);
      box-shadow: 0 8px 24px -4px hsl(from var(--primary-dark--4) h s l / var(--_opc--shadow));
      background-color: hsl(from var(--primary-dark--3) h s l / var(--_opc--bg));
    }

    & .brxa-inner {
      --_clr: var(--primary-dark--1);

      background-color: var(--_clr);

      @media (prefers-color-scheme: dark) {
        --_clr: var(--primary-light--5);

        background-color: var(--_clr);
      }

      &:after,
      &:before {
        background-color: var(--_clr);
      }
    }
  }
}

#brx-header .brxe-container {
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
  justify-content: space-between;
  column-gap: var(--space-content--s);

  @media (min-width: 768px) {
    flex-direction: row;
  }
}

/*  Header Logos  */
#brx-header .irw-logo {
  max-inline-size: 100%;
  inline-size: 175px;

  & svg path {
    fill: #379AA3;

    @media (prefers-color-scheme: dark) {
      fill: #41B5BF;
    }

  }
}

/*  Header Navigation  */
#brx-header nav {
  block-size: 100%;
  max-inline-size: 100%;
  column-gap: var(--space-content--l);

  @media (min-width: 768px) {
    column-gap: 0;
  }
}
#brx-header ul:not(.cart_list) {
  --_padding: 0.75em;
  --_off--add: 2px;
  --_off--minus: calc(var(--_off--add) * -1);

  inline-size: 100%;
  gap: 0;
  flex-wrap: nowrap;

  @media (max-width: 767px) {
    align-items: center;

    background-color: var(--primary-light--2);

    @media (prefers-color-scheme: dark) {
      background-color: var(--primary-dark--2);
    }

    & [aria-current="page"] {
      box-shadow: none;
    }

    & img {
      margin-block-end: var(--space-content--3xl);
    }
  }

  & li {
    margin-inline: 0;
    align-items: center;

    & a {
      background-color: transparent;
      text-decoration: none;
      color: var(--body-dark--2);

      transition: var(--transition--l);

      &.brxe-text-link {

        padding-block: calc(var(--_padding) * var(--_inc--3xs));
        padding-inline: calc(var(--_padding) * var(--_inc--2xl));
        
        @media (max-width: 767px) {
          font-size: var(--font-size-nav--2xl);
          justify-content: left;
          inline-size: 100%;
          padding-inline-start: var(--space-inline);
        }
      }

      &:hover {
        border-radius: var(--border-radius--s);

        background-color: var(--primary-dark--1);
        color: var(--white);
      }

      @media (prefers-color-scheme: dark) {
        color: var(--body-light--2);

        &:hover {
          background-color: var(--primary--light);
          color: var(--body-dark--2);
        }
      }
    }
  }

  & .brxe-text-link {
      font-size: var(--font-size-nav--m);
      font-variation-settings: "wght" var(--font-weight--nav);
      letter-spacing: var(--letter-spacing--nav);
      word-spacing: var(--word-spacing--nav);
      padding-block: var(--space-content--m);
  }

  & [aria-current="page"] {
    box-shadow: inset 0 var(--_off--add) transparent,
                inset 0 var(--_off--minus) var(--primary--dark);

    @media (prefers-color-scheme: dark) {
      box-shadow: inset 0 var(--_off--add) transparent,
                  inset 0 var(--_off--minus) var(--primary--light);
    }
  }
}

/*  Mobile Navigation  */
.brxe-toggle {
  --_width: 32px;

  & .brxa-wrap {
    width: var(--_width);
  }

  & .brxa-inner {
    width: var(--_width);

    &::before,
    &::after {
      width: var(--_width);
    }
  }
}

#brx-header .brx-open ul {
  align-items: start;
  block-size: 100dvh;
  inline-size: 300px;
  border: var(--border--m);
  padding-inline: var(--space-inline);

  border-color: var(--primary-light--3);
  background-color: var(--primary-light--2);

  @media (prefers-color-scheme: dark) {
    border-color: var(--primary-dark--3);
    background-color: var(--primary-dark--2);
  }

  & .menu-item button {
    border-radius: var(--border-radius--m);
    border: var(--border--m);
    margin-block-start: var(--space-content--3xl);
    padding: var(--space-gap--3xs);

    background-color: var(--primary-light--3);
    border-color: var(--primary-base--70);

    & svg {
      fill: var(--primary-dark--3);
    }
  }

  & [aria-current="page"] {
    box-shadow: none;
    background-color: var(--primary-light--4);

    @media (prefers-color-scheme: dark) {
      background-color: var(--primary-dark--4);
    }
  }
}


/*****************************
 *
 * 07* - Footer Styling
 */

.footer-address-links {
  --_bg-trans: transparent;
  --_hover-light: var(--primary-light--3);
  --_hover-dark: var(--primary-dark--3);
  --_percent: 30%;

  position: relative;
  justify-content: center;
  padding-block-start: var(--space-block--3xs);
  padding-block-end: var(--space-content--m);
  border-block-start: var(--border--s);

  border-color: var(--primary-light--2);
  background: linear-gradient(
    to bottom, 
    var(--primary-light--1) var(--_percent),
    var(--primary-light--2)
  );

  @media (prefers-color-scheme: dark) {
    border-color: var(--primary-dark--2);
    background: linear-gradient(
      to bottom, 
      var(--primary-dark--1) var(--_percent),
      var(--primary-dark--2)
    );
  }

  & .brxe-container {

    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--space-gap--2xs);
    font-size: calc(var(--font-size-body--m) * var(--_inc--s));

    @media (min-width: 920px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    & h2 {
      font-family: var(--font-family--body);
      font-size: var(--font-size-body--xl);
      margin-block-end: var(--space-content--xs);
    }

    & .brxe-nav-nested {
      align-items: start;
      display: inline;
    }

    & li a {
      margin-block-end: 4px;

      background-color: var(--_bg-trans);

      &:hover {
        background-color: var(--_hover-light);

        @media (prefers-color-scheme: dark) {
          background-color: var(--_hover-dark);
        }
      }
    }

    & .footer-contact {
      row-gap: 4px;
    }

    & .footer-phone-email {
      flex-direction: row;
      column-gap: 6px;

      & a {
        background-color: var(--_bg-trans);

        &:hover {
          background-color: var(--_hover-light);

          @media (prefers-color-scheme: dark) {
           background-color: var(--_hover-dark);
          }
        }
      }
    }

    & .footer-instagram {
      --_size: 30px;

      flex-direction: row;
      flex-wrap: nowrap;
      margin-block-start: 4px;

      background-color: var(--_bg-trans);
      
      &:hover {
        background-color: var(--_hover-light);

        @media (prefers-color-scheme: dark) {
          background-color: var(--_hover-dark);
        }
      }

      & svg {
        height: auto;
        width: var(--_size);

        fill: var(--primary-dark--1);

        @media (prefers-color-scheme: dark) {
          fill: var(--primary-light--3);
        }
      }

      & .brxe-text-basic {
        margin-inline-start: 10px;
      }
    }
  }

  & .brx-nav-nested-items {
    row-gap: 0;
    transition: var(--transition--m);

    & .menu-item .brxe-block {
      flex-direction: column;
    }
  }

  & .irw-policies a {
    margin-block-start: 1px;
  }
}

#brx-footer .footer-copyright {
  padding-block: 16px;
  max-block-size: 96px;

  background-color: var(--primary-light--2);

  @media (prefers-color-scheme: dark) {
    background-color: var(--primary-dark--2);
  }

  & .brxe-container {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    font-size: var(--font-size-nav--s);
    line-height: 1.3;
    gap: 4px;

    & .brxe-shortcode {
      text-align: center;
    }
  }
}

/*  Back to top button  */
.irw-back-to-top {
  background: transparent;
  transition: 0.5s ease-in-out;

  @media (max-width: 767px) {
    margin-block-end: 0;
  }

  & .icon-wrapper {
    padding: 12px;
    border-radius: var(--border-radius--circle);
    border: var(--border--xl);

    border-color: var(--white);
    background-color: var(--primary-light--5);

    @media (prefers-color-scheme: dark) {
      border-color: var(--primary-light--5);
      background-color: var(--primary-dark--4);
    }
  }

  & svg {
    height: auto;
    width: 24px;

    fill: var(--body-dark--1);

    @media (prefers-color-scheme: dark) {
      fill: var(--body-light--1);
    }
  }
}


/*****************************
 * 
 * 08* - Other HTML text styling 
 */

/*  Blockquote  */ 
:where(.brxe-text-basic, .brxe-text) > blockquote,
blockquote.wp-block-quote {
  --_gap: var(--space-card--l);

  font-family: var(--font-family--body);
  font-size: var(--font-size-body--l);
  font-style: italic;
  line-height: 1.5;
  font-variation-settings: "wght" var(--font-weight--italic);

  margin-block: var(--space-card--s);
  margin-inline: calc(var(--_gap) * -1) 0;
  padding-block: var(--_gap);
  padding-inline: calc(var(--_gap) - var(--offset--size));
  border: var(--border--s);
  border-inline-start: var(--offset--size) solid;
  border-start-end-radius: var(--border-radius--l);
  border-end-end-radius: var(--border-radius--l);

  text-wrap: pretty;

  border-color: var(--bg-light--4);
  border-inline-start-color: var(--primary--base);
  color: var(--body-dark--1);
  background: linear-gradient(
    to bottom, 
    var(--bg-light--5), 
    var(--bg-light--1) 40%);

  @media (prefers-color-scheme: dark) {
    border-color: var(--bg-dark--4);
    border-inline-start-color: var(--primary--base);
    color: var(--body-light--1);
    background: linear-gradient(
      to bottom, 
      var(--bg-dark--5), 
      var(--bg-dark--1) 40%);
  }

  & cite {
    font-family: var(--font-family--body);
    font-size: var(--font-size-body--s);
    font-style: normal;
    text-align: right;
  
    color: var(--body-dark--3);
    opacity: 1;
    text-transform: none;

    @media (prefers-color-scheme: dark) {
      color: var(--body-light--3);
    }
  } 
}

/*  Lists styling  */
:where(ol, ul) {
  margin-block-start: 0;
  margin-block-end: calc(var(--line-height) * 1em);
  padding-inline-start: 16px;
}
:where(ol, ul) > li:not(
    .menu-item, 
    .brxe-block, 
    .brxe-filter-radio > li, 
    .bricks-layout-item) {
      
  margin-block-end: calc(var(--line-height) * 0.5em);
}

/*  For added UL Container lists  */
ul.brxe-container {
  margin-block: 0;
  padding-inline: 0;
}
:where(ul.brxe-container, ul.sub-menu) > li {
  margin-block-end: 0;
}

/*  Lines and Dividers  */
hr {
  margin-block: var(--space-content--s);
  margin-inline-start: 0;
  border: var(--border--0);
  border-block-start: var(--border--l);

  border-block-start-color: var(--primary-base--40);
}

.wp-block-separator {
  border: var(--border--0);
}
.brxe-divider .line,
hr.wp-block-separator {
  border: var(--border--0);
  border-block-start-width: 3px;
  inline-size: 100%;
  border-block-start-style: solid;

  border-block-start-color: var(--primary-base--40);
}

/*  HEADING Separator stylings  */
:is(.brxe-block) {
  align-items: stretch;
}
:where(.brxe-heading) .separator {
  border-block-start-style: solid;

  border-block-start-color: var(--primary-base--40);
}
:where(.brxe-heading).has-separator {
  gap: var(--space-content--xl);
}

:where(h1.brxe-heading) .separator.left,
:where(h1.brxe-heading) .separator.right {
  --_sep-px: 3px;

  margin-block-start: calc(var(--_sep-px) * 2);
  border-block-start-width: var(--_sep-px);
}
:where(h2.brxe-heading) .separator {
  --_sep-px: 2px;

  margin-block-start: calc(var(--_sep-px) * 2);
  border-block-start-width: var(--_sep-px);
}

/*  PARAGRAPH and CLASSES Text stylings  */
:where(p > a, span > a, a.brxe-text-link) {
  text-decoration: underline;
  text-decoration-thickness: var(--text-underline-thickness);
  text-underline-offset: var(--text-underline-offset);
  font-variation-settings: "wght" var(--font-weight--link);
  padding-inline: 2px;

  transition: all var(--transition--m);
  text-decoration-color: var(--primary--dark);
  background-color: var(--primary-light--1);
  color: var(--link--dark);

  @media (prefers-color-scheme: dark) {
    text-decoration-color: var(--primary--light);
    background-color: var(--primary-dark--1);
    color: var(--link--light);
  }

  &[target="_blank"]::after {
    --_wght: 100;

    content: " \2197";
    font-variation-settings: "wght" calc(var(--font-weight--link) + var(--_wght));
    white-space: pre;
  }

  &:hover {
    text-decoration-thickness: var(--text-underline-thickness-hover);
  
    text-decoration-color: var(--primary--dark);
    background-color: var(--primary-light--2);
    color: var(--link--dark-hover);
  
    @media (prefers-color-scheme: dark) {
      text-decoration-color: var(--primary--light);
      background-color: var(--primary-dark--2);
      color: var(--link--light-hover);
    }
  }
}

:where(p, span, li) strong {
  font-variation-settings: "wght" var(--font-weight--bold);
}
:where(p, span) em {  
  --_wght: 50;

  font-family: var(--font-family--body);
  font-style: italic;
  font-variation-settings: "wght" calc(var(--font-weight--italic) + var(--_wght));
}

:where(p) {
  margin: 0;
  text-wrap: pretty;
}
:where(p:last-of-type) + h1, 
:where(p:last-of-type) + h2, 
:where(p:last-of-type) + h3, 
:where(p:last-of-type) + h4, 
:where(p:last-of-type) + h5, 
:where(p:last-of-type) + h6 {
  margin-block-start: 0;
}

:where(p:is(ul)) {
  margin-block-end: calc(var(--line-height) * 1em) !important;
}

/*  Paragraph and Header Spacing  */
p.brxe-text-basic,
.brxe-text p {
  margin-block-end: calc(var(--line-height) * 1em);
}
p.brxe-text-basic:last-of-type,
.brxe-text p:last-of-type {
  margin-block-end: 0;
}

/*  QUOTES tag  */
q {
  display: inline;
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}


/*****************************
 *
 * 09* - Heading Styling
 */

.sub-title,
:is(h1, h2, h3, h4, h5, h6) { 
  font-family: var(--font-family--heading);
  font-variation-settings: var(--font-weight--heading);

  letter-spacing: var(--letter-spacing--heading);
  word-spacing: var(--word-spacing--heading);
  
  color: var(--heading-dark--1);

  @media (prefers-color-scheme: dark) {
    color: var(--heading-light--1);
  }
}
h1.bricks-type-hero {
  --_wght: 75;

  font-size: var(--font-size-heading--title);
  font-variation-settings: calc(var(--font-weight--heading) + var(--_wght));
  line-height: 1.0;
}
h1 {
  font-size: var(--font-size-heading--h1);
  line-height: 1.1;
}
h2 {
  font-size: var(--font-size-heading--h2);
  line-height: 1.2;
}
h3 {
  font-size: var(--font-size-heading--h3);
  line-height: 1.3;
}
h4 {
  font-size: var(--font-size-heading--h4);
  line-height: 1.4;
}
h5 {
  font-size: var(--font-size-heading--h5);
  line-height: 1.5;
}
h6, 
.sub-title {
  font-size: var(--font-size-heading--h6);
  line-height: 1;
  letter-spacing: 0.05em;

  color: var(--heading-dark--4);

  @media (prefers-color-scheme: dark) {
   color: var(--heading-light--4);
  }
}
:is(h1, h2, h3, h4, h5, h6, .sub-title) > em {
  font-family: var(--font-family--heading);
  font-style: italic;
}

/*  Margins for Bricks Rich Text Element  */
.brxe-text > h2,
h2.wp-block-heading,
.brxe-text > h3,
h3.wp-block-heading,
.brxe-text > h4,
h4.wp-block-heading {
  --_margin-block: 0.1em;

  margin-block-start: calc(var(--line-height) * calc(var(--_margin-block) * var(--_inc--xl)));
  margin-block-end: calc(var(--line-height) * var(--_margin-block));
}
.brxe-text > h2:first-child,
h2.wp-block-heading:first-child,
h3.wp-block-heading:first-child,
h4.wp-block-heading:first-child  {
  margin-block-start: 0;
}

/*  Single Post Heading Sizes  */
.single-post h1 {
  font-size: calc(var(--font-size-heading--h2) * var(--font-size__post-heading));
}
.single-post h2 {
  font-size: calc(var(--font-size-heading--h3) * var(--font-size__post-heading));
}
.single-post h3 {
  font-size: calc(var(--font-size-heading--h4) * var(--font-size__post-heading));
}
.single-post h4 {
  font-size: calc(var(--font-size-heading--h5) * var(--font-size__post-heading));
}
.single-post h5 {
  font-size: calc(var(--font-size-heading--h6) * var(--font-size__post-heading));
}
.single-post h6 {
  font-size: calc(var(--font-size-heading--s) * var(--font-size__post-heading));
}


/*****************************
 *
 * 10* - Info Box Classes - wrap in a containter, block, or div
 */

.irw-info-box {
  padding-block: var(--space-card--xl);
  padding-inline: var(--space-card--xl);
}
.irw-info-box--small {
  font-size: var(--font-size-body--s);
  padding-block: var(--space-card--l);
  padding-inline: var(--space-card--l);
}
.irw-info-box,
.irw-info-box--small {
  border: var(--border--s);
  border-block-start-width: calc(var(--offset--size) * var(--_inc--xs));
  border-end-start-radius: var(--border-radius--m);
  border-end-end-radius: var(--border-radius--m);

  border-color: var(--bg-light--3);
  border-block-start-color: var(--primary--base);
  background-color: var(--bg-light--1);
  color: var(--bg-dark--2);

  @media (prefers-color-scheme: dark) {
    border-color: var(--bg-dark--3);
    border-block-start-color: var(--primary--base);
    background-color: var(--bg-dark--1);
    color: var(--bg-light--2);
  }
}


/*****************************
 *
 * 20* - Image Settings
 */

/*  Image Full Left and Right - Set Class at SECTION  */
.irw-section-relative {
  position: relative;
  isolation: isolate;
  padding-block-start: var(--space-block--m);
  background-color: var(--primary-light--2);

  @media (prefers-color-scheme: dark) {
    background-color: var(--primary-dark--2);
  }
}

/*  BREAKOUT image to full width - Set Class at FIGURE  */
figure.irw-breakout {
  max-inline-size: 100cqi;
  margin-block: var(--space-block--m) 0;
  margin-inline: calc(50% - 50cqi);
  overflow-x: hidden;
}
/*  Block Full Left and Right - Set Class at BLOCK  */
.irw-block-right,
.irw-block-left {
  row-gap: var(--space-content--s);
}

figure > figcaption.bricks-image-caption {
  font-size: var(--font-size-body--s);
  line-height: 1.4;
  font-style: italic;
  padding: var(--space-content--xs);
  border-bottom-left-radius: var(--border-radius--m);
  border-bottom-right-radius: var(--border-radius--m);
  text-wrap: balance;

  background: linear-gradient(
    0deg,
    rgba(0,0,0,.75),
    rgba(0,0,0,.45) 80%,
    transparent);
  color: var(--bg-light--2);
}

@media (min-width: 768px) {
  .irw-section-relative {
    --_percent-scale: 50%;

    padding-block: var(--space-block--3xl);
  }
  figure.irw-breakout {
    margin-block: 0;
  }
  .irw-block-left,
  .irw-block-right {
    max-inline-size: var(--_percent-scale);
  }
  .irw-block-left {
    padding-inline-end: var(--space-inline);
  }
  .irw-block-right {
    margin-inline-start: calc(100% - var(--percent-scale));
    padding-inline-start: var(--space-inline);
  }
  /*  IMAGE Left and Right - Set Class at FIGURE  */
  .irw-image-right,
  .irw-image-left {
    --_scroll-fix: 8px;

    position: absolute;
    block-size: 100%;
  }
  .irw-image-right {
    inset: 0 0 0 calc(var(--_percent-scale) + var(--_scroll-fix));
  }
  .irw-image-left {
    inset: 0 calc(var(--_percent-scale) + var(--_scroll-fix)) 0 0; 
  }
  .irw-image-left img {
    object-position: 80% 50%;
  }
  .irw-image-right img {
    object-position: 10% 50%;
  }
  figure img {
    object-fit: cover;
  }
}


/*****************************
 *
 * 21* - Button Classes
 */

.brxe-post-content .wp-block-button__link,
.brxe-post-content .wp-block-buttons > .wp-block-button:where(.is-style-outline) > .wp-block-button__link,

.category .bricks-button,
.bricks-button,
.wsf-form button.wsf-button.wsf-button-full.wsf-button-primary {
  position: relative;

  font-size: var(--font-size-button--m);
  text-transform: uppercase;
  font-variation-settings: "wght" var(--font-weight--button);
  text-align: center;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing--button);
  word-spacing: var(--word-spacing--button);
  text-wrap: balance;

  gap: var(--space-content--2xs);
  margin: 0;
  padding-block: var(--button-padding--block);
  padding-inline: var(--button-padding--inline);
  inline-size: 100%;
  min-inline-size: 8em;
  border-radius: var(--border-radius--s);
  border: var(--border--s);

  border-color: var(--accent--base);
  background-size: 100% 250%;
  background-image: linear-gradient(in oklch to bottom right, var(--accent--light), var(--accent--dark));
  color: var(--body-dark--3);
  transition: all var(--transition--l);

  &:hover {
    background-position: 0% -100%;
    color: var(--body-dark--4);
  }

  &.outline {
    border: var(--border--m);
    padding-block: var(--button-padding--block);
    padding-inline: var(--button-padding--inline);

    background: transparent;
    border-color: var(--bg-dark--1);
    color: var(--body-dark--1);

    @media (prefers-color-scheme: dark) {
      border-color: var(--bg-light--1);
      color: var(--body-light--1);
    }

    &:hover {
      background-position: 0% -100%;
      border-color: var(--accent--dark);
      background-color: var(--accent--base);
      color: var(--body-dark--4);

      @media (prefers-color-scheme: dark) {
        border-color: var(--accent--base);
        background-color: var(--accent--light);
      }
    }
  }

  &.sm {
    --_pad: 0.875em;

    font-size: calc(var(--font-size-button--m) * var(--_inc--xs));
    padding-block: var(--_pad);
    padding-inline: calc(var(--_pad) * var(--_space-ratio));
    line-height: 1.1;
    text-underline-offset: 5px;
    text-wrap: wrap;

    &:hover {
      text-decoration-thickness: 1.5px;
    }
  }

  @media (prefers-color-scheme: dark) {
    &:hover {
      background-color: var(--accent--light);
    }

    &.outline {
      border-color: var(--primary--base);
      color: var(--primary--base);

      &:hover {
        border-color: var(--accent--light);
        background-color: var(--accent--light);
      }
    }
  }

  &[target="_blank"]::after {
    --_wght: 150;

    content: '\2197';
    font-variation-settings: "wght" calc(var(--font-weight--button) + var(--_wght));
  }
}


/*****************************
 *
 * 22* - WSForms settings
 */

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

.irw-contact .wsf-form {
  padding-block: var(--space-card--m) 4px;
  padding-inline: var(--space-card--m);

  border-radius: var(--border-radius--m);
  border: var(--border--m);

  border-color: var(--bg-light--4);
  background-color: var(--bg-light--3);

  @media (prefers-color-scheme: dark) {
    border-color: var(--bg-dark--4);
    background-color: var(--bg-dark--3);

  & input[type=checkbox].wsf-field + label.wsf-label {
    margin-inline-start: 40px;
    }
  }

  & label.wsf-label {
    margin-block-end: var(--space-content--s);
    font-size: var(--font-size-body--s);
    font-variation-settings: "wght" var(--font-weight--bold);

    color: var(--body-dark--1);

    @media (prefers-color-scheme: dark) {
      color: var(--body-light--1);
    }

    & .wsf-required-wrapper {
      font-size: var(--font-size-body--xs);
      font-style: italic;
      margin-inline-start: 6px;

      color: var(--error--dark);

      @media (prefers-color-scheme: dark) {
        color: var(--error--light);
      }
    }
  }

  & .wsf-text-danger,
  & .wsf-invalid-feedback {
    color: var(--error--dark);

    @media (prefers-color-scheme: dark) {
      color: var(--error--light);
    }
  }

  & input[type=checkbox].wsf-field:checked {
    background-color: var(--success--dark);

    @media (prefers-color-scheme: dark) {
      background-color: var(--success--light);
    }
  }

  & input[type=text].wsf-field,
  & input[type=email].wsf-field,
  & textarea.wsf-field,

  & input[type=text].wsf-field:focus,
  & input[type=email].wsf-field:focus,
  & textarea.wsf-field:focus,
  
  & input[type=text].wsf-field:hover:enabled:not(:focus),
  & input[type=email].wsf-field:hover:enabled:not(:focus),
  & textarea.wsf-field:hover:enabled:not(:focus) {
    --_pad: 0.75em;

    padding-block: var(--_pad);
    padding-inline: calc(var(--_pad) * var(--_space-ratio));

    color: var(--body-dark--3);
    caret-color: var(--body-dark--3);

    @media (prefers-color-scheme: dark) {
      color: var(--body-light--3);
      caret-color: var(--body-light--3);
    }
  }

  & input[type=text].wsf-field,
  & input[type=email].wsf-field,
  & textarea.wsf-field {
    border-radius: var(--border-radius--m);
    border: var(--border--m);

    border-color: var(--bg-light--5);
    background-color: var(--bg-light--1);
    transition: var(--transition--m);

    @media (prefers-color-scheme: dark) {
      border-color: var(--bg-dark--3);
      background-color: var(--bg-dark--1);
    }

    &:hover:enabled:not(:focus) {
      border-color: var(--bg-dark--1);
      background-color: var(--bg-light--2);

      @media (prefers-color-scheme: dark) {
        border-color: var(--bg-light--5);
        background-color: var(--bg-dark--2);
      }
    }
  }

  & input[type=text].wsf-field:focus,
  & input[type=email].wsf-field:focus,
  & textarea.wsf-field:focus {
    outline-style: solid;
    outline-width: var(--focus--width);
    outline-offset: var(--focus--offset);

    border-color: var(--bg-light--5);
    background-color: var(--bg-light--1);

    @media (prefers-color-scheme: dark) {
      border-color: var(--bg-dark--3);
      background-color: var(--bg-dark--1);
    }

    outline-color: var(--primary--base);
    transition: all var(--transition--s);
  }

  & .wsf-alert.wsf-alert-success {
    border-color: var(--primary-base--50);
    background-color: var(--primary-base--30);

    @media (prefers-color-scheme: dark) {
      border-color: var(--primary-base--60);
      background-color: var(--primary-base--40);
    }

    & > p {
      font-size: var(--font-size-body--l);
      color: var(--body-dark--1);

      @media (prefers-color-scheme: dark) {
        color: var(--body-light--1);
      }
    }
  }
}

.irw-location {

  & .irw-location__divider {
    margin-block: var(--space-content--3xl) var(--space-content--xl);
  }

  & .faire-block,
  & .contact-block {
    row-gap: var(--space-content--xl);

    & .irw-email {
      margin-block-start: var(--space-content--m);
    }
  }
}


/*****************************
 *
 * 23* - Sitemap settings 
 */

.brxe-section.irw-sitemap {
  row-gap: var(--space-gap--m);

  & .brxe-container {
      position: relative; 
      display: grid;
      column-gap: var(--space-gap--m);
      align-items: initial;
      grid-template-columns: repeat(1, minmax(0, 1fr));

      @media (min-width: 768px) {
        grid-template-columns: repeat(1, minmax(0, 1fr)) repeat(1, minmax(0, 2fr));
      }
  }

  & h2 {
    font-size: var(--font-size-heading--h2);
    margin-block-end: var(--space-content--xs);
  }

  & ul {
    list-style-type: none;
  }

  & a {
    --_text-in: var(--space-card--l);

    margin-block-end: var(--space-content--2xs);
    padding-inline-start: var(--_text-in);
    text-indent: calc(var(--_text-in) * -1);

    transition: var(--transition--m);
    background: transparent;
    color: var(--link--dark);

    @media (prefers-color-scheme: dark) {
      color: var(--link--light);
    }
  
    &:hover {
      text-decoration-color: var(--primary-dark--5);
      background-color: var(--primary-light--4);
      color: var(--link--dark-hover);

      @media (prefers-color-scheme: dark) {
        text-decoration-color: var(--primary-light--5);
        background-color: var(--primary-dark--4);
        color: var(--link--light-hover);
      }
    }
  }
}


/*****************************
 *
 * 24* - Policy settings 
 */

.single-policy #brx-content > .brxe-section {
  margin-block-start: calc(var(--space-block--m) + 48px);

  @media (min-width: 500px) {
    margin-block-start: calc(var(--space-block--m) + 32px);
  }

  @media (min-width: 768px) {
    margin-block-start: calc(var(--space-block--m) + 16px);
  }

  @media (min-width: 1024px) {
    margin-block-start: var(--space-block--m);
  }

  & .brxe-container {
    max-inline-size: var(--width--xs);
  }

  & h1 {
    margin-block-end: var(--space-content--l);
  }

  & h2,
  & h3 {
    font-family: var(--font-family--body);
    font-variation-settings: "wght" var(--font-weight--bold);
    margin-block: var(--space-content--m) 0;
  }

  & h2 {
    font-size: var(--font-size-heading--h3);
  }

  & h3 {
    font-size: var(--font-size-heading--h4);
  }
}