/**
 * Functions - Calculations
 * Simple functions to help developers calculate different values from percentages to sizing such as REMs.
 *
 * - 01 - Imports
 * - 02 - Target/Container Percentage
 * - 03 - REMs
 */
/*------------------------------------*\
  01 - Imports
\*------------------------------------*/
/*------------------------------------*\
  02 - Target/Container Percentage
  Calculate the percentage of a target size compared to a container size.
  - @param $target: Size of an element needing a calculated percentage.
  - @param $container: Size of the target's container, needed to calculate percentage.
  - @example = width: calc-percent(250, 1000);
\*------------------------------------*/
/*------------------------------------*\
  03 - REMs
  Calculate a size into REM units -- mostly used for font size rendering.
  - @param $size: Size of an element needing a calculated size into REMs.
  - @param $base: Base font size of the site -- defaults to 16px.
  - @example = font-size: calc-rem(24px);
\*------------------------------------*/
/*------------------------------------*\
  02 - Theme
\*------------------------------------*/
/*------------------------------------*\
  04 - Mappings
\*------------------------------------*/
/**
 * Settings - Typography
 * Standard sets of typographical variables and mappings to be of use across the site, for consistency and accuracy.
 *
 * - 01 - Line Heights
 * - 02 - Fonts
 */
/*------------------------------------*\
  01 - Line Heights
\*------------------------------------*/
/*------------------------------------*\
  02 - Fonts
\*------------------------------------*/
/*------------------------------------*\
  03 - Weights
\*------------------------------------*/
/**
 * Mixins - Buttons
 * Standard sets of Button mixins to be of use across the site, for consistency and accuracy.
 *
 * - 01 - Small
 * - 02 - Large Red
 * - 03 - Large Underline Red
 */
/*------------------------------------*\
  01 - Small
\*------------------------------------*/
/*------------------------------------*\
  02 - Large Red
\*------------------------------------*/
/*------------------------------------*\
  03 - Large Underline Red
\*------------------------------------*/
/**
 * Mixins - Media
 * Use these mixins when needing to easily define media styles, such as sizing, positioning, etc.
 *
 * - 01 - Background Image
 * - 02 - Responsive IFrame
 */
/*------------------------------------*\
  01 - Background Image
  Instead of using an inline style to define a background image, and needing to set an HTML image as a background
  image, use this mixin.
  - @param $position: Alignment of the image within it's frame [center, top, bottom] (default = center)
  - @example = @include background-image(center);
\*------------------------------------*/
/*------------------------------------*\
  02 - Responsive IFrame
  When needing an IFrame to be responsive to it's container, and ultimately for mobile devices, use this mixin. This
  mixin needs to be applied to the parent HTML element of the IFrame.
  - @param $width: Sizing width to determine the ratio of sizing needed for the responsive IFrame. [defaults to 16]
  - @param $height: Sizing height to determine the ratio of sizing needed for the responsive IFrame. [defaults to 9]
  - @example = @include responsive-iframe(16, 9);
\*------------------------------------*/
.c-site-header-mobile {
  display: none;
}

@media (max-width: 991px) {
  .c-site-header-mobile {
    background-color: var(--color-indivisible-background);
    display: block;
  }
}
/* Social Menu */
.c-site-header-mobile__social {
  -webkit-box-align: center;
          align-items: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: end;
          justify-content: flex-end;
  padding: 0;
}
.c-site-header-mobile__social a.icon {
  color: var(--color-indivisible-blue);
  display: block;
  font-size: 1.5rem;
  margin: 0 5px 0 0;
  padding: 10px 5px;
}
.c-site-header-mobile__social a.icon:hover, .c-site-header-mobile__social a.icon:active {
  color: white;
}
.c-site-header-mobile__social a.icon svg {
  margin-top: 8px;
  fill: var(--color-indivisible-blue);
}
.c-site-header-mobile__social a.icon svg:hover, .c-site-header-mobile__social a.icon svg:active {
  fill: white;
  text-decoration: none;
}

/* Logo and Utility Nav Buttons */
.c-site-header-mobile__nav-wrapper {
  -webkit-box-align: end;
          align-items: flex-end;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  padding-bottom: 20px;
}
.c-site-header-mobile__nav-wrapper .c-site-header-mobile__logo svg {
  width: 200px;
}
@media (max-width: 767px) {
  .c-site-header-mobile__nav-wrapper .c-site-header-mobile__logo svg {
    width: 150px;
  }
}
@media (max-width: 424px) {
  .c-site-header-mobile__nav-wrapper .c-site-header-mobile__logo svg {
    width: 125px;
  }
}
.c-site-header-mobile__nav-wrapper .c-site-header-mobile__utility-nav {
  display: -webkit-box;
  display: flex;
}
.c-site-header-mobile__nav-wrapper .c-site-header-mobile__utility-nav .c-site-header-mobile__donatebtn {
  background-color: #C84141;
  border: none;
  color: #fff;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: var(--font-size-body);
  font-weight: 800;
  letter-spacing: initial;
  padding: 1rem 1.25rem;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 150ms;
       -o-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  align-self: flex-end;
  font-size: 0.875rem;
  letter-spacing: 2.67px;
  padding: 10px;
}
.c-site-header-mobile__nav-wrapper .c-site-header-mobile__utility-nav .c-site-header-mobile__donatebtn a {
  color: #FFFFFF;
  text-decoration: none;
}
.c-site-header-mobile__nav-wrapper .c-site-header-mobile__utility-nav .c-site-header-mobile__donatebtn:hover, .c-site-header-mobile__nav-wrapper .c-site-header-mobile__utility-nav .c-site-header-mobile__donatebtn:focus {
  color: #FFFFFF;
  text-decoration: none;
  background-color: #983736;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 150ms;
       -o-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.c-site-header-mobile__nav-wrapper .c-site-header-mobile__utility-nav .c-site-header-mobile__donatebtn:focus {
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 150ms;
       -o-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 424px) {
  .c-site-header-mobile__nav-wrapper .c-site-header-mobile__utility-nav .c-site-header-mobile__donatebtn {
    padding: 8px 10px;
  }
}

/* Mobile Menu Toggle Icon */
.js-mobile-nav-trigger {
  background: none;
  border: none;
  color: white;
  display: inline-block;
  font-family: var(--font-family-heading);
  font-size: 0.625rem;
  font-weight: var(--font-weight-bold-heading);
  padding: 8px 0 0 8px;
  position: relative;
  text-transform: uppercase;
  -webkit-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
  vertical-align: top;
}
.js-mobile-nav-trigger .nav-icon {
  width: 30px;
  height: 20px;
  position: relative;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: 300ms ease-in-out;
  -o-transition: 300ms ease-in-out;
  transition: 300ms ease-in-out;
  cursor: pointer;
  margin: 0 0 2px 0;
}
.js-mobile-nav-trigger .nav-icon span {
  background: white;
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: 200ms ease-in-out;
  -o-transition: 200ms ease-in-out;
  transition: 200ms ease-in-out;
}
.js-mobile-nav-trigger .nav-icon span:nth-child(1) {
  top: 0px;
}
.js-mobile-nav-trigger .nav-icon span:nth-child(2),
.js-mobile-nav-trigger .nav-icon span:nth-child(3) {
  top: 8px;
}
.js-mobile-nav-trigger .nav-icon span:nth-child(4) {
  top: 16px;
}
.js-mobile-nav-trigger[aria-expanded=true] .nav-icon span {
  background: white;
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: 200ms ease-in-out;
  -o-transition: 200ms ease-in-out;
  transition: 200ms ease-in-out;
}
.js-mobile-nav-trigger[aria-expanded=true] .nav-icon span:nth-child(1) {
  top: 10px;
  width: 0%;
  left: 50%;
}
.js-mobile-nav-trigger[aria-expanded=true] .nav-icon span:nth-child(2) {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.js-mobile-nav-trigger[aria-expanded=true] .nav-icon span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.js-mobile-nav-trigger[aria-expanded=true] .nav-icon span:nth-child(4) {
  top: 8px;
  width: 0%;
  left: 50%;
}

@media (max-width: 991px) {
  /* Mobile Menu Drawer*/
  .c-site-header-mobile__site-navigation {
    background: white;
    display: none;
    -webkit-filter: drop-shadow(0 0px 10px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0 0px 10px rgba(0, 0, 0, 0.2));
    opacity: 0;
    overflow-y: auto;
    width: 100%;
    z-index: -1;
  }
  .c-site-header-mobile__site-navigation[aria-hidden=false] {
    display: block;
    opacity: 1;
    z-index: 1;
  }

  .c-site-header-mobile__site-navigation .search-api-form {
    width: 100%;
    padding: 20px 10px 20px 20px;
  }
  .c-site-header-mobile__site-navigation .search-api-form form {
    -webkit-box-align: center;
            align-items: center;
    display: -webkit-box;
    display: flex;
  }
  .c-site-header-mobile__site-navigation .search-api-form .form-actions {
    margin-top: 0;
  }
  .c-site-header-mobile__site-navigation .search-api-form .form-item {
    width: 100%;
    margin: 0;
  }
  .c-site-header-mobile__site-navigation .search-api-form input[type=search] {
    display: block;
    border: 2px solid;
    font-size: 1rem;
    padding: 10px 0;
    text-indent: 10px;
    width: 100%;
  }
  .c-site-header-mobile__site-navigation .search-api-form input[type=submit] {
    display: block;
    font-size: 1rem;
    margin-left: 16px;
    padding-bottom: 12px;
    padding-top: 12px;
    text-transform: capitalize;
  }
}
@media (max-width: 991px) and (max-width: 424px) {
  .c-site-header-mobile__site-navigation .search-api-form input[type=submit] {
    margin-left: 0;
  }
}
@media (max-width: 991px) {
  .c-site-header-mobile__menu {
    padding-bottom: 24px;
  }
  .c-site-header-mobile__menu .menu--mobile-menu[data-depth="0"] {
    display: grid;
    grid-gap: 32px;
    grid-template-columns: repeat(2, 1fr);
    margin: 20px;
    padding: 0 20px;
  }
}
@media (max-width: 991px) and (max-width: 475px) {
  .c-site-header-mobile__menu .menu--mobile-menu[data-depth="0"] {
    grid-template-columns: repeat(1, 1fr);
    padding: 0;
  }
}
@media (max-width: 991px) {
  .c-site-header-mobile__menu span {
    color: #4a4a4a;
    display: block;
    font-size: 1.25rem;
    text-decoration: none;
    margin-bottom: 10px;
    font-weight: var(--font-weight-bold-heading);
    text-align: left;
    font-family: var(--font-family-heading);
  }
  .c-site-header-mobile__menu li ul {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-flow: column;
    grid-gap: 0;
    gap: 0;
  }
  .c-site-header-mobile__menu .menu--mobile-menu .menu__item .menu--mobile-menu .menu__item .menu__link {
    color: #4a4a4a;
    display: block;
    font-family: var(--font-family-heading);
    font-weight: unset;
    font-size: 1.125rem;
    padding: 5px 0;
    text-decoration: none;
  }
  .c-site-header-mobile__menu .menu--mobile-menu .menu__item .menu--mobile-menu .menu__item .menu__link:hover {
    text-decoration: underline;
  }
  .c-site-header-mobile__menu .menu--mobile-menu[href^="http://"], .c-site-header-mobile__menu .menu--mobile-menu[href^="https://"] {
    /* fully valid URL, likely external link */
    background: red;
  }
  .c-site-header-mobile__menu .menu--mobile-menu .menu__item a.menu__link {
    color: #4a4a4a;
    display: block;
    font-size: 1.25rem;
    text-decoration: none;
    margin-bottom: 10px;
    font-weight: var(--font-weight-bold-heading);
    text-align: left;
    font-family: var(--font-family-heading);
  }
  .c-site-header-mobile__menu .menu--mobile-menu .menu__item a.menu__link:hover {
    text-decoration: underline;
  }
}