/**
 * 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-header-panel[aria-hidden=false] {
  display: block;
}

.c-header-panel[aria-hidden=true] {
  display: none;
}

ul {
  margin: 0;
  padding: 0;
}
ul > li {
  list-style: none;
}

.field--name-field-megamenu-panels {
  -webkit-box-align: center;
          align-items: center;
  display: -webkit-box;
  display: flex;
  margin-left: 28px;
  /* Specific styles for more ways to donate linke */
}
.field--name-field-megamenu-panels li .c-header-tab {
  background-color: transparent;
  border: none;
  color: white;
  cursor: pointer;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-flow: row;
  -webkit-box-align: center;
          align-items: center;
  font-family: var(--font-family-heading);
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  margin: 20px;
  padding: 0;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}
.field--name-field-megamenu-panels li .c-header-tab span.btn-arrow {
  padding-left: 12px;
}
.field--name-field-megamenu-panels li .c-header-tab span.btn-arrow::after, .field--name-field-megamenu-panels li .c-header-tab[aria-expanded=false] span.btn-arrow::after {
  content: "";
  background-color: #0b131b;
  background-image: url(../../../img/arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  height: 15px;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  width: 10px;
}
.field--name-field-megamenu-panels li .c-header-tab[aria-expanded=true] span.btn-arrow::after {
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}
.field--name-field-megamenu-panels li .c-header-tab::after {
  border-left: 35px solid #0a1118;
  border-bottom: 10px solid white;
  border-right: 35px solid #0b141c;
  bottom: -20px;
  content: "";
  display: none;
  left: 50%;
  height: 0px;
  position: absolute;
  opacity: 0;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 0px;
  z-index: 4;
}
.field--name-field-megamenu-panels li .c-header-tab[aria-selected=true]::after {
  display: inline-block;
  opacity: 1;
}
.field--name-field-megamenu-panels li:first-child .c-header-tab {
  margin-left: 0;
}
.field--name-field-megamenu-panels li:nth-last-child(1) {
  margin-left: auto;
}
.field--name-field-megamenu-panels li:last-of-type .single-link {
  margin-left: 0;
  margin-right: 32px;
}
.field--name-field-megamenu-panels li:last-of-type .single-link a {
  font-size: 0.875rem;
  text-transform: capitalize;
}
.field--name-field-megamenu-panels li:last-of-type .single-link a:after {
  content: "";
  display: inline-block;
  background-image: url(../../../img/arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 6px;
  height: 10px;
  margin-left: 5px;
}

/* Panel Layouts*/
.l--megamenu {
  display: grid;
  grid-gap: 80px;
  padding: 20px 24px;
  -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));
  z-index: 3;
}
.l--megamenu .l__region {
  padding-top: 20px;
}
.l--megamenu .l__region.l__right {
  position: relative;
}
.l--megamenu .l__region.l__right:before {
  content: "";
  position: absolute;
  left: -40px;
  top: 0;
  height: 100%;
  width: 1px;
  background: #e2ecf3;
}

.c-header-panel--3col .l--megamenu {
  grid-template-columns: 1fr 1fr 1fr;
  background-color: white;
  font-family: var(--font-family-heading);
  left: 0;
  position: absolute;
  right: 1rem;
  width: 100%;
}

/* Single Link Styles */
.single-link {
  margin: 20px 18px;
}
.single-link a {
  color: white;
  cursor: pointer;
  font-family: var(--font-family-heading);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.single-link a:hover {
  text-decoration: underline;
}
@media (min-width: 1440px) {
  .single-link {
    margin: 20px;
  }
}

.c-header-panel .paragraph--type--stories-link-list a {
  color: #ca4948;
  text-decoration: none;
  font-weight: 900;
  font-size: 1.125rem;
  margin-bottom: 10px;
  display: inline-block;
}
.c-header-panel .paragraph--type--stories-text p {
  color: var(--color-indivisible-black);
  font-family: var(--font-family-body);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 30px;
  margin: 0;
  width: 100%;
}

@media (min-width: 992px) and (max-width: 1279px) {
  .c-header-panel--3col .l--megamenu {
    margin-top: 10px;
  }

  .field--name-field-megamenu-panels li .c-header-tab {
    margin: 10px;
    font-size: 0.875rem;
  }
  .field--name-field-megamenu-panels li .c-header-tab[aria-selected=true]:after {
    bottom: -20px;
  }
  .field--name-field-megamenu-panels li .c-header-tab[aria-selected=true]:after span.btn-arrow::after {
    padding-left: 20px;
  }

  .single-link {
    margin: 10px;
  }
  .single-link a {
    font-size: 0.875rem;
  }

  .c-header-panel .paragraph--type--stories-link-list a,
.c-header-panel .paragraph--type--stories-text p {
    font-size: 1rem;
  }

  .field--name-field-megamenu-panels {
    margin-left: 16px;
  }
}
@media (min-width: 1280px) {
  .field--name-field-megamenu-panels li .c-header-tab {
    margin: 20px 18px;
    font-size: 1rem;
  }
  .field--name-field-megamenu-panels li .c-header-tab:after {
    bottom: -20px;
  }
}
@media (min-width: 1440px) {
  .field--name-field-megamenu-panels li .c-header-tab {
    margin: 20px;
  }
}
@media (max-width: 1099px) {
  .field--name-field-megamenu-panels li .c-header-tab {
    font-size: 0.75rem;
  }

  .single-link a {
    font-size: 0.75rem;
  }
}
.c-header-panel .paragraph--type--image-break {
  position: relative;
}