/* Normalize */
@import url('./normalize.css');

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,300;1,600&family=IBM+Plex+Sans:ital@0;1&display=swap');

/* Variables */
:root {
  --rem-min: 16px;
  --rem-max: 22px;

  --color-main: #005bff;
  --color-text: #5f6066;
  --color-secondary: #8396a8;
  --color-black: black;
  --color-white: white;
  --color-bg-light: #e8e9f0;

  --fontSize-S: 0.85rem;
  --fontSize-M: 1rem;
  --fontSize-Mplus: 1.05rem;
  --fontSize-L: 1.2rem;
  --fontSize-XL: 2rem;
  --fontSize-XXL: 2.5rem;

  --fontFamily-base: 'IBM Plex Sans', sans-serif;
  --fontFamily-monospace: 'IBM Plex Mono', monospace;

  --fontWeight-normal: 400;
  --fontWeight-bold: 600;

  --lineHeight-S: 1.15;
  --lineHeight-M: 1.5;

  --margin-XS: 0.4rem;
  --margin-S:  0.6rem;
  --margin-M:  1rem;
  --margin-ML: 1.5rem;
  --margin-L:  2rem;
  --margin-XL: 4rem;

  --borderRadius-M: 3px;

  --border-light: 1px dotted var(--color-secondary);
  --border-medium: 1px dotted var(--color-main);

  --maxWidth-text: 50rem;

  --opacity-less: 0.8;

  --zIndex-base: 0;
  --zIndex-front-1: 100;
  --zIndex-front-5: 500;
  --zIndex-front-max: 1000;

  --transition-medium: 350ms ease-in-out;
  transition: font-size var(--transition-medium);
}

@media (max-width: 600px) {
  :root {
    --margin-S: 0.6rem;
    --margin-M: 0.8rem;
    --margin-L: 1.6rem;
    --margin-XL: 1.6rem; /* Match L */
  }
}
/* Smooth rem transition from w1000 to w2000 
   DOESN'T WORK, USE CLAMPS INSTEAD */
@media (min-width: 1000px) {
  :root {
    font-size: calc(var(--rem-min) + (var(--rem-max) - var(--rem-min)) * 0.2);
  }
}
@media (min-width: 1150px) {
  :root {
    font-size: calc(var(--rem-min) + (var(--rem-max) - var(--rem-min)) * 0.4);
  }
}
@media (min-width: 1300px) {
  :root {
    font-size: calc(var(--rem-min) + (var(--rem-max) - var(--rem-min)) * 0.6);
  }
}
@media (min-width: 1450px) {
  :root {
    font-size: calc(var(--rem-min) + (var(--rem-max) - var(--rem-min)) * 0.8);
  }
}
@media (min-width: 1600px) {
  :root {
    font-size: var(--rem-max);
  }
}
/* See below for component-specific media queries */

/* General */

* {
  box-sizing: border-box;
}

[onclick] {
  cursor: pointer;
}

p:first-child {
  margin-top: 0rem;
}
p:last-child {
  margin-bottom: 0rem;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child {
  margin-top: 0rem;
}

/* Typography */

body {
  color: var(--color-text);
  font-family: var(--fontFamily-base);
  line-height: var(--lineHeight-M);
  position: relative;
}

input,
option,
select,
textarea,
.monospace {
  font-family: var(--fontFamily-monospace);
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--color-main);
  font-family: var(--fontFamily-monospace);
  font-weight: var(--fontWeight-bold);
  line-height: var(--lineHeight-S);
}

h1 {
  font-size: var(--fontSize-XXL);
}

h2 {
  font-size: var(--fontSize-L);
  text-transform: uppercase;
}

h3 {
  font-size: var(--fontSize-L);
}

h4 {
  font-size: var(--fontSize-Mplus);
}

h5 {
  font-size: var(--fontSize-Mplus);
  color: var(--color-text);
  margin-top: var(--margin-XL);
}

h5:first-child {
  margin-top: var(--margin-M);
}

caption,
figcaption {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--fontSize-S);
  font-weight: var(--fontWeight-normal);
  margin-bottom: var(--margin-M);
  text-align: left;
  text-transform: uppercase;
  color: var(--color-text);
}

.noUC {
  text-transform: none !important;
}

strong {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: var(--fontWeight-bold);
}

ul {
  list-style: none;
  padding: 0rem;
}

ul > li {
  margin: 0rem;
  padding: 0rem 0rem 0rem var(--margin-L);
  position: relative;
}

ul > li::before {
  content: "—";
  color: var(--color-main);
  display: block;
  position: absolute;
  left: 0px;
}

/* Tables */

table {
  margin-top: var(--margin-XL);
  min-width: 60%;
}

td,
th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--fontSize-S);
  padding: var(--margin-XS) var(--margin-ML) var(--margin-XS) 0px;
  border-bottom: var(--border-light);
  white-space: nowrap;
}

td:last-child,
th:last-child {
  padding-right: 0px;
}

/*
tbody tr:last-child td,
tbody tr:last-child th,
table > tr:last-child td,
table > tr:last-child th  {
  border-bottom-style: none;
}
*/

th {
  font-weight: var(--fontWeight-bold);
  text-align: left;
}

td,
thead th {
  text-align: right;
}

thead th:first-child {
  text-align: left;
}

th.text,
td.text {
  text-align: left;
  white-space: auto;
}

th.number,
td.number {
  text-align: right;
}

/* Figures */

figure {
  margin: 0px;
  margin-top: var(--margin-L);
  max-width: 100%;
}

figure > img {
  max-width: 100%;
}

.figurePair {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.figurePair > figure {
  width: calc(50% - var(--margin-M) / 2);
}

/* Links */

a:link,
a:hover,
a:active,
a:visited {
  color: var(--color-main);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* Common */

.small {
  font-size: var(--fontSize-S);
}

button {
  background-color: var(--color-main);
  color: var(--color-white);
  border-radius: var(--borderRadius-M);
  padding: var(--margin-S) var(--margin-M);
  text-align: center;
  min-width: 10rem;
  border: none;
  cursor: pointer;
}

.button--clear {
  display: block;
  margin: var(--margin-S);
}

.button--clear:first-child {
  margin-left: 0rem;
}
.button--clear:last-child {
  margin-right: 0rem;
}

.subheading {
  color: var(--color-text);
  display: block;
}

.nextArrow {
  display: block;
  width: 3.5rem;
  left: calc(50% - 1rem);
  position: absolute;
  bottom: var(--margin-M);
  cursor: pointer;
}

.nextArrow::before {
  content: url('../images/icon-arrow-down-coloured.svg');
}

.iconList {
  margin: var(--margin-M) 0rem;
  padding-left: 0rem;
  list-style: none;
}

.iconList > li {
  margin: 0rem;
  padding: var(--margin-M) 0rem var(--margin-M) 3rem;
  position: relative;

  border-bottom: var(--border-medium);
}

.iconList > li:first-of-type {
  border-top: var(--border-medium);
}

.iconList > li::before {
  display: block;
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  /* top: calc(var(--margin-M) + 0.35rem); */
  top: calc(50% - 1.25rem);
  left: 0rem;
}

li.iconList--recycling::before {
  content: url('../images/icon-recycling-coloured.svg');
}

li.iconList--lightbulb::before {
  content: url('../images/icon-lightbulb-coloured.svg');
}

li.iconList--academic::before {
  content: url('../images/icon-academic-coloured.svg');
}

.accordion {
  margin-bottom: var(--margin-L);
}

.accordion > article {
  margin-bottom: var(--margin-M);
  background-color: var(--color-bg-light);
  border-radius: var(--borderRadius-M);
}

.accordion > article > header {
  position: relative;
  padding: var(--margin-M) calc(2 * var(--margin-M) + 1.5rem) var(--margin-M) var(--margin-M);
  cursor: pointer;
}

.accordion > article > header > h3,
.accordion > article > header > h4 {
  margin: 0rem;
}

.accordion > article > header::after {
  content: url('../images/icon-arrow-down-coloured.svg');
  display: block;
  position: absolute;
  width: 2.5rem;
  height: 2rem;
  right: var(--margin-M);
  top: calc(50% - 1rem);
  transition: all var(--transition-medium);
  transform: rotate(0deg);
}

.accordion > article.accordion--expanded > header::after {
  transform: rotate(180deg);
}

.accordion > article > .accordion-content {
  padding: 0rem var(--margin-M);
  max-height: 0;
  overflow: hidden;
  transition: all var(--transition-medium);
}
.accordion > article.accordion--expanded > .accordion-content {
  padding: var(--margin-M) var(--margin-M);
  overflow: visible;
}
.accordion > article > .accordion-content::before {
  content: "";
  position: relative;
  display: block;
  top: calc(-1 * var(--margin-M));
  height: 0px;
  border-top: var(--border-light);
  opacity: 0;
  transition: all var(--transition-medium);
}
.accordion > article.accordion--expanded > .accordion-content::before {
  opacity: 1;
}

.card {
  border-radius: var(--borderRadius-M);
  padding: var(--margin-M);
  background-color: var(--color-white);
}

.cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: stretch;
  /* Negate items' margin */
  margin: calc(-1 * var(--margin-M)) calc(-1 * var(--margin-S)); 
}

.cols > .col {
  margin: var(--margin-M) var(--margin-S);
  min-width: 10rem;
  flex-grow: 1;
}



/* Layout */

#mainNav {
  display: flex;
  position: absolute;
  left: var(--margin-XL);
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  z-index: var(--zIndex-front-5);

  color: var(--color-white);
  font-family: var(--fontFamily-monospace);
  font-weight: var(--fontWeight-bold);
}

#logo {
  width: 14rem;
  max-width: 45vw;
  min-width: 8rem;
  /* Counter protected area */
  transform: translateX(-11.845467%);
}

#mainNav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-grow: 1;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#mainNav ul > li {
  margin: 0px;
  margin-right: var(--margin-M);
  padding: 0px;
}

#mainNav ul > li::before {
  display: none;
}

@media (max-width: 500px) {
  #mainNav {
    width: calc(100% - 2 * var(--margin-XL));
    align-items: flex-start;
  }
  #mainNav ul {
    flex-direction: column;
    align-items: flex-end;
    margin-top: var(--margin-S)
  }
  #mainNav ul li {
    margin: var(--margin-S) 0rem 0rem 0rem;
  }
}

#mainNav a:link,
#mainNav a:hover,
#mainNav a:active,
#mainNav a:visited {
  color: var(--color-white);
  text-decoration: none;
}

#mainNav a:hover {
  text-decoration: underline;
}

#cookieConsent {
  z-index: var(--zIndex-front-max);
  position: fixed;
  bottom: var(--margin-M);
  left: var(--margin-M);
  right: var(--margin-M);
  background-color: var(--color-secondary);
  border: 0;
  border-radius: var(--borderRadius-M);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  animation: 1500ms ease-in-out slideUp;
  transition: bottom 500ms ease-in-out;
}

/* This includes 2/3 delay */
@keyframes slideUp {
  0%   { bottom: calc(-5rem - var(--margin-M)); }
  67%  { bottom: calc(-5rem - var(--margin-M)); }
  100% { bottom: var(--margin-M); }
}

#cookieConsent.closed {
  bottom: calc(-5rem - var(--margin-M));
}

#cookieConsent > p {
  margin: 0;
  flex-grow: 1;
  color: var(--color-black);
  font-size: var(--fontSize-S);
}

#cookieConsent > button.cancel {
  margin-left: var(--margin-M);
  flex-grow: 0;
  font-size: var(--fontSize-S);
  border: 0;
  background-color: transparent;
  color: var(--color-black);
}

#cookieConsent > button.okay {
  margin-left: var(--margin-M);
  flex-grow: 0;
  font-size: var(--fontSize-S);
  border: 0;
  background-color: var(--color-main);
  color: var(--color-white);
}


body > section {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* border-bottom: var(--border-medium); */
}

body > section > .sectionContent {
  max-width: var(--maxWidth-text);
  width: 100%;
  padding: var(--margin-L);
}

#start {
  background-image: url('../images/background-architecture.jpg');
  background-size: cover;
  min-height: 100vh;
}

#start > .sectionContent {
  max-width: 60rem;
  padding: var(--margin-XL);
}

#start h1 {
  color: var(--color-white);
}

#start .nextArrow::before {
  content: url('../images/icon-arrow-down-white.svg');
}

#about {

}

#products {
  background-color: var(--color-bg-light);
}

#products .accordion > article {
  background-color: var(--color-white) !important;
}

#contact {
  background-image: url('../images/background-steel-rolls.jpg');
  background-size: cover;
  min-height: 100vh;
}

#contact h2 {
  color: var(--color-white);
}

#contact .card {
  width: 100%;
}

.phoneNumber {
  display: block;
  margin: var(--margin-S) var(--margin-M);
}

.copyright {
  color: var(--color-white);
  font-family: var(--fontFamily-monospace);
  font-size: var(--fontSize-S);
  opacity: var(--opacity-less);
  position: absolute;
  bottom: var(--margin-M);
  text-align: center;
}

#supporters {
  background-color: var(--color-bg-light);
  min-height: unset !important;
  padding-bottom: 5rem; /* For cookie consent */
}

#supporters h2 {
  text-align: center;
}

.euLogos {
  max-width: 26rem;
  margin: 0 auto;
}

.euLogos a {
  text-decoration: none !important;
}

.eitRawLogo {
  width: 39%;
  margin-right: 5%;
  vertical-align: middle;
}

.euLogo {
  width: 53%;
  vertical-align: middle;
}