/**
 * 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 {
  display: none;
}

@media (min-width: 992px) {
  .c-site-header {
    background-color: var(--color-indivisible-background);
    display: block;
  }
}
.c-site-header__nav-wrapper {
  -webkit-box-align: center;
          align-items: center;
  background-color: var(--color-indivisible-background);
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}

.c-site-header__logo {
  margin-left: 28px;
}
.c-site-header__logo svg {
  width: 243.62px;
  height: 24px;
}
.c-site-header__logo svg:hover {
  opacity: 0.7;
  -webkit-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
}
@media (min-width: 992px) and (max-width: 1279px) {
  .c-site-header__logo {
    margin-left: 16px;
  }
  .c-site-header__menu-main {
    padding-bottom: 5px;
  }
}
.c-site-header__utility-nav {
  -webkit-box-align: center;
          align-items: center;
  height: 75px;
  margin-right: 0;
  display: -webkit-box;
  display: flex;
}

.c-site-header__utility-nav .search-api-form {
  align-self: center;
  border: none;
  display: inline-block;
  margin: 0 30px 0 10px;
}
.c-site-header__utility-nav .search-api-form form {
  margin: 0;
}
.c-site-header__utility-nav .search-api-form form .form-actions,
.c-site-header__utility-nav .search-api-form form .form-item {
  margin: 0;
  position: relative;
}
.c-site-header__utility-nav .search-api-form form label.visually-hidden {
  color: white;
}
.c-site-header__utility-nav .search-api-form input[type=search] {
  color: white;
  background: transparent;
  border: 2px solid white;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  padding: 5px 30px 5px 0;
  text-indent: 20px;
  width: 210px;
  /* Change Autocomplete styles in Chrome*/
}
.c-site-header__utility-nav .search-api-form input[type=search]::-webkit-input-placeholder {
  color: white;
}
.c-site-header__utility-nav .search-api-form input[type=search]:-webkit-autofill, .c-site-header__utility-nav .search-api-form input[type=search]:-webkit-autofill:hover, .c-site-header__utility-nav .search-api-form input[type=search]:-webkit-autofill:focus {
  box-shadow: none;
  color: white;
  -webkit-box-shadow: none;
}
@media (min-width: 1280px) {
  .c-site-header__utility-nav .search-api-form input[type=search] {
    width: 300px;
  }
}
.c-site-header__utility-nav .search-api-form input[type=submit] {
  background: transparent;
  background-image: url(/themes/custom/indivisible/img/magnifier.svg);
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: center center;
  border: none;
  bottom: 2px;
  color: transparent;
  display: block;
  right: 12px;
  position: absolute;
  width: 24px;
}

.c-site-header__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: normal;
  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);
  -webkit-box-align: center;
          align-items: center;
  display: -webkit-box;
  display: flex;
  font-size: 1.5rem;
  height: 100%;
  padding: 0 40px;
}
.c-site-header__donatebtn a {
  color: #FFFFFF;
  text-decoration: none;
}
.c-site-header__donatebtn:hover, .c-site-header__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__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);
  outline: auto blue;
}

.c-site-header__social {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}
.c-site-header__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__social a.icon:hover, .c-site-header__social a.icon:active {
  color: white;
  text-decoration: none;
}
.c-site-header__social a.icon svg {
  margin-top: 4px;
}
.c-site-header__social a.icon svg:hover, .c-site-header__social a.icon svg:active {
  fill: white;
  text-decoration: none;
}