@nationalarchives/frontend 0.1.42 → 0.1.43

package/nationalarchives/components/footer/template.njk

@@ -23,13 +23,16 @@
       </div>
       {%- endif %}
       {%- if params.social %}
+        <h3 class="tna-!--visually-hidden">
+          Follow us
+        </h3>
         <nav class="tna-footer__social" role="navigation" aria-label="Social links">
-          <ul class="tna-ul tna-ul--plain tna-footer__social-items">
+          <menu class="tna-ul tna-ul--plain tna-footer__social-items">
           {%- for item in params.social %}
             <li class="tna-footer__social-item">
-              <a href="{{ item.href }}" class="tna-footer__social-item-link">
+              <a href="{{ item.href }}" class="tna-footer__social-item-link" data-name="{{ item.icon }}">
                 {%- if item.icon == 'twitter' %}
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
                 {%- elif item.icon == 'youtube' %}
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg>
                 {%- elif item.icon == 'facebook' %}
@@ -49,7 +52,7 @@
               </a>
             </li>
           {%- endfor %}
-          </ul>
+          </menu>
         </nav>
       {%- endif %}
     </div>
@@ -62,7 +65,7 @@
           {{ group.title }}
         </h3>
         {%- endif %}
-        <ul class="tna-footer__navigation-block-items tna-ul tna-ul--plain">
+        <menu class="tna-footer__navigation-block-items tna-ul tna-ul--plain">
         {%- for item in group.items %}
           <li class="tna-footer__navigation-block-item">
             <a href="{{ item.href }}" class="tna-footer__navigation-block-item-link"{%- if item.title or item.newTab %} title="{{ item.title if item.title else item.text }}{%- if item.newTab %} (opens in new tab){% endif %}"{% endif %}{%- if item.newTab %} target="_blank" rel="noreferrer noopener"{% endif %}>
@@ -70,7 +73,7 @@
             </a>
           </li>
         {%- endfor %}
-        </ul>
+        </menu>
       </nav>
       {%- endfor %}
     </div>
@@ -79,10 +82,10 @@
     <div class="tna-column tna-column--width-1-4 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny tna-column--order-3">
       <div class="tna-footer__mailing-list">
         <h3 class="tna-footer__navigation-block-heading tna-heading-m">
-          Join the National Archives' mailing list
+          Sign up to our emails
         </h3>
         <p>
-          Subscribe for regular news, updates and priority booking for events.
+          Hear about our latest news, stories from the collection and priority booking for events.
         </p>
         <div class="tna-button-group">
           {{ tnaButton({
@@ -98,7 +101,7 @@
   <div class="tna-container">
     {%- if params.legal %}
     <nav class="tna-footer__legal tna-column tna-column--full" role="navigation" aria-label="General site links">
-      <ul class="tna-footer__legal-items tna-ul tna-ul--plain">
+      <menu class="tna-footer__legal-items tna-ul tna-ul--plain">
         {%- for item in params.legal %}
         <li class="tna-footer__legal-item">
           <a href="{{ item.href }}" class="tna-footer__legal-item-link" {%- if item.title %} title="{{ item.title }}"{% endif %}>
@@ -106,7 +109,7 @@
           </a>
         </li>
         {%- endfor %}
-      </ul>
+      </menu>
       <hr>
     </nav>
     {%- else %}

package/nationalarchives/components/gallery/gallery.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/gallery/gallery.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AAqOA,aACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAlJA,mCAPA,4BACA,uBCtFF,aAGE,oBAEA,qBACE,iBAGF,oBACE,WAEA,aACA,sBACA,mBACA,SAEA,0BACE,wBAIJ,mBACE,SAEA,yBACE,oBAEA,kBAMF,yBACE,cACA,YAGF,+BACE,gBACA,2BDgEA,8BAIA,0CE5DJ,wBDHE,wBAEI,kBAKN,sCDoDI,wCAIA,oCCpDJ,6BACE,kBAGF,qBACE,gBAIA,4CACE,qBACA,SAEA,kBACA,6BAGF,2CACE,WAEA,yBACA,UAIA,mEACE,cAKN,mOAGE,aAGF,kDACE","file":"gallery.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/media\";\n\n.tna-gallery {\n  @include colour.contrast;\n\n  padding-bottom: 2rem;\n\n  &__header {\n    padding-top: 2rem;\n  }\n\n  &__items {\n    width: 100%;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: spacing.space(\"l\");\n\n    &:focus {\n      outline: none !important;\n    }\n  }\n\n  &__item {\n    margin: 0;\n\n    &-index {\n      padding-bottom: 1rem;\n\n      text-align: center;\n    }\n\n    &-figure {\n    }\n\n    &-image {\n      margin: 0 auto;\n      height: auto;\n    }\n\n    &-description {\n      margin-top: 1rem;\n      padding: 0.5rem 0 0.5rem 1rem;\n\n      @include colour.colour-border(\"keyline-dark\", 4px, solid, left);\n    }\n\n    &-tabs {\n      @include media.on-smaller-than-large {\n        padding-top: 2rem;\n      }\n    }\n  }\n\n  &__item + &__item {\n    @include colour.colour-border(\"keyline\", 1px, solid, top);\n  }\n\n  &__toggle-wrapper {\n    text-align: center;\n  }\n\n  &__toggle {\n    margin-top: 2rem;\n  }\n\n  &--touchable {\n    .tna-gallery__items {\n      flex-flow: row nowrap;\n      gap: 6rem;\n\n      overflow-x: scroll;\n      scroll-snap-type: x mandatory;\n    }\n\n    .tna-gallery__item {\n      width: 100%;\n\n      scroll-snap-align: center;\n      flex: none;\n    }\n\n    &.tna-gallery--collapsed {\n      .tna-gallery__items {\n        overflow: auto;\n      }\n    }\n  }\n\n  &--collapsed &__item + &__item,\n  &--collapsed &__item:first-child &__item-description,\n  &--collapsed &__item:first-child &__item-tabs {\n    display: none;\n  }\n\n  &--collapsed &__item-figure {\n    width: 100%;\n  }\n\n  @include colour.on-high-contrast {\n    &__items {\n    }\n\n    &__item {\n      &-index {\n      }\n\n      &-description {\n      }\n    }\n  }\n}\n","@use \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{media.$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/gallery/gallery.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AA6PA,aACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEA1KA,mCAPA,4BACA,uBCtFF,aAGE,oBAEA,qBACE,iBAGF,oBACE,WAEA,aACA,sBACA,mBACA,SAEA,0BACE,wBAIJ,mBACE,SAEA,yBACE,oBAEA,kBAMF,yBACE,cACA,YAGF,+BACE,gBACA,2BDoEA,8BAIA,0CEhEJ,wBDHE,wBAEI,kBAKN,sCDwDI,wCAIA,oCCxDJ,6BACE,kBAGF,qBACE,gBAIA,4CACE,qBACA,SAEA,kBACA,6BAGF,2CACE,WAEA,yBACA,UAIA,mEACE,cAKN,mOAGE,aAGF,kDACE","file":"gallery.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../../tools/colour\";\n@use \"../../tools/spacing\";\n@use \"../../tools/media\";\n\n.tna-gallery {\n  @include colour.contrast;\n\n  padding-bottom: 2rem;\n\n  &__header {\n    padding-top: 2rem;\n  }\n\n  &__items {\n    width: 100%;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: spacing.space(\"l\");\n\n    &:focus {\n      outline: none !important;\n    }\n  }\n\n  &__item {\n    margin: 0;\n\n    &-index {\n      padding-bottom: 1rem;\n\n      text-align: center;\n    }\n\n    &-figure {\n    }\n\n    &-image {\n      margin: 0 auto;\n      height: auto;\n    }\n\n    &-description {\n      margin-top: 1rem;\n      padding: 0.5rem 0 0.5rem 1rem;\n\n      @include colour.colour-border(\"keyline-dark\", 4px, solid, left);\n    }\n\n    &-tabs {\n      @include media.on-smaller-than-large {\n        padding-top: 2rem;\n      }\n    }\n  }\n\n  &__item + &__item {\n    @include colour.colour-border(\"keyline\", 1px, solid, top);\n  }\n\n  &__toggle-wrapper {\n    text-align: center;\n  }\n\n  &__toggle {\n    margin-top: 2rem;\n  }\n\n  &--touchable {\n    .tna-gallery__items {\n      flex-flow: row nowrap;\n      gap: 6rem;\n\n      overflow-x: scroll;\n      scroll-snap-type: x mandatory;\n    }\n\n    .tna-gallery__item {\n      width: 100%;\n\n      scroll-snap-align: center;\n      flex: none;\n    }\n\n    &.tna-gallery--collapsed {\n      .tna-gallery__items {\n        overflow: auto;\n      }\n    }\n  }\n\n  &--collapsed &__item + &__item,\n  &--collapsed &__item:first-child &__item-description,\n  &--collapsed &__item:first-child &__item-tabs {\n    display: none;\n  }\n\n  &--collapsed &__item-figure {\n    width: 100%;\n  }\n\n  @include colour.on-high-contrast {\n    &__items {\n    }\n\n    &__item {\n      &-index {\n      }\n\n      &-description {\n      }\n    }\n  }\n}\n","@use \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{media.$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n"]}

package/nationalarchives/components/global-header/analytics.js

@@ -1,3 +1,5 @@
+import { valueGetters } from "../../lib/analytics-helpers.mjs";
+
 export default [
   {
     scope: ".tna-global-header",
@@ -8,14 +10,46 @@ export default [
         targetElement: ".tna-global-header__navigation-button",
         on: "click",
         data: {
-          // eslint-disable-next-line no-unused-vars
-          state: ($el, $scope, event) => {
-            const expanded = $el.getAttribute("aria-expanded");
-            if (expanded === null) {
-              return null;
-            }
-            return expanded.toString() === "true" ? "opened" : "closed";
-          },
+          state: valueGetters.expanded,
+        },
+      },
+      {
+        eventName: "logo.click",
+        targetElement: ".tna-global-header__logo",
+        on: "click",
+        rootData: {
+          data_component_name: "Header",
+          data_link_type: "Logo",
+          data_link: "The National Archives",
+        },
+      },
+      {
+        eventName: "primary_link.click",
+        targetElement: ".tna-global-header__navigation-item-link",
+        on: "click",
+        data: {
+          value: valueGetters.text,
+        },
+        rootData: {
+          data_component_name: "Header",
+          data_link_type: "Menu",
+          data_section: valueGetters.text,
+          data_position: valueGetters.index,
+          data_link: valueGetters.text,
+        },
+      },
+      {
+        eventName: "secondary_link.click",
+        targetElement: ".tna-global-header__top-navigation-link",
+        on: "click",
+        data: {
+          value: valueGetters.text,
+        },
+        rootData: {
+          data_component_name: "Header",
+          data_link_type: "Icon",
+          data_position: valueGetters.index,
+          data_link: valueGetters.text,
         },
       },
     ],

package/nationalarchives/components/global-header/fixtures.json

@@ -34,7 +34,7 @@
           }
         ]
       },
-      "html": "<header class=\"tna-global-header \" data-module=\"tna-global-header\"><div class=\"tna-container tna-global-header__main\"><div class=\"tna-column tna-column--flex-1 tna-column--order-2\"><span class=\"tna-global-header__logo-wrapper\"><a href=\"#/\" class=\"tna-global-header__logo\" title=\"The National Archives - Beta\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" class=\"tna-logo\" style=\"enable-background:new 0 0 160 160\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\"><title>The National Archives</title><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\" /><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\" /><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\" /></g></svg><span class=\"tna-global-header__logo-strapline\">Beta</span></a></span></div><div class=\"tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper\"><button class=\"tna-global-header__navigation-button\" type=\"button\" hidden>Menu<span class=\"tna-global-header__hamburger\"></span></button></div><nav class=\"tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper\" aria-label=\"Main site navigation\"><ul class=\"tna-global-header__navigation\"><li class=\"tna-global-header__navigation-item\"><a href=\"#/alpha\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Alpha</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/beta\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Beta</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/gamma\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Gamma</a></li></ul></nav><nav class=\"tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper\" aria-label=\"Secondary site navigation\"><ul class=\"tna-global-header__top-navigation\"><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-1\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 1</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-2\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 2</a></li></ul></nav></div></header>"
+      "html": "<header class=\"tna-global-header \" data-module=\"tna-global-header\"><div class=\"tna-container tna-global-header__main\"><div class=\"tna-column tna-column--flex-1 tna-column--order-2\"><span class=\"tna-global-header__logo-wrapper\"><a href=\"#/\" class=\"tna-global-header__logo\" title=\"The National Archives - Beta\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" class=\"tna-logo\" style=\"enable-background:new 0 0 160 160\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\"><title>The National Archives</title><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\" /><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\" /><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\" /></g></svg><span class=\"tna-global-header__logo-strapline\">Beta</span></a></span></div><div class=\"tna-column tna-column--order-2 tna-global-header__navigation-button-wrapper\"><button class=\"tna-global-header__navigation-button\" type=\"button\" aria-controls=\"tna-header__navigation tna-header__top-navigation\" hidden>Menu<span class=\"tna-global-header__hamburger\"></span></button></div><nav class=\"tna-column tna-column--full-small tna-column--full-tiny tna-column--order-3 tna-global-header__navigation-wrapper\" id=\"tna-header__navigation\" aria-label=\"Main site navigation\"><menu class=\"tna-global-header__navigation\"><li class=\"tna-global-header__navigation-item\"><a href=\"#/alpha\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Alpha</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/beta\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Beta</a></li><li class=\"tna-global-header__navigation-item\"><a href=\"#/gamma\" class=\"tna-global-header__navigation-item-link\" tabindex=\"0\">Gamma</a></li></menu></nav><nav class=\"tna-column tna-column--full tna-column--order-1 tna-column--order-4-small tna-column--order-4-tiny tna-global-header__top-navigation-wrapper\" id=\"tna-header__top-navigation\" aria-label=\"Secondary site navigation\"><menu class=\"tna-global-header__top-navigation\"><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-1\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 1</a></li><li class=\"tna-global-header__top-navigation-item\"><a href=\"#/top-2\" class=\"tna-global-header__top-navigation-link\" tabindex=\"0\">Top item 2</a></li></menu></nav></div></header>"
     }
   ]
 }

package/nationalarchives/components/global-header/global-header.css

@@ -1 +1 @@
-.tna-global-header,.tna-background-contrast{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-background-accent{--background: var(--accent-background);--font-base: var(--accent-font-base);--font-dark: var(--accent-font-dark);--font-light: var(--accent-font-light);--icon-light: var(--accent-icon-light);--link: var(--accent-link);--link-visited: var(--accent-link);--keyline: var(--accent-keyline);--keyline-dark: var(--accent-keyline-dark);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-background-tint{background-color:#e4e4e4;background-color:var(--background-tint);color:#343338;color:var(--font-base)}.tna-background-accent-light{--background: var(--accent-background-light);--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);background-color:var(--background);color:#343338;color:var(--font-base)}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-background-accent-light{--link: #0062a8;--link-visited: #4c2c92}}.tna-template--dark-theme .tna-background-accent-light{--link: #0062a8;--link-visited: #4c2c92}.tna-template{background-color:#f4f4f4;background-color:var(--page-background)}.tna-template--system-theme{--page-background: #f4f4f4;--background-tint: #e4e4e4;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}@media(prefers-color-scheme: dark){.tna-template--system-theme{--page-background: #222;--background-tint: #333;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.51);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #ff3d3d;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #111;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}@media(prefers-contrast: more){.tna-template--system-theme{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--system-theme *{background-image:none !important}}@media(prefers-contrast: more)and (prefers-color-scheme: dark){.tna-template--system-theme{--page-background: #111;--background-tint: #333;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #ff6161;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: rgb(0, 0, 0);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}}.tna-template--light-theme{--page-background: #f4f4f4;--background-tint: #e4e4e4;--font-base: #343338;--font-dark: rgb(0, 0, 0);--font-light: rgb(0 0 0/0.58);--icon-light: rgb(52 51 56/0.45);--link: #0062a8;--link-visited: #4c2c92;--focus-outline: rgb(0, 176, 255);--keyline: rgb(38 38 42/0.25);--keyline-dark: #26262a;--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #1e1e1e;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--dark-theme{--page-background: #222;--background-tint: #333;--font-base: rgb(255 255 255/0.95);--font-dark: rgb(255, 255, 255);--font-light: rgb(255 255 255/0.51);--icon-light: rgb(255 255 255/0.35);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255 255 255/0.25);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #ff3d3d;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: #111;--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme{--page-background: rgb(255, 255, 255);--background-tint: #e4e4e4;--font-base: rgb(0, 0, 0);--font-dark: rgb(0, 0, 0);--font-light: rgb(0, 0, 0);--icon-light: rgb(0 0 0/0.75);--link: #34d;--link-visited: #848;--focus-outline: rgb(253, 63, 3);--keyline: rgb(0, 0, 0);--keyline-dark: rgb(0, 0, 0);--input-foreground: rgb(0, 0, 0);--input-background: rgb(255, 255, 255);--input-border: rgb(0, 0, 0);--form-error: #c00;--button-text: rgb(255, 255, 255);--button-background: rgb(0, 0, 0);--button-hover-text: rgb(0, 0, 0);--button-hover-background: rgb(255, 255, 255);--contrast-background: #f4f4f4;--contrast-font-base: rgb(0, 0, 0);--contrast-font-dark: rgb(0, 0, 0);--contrast-font-light: rgb(0, 0, 0);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: #34d;--contrast-link-visited: #848;--contrast-keyline: rgb(0, 0, 0);--contrast-keyline-dark: rgb(0, 0, 0);--contrast-button-text: rgb(255, 255, 255);--contrast-button-background: rgb(0, 0, 0);--contrast-button-hover-text: rgb(0, 0, 0);--contrast-button-hover-background: rgb(255, 255, 255);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--high-contrast-theme *{background-image:none !important}.tna-template--high-contrast-theme.tna-template--dark-theme{--page-background: #111;--background-tint: #333;--font-base: rgb(255, 255, 255);--font-dark: rgb(255, 255, 255);--font-light: rgb(255, 255, 255);--icon-light: rgb(255 255 255/0.75);--link: rgb(0, 176, 255);--link-visited: #a8f;--focus-outline: rgb(253, 63, 3);--keyline: rgb(255, 255, 255);--keyline-dark: rgb(255, 255, 255);--input-foreground: rgb(255, 255, 255);--input-background: rgb(0, 0, 0);--input-border: rgb(255, 255, 255);--form-error: #ff6161;--button-text: rgb(0, 0, 0);--button-background: rgb(255, 255, 255);--button-hover-text: rgb(255, 255, 255);--button-hover-background: rgb(0, 0, 0);--contrast-background: rgb(0, 0, 0);--contrast-font-base: rgb(255, 255, 255);--contrast-font-dark: rgb(255, 255, 255);--contrast-font-light: rgb(255 255 255/0.7);--contrast-icon-light: rgb(255 255 255/0.45);--contrast-link: rgb(255, 255, 255);--contrast-link-visited: rgb(255, 255, 255);--contrast-keyline: rgb(255 255 255/0.5);--contrast-keyline-dark: rgb(255 255 255/0.8);--contrast-button-text: rgb(0, 0, 0);--contrast-button-background: rgb(255, 255, 255);--contrast-button-hover-text: rgb(255, 255, 255);--contrast-button-hover-background: rgb(0, 0, 0);--accent-background: #111;--accent-background-light: #ededed;--accent-font-base: rgb(255, 255, 255);--accent-font-dark: rgb(255, 255, 255);--accent-font-light: rgb(255 255 255/0.7);--accent-icon-light: rgb(255 255 255/0.45);--accent-link: rgb(255, 255, 255);--accent-link-visited: #b9f;--accent-keyline: rgb(255 255 255/0.5);--accent-keyline-dark: rgb(255 255 255/0.8);--button-accent-text: rgb(0, 0, 0);--button-accent-background: rgb(140, 150, 148)}.tna-template--yellow-accent{--accent-background: rgb(255, 204, 0) !important;--accent-background-light: rgb(249, 247, 226) !important;--accent-font-base: rgb(0, 0, 0) !important;--accent-font-dark: rgb(0, 0, 0) !important;--accent-font-light: rgb(0 0 0/0.7) !important;--accent-icon-light: rgb(0 0 0/0.45) !important;--accent-link: rgb(0, 0, 0) !important;--accent-link-visited: rgb(0, 0, 0) !important;--accent-keyline: rgb(0 0 0/0.5) !important;--accent-keyline-dark: rgb(0 0 0/0.8) !important;--button-accent-background: rgb(255, 204, 0) !important}.tna-template--pink-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent-background: rgb(156, 25, 58) !important;--accent-background-light: rgb(250, 211, 212) !important;--button-accent-background: rgb(156, 25, 58) !important}.tna-template--orange-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent-background: rgb(143, 52, 21) !important;--accent-background-light: rgb(249, 225, 188) !important;--button-accent-background: rgb(143, 52, 21) !important}.tna-template--green-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent-background: rgb(0, 98, 59) !important;--accent-background-light: rgb(221, 229, 213) !important;--button-accent-background: rgb(0, 98, 59) !important}.tna-template--blue-accent{--accent-font-base: rgb(255, 255, 255) !important;--accent-font-dark: rgb(255, 255, 255) !important;--accent-font-light: rgb(255 255 255/0.7) !important;--accent-icon-light: rgb(255 255 255/0.45) !important;--accent-link: rgb(255, 255, 255) !important;--accent-link-visited: rgb(255, 255, 255) !important;--accent-keyline: rgb(255 255 255/0.5) !important;--accent-keyline-dark: rgb(255 255 255/0.8) !important;--button-accent-text: rgb(255, 255, 255) !important;--accent-background: rgb(0, 76, 126) !important;--accent-background-light: rgb(212, 229, 239) !important;--button-accent-background: rgb(0, 76, 126) !important}@media(prefers-reduced-motion){.tna-template *{animation:none !important;transition:none !important}}.tna-border-keyline{border:1px rgb(38 38 42/0.25) solid;border:1px var(--keyline) solid}.tna-border-keyline-dark{border:1px #26262a solid;border:1px var(--keyline-dark) solid}.tna-template{min-width:320px;width:100%;height:100%;-webkit-overflow-scrolling:touch}.tna-template__body{min-height:100%;margin:0;padding:0}.tna-template__body:has(.tna-header):has(#main-content[role=main]):has(.tna-footer){display:flex;flex-direction:column}.tna-template__body:has(.tna-header):has(#main-content[role=main]):has(.tna-footer) #main-content{flex:1}.tna-container{max-width:75.25rem;width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:stretch}.tna-container--no-padding,.tna-container--no-padding-all{max-width:71.25rem}.tna-container--max{max-width:none}.tna-container--centred{justify-content:center}.tna-column{margin:0;padding-right:1rem;padding-left:1rem;box-sizing:border-box}.tna-column--container{display:flex;flex-wrap:wrap;justify-content:stretch;align-items:stretch}.tna-column--align-top{align-self:flex-start}.tna-column--align-centre{align-self:center}.tna-column--align-bottom{align-self:flex-end}.tna-column--full{width:100%;flex:none}.tna-column--width-1-12{width:8.3333333333%;flex:none}.tna-column--margin-right-1-12{margin-right:8.3333333333%}.tna-column--margin-left-1-12{margin-left:8.3333333333%}.tna-column--width-1-6{width:16.6666666667%;flex:none}.tna-column--margin-right-1-6{margin-right:16.6666666667%}.tna-column--margin-left-1-6{margin-left:16.6666666667%}.tna-column--width-1-4{width:25%;flex:none}.tna-column--margin-right-1-4{margin-right:25%}.tna-column--margin-left-1-4{margin-left:25%}.tna-column--width-1-3{width:33.3333333333%;flex:none}.tna-column--margin-right-1-3{margin-right:33.3333333333%}.tna-column--margin-left-1-3{margin-left:33.3333333333%}.tna-column--width-5-12{width:41.6666666667%;flex:none}.tna-column--margin-right-5-12{margin-right:41.6666666667%}.tna-column--margin-left-5-12{margin-left:41.6666666667%}.tna-column--width-1-2{width:50%;flex:none}.tna-column--margin-right-1-2{margin-right:50%}.tna-column--margin-left-1-2{margin-left:50%}.tna-column--width-7-12{width:58.3333333333%;flex:none}.tna-column--margin-right-7-12{margin-right:58.3333333333%}.tna-column--margin-left-7-12{margin-left:58.3333333333%}.tna-column--width-2-3{width:66.6666666667%;flex:none}.tna-column--margin-right-2-3{margin-right:66.6666666667%}.tna-column--margin-left-2-3{margin-left:66.6666666667%}.tna-column--width-3-4{width:75%;flex:none}.tna-column--margin-right-3-4{margin-right:75%}.tna-column--margin-left-3-4{margin-left:75%}.tna-column--width-5-6{width:83.3333333333%;flex:none}.tna-column--margin-right-5-6{margin-right:83.3333333333%}.tna-column--margin-left-5-6{margin-left:83.3333333333%}.tna-column--width-11-12{width:91.6666666667%;flex:none}.tna-column--margin-right-11-12{margin-right:91.6666666667%}.tna-column--margin-left-11-12{margin-left:91.6666666667%}.tna-column--flex-1{width:auto;flex:1 0}.tna-column--flex-2{width:auto;flex:2 0}.tna-column--flex-3{width:auto;flex:3 0}.tna-column--order-1{order:1}.tna-column--order-2{order:2}.tna-column--order-3{order:3}.tna-column--order-4{order:4}@media(min-width: 48.0625em)and (max-width: 64em){.tna-column--full-medium{width:100%;flex:none}.tna-column--width-1-6-medium{width:16.6666666667%;flex:none}.tna-column--margin-right-1-6-medium{margin-right:16.6666666667%}.tna-column--margin-left-1-6-medium{margin-left:16.6666666667%}.tna-column--width-1-3-medium{width:33.3333333333%;flex:none}.tna-column--margin-right-1-3-medium{margin-right:33.3333333333%}.tna-column--margin-left-1-3-medium{margin-left:33.3333333333%}.tna-column--width-1-2-medium{width:50%;flex:none}.tna-column--margin-right-1-2-medium{margin-right:50%}.tna-column--margin-left-1-2-medium{margin-left:50%}.tna-column--width-2-3-medium{width:66.6666666667%;flex:none}.tna-column--margin-right-2-3-medium{margin-right:66.6666666667%}.tna-column--margin-left-2-3-medium{margin-left:66.6666666667%}.tna-column--width-5-6-medium{width:83.3333333333%;flex:none}.tna-column--margin-right-5-6-medium{margin-right:83.3333333333%}.tna-column--margin-left-5-6-medium{margin-left:83.3333333333%}.tna-column--flex-1-medium{width:auto;flex:1 0}.tna-column--flex-2-medium{width:auto;flex:2 0}.tna-column--flex-3-medium{width:auto;flex:3 0}.tna-column--order-1-medium{order:1}.tna-column--order-2-medium{order:2}.tna-column--order-3-medium{order:3}.tna-column--order-4-medium{order:4}}@media(max-width: 30em){.tna-container{padding-right:.5rem;padding-left:.5rem}.tna-column{padding-right:.5rem;padding-left:.5rem}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-column--full-small{width:100%;flex:none}.tna-column--width-1-4-small{width:25%;flex:none}.tna-column--margin-right-1-4-small{margin-right:25%}.tna-column--margin-left-1-4-small{margin-left:25%}.tna-column--width-1-2-small{width:50%;flex:none}.tna-column--margin-right-1-2-small{margin-right:50%}.tna-column--margin-left-1-2-small{margin-left:50%}.tna-column--width-3-4-small{width:75%;flex:none}.tna-column--margin-right-3-4-small{margin-right:75%}.tna-column--margin-left-3-4-small{margin-left:75%}.tna-column--flex-1-small{width:auto;flex:1 0}.tna-column--flex-2-small{width:auto;flex:2 0}.tna-column--flex-3-small{width:auto;flex:3 0}.tna-column--order-1-small{order:1}.tna-column--order-2-small{order:2}.tna-column--order-3-small{order:3}.tna-column--order-4-small{order:4}}@media(max-width: 30em){.tna-column--full-tiny{width:100%;flex:none}.tna-column--width-1-2-tiny{width:50%;flex:none}.tna-column--margin-right-1-2-tiny{margin-right:50%}.tna-column--margin-left-1-2-tiny{margin-left:50%}.tna-column--flex-1-tiny{width:auto;flex:1 0}.tna-column--flex-2-tiny{width:auto;flex:2 0}.tna-column--flex-3-tiny{width:auto;flex:3 0}.tna-column--order-1-tiny{order:1}.tna-column--order-2-tiny{order:2}.tna-column--order-3-tiny{order:3}.tna-column--order-4-tiny{order:4}}.tna-container--no-padding,.tna-container--no-padding-all,.tna-container--no-padding-all>.tna-column,.tna-column--no-padding,.tna-column--container--no-padding-all,.tna-column--container--no-padding-all>.tna-column{padding-right:0;padding-left:0}.tna-global-header{padding-top:1rem}.tna-template--light-theme .tna-global-header{background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%)}.tna-template--dark-theme .tna-global-header{background:#000}@media(prefers-color-scheme: light){.tna-global-header .tna-template--system-theme{background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%)}}@media(prefers-color-scheme: dark){.tna-global-header .tna-template--system-theme{background:#000}}.tna-global-header__main{padding-bottom:1.5rem}.tna-global-header__logo-wrapper{margin-top:.5rem;display:flex}.tna-global-header__logo{display:flex;gap:1rem;align-items:flex-end;text-decoration:none}.tna-global-header__logo:hover{text-decoration:none;outline:.3125rem #000 solid;outline:.3125rem var(--font-dark) solid;outline-offset:1px}.tna-global-header .tna-logo{width:6.75rem;height:6.75rem;flex-shrink:0}.tna-global-header__logo-strapline{padding-right:.625rem;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem;text-transform:uppercase;line-height:2.25rem}.tna-global-header__navigation-button-wrapper{display:none}.tna-global-header__hamburger{width:2rem;height:.25rem;display:block;background-color:#000;background-color:var(--font-dark)}.tna-global-header__hamburger::before,.tna-global-header__hamburger::after{height:.25rem;display:block;position:absolute;right:0;left:0;background-color:inherit;content:""}.tna-global-header__hamburger::before{top:0}.tna-global-header__hamburger::after{bottom:0}.tna-global-header__navigation-button{height:2rem;padding:0;display:block;position:relative;appearance:none;font-size:0;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;cursor:pointer}.tna-global-header__navigation-button--opened .tna-global-header__hamburger{height:0}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-global-header__navigation{margin:.5rem 0 0;height:100%;position:relative;columns:2;column-gap:2rem;list-style:none}.tna-global-header__navigation-item{break-inside:avoid}.tna-global-header__navigation-item-link{min-width:15rem;height:2.25rem;display:block;box-sizing:border-box;font-size:1.0625rem;text-decoration:none;line-height:2.25rem;border-bottom:.5px rgb(38 38 42/0.25) solid;border-bottom:.5px var(--keyline) solid}.tna-global-header__navigation-item-link:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation{padding:0 0 .5rem;display:flex;justify-content:flex-end;gap:1.5rem;font-size:0.9375rem;list-style:none}.tna-global-header__top-navigation-link{display:flex;gap:.5rem;align-items:center;text-decoration:none}.tna-global-header__top-navigation-link,.tna-global-header__top-navigation-link:link,.tna-global-header__top-navigation-link:visited{color:rgb(0 0 0/0.58);color:var(--font-light)}.tna-global-header__top-navigation-link:hover{color:#343338;color:var(--font-base);text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation-link svg{height:1em;display:inline-block}.tna-global-header__top-navigation-link svg path{fill:currentColor}@media(min-width: 48.0625em)and (max-width: 64em){.tna-global-header__navigation-item-link{font-size:1rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation-wrapper{width:100%}.tna-global-header--collapse-on-medium .tna-global-header__top-navigation-wrapper{flex:1;order:2}.tna-global-header--collapse-on-medium .tna-global-header__main{padding-bottom:1rem}.tna-global-header--collapse-on-medium .tna-global-header__logo{gap:.75rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-wrapper{margin-top:.5rem;margin-bottom:.5rem}.tna-global-header--collapse-on-medium .tna-logo{width:5rem;height:5rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-strapline{line-height:1.6666666667rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation{margin-bottom:.5rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item-link{height:auto}}@media(max-width: 48em){.tna-global-header__main{padding-bottom:0}.tna-global-header__logo-wrapper,.tna-global-header__navigation-button-wrapper{margin-top:0;margin-bottom:1rem}.tna-global-header__logo{gap:.75rem}.tna-global-header__navigation-button-wrapper{display:flex;align-items:center}.tna-global-header__navigation,.tna-global-header__navigation-item,.tna-global-header__navigation-item-link{height:auto}.tna-global-header__navigation{margin-top:0;columns:1;background-color:rgba(255,255,255,.1);border-top:3px #26262a solid;border-top:3px var(--keyline-dark) solid;border-bottom:3px #26262a solid;border-bottom:3px var(--keyline-dark) solid}.tna-global-header__navigation-item{flex-direction:column;align-items:flex-start}.tna-global-header__navigation-item-link{line-height:1.75rem;font-weight:700}.tna-global-header__navigation-item:last-child .tna-global-header__navigation-item-link{border-bottom:none}.tna-global-header__navigation-item-contents{display:block}.tna-global-header__navigation-item-children{margin-bottom:1rem;margin-left:1.5rem}.tna-global-header__top-navigation{padding-top:1rem;padding-bottom:1rem;justify-content:flex-start}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-global-header .tna-logo{width:4rem;height:4rem}.tna-global-header__logo-strapline{line-height:1.25rem}.tna-global-header__navigation{width:calc(100% + 4rem);left:-2rem}.tna-global-header__navigation-item-link{padding:.5rem 2rem}}@media(max-width: 30em){.tna-global-header .tna-logo{width:3.5rem;height:3.5rem}.tna-global-header__logo-strapline{line-height:1}.tna-global-header__navigation{width:calc(100% + 2rem);left:-1rem}.tna-global-header__navigation-item-link{padding:.5rem 1rem}}/*# sourceMappingURL=global-header.css.map */
+.tna-global-header{--background: var(--contrast-background);--font-base: var(--contrast-font-base);--font-dark: var(--contrast-font-dark);--font-light: var(--contrast-font-light);--icon-light: var(--contrast-icon-light);--link: var(--contrast-link);--link-visited: var(--contrast-link-visited);--keyline: var(--contrast-keyline);--keyline-dark: var(--contrast-keyline-dark);--button-text: var(--contrast-button-text);--button-background: var(--contrast-button-background);--button-hover-text: var(--contrast-button-hover-text);--button-hover-background: var(--contrast-button-hover-background);background-color:var(--background);color:rgb(255 255 255/0.95);color:var(--font-base)}.tna-global-header{padding-top:1rem}.tna-template--light-theme .tna-global-header{background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%)}.tna-template--dark-theme .tna-global-header{background:#000}@media(prefers-color-scheme: light){.tna-global-header .tna-template--system-theme{background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%)}}@media(prefers-color-scheme: dark){.tna-global-header .tna-template--system-theme{background:#000}}.tna-global-header__main{padding-bottom:1.5rem}.tna-global-header__logo-wrapper{margin-top:.5rem;display:flex}.tna-global-header__logo{display:flex;gap:1rem;align-items:flex-end;text-decoration:none}.tna-global-header__logo:hover{text-decoration:none;outline:.3125rem #000 solid;outline:.3125rem var(--font-dark) solid;outline-offset:1px}.tna-global-header .tna-logo{width:6.75rem;height:6.75rem;flex-shrink:0}.tna-global-header__logo-strapline{padding-right:.625rem;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem;text-transform:uppercase;line-height:2.25rem}.tna-global-header__navigation-button-wrapper{display:none}.tna-global-header__hamburger{width:2rem;height:.25rem;display:block;background-color:#000;background-color:var(--font-dark)}.tna-global-header__hamburger::before,.tna-global-header__hamburger::after{height:.25rem;display:block;position:absolute;right:0;left:0;background-color:inherit;content:""}.tna-global-header__hamburger::before{top:0}.tna-global-header__hamburger::after{bottom:0}.tna-global-header__navigation-button{height:2rem;padding:0;display:block;position:relative;appearance:none;font-size:0;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;cursor:pointer}.tna-global-header__navigation-button--opened .tna-global-header__hamburger{height:0}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-global-header__navigation-button--opened .tna-global-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-global-header__navigation{margin:.5rem 0 0;height:100%;position:relative;columns:2;column-gap:2rem;list-style:none}.tna-global-header__navigation-item{break-inside:avoid}.tna-global-header__navigation-item-link{min-width:15rem;height:2.25rem;display:block;box-sizing:border-box;font-size:1.0625rem;text-decoration:none;line-height:2.25rem;border-bottom:.5px rgb(38 38 42/0.25) solid;border-bottom:.5px var(--keyline) solid}.tna-global-header__navigation-item-link:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation{padding:0 0 .5rem;display:flex;justify-content:flex-end;gap:1.5rem;font-size:0.9375rem;list-style:none}.tna-global-header__top-navigation-link{display:flex;gap:.5rem;align-items:center;text-decoration:none}.tna-global-header__top-navigation-link,.tna-global-header__top-navigation-link:link,.tna-global-header__top-navigation-link:visited{color:rgb(0 0 0/0.58);color:var(--font-light)}.tna-global-header__top-navigation-link:hover{color:#343338;color:var(--font-base);text-decoration:underline;text-decoration-thickness:3.5px}.tna-global-header__top-navigation-link svg{height:1em;display:inline-block}.tna-global-header__top-navigation-link svg path{fill:currentColor}@media(min-width: 48.0625em)and (max-width: 64em){.tna-global-header__navigation{column-gap:1rem}.tna-global-header__navigation-item-link{font-size:1rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation-wrapper{width:100%}.tna-global-header--collapse-on-medium .tna-global-header__top-navigation-wrapper{flex:1;order:2}.tna-global-header--collapse-on-medium .tna-global-header__main{padding-bottom:1rem}.tna-global-header--collapse-on-medium .tna-global-header__logo{gap:.75rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-wrapper{margin-top:.5rem;margin-bottom:.5rem}.tna-global-header--collapse-on-medium .tna-logo{width:5rem;height:5rem}.tna-global-header--collapse-on-medium .tna-global-header__logo-strapline{line-height:1.6666666667rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation{margin-bottom:.5rem}.tna-global-header--collapse-on-medium .tna-global-header__navigation,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item,.tna-global-header--collapse-on-medium .tna-global-header__navigation-item-link{height:auto}}@media(max-width: 48em){.tna-global-header__main{padding-bottom:0}.tna-global-header__logo-wrapper,.tna-global-header__navigation-button-wrapper{margin-top:0;margin-bottom:1rem}.tna-global-header__logo{gap:.75rem}.tna-global-header__navigation-button-wrapper{display:flex;align-items:center}.tna-global-header__navigation,.tna-global-header__navigation-item,.tna-global-header__navigation-item-link{height:auto}.tna-global-header__navigation{margin-top:0;columns:1;background-color:rgba(255,255,255,.1);border-top:2px #26262a solid;border-top:2px var(--keyline-dark) solid;border-bottom:2px #26262a solid;border-bottom:2px var(--keyline-dark) solid}.tna-global-header__navigation-item{flex-direction:column;align-items:flex-start}.tna-global-header__navigation-item-link{line-height:1.75rem;font-weight:700}.tna-global-header__navigation-item:last-child .tna-global-header__navigation-item-link{border-bottom:none}.tna-global-header__navigation-item-contents{display:block}.tna-global-header__navigation-item-children{margin-bottom:1rem;margin-left:1.5rem}.tna-global-header__top-navigation{padding-top:1rem;padding-bottom:1rem;justify-content:flex-start}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-global-header .tna-logo{width:4rem;height:4rem}.tna-global-header__logo-strapline{line-height:1.25rem}.tna-global-header__navigation{width:calc(100% + 4rem);left:-2rem}.tna-global-header__navigation-item-link{padding:.5rem 2rem}}@media(max-width: 30em){.tna-global-header .tna-logo{width:3.5rem;height:3.5rem}.tna-global-header__logo-strapline{line-height:1}.tna-global-header__navigation{width:calc(100% + 2rem);left:-1rem}.tna-global-header__navigation-item-link{padding:.5rem 1rem}}/*# sourceMappingURL=global-header.css.map */

package/nationalarchives/components/global-header/global-header.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/utilities/_colour.scss","../../../../src/nationalarchives/utilities/_global.scss","../../../../src/nationalarchives/components/grid/grid.scss","../../../../src/nationalarchives/variables/_grid.scss","../../../../src/nationalarchives/tools/_grid.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/global-header/global-header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAqOA,4CACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEAlJA,mCAPA,4BACA,uBA6LF,uBACE,uCACA,qCACA,qCACA,uCACA,uCACA,2BACA,mCACA,iCACA,2CAhMA,mCAPA,4BACA,uBAiNF,qBA7ME,yBAEA,wCAPA,cACA,uBAkOF,6BACE,6CACA,qBACA,0BACA,8BACA,iCAGA,8BACA,wBACA,kCACA,kCAIA,kCAIA,8CA/OA,mCAPA,cACA,uBA8PE,mCADF,yDAEI,gBACA,yBAIJ,uDACE,gBACA,wBC1VJ,cDwFE,yBAEA,wCCvFA,4BDGI,+jDCHJ,4BDWI,6kDCJF,+BAPF,4BDmBI,89CCTA,8BACE,kCAIJ,+DAfF,4BD2BI,4kDCPJ,2BDjBI,4hDCqBJ,0BDbI,4kDCiBJ,mCDTI,89CCYF,qCACE,iCAGF,4DDRE,2kDCaJ,6BDNE,iDACA,yDACA,4CACA,4CACA,+CACA,gDACA,uCACA,+CACA,4CACA,iDACA,mFAEA,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDACA,oDAEE,iDACA,yDACA,wDCVJ,6BDFE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDACA,oDAME,iDACA,yDACA,wDCVJ,4BDNE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDACA,oDAUE,+CACA,yDACA,sDCVJ,2BDVE,kDACA,kDACA,qDACA,sDACA,6CACA,qDACA,kDACA,uDACA,oDAcE,gDACA,yDACA,uDCVJ,+BACE,gBACE,0BACA,4BAwBJ,oBDgCI,oCAIA,gCChCJ,yBD4BI,yBAIA,qCEpIN,cACE,gBACA,WACA,YAUA,iCAGF,oBACE,gBACA,SACA,UAEA,oFACE,aACA,sBAEA,kGACE,OCrBN,eACE,UCNwB,SDOxB,WACA,kBACA,iBACA,mBACA,kBAEA,sBAEA,aACA,eACA,2BACA,oBAEA,0DAEE,mBAGF,oBACE,eAGF,wBACE,uBAIJ,YACE,SACA,mBACA,kBAEA,sBAEA,uBACE,aACA,eACA,wBACA,oBAGF,uBACE,sBAGF,0BACE,kBAGF,0BACE,oBEhDA,kBACE,WACA,UAUI,wBACE,oBACA,UAGF,+BACE,2BAGF,8BACE,0BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,wBACE,qBACA,UAGF,+BACE,4BAGF,8BACE,2BAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,uBACE,UACA,UAGF,8BACE,iBAGF,6BACE,gBAVF,uBACE,qBACA,UAGF,8BACE,4BAGF,6BACE,2BAVF,yBACE,qBACA,UAGF,gCACE,4BAGF,+BACE,2BAwBN,oBACE,WAEA,SAHF,oBACE,WAEA,SAHF,oBACE,WAEA,SAKF,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,EACX,qBACE,MAFS,ECvCf,kDDdE,yBACE,WACA,UAUI,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,UACA,UAGF,qCACE,iBAGF,oCACE,gBAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAVF,8BACE,qBACA,UAGF,qCACE,4BAGF,oCACE,2BAwBN,2BACE,WAEA,SAHF,2BACE,WAEA,SAHF,2BACE,WAEA,SAKF,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,EACX,4BACE,MAFS,GC3Bf,wBHiCA,eACE,oBACA,mBAGF,YACE,oBACA,oBG9CF,kDDpBE,wBACE,WACA,UAUI,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAVF,6BACE,UACA,UAGF,oCACE,iBAGF,mCACE,gBAwBN,0BACE,WAEA,SAHF,0BACE,WAEA,SAHF,0BACE,WAEA,SAKF,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,EACX,2BACE,MAFS,GC3Bf,wBD1BE,uBACE,WACA,UAUI,4BACE,UACA,UAGF,mCACE,iBAGF,kCACE,gBAwBN,yBACE,WAEA,SAHF,yBACE,WAEA,SAHF,yBACE,WAEA,SAKF,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,EACX,0BACE,MAFS,GFyBjB,uNAME,gBACA,eIpFF,mBACE,iBAIA,8CACE,wEAOF,6CACE,gBAIA,oCADF,+CAEI,yEAOF,mCATF,+CAUI,iBAIJ,yBACE,sBAGF,iCACE,iBAEA,aAGF,yBACE,aACA,SACA,qBAEA,qBAEA,+BACE,qBPoFF,4BAIA,wCOrFE,mBAIJ,6BACE,cACA,eAEA,cAGF,mCACE,sBC7CF,YCZoB,gDDapB,YCZoB,IDbpB,kBDyEE,yBACA,oBAGF,8CACE,aAGF,8BACE,WACA,cAEA,cPIF,sBAEA,kCOFE,2EAEE,cAEA,cAEA,kBACA,QACA,OAEA,yBAEA,WAGF,sCACE,MAGF,qCACE,SAIJ,sCACE,YACA,UAEA,cAEA,kBAEA,gBAEA,YAEA,gBAEA,6BACA,sBAEA,eAGE,4EACE,SAEA,oFACE,YAEA,0BAGF,mFACE,eAEA,yBAMR,+BACE,iBACA,YAEA,kBAEA,UACA,gBACA,gBAGF,oCACE,mBAGF,yCACE,gBACA,eAEA,cACA,sBC3KF,oBD8KE,qBACA,oBPvEE,4CAIA,wCOuEF,+CCpIF,0BACA,0BC3CsC,MFmLtC,mCACE,kBAEA,aACA,yBACA,WC7LF,oBDgME,gBAMF,wCACE,aACA,UACA,mBAEA,qBAEA,qIPzHF,sBACA,wBO8HE,8CP/HF,cACA,uBQtCA,0BACA,0BC3CsC,MFmNpC,4CACE,WAEA,qBAEA,iDACE,kBD5MN,kDCkNE,yCCpOF,eDwOE,8EACE,WAGF,kFACE,OACA,QAGF,gEACE,oBAGF,gEACE,WAGF,wEACE,iBACA,oBAGF,iDACE,WACA,YAGF,0EACE,4BAGF,sEACE,oBAGF,iOAGE,aDxNJ,wBC6NE,yBACE,iBAGF,+EAEE,aACA,mBAGF,yBACE,WAGF,8CACE,aACA,mBAGF,4GAGE,YAGF,+BACE,aAEA,UAEA,sCPzMA,6BAIA,yCAJA,gCAIA,4CO2MF,oCACE,sBACA,uBAGF,yCACE,oBCrTJ,YCEsB,IFuTpB,wFACE,mBAGF,6CACE,cAGF,6CACE,mBACA,mBAGF,mCACE,iBACA,oBAEA,4BD1TJ,kDC+TE,6BACE,WACA,YAGF,mCACE,oBAGF,+BACE,wBAEA,WAGF,yCACE,oBDzUJ,wBC8UE,6BACE,aACA,cAGF,mCACE,cAGF,+BACE,wBAEA,WAGF,yCACE","file":"global-header.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"../tools/colour\";\n\n// :root {\n//   @include colour.colour-css-vars;\n// }\n\n.tna-template {\n  @include colour.colour-background(\"page-background\");\n\n  &--system-theme {\n    @include colour.colour-css-vars;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour.colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) {\n      @include colour.colour-css-vars-high-contrast;\n\n      * {\n        background-image: none !important;\n      }\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour.colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  &--light-theme {\n    @include colour.colour-css-vars;\n  }\n\n  &--dark-theme {\n    @include colour.colour-css-vars-dark;\n  }\n\n  &--high-contrast-theme {\n    @include colour.colour-css-vars-high-contrast;\n\n    * {\n      background-image: none !important;\n    }\n\n    &.tna-template--dark-theme {\n      @include colour.colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  &--yellow-accent {\n    @include colour.accent-css-vars(\"yellow\");\n  }\n\n  &--pink-accent {\n    @include colour.accent-css-vars(\"pink\");\n  }\n\n  &--orange-accent {\n    @include colour.accent-css-vars(\"orange\");\n  }\n\n  &--green-accent {\n    @include colour.accent-css-vars(\"green\");\n  }\n\n  &--blue-accent {\n    @include colour.accent-css-vars(\"blue\");\n  }\n\n  @media (prefers-reduced-motion) {\n    * {\n      animation: none !important;\n      transition: none !important;\n    }\n  }\n}\n\n.tna-background {\n  &-tint {\n    @include colour.tint;\n  }\n\n  &-contrast {\n    @include colour.contrast;\n  }\n\n  &-accent {\n    @include colour.accent;\n  }\n\n  &-accent-light {\n    @include colour.accent-light;\n  }\n}\n\n.tna-border {\n  &-keyline {\n    @include colour.colour-border(\"keyline\", 1px);\n  }\n\n  &-keyline-dark {\n    @include colour.colour-border(\"keyline-dark\", 1px);\n  }\n}\n",".tna-template {\n  min-width: 320px;\n  width: 100%;\n  height: 100%;\n\n  /*\n   * ------------------------------------------\n   * Support ended with iOS 13 released on 19th\n   * September 2019. Deprecate in the future if\n   * iOS <13 share drops low enough.\n   * https://caniuse.com/mdn-css_properties_-webkit-overflow-scrolling\n   * ------------------------------------------\n   */\n  -webkit-overflow-scrolling: touch;\n}\n\n.tna-template__body {\n  min-height: 100%;\n  margin: 0;\n  padding: 0;\n\n  &:has(.tna-header):has(#main-content[role=\"main\"]):has(.tna-footer) {\n    display: flex;\n    flex-direction: column;\n\n    #main-content {\n      flex: 1;\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../../variables/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/grid\" as gridTools;\n\n.tna-container {\n  max-width: grid.$largest-container-width;\n  width: 100%;\n  margin-right: auto;\n  margin-left: auto;\n  padding-right: math.div(grid.$gutter-width, 2);\n  padding-left: math.div(grid.$gutter-width, 2);\n\n  box-sizing: border-box;\n\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: stretch;\n\n  &--no-padding,\n  &--no-padding-all {\n    max-width: grid.$largest-container-width - (grid.$gutter-width * 2);\n  }\n\n  &--max {\n    max-width: none;\n  }\n\n  &--centred {\n    justify-content: center;\n  }\n}\n\n.tna-column {\n  margin: 0;\n  padding-right: math.div(grid.$gutter-width, 2);\n  padding-left: math.div(grid.$gutter-width, 2);\n\n  box-sizing: border-box;\n\n  &--container {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: stretch;\n    align-items: stretch;\n  }\n\n  &--align-top {\n    align-self: flex-start;\n  }\n\n  &--align-centre {\n    align-self: center;\n  }\n\n  &--align-bottom {\n    align-self: flex-end;\n  }\n}\n\n@include gridTools.columns-generator(grid.$column-count);\n\n@include media.on-medium {\n  @include gridTools.columns-generator(grid.$column-count-medium, \"medium\");\n}\n\n@include media.on-tiny {\n  .tna-container {\n    padding-right: math.div(grid.$gutter-width-tiny, 2);\n    padding-left: math.div(grid.$gutter-width-tiny, 2);\n  }\n\n  .tna-column {\n    padding-right: math.div(grid.$gutter-width-tiny, 2);\n    padding-left: math.div(grid.$gutter-width-tiny, 2);\n  }\n}\n\n@include media.on-small {\n  @include gridTools.columns-generator(grid.$column-count-small, \"small\");\n}\n\n@include media.on-tiny {\n  @include gridTools.columns-generator(grid.$column-count-tiny, \"tiny\");\n}\n\n.tna-container--no-padding,\n.tna-container--no-padding-all,\n.tna-container--no-padding-all > .tna-column,\n.tna-column--no-padding,\n.tna-column--container--no-padding-all,\n.tna-column--container--no-padding-all > .tna-column {\n  padding-right: 0;\n  padding-left: 0;\n}\n","$largest-container-width: 75.25rem !default;\n\n$gutter-width: 2rem !default;\n$gutter-width-tiny: 1rem !default;\n\n$column-count: 12;\n$column-count-medium: 6;\n$column-count-small: 4;\n$column-count-tiny: 2;\n","@use \"sass:math\";\n@use \"../variables/grid\";\n\n@mixin columns-generator($count, $suffix: \"\") {\n  @if $suffix != \"\" {\n    $suffix: \"-\" + $suffix;\n  }\n\n  .tna-column {\n    &--full#{$suffix} {\n      width: 100%;\n      flex: none;\n    }\n\n    @for $i from 1 through $count - 1 {\n      $simplest-fraction-found: false;\n\n      @for $j from math.div($count, 2) through 1 {\n        @if (\n          $count % $j == 0 and $i % $j == 0 and $simplest-fraction-found != true\n        ) {\n          &--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n            width: math.div(100%, $count) * $i;\n            flex: none;\n          }\n\n          &--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n            margin-right: math.div(100%, $count) * $i;\n          }\n\n          &--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {\n            margin-left: math.div(100%, $count) * $i;\n          }\n\n          $simplest-fraction-found: true;\n        }\n      }\n\n      @if $simplest-fraction-found != true {\n        &--width-#{$i}-#{$count}#{$suffix} {\n          width: math.div(100%, $count) * $i;\n          flex: none;\n        }\n\n        &--margin-right-#{$i}-#{$count}#{$suffix} {\n          margin-right: math.div(100%, $count) * $i;\n        }\n\n        &--margin-left-#{$i}-#{$count}#{$suffix} {\n          margin-left: math.div(100%, $count) * $i;\n        }\n      }\n    }\n\n    @for $i from 1 through 3 {\n      &--flex-#{$i}#{$suffix} {\n        width: auto;\n\n        flex: $i 0;\n      }\n    }\n\n    @for $i from 1 through 4 {\n      &--order-#{$i}#{$suffix} {\n        order: $i;\n      }\n    }\n  }\n}\n","@use \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{media.$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n","@use \"sass:math\";\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/colour\";\n@use \"../../tools/typography\";\n@use \"../../tools/media\";\n@use \"../../utilities/colour\" as colourUtils;\n@use \"../../utilities/global\";\n// @use \"../../utilities/typography\" as typographyUtils;\n@use \"../grid\";\n\n.tna-global-header {\n  padding-top: 1rem;\n\n  @include colour.contrast;\n\n  .tna-template--light-theme & {\n    background: linear-gradient(\n      0deg,\n      rgb(34 34 34 / 100%) 0%,\n      rgb(0 0 0 / 100%) 100%\n    );\n  }\n\n  .tna-template--dark-theme & {\n    background: #000;\n  }\n\n  .tna-template--system-theme {\n    @media (prefers-color-scheme: light) {\n      background: linear-gradient(\n        0deg,\n        rgb(34 34 34 / 100%) 0%,\n        rgb(0 0 0 / 100%) 100%\n      );\n    }\n\n    @media (prefers-color-scheme: dark) {\n      background: #000;\n    }\n  }\n\n  &__main {\n    padding-bottom: 1.5rem;\n  }\n\n  &__logo-wrapper {\n    margin-top: 0.5rem;\n\n    display: flex;\n  }\n\n  &__logo {\n    display: flex;\n    gap: 1rem;\n    align-items: flex-end;\n\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n\n      @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n      outline-offset: 1px;\n    }\n  }\n\n  .tna-logo {\n    width: 6.75rem;\n    height: 6.75rem;\n\n    flex-shrink: 0;\n  }\n\n  &__logo-strapline {\n    padding-right: 0.625rem;\n\n    @include typography.heading-font;\n    @include typography.relative-font-size(20);\n    text-transform: uppercase;\n    line-height: math.div(6.75rem, 3);\n  }\n\n  &__navigation-button-wrapper {\n    display: none;\n  }\n\n  &__hamburger {\n    width: 2rem;\n    height: 0.25rem;\n\n    display: block;\n\n    @include colour.colour-background(\"font-dark\");\n\n    &::before,\n    &::after {\n      height: 0.25rem;\n\n      display: block;\n\n      position: absolute;\n      right: 0;\n      left: 0;\n\n      background-color: inherit;\n\n      content: \"\";\n    }\n\n    &::before {\n      top: 0;\n    }\n\n    &::after {\n      bottom: 0;\n    }\n  }\n\n  &__navigation-button {\n    height: 2rem;\n    padding: 0;\n\n    display: block;\n\n    position: relative;\n\n    appearance: none;\n\n    font-size: 0;\n\n    background: none;\n\n    border: 0 transparent solid;\n    border-width: 0.25rem 0;\n\n    cursor: pointer;\n\n    &--opened {\n      .tna-global-header__hamburger {\n        height: 0;\n\n        &::before {\n          top: 0.625rem;\n\n          transform: rotate(-135deg);\n        }\n\n        &::after {\n          bottom: 0.625rem;\n\n          transform: rotate(135deg);\n        }\n      }\n    }\n  }\n\n  &__navigation {\n    margin: 0.5rem 0 0;\n    height: 100%;\n\n    position: relative;\n\n    columns: 2;\n    column-gap: 2rem;\n    list-style: none;\n  }\n\n  &__navigation-item {\n    break-inside: avoid;\n  }\n\n  &__navigation-item-link {\n    min-width: 15rem;\n    height: math.div(6.75rem, 3);\n\n    display: block;\n    box-sizing: border-box;\n\n    @include typography.relative-font-size(17);\n    text-decoration: none;\n    line-height: math.div(6.75rem, 3);\n\n    @include colour.colour-border(\"keyline\", 0.5px, solid, bottom);\n\n    &:hover {\n      @include typography.interacted-text-decoration;\n    }\n  }\n\n  &__top-navigation {\n    padding: 0 0 0.5rem;\n\n    display: flex;\n    justify-content: flex-end;\n    gap: 1.5rem;\n\n    @include typography.relative-font-size(15);\n    list-style: none;\n  }\n\n  &__top-navigation-item {\n  }\n\n  &__top-navigation-link {\n    display: flex;\n    gap: 0.5rem;\n    align-items: center;\n\n    text-decoration: none;\n\n    &,\n    &:link,\n    &:visited {\n      @include colour.colour-font(\"font-light\");\n    }\n\n    &:hover {\n      @include colour.colour-font(\"font-base\");\n      @include typography.interacted-text-decoration;\n    }\n\n    svg {\n      height: 1em;\n\n      display: inline-block;\n\n      path {\n        fill: currentColor;\n      }\n    }\n  }\n\n  @include media.on-medium {\n    &__navigation-item-link {\n      @include typography.relative-font-size(16);\n    }\n\n    &--collapse-on-medium &__navigation-wrapper {\n      width: 100%;\n    }\n\n    &--collapse-on-medium &__top-navigation-wrapper {\n      flex: 1;\n      order: 2;\n    }\n\n    &--collapse-on-medium &__main {\n      padding-bottom: 1rem;\n    }\n\n    &--collapse-on-medium &__logo {\n      gap: 0.75rem;\n    }\n\n    &--collapse-on-medium &__logo-wrapper {\n      margin-top: 0.5rem;\n      margin-bottom: 0.5rem;\n    }\n\n    &--collapse-on-medium .tna-logo {\n      width: 5rem;\n      height: 5rem;\n    }\n\n    &--collapse-on-medium &__logo-strapline {\n      line-height: math.div(5rem, 3);\n    }\n\n    &--collapse-on-medium &__navigation {\n      margin-bottom: 0.5rem;\n    }\n\n    &--collapse-on-medium &__navigation,\n    &--collapse-on-medium &__navigation-item,\n    &--collapse-on-medium &__navigation-item-link {\n      height: auto;\n    }\n  }\n\n  @include media.on-mobile {\n    &__main {\n      padding-bottom: 0;\n    }\n\n    &__logo-wrapper,\n    &__navigation-button-wrapper {\n      margin-top: 0;\n      margin-bottom: 1rem;\n    }\n\n    &__logo {\n      gap: 0.75rem;\n    }\n\n    &__navigation-button-wrapper {\n      display: flex;\n      align-items: center;\n    }\n\n    &__navigation,\n    &__navigation-item,\n    &__navigation-item-link {\n      height: auto;\n    }\n\n    &__navigation {\n      margin-top: 0;\n\n      columns: 1;\n\n      background-color: rgb(255 255 255 / 10%);\n\n      @include colour.colour-border(\"keyline-dark\", 3px, solid, top);\n      @include colour.colour-border(\"keyline-dark\", 3px, solid, bottom);\n    }\n\n    &__navigation-item {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n\n    &__navigation-item-link {\n      line-height: 1.75rem;\n      @include typography.main-font-weight-bold;\n    }\n\n    &__navigation-item:last-child &__navigation-item-link {\n      border-bottom: none;\n    }\n\n    &__navigation-item-contents {\n      display: block;\n    }\n\n    &__navigation-item-children {\n      margin-bottom: 1rem;\n      margin-left: 1.5rem;\n    }\n\n    &__top-navigation {\n      padding-top: 1rem;\n      padding-bottom: 1rem;\n\n      justify-content: flex-start;\n    }\n  }\n\n  @include media.on-small {\n    .tna-logo {\n      width: 4rem;\n      height: 4rem;\n    }\n\n    &__logo-strapline {\n      line-height: 1.25rem;\n    }\n\n    &__navigation {\n      width: calc(100% + #{gridVars.$gutter-width * 2});\n\n      left: -#{gridVars.$gutter-width};\n    }\n\n    &__navigation-item-link {\n      padding: 0.5rem gridVars.$gutter-width;\n    }\n  }\n\n  @include media.on-tiny {\n    .tna-logo {\n      width: 3.5rem;\n      height: 3.5rem;\n    }\n\n    &__logo-strapline {\n      line-height: 1;\n    }\n\n    &__navigation {\n      width: calc(100% + #{gridVars.$gutter-width-tiny * 2});\n\n      left: -#{gridVars.$gutter-width-tiny};\n    }\n\n    &__navigation-item-link {\n      padding: 0.5rem gridVars.$gutter-width-tiny;\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n  font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n  font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  text-transform: uppercase;\n  line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/components/global-header/global-header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss","../../../../src/nationalarchives/tools/_media.scss"],"names":[],"mappings":"AA6PA,mBACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEA1KA,mCAPA,4BACA,uBCpFF,mBACE,iBAIA,8CACE,wEAOF,6CACE,gBAIA,oCADF,+CAEI,yEAOF,mCATF,+CAUI,iBAIJ,yBACE,sBAGF,iCACE,iBAEA,aAGF,yBACE,aACA,SACA,qBAEA,qBAEA,+BACE,qBD4FF,4BAIA,wCC7FE,mBAIJ,6BACE,cACA,eAEA,cAGF,mCACE,sBCzCF,YCZoB,gDDapB,YCZoB,IDbpB,kBDqEE,yBACA,oBAGF,8CACE,aAGF,8BACE,WACA,cAEA,cDQF,sBAEA,kCCNE,2EAEE,cAEA,cAEA,kBACA,QACA,OAEA,yBAEA,WAGF,sCACE,MAGF,qCACE,SAIJ,sCACE,YACA,UAEA,cAEA,kBAEA,gBAEA,YAEA,gBAEA,6BACA,sBAEA,eAGE,4EACE,SAEA,oFACE,YAEA,0BAGF,mFACE,eAEA,yBASR,+BACE,iBACA,YAEA,kBAEA,UACA,gBACA,gBAGF,oCACE,mBAGF,yCACE,gBACA,eAEA,cACA,sBC1KF,oBD6KE,qBACA,oBDlEE,4CAIA,wCCkEF,+CCnIF,0BACA,0BC3CsC,MFkLtC,mCACE,kBAEA,aACA,yBACA,WC5LF,oBD+LE,gBAMF,wCACE,aACA,UACA,mBAEA,qBAEA,qIDxHF,sBACA,wBC6HE,8CD9HF,cACA,uBEtCA,0BACA,0BC3CsC,MFkNpC,4CACE,WAEA,qBAEA,iDACE,kBG3MN,kDHiNE,+BACE,gBAGF,yCCvOF,eD2OE,8EACE,WAGF,kFACE,OACA,QAGF,gEACE,oBAGF,gEACE,WAGF,wEACE,iBACA,oBAGF,iDACE,WACA,YAGF,0EACE,4BAGF,sEACE,oBAGF,iOAGE,aG3NJ,wBHgOE,yBACE,iBAGF,+EAEE,aACA,mBAGF,yBACE,WAGF,8CACE,aACA,mBAGF,4GAGE,YAGF,+BACE,aAEA,UAEA,sCDxMA,6BAIA,yCAJA,gCAIA,4CC0MF,oCACE,sBACA,uBAGF,yCACE,oBCxTJ,YCEsB,IF0TpB,wFACE,mBAGF,6CACE,cAGF,6CACE,mBACA,mBAGF,mCACE,iBACA,oBAEA,4BG7TJ,kDHkUE,6BACE,WACA,YAGF,mCACE,oBAGF,+BACE,wBAEA,WAGF,yCACE,oBG5UJ,wBHiVE,6BACE,aACA,cAGF,mCACE,cAGF,+BACE,wBAEA,WAGF,yCACE","file":"global-header.css","sourcesContent":["@use \"sass:map\";\n@use \"sass:list\";\n@use \"../variables/colour\";\n@use \"../tools/media\";\n\n@function brand-colour($colour, $opacity: 1) {\n  @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n  @each $name, $value in colour.$colour-palette-default {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n  @each $name, $value in colour.$colour-palette-high-contrast-dark {\n    @if not list.index($excludes, $name) {\n      --#{$name}: #{$value};\n    }\n  }\n}\n\n@mixin accent-css-vars($colour) {\n  @if $colour == \"yellow\" {\n    --accent-background: #{brand-colour(\"yellow\")} !important;\n    --accent-background-light: #{brand-colour(\"cream\")} !important;\n    --accent-font-base: #{brand-colour(\"black\")} !important;\n    --accent-font-dark: #{brand-colour(\"black\")} !important;\n    --accent-font-light: #{brand-colour(\"black\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"black\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"black\")} !important;\n    --accent-link-visited: #{brand-colour(\"black\")} !important;\n    --accent-keyline: #{brand-colour(\"black\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"black\", 0.8)} !important;\n    --button-accent-background: #{brand-colour(\"yellow\")} !important;\n  } @else {\n    --accent-font-base: #{brand-colour(\"white\")} !important;\n    --accent-font-dark: #{brand-colour(\"white\")} !important;\n    --accent-font-light: #{brand-colour(\"white\", 0.7)} !important;\n    --accent-icon-light: #{brand-colour(\"white\", 0.45)} !important;\n    --accent-link: #{brand-colour(\"white\")} !important;\n    --accent-link-visited: #{brand-colour(\"white\")} !important;\n    --accent-keyline: #{brand-colour(\"white\", 0.5)} !important;\n    --accent-keyline-dark: #{brand-colour(\"white\", 0.8)} !important;\n    --button-accent-text: #{brand-colour(\"white\")} !important;\n    @if $colour == \"pink\" {\n      --accent-background: #{brand-colour(\"maroon\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-pink\")} !important;\n      --button-accent-background: #{brand-colour(\"maroon\")} !important;\n    } @else if $colour == \"orange\" {\n      --accent-background: #{brand-colour(\"chestnut\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-orange\")} !important;\n      --button-accent-background: #{brand-colour(\"chestnut\")} !important;\n    } @else if $colour == \"green\" {\n      --accent-background: #{brand-colour(\"forest\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-green\")} !important;\n      --button-accent-background: #{brand-colour(\"forest\")} !important;\n    } @else if $colour == \"blue\" {\n      --accent-background: #{brand-colour(\"navy\")} !important;\n      --accent-background-light: #{brand-colour(\"pastel-blue\")} !important;\n      --button-accent-background: #{brand-colour(\"navy\")} !important;\n    }\n  }\n}\n\n@mixin colour-font(\n  $colour,\n  $important: false,\n  $default-palette: colour.$colour-palette-default\n) {\n  color: map.get($default-palette, $colour) if($important, !important, null);\n  color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  background-color: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n  background-color: #{brand-colour($brandColour)} if($important, !important, null);\n}\n\n@mixin colour-border(\n  $colour,\n  $width: \"\",\n  $style: solid,\n  $direction: \"\",\n  $important: false\n) {\n  @if $direction != \"\" {\n    @if $width != \"\" {\n      $property: border-#{$direction};\n      border-#{$direction}: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border-#{$direction}: $width\n        var(--#{$colour})\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: map.get(\n          colour.$colour-palette-default,\n          $colour\n        )\n        if($important, !important, null);\n      border-#{$direction}-color: var(--#{$colour})\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        map.get(colour.$colour-palette-default, $colour)\n        $style\n        if($important, !important, null);\n      border: $width var(--#{$colour}) $style if($important, !important, null);\n    } @else {\n      border-color: map.get(colour.$colour-palette-default, $colour)\n        if($important, !important, null);\n      border-color: var(--#{$colour}) if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width\n      map.get(colour.$colour-palette-default, $colour)\n      $style\n      if($important, !important, null);\n    outline: $width var(--#{$colour}) $style if($important, !important, null);\n  } @else {\n    outline-color: map.get(colour.$colour-palette-default, $colour)\n      if($important, !important, null);\n    outline-color: var(--#{$colour}) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: map.get(colour.$colour-palette-default, $colour)\n    if($important, !important, null);\n  fill: var(--#{$colour}) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction) {\n  @include colour-border(\"keyline\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-dark($direction) {\n  @include colour-border(\"keyline-dark\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-accent($direction) {\n  @include colour-border(\"accent-background\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-error($direction) {\n  @include colour-border(\"form-error\", 5px, solid, $direction);\n}\n\n@mixin thick-keyline-brand($direction, $brandColour) {\n  border-#{$direction}: 5px #{brand-colour($brandColour)} solid;\n}\n\n%light {\n  @include colour-css-vars(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast(\"form-error\");\n  }\n}\n\n@mixin light {\n  @extend %light;\n}\n\n%dark {\n  @include colour-css-vars-dark(\"form-error\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast-dark(\"form-error\");\n  }\n}\n\n@mixin dark {\n  @extend %dark;\n}\n\n%plain {\n  .tna-template--system-theme & {\n    @extend %light;\n\n    @media (prefers-color-scheme: dark) {\n      @include colour-css-vars-dark;\n    }\n\n    @media (prefers-contrast: more) and (prefers-color-scheme: dark) {\n      @include colour-css-vars-high-contrast-dark;\n    }\n  }\n\n  .tna-template--light-theme & {\n    @include colour-css-vars;\n  }\n\n  .tna-template--dark-theme & {\n    @include colour-css-vars-dark;\n  }\n\n  .tna-template--high-contrast-theme & {\n    @include colour-css-vars-high-contrast;\n  }\n\n  .tna-template--high-contrast-theme.tna-template--dark-theme & {\n    @include colour-css-vars-high-contrast-dark;\n  }\n\n  --background: var(--page-background);\n}\n\n@mixin plain {\n  @extend %plain;\n}\n\n%contrast {\n  --background: var(--contrast-background);\n  --font-base: var(--contrast-font-base);\n  --font-dark: var(--contrast-font-dark);\n  --font-light: var(--contrast-font-light);\n  --icon-light: var(--contrast-icon-light);\n  --link: var(--contrast-link);\n  --link-visited: var(--contrast-link-visited);\n  --keyline: var(--contrast-keyline);\n  --keyline-dark: var(--contrast-keyline-dark);\n  --button-text: var(--contrast-button-text);\n  --button-background: var(--contrast-button-background);\n  --button-hover-text: var(--contrast-button-hover-text);\n  --button-hover-background: var(--contrast-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin contrast {\n  @extend %contrast;\n}\n\n%contrast-on-mobile {\n  @include media.on-mobile {\n    --background: var(--contrast-background);\n    --font-base: var(--contrast-font-base);\n    --font-dark: var(--contrast-font-dark);\n    --font-light: var(--contrast-font-light);\n    --icon-light: var(--contrast-icon-light);\n    --link: var(--contrast-link);\n    --link-visited: var(--contrast-link-visited);\n    --keyline: var(--contrast-keyline);\n    --keyline-dark: var(--contrast-keyline-dark);\n    --button-text: var(--contrast-button-text);\n    --button-background: var(--contrast-button-background);\n    --button-hover-text: var(--contrast-button-hover-text);\n    --button-hover-background: var(--contrast-button-hover-background);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%accent {\n  --background: var(--accent-background);\n  --font-base: var(--accent-font-base);\n  --font-dark: var(--accent-font-dark);\n  --font-light: var(--accent-font-light);\n  --icon-light: var(--accent-icon-light);\n  --link: var(--accent-link);\n  --link-visited: var(--accent-link);\n  --keyline: var(--accent-keyline);\n  --keyline-dark: var(--accent-keyline-dark);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\", false, colour.$colour-palette-dark);\n}\n\n@mixin accent {\n  @extend %accent;\n}\n\n%tint {\n  @include colour-background(\"background-tint\");\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\n}\n\n%accent-background {\n  @include colour-background(\"accent-background\");\n}\n\n@mixin accent-background {\n  @extend %accent-background;\n}\n\n%accent-light {\n  --background: var(--accent-background-light);\n  --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n  --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n  --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n  --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n  // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n  // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n  --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n  --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n  --button-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-background\"\n    )};\n  --button-hover-text: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-text\"\n    )};\n  --button-hover-background: #{map.get(\n      colour.$colour-palette-default,\n      \"button-hover-background\"\n    )};\n\n  @include colour-background(\"background\");\n  @include colour-font(\"font-base\");\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      --link: #{map.get(colour.$colour-palette-default, \"link\")};\n      --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n    }\n  }\n\n  .tna-template--dark-theme & {\n    --link: #{map.get(colour.$colour-palette-default, \"link\")};\n    --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n  }\n}\n\n@mixin accent-light {\n  @extend %accent-light;\n}\n\n@mixin on-high-contrast {\n  .tna-template--high-contrast-theme & {\n    @content;\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-contrast: more) {\n      @content;\n    }\n  }\n}\n\n@mixin on-forced-colours {\n  @media (forced-colors: active) {\n    @content;\n  }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n  @include on-forced-colours {\n    @content;\n  }\n\n  @include on-high-contrast {\n    @content;\n  }\n}\n","@use \"sass:math\";\n@use \"../../variables/grid\" as gridVars;\n@use \"../../tools/colour\";\n@use \"../../tools/typography\";\n@use \"../../tools/media\";\n\n.tna-global-header {\n  padding-top: 1rem;\n\n  @include colour.contrast;\n\n  .tna-template--light-theme & {\n    background: linear-gradient(\n      0deg,\n      rgb(34 34 34 / 100%) 0%,\n      rgb(0 0 0 / 100%) 100%\n    );\n  }\n\n  .tna-template--dark-theme & {\n    background: #000;\n  }\n\n  .tna-template--system-theme {\n    @media (prefers-color-scheme: light) {\n      background: linear-gradient(\n        0deg,\n        rgb(34 34 34 / 100%) 0%,\n        rgb(0 0 0 / 100%) 100%\n      );\n    }\n\n    @media (prefers-color-scheme: dark) {\n      background: #000;\n    }\n  }\n\n  &__main {\n    padding-bottom: 1.5rem;\n  }\n\n  &__logo-wrapper {\n    margin-top: 0.5rem;\n\n    display: flex;\n  }\n\n  &__logo {\n    display: flex;\n    gap: 1rem;\n    align-items: flex-end;\n\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n\n      @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n      outline-offset: 1px;\n    }\n  }\n\n  .tna-logo {\n    width: 6.75rem;\n    height: 6.75rem;\n\n    flex-shrink: 0;\n  }\n\n  &__logo-strapline {\n    padding-right: 0.625rem;\n\n    @include typography.heading-font;\n    @include typography.relative-font-size(20);\n    text-transform: uppercase;\n    line-height: math.div(6.75rem, 3);\n  }\n\n  &__navigation-button-wrapper {\n    display: none;\n  }\n\n  &__hamburger {\n    width: 2rem;\n    height: 0.25rem;\n\n    display: block;\n\n    @include colour.colour-background(\"font-dark\");\n\n    &::before,\n    &::after {\n      height: 0.25rem;\n\n      display: block;\n\n      position: absolute;\n      right: 0;\n      left: 0;\n\n      background-color: inherit;\n\n      content: \"\";\n    }\n\n    &::before {\n      top: 0;\n    }\n\n    &::after {\n      bottom: 0;\n    }\n  }\n\n  &__navigation-button {\n    height: 2rem;\n    padding: 0;\n\n    display: block;\n\n    position: relative;\n\n    appearance: none;\n\n    font-size: 0;\n\n    background: none;\n\n    border: 0 transparent solid;\n    border-width: 0.25rem 0;\n\n    cursor: pointer;\n\n    &--opened {\n      .tna-global-header__hamburger {\n        height: 0;\n\n        &::before {\n          top: 0.625rem;\n\n          transform: rotate(-135deg);\n        }\n\n        &::after {\n          bottom: 0.625rem;\n\n          transform: rotate(135deg);\n        }\n      }\n    }\n  }\n\n  &__navigation-wrapper {\n  }\n\n  &__navigation {\n    margin: 0.5rem 0 0;\n    height: 100%;\n\n    position: relative;\n\n    columns: 2;\n    column-gap: 2rem;\n    list-style: none;\n  }\n\n  &__navigation-item {\n    break-inside: avoid;\n  }\n\n  &__navigation-item-link {\n    min-width: 15rem;\n    height: math.div(6.75rem, 3);\n\n    display: block;\n    box-sizing: border-box;\n\n    @include typography.relative-font-size(17);\n    text-decoration: none;\n    line-height: math.div(6.75rem, 3);\n\n    @include colour.colour-border(\"keyline\", 0.5px, solid, bottom);\n\n    &:hover {\n      @include typography.interacted-text-decoration;\n    }\n  }\n\n  &__top-navigation {\n    padding: 0 0 0.5rem;\n\n    display: flex;\n    justify-content: flex-end;\n    gap: 1.5rem;\n\n    @include typography.relative-font-size(15);\n    list-style: none;\n  }\n\n  &__top-navigation-item {\n  }\n\n  &__top-navigation-link {\n    display: flex;\n    gap: 0.5rem;\n    align-items: center;\n\n    text-decoration: none;\n\n    &,\n    &:link,\n    &:visited {\n      @include colour.colour-font(\"font-light\");\n    }\n\n    &:hover {\n      @include colour.colour-font(\"font-base\");\n      @include typography.interacted-text-decoration;\n    }\n\n    svg {\n      height: 1em;\n\n      display: inline-block;\n\n      path {\n        fill: currentColor;\n      }\n    }\n  }\n\n  @include media.on-medium {\n    &__navigation {\n      column-gap: 1rem;\n    }\n\n    &__navigation-item-link {\n      @include typography.relative-font-size(16);\n    }\n\n    &--collapse-on-medium &__navigation-wrapper {\n      width: 100%;\n    }\n\n    &--collapse-on-medium &__top-navigation-wrapper {\n      flex: 1;\n      order: 2;\n    }\n\n    &--collapse-on-medium &__main {\n      padding-bottom: 1rem;\n    }\n\n    &--collapse-on-medium &__logo {\n      gap: 0.75rem;\n    }\n\n    &--collapse-on-medium &__logo-wrapper {\n      margin-top: 0.5rem;\n      margin-bottom: 0.5rem;\n    }\n\n    &--collapse-on-medium .tna-logo {\n      width: 5rem;\n      height: 5rem;\n    }\n\n    &--collapse-on-medium &__logo-strapline {\n      line-height: math.div(5rem, 3);\n    }\n\n    &--collapse-on-medium &__navigation {\n      margin-bottom: 0.5rem;\n    }\n\n    &--collapse-on-medium &__navigation,\n    &--collapse-on-medium &__navigation-item,\n    &--collapse-on-medium &__navigation-item-link {\n      height: auto;\n    }\n  }\n\n  @include media.on-mobile {\n    &__main {\n      padding-bottom: 0;\n    }\n\n    &__logo-wrapper,\n    &__navigation-button-wrapper {\n      margin-top: 0;\n      margin-bottom: 1rem;\n    }\n\n    &__logo {\n      gap: 0.75rem;\n    }\n\n    &__navigation-button-wrapper {\n      display: flex;\n      align-items: center;\n    }\n\n    &__navigation,\n    &__navigation-item,\n    &__navigation-item-link {\n      height: auto;\n    }\n\n    &__navigation {\n      margin-top: 0;\n\n      columns: 1;\n\n      background-color: rgb(255 255 255 / 10%);\n\n      @include colour.colour-border(\"keyline-dark\", 2px, solid, top);\n      @include colour.colour-border(\"keyline-dark\", 2px, solid, bottom);\n    }\n\n    &__navigation-item {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n\n    &__navigation-item-link {\n      line-height: 1.75rem;\n      @include typography.main-font-weight-bold;\n    }\n\n    &__navigation-item:last-child &__navigation-item-link {\n      border-bottom: none;\n    }\n\n    &__navigation-item-contents {\n      display: block;\n    }\n\n    &__navigation-item-children {\n      margin-bottom: 1rem;\n      margin-left: 1.5rem;\n    }\n\n    &__top-navigation {\n      padding-top: 1rem;\n      padding-bottom: 1rem;\n\n      justify-content: flex-start;\n    }\n  }\n\n  @include media.on-small {\n    .tna-logo {\n      width: 4rem;\n      height: 4rem;\n    }\n\n    &__logo-strapline {\n      line-height: 1.25rem;\n    }\n\n    &__navigation {\n      width: calc(100% + #{gridVars.$gutter-width * 2});\n\n      left: -#{gridVars.$gutter-width};\n    }\n\n    &__navigation-item-link {\n      padding: 0.5rem gridVars.$gutter-width;\n    }\n  }\n\n  @include media.on-tiny {\n    .tna-logo {\n      width: 3.5rem;\n      height: 3.5rem;\n    }\n\n    &__logo-strapline {\n      line-height: 1;\n    }\n\n    &__navigation {\n      width: calc(100% + #{gridVars.$gutter-width-tiny * 2});\n\n      left: -#{gridVars.$gutter-width-tiny};\n    }\n\n    &__navigation-item-link {\n      padding: 0.5rem gridVars.$gutter-width-tiny;\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"colour\";\n@use \"../variables/typography\";\n\n@mixin relative-font-size($fontSizePx) {\n  font-size: #{math.div($fontSizePx, typography.$relative-1rem-px)}rem;\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-bold {\n  font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n  font-family: typography.$main-font-family;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n  font-variation-settings: \"wdth\" 100;\n}\n\n@mixin heading-font {\n  font-family: typography.$heading-font-family;\n  font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n  font-family: typography.$detail-font-family;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n  font-optical-sizing: auto;\n  font-style: normal;\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include relative-font-size(14);\n  text-transform: uppercase;\n  line-height: #{math.div(typography.$relative-1rem-px, 14)};\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n","@use \"sass:math\";\n\n$use-local-fonts: false !default;\n\n$relative-1rem-px: 16; // 16px is always 1rem\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !default; // 1.77777\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font: \"Open Sans\" !default;\n$main-font-family: $main-font, sans-serif !default;\n$main-font-weight: 400 !default;\n$main-font-weight-bold: 700 !default;\n\n$heading-font-family: supria-sans-condensed, \"Arial Narrow\", sans-serif !default;\n$heading-font-weight: 500 !default;\n\n$detail-font-family: \"Roboto Mono\", monospace !default;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n","@use \"../variables/media\";\n\n//   0 ======= 320 = 480 ===== 768 == 1024 ========================== min-width/max-width (px)\n//   |         .     |         |      |\n//   |-TINY----------|-SMALL---|-MED--|-LARGE------------------------\n//   |         .     |         |      |\n//   |<------------->|         |      |            on-tiny\n//   |<----------------------->|      |            on-mobile\n//   |<------------------------------>|            on-smaller-than-large\n//   |         .     |<------->|      |            on-small\n//   |         .     |<-------------------------   on-larger-than-tiny\n//   |         .     |         |<---->|            on-medium\n//   |         .     |         |<---------------   on-larger-than-mobile\n//   |         .     |         |      |<--------   on-large\n//   |<------->.     |         |      |            Smallest device\n\n@mixin on-large() {\n  @media #{media.$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{media.$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{media.$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{media.$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{media.$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{media.$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{media.$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @media #{media.$media-mobile} {\n    @content;\n  }\n}\n\n@mixin on-print() {\n  @media print {\n    @content;\n  }\n}\n"]}

package/nationalarchives/components/global-header/global-header.js

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={64:(t,e,i)=>{i.d(e,{c:()=>n});const n=function(){return([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,(function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)}))}}},e={};function i(n){var a=e[n];if(void 0!==a)return a.exports;var o=e[n]={exports:{}};return t[n](o,o.exports,i),o.exports}i.d=(t,e)=>{for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{i.r(n),i.d(n,{GlobalHeader:()=>r});var t=i(64);function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},e(t)}function a(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,o(n.key),n)}}function o(t){var i=function(t,i){if("object"!=e(t)||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var a=n.call(t,"string");if("object"!=e(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==e(i)?i:String(i)}var r=function(){function e(i){var n=this;if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e),this.$module=i,this.$toggleButton=i&&i.querySelector(".tna-global-header__navigation-button"),this.$navigation=i&&i.querySelector(".tna-global-header__navigation-wrapper"),this.$topNavigation=i&&i.querySelector(".tna-global-header__top-navigation-wrapper"),this.$links=i&&(this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']")||this.$topNavigation&&this.$topNavigation.querySelectorAll("[tabindex='0']")),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 768px)"),this.$module&&this.$toggleButton&&(this.$navigation||this.$topNavigation)){var a="tna-menu-content-".concat((0,t.c)()),o="".concat(a,"-top");this.$navigation&&this.$navigation.setAttribute("id",a),this.$topNavigation&&this.$topNavigation.setAttribute("id",o),this.$toggleButton.removeAttribute("hidden"),this.$toggleButton.setAttribute("aria-controls",[a,o].join(" ")),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return n.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return n.syncState()})):this.mql.addListener((function(){return n.syncState()}))}}var i,n;return i=e,(n=[{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){if(this.mql.matches)if(this.menuOpened){this.$navigation&&(this.$navigation.classList.add("tna-global-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false")),this.$topNavigation&&(this.$topNavigation.classList.add("tna-global-header__top-navigation--open"),this.$topNavigation.hidden=!1,this.$topNavigation.setAttribute("aria-hidden","false")),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-global-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}else{this.$navigation&&(this.$navigation.classList.remove("tna-global-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true")),this.$topNavigation&&(this.$topNavigation.classList.remove("tna-global-header__top-navigation--open"),this.$topNavigation.hidden=!0,this.$topNavigation.setAttribute("aria-hidden","true")),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-global-header__navigation-button--opened");for(var e=0;e<this.$links.length;e++)this.$links[e].setAttribute("tabindex","-1")}else{this.$navigation&&(this.$navigation.classList.add("tna-global-header__navigation--open"),this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false")),this.$topNavigation&&(this.$topNavigation.classList.add("tna-global-header__top-navigation--open"),this.$topNavigation.hidden=!1,this.$topNavigation.setAttribute("aria-hidden","false")),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu");for(var i=0;i<this.$links.length;i++)this.$links[i].setAttribute("tabindex","0")}}}])&&a(i.prototype,n),Object.defineProperty(i,"prototype",{writable:!1}),e}()})(),n})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,o(n.key),n)}}function o(t){var e=function(t,e){if("object"!=i(t)||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var o=n.call(t,"string");if("object"!=i(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:String(e)}t.r(e),t.d(e,{GlobalHeader:()=>a});var a=function(){function t(e){var i=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$toggleButton=e&&e.querySelector(".tna-global-header__navigation-button"),this.$navigation=e&&e.querySelector(".tna-global-header__navigation-wrapper"),this.$topNavigation=e&&e.querySelector(".tna-global-header__top-navigation-wrapper"),this.$links=e&&(this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']")||this.$topNavigation&&this.$topNavigation.querySelectorAll("[tabindex='0']")),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 768px)"),this.$module&&this.$toggleButton&&(this.$navigation||this.$topNavigation)&&(this.$toggleButton.removeAttribute("hidden"),this.syncState(),this.$toggleButton.addEventListener("click",(function(){return i.handleToggleNavigation()})),"addEventListener"in this.mql?this.mql.addEventListener("change",(function(){return i.syncState()})):this.mql.addListener((function(){return i.syncState()})))}var e,i;return e=t,(i=[{key:"handleToggleNavigation",value:function(){this.menuOpened=!this.menuOpened,this.syncState()}},{key:"syncState",value:function(){this.mql.matches?this.menuOpened?this.show():this.hide():this.show()}},{key:"hide",value:function(){this.$navigation&&(this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true")),this.$topNavigation&&(this.$topNavigation.hidden=!0,this.$topNavigation.setAttribute("aria-hidden","true")),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-global-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","-1")}},{key:"show",value:function(){this.$navigation&&(this.$navigation.hidden=!1,this.$navigation.setAttribute("aria-hidden","false")),this.$topNavigation&&(this.$topNavigation.hidden=!1,this.$topNavigation.setAttribute("aria-hidden","false")),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-global-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}}])&&n(e.prototype,i),Object.defineProperty(e,"prototype",{writable:!1}),t}();return e})()));
 //# sourceMappingURL=global-header.js.map

package/nationalarchives/components/global-header/global-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"components/global-header/global-header.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,wDCDT,QARe,WAAH,OACT,CAAC,MAAQ,KAAO,KAAO,KAAO,MAAMC,QAAQ,UAAU,SAACC,GAAC,OAErDA,EACCC,OAAOC,gBAAgB,IAAIC,WAAW,IAAI,GAAM,IAAOH,EAAI,GAC5DI,SAAS,GAAG,GACf,C,GCLCC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAad,QAGrB,IAAIC,EAASU,EAAyBE,GAAY,CAGjDb,QAAS,CAAC,GAOX,OAHAgB,EAAoBH,GAAUZ,EAAQA,EAAOD,QAASY,GAG/CX,EAAOD,OACf,CCrBAY,EAAoBK,EAAI,CAACjB,EAASkB,KACjC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAASP,EAAoBQ,EAAEpB,EAASmB,IAC5EE,OAAOC,eAAetB,EAASmB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDP,EAAoBQ,EAAI,CAACK,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFd,EAAoBkB,EAAK9B,IACH,oBAAX+B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAetB,EAAS+B,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAetB,EAAS,aAAc,CAAEiC,OAAO,GAAO,E,6uBCHvD,IAAMC,EAAY,WACvB,SAAAA,EAAYC,GAAS,IAAAC,EAAA,KAmBnB,G,4FAnBmBC,CAAA,KAAAH,GACnBI,KAAKH,QAAUA,EACfG,KAAKC,cACHJ,GAAWA,EAAQK,cAAc,yCACnCF,KAAKG,YACHN,GACAA,EAAQK,cAAc,0CACxBF,KAAKI,eACHP,GACAA,EAAQK,cAAc,8CACxBF,KAAKK,OACHR,IACEG,KAAKG,aACLH,KAAKG,YAAYG,iBAAiB,mBACjCN,KAAKI,gBACJJ,KAAKI,eAAeE,iBAAiB,mBAC3CN,KAAKO,YAAa,EAClBP,KAAKQ,IAAMC,OAAOC,WAAW,sBAG1BV,KAAKH,SACLG,KAAKC,gBACJD,KAAKG,aAAgBH,KAAKI,gBAH9B,CAQA,IAAMO,EAAW,oBAAHC,QAAuBC,EAAAA,EAAAA,MAC/BC,EAAc,GAAHF,OAAMD,EAAQ,QAC3BX,KAAKG,aACPH,KAAKG,YAAYY,aAAa,KAAMJ,GAElCX,KAAKI,gBACPJ,KAAKI,eAAeW,aAAa,KAAMD,GAGzCd,KAAKC,cAAce,gBAAgB,UACnChB,KAAKC,cAAcc,aACjB,gBACA,CAACJ,EAAUG,GAAaG,KAAK,MAG/BjB,KAAKkB,YAELlB,KAAKC,cAAckB,iBAAiB,SAAS,kBAC3CrB,EAAKsB,wBAAwB,IAG3B,qBAAsBpB,KAAKQ,IAC7BR,KAAKQ,IAAIW,iBAAiB,UAAU,kBAAMrB,EAAKoB,WAAW,IAE1DlB,KAAKQ,IAAIa,aAAY,kBAAMvB,EAAKoB,WAAW,GA1B7C,CA4BF,C,QA4EC,O,EA5EAtB,G,EAAA,EAAAf,IAAA,yBAAAc,MAED,WACEK,KAAKO,YAAcP,KAAKO,WACxBP,KAAKkB,WACP,GAAC,CAAArC,IAAA,YAAAc,MAED,WACE,GAAIK,KAAKQ,IAAIc,QACX,GAAItB,KAAKO,WAAY,CACfP,KAAKG,cACPH,KAAKG,YAAYoB,UAAUC,IAAI,uCAC/BxB,KAAKG,YAAYsB,QAAS,EAC1BzB,KAAKG,YAAYY,aAAa,cAAe,UAE3Cf,KAAKI,iBACPJ,KAAKI,eAAemB,UAAUC,IAC5B,2CAEFxB,KAAKI,eAAeqB,QAAS,EAC7BzB,KAAKI,eAAeW,aAAa,cAAe,UAElDf,KAAKC,cAAcc,aAAa,gBAAiB,QACjDf,KAAKC,cAAcc,aAAa,QAAS,cACzCf,KAAKC,cAAcsB,UAAUC,IAC3B,gDAGF,IAAK,IAAIE,EAAI,EAAGA,EAAI1B,KAAKK,OAAOsB,OAAQD,IACtC1B,KAAKK,OAAOqB,GAAGX,aAAa,WAAY,IAE5C,KAAO,CACDf,KAAKG,cACPH,KAAKG,YAAYoB,UAAUK,OACzB,uCAEF5B,KAAKG,YAAYsB,QAAS,EAC1BzB,KAAKG,YAAYY,aAAa,cAAe,SAE3Cf,KAAKI,iBACPJ,KAAKI,eAAemB,UAAUK,OAC5B,2CAEF5B,KAAKI,eAAeqB,QAAS,EAC7BzB,KAAKI,eAAeW,aAAa,cAAe,SAElDf,KAAKC,cAAcc,aAAa,gBAAiB,SACjDf,KAAKC,cAAcc,aAAa,QAAS,aACzCf,KAAKC,cAAcsB,UAAUK,OAC3B,gDAGF,IAAK,IAAIF,EAAI,EAAGA,EAAI1B,KAAKK,OAAOsB,OAAQD,IACtC1B,KAAKK,OAAOqB,GAAGX,aAAa,WAAY,KAE5C,KACK,CACDf,KAAKG,cACPH,KAAKG,YAAYoB,UAAUC,IAAI,uCAC/BxB,KAAKG,YAAYsB,QAAS,EAC1BzB,KAAKG,YAAYY,aAAa,cAAe,UAE3Cf,KAAKI,iBACPJ,KAAKI,eAAemB,UAAUC,IAC5B,2CAEFxB,KAAKI,eAAeqB,QAAS,EAC7BzB,KAAKI,eAAeW,aAAa,cAAe,UAElDf,KAAKC,cAAcc,aAAa,gBAAiB,QACjDf,KAAKC,cAAcc,aAAa,QAAS,cAEzC,IAAK,IAAIW,EAAI,EAAGA,EAAI1B,KAAKK,OAAOsB,OAAQD,IACtC1B,KAAKK,OAAOqB,GAAGX,aAAa,WAAY,IAE5C,CACF,M,oEAACnB,CAAA,CAlIsB,E","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/./src/nationalarchives/lib/uuid.mjs","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/global-header/global-header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","const uuidv4 = () =>\n  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>\n    (\n      c ^\n      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))\n    ).toString(16),\n  );\n\nexport default uuidv4;\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import uuidv4 from \"../../lib/uuid.mjs\";\n\nexport class GlobalHeader {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButton =\n      $module && $module.querySelector(\".tna-global-header__navigation-button\");\n    this.$navigation =\n      $module &&\n      $module.querySelector(\".tna-global-header__navigation-wrapper\");\n    this.$topNavigation =\n      $module &&\n      $module.querySelector(\".tna-global-header__top-navigation-wrapper\");\n    this.$links =\n      $module &&\n      ((this.$navigation &&\n        this.$navigation.querySelectorAll(\"[tabindex='0']\")) ||\n        (this.$topNavigation &&\n          this.$topNavigation.querySelectorAll(\"[tabindex='0']\")));\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 768px)\");\n\n    if (\n      !this.$module ||\n      !this.$toggleButton ||\n      (!this.$navigation && !this.$topNavigation)\n    ) {\n      return;\n    }\n\n    const uniqueId = `tna-menu-content-${uuidv4()}`;\n    const uniqueIdTop = `${uniqueId}-top`;\n    if (this.$navigation) {\n      this.$navigation.setAttribute(\"id\", uniqueId);\n    }\n    if (this.$topNavigation) {\n      this.$topNavigation.setAttribute(\"id\", uniqueIdTop);\n    }\n\n    this.$toggleButton.removeAttribute(\"hidden\");\n    this.$toggleButton.setAttribute(\n      \"aria-controls\",\n      [uniqueId, uniqueIdTop].join(\" \"),\n    );\n\n    this.syncState();\n\n    this.$toggleButton.addEventListener(\"click\", () =>\n      this.handleToggleNavigation(),\n    );\n\n    if (\"addEventListener\" in this.mql) {\n      this.mql.addEventListener(\"change\", () => this.syncState());\n    } else {\n      this.mql.addListener(() => this.syncState());\n    }\n  }\n\n  handleToggleNavigation() {\n    this.menuOpened = !this.menuOpened;\n    this.syncState();\n  }\n\n  syncState() {\n    if (this.mql.matches) {\n      if (this.menuOpened) {\n        if (this.$navigation) {\n          this.$navigation.classList.add(\"tna-global-header__navigation--open\");\n          this.$navigation.hidden = false;\n          this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n        }\n        if (this.$topNavigation) {\n          this.$topNavigation.classList.add(\n            \"tna-global-header__top-navigation--open\",\n          );\n          this.$topNavigation.hidden = false;\n          this.$topNavigation.setAttribute(\"aria-hidden\", \"false\");\n        }\n        this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n        this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n        this.$toggleButton.classList.add(\n          \"tna-global-header__navigation-button--opened\",\n        );\n\n        for (let i = 0; i < this.$links.length; i++) {\n          this.$links[i].setAttribute(\"tabindex\", \"0\");\n        }\n      } else {\n        if (this.$navigation) {\n          this.$navigation.classList.remove(\n            \"tna-global-header__navigation--open\",\n          );\n          this.$navigation.hidden = true;\n          this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n        }\n        if (this.$topNavigation) {\n          this.$topNavigation.classList.remove(\n            \"tna-global-header__top-navigation--open\",\n          );\n          this.$topNavigation.hidden = true;\n          this.$topNavigation.setAttribute(\"aria-hidden\", \"true\");\n        }\n        this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n        this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n        this.$toggleButton.classList.remove(\n          \"tna-global-header__navigation-button--opened\",\n        );\n\n        for (let i = 0; i < this.$links.length; i++) {\n          this.$links[i].setAttribute(\"tabindex\", \"-1\");\n        }\n      }\n    } else {\n      if (this.$navigation) {\n        this.$navigation.classList.add(\"tna-global-header__navigation--open\");\n        this.$navigation.hidden = false;\n        this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n      }\n      if (this.$topNavigation) {\n        this.$topNavigation.classList.add(\n          \"tna-global-header__top-navigation--open\",\n        );\n        this.$topNavigation.hidden = false;\n        this.$topNavigation.setAttribute(\"aria-hidden\", \"false\");\n      }\n      this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n      this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n\n      for (let i = 0; i < this.$links.length; i++) {\n        this.$links[i].setAttribute(\"tabindex\", \"0\");\n      }\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","replace","c","crypto","getRandomValues","Uint8Array","toString","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","GlobalHeader","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$topNavigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","uniqueId","concat","uuidv4","uniqueIdTop","setAttribute","removeAttribute","join","syncState","addEventListener","handleToggleNavigation","addListener","matches","classList","add","hidden","i","length","remove"],"sourceRoot":""}
+{"version":3,"file":"components/global-header/global-header.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,IAEzBD,EAAkB,YAAIC,GACvB,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,itBCLvD,IAAMC,EAAY,WACvB,SAAAA,EAAYC,GAAS,IAAAC,EAAA,M,4FAAAC,CAAA,KAAAH,GACnBI,KAAKH,QAAUA,EACfG,KAAKC,cACHJ,GAAWA,EAAQK,cAAc,yCACnCF,KAAKG,YACHN,GACAA,EAAQK,cAAc,0CACxBF,KAAKI,eACHP,GACAA,EAAQK,cAAc,8CACxBF,KAAKK,OACHR,IACEG,KAAKG,aACLH,KAAKG,YAAYG,iBAAiB,mBACjCN,KAAKI,gBACJJ,KAAKI,eAAeE,iBAAiB,mBAC3CN,KAAKO,YAAa,EAClBP,KAAKQ,IAAMC,OAAOC,WAAW,sBAG1BV,KAAKH,SACLG,KAAKC,gBACJD,KAAKG,aAAgBH,KAAKI,kBAK9BJ,KAAKC,cAAcU,gBAAgB,UACnCX,KAAKY,YACLZ,KAAKC,cAAcY,iBAAiB,SAAS,kBAC3Cf,EAAKgB,wBAAwB,IAE3B,qBAAsBd,KAAKQ,IAC7BR,KAAKQ,IAAIK,iBAAiB,UAAU,kBAAMf,EAAKc,WAAW,IAE1DZ,KAAKQ,IAAIO,aAAY,kBAAMjB,EAAKc,WAAW,IAE/C,C,QAuDC,O,EAvDAhB,G,EAAA,EAAAd,IAAA,yBAAAa,MAED,WACEK,KAAKO,YAAcP,KAAKO,WACxBP,KAAKY,WACP,GAAC,CAAA9B,IAAA,YAAAa,MAED,WACMK,KAAKQ,IAAIQ,QACPhB,KAAKO,WACPP,KAAKiB,OAELjB,KAAKkB,OAGPlB,KAAKiB,MAET,GAAC,CAAAnC,IAAA,OAAAa,MAED,WACMK,KAAKG,cACPH,KAAKG,YAAYgB,QAAS,EAC1BnB,KAAKG,YAAYiB,aAAa,cAAe,SAE3CpB,KAAKI,iBACPJ,KAAKI,eAAee,QAAS,EAC7BnB,KAAKI,eAAegB,aAAa,cAAe,SAElDpB,KAAKC,cAAcmB,aAAa,gBAAiB,SACjDpB,KAAKC,cAAcmB,aAAa,QAAS,aACzCpB,KAAKC,cAAcoB,UAAUC,OAC3B,gDAEF,IAAK,IAAIC,EAAI,EAAGA,EAAIvB,KAAKK,OAAOmB,OAAQD,IACtCvB,KAAKK,OAAOkB,GAAGH,aAAa,WAAY,KAE5C,GAAC,CAAAtC,IAAA,OAAAa,MAED,WACMK,KAAKG,cACPH,KAAKG,YAAYgB,QAAS,EAC1BnB,KAAKG,YAAYiB,aAAa,cAAe,UAE3CpB,KAAKI,iBACPJ,KAAKI,eAAee,QAAS,EAC7BnB,KAAKI,eAAegB,aAAa,cAAe,UAElDpB,KAAKC,cAAcmB,aAAa,gBAAiB,QACjDpB,KAAKC,cAAcmB,aAAa,QAAS,cACzCpB,KAAKC,cAAcoB,UAAUI,IAC3B,gDAEF,IAAK,IAAIF,EAAI,EAAGA,EAAIvB,KAAKK,OAAOmB,OAAQD,IACtCvB,KAAKK,OAAOkB,GAAGH,aAAa,WAAY,IAE5C,M,oEAACxB,CAAA,CA7FsB,G","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/global-header/global-header.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class GlobalHeader {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButton =\n      $module && $module.querySelector(\".tna-global-header__navigation-button\");\n    this.$navigation =\n      $module &&\n      $module.querySelector(\".tna-global-header__navigation-wrapper\");\n    this.$topNavigation =\n      $module &&\n      $module.querySelector(\".tna-global-header__top-navigation-wrapper\");\n    this.$links =\n      $module &&\n      ((this.$navigation &&\n        this.$navigation.querySelectorAll(\"[tabindex='0']\")) ||\n        (this.$topNavigation &&\n          this.$topNavigation.querySelectorAll(\"[tabindex='0']\")));\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 768px)\");\n\n    if (\n      !this.$module ||\n      !this.$toggleButton ||\n      (!this.$navigation && !this.$topNavigation)\n    ) {\n      return;\n    }\n\n    this.$toggleButton.removeAttribute(\"hidden\");\n    this.syncState();\n    this.$toggleButton.addEventListener(\"click\", () =>\n      this.handleToggleNavigation(),\n    );\n    if (\"addEventListener\" in this.mql) {\n      this.mql.addEventListener(\"change\", () => this.syncState());\n    } else {\n      this.mql.addListener(() => this.syncState());\n    }\n  }\n\n  handleToggleNavigation() {\n    this.menuOpened = !this.menuOpened;\n    this.syncState();\n  }\n\n  syncState() {\n    if (this.mql.matches) {\n      if (this.menuOpened) {\n        this.show();\n      } else {\n        this.hide();\n      }\n    } else {\n      this.show();\n    }\n  }\n\n  hide() {\n    if (this.$navigation) {\n      this.$navigation.hidden = true;\n      this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n    }\n    if (this.$topNavigation) {\n      this.$topNavigation.hidden = true;\n      this.$topNavigation.setAttribute(\"aria-hidden\", \"true\");\n    }\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n    this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n    this.$toggleButton.classList.remove(\n      \"tna-global-header__navigation-button--opened\",\n    );\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"-1\");\n    }\n  }\n\n  show() {\n    if (this.$navigation) {\n      this.$navigation.hidden = false;\n      this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n    }\n    if (this.$topNavigation) {\n      this.$topNavigation.hidden = false;\n      this.$topNavigation.setAttribute(\"aria-hidden\", \"false\");\n    }\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n    this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n    this.$toggleButton.classList.add(\n      \"tna-global-header__navigation-button--opened\",\n    );\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"0\");\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","GlobalHeader","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$topNavigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","matches","show","hide","hidden","setAttribute","classList","remove","i","length","add"],"sourceRoot":""}