/*------------------------------------*\
    #Amplify: print styles
\*------------------------------------*/
/**
* Print stylesheet
* @version         1.2
* @lastmodified    06.01.2023

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/
*/
/*------------------------------------*\
    #Settings
\*------------------------------------*/
/*------------------------------------*\
    #Breakpoints

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

    1. Sets a max-inline-size 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
 */
/**
Accent
 */
/**
Neutrals
 */
/* 1 */
/* 1 */
/**
Links
 */
/**
Focus
 */
/**
Borders
 */
/**
Semantics - used sparingly and purposefully
 */
/*------------------------------------*\
    #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.
 */
@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 "Sen", "Arial MT Rounded Bold", arial, sans-serif;
  line-height: 1.3;
}

body,
img {
  display: block !important;
}

img {
  block-size: auto !important;
  max-inline-size: 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-inline: 0;
  padding-inline: 0;
}

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

h1 {
  font-size: 24pt;
  -webkit-margin-before: 36pt;
          margin-block-start: 36pt;
}

h2 {
  font-size: 20pt;
  -webkit-margin-before: 30pt;
          margin-block-start: 30pt;
}

h3 {
  font-size: 18pt;
  -webkit-margin-before: 27pt;
          margin-block-start: 27pt;
}

h4 {
  font-size: 16pt;
  -webkit-margin-before: 24pt;
          margin-block-start: 24pt;
}

h5 {
  font-size: 15pt;
  -webkit-margin-before: 22pt;
          margin-block-start: 22pt;
}

h6 {
  font-size: 14pt;
  -webkit-margin-before: 21pt;
          margin-block-start: 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 {
  -webkit-margin-before: 8pt;
          margin-block-start: 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: auto;
          text-decoration-skip: auto;
  -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;
  inline-size: 100%;
}

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

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

table caption {
  font-size: 14pt;
  font-weight: 600;
  padding-inline: 0;
}

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

fieldset {
  border: 0;
  margin: 0;
  min-inline-size: 0;
  padding: 0;
  -webkit-padding-before: 0.12pt;
          padding-block-start: 0.12pt;
}

.field {
  max-inline-size: 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] {
  -webkit-appearance: none;
          appearance: none;
  border: 2px solid;
  border-radius: 0;
  line-height: 1.25;
  padding: 3.75pt;
  inline-size: 100%;
}

[type=file] {
  border: 0;
}

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

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

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

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

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

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

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

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

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

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

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

iframe {
  display: none;
  block-size: 0 !important;
  inline-size: 0 !important;
  line-height: 0pt !important;
  overflow: hidden !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%;
  block-size: 75pt;
  inline-size: 75pt;
  overflow: hidden !important;
  position: relative;
}
.avatar img {
  block-size: 100%;
  -webkit-margin-before: -8pt;
          margin-block-start: -8pt;
}

.logo {
  display: block;
  inline-size: 2cm;
}

.component + .component {
  -webkit-margin-before: 42pt;
          margin-block-start: 42pt;
}

.component--image,
.component--quote {
  margin-inline: auto;
  position: relative !important;
  inline-size: 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: 600;
}

.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-block: -18pt 18pt;
  margin-inline: 0;
  visibility: hidden;
}
.component--collapsibles a[href]::after {
  content: " <" attr(href) "> ";
  display: block;
  font-size: 12pt;
  visibility: visible;
}

footer {
  -webkit-margin-before: 36pt;
          margin-block-start: 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;
}