/*------------------------------------*\
    #Apollo: print styles
\*------------------------------------*/
/*------------------------------------*\
    #Settings
\*------------------------------------*/
/*------------------------------------*\
    #Fonts
\*------------------------------------*/
/* merriweather-sans-bold - latin */
@font-face {
  font-display: fallback;
  font-family: "Merriweather Sans";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("../fonts/merriweathersans-bold-webfont.woff2") format("woff2"), url("../fonts/merriweathersans-bold-webfont.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* merriweather-sans-bold-italic - latin */
@font-face {
  font-display: fallback;
  font-family: "Merriweather Sans";
  font-style: italic;
  font-weight: 700;
  src: local(""), url("../fonts/merriweathersans-bolditalic-webfont.woff2") format("woff2"), url("../fonts/merriweathersans-bolditalic-webfont.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/*------------------------------------*\
    #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.
 */
/*------------------------------------*\
    #Mixins
\*------------------------------------*/
/*------------------------------------*\
    #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
\*------------------------------------*/
/**
* Print stylesheet
* @version         1.1
* @lastmodified    08.09.2021

We aim to:
- Hide everything that is irrelevant for print
- Make everything black and white and easy to read

It is perfectly acceptable to use !important for print
styles as they should override everything else.

IMPORTANT: Anything that uses flexbox or grid on screen
and which needs to display correctly in print must be
refactored to use block or inline block layout. This can
be checked using the print preview in Chrome/Firefox:

https://css-tricks.com/can-you-view-print-stylesheets-applied-directly-in-the-browser/
*/
@page {
  /*
  Use PA4 (L4) transitional paper size, with a 2cm margin:
  https://en.wikipedia.org/wiki/Paper_size#Transitional_paper_sizes
  */
  margin: 2cm;
  size: 21cm 28cm;
}
*,
*:before,
*:after,
blockquote:first-line,
li:first-line,
p:first-line {
  background: transparent !important;
  box-shadow: none !important;
  color: #000 !important;
  overflow: visible !important;
  text-shadow: none !important;
}

body {
  font: 12pt "Merriweather Sans", Arial, sans-serif;
  line-height: 1.3;
}

body,
img {
  display: block !important;
}

img {
  height: auto !important;
  max-width: 100% !important;
}

code,
pre {
  font-family: Monaco, "Lucida Console", "Courier New", monospace;
}

a,
blockquote,
figure,
h1, h2, h3, h4, h5, h6,
img,
li,
pre,
table {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

blockquote,
figure {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin: 0;
}

h1 {
  font-size: 24pt;
  margin-top: 36pt;
}

h2 {
  font-size: 20pt;
  margin-top: 30pt;
}

h3 {
  font-size: 18pt;
  margin-top: 27pt;
}

h4 {
  font-size: 16pt;
  margin-top: 24pt;
}

h5 {
  font-size: 15pt;
  margin-top: 22pt;
}

h6 {
  font-size: 14pt;
  margin-top: 21pt;
}

h1, h2, h3, h4, h5, h6,
img {
  page-break-after: avoid;
}

dl,
ol,
ul {
  page-break-before: avoid;
}

ul:not([class]) > * + *,
ul:not([class]) li ul,
ul:not([class]) li ol,
ol:not([class]) > * + *,
ol:not([class]) li ul,
ol:not([class]) li ol,
.clean-list > * + *,
.clean-list li ul,
.clean-list li ol {
  margin-top: 8pt;
}

.clean-list {
  padding: 0;
}

ol:not([class]) {
  counter-reset: count;
  list-style-type: none;
  -webkit-padding-start: 15pt;
          padding-inline-start: 15pt;
}
ol:not([class]) > li {
  counter-increment: count;
}
ol:not([class]) > li::before {
  content: counters(count, ".") " ";
  -webkit-padding-end: 6pt;
          padding-inline-end: 6pt;
}

a:link, a:visited, a {
  text-decoration: underline;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

button {
  font-size: 12pt;
}

main a[href]::after,
footer a[href]::after {
  content: " <" attr(href) "> ";
}

abbr[title]::after {
  content: " (" attr(title) ")";
}

table {
  border-collapse: collapse;
  width: 100%;
}

table,
th,
td {
  border: 1px solid;
}

th,
td,
table caption {
  padding: 9pt;
  text-align: start;
}

table caption {
  font-size: 14pt;
  font-weight: 700;
  padding-left: 0;
  padding-right: 0;
}

/*
Forms - comment out if not used
 */
form > * + *,
.field-group > * + *,
.radio-item + .radio-item,
.checkbox-item + .checkbox-item,
.segmented-group > * > * + * {
  margin-top: 8pt;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0.12pt 0 0 0;
}

.field {
  max-width: 15cm;
}

.field > * {
  display: block;
}

.field-label,
.field-group__heading,
.group-legend {
  font-weight: bold;
}

select,
textarea,
[type=date],
[type=email],
[type=file],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url] {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid;
  border-radius: 0;
  line-height: 1.25;
  padding: 3.75pt;
  width: 100%;
}

[type=file] {
  border: 0;
}

input,
optgroup,
select,
textarea {
  font-size: 12pt;
}

.memorable-date,
.input-group > * {
  display: inline-block;
  margin-top: 0;
}

.memorable-date .faux-label,
.input-group .faux-label {
  display: block;
}

.segmented-label span:first-of-type::after {
  content: ":";
}

.input-width-30 {
  max-width: 59ex;
}

.input-width-20 {
  max-width: 41ex;
}

.input-width-10 {
  max-width: 23ex;
}

.input-width-5 {
  max-width: 10.8ex;
}

.input-width-4 {
  max-width: 9ex;
}

.input-width-3 {
  max-width: 7.2ex;
}

.input-width-2 {
  max-width: 5.4ex;
}

iframe {
  display: none;
  height: 0 !important;
  line-height: 0pt !important;
  overflow: hidden !important;
  width: 0 !important;
  white-space: nowrap;
}

/*
Layouts
 */
.l-frame {
  padding: 0 !important;
}

.l-sidebar > * {
  display: block !important;
}

.l-cluster > * > * {
  display: inline-block;
  padding: 3pt;
}

.avatar {
  border-radius: 50%;
  height: 75pt;
  overflow: hidden !important;
  position: relative;
  width: 75pt;
}
.avatar img {
  margin-top: -8pt;
  width: 100%;
}

.logo {
  display: block;
  width: 2cm;
}

.component + .component {
  margin-top: 42pt;
}

.component--fifty-fifty {
  min-height: 6cm;
  padding-right: 6cm;
  position: relative;
}
.component--fifty-fifty .l-frame {
  position: absolute;
  right: 0;
  top: 0;
  width: 6cm;
}
.component--fifty-fifty a {
  display: block;
}

[dir=rtl] .component--fifty-fifty {
  padding-left: 6cm;
  padding-right: 0;
}
[dir=rtl] .component--fifty-fifty .l-frame {
  left: 0;
  right: auto;
}

.component--image,
.component--quote {
  margin-left: auto;
  margin-right: auto;
  position: relative !important;
  width: 70%;
}

.component--quote {
  -webkit-border-start: solid 4pt;
          border-inline-start: solid 4pt;
  -webkit-padding-start: 8pt;
          padding-inline-start: 8pt;
}
.component--quote blockquote {
  font-size: 14pt;
  font-weight: 700;
}

.component--collapsibles button {
  border: 0;
  display: block !important;
  text-align: left;
}
.component--collapsibles button > span {
  display: block;
}
.component--collapsibles [aria-hidden] {
  display: block !important;
}
.component--collapsibles .icon {
  display: none !important;
}
.component--collapsibles a {
  display: block;
  margin: -18pt 0 18pt;
  visibility: hidden;
}
.component--collapsibles a[href]::after {
  content: " <" attr(href) "> ";
  display: block;
  font-size: 12pt;
  visibility: visible;
}

[dir=rtl] .component--collapsibles button {
  text-align: right;
}

.component--columns ul {
  padding: 0;
}
.component--columns li {
  display: block;
}

.component--columns--icons .card {
  padding-top: 1.5cm;
  position: relative;
}
.component--columns--icons .card__heading {
  margin-top: 0;
}
.component--columns--icons .icon {
  height: 1cm;
  position: absolute;
  top: 0;
  width: 1cm;
}

.component--columns--images .card {
  min-height: 5cm;
  padding-right: 6cm;
  position: relative;
}
.component--columns--images .card__image {
  position: absolute;
  right: 0;
  top: 0;
  width: 6cm;
}

[dir=rtl] .component--columns--images .card {
  padding-left: 6cm;
  padding-right: 0;
}
[dir=rtl] .component--columns--images .card__image {
  left: 0;
  right: auto;
}

.component--columns--icons a:not(.card__link),
.component--columns--images a:not(.card__link) {
  display: block;
  margin: -18pt 0 18pt;
  visibility: hidden;
}
.component--columns--icons a[href]::after,
.component--columns--images a[href]::after {
  content: " <" attr(href) "> ";
  display: block;
  font-size: 12pt;
  visibility: visible;
}

.component--slider .clean-list {
  display: block !important;
}
.component--slider .clean-list li {
  visibility: visible !important;
}
.component--slider .clean-list li[style] {
  left: 0 !important;
}
.component--slider .clean-list li + li {
  margin-top: 8pt;
}
.component--slider .slider-controls {
  display: none !important;
}

footer {
  margin-top: 36pt;
}

.skip-link,
#cookie-banner,
[role=status],
[data-trigger],
[data-toggle],
nav,
.breadcrumbs,
.component--video,
.progress-list,
.autocomplete__wrapper svg,
.pagination,
.global-footer__links {
  display: none !important;
}