/*------------------------------------*\
    #Amplify: advanced styles for browsers selected by mustard cut
\*------------------------------------*/
/*------------------------------------*\
    #Settings
\*------------------------------------*/
/*------------------------------------*\
    #Breakpoints

    The measurements presented here are for guidance only
    and should be updated to reflect the design/content needs.

    1. Sets a max-width for improved readability
\*------------------------------------*/
/* 1 */
/*------------------------------------*\
    #Colors

    Review and edit these default colours, then add further colors
    as required for your project.

    The ideal color contrast range for meeting WCAG AAA is 7:1 - 15:1

    1. A contrast higher than 15:1 can be triggering, which is why we
    avoid using pure white with pure black.
\*------------------------------------*/
/**
Brand
 */
/**
Neutrals
 */
/* 1 */
/* 1 */
/**
Links
 */
/**
Focus
 */
/**
Borders
 */
/**
Contextual colours (meets WCAG AA for regular text against $off-white,
so also safe for borders)
 */
/*------------------------------------*\
    #Typesetting
\*------------------------------------*/
/**
Use https://www.cssfontstack.com/ and https://meowni.ca/font-style-matcher/ to pick
system fonts that are reasonably close to any web fonts needed for the project.

This improves performance, avoids Flash Of Invisible Text (FOIT) and minimises
Flash of Unstyled Text (FOUT) - see https://www.filamentgroup.com/lab/font-events.html

Be sure to include fonts for both Mac OS and Windows. Use quote marks around
fonts with white space in their name.

When Font Face Observer has detected that the @font-face files are loaded, then we
can safely use the web fonts instead of the system fonts.
 */
/*------------------------------------*\
    #Functions
\*------------------------------------*/
/*------------------------------------*\
    #CSS unit functions
\*------------------------------------*/
/**
 #em
 */
/**
 #rem
 */
/**
 #px
 */
/**
 #Return a number without a unit
 */
/**
 #Remove any unit present to return a unitless number
 */
/*------------------------------------*\
    #Mixins
\*------------------------------------*/
/*------------------------------------*\
    #Font sizes

    Base sizes use the Major Third scale from https://type-scale.com/
\*------------------------------------*/
/*------------------------------------*\
    #Media query
\*------------------------------------*/
/*------------------------------------*\
    #Stack
\*------------------------------------*/
/**
This mixin allows us to add vertical spacing between a container's direct children,
much like the 'axiomatic owl' technique but limited to specific use cases.

By applying Flexbox to the parent container, we can use auto margin on a specific
child element. This way, we can choose to group elements inside the stack to the
top/bottom of the vertical space, which is useful for card-like components.

Use with a specific measure, or without for the default measure, e.g.

main {
	@include stack(4rem);
}

article {
	@include stack;
}
 */
/*------------------------------------*\
    #Base

    Repeated to allow for extending placeholders
\*------------------------------------*/
/*------------------------------------*\
    #Hide and show items inclusively

    See https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
\*------------------------------------*/
/*
 * Hide from everybody and remove from the document flow, using the hidden
 * attribute.
 *
 * Use if a component should remain hidden regardless of CSS being
 * available or not (the style below provides support for legacy browsers).
 */
[hidden] {
  display: none !important;
}

/*
 * Hide from everybody and remove from the document flow, using the %hidden
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 *
 * Use if a component requires a basic show and hide interaction, and the
 * content should become available were CSS to fail.
 */
/*
 * Hide from everybody while maintaining layout, using the %invisible
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 *
 * Use if a more complex transition is required, like when transitioning an
 * off-screen navigation into the viewport. Best paired with other CSS
 * properties that negate its position in the DOM e.g. `position: absolute;`
 */
/*
 * Hide visually only - remains available to Assistive Technology -
 * using the %visually-hidden placeholder (extend the placeholder with
 * Sass to avoid it appearing repeatedly in your markup).
 */
.visuallyhidden:not(:focus):not(:active) {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/*
 *The :not portions of the following selector allow a means for any
 * focusable element to become visible when focused/active by a user.
 */
br {
  margin-top: 0;
}

/*
 * Restore an element that has been visually hidden, using the %visually-hidden
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 */
/*------------------------------------*\
    #Advanced components

    For JS enhancements
\*------------------------------------*/
/*------------------------------------*\
    #Navigation advanced
\*------------------------------------*/
.no-js [data-trigger=nav] {
  display: none;
}

.global-nav > div {
  position: relative;
}

.button--ghost[data-trigger=nav] {
  color: #0d599b;
}
.button--ghost[data-trigger=nav]:active, .button--ghost[data-trigger=nav]:focus {
  color: #000;
}
.button--ghost[data-trigger=nav] + * {
  background-color: #fcfcfc;
  border-radius: 0.375rem;
  box-shadow: -0.0625rem 0.0625rem 0.25rem #bdbdbd;
  left: 0;
  margin-top: 0.625rem;
  min-width: 15rem;
  padding: 1.25rem;
  position: absolute;
  top: 100%;
}
@media screen and (min-width: 31.25em) {
  .button--ghost[data-trigger=nav] + * {
    left: auto;
    right: 0;
  }
}
.button--ghost[data-trigger=nav] + * li + li {
  margin-top: 0;
}
.button--ghost[data-trigger=nav] + * a {
  display: block;
  padding-bottom: 0.6875rem;
  padding-top: 0.6875rem;
}
.button--ghost[data-trigger=nav][aria-expanded=false] + * {
  display: none;
}

/*------------------------------------*\
    #Collapsible sections advanced
\*------------------------------------*/
.js .component--collapsibles__panel {
  padding: 0;
}

.js [data-heading=collapsibles] button {
  align-items: flex-start;
  flex-direction: column;
  padding: 1.5625rem;
  width: 100%;
}
.js [data-heading=collapsibles] button .js-collapsible-heading {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  text-align: left;
}
@media screen and (min-width: 40.0625em) {
  .js [data-heading=collapsibles] button .js-collapsible-heading {
    font-size: 1.1875rem;
    line-height: 1.47368;
  }
}
.js [data-heading=collapsibles] button .js-collapsible-toggle {
  color: #0d599b;
}
.js [data-heading=collapsibles] button .js-collapsible-label {
  font-size: 1rem;
  line-height: 1.5;
}
.js [data-heading=collapsibles] button:hover .js-collapsible-heading {
  color: #0d599b;
}
.js [data-heading=collapsibles] button:hover .js-collapsible-label {
  text-decoration: underline;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
}
.js [data-heading=collapsibles] button:focus {
  background-color: #ffdc00;
}
.js [data-heading=collapsibles] button:focus .js-collapsible-heading,
.js [data-heading=collapsibles] button:focus .js-collapsible-toggle {
  color: #000;
}
.js [data-heading=collapsibles] button[aria-expanded=false] .circle-up {
  display: none;
}
.js [data-heading=collapsibles] button[aria-expanded=true] .circle-down {
  display: none;
}

.js .component--collapsibles__panel__content {
  padding: 0 1.5625rem 1.5625rem;
}
.js .component--collapsibles__panel__content[aria-hidden=true] {
  display: none;
}

/*------------------------------------*\
    #Disclosure widget

    1. Equivalent to padding-top plus button height
\*------------------------------------*/
.no-js [data-toggle=true] {
  display: none;
}
.no-js [data-toggle=true] + * {
  display: initial;
}

.button--ghost[data-toggle=true] {
  color: #0d599b;
}

@media screen and (min-width: 64em) {
  [data-toggle=true] {
    display: none;
  }
}
[data-toggle=true] svg {
  pointer-events: none;
}
[data-toggle=true]:focus {
  background-color: #ffdc00;
  border-color: #000;
  box-shadow: none;
}
[data-toggle=true][aria-expanded=false] .expand-less {
  display: none;
}
[data-toggle=true][aria-expanded=false] + * {
  display: none;
}
[data-toggle=true][aria-expanded=true] .expand-more {
  display: none;
}
[data-toggle=true][aria-expanded=true] + * {
  background-color: #e5e4e4;
  display: block;
  left: 0;
  position: absolute;
  top: 100%;
  width: 100%;
}

.js .progress-nav [data-toggle=true] {
  position: absolute;
  right: 1rem;
  top: -3.75rem;
}

/*------------------------------------*\
    #Inline glossary advanced
\*------------------------------------*/
.no-js .js-button--glossary,
.no-js .definition {
  display: none;
}

.js-button--glossary {
  background-color: #fcfcfc;
  border: solid 0.125em #0d599b;
  border-radius: 0;
  color: #0d599b;
  font-size: 0.9em;
  padding: 0.05em 0.25em;
  line-height: 1;
  margin-left: 0.3125em;
  min-width: auto;
  min-height: auto;
}

.js-button--glossary[aria-expanded=false] + .definition {
  display: none;
}

.js-button--glossary[aria-expanded=true] + .definition {
  display: block;
}

.js .definition {
  background-color: #fcfcfc;
  border: solid 5px #0d599b;
  box-shadow: -0.0625rem 0.0625rem 0.25rem #bdbdbd;
  padding: 1.625rem;
  position: absolute;
  max-height: 40vh;
  max-width: 37.5rem;
  overflow: auto;
  width: 80vw;
  z-index: 1;
}

/*------------------------------------*\
    #Plugins

    Add third-party plugins here.
    Add custom styles directly after the original in a separate file
\*------------------------------------*/
.autocomplete__wrapper {
  position: relative;
}

.autocomplete__hint,
.autocomplete__input {
  -webkit-appearance: none;
  border: 2px solid #0b0c0c;
  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
  width: 100%;
}

.autocomplete__input {
  background-color: transparent;
  position: relative;
}

.autocomplete__hint {
  color: #b1b4b6;
  position: absolute;
}

.autocomplete__input--default {
  padding: 5px;
}

.autocomplete__input--focused {
  outline: 3px solid #fd0;
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px;
}

.autocomplete__input--show-all-values {
  padding: 5px 34px 5px 5px; /* Space for arrow. Other padding should match .autocomplete__input--default. */
  cursor: pointer;
}

.autocomplete__dropdown-arrow-down {
  z-index: -1;
  display: inline-block;
  position: absolute;
  right: 8px;
  width: 24px;
  height: 24px;
  top: 10px;
}

.autocomplete__menu {
  background-color: #fff;
  border: 2px solid #0B0C0C;
  border-top: 0;
  color: #0B0C0C;
  margin: 0;
  max-height: 342px;
  overflow-x: hidden;
  padding: 0;
  width: 100%;
  width: calc(100% - 4px);
}

.autocomplete__menu--visible {
  display: block;
}

.autocomplete__menu--hidden {
  display: none;
}

.autocomplete__menu--overlay {
  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
  left: 0;
  position: absolute;
  top: 100%;
  z-index: 100;
}

.autocomplete__menu--inline {
  position: relative;
}

.autocomplete__option {
  border-bottom: solid #b1b4b6;
  border-width: 1px 0;
  cursor: pointer;
  display: block;
  position: relative;
}

.autocomplete__option > * {
  pointer-events: none;
}

.autocomplete__option:first-of-type {
  border-top-width: 0;
}

.autocomplete__option:last-of-type {
  border-bottom-width: 0;
}

.autocomplete__option--odd {
  background-color: #FAFAFA;
}

.autocomplete__option--focused,
.autocomplete__option:hover {
  background-color: #1d70b8;
  border-color: #1d70b8;
  color: white;
  outline: none;
}

@media (-ms-high-contrast: active), (forced-colors: active) {
  .autocomplete__menu {
    border-color: FieldText;
  }
  .autocomplete__option {
    background-color: Field;
    color: FieldText;
  }
  .autocomplete__option--focused,
.autocomplete__option:hover {
    forced-color-adjust: none; /* prevent backplate from obscuring text */
    background-color: Highlight;
    border-color: Highlight;
    color: HighlightText;
    /* Prefer SelectedItem / SelectedItemText in browsers that support it */
    background-color: SelectedItem;
    border-color: SelectedItem;
    color: SelectedItemText;
    outline-color: SelectedItemText;
  }
}
.autocomplete__option--no-results {
  background-color: #FAFAFA;
  color: #646b6f;
  cursor: not-allowed;
}

.autocomplete__hint,
.autocomplete__input,
.autocomplete__option {
  font-size: 16px;
  line-height: 1.25;
}

.autocomplete__hint,
.autocomplete__option {
  padding: 5px;
}

@media (min-width: 641px) {
  .autocomplete__hint,
.autocomplete__input,
.autocomplete__option {
    font-size: 19px;
    line-height: 1.31579;
  }
}
/*------------------------------------*\
    #S24 accessible autocomplete overrides
\*------------------------------------*/
.autocomplete__hint,
.autocomplete__input {
  -webkit-appearance: none;
          appearance: none;
  border: 2px solid inherit;
}

.autocomplete__hint {
  color: #bdbdbd;
}

.autocomplete__input--focused {
  background-color: #fcfcfc;
  outline: 3px solid #ffdc00;
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px;
}

[dir=rtl] .autocomplete__input--show-all-values {
  padding-left: 34px;
  padding-right: 5px;
}

.autocomplete__dropdown-arrow-down {
  pointer-events: none;
  z-index: initial;
}

[dir=rtl] .autocomplete__dropdown-arrow-down {
  right: auto;
  left: 8px;
}

.autocomplete__menu {
  border: 2px solid inherit;
}

.autocomplete__option--odd {
  background-color: #bdbdbd;
}

.autocomplete__option--focused,
.autocomplete__option:hover {
  background-color: #235bd1;
  border-color: #235bd1;
}

.autocomplete__option--no-results {
  background-color: #bdbdbd;
  color: #252525;
}

.autocomplete__hint,
.autocomplete__input,
.autocomplete__option {
  font-size: 1rem;
  line-height: 1.5;
  line-height: 1.25;
}

@media (min-width: 641px) {
  .autocomplete__hint,
.autocomplete__input,
.autocomplete__option {
    font-size: 1rem;
    line-height: 1.5;
    line-height: 1.25;
  }
}