@nationalarchives/frontend 0.2.4 → 0.2.6

package/nationalarchives/components/header/header.css

@@ -1 +1 @@
-.tna-header,.tna-header__exit{--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);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-header.tna-background-accent .tna-header__navigation{--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);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-header{position:relative;background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%)}.tna-template--dark-theme .tna-header{background:#010101}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-header{background:#010101}}.tna-header__exit{padding-top:8px;padding-bottom:8px;text-align:right}.tna-header__exit-link{text-decoration:none;font-size:1rem}.tna-header__exit-link,.tna-header__exit-link:link,.tna-header__exit-link:visited{color:var(--font-base, #343338)}.tna-header__exit-link:hover{text-decoration:underline}.tna-header__exit-link .fa-solid{margin-left:8px}.tna-header__contents.tna-container{justify-content:space-between}.tna-header__logo{padding-top:24px;padding-bottom:24px}.tna-header__logo-contents{display:flex;align-items:flex-end;color:inherit;text-decoration:none}.tna-header__logo-contents--link,.tna-header__logo-contents--link:link,.tna-header__logo-contents--link:visited{color:inherit}.tna-header__logo-contents--link:hover:not(:focus){text-decoration:none;outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:1px}.tna-header .tna-logo{width:6rem;height:6rem;display:inline-block;flex-shrink:0}.tna-header__logo-strapline{margin:0 12px;display:inline-block;line-height:2rem;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem;text-transform:uppercase}.tna-header__navigation-toggle{align-self:center;display:none}.tna-header__hamburger{width:2rem;height:.25rem;display:block;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-header__hamburger::before,.tna-header__hamburger::after{content:"";height:.25rem;display:block;position:absolute;right:0;left:0;background-color:inherit}.tna-header__hamburger::before{top:0}.tna-header__hamburger::after{bottom:0}.tna-header__navigation-toggle-button{height:2rem;padding:0;appearance:none;display:block;position:relative;font-size:0;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;cursor:pointer}.tna-header__navigation-toggle-button--opened .tna-header__hamburger{height:0}.tna-header__navigation-toggle-button--opened .tna-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-header__navigation-toggle-button--opened .tna-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-header__navigation{display:flex;flex-direction:column-reverse;align-items:flex-end;justify-content:space-between;position:relative;z-index:2}.tna-header__top-navigation-items{margin:0;padding:20px 0;display:flex;justify-content:flex-end;gap:8px 24px;line-height:1;list-style:none;font-size:0.9375rem}.tna-header__top-navigation-item{display:block}.tna-header__top-navigation-item-link{display:flex;align-items:center;text-decoration:none}.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:var(--font-light, rgb(1 1 1/0.58))}.tna-header__top-navigation-item-link:hover,.tna-header__top-navigation-item-link:hover:link,.tna-header__top-navigation-item-link:hover:visited,.tna-header__top-navigation-item-link--selected,.tna-header__top-navigation-item-link--selected:link,.tna-header__top-navigation-item-link--selected:visited{color:var(--font-base, #343338);text-decoration:underline;text-decoration-thickness:3.5px}.tna-header__top-navigation-item-link .fa-solid{margin-right:6px}.tna-header__navigation-items{margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:32px;white-space:nowrap;list-style:none}.tna-header__navigation-item-link{padding:8px 0;display:inline-block;position:relative;line-height:2;text-decoration:none;font-weight:600}.tna-header__navigation-item-link::after{content:"";height:0;position:absolute;right:0;bottom:0;left:0;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-header__navigation-item-link,.tna-header__navigation-item-link:link,.tna-header__navigation-item-link:visited{color:inherit}.tna-header__navigation-item-link--selected::after,.tna-header__navigation-item-link--selected:hover::after{border-top:5px var(--keyline-dark, #26262a) solid}.tna-header.tna-background-accent{background:var(--background, #f4f4f4)}@media(min-width: 48.0625em)and (max-width: 64em){.tna-header .tna-logo{width:5rem;height:5rem}.tna-header__logo-strapline{line-height:1.625rem}}@media(max-width: 48em){.tna-header__logo{padding-top:16px;padding-bottom:16px}.tna-header__contents.tna-container{padding-right:0;padding-left:0}.tna-header__navigation-toggle{display:block}.tna-header__navigation-toggle.tna-column{padding-left:0}.tna-header__navigation{flex-direction:column;align-items:stretch}.tna-header__navigation.tna-column{padding-right:0;padding-left:0}.tna-header__top-navigation-items{padding:8px 16px;justify-content:flex-start;border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-header__top-navigation-item{margin:0;padding:8px}.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:var(--font-light, rgb(1 1 1/0.58))}.tna-header__top-navigation-item-link:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-header__navigation-items{width:100%;flex-direction:column;gap:0;background-color:rgba(255,255,255,.1);border-top:2px var(--keyline-dark, #26262a) solid;border-bottom:2px var(--keyline-dark, #26262a) solid}.tna-header__navigation-item{margin:0;display:block;border-top:1px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-header__navigation-item:first-child{border-top:none}.tna-header__navigation-item-link{display:block;line-height:1.75rem}.tna-header__navigation-item-link::after{width:0;height:auto;top:0;right:auto}.tna-header__navigation-item-link--selected::after,.tna-header__navigation-item-link--selected:hover::after{border-left:.5rem var(--keyline, rgb(38 38 42/0.25)) solid}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-header .tna-logo{width:4rem;height:4rem}.tna-header__logo-strapline{line-height:1.25rem}.tna-header__logo.tna-column,.tna-header__navigation-item-link,.tna-header__navigation-toggle.tna-column{padding-right:32px}.tna-header__logo.tna-column,.tna-header__navigation-item-link{padding-left:32px}.tna-header__top-navigation-items{padding-right:calc(32px - .5rem);padding-left:calc(32px - .5rem)}}@media(max-width: 30em){.tna-header__navigation-toggle.tna-column,.tna-header__logo.tna-column{padding-right:16px}.tna-header__logo.tna-column{padding-left:16px}.tna-header .tna-logo{width:3.5rem;height:3.5rem}.tna-header__logo-strapline{line-height:1}.tna-header__top-navigation-items{gap:.5rem}.tna-header__navigation-item-link{padding-right:16px;padding-left:calc(16px + .5rem)}}@media(forced-colors: active){.tna-header,.tna-header__exit{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(prefers-contrast: more){.tna-header,.tna-header__exit{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(forced-colors: active){.tna-header__navigation-toggle-button{height:auto;line-height:2;font-size:1.125rem;font-weight:700;border:none}.tna-header__hamburger{display:none}}/*# sourceMappingURL=header.css.map */
+.tna-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);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}@media(max-width: 48em){.tna-header.tna-background-accent .tna-header__navigation{--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);--accent-list-marker: var(--accent-border);background-color:var(--background, #f4f4f4);color:var(--font-base, #343338)}}.tna-header{position:relative;background:linear-gradient(0deg, rgb(34, 34, 34) 0%, rgb(0, 0, 0) 100%)}.tna-template--dark-theme .tna-header{background:#010101}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-header{background:#010101}}.tna-header__contents.tna-container{justify-content:space-between}.tna-header__logo{padding-top:20px;padding-bottom:20px}.tna-header__logo-contents{display:flex;align-items:flex-end;color:inherit;text-decoration:none}.tna-header__logo-contents--link,.tna-header__logo-contents--link:link,.tna-header__logo-contents--link:visited{color:inherit}.tna-header__logo-contents--link:hover:not(:focus){text-decoration:none;outline:.3125rem var(--font-dark, rgb(1, 1, 1)) solid;outline-offset:1px}.tna-header .tna-logo{width:5rem;height:5rem;display:inline-block;flex-shrink:0}.tna-header__logo-strapline{margin:0 12px;display:inline-block;line-height:1.625rem;font-family:supria-sans-condensed,"Arial Narrow",sans-serif;font-weight:500;font-size:1.25rem;text-transform:uppercase}.tna-header__navigation-button-wrapper{align-self:center;display:none}.tna-header__hamburger{width:2rem;height:.25rem;display:inline-block;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-header__hamburger::before,.tna-header__hamburger::after{content:"";width:2rem;height:.25rem;display:block;position:absolute;right:0;background-color:inherit}.tna-header__hamburger::before{top:0}.tna-header__hamburger::after{bottom:0}.tna-header__navigation-button{height:2rem;padding:0;appearance:none;display:flex;align-items:center;gap:.75rem;position:relative;color:inherit;font-weight:700;font-size:1rem;background:none;border:0 rgba(0,0,0,0) solid;border-width:.25rem 0;cursor:pointer}.tna-header__navigation-button:hover{text-decoration:underline;text-decoration-thickness:3.5px}.tna-header__navigation-button--opened .tna-header__hamburger{height:0}.tna-header__navigation-button--opened .tna-header__hamburger::before{top:.625rem;transform:rotate(-135deg)}.tna-header__navigation-button--opened .tna-header__hamburger::after{bottom:.625rem;transform:rotate(135deg)}.tna-header__navigation{display:flex;flex-direction:column-reverse;align-items:flex-end;justify-content:space-between;position:relative;z-index:2}.tna-header__top-navigation-items{margin:0;padding:20px 0;display:flex;justify-content:flex-end;gap:8px 24px;line-height:1;list-style:none;font-size:0.9375rem}.tna-header__top-navigation-item{display:block}.tna-header__top-navigation-item-link{display:flex;align-items:center;text-decoration:none}.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:var(--font-light, rgb(1 1 1/0.58))}.tna-header__top-navigation-item-link:hover,.tna-header__top-navigation-item-link:hover:link,.tna-header__top-navigation-item-link:hover:visited,.tna-header__top-navigation-item-link--selected,.tna-header__top-navigation-item-link--selected:link,.tna-header__top-navigation-item-link--selected:visited{color:var(--font-base, #343338);text-decoration:underline;text-decoration-thickness:3.5px}.tna-header__top-navigation-item-link .fa-solid{margin-right:6px}.tna-header__navigation-items{margin:0;padding:0;display:flex;flex-wrap:nowrap;gap:32px;white-space:nowrap;list-style:none}.tna-header__navigation-item-link{padding:8px 0;display:inline-block;position:relative;line-height:2;text-decoration:none;font-weight:600}.tna-header__navigation-item-link::after{content:"";height:0;position:absolute;right:0;bottom:0;left:0;background-color:var(--font-dark, rgb(1, 1, 1))}.tna-header__navigation-item-link,.tna-header__navigation-item-link:link,.tna-header__navigation-item-link:visited{color:inherit}.tna-header__navigation-item-link--selected::after,.tna-header__navigation-item-link--selected:hover::after{border-top:5px var(--keyline-dark, #26262a) solid}.tna-header.tna-background-accent{background:var(--background, #f4f4f4)}@media(max-width: 48em){.tna-header__logo{padding-top:16px;padding-bottom:16px}.tna-header__contents.tna-container{padding-right:0;padding-left:0}.tna-header__navigation-button-wrapper{display:block}.tna-header__navigation-button-wrapper.tna-column{padding-left:0}.tna-header__navigation{flex-direction:column;align-items:stretch}.tna-header__navigation.tna-column{padding-right:0;padding-left:0}.tna-header__top-navigation-items{padding:8px 16px;justify-content:flex-start;border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-header__top-navigation-item{margin:0}.tna-header__top-navigation-item-link{padding:8px}.tna-header__top-navigation-item-link,.tna-header__top-navigation-item-link:link,.tna-header__top-navigation-item-link:visited{color:var(--font-light, rgb(1 1 1/0.58))}.tna-header__top-navigation-item-link:hover{color:var(--font-dark, rgb(1, 1, 1))}.tna-header__navigation-items{width:100%;flex-direction:column;gap:0;background-color:rgba(255,255,255,.1);border-top:2px var(--keyline-dark, #26262a) solid;border-bottom:2px var(--keyline-dark, #26262a) solid}.tna-header__navigation-item{margin:0;display:block;border-top:1px var(--keyline, rgb(38 38 42/0.25)) solid}.tna-header__navigation-item:first-child{border-top:none}.tna-header__navigation-item-link{display:block;line-height:1.75rem}.tna-header__navigation-item-link::after{width:0;height:auto;top:0;right:auto}.tna-header__navigation-item-link--selected::after,.tna-header__navigation-item-link--selected:hover::after{border-left:.5rem var(--keyline, rgb(38 38 42/0.25)) solid}}@media(min-width: 30.0625em)and (max-width: 48em){.tna-header .tna-logo{width:4rem;height:4rem}.tna-header__logo-strapline{line-height:1.25rem}.tna-header__logo,.tna-header__navigation-item-link,.tna-header__navigation-button-wrapper{padding-right:32px}.tna-header__logo,.tna-header__navigation-item-link{padding-left:32px}.tna-header__top-navigation-items{padding-right:calc(32px - .5rem);padding-left:calc(32px - .5rem)}}@media(max-width: 30em){.tna-header__navigation-button-wrapper,.tna-header__logo{padding-right:16px}.tna-header__logo{padding-left:16px;flex:1}.tna-header .tna-logo{width:3.5rem;height:3.5rem}.tna-header__logo-strapline{line-height:1}.tna-header__navigation-button{font-size:0.875rem}.tna-header__top-navigation-items{gap:.5rem}.tna-header__navigation-item-link{padding-right:16px;padding-left:calc(16px + .5rem)}}@media(forced-colors: active){.tna-header,.tna-header__exit{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(prefers-contrast: more){.tna-header,.tna-header__exit{border-bottom:1px var(--keyline, rgb(38 38 42/0.25)) solid}}@media(forced-colors: active){.tna-header__navigation-button{height:auto;line-height:2;font-size:1.125rem;font-weight:700;border:none}.tna-header__hamburger{display:none}}/*# sourceMappingURL=header.css.map */

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/header/header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAyLA,8BACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAjJA,4CAJA,gCCgCA,wBDiIF,0DAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA5KF,4CAJA,iCE3CF,YAGE,kBAEA,wEAMA,sCACE,mBAIA,mCADF,wCAEI,oBAIJ,kBACE,gBACA,mBAEA,iBAKF,uBACE,qBChCF,eDmCE,kFFSF,gCEHE,6BACE,0BAGF,iCACE,gBAKF,oCACE,8BAIJ,kBACE,iBACA,oBAGF,2BACE,aACA,qBAEA,cACA,qBAGE,gHAGE,cAGF,mDACE,qBFcJ,sDEXI,mBAKN,sBACE,WACA,YAEA,qBAEA,cAGF,4BACE,cAEA,qBAEA,iBCjEF,YCcA,gDDbA,YCgBoB,IDlDpB,kBDqGE,yBAGF,+BACE,kBAEA,aAGF,uBACE,WACA,cAEA,cFlEF,gDEsEE,6DAEE,WAEA,cAEA,cAEA,kBACA,QACA,OAEA,yBAGF,+BACE,MAGF,8BACE,SAIJ,sCACE,YACA,UAEA,gBAEA,cAEA,kBAEA,YAEA,gBAEA,6BACA,sBAEA,eAGE,qEACE,SAEA,6EACE,YAEA,0BAGF,4EACE,eAEA,yBAMR,wBACE,aACA,8BACA,qBACA,8BAEA,kBACA,UAGF,kCACE,SACA,eAEA,aACA,yBACA,aAEA,cAEA,gBCxMF,oBD6MA,iCACE,cAGF,sCACE,aACA,mBAEA,qBAEA,+HF3KF,yCEmLI,8SFnLJ,gCGYA,0BACA,0BCpCsC,MFkNpC,gDACE,iBAIJ,8BACE,SACA,UAEA,aACA,iBACA,SAEA,mBAEA,gBAMF,kCACE,cAEA,qBAEA,kBAEA,cACA,qBCvPF,YCewB,IF4OtB,yCACE,WAEA,SAEA,kBACA,QACA,SACA,OFhOJ,gDEqOE,mHAGE,cAME,4GF9NF,kDEqOJ,kCACE,sCD9PF,kDCsQE,sBACE,WACA,YAGF,4BACE,sBDxOJ,wBC6OE,kBACE,iBACA,oBAIA,oCACE,gBACA,eAIJ,+BACE,cAEA,0CACE,eAIJ,wBACE,sBACA,oBAEA,mCACE,gBACA,eAIJ,kCACE,iBAEA,2BF1RA,2DE+RF,iCACE,SACA,YAIA,+HFzTJ,yCE+TI,4CF/TJ,qCEoUE,8BACE,WAEA,sBACA,MAEA,sCFtTA,uGE4TF,6BACE,SAEA,cF/TA,wDEmUA,yCACE,gBAIJ,kCACE,cAEA,oBAEA,yCACE,QACA,YAEA,MACA,WAME,4GFxVJ,4DClBJ,kDCmXE,sBACE,WACA,YAGF,4BACE,oBAGF,yGAGE,mBAGF,+DAEE,kBAGF,kCACE,iCACA,iCDnYJ,wBCwYE,uEAEE,mBAGF,6BACE,kBAGF,sBACE,aACA,cAGF,4BACE,cAGF,kCACE,UAGF,kCACE,mBACA,iCF/CJ,8BEoDE,8BFzZE,4DA+VJ,+BE0DE,8BFzZE,4DAqWJ,8BE2DE,sCACE,YAEA,cCneJ,mBAiBA,YCYsB,IF0clB,YAGF,uBACE","file":"header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\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@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-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      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline-dark\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"accent-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid\n    );\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n  @if $direction != \"\" {\n    border-#{$direction}: borders.$thick-border-width\n      #{brand-colour($brandColour)}\n      solid;\n  } @else {\n    border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  @include colour-css-vars(\"form-error-border\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error-border\");\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\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  --accent-list-marker: var(--accent-border);\n  // --accent-list-marker: var(--font-base);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\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    --accent-list-marker: var(--accent-border);\n    // --accent-list-marker: var(--font-base);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\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  --accent-list-marker: var(--accent-font-base);\n  --accent-border: var(--accent-font-dark);\n  --button-text: var(--accent-button-text);\n  --button-background: var(--accent-button-background);\n  --button-hover-text: var(--accent-button-hover-text);\n  --button-hover-background: var(--accent-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n  @extend %accent;\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  --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  --accent-border: var(--font-base);\n  --accent-list-marker: var(--font-base);\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%yellow-accent {\n  --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n  --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"pink\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %accent-lighter-text;\n  @extend %pink-accent;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --accent-border: #{colour.brand-colour(\"orange\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %accent-lighter-text;\n  @extend %orange-accent;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --accent-border: #{colour.brand-colour(\"green\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %accent-lighter-text;\n  @extend %green-accent;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --accent-border: #{colour.brand-colour(\"blue\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %accent-lighter-text;\n  @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n  @media (prefers-contrast: more) {\n    @content;\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/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n    media.$largest-medium-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-medium-device-em: #{math.div(\n    media.$largest-medium-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-medium-device-em: #{math.div(\n    media.$largest-small-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-small-device-em: #{math.div(\n    media.$largest-small-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-small-device-em: #{math.div(\n    media.$largest-tiny-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-tiny-device-em: #{math.div(\n    media.$largest-tiny-device-px,\n    typography.$relative-1rem-px\n  )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n  @media #{$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @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 \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-header {\n  @include colour.contrast;\n\n  position: relative;\n\n  background: linear-gradient(\n    0deg,\n    rgb(34 34 34 / 100%) 0%,\n    rgb(0 0 0 / 100%) 100%\n  );\n\n  .tna-template--dark-theme & {\n    background: colour.brand-colour(\"black\");\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      background: colour.brand-colour(\"black\");\n    }\n  }\n\n  &__exit {\n    padding-top: spacing.space(0.5);\n    padding-bottom: spacing.space(0.5);\n\n    text-align: right;\n\n    @include colour.contrast;\n  }\n\n  &__exit-link {\n    text-decoration: none;\n    @include typography.font-size(16);\n\n    &,\n    &:link,\n    &:visited {\n      @include colour.colour-font(\"font-base\");\n    }\n\n    &:hover {\n      text-decoration: underline;\n    }\n\n    .fa-solid {\n      margin-left: spacing.space(0.5);\n    }\n  }\n\n  &__contents {\n    &.tna-container {\n      justify-content: space-between;\n    }\n  }\n\n  &__logo {\n    padding-top: spacing.space(1.5);\n    padding-bottom: spacing.space(1.5);\n  }\n\n  &__logo-contents {\n    display: flex;\n    align-items: flex-end;\n\n    color: inherit;\n    text-decoration: none;\n\n    &--link {\n      &,\n      &:link,\n      &:visited {\n        color: inherit;\n      }\n\n      &:hover:not(:focus) {\n        text-decoration: none;\n\n        @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n        outline-offset: 1px;\n      }\n    }\n  }\n\n  .tna-logo {\n    width: 6rem;\n    height: 6rem;\n\n    display: inline-block;\n\n    flex-shrink: 0;\n  }\n\n  &__logo-strapline {\n    margin: 0 spacing.space(0.75);\n\n    display: inline-block;\n\n    line-height: 2rem;\n    @include typography.heading-font;\n    @include typography.font-size(20);\n    text-transform: uppercase;\n  }\n\n  &__navigation-toggle {\n    align-self: center;\n\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      content: \"\";\n\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\n    &::before {\n      top: 0;\n    }\n\n    &::after {\n      bottom: 0;\n    }\n  }\n\n  &__navigation-toggle-button {\n    height: 2rem;\n    padding: 0;\n\n    appearance: none;\n\n    display: block;\n\n    position: relative;\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-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    display: flex;\n    flex-direction: column-reverse;\n    align-items: flex-end;\n    justify-content: space-between;\n\n    position: relative;\n    z-index: 2;\n  }\n\n  &__top-navigation-items {\n    margin: 0;\n    padding: spacing.space(1.25) 0;\n\n    display: flex;\n    justify-content: flex-end;\n    gap: spacing.space(0.5) spacing.space(1.5);\n\n    line-height: 1;\n\n    list-style: none;\n\n    @include typography.font-size(15);\n  }\n\n  &__top-navigation-item {\n    display: block;\n  }\n\n  &__top-navigation-item-link {\n    display: flex;\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    &--selected {\n      &,\n      &:link,\n      &:visited {\n        @include colour.colour-font(\"font-base\");\n        @include typography.interacted-text-decoration;\n      }\n    }\n\n    .fa-solid {\n      margin-right: spacing.space(0.375);\n    }\n  }\n\n  &__navigation-items {\n    margin: 0;\n    padding: 0;\n\n    display: flex;\n    flex-wrap: nowrap;\n    gap: spacing.space(2);\n\n    white-space: nowrap;\n\n    list-style: none;\n  }\n\n  &__navigation-item {\n  }\n\n  &__navigation-item-link {\n    padding: spacing.space(0.5) 0;\n\n    display: inline-block;\n\n    position: relative;\n\n    line-height: 2;\n    text-decoration: none;\n\n    @include typography.main-font-weight-medium;\n\n    &::after {\n      content: \"\";\n\n      height: 0;\n\n      position: absolute;\n      right: 0;\n      bottom: 0;\n      left: 0;\n\n      @include colour.colour-background(\"font-dark\");\n    }\n\n    &,\n    &:link,\n    &:visited {\n      color: inherit;\n    }\n\n    &--selected {\n      &,\n      &:hover {\n        &::after {\n          @include colour.thick-keyline-dark(top);\n        }\n      }\n    }\n  }\n\n  &.tna-background-accent {\n    background: colour.colour-var(\"background\");\n  }\n\n  &.tna-background-accent &__navigation {\n    @include colour.contrast-on-mobile;\n  }\n\n  @include media.on-medium {\n    .tna-logo {\n      width: 5rem;\n      height: 5rem;\n    }\n\n    &__logo-strapline {\n      line-height: 1.625rem;\n    }\n  }\n\n  @include media.on-mobile {\n    &__logo {\n      padding-top: spacing.space(1);\n      padding-bottom: spacing.space(1);\n    }\n\n    &__contents {\n      &.tna-container {\n        padding-right: 0;\n        padding-left: 0;\n      }\n    }\n\n    &__navigation-toggle {\n      display: block;\n\n      &.tna-column {\n        padding-left: 0;\n      }\n    }\n\n    &__navigation {\n      flex-direction: column;\n      align-items: stretch;\n\n      &.tna-column {\n        padding-right: 0;\n        padding-left: 0;\n      }\n    }\n\n    &__top-navigation-items {\n      padding: spacing.space(0.5) spacing.space(1);\n\n      justify-content: flex-start;\n\n      @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n    }\n\n    &__top-navigation-item {\n      margin: 0;\n      padding: spacing.space(0.5);\n    }\n\n    &__top-navigation-item-link {\n      &,\n      &:link,\n      &:visited {\n        @include colour.colour-font(\"font-light\");\n      }\n\n      &:hover {\n        @include colour.colour-font(\"font-dark\");\n      }\n    }\n\n    &__navigation-items {\n      width: 100%;\n\n      flex-direction: column;\n      gap: 0;\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      margin: 0;\n\n      display: block;\n\n      @include colour.colour-border(\"keyline\", 1px, solid, top);\n\n      &:first-child {\n        border-top: none;\n      }\n    }\n\n    &__navigation-item-link {\n      display: block;\n\n      line-height: 1.75rem;\n\n      &::after {\n        width: 0;\n        height: auto;\n\n        top: 0;\n        right: auto;\n      }\n\n      &--selected {\n        &,\n        &:hover {\n          &::after {\n            @include colour.colour-border(\"keyline\", 0.5rem, solid, left);\n          }\n        }\n      }\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    &__logo.tna-column,\n    &__navigation-item-link,\n    &__navigation-toggle.tna-column {\n      padding-right: grid.gutter-width();\n    }\n\n    &__logo.tna-column,\n    &__navigation-item-link {\n      padding-left: grid.gutter-width();\n    }\n\n    &__top-navigation-items {\n      padding-right: calc(#{grid.gutter-width()} - 0.5rem);\n      padding-left: calc(#{grid.gutter-width()} - 0.5rem);\n    }\n  }\n\n  @include media.on-tiny {\n    &__navigation-toggle.tna-column,\n    &__logo.tna-column {\n      padding-right: grid.gutter-width-tiny();\n    }\n\n    &__logo.tna-column {\n      padding-left: grid.gutter-width-tiny();\n    }\n\n    .tna-logo {\n      width: 3.5rem;\n      height: 3.5rem;\n    }\n\n    &__logo-strapline {\n      line-height: 1;\n    }\n\n    &__top-navigation-items {\n      gap: 0.5rem;\n    }\n\n    &__navigation-item-link {\n      padding-right: grid.gutter-width-tiny();\n      padding-left: calc(#{grid.gutter-width-tiny()} + 0.5rem);\n    }\n  }\n\n  @include colour.on-high-contrast-and-forced-colours {\n    &,\n    &__exit {\n      @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n    }\n  }\n\n  @include colour.on-forced-colours {\n    &__navigation-toggle-button {\n      height: auto;\n\n      line-height: 2;\n      @include typography.font-size(18);\n      @include typography.main-font-weight-bold;\n\n      border: none;\n    }\n\n    &__hamburger {\n      display: none;\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n  @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n  @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n  font-weight: typography.$main-font-weight-medium;\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  font-style: normal;\n  font-optical-sizing: auto;\n  font-variation-settings: \"wdth\" 100;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\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  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n    $small-and-tiny-identical;\n  $all-identical: $font-size-default == $font-size-medium and\n    $medium-small-and-tiny-identical and $small-and-tiny-identical;\n  line-height: $line-height;\n  @include font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include font-size($font-size-medium);\n      }\n    }\n  }\n}\n","/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n  #{$main-font-family-name},\n  sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n  #{$heading-font-family-name},\n  \"Arial Narrow\",\n  sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n  #{$detail-font-family-name},\n  monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_media.scss","../../../../src/nationalarchives/components/header/header.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAyLA,YACE,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CAjJA,4CAJA,gCCgCA,wBDiIF,0DAEI,yCACA,uCACA,uCACA,yCACA,yCACA,6BACA,6CACA,mCACA,6CACA,2CACA,uDACA,uDACA,mEACA,2CA5KF,4CAJA,iCE3CF,YAGE,kBAEA,wEAMA,sCACE,mBAIA,mCADF,wCAEI,oBAKF,oCACE,8BAIJ,kBACE,iBACA,oBAGF,2BACE,aACA,qBAEA,cACA,qBAGE,gHAGE,cAGF,mDACE,qBF0CJ,sDEvCI,mBAKN,sBACE,WACA,YAEA,qBAEA,cAGF,4BACE,cAEA,qBAEA,qBCrCF,YCcA,gDDbA,YCgBoB,IDlDpB,kBDyEE,yBAGF,uCACE,kBAEA,aAGF,uBACE,WACA,cAEA,qBFtCF,gDE0CE,6DAEE,WAEA,WACA,cAEA,cAEA,kBACA,QAEA,yBAGF,+BACE,MAGF,8BACE,SAIJ,+BACE,YACA,UAEA,gBAEA,aACA,mBACA,WAEA,kBAEA,cC7GF,YCYsB,ID7BtB,eDkIE,gBAEA,6BACA,sBAEA,eAEA,qCCjFF,0BACA,0BCpCsC,MFyHlC,8DACE,SAEA,sEACE,YAEA,0BAGF,qEACE,eAEA,yBAMR,wBACE,aACA,8BACA,qBACA,8BAEA,kBACA,UAGF,kCACE,SACA,eAEA,aACA,yBACA,aAEA,cAEA,gBCpLF,oBDyLA,iCACE,cAGF,sCACE,aACA,mBAEA,qBAEA,+HFvJF,yCE+JI,8SF/JJ,gCGYA,0BACA,0BCpCsC,MF8LpC,gDACE,iBAIJ,8BACE,SACA,UAEA,aACA,iBACA,SAEA,mBAEA,gBAMF,kCACE,cAEA,qBAEA,kBAEA,cACA,qBCnOF,YCewB,IFwNtB,yCACE,WAEA,SAEA,kBACA,QACA,SACA,OF5MJ,gDEiNE,mHAGE,cAME,4GF1MF,kDEiNJ,kCACE,sCDtMF,wBC8ME,kBACE,iBACA,oBAIA,oCACE,gBACA,eAIJ,uCACE,cAEA,kDACE,eAIJ,wBACE,sBACA,oBAEA,mCACE,gBACA,eAIJ,kCACE,iBAEA,2BF3PA,2DEgQF,iCACE,SAGF,sCACE,YAEA,+HF3RJ,yCEiSI,4CFjSJ,qCEsSE,8BACE,WAEA,sBACA,MAEA,sCFxRA,uGE8RF,6BACE,SAEA,cFjSA,wDEqSA,yCACE,gBAIJ,kCACE,cAEA,oBAEA,yCACE,QACA,YAEA,MACA,WAME,4GF1TJ,4DClBJ,kDCqVE,sBACE,WACA,YAGF,4BACE,oBAGF,2FAGE,mBAGF,oDAEE,kBAGF,kCACE,iCACA,iCDrWJ,wBC0WE,yDAEE,mBAGF,kBACE,kBACA,OAGF,sBACE,aACA,cAGF,4BACE,cAGF,+BCjbF,mBDqbE,kCACE,UAGF,kCACE,mBACA,iCFtBJ,8BE2BE,8BFhYE,4DA+VJ,+BEiCE,8BFhYE,4DAqWJ,8BEkCE,+BACE,YAEA,cC1cJ,mBAiBA,YCYsB,IFiblB,YAGF,uBACE","file":"header.css","sourcesContent":["@use \"sass:list\";\n@use \"sass:map\";\n@use \"../variables/borders\";\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@function colour-var($colour) {\n  @return var(\n    --#{$colour},\n    #{map.get(colour.$colour-palette-default, $colour)}\n  );\n}\n\n@mixin colour-font($colour, $important: false) {\n  color: colour-var($colour) if($important, !important, null);\n}\n\n@mixin colour-background($colour, $important: false) {\n  background-color: colour-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      border-#{$direction}: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-#{$direction}-color: colour-var($colour)\n        if($important, !important, null);\n    }\n  } @else {\n    @if $width != \"\" {\n      border: $width\n        colour-var($colour)\n        $style\n        if($important, !important, null);\n    } @else {\n      border-color: var(\n          --#{$colour},\n          #{map.get(colour.$colour-palette-default, $colour)}\n        )\n        if($important, !important, null);\n    }\n  }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n  @if $width != \"\" {\n    outline: $width colour-var($colour) $style if($important, !important, null);\n  } @else {\n    outline-color: colour-var($colour) if($important, !important, null);\n  }\n}\n\n@mixin colour-fill($colour, $important: false) {\n  fill: colour-var($colour) if($important, !important, null);\n}\n\n@mixin thick-keyline($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-dark($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"keyline-dark\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"keyline-dark\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-accent($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"accent-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\"accent-border\", borders.$thick-border-width, solid);\n  }\n}\n\n@mixin thick-keyline-error($direction: \"\") {\n  @if $direction != \"\" {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid,\n      $direction\n    );\n  } @else {\n    @include colour-border(\n      \"form-error-border\",\n      borders.$thick-border-width,\n      solid\n    );\n  }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour) {\n  @if $direction != \"\" {\n    border-#{$direction}: borders.$thick-border-width\n      #{brand-colour($brandColour)}\n      solid;\n  } @else {\n    border: borders.$thick-border-width #{brand-colour($brandColour)} solid;\n  }\n}\n\n// Use light theme colours (except for \"form-error-border\")\n%always-light {\n  @include colour-css-vars(\"form-error-border\");\n\n  @media (prefers-contrast: more) {\n    @include colour-css-vars-high-contrast(\"form-error-border\");\n  }\n}\n\n@mixin always-light {\n  @extend %always-light;\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  --accent-list-marker: var(--accent-border);\n  // --accent-list-marker: var(--font-base);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\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    --accent-list-marker: var(--accent-border);\n    // --accent-list-marker: var(--font-base);\n\n    @include colour-background(\"background\");\n\n    @include colour-font(\"font-base\");\n  }\n}\n\n@mixin contrast-on-mobile {\n  @extend %contrast-on-mobile;\n}\n\n%tint {\n  --background: var(--background-tint);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin tint {\n  @extend %tint;\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  --accent-list-marker: var(--accent-font-base);\n  --accent-border: var(--accent-font-dark);\n  --button-text: var(--accent-button-text);\n  --button-background: var(--accent-button-background);\n  --button-hover-text: var(--accent-button-hover-text);\n  --button-hover-background: var(--accent-button-hover-background);\n\n  @include colour-background(\"background\");\n\n  @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n  @extend %accent;\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  --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  --accent-border: var(--font-base);\n  --accent-list-marker: var(--font-base);\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%yellow-accent {\n  --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n  --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"brown\")} !important;\n  --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"black\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"black\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"brown\")} !important;\n}\n\n@mixin yellow-accent {\n  @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n  --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n  --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n  --accent-icon-light: #{colour.brand-colour(\"white\", 0.45)} !important;\n  --accent-link: #{colour.brand-colour(\"white\")} !important;\n  --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n  --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n  --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n  --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n  --accent-background: #{colour.brand-colour(\"black\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n  --accent-border: #{colour.brand-colour(\"black\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"grey\")} !important;\n  --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n  @extend %accent-lighter-text;\n  @extend %black-accent;\n}\n\n%pink-accent {\n  --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n  --accent-border: #{colour.brand-colour(\"pink\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"pink\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n  @extend %accent-lighter-text;\n  @extend %pink-accent;\n}\n\n%orange-accent {\n  --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n  --accent-border: #{colour.brand-colour(\"orange\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"orange\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n  @extend %accent-lighter-text;\n  @extend %orange-accent;\n}\n\n%green-accent {\n  --accent-background: #{colour.brand-colour(\"forest\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n  --accent-border: #{colour.brand-colour(\"green\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"green\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n  @extend %accent-lighter-text;\n  @extend %green-accent;\n}\n\n%blue-accent {\n  --accent-background: #{colour.brand-colour(\"navy\")} !important;\n  --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n  --accent-border: #{colour.brand-colour(\"blue\")} !important;\n  --accent-list-marker: #{colour.brand-colour(\"blue\")} !important;\n  --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n  @extend %accent-lighter-text;\n  @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n  @media (prefers-contrast: more) {\n    @content;\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/media\";\n@use \"../variables/typography\";\n\n$smallest-large-device-em: #{math.div(\n    media.$largest-medium-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-medium-device-em: #{math.div(\n    media.$largest-medium-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-medium-device-em: #{math.div(\n    media.$largest-small-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-small-device-em: #{math.div(\n    media.$largest-small-device-px,\n    typography.$relative-1rem-px\n  )}em;\n$smallest-small-device-em: #{math.div(\n    media.$largest-tiny-device-px + 1,\n    typography.$relative-1rem-px\n  )}em;\n$largest-tiny-device-em: #{math.div(\n    media.$largest-tiny-device-px,\n    typography.$relative-1rem-px\n  )}em;\n\n$media-large: \"(min-width: #{$smallest-large-device-em})\";\n$media-lt-large: \"(max-width: #{$largest-medium-device-em})\";\n$media-medium: \"(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})\";\n$media-gt-mobile: \"(min-width: #{$smallest-medium-device-em})\";\n$media-mobile: \"(max-width: #{$largest-small-device-em})\";\n$media-small: \"(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})\";\n$media-gt-tiny: \"(min-width: #{$smallest-small-device-em})\";\n$media-tiny: \"(max-width: #{$largest-tiny-device-em})\";\n\n// https://nationalarchives.github.io/design-system/styles/media/#media-queries\n@mixin on-large() {\n  @media #{$media-large} {\n    @content;\n  }\n}\n\n@mixin on-medium() {\n  @media #{$media-medium} {\n    @content;\n  }\n}\n\n@mixin on-small() {\n  @media #{$media-small} {\n    @content;\n  }\n}\n\n@mixin on-tiny() {\n  @media #{$media-tiny} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-mobile() {\n  @media #{$media-gt-mobile} {\n    @content;\n  }\n}\n\n@mixin on-larger-than-tiny() {\n  @media #{$media-gt-tiny} {\n    @content;\n  }\n}\n\n@mixin on-smaller-than-large() {\n  @media #{$media-lt-large} {\n    @content;\n  }\n}\n\n@mixin on-mobile() {\n  @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 \"../../tools/colour\";\n@use \"../../tools/grid\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-header {\n  @include colour.contrast;\n\n  position: relative;\n\n  background: linear-gradient(\n    0deg,\n    rgb(34 34 34 / 100%) 0%,\n    rgb(0 0 0 / 100%) 100%\n  );\n\n  .tna-template--dark-theme & {\n    background: colour.brand-colour(\"black\");\n  }\n\n  .tna-template--system-theme & {\n    @media (prefers-color-scheme: dark) {\n      background: colour.brand-colour(\"black\");\n    }\n  }\n\n  &__contents {\n    &.tna-container {\n      justify-content: space-between;\n    }\n  }\n\n  &__logo {\n    padding-top: spacing.space(1.25);\n    padding-bottom: spacing.space(1.25);\n  }\n\n  &__logo-contents {\n    display: flex;\n    align-items: flex-end;\n\n    color: inherit;\n    text-decoration: none;\n\n    &--link {\n      &,\n      &:link,\n      &:visited {\n        color: inherit;\n      }\n\n      &:hover:not(:focus) {\n        text-decoration: none;\n\n        @include colour.colour-outline(\"font-dark\", 0.3125rem, solid);\n        outline-offset: 1px;\n      }\n    }\n  }\n\n  .tna-logo {\n    width: 5rem;\n    height: 5rem;\n\n    display: inline-block;\n\n    flex-shrink: 0;\n  }\n\n  &__logo-strapline {\n    margin: 0 spacing.space(0.75);\n\n    display: inline-block;\n\n    line-height: 1.625rem;\n    @include typography.heading-font;\n    @include typography.font-size(20);\n    text-transform: uppercase;\n  }\n\n  &__navigation-button-wrapper {\n    align-self: center;\n\n    display: none;\n  }\n\n  &__hamburger {\n    width: 2rem;\n    height: 0.25rem;\n\n    display: inline-block;\n\n    @include colour.colour-background(\"font-dark\");\n\n    &::before,\n    &::after {\n      content: \"\";\n\n      width: 2rem;\n      height: 0.25rem;\n\n      display: block;\n\n      position: absolute;\n      right: 0;\n\n      background-color: inherit;\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    appearance: none;\n\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n\n    position: relative;\n\n    color: inherit;\n    @include typography.main-font-weight-bold;\n    @include typography.font-size(16);\n\n    background: none;\n\n    border: 0 transparent solid;\n    border-width: 0.25rem 0;\n\n    cursor: pointer;\n\n    &:hover {\n      @include typography.interacted-text-decoration;\n    }\n\n    &--opened {\n      .tna-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    display: flex;\n    flex-direction: column-reverse;\n    align-items: flex-end;\n    justify-content: space-between;\n\n    position: relative;\n    z-index: 2;\n  }\n\n  &__top-navigation-items {\n    margin: 0;\n    padding: spacing.space(1.25) 0;\n\n    display: flex;\n    justify-content: flex-end;\n    gap: spacing.space(0.5) spacing.space(1.5);\n\n    line-height: 1;\n\n    list-style: none;\n\n    @include typography.font-size(15);\n  }\n\n  &__top-navigation-item {\n    display: block;\n  }\n\n  &__top-navigation-item-link {\n    display: flex;\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    &--selected {\n      &,\n      &:link,\n      &:visited {\n        @include colour.colour-font(\"font-base\");\n        @include typography.interacted-text-decoration;\n      }\n    }\n\n    .fa-solid {\n      margin-right: spacing.space(0.375);\n    }\n  }\n\n  &__navigation-items {\n    margin: 0;\n    padding: 0;\n\n    display: flex;\n    flex-wrap: nowrap;\n    gap: spacing.space(2);\n\n    white-space: nowrap;\n\n    list-style: none;\n  }\n\n  &__navigation-item {\n  }\n\n  &__navigation-item-link {\n    padding: spacing.space(0.5) 0;\n\n    display: inline-block;\n\n    position: relative;\n\n    line-height: 2;\n    text-decoration: none;\n\n    @include typography.main-font-weight-medium;\n\n    &::after {\n      content: \"\";\n\n      height: 0;\n\n      position: absolute;\n      right: 0;\n      bottom: 0;\n      left: 0;\n\n      @include colour.colour-background(\"font-dark\");\n    }\n\n    &,\n    &:link,\n    &:visited {\n      color: inherit;\n    }\n\n    &--selected {\n      &,\n      &:hover {\n        &::after {\n          @include colour.thick-keyline-dark(top);\n        }\n      }\n    }\n  }\n\n  &.tna-background-accent {\n    background: colour.colour-var(\"background\");\n  }\n\n  &.tna-background-accent &__navigation {\n    @include colour.contrast-on-mobile;\n  }\n\n  @include media.on-mobile {\n    &__logo {\n      padding-top: spacing.space(1);\n      padding-bottom: spacing.space(1);\n    }\n\n    &__contents {\n      &.tna-container {\n        padding-right: 0;\n        padding-left: 0;\n      }\n    }\n\n    &__navigation-button-wrapper {\n      display: block;\n\n      &.tna-column {\n        padding-left: 0;\n      }\n    }\n\n    &__navigation {\n      flex-direction: column;\n      align-items: stretch;\n\n      &.tna-column {\n        padding-right: 0;\n        padding-left: 0;\n      }\n    }\n\n    &__top-navigation-items {\n      padding: spacing.space(0.5) spacing.space(1);\n\n      justify-content: flex-start;\n\n      @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n    }\n\n    &__top-navigation-item {\n      margin: 0;\n    }\n\n    &__top-navigation-item-link {\n      padding: spacing.space(0.5);\n\n      &,\n      &:link,\n      &:visited {\n        @include colour.colour-font(\"font-light\");\n      }\n\n      &:hover {\n        @include colour.colour-font(\"font-dark\");\n      }\n    }\n\n    &__navigation-items {\n      width: 100%;\n\n      flex-direction: column;\n      gap: 0;\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      margin: 0;\n\n      display: block;\n\n      @include colour.colour-border(\"keyline\", 1px, solid, top);\n\n      &:first-child {\n        border-top: none;\n      }\n    }\n\n    &__navigation-item-link {\n      display: block;\n\n      line-height: 1.75rem;\n\n      &::after {\n        width: 0;\n        height: auto;\n\n        top: 0;\n        right: auto;\n      }\n\n      &--selected {\n        &,\n        &:hover {\n          &::after {\n            @include colour.colour-border(\"keyline\", 0.5rem, solid, left);\n          }\n        }\n      }\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    &__logo,\n    &__navigation-item-link,\n    &__navigation-button-wrapper {\n      padding-right: grid.gutter-width();\n    }\n\n    &__logo,\n    &__navigation-item-link {\n      padding-left: grid.gutter-width();\n    }\n\n    &__top-navigation-items {\n      padding-right: calc(#{grid.gutter-width()} - 0.5rem);\n      padding-left: calc(#{grid.gutter-width()} - 0.5rem);\n    }\n  }\n\n  @include media.on-tiny {\n    &__navigation-button-wrapper,\n    &__logo {\n      padding-right: grid.gutter-width-tiny();\n    }\n\n    &__logo {\n      padding-left: grid.gutter-width-tiny();\n      flex: 1;\n    }\n\n    .tna-logo {\n      width: 3.5rem;\n      height: 3.5rem;\n    }\n\n    &__logo-strapline {\n      line-height: 1;\n    }\n\n    &__navigation-button {\n      @include typography.font-size(14);\n    }\n\n    &__top-navigation-items {\n      gap: 0.5rem;\n    }\n\n    &__navigation-item-link {\n      padding-right: grid.gutter-width-tiny();\n      padding-left: calc(#{grid.gutter-width-tiny()} + 0.5rem);\n    }\n  }\n\n  @include colour.on-high-contrast-and-forced-colours {\n    &,\n    &__exit {\n      @include colour.colour-border(\"keyline\", 1px, solid, bottom);\n    }\n  }\n\n  @include colour.on-forced-colours {\n    &__navigation-button {\n      height: auto;\n\n      line-height: 2;\n      @include typography.font-size(18);\n      @include typography.main-font-weight-bold;\n\n      border: none;\n    }\n\n    &__hamburger {\n      display: none;\n    }\n  }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n  font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n  @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n  @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n  font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n  font-weight: typography.$main-font-weight-medium;\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  font-style: normal;\n  font-optical-sizing: auto;\n  font-variation-settings: \"wdth\" 100;\n  @if $bold {\n    @include main-font-weight-bold;\n  } @else {\n    @include main-font-weight;\n  }\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  font-style: normal;\n  font-optical-sizing: auto;\n  @if $bold {\n    font-weight: typography.$detail-font-weight-bold;\n  } @else {\n    font-weight: typography.$detail-font-weight;\n  }\n}\n\n@mixin detail-font-small {\n  @include detail-font;\n  @include font-size(14);\n  line-height: 1.1;\n  text-transform: uppercase;\n}\n\n@mixin interacted-text-decoration {\n  text-decoration: underline;\n  text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n}\n\n@mixin heading-generator(\n  $font-size-default,\n  $font-size-medium,\n  $font-size-small,\n  $font-size-tiny,\n  $line-height\n) {\n  $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n  $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n    $small-and-tiny-identical;\n  $all-identical: $font-size-default == $font-size-medium and\n    $medium-small-and-tiny-identical and $small-and-tiny-identical;\n  line-height: $line-height;\n  @include font-size($font-size-default);\n\n  @if $all-identical != true {\n    @if $medium-small-and-tiny-identical != true {\n      @include media.on-medium {\n        @include font-size($font-size-medium);\n      }\n\n      @if $small-and-tiny-identical != true {\n        @include media.on-small {\n          @include font-size($font-size-small);\n        }\n\n        @include media.on-tiny {\n          @include font-size($font-size-tiny);\n        }\n      } @else {\n        @include media.on-mobile {\n          @include font-size($font-size-small);\n        }\n      }\n    } @else {\n      @include media.on-smaller-than-large {\n        @include font-size($font-size-medium);\n      }\n    }\n  }\n}\n","/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactive-text-decoration-thickness: 3.5px !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n  #{$main-font-family-name},\n  sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n  #{$heading-font-family-name},\n  \"Arial Narrow\",\n  sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n  #{$detail-font-family-name},\n  monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 30 !default;\n$heading-l-font-size-small: 28 !default;\n$heading-l-font-size-tiny: 25 !default;\n$heading-l-line-height: 1.3 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: 21 !default;\n$heading-m-font-size-small: 20 !default;\n$heading-m-font-size-tiny: 19 !default;\n$heading-m-line-height: 1.6 !default;\n\n$heading-s-font-size-default: 18 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.6 !default;\n"]}

package/nationalarchives/components/header/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={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},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 n(t){return n="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},n(t)}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,o(i.key),i)}}function o(t){var e=function(t){if("object"!=n(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,"string");if("object"!=n(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:e+""}t.r(e),t.d(e,{Header:()=>a});var a=function(){return t=function t(e){var n=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-header__navigation-toggle-button"),this.$navigation=e&&e.querySelector(".tna-header__navigation"),this.$links=e&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 48em)"),this.$module&&this.$toggleButton&&this.$navigation&&(this.$toggleButton.removeAttribute("hidden"),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()})),this.$navigation.addEventListener("keyup",(function(t){"Escape"===t.code&&(n.menuOpened=!1,n.syncState(),n.$toggleButton.focus())})))},(e=[{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:"show",value:function(){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.removeAttribute("hidden"),this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-header__navigation-toggle-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}},{key:"hide",value:function(){this.$navigation.classList.remove("tna-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true"),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-header__navigation-toggle-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","-1")}}])&&i(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return e})()));
+!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,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},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 n(t){return n="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},n(t)}function i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,o(i.key),i)}}function o(t){var e=function(t){if("object"!=n(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,"string");if("object"!=n(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==n(e)?e:e+""}t.r(e),t.d(e,{Header:()=>a});var a=function(){return t=function t(e){var n=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-header__navigation-button"),this.$navigation=e&&e.querySelector(".tna-header__navigation"),this.$links=e&&this.$navigation&&this.$navigation.querySelectorAll("[tabindex='0']"),this.menuOpened=!1,this.mql=window.matchMedia("(max-width: 48em)"),this.$module&&this.$toggleButton&&this.$navigation&&(this.$toggleButton.removeAttribute("hidden"),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()})),this.$module.addEventListener("keyup",(function(t){"Escape"===t.code&&n.menuOpened&&n.mql.matches&&(n.menuOpened=!1,n.syncState(),n.$toggleButton.focus())})))},(e=[{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:"show",value:function(){this.$navigation.classList.add("tna-header__navigation--open"),this.$navigation.removeAttribute("hidden"),this.$navigation.setAttribute("aria-hidden","false"),this.$toggleButton.setAttribute("aria-expanded","true"),this.$toggleButton.setAttribute("title","Close menu"),this.$toggleButton.classList.add("tna-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","0")}},{key:"hide",value:function(){this.$navigation.classList.remove("tna-header__navigation--open"),this.$navigation.hidden=!0,this.$navigation.setAttribute("aria-hidden","true"),this.$toggleButton.setAttribute("aria-expanded","false"),this.$toggleButton.setAttribute("title","Open menu"),this.$toggleButton.classList.remove("tna-header__navigation-button--opened");for(var t=0;t<this.$links.length;t++)this.$links[t].setAttribute("tabindex","-1")}}])&&i(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();return e})()));
 //# sourceMappingURL=header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"components/header/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,osBCLvD,IAAMC,EAAM,WAoChB,O,EAnCD,SAAAA,EAAYC,GAAS,IAAAC,EAAA,M,4FAAAC,CAAA,KAAAH,GACnBI,KAAKH,QAAUA,EACfG,KAAKC,cACHJ,GAAWA,EAAQK,cAAc,yCACnCF,KAAKG,YACHN,GAAWA,EAAQK,cAAc,2BACnCF,KAAKI,OACHP,GACAG,KAAKG,aACLH,KAAKG,YAAYE,iBAAiB,kBACpCL,KAAKM,YAAa,EAClBN,KAAKO,IAAMC,OAAOC,WAAW,qBAExBT,KAAKH,SAAYG,KAAKC,eAAkBD,KAAKG,cAIlDH,KAAKC,cAAcS,gBAAgB,UACnCV,KAAKW,YACLX,KAAKC,cAAcW,iBAAiB,SAAS,kBAC3Cd,EAAKe,wBAAwB,IAE3B,qBAAsBb,KAAKO,IAC7BP,KAAKO,IAAIK,iBAAiB,UAAU,kBAAMd,EAAKa,WAAW,IAE1DX,KAAKO,IAAIO,aAAY,kBAAMhB,EAAKa,WAAW,IAG7CX,KAAKG,YAAYS,iBAAiB,SAAS,SAACG,GAC3B,WAAXA,EAAEC,OACJlB,EAAKQ,YAAa,EAClBR,EAAKa,YACLb,EAAKG,cAAcgB,QAEvB,IACF,G,EAAC,EAAAnC,IAAA,yBAAAa,MAED,WACEK,KAAKM,YAAcN,KAAKM,WACxBN,KAAKW,WACP,GAAC,CAAA7B,IAAA,YAAAa,MAED,WACMK,KAAKO,IAAIW,QACPlB,KAAKM,WACPN,KAAKmB,OAELnB,KAAKoB,OAGPpB,KAAKmB,MAET,GAAC,CAAArC,IAAA,OAAAa,MAED,WACEK,KAAKG,YAAYkB,UAAUC,IAAI,gCAC/BtB,KAAKG,YAAYO,gBAAgB,UACjCV,KAAKG,YAAYoB,aAAa,cAAe,SAC7CvB,KAAKC,cAAcsB,aAAa,gBAAiB,QACjDvB,KAAKC,cAAcsB,aAAa,QAAS,cACzCvB,KAAKC,cAAcoB,UAAUC,IAC3B,gDAGF,IAAK,IAAIE,EAAI,EAAGA,EAAIxB,KAAKI,OAAOqB,OAAQD,IACtCxB,KAAKI,OAAOoB,GAAGD,aAAa,WAAY,IAE5C,GAAC,CAAAzC,IAAA,OAAAa,MAED,WACEK,KAAKG,YAAYkB,UAAUK,OAAO,gCAClC1B,KAAKG,YAAYwB,QAAS,EAC1B3B,KAAKG,YAAYoB,aAAa,cAAe,QAC7CvB,KAAKC,cAAcsB,aAAa,gBAAiB,SACjDvB,KAAKC,cAAcsB,aAAa,QAAS,aACzCvB,KAAKC,cAAcoB,UAAUK,OAC3B,gDAGF,IAAK,IAAIF,EAAI,EAAGA,EAAIxB,KAAKI,OAAOqB,OAAQD,IACtCxB,KAAKI,OAAOoB,GAAGD,aAAa,WAAY,KAE5C,M,6EAAC,CAnFgB,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/header/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 Header {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButton =\n      $module && $module.querySelector(\".tna-header__navigation-toggle-button\");\n    this.$navigation =\n      $module && $module.querySelector(\".tna-header__navigation\");\n    this.$links =\n      $module &&\n      this.$navigation &&\n      this.$navigation.querySelectorAll(\"[tabindex='0']\");\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 48em)\");\n\n    if (!this.$module || !this.$toggleButton || !this.$navigation) {\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    this.$navigation.addEventListener(\"keyup\", (e) => {\n      if (e.code === \"Escape\") {\n        this.menuOpened = false;\n        this.syncState();\n        this.$toggleButton.focus();\n      }\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  show() {\n    this.$navigation.classList.add(\"tna-header__navigation--open\");\n    this.$navigation.removeAttribute(\"hidden\");\n    this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n    this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n    this.$toggleButton.classList.add(\n      \"tna-header__navigation-toggle-button--opened\",\n    );\n\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"0\");\n    }\n  }\n\n  hide() {\n    this.$navigation.classList.remove(\"tna-header__navigation--open\");\n    this.$navigation.hidden = true;\n    this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n    this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n    this.$toggleButton.classList.remove(\n      \"tna-header__navigation-toggle-button--opened\",\n    );\n\n    for (let i = 0; i < this.$links.length; i++) {\n      this.$links[i].setAttribute(\"tabindex\", \"-1\");\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","Header","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","e","code","focus","matches","show","hide","classList","add","setAttribute","i","length","remove","hidden"],"sourceRoot":""}
+{"version":3,"file":"components/header/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,osBCLvD,IAAMC,EAAM,WAsChB,O,EArCD,SAAAA,EAAYC,GAAS,IAAAC,EAAA,M,4FAAAC,CAAA,KAAAH,GACnBI,KAAKH,QAAUA,EACfG,KAAKC,cACHJ,GAAWA,EAAQK,cAAc,kCACnCF,KAAKG,YACHN,GAAWA,EAAQK,cAAc,2BACnCF,KAAKI,OACHP,GACAG,KAAKG,aACLH,KAAKG,YAAYE,iBAAiB,kBACpCL,KAAKM,YAAa,EAClBN,KAAKO,IAAMC,OAAOC,WAAW,qBAExBT,KAAKH,SAAYG,KAAKC,eAAkBD,KAAKG,cAIlDH,KAAKC,cAAcS,gBAAgB,UACnCV,KAAKW,YACLX,KAAKC,cAAcW,iBAAiB,SAAS,kBAC3Cd,EAAKe,wBAAwB,IAE3B,qBAAsBb,KAAKO,IAC7BP,KAAKO,IAAIK,iBAAiB,UAAU,kBAAMd,EAAKa,WAAW,IAE1DX,KAAKO,IAAIO,aAAY,kBAAMhB,EAAKa,WAAW,IAG7CX,KAAKH,QAAQe,iBAAiB,SAAS,SAACG,GACvB,WAAXA,EAAEC,MACAlB,EAAKQ,YAAcR,EAAKS,IAAIU,UAC9BnB,EAAKQ,YAAa,EAClBR,EAAKa,YACLb,EAAKG,cAAciB,QAGzB,IACF,G,EAAC,EAAApC,IAAA,yBAAAa,MAED,WACEK,KAAKM,YAAcN,KAAKM,WACxBN,KAAKW,WACP,GAAC,CAAA7B,IAAA,YAAAa,MAED,WACMK,KAAKO,IAAIU,QACPjB,KAAKM,WACPN,KAAKmB,OAELnB,KAAKoB,OAGPpB,KAAKmB,MAET,GAAC,CAAArC,IAAA,OAAAa,MAED,WACEK,KAAKG,YAAYkB,UAAUC,IAAI,gCAC/BtB,KAAKG,YAAYO,gBAAgB,UACjCV,KAAKG,YAAYoB,aAAa,cAAe,SAC7CvB,KAAKC,cAAcsB,aAAa,gBAAiB,QACjDvB,KAAKC,cAAcsB,aAAa,QAAS,cACzCvB,KAAKC,cAAcoB,UAAUC,IAAI,yCAEjC,IAAK,IAAIE,EAAI,EAAGA,EAAIxB,KAAKI,OAAOqB,OAAQD,IACtCxB,KAAKI,OAAOoB,GAAGD,aAAa,WAAY,IAE5C,GAAC,CAAAzC,IAAA,OAAAa,MAED,WACEK,KAAKG,YAAYkB,UAAUK,OAAO,gCAClC1B,KAAKG,YAAYwB,QAAS,EAC1B3B,KAAKG,YAAYoB,aAAa,cAAe,QAC7CvB,KAAKC,cAAcsB,aAAa,gBAAiB,SACjDvB,KAAKC,cAAcsB,aAAa,QAAS,aACzCvB,KAAKC,cAAcoB,UAAUK,OAC3B,yCAGF,IAAK,IAAIF,EAAI,EAAGA,EAAIxB,KAAKI,OAAOqB,OAAQD,IACtCxB,KAAKI,OAAOoB,GAAGD,aAAa,WAAY,KAE5C,M,6EAAC,CAnFgB,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/header/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 Header {\n  constructor($module) {\n    this.$module = $module;\n    this.$toggleButton =\n      $module && $module.querySelector(\".tna-header__navigation-button\");\n    this.$navigation =\n      $module && $module.querySelector(\".tna-header__navigation\");\n    this.$links =\n      $module &&\n      this.$navigation &&\n      this.$navigation.querySelectorAll(\"[tabindex='0']\");\n    this.menuOpened = false;\n    this.mql = window.matchMedia(\"(max-width: 48em)\");\n\n    if (!this.$module || !this.$toggleButton || !this.$navigation) {\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    this.$module.addEventListener(\"keyup\", (e) => {\n      if (e.code === \"Escape\") {\n        if (this.menuOpened && this.mql.matches) {\n          this.menuOpened = false;\n          this.syncState();\n          this.$toggleButton.focus();\n        }\n      }\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  show() {\n    this.$navigation.classList.add(\"tna-header__navigation--open\");\n    this.$navigation.removeAttribute(\"hidden\");\n    this.$navigation.setAttribute(\"aria-hidden\", \"false\");\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"true\");\n    this.$toggleButton.setAttribute(\"title\", \"Close menu\");\n    this.$toggleButton.classList.add(\"tna-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  hide() {\n    this.$navigation.classList.remove(\"tna-header__navigation--open\");\n    this.$navigation.hidden = true;\n    this.$navigation.setAttribute(\"aria-hidden\", \"true\");\n    this.$toggleButton.setAttribute(\"aria-expanded\", \"false\");\n    this.$toggleButton.setAttribute(\"title\", \"Open menu\");\n    this.$toggleButton.classList.remove(\n      \"tna-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}\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","Header","$module","_this","_classCallCheck","this","$toggleButton","querySelector","$navigation","$links","querySelectorAll","menuOpened","mql","window","matchMedia","removeAttribute","syncState","addEventListener","handleToggleNavigation","addListener","e","code","matches","focus","show","hide","classList","add","setAttribute","i","length","remove","hidden"],"sourceRoot":""}

package/nationalarchives/components/header/header.mjs

@@ -2,7 +2,7 @@ export class Header {
   constructor($module) {
     this.$module = $module;
     this.$toggleButton =
-      $module && $module.querySelector(".tna-header__navigation-toggle-button");
+      $module && $module.querySelector(".tna-header__navigation-button");
     this.$navigation =
       $module && $module.querySelector(".tna-header__navigation");
     this.$links =
@@ -27,11 +27,13 @@ export class Header {
       this.mql.addListener(() => this.syncState());
     }
 
-    this.$navigation.addEventListener("keyup", (e) => {
+    this.$module.addEventListener("keyup", (e) => {
       if (e.code === "Escape") {
-        this.menuOpened = false;
-        this.syncState();
-        this.$toggleButton.focus();
+        if (this.menuOpened && this.mql.matches) {
+          this.menuOpened = false;
+          this.syncState();
+          this.$toggleButton.focus();
+        }
       }
     });
   }
@@ -59,9 +61,7 @@ export class Header {
     this.$navigation.setAttribute("aria-hidden", "false");
     this.$toggleButton.setAttribute("aria-expanded", "true");
     this.$toggleButton.setAttribute("title", "Close menu");
-    this.$toggleButton.classList.add(
-      "tna-header__navigation-toggle-button--opened",
-    );
+    this.$toggleButton.classList.add("tna-header__navigation-button--opened");
 
     for (let i = 0; i < this.$links.length; i++) {
       this.$links[i].setAttribute("tabindex", "0");
@@ -75,7 +75,7 @@ export class Header {
     this.$toggleButton.setAttribute("aria-expanded", "false");
     this.$toggleButton.setAttribute("title", "Open menu");
     this.$toggleButton.classList.remove(
-      "tna-header__navigation-toggle-button--opened",
+      "tna-header__navigation-button--opened",
     );
 
     for (let i = 0; i < this.$links.length; i++) {

package/nationalarchives/components/header/header.scss

@@ -26,34 +26,6 @@
     }
   }
 
-  &__exit {
-    padding-top: spacing.space(0.5);
-    padding-bottom: spacing.space(0.5);
-
-    text-align: right;
-
-    @include colour.contrast;
-  }
-
-  &__exit-link {
-    text-decoration: none;
-    @include typography.font-size(16);
-
-    &,
-    &:link,
-    &:visited {
-      @include colour.colour-font("font-base");
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    .fa-solid {
-      margin-left: spacing.space(0.5);
-    }
-  }
-
   &__contents {
     &.tna-container {
       justify-content: space-between;
@@ -61,8 +33,8 @@
   }
 
   &__logo {
-    padding-top: spacing.space(1.5);
-    padding-bottom: spacing.space(1.5);
+    padding-top: spacing.space(1.25);
+    padding-bottom: spacing.space(1.25);
   }
 
   &__logo-contents {
@@ -89,8 +61,8 @@
   }
 
   .tna-logo {
-    width: 6rem;
-    height: 6rem;
+    width: 5rem;
+    height: 5rem;
 
     display: inline-block;
 
@@ -102,13 +74,13 @@
 
     display: inline-block;
 
-    line-height: 2rem;
+    line-height: 1.625rem;
     @include typography.heading-font;
     @include typography.font-size(20);
     text-transform: uppercase;
   }
 
-  &__navigation-toggle {
+  &__navigation-button-wrapper {
     align-self: center;
 
     display: none;
@@ -118,7 +90,7 @@
     width: 2rem;
     height: 0.25rem;
 
-    display: block;
+    display: inline-block;
 
     @include colour.colour-background("font-dark");
 
@@ -126,13 +98,13 @@
     &::after {
       content: "";
 
+      width: 2rem;
       height: 0.25rem;
 
       display: block;
 
       position: absolute;
       right: 0;
-      left: 0;
 
       background-color: inherit;
     }
@@ -146,17 +118,21 @@
     }
   }
 
-  &__navigation-toggle-button {
+  &__navigation-button {
     height: 2rem;
     padding: 0;
 
     appearance: none;
 
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 
     position: relative;
 
-    font-size: 0;
+    color: inherit;
+    @include typography.main-font-weight-bold;
+    @include typography.font-size(16);
 
     background: none;
 
@@ -165,6 +141,10 @@
 
     cursor: pointer;
 
+    &:hover {
+      @include typography.interacted-text-decoration;
+    }
+
     &--opened {
       .tna-header__hamburger {
         height: 0;
@@ -305,17 +285,6 @@
     @include colour.contrast-on-mobile;
   }
 
-  @include media.on-medium {
-    .tna-logo {
-      width: 5rem;
-      height: 5rem;
-    }
-
-    &__logo-strapline {
-      line-height: 1.625rem;
-    }
-  }
-
   @include media.on-mobile {
     &__logo {
       padding-top: spacing.space(1);
@@ -329,7 +298,7 @@
       }
     }
 
-    &__navigation-toggle {
+    &__navigation-button-wrapper {
       display: block;
 
       &.tna-column {
@@ -357,10 +326,11 @@
 
     &__top-navigation-item {
       margin: 0;
-      padding: spacing.space(0.5);
     }
 
     &__top-navigation-item-link {
+      padding: spacing.space(0.5);
+
       &,
       &:link,
       &:visited {
@@ -430,13 +400,13 @@
       line-height: 1.25rem;
     }
 
-    &__logo.tna-column,
+    &__logo,
     &__navigation-item-link,
-    &__navigation-toggle.tna-column {
+    &__navigation-button-wrapper {
       padding-right: grid.gutter-width();
     }
 
-    &__logo.tna-column,
+    &__logo,
     &__navigation-item-link {
       padding-left: grid.gutter-width();
     }
@@ -448,13 +418,14 @@
   }
 
   @include media.on-tiny {
-    &__navigation-toggle.tna-column,
-    &__logo.tna-column {
+    &__navigation-button-wrapper,
+    &__logo {
       padding-right: grid.gutter-width-tiny();
     }
 
-    &__logo.tna-column {
+    &__logo {
       padding-left: grid.gutter-width-tiny();
+      flex: 1;
     }
 
     .tna-logo {
@@ -466,6 +437,10 @@
       line-height: 1;
     }
 
+    &__navigation-button {
+      @include typography.font-size(14);
+    }
+
     &__top-navigation-items {
       gap: 0.5rem;
     }
@@ -484,7 +459,7 @@
   }
 
   @include colour.on-forced-colours {
-    &__navigation-toggle-button {
+    &__navigation-button {
       height: auto;
 
       line-height: 2;

package/nationalarchives/components/header/macro-options.json

@@ -95,32 +95,6 @@
     "required": false,
     "description": ""
   },
-  {
-    "name": "exit",
-    "type": "object",
-    "required": false,
-    "description": "",
-    "params": [
-      {
-        "name": "text",
-        "type": "string",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "href",
-        "type": "string",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "target",
-        "type": "string",
-        "required": false,
-        "description": ""
-      }
-    ]
-  },
   {
     "name": "navigationId",
     "type": "string",

package/nationalarchives/components/header/template.njk

@@ -4,17 +4,6 @@
 {%- endif -%}
 {%- set classes = containerClasses | join(' ') -%}
 <header class="tna-header{% if classes %} {{ classes }}{% endif %}" data-module="tna-header"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
-  {%- if params.exit -%}
-  <div class="tna-header__exit">
-    <div class="tna-container">
-      <div class="tna-column tna-column--full">
-        <a href="{{ params.exit.href }}" class="tna-header__exit-link"{%- if params.exit.target %} target="{{ params.exit.target }}" title="{{ params.exit.text }} (opens in new tab)"{% endif %}>
-          {{ params.exit.text }}
-        </a>
-      </div>
-    </div>
-  </div>
-  {%- endif -%}
   <div class="tna-container tna-header__contents">
     <div class="tna-column tna-header__logo">
       <{%- if params.logo.href -%}a href="{{ params.logo.href }}" class="tna-header__logo-contents tna-header__logo-contents--link" title="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}"{%- else -%}span class="tna-header__logo-contents"{%- endif -%}>
@@ -32,8 +21,8 @@
       </{%- if params.logo.href -%}a{%- else -%}span{%- endif -%}>
     </div>
     {%- if params.navigation or params.topNavigation %}
-    <div class="tna-column tna-header__navigation-toggle">
-      <button class="tna-header__navigation-toggle-button" type="button" aria-controls="{{ 'tna-header__navigation' or params.navigationId }}" hidden>
+    <div class="tna-column tna-header__navigation-button-wrapper">
+      <button class="tna-header__navigation-button" type="button" aria-controls="{{ 'tna-header__navigation' or params.navigationId }}" hidden>
         Menu
         <span class="tna-header__hamburger"></span>
       </button>