/* basic typography and color */
@font-face { font-family: DINNextLTPro; src: url('../design/DINNextLTPro-Light.woff'); }
@font-face { font-family: DINNextLTPro; font-weight: bold; src: url('../design/DINNextLTPro-Regular.woff'); }
@font-face { font-family: MaterialIcons; src: url('../design/MaterialIcons-Regular.woff'); }
body { font-size: 16px; font-family: DINNextLTPro, sans-serif; }

body { color: white; background: #333; }
.highlighted, a { color: #ce1126; }
a { text-decoration: none; }

body > header { font-weight: bold; background-color: inherit; }
body > header a:not(.active):not(:hover):not(:focus):not(:active), body > footer a:not(.active):not(:hover):not(:focus):not(:active) { color: inherit; }
body > main { color: #333; background: white; }
body > main > a:hover, body > main > a:focus, body > main > a:active { text-decoration: underline; }



/* debug styles */
/*
body > *, body > * > * { outline: 1px solid blue; }
*/

/* basic layout, sticky footer based on https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
html {}
body { display: flex; flex-direction: column; min-height: 100vh; width: 100%; overflow-x: hidden; margin: 0; padding: 0; }
body > header { flex-shrink: 0; margin: 0; padding: 0; }
body > main	 { flex: auto 1 0; margin: 0; padding: 0; }
body > footer { flex-shrink: 0; margin: 0; padding: 0; }

@media (min-width: 768px) { /* tablet and desktop only */
	body > header, body > main, body > footer { width: 768px; box-sizing: border-box; margin: 0 auto; }
	body > main { position: relative;	}
	body > main::before { content: ''; position: absolute; z-index: -1;
		top: 0; bottom: 0; left: 50%; right: 50%; margin: 0 -50vw;
		background: inherit; }
}
@media (max-width: 767px) { /* mobile only */
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* The min-height: 100vh doesn't work in IE11, it needs height instead. But height breaks
	   position: sticky (it only scrolls down to the end of the body). IE11 doesn't use sticky
	   so we set a fixed height only for IE11. */
	body { height: 100vh; }
}



/* page header */
body > header > a.collins { color: rgba(0,0,0,0) !important; background: url('../design/collins-aerospace.png') no-repeat left center; background-size: contain; }
body > header > a.locale { color: gray !important; }
body > header > .locale { font-size: 14px}

@media (min-width: 768px) { /* tablet and desktop only */
	body > header { padding: 0.75em; display: grid; grid-row-gap: 0; grid-template-areas: 
		"hs      hs  locale"
		"collins nav nav"
	; }
	body > header > .hs      { grid-area: hs; margin: 0; padding: 0; }
	body > header > .locale  { grid-area: locale; justify-self: end; }
	body > header > .collins { grid-area: collins; justify-self: start; white-space: pre; }
	body > header > nav      { grid-area: nav; justify-self: end; }
	body > header > .menu    { display: none; }
	
	/* IE compatibility */
	body > header { display: -ms-grid; -ms-grid-columns: auto 1fr auto; -ms-grid-rows: auto 0 auto; }
	body > header > .hs      {                 -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; }
	body > header > .locale  { display: block; -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-align: end; }
	body > header > .collins { display: block; -ms-grid-row: 3; -ms-grid-column: 1; }
	body > header > nav      {                 -ms-grid-row: 3; -ms-grid-column: 2; -ms-grid-column-span: 2; -ms-grid-column-align: end; }
	
	/* Detail styles */
	body > header > .hs { font-size: 14px; }
	body > header > .collins { font-size: 1.15em; }
	body > header > nav > ul { font-size: 14px; font-weight: normal; display: flex; margin: 0.4em 0 0 0; padding: 0; list-style: none; text-transform: uppercase; }
	body > header > nav > ul > li { margin: 0 0 0 1em; padding: 0; }
}
@media (max-width: 767px) { /* mobile only */
	body > header { position: sticky; z-index: 1; top: 0; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 
		"hs      locale menu"
		"collins locale menu"
	; }
	body > header > .hs      { grid-area: hs; margin: 0; padding: 0; }
	body > header > .collins { grid-area: collins; display: block; }
	body > header > .locale  { grid-area: locale; justify-self: end; display: block; margin: 0; padding: 0; }
	body > header > .menu    { grid-area: menu; justify-self: end; display: block; }
	
	/* Top was formerly 100% but this didn't work on iOS so the top offset was fixed to a value that worked */
	body > header > nav { position: absolute; left: 0; right: 0; top: 3.25em; }
	body > header > nav > ul { margin: 0; padding: 0; list-style: none; font-size: 1.25em; background: white; }
	body > header > nav > ul > li { overflow: hidden; max-height: 0; transition: max-height 0.2s; }
	body > header > nav > ul > li > a { display: block; margin: 0; padding: 0.5em 1.125em; text-align: right; }
	body > header.open > nav li { max-height: 2.25em; }
	
	/* IE compatibility */
	body > header { display: -ms-grid; -ms-grid-columns: auto 1fr auto 1fr auto; }
	body > header > .hs      { -ms-grid-row: 1; -ms-grid-column: 1; }
	body > header > .locale  { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-row-span: 2; /* -ms-grid-column-align: end; broken... */ }
	body > header > .menu    { -ms-grid-row: 1; -ms-grid-column: 5; -ms-grid-row-span: 2; }
	body > header > .collins { -ms-grid-row: 2; -ms-grid-column: 1; }
	
	/* Detail styles */
	body > header { padding: 0.5em; font-size: calc(100vw * 0.04); }
	body > header > .hs { font-size: 0.8em; }
	body > header > .collins { font-size: 1.15em; }
	/* Vertically centering of the language switcher is off in Chrome by a few pixels (but is fine in Firefox and others) so we do it manually */
	body > header > .locale { font-size: 0.8em; margin: 0; padding: 1em 1em 0 1em; /* display: flex; align-items: center; */ }
	body > header > .menu { font-size: 2em; margin: 0; padding: 0 0.5em; line-height: 0.5em;
		display: flex; align-items: center;
		font-family: MaterialIcons; font-weight: normal;
		font-feature-settings: 'liga'; /* IE support taken from https://github.com/google/material-design-icons/blob/master/iconfont/material-icons.css */}
	
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* Disable position: sticky; for IE11 since it doesn't open a new stacking context
	   and screws up our positioning. Query from https://stackoverflow.com/a/20541859. */
	body > header { position: relative; }
}
@media (max-width: 767px) and (orientation: landscape) { /* mobile landscape only */
	body > header { font-size: calc(100vw * 0.03); }
	body > header > nav > ul { font-size: 1em; }
}
@media (max-width: 767px) and (orientation: portrait) { /* mobile portrait only */
}



/* main area and page banner */
body > main { position: relative; }
body > main > .banner { position: absolute; top: 0; height: 350px; left: 50%; right: 50%; margin: 0 -50vw;
	background-position: center center; background-repeat: no-repeat; background-size: cover; }
body > main > .banner + h2 { position: absolute; top: 260px; left: 0.75rem /*calc(0.75rem + 33%)*/; right: 0;
	font-size: 2em; margin: 0; padding: 0; color: white; text-shadow: 0 0 5px rgb(0, 0, 0); }

@media (min-width: 768px) { /* tablet and desktop only */
	body > main { padding: 0.75em; }
	body > main.with-banner { padding-top: calc(350px + 0.75em); }
}
@media (max-width: 767px) { /* mobile only */
	body > main { padding: 0.5em; }
	body > main > .banner { height: 200px; }
	body > main.with-banner { padding-top: calc(200px + 0.5em); }
	body > main > .banner + h2 { top: 128px; font-size: 1.5em; }
}



/* page footer */
body > footer { font-size: 0.77em; }
body > footer > .slogan { margin: 0; padding: 0; }
body > footer > .slogan > span { display: block; }
body > footer > address { font-style: normal; }

@media (min-width: 768px) { /* tablet and desktop only */
	body > footer { padding: 0.75em; display: grid; grid-template: 
		"slogan address"
		"nav    address"
	; }
	body > footer > .slogan { grid-area: slogan; align-self: start; }
	body > footer > nav     { grid-area: nav; align-self: end; }
	body > footer > address { grid-area: address; display: block; justify-self: end; align-self: start; }
	
	/* IE compatibility */
	body > footer { display: -ms-grid; -ms-grid-columns: auto 1fr auto; }
	body > footer > .slogan { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-row-align: start; }
	body > footer > nav     { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-row-align: end; }
	/* -ms-grid-column-align: end; is ignored (looks like an IE bug), workaround: add an 1fr column in the middle to use up the free space. */
	body > footer > address { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-row-span: 2; }
	
	/* Detail styles */
	body > footer > nav > ul { margin: 0; padding: 0; list-style: none; display: flex; }
	body > footer > nav > ul > li { margin-right: 1em; }
	body > footer > nav > ul > li::after { content: '|'; margin-left: 1em; color: gray; }
	body > footer > nav > ul > li:last-of-type::after { content: none; }
	
	body > footer address > p { margin: 0; padding: 0; }
	body > footer address > p:first-of-type { margin-bottom: 1em; }
}
@media (max-width: 767px) { /* mobile only */
	body > footer { display: grid; grid-template: 
		"slogan	nav"
		"address address"
	; }
	body > footer > .slogan { grid-area: slogan; }
	body > footer > nav     { grid-area: nav; }
	body > footer > address { grid-area: address; display: block; }
	
	/* IE compatibility */
	body > footer { display: -ms-grid; -ms-grid-columns: auto 1fr auto; }
	body > footer > .slogan { -ms-grid-row: 1; -ms-grid-column: 1; }
	body > footer > nav     { -ms-grid-row: 1; -ms-grid-column: 3; }
	body > footer > address { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 3; }
	
	/* Detail styles */
	body > footer { padding: 0.5em; }
	body > footer > nav > ul { margin: 0; padding: 0; list-style: none; text-align: right; }
	body > footer address > p:last-of-type { margin-bottom: 0; }
}



/* cookie banner */
/* Variant 1, before 2023-08-28
body > div.cookie-banner { position: fixed; z-index: 9999; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0, 0.75);
  display: flex; justify-content: center; align-items: center; }
body > div.cookie-banner > div { box-sizing: border-box; width: 500px; padding: 1em;
	background: white; text-align: justify; }
body > div.cookie-banner > div > h3 { margin: 0; padding: 0; }
body > div.cookie-banner > div > :last-child { margin-bottom: 0; }
body > div.cookie-banner > div > p.links > a { padding-right: 2em; }
*/

body > div.cookie-banner { position: fixed; z-index: 9999; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0, 0.2); }
body > div.cookie-banner > div { position: absolute; left: 0; right: 0; bottom: 0; padding: 1em;
	background: white; text-align: justify; }
body > div.cookie-banner > div > h3 { margin: 0; padding: 0; }
body > div.cookie-banner > div > :last-child { margin-bottom: 0; }
body > div.cookie-banner > div > p.links > a { padding-right: 2em; }

body > div.cookie-banner.accepted { display: none; }

@media (min-width: 768px) { /* tablet and desktop only */
	body > div.cookie-banner > div { padding: 1em calc((100vw - 768px) / 2); }
}
@media (max-width: 767px) { /* mobile only */
}



/* RTX redesign */
body { color: black; background: white; }

body > header { position: relative; background: none; }
body > header::after { content: ''; position: absolute; bottom: 0; left: -50vw; right: -50vw; height: 3px; background: #ce1126; }
body > header::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -50vw; right: -50vw; background: transparent; }
body > header > a.collins { background-image: url('../design/collins-aerospace-2023.png'); margin-top: 3px; }
body > header a { font-weight: bold; }

body > footer { position: relative; }
body > footer::after { content: ''; position: absolute; top: -3px; left: -50vw; right: -50vw; height: 3px; background: #ce1126; }
body > footer::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -50vw; right: -50vw; background: rgb(217, 217, 214); }




@media (min-width: 768px) { /* tablet and desktop only */
}
@media (max-width: 767px) { /* mobile only */
}
@media (max-width: 767px) and (orientation: landscape) { /* mobile landscape only */
}
@media (max-width: 767px) and (orientation: portrait) { /* mobile portrait only */
}