/* 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: black; background: white; }
.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 { width: 82%; max-width: 1350px; box-sizing: border-box; margin: 0 auto; }
	body > :is(main, 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; }
	body > footer { margin-top: 3em; }
}
@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('collins_logo.svg') no-repeat left center; background-size: contain; }
body > header { position: relative; z-index: 1; }
body > header::after { content: ''; position: absolute; bottom: 0; left: -50vw; right: -50vw; height: 10px; box-shadow: 0 4px 5px -4px rgba(0,0,0,.2); }
body > header > .rtx-banner { padding: 8px 36px 7px; display: flex; gap: 32px; font-size: 11px; letter-spacing: 0.5px; background-color: #565757; color: #d9d9d6; }
body > header > .rtx-banner > a.active { font-weight: bold; color: white; }
body > header > .rtx-banner > a:is(:hover, :focus, :active) { color: white; text-decoration: underline; }
body > header > .rtx-banner > a.stock { margin-left: auto; }
body > header > .rtx-banner > a.stock > .change::before { content: "|"; margin: 0 8px; }

@media (min-width: 767px) { /* tablet and desktop only */
	body > header { display: grid; grid-row-gap: 0; grid-template-areas: 
		"banner"
		"logo"
		"nav"
	; }
	body > header > .rtx-banner { grid-area: banner; }
	body > header > .collins    { grid-area: logo; }
	body > header > nav         { grid-area: nav; }
	body > header > .menu       { display: none; }
	
	/* Detail styles */
	body > header > .rtx-banner { margin: 0 calc((100vw - 100%) / -2); }
	
	body > header > .collins { height: 74px; margin: 12px 0; position: relative; left: -49px; }
	
	body > header > nav a { font-weight: bold; }
	body > header > nav > ul { font-size: 14px; font-weight: normal; display: flex; flex-wrap: wrap; margin: 0 0 12px 0; padding: 0; list-style: none; }
	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: 1fr auto; grid-template-areas: 
		"banner banner"
		"logo   menu"
		"nav    nav"
	; }
	body > header > .rtx-banner { grid-area: banner; }
	body > header > .collins    { grid-area: logo; }
	body > header > nav         { grid-area: nav; }
	body > header > .menu       { grid-area: menu; justify-self: end; display: block; }
	
	/* Detail styles */
	body > header > .rtx-banner { padding: 8px 24px 7px; }
	body > header > .rtx-banner a:nth-of-type(1n + 3):not(.stock, .locale) { display: none; }
	
	body > header > .collins { height: 37px; margin: 12px 24px; }
	body > header > .menu { font-size: 1.5em; margin: 0; padding: 0 22px; 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 */}
	
	/* 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: 0; }
	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; }
}
@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: calc(0.75rem + 33%); right: 0;
	font-size: 2em; margin: 0; padding: 0; color: white; text-shadow: 0 0 5px rgb(0, 0, 0); }
*/
body > main > .banner { position: relative; height: 350px; background-position: center center; background-repeat: no-repeat; background-size: cover; }
body > main > .banner + h2 { position: absolute; top: 260px; left: 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: 1em 0.75em 0.75em 0.75em; }
	body > main.with-banner {}
	
	body > main > .banner { margin: 0 calc((100vw - 768px) / -2 - 0.75em + (100vw - min(82vw, 1350px)) / 2) 1em; width: 82vw; max-width: 1350px; }
}
@media (max-width: 767px) { /* mobile only */
	body > main { padding: 0.5em; }
	body > main > .banner { height: 200px; }
	body > main.with-banner {}
	body > main > .banner + h2 { top: 128px; font-size: 1.5em; }
}



/* page footer */
body > footer { font-size: 0.77em; background-color: #363737; color: white; letter-spacing: 0.5px; }
body > footer { position: relative; }
body > footer::after { content: ''; position: absolute; top: -4px; left: -50vw; right: -50vw; height: 4px; background: #ce1126; }
body > footer::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -50vw; right: -50vw; background: #363737; }

body > footer a { color: white; }
body > footer a.active { font-weight: bold; }
body > footer a:is(:hover, :focus, :active) { text-decoration: underline; }

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 > nav     { grid-area: nav; align-self: end; }
	body > footer > address { grid-area: address; display: block; justify-self: end; align-self: start; }
	
	/* 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 > nav     { grid-area: nav; }
	body > footer > address { grid-area: address; display: block; }
	
	/* 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 */
body > div.cookie-banner { position: fixed; z-index: 9999; left: 0; top: 0; bottom: 0; width: 100vw; 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; }
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:last-child > a { margin-right: 2em; }

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

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



/* RTX font */
@font-face { font-family: rtx-font; src: url("rtx-font_w_rg.woff2"); font-weight: normal; font-display: swap; }
@font-face { font-family: rtx-font; src: url("rtx-font_w_bd.woff2"); font-weight: bold;   font-display: swap; }
body { font-family: rtx-font, sans-serif; }
body > header { font-weight: normal; }
body > header > nav a { font-weight: bold; }
body > header > .rtx-banner { font-size: 10px; line-height: 15px; letter-spacing: 0.3px; }
body > footer { font-size: 12px; }

@media (min-width: 768px) { /* tablet and desktop only */
}



@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 */
}